Adding category filtering, style tweaks.

public/style.css

@@ -11,6 +11,10 @@
 body {
 }
 
+.app-headings {
+    font-size: 24px;
+}
+
 .background {
     background-color: none;
 }
@@ -25,6 +29,18 @@ i.fas, i.fab {
 }
 
 
+/* Categories */
+
+.category-tile {
+    cursor: pointer;
+}
+
+.category-tile:hover {
+    color: var(--white);
+    background-color: var(--light-blue);
+    border-radius: 5px;
+}
+
 /* Cards */
 
 .app-category {
@@ -107,9 +123,11 @@ i.fas, i.fab {
 /* Navbar */
 .navbar-text {
     color: var(--dark-blue);
+    text-align: center;
 }
 
 .navbar {
+    margin: auto;
     background-color: var(--light-pink);
 }
 

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
 
@@ -304,9 +309,9 @@ viewApp app =
 
 
 
-viewCategories : (String, Category) -> Html msg
+viewCategories : (String, Category) -> Html Msg
 viewCategories category =
-    div [] [text (Tuple.first category)]
+    div [ class "category-tile", onClick (FilterCategory (Tuple.first category)) ] [text (Tuple.first category)]
 
 
 
@@ -331,7 +336,8 @@ viewApps model =
         Success ->
             div [ class "row justify-content-center" ]
                 [ div [ class "col-md-3" ] [
-                  div [] (List.map viewCategories categories.list)
+                  h2 [ class "app-headings" ] [text "Categories"]
+                  , div [] (List.map viewCategories categories.list)
                 ]
                 , div [ class "col-md-6" ]
                     [ div [ class "row" ]
@@ -353,6 +359,7 @@ viewApps model =
                                 ]
                             ]
                         ]
+                    , h2 [ class "app-headings" ] [ text "Apps" ]
                     , div [ class "row" ]
                         (List.map viewApp
                             (model.results

src/Shared.elm

@@ -71,7 +71,7 @@ view { page, toMsg } model =
         [ div [ class "background" ] 
             [ nav 
                 [ class "navbar navbar-expand-lg sticky-top font-weight-bold" ]
-                [ a [ class "navbar-brand navbar-text", href (Route.toString Route.Top) ] 
+                [ a [ class "navbar-text", href (Route.toString Route.Top) ] 
                     [ img 
                         [ src "/logo-2.png"
                         , class "d-inline-block align-top mr-2"