Merge pull request 'Start to the style changeover via Figma designs' (#15) from em_add-styles into main

Reviewed-on: #15

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 {
 }
 
+.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 {
+.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) {

src/Pages/Top.elm

@@ -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 -> 
+            if c == All then
-                app.category == categories.toString c
+                apps
-            ) 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 "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) ] []
             , 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 ->
-            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
 
 

src/Shared.elm

@@ -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"
+                [ 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 
-                        [ src "/logo.png"
+                        [ src "/logo-2.png"
                         , class "d-inline-block align-top mr-2"
                         , alt "" 
-                        , width 30
+                        , width 48
-                        , height 30 ] []
+                        , 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