Making headway on basic app list styles.
This contains changes for the basic app list cards, as well as the nav bar and the search bar. Attempting to strip down as much of the Bootstrap app as possible, so that we can eventually remove it.
This commit is contained in:
parent
f10a572d6f
commit
1456665687
File diff suppressed because it is too large
Load Diff
Binary file not shown.
After Width: | Height: | Size: 214 B |
|
@ -1,10 +1,43 @@
|
|||
:root {
|
||||
--light-blue: #6A9CFF;
|
||||
--dark-blue: #000099;
|
||||
--light-pink: #FF4F88;
|
||||
--dark-pink: #7E5E69;
|
||||
|
||||
--white: #FFFFFF;
|
||||
--black: #000000;
|
||||
}
|
||||
|
||||
body {
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
min-height: 92vh;
|
||||
}
|
||||
|
||||
i.fas, i.fab {
|
||||
display: inline-block;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.app-category {
|
||||
background-color: var(--light-blue);
|
||||
color: var(--white);
|
||||
}
|
||||
.recommended-card {
|
||||
}
|
||||
|
||||
.smaller-card {
|
||||
border: 1px solid var(--dark-pink);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
width: 100%;
|
||||
height: 16vw;
|
||||
|
@ -15,9 +48,13 @@ body {
|
|||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
i.fas, i.fab {
|
||||
display: inline-block;
|
||||
margin-right: 0.3rem;
|
||||
/* Navbar */
|
||||
.navbar-text {
|
||||
color: var(--dark-blue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--light-pink);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
|
@ -290,23 +290,15 @@ viewApp app =
|
|||
Route.toString <| Route.App_String { app = app.slug }
|
||||
in
|
||||
div [ class "col-md-4 mb-3 col-sm-12" ]
|
||||
[ div [ class "card" ]
|
||||
[ div [ class "smaller-card" ]
|
||||
[ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
|
||||
, div [ class "card-body" ]
|
||||
[ h5 [ class "card-title" ]
|
||||
[ a [ href app_href ] [ text app.name ] ]
|
||||
, p [] [ text (ellipsis 100 (withDefault "" app.description)) ]
|
||||
, repository_link
|
||||
, website_link
|
||||
, a [ class "card-link", href app_href ]
|
||||
[ i [ class "fas fa-book" ] []
|
||||
, text "docs"
|
||||
]
|
||||
]
|
||||
, div [ class "card-footer" ]
|
||||
[ span [ class "card-link badge badge-secondary" ] [ text app.category ]
|
||||
, viewStatusBadge app
|
||||
]
|
||||
[ span [ class "card-link badge app-category" ] [ text app.category ]]
|
||||
]
|
||||
]
|
||||
|
||||
|
@ -342,9 +334,11 @@ viewApps model =
|
|||
div []
|
||||
[ div [ class "row" ]
|
||||
[ div [ class "col-sm-12" ] [
|
||||
div [ class "filter card bg-white" ] [
|
||||
div [] [
|
||||
form [ class "card-body form-inline" ] [
|
||||
label [ for "level" ] [ text "Max. level" ]
|
||||
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)" ]
|
||||
|
@ -352,16 +346,7 @@ viewApps model =
|
|||
, option [ value "3" ] [ text "3 (alpha)" ]
|
||||
, option [ value "4" ] [ text "4 (pre-alpha)" ]
|
||||
]
|
||||
, label [ for "category" ] [ text "Category" ]
|
||||
, select [ class "ml-2 mr-4 form-control", id "category", onInput FilterCategory ] (
|
||||
option [ ] [ text "any" ]
|
||||
:: (List.map viewCategoryOption categories.list)
|
||||
)
|
||||
, label [ for "text" ] [ text "Search" ]
|
||||
, input [ class "ml-2 form-control", id "text", onInput FilterText ] []
|
||||
, div [ class "ml-auto badge badge-secondary" ] [
|
||||
text (String.fromInt (List.length model.results) ++ " recipes")
|
||||
]
|
||||
, text "builds "
|
||||
]
|
||||
]
|
||||
]
|
||||
|
|
|
@ -68,21 +68,20 @@ view :
|
|||
view { page, toMsg } model =
|
||||
{ title = page.title
|
||||
, body =
|
||||
[ div [ class "bg-dark" ]
|
||||
[ div [ class "background" ]
|
||||
[ nav
|
||||
[ class "navbar navbar-expand-lg sticky-top font-weight-bold"
|
||||
, style "background" "#ff4f88" ]
|
||||
[ a [ class "navbar-brand text-dark", href (Route.toString Route.Top) ]
|
||||
[ class "navbar navbar-expand-lg sticky-top font-weight-bold" ]
|
||||
[ a [ class "navbar-brand navbar-text", href (Route.toString Route.Top) ]
|
||||
[ img
|
||||
[ src "/logo.png"
|
||||
[ src "/logo-2.png"
|
||||
, class "d-inline-block align-top mr-2"
|
||||
, alt ""
|
||||
, width 30
|
||||
, height 30 ] []
|
||||
, width 48
|
||||
, height 16 ] []
|
||||
, text "abra recipes"
|
||||
]
|
||||
, ul [ class "navbar-nav" ]
|
||||
[ li [ class "nav-tem" ] [ a [ class "nav-link text-dark", href (Route.toString Route.About) ] [ text "about" ] ]
|
||||
[ li [ class "nav-tem" ] [ a [ class "nav-link navbar-text", href (Route.toString Route.About) ] [ text "about" ] ]
|
||||
]
|
||||
]
|
||||
, div [ class "container-fluid" ] page.body
|
||||
|
|
Loading…
Reference in New Issue