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:
Eiven Mitchell 2022-04-08 13:50:58 -04:00
parent f10a572d6f
commit 1456665687
5 changed files with 3251 additions and 34 deletions

3198
package-lock.json generated

File diff suppressed because it is too large Load Diff

BIN
public/logo-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 B

View File

@ -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) {

View File

@ -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 "
]
]
]

View File

@ -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