Compare commits
2 Commits
f10a572d6f
...
3b57477e62
Author | SHA1 | Date |
---|---|---|
Eiven Mitchell | 3b57477e62 | |
Eiven Mitchell | 72d1822cf0 |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
After Width: | Height: | Size: 214 B |
121
public/style.css
121
public/style.css
|
@ -1,23 +1,134 @@
|
||||||
|
:root {
|
||||||
|
--light-blue: #6A9CFF;
|
||||||
|
--dark-blue: #000099;
|
||||||
|
--light-pink: #FF4F88;
|
||||||
|
--dark-pink: #7E5E69;
|
||||||
|
|
||||||
|
--white: #FFFFFF;
|
||||||
|
--black: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-headings {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
background-color: none;
|
||||||
|
}
|
||||||
|
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
min-height: 92vh;
|
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 {
|
.card-img-top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 16vw;
|
height: 16vw;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.filter {
|
.smaller-card {
|
||||||
margin-bottom: 0.8rem;
|
border: 1px solid var(--dark-pink);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.fas, i.fab {
|
.recommended-card {
|
||||||
display: inline-block;
|
}
|
||||||
margin-right: 0.3rem;
|
|
||||||
|
.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) {
|
@media (min-width: 768px) {
|
||||||
|
|
|
@ -68,6 +68,7 @@ type Category
|
||||||
| Utilities
|
| Utilities
|
||||||
| Development
|
| Development
|
||||||
| Graveyard
|
| Graveyard
|
||||||
|
| All
|
||||||
|
|
||||||
|
|
||||||
categories : Enum Category
|
categories : Enum Category
|
||||||
|
@ -76,6 +77,7 @@ categories =
|
||||||
[ ( "Apps", Apps )
|
[ ( "Apps", Apps )
|
||||||
, ( "Utilities", Utilities )
|
, ( "Utilities", Utilities )
|
||||||
, ( "Development", Development )
|
, ( "Development", Development )
|
||||||
|
, ("All", All)
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
@ -121,9 +123,12 @@ filterAppsCategory : List App -> Maybe Category -> List App
|
||||||
filterAppsCategory apps category =
|
filterAppsCategory apps category =
|
||||||
case category of
|
case category of
|
||||||
Just c ->
|
Just c ->
|
||||||
List.filter (\app ->
|
if c == All then
|
||||||
app.category == categories.toString c
|
apps
|
||||||
) apps
|
else
|
||||||
|
List.filter (\app ->
|
||||||
|
app.category == categories.toString c
|
||||||
|
) apps
|
||||||
Nothing ->
|
Nothing ->
|
||||||
apps
|
apps
|
||||||
|
|
||||||
|
@ -289,34 +294,24 @@ viewApp app =
|
||||||
app_href =
|
app_href =
|
||||||
Route.toString <| Route.App_String { app = app.slug }
|
Route.toString <| Route.App_String { app = app.slug }
|
||||||
in
|
in
|
||||||
div [ class "col-md-4 mb-3 col-sm-12" ]
|
div [ class "col-md-4 mb-4 col-sm-12" ]
|
||||||
[ div [ class "card" ]
|
[ div [ class "smaller-card" ]
|
||||||
[ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
|
[ img [ class "card-img-top", src icon_url, alt ("icon for " ++ app.name) ] []
|
||||||
, div [ class "card-body" ]
|
, div [ class "card-body" ]
|
||||||
[ h5 [ class "card-title" ]
|
[ h5 [ class "title-container" ]
|
||||||
[ a [ href app_href ] [ text app.name ] ]
|
[ a [ class "title", href app_href ] [ text app.name ] ]
|
||||||
, p [] [ text (ellipsis 100 (withDefault "" app.description)) ]
|
, p [ class "card-description" ] [ 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
|
|
||||||
]
|
]
|
||||||
|
, div [ class "footer" ]
|
||||||
|
[ span [ class "badge app-category" ] [ text app.category ]]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
viewCategoryOption : (String, Category) -> Html Msg
|
viewCategories : (String, Category) -> Html Msg
|
||||||
viewCategoryOption category =
|
viewCategories category =
|
||||||
option
|
div [ class "category-tile", onClick (FilterCategory (Tuple.first category)) ] [text (Tuple.first category)]
|
||||||
[ value (categories.toString (Tuple.second category) ) ]
|
|
||||||
[ text (categories.toString (Tuple.second category) ) ]
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -339,46 +334,45 @@ viewApps model =
|
||||||
]
|
]
|
||||||
|
|
||||||
Success ->
|
Success ->
|
||||||
div []
|
div [ class "row justify-content-center" ]
|
||||||
[ div [ class "row" ]
|
[ div [ class "col-md-3" ] [
|
||||||
[ div [ class "col-sm-12" ] [
|
h2 [ class "app-headings" ] [text "Categories"]
|
||||||
div [ class "filter card bg-white" ] [
|
, div [] (List.map viewCategories categories.list)
|
||||||
form [ class "card-body form-inline" ] [
|
]
|
||||||
label [ for "level" ] [ text "Max. level" ]
|
, div [ class "col-md-6" ]
|
||||||
, select [ class "ml-2 mr-4 form-control", id "level", onInput FilterScore ] [
|
[ div [ class "row" ]
|
||||||
option [ ] [ text "any" ]
|
[ div [ class "col-sm-12" ] [
|
||||||
, option [ value "1" ] [ text "1 (production)" ]
|
div [] [
|
||||||
, option [ value "2" ] [ text "2 (beta)" ]
|
form [ class "search-bar-container" ] [
|
||||||
, option [ value "3" ] [ text "3 (alpha)" ]
|
label [ for "text" ] [ text "Search" ]
|
||||||
, option [ value "4" ] [ text "4 (pre-alpha)" ]
|
, input [ class "search-bar-input", id "text", onInput FilterText ] []
|
||||||
]
|
, label [ for "level" ] [ text " and show only items that have at least " ]
|
||||||
, label [ for "category" ] [ text "Category" ]
|
, select [ class "search-dropdown", id "level", onInput FilterScore ] [
|
||||||
, select [ class "ml-2 mr-4 form-control", id "category", onInput FilterCategory ] (
|
option [ ] [ text "any" ]
|
||||||
option [ ] [ text "any" ]
|
, option [ value "1" ] [ text "1 (production)" ]
|
||||||
:: (List.map viewCategoryOption categories.list)
|
, option [ value "2" ] [ text "2 (beta)" ]
|
||||||
)
|
, option [ value "3" ] [ text "3 (alpha)" ]
|
||||||
, label [ for "text" ] [ text "Search" ]
|
, option [ value "4" ] [ text "4 (pre-alpha)" ]
|
||||||
, input [ class "ml-2 form-control", id "text", onInput FilterText ] []
|
]
|
||||||
, div [ class "ml-auto badge badge-secondary" ] [
|
, text "builds "
|
||||||
text (String.fromInt (List.length model.results) ++ " recipes")
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
, h2 [ class "app-headings" ] [ text "Apps" ]
|
||||||
, div [ class "row" ]
|
, div [ class "row" ]
|
||||||
(List.map viewApp
|
(List.map viewApp
|
||||||
(model.results
|
(model.results
|
||||||
|> List.sortWith
|
|> List.sortWith
|
||||||
(by .status ASC
|
(by .status ASC
|
||||||
|> andThen (String.toLower << .name) ASC
|
|> andThen (String.toLower << .name) ASC
|
||||||
)
|
)
|
||||||
|
)
|
||||||
)
|
)
|
||||||
)
|
]
|
||||||
|
, div [class "col-md-3"] []
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-- HTTP
|
-- HTTP
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -68,21 +68,20 @@ view :
|
||||||
view { page, toMsg } model =
|
view { page, toMsg } model =
|
||||||
{ title = page.title
|
{ title = page.title
|
||||||
, body =
|
, body =
|
||||||
[ div [ class "bg-dark" ]
|
[ div [ class "background" ]
|
||||||
[ nav
|
[ nav
|
||||||
[ class "navbar navbar-expand-lg sticky-top font-weight-bold"
|
[ class "navbar navbar-expand-lg sticky-top font-weight-bold" ]
|
||||||
, style "background" "#ff4f88" ]
|
[ a [ class "navbar-text", href (Route.toString Route.Top) ]
|
||||||
[ a [ class "navbar-brand text-dark", href (Route.toString Route.Top) ]
|
|
||||||
[ img
|
[ img
|
||||||
[ src "/logo.png"
|
[ src "/logo-2.png"
|
||||||
, class "d-inline-block align-top mr-2"
|
, class "d-inline-block align-top mr-2"
|
||||||
, alt ""
|
, alt ""
|
||||||
, width 30
|
, width 48
|
||||||
, height 30 ] []
|
, height 16 ] []
|
||||||
, text "abra recipes"
|
, text "abra recipes"
|
||||||
]
|
]
|
||||||
, ul [ class "navbar-nav" ]
|
, 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
|
, div [ class "container-fluid" ] page.body
|
||||||
|
|
Loading…
Reference in New Issue