diff --git a/public/style.css b/public/style.css index c289384..b8e33b5 100644 --- a/public/style.css +++ b/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); } diff --git a/src/Pages/Top.elm b/src/Pages/Top.elm index 11e5312..214c8e5 100644 --- a/src/Pages/Top.elm +++ b/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 -> - app.category == categories.toString c - ) apps + if c == All then + 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 diff --git a/src/Shared.elm b/src/Shared.elm index 62e98d3..0866093 100644 --- a/src/Shared.elm +++ b/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"