More work on card list.
This commit is contained in:
parent
47b3b626ec
commit
00c29418d7
|
@ -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);
|
||||
|
|
|
@ -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,15 +331,17 @@ viewApps model =
|
|||
]
|
||||
|
||||
Success ->
|
||||
div []
|
||||
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 "card-body form-inline" ] [
|
||||
form [ class "search-bar-container" ] [
|
||||
label [ for "text" ] [ text "Search" ]
|
||||
, input [ class "ml-2 form-control", id "text", onInput FilterText ] []
|
||||
, input [ class "search-bar-input", 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 ] [
|
||||
, select [ class "search-dropdown", id "level", onInput FilterScore ] [
|
||||
option [ ] [ text "any" ]
|
||||
, option [ value "1" ] [ text "1 (production)" ]
|
||||
, option [ value "2" ] [ text "2 (beta)" ]
|
||||
|
@ -361,8 +363,8 @@ viewApps model =
|
|||
)
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
, div [class "col-md-3"] []
|
||||
]
|
||||
|
||||
-- HTTP
|
||||
|
||||
|
|
Loading…
Reference in New Issue