More work on card list.
This commit is contained in:
parent
47b3b626ec
commit
00c29418d7
|
@ -33,8 +33,12 @@ i.fas, i.fab {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-description {
|
.card-description {
|
||||||
width: 85%;
|
width: 95%;
|
||||||
|
padding: 0em;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.filter {
|
.card.filter {
|
||||||
|
@ -44,10 +48,11 @@ i.fas, i.fab {
|
||||||
.footer {
|
.footer {
|
||||||
background-color: none;
|
background-color: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0.75em;
|
padding: 0.1em 0.75em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
margin: auto;
|
margin: 0 auto;
|
||||||
|
height: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img-top {
|
.card-img-top {
|
||||||
|
@ -74,6 +79,31 @@ i.fas, i.fab {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Search bar*/
|
||||||
|
|
||||||
|
.search-bar-container {
|
||||||
|
margin: 2em;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar-input, .search-dropdown {
|
||||||
|
margin: 0.5em;
|
||||||
|
height: calc(1.5em + .75rem + 2px);
|
||||||
|
background-color: var(--white);
|
||||||
|
border: 1px solid var(--dark-pink);
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar-input {
|
||||||
|
width: 30rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-dropdown {
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Navbar */
|
/* Navbar */
|
||||||
.navbar-text {
|
.navbar-text {
|
||||||
color: var(--dark-blue);
|
color: var(--dark-blue);
|
||||||
|
|
|
@ -289,7 +289,7 @@ viewApp app =
|
||||||
app_href =
|
app_href =
|
||||||
Route.toString <| Route.App_String { app = app.slug }
|
Route.toString <| Route.App_String { app = app.slug }
|
||||||
in
|
in
|
||||||
div [ class "col-md-4 mb-3 col-sm-12" ]
|
div [ class "col-md-4 mb-4 col-sm-12" ]
|
||||||
[ div [ class "smaller-card" ]
|
[ div [ class "smaller-card" ]
|
||||||
[ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
|
[ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
|
||||||
, div [ class "card-body" ]
|
, div [ class "card-body" ]
|
||||||
|
@ -331,39 +331,41 @@ viewApps model =
|
||||||
]
|
]
|
||||||
|
|
||||||
Success ->
|
Success ->
|
||||||
div []
|
div [ class "row justify-content-center" ]
|
||||||
[ div [ class "row" ]
|
[ div [ class "col-md-3" ] []
|
||||||
[ div [ class "col-sm-12" ] [
|
, div [ class "col-md-6" ]
|
||||||
div [] [
|
[ div [ class "row" ]
|
||||||
form [ class "card-body form-inline" ] [
|
[ div [ class "col-sm-12" ] [
|
||||||
label [ for "text" ] [ text "Search" ]
|
div [] [
|
||||||
, input [ class "ml-2 form-control", id "text", onInput FilterText ] []
|
form [ class "search-bar-container" ] [
|
||||||
, label [ for "level" ] [ text " and show only items that have at least " ]
|
label [ for "text" ] [ text "Search" ]
|
||||||
, select [ class "ml-2 mr-4 form-control", id "level", onInput FilterScore ] [
|
, input [ class "search-bar-input", id "text", onInput FilterText ] []
|
||||||
option [ ] [ text "any" ]
|
, label [ for "level" ] [ text " and show only items that have at least " ]
|
||||||
, option [ value "1" ] [ text "1 (production)" ]
|
, select [ class "search-dropdown", id "level", onInput FilterScore ] [
|
||||||
, option [ value "2" ] [ text "2 (beta)" ]
|
option [ ] [ text "any" ]
|
||||||
, option [ value "3" ] [ text "3 (alpha)" ]
|
, option [ value "1" ] [ text "1 (production)" ]
|
||||||
, option [ value "4" ] [ text "4 (pre-alpha)" ]
|
, option [ value "2" ] [ text "2 (beta)" ]
|
||||||
|
, option [ value "3" ] [ text "3 (alpha)" ]
|
||||||
|
, option [ value "4" ] [ text "4 (pre-alpha)" ]
|
||||||
|
]
|
||||||
|
, text "builds "
|
||||||
]
|
]
|
||||||
, text "builds "
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
, div [ class "row" ]
|
||||||
, div [ class "row" ]
|
(List.map viewApp
|
||||||
(List.map viewApp
|
(model.results
|
||||||
(model.results
|
|> List.sortWith
|
||||||
|> List.sortWith
|
(by .status ASC
|
||||||
(by .status ASC
|
|> andThen (String.toLower << .name) ASC
|
||||||
|> andThen (String.toLower << .name) ASC
|
)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
)
|
]
|
||||||
|
, div [class "col-md-3"] []
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-- HTTP
|
-- HTTP
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue