More work on card list.

This commit is contained in:
Eiven Mitchell 2022-04-09 10:34:31 -04:00
parent 47b3b626ec
commit 00c29418d7
2 changed files with 62 additions and 30 deletions

View File

@ -33,8 +33,12 @@ i.fas, i.fab {
}
.card-description {
width: 85%;
width: 95%;
padding: 0em;
margin: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card.filter {
@ -44,10 +48,11 @@ i.fas, i.fab {
.footer {
background-color: none;
border: none;
padding: 0.75em;
padding: 0.1em 0.75em;
text-align: center;
width: 85%;
margin: auto;
margin: 0 auto;
height: 10%;
}
.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-text {
color: var(--dark-blue);

View File

@ -289,7 +289,7 @@ viewApp app =
app_href =
Route.toString <| Route.App_String { app = app.slug }
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" ]
[ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
, div [ class "card-body" ]
@ -331,39 +331,41 @@ viewApps model =
]
Success ->
div []
[ div [ class "row" ]
[ div [ class "col-sm-12" ] [
div [] [
form [ class "card-body form-inline" ] [
label [ for "text" ] [ text "Search" ]
, input [ class "ml-2 form-control", id "text", onInput FilterText ] []
, label [ for "level" ] [ text " and show only items that have at least " ]
, select [ class "ml-2 mr-4 form-control", id "level", onInput FilterScore ] [
option [ ] [ text "any" ]
, option [ value "1" ] [ text "1 (production)" ]
, option [ value "2" ] [ text "2 (beta)" ]
, option [ value "3" ] [ text "3 (alpha)" ]
, option [ value "4" ] [ text "4 (pre-alpha)" ]
div [ class "row justify-content-center" ]
[ div [ class "col-md-3" ] []
, div [ class "col-md-6" ]
[ div [ class "row" ]
[ div [ class "col-sm-12" ] [
div [] [
form [ class "search-bar-container" ] [
label [ for "text" ] [ text "Search" ]
, input [ class "search-bar-input", id "text", onInput FilterText ] []
, label [ for "level" ] [ text " and show only items that have at least " ]
, select [ class "search-dropdown", id "level", onInput FilterScore ] [
option [ ] [ text "any" ]
, option [ value "1" ] [ text "1 (production)" ]
, 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" ]
(List.map viewApp
(model.results
|> List.sortWith
(by .status ASC
|> andThen (String.toLower << .name) ASC
)
, div [ class "row" ]
(List.map viewApp
(model.results
|> List.sortWith
(by .status ASC
|> andThen (String.toLower << .name) ASC
)
)
)
)
]
, div [class "col-md-3"] []
]
-- HTTP