Merge pull request 'Start to the style changeover via Figma designs' (#15) from em_add-styles into main
continuous-integration/drone/push Build is passing Details

Reviewed-on: #15
This commit is contained in:
Eiven Mitchell 2022-04-25 18:53:14 +00:00
commit 3b57477e62
5 changed files with 3370 additions and 70 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,23 +1,134 @@
:root {
--light-blue: #6A9CFF;
--dark-blue: #000099;
--light-pink: #FF4F88;
--dark-pink: #7E5E69;
--white: #FFFFFF;
--black: #000000;
}
body {
}
.app-headings {
font-size: 24px;
}
.background {
background-color: none;
}
.container-fluid {
min-height: 92vh;
}
i.fas, i.fab {
display: inline-block;
margin-right: 0.3rem;
}
/* Categories */
.category-tile {
cursor: pointer;
}
.category-tile:hover {
color: var(--white);
background-color: var(--light-blue);
border-radius: 5px;
}
/* Cards */
.app-category {
background-color: var(--light-blue);
color: var(--white);
}
.card-description {
width: 95%;
padding: 0em;
margin: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card.filter {
margin-bottom: 0.8rem;
}
.footer {
background-color: none;
border: none;
padding: 0.1em 0.75em;
text-align: center;
width: 85%;
margin: 0 auto;
height: 10%;
}
.card-img-top {
width: 100%;
height: 16vw;
object-fit: cover;
}
.card.filter {
margin-bottom: 0.8rem;
.smaller-card {
border: 1px solid var(--dark-pink);
border-radius: 20px;
overflow: hidden;
}
i.fas, i.fab {
display: inline-block;
margin-right: 0.3rem;
.recommended-card {
}
.title-container {
text-align: center;
}
.title {
color: var(--dark-blue);
}
/* 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);
text-align: center;
}
.navbar {
margin: auto;
background-color: var(--light-pink);
}
@media (min-width: 768px) {

View File

@ -68,6 +68,7 @@ type Category
| Utilities
| Development
| Graveyard
| All
categories : Enum Category
@ -76,6 +77,7 @@ categories =
[ ( "Apps", Apps )
, ( "Utilities", Utilities )
, ( "Development", Development )
, ("All", All)
]
@ -121,9 +123,12 @@ filterAppsCategory : List App -> Maybe Category -> List App
filterAppsCategory apps category =
case category of
Just c ->
List.filter (\app ->
app.category == categories.toString c
) apps
if c == All then
apps
else
List.filter (\app ->
app.category == categories.toString c
) apps
Nothing ->
apps
@ -289,34 +294,24 @@ 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 "card" ]
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" ]
[ 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
[ h5 [ class "title-container" ]
[ a [ class "title", href app_href ] [ text app.name ] ]
, p [ class "card-description" ] [ text (ellipsis 100 (withDefault "" app.description)) ]
]
, div [ class "footer" ]
[ span [ class "badge app-category" ] [ text app.category ]]
]
]
viewCategoryOption : (String, Category) -> Html Msg
viewCategoryOption category =
option
[ value (categories.toString (Tuple.second category) ) ]
[ text (categories.toString (Tuple.second category) ) ]
viewCategories : (String, Category) -> Html Msg
viewCategories category =
div [ class "category-tile", onClick (FilterCategory (Tuple.first category)) ] [text (Tuple.first category)]
@ -339,46 +334,45 @@ viewApps model =
]
Success ->
div []
[ div [ class "row" ]
[ div [ class "col-sm-12" ] [
div [ class "filter card bg-white" ] [
form [ class "card-body form-inline" ] [
label [ for "level" ] [ text "Max. level" ]
, 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)" ]
]
, 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")
div [ class "row justify-content-center" ]
[ div [ class "col-md-3" ] [
h2 [ class "app-headings" ] [text "Categories"]
, div [] (List.map viewCategories categories.list)
]
, 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 "
]
]
]
]
]
, div [ class "row" ]
(List.map viewApp
(model.results
|> List.sortWith
(by .status ASC
|> andThen (String.toLower << .name) ASC
)
, h2 [ class "app-headings" ] [ text "Apps" ]
, div [ class "row" ]
(List.map viewApp
(model.results
|> List.sortWith
(by .status ASC
|> andThen (String.toLower << .name) ASC
)
)
)
)
]
, div [class "col-md-3"] []
]
-- HTTP

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