diff --git a/public/style.css b/public/style.css index 9632c59..0017ecc 100644 --- a/public/style.css +++ b/public/style.css @@ -56,9 +56,11 @@ i.fas, i.fab { } .category-tile:hover { + color: var(--dark-blue); +} + +.category-tile.active { color: var(--white); - background-color: var(--light-blue); - border-radius: 5px; } /* Intro */ diff --git a/src/Pages/Top.elm b/src/Pages/Top.elm index 46ca36f..ea080de 100644 --- a/src/Pages/Top.elm +++ b/src/Pages/Top.elm @@ -2,7 +2,7 @@ module Pages.Top exposing (Model, Msg, Params, page) import Enum exposing (Enum) import Html exposing (Html, a, button, div, form, h2, h3, h5, i, img, input, label, li, option, p, select, span, text, ul) -import Html.Attributes exposing (alt, class, for, href, id, src, style, value) +import Html.Attributes exposing (alt, class, classList, for, href, id, src, style, value) import Html.Attributes.Aria exposing (ariaLabel) import Html.Events exposing (onClick, onInput) import Http @@ -76,10 +76,10 @@ type Category categories : Enum Category categories = Enum.create - [ ( "Apps", Apps ) + [ ( "(Everything)", All ) + , ( "Apps", Apps ) , ( "Utilities", Utilities ) , ( "Development", Development ) - , ( "All", All ) ] @@ -349,9 +349,16 @@ viewApp app = ] -viewCategories : ( String, Category ) -> Html Msg -viewCategories category = - div [ class "category-tile", onClick (FilterCategory (Tuple.first category)) ] [ text (Tuple.first category) ] +viewCategory : Model -> ( String, Category ) -> Html Msg +viewCategory model category = + div + [ classList + [ ( "category-tile", True ) + , ( "active", categories.toString (Maybe.withDefault All model.filter_category) == Tuple.first category ) + ] + , onClick (FilterCategory (Tuple.first category)) + ] + [ text (Tuple.first category) ] viewApps : Model -> Html Msg @@ -378,13 +385,13 @@ viewApps model = [ h2 [ class "app-headings" ] [ text "Finding things" ] , form [] [ div [] - [ h3 [] [ text "Categories" ] - , div [] (List.map viewCategories categories.list) - ] - , div [] [ h3 [] [ text "Search" ] , input [ ariaLabel "search", id "text", onInput FilterText ] [] ] + , div [] + [ h3 [] [ text "Categories" ] + , div [] (List.map (viewCategory model) categories.list) + ] , div [] [ h3 [] [ text "Status" ] , label [ for "level" ] [ text "Minimum score:" ] @@ -406,20 +413,23 @@ viewApps model = [] ] ] - , div [ id "intro", class "card" ] [ div [ class "card-body" ] [ - h2 [ class "app-headings card-title" ] [ text "Co-op Cloud Recipe Catalogue" ] - , text "You can use these recipes (" - , a [ href - "https://docs.coopcloud.tech/glossary/#recipe" ] [ - text "What's a recipe?" - ] + , div [ id "intro", class "card" ] + [ div [ class "card-body" ] + [ h2 [ class "app-headings card-title" ] [ text "Co-op Cloud Recipe Catalogue" ] + , text "You can use these recipes (" + , a + [ href + "https://docs.coopcloud.tech/glossary/#recipe" + ] + [ text "What's a recipe?" + ] , text ") with " - , a [ href "https://coopcloud.tech" ] [ - text "Co-op Cloud" - ] + , a [ href "https://coopcloud.tech" ] + [ text "Co-op Cloud" + ] , text "." + ] ] - ] , div [ class "row" ] (List.map viewApp (model.results diff --git a/src/Shared.elm b/src/Shared.elm index 1855771..3fce83d 100644 --- a/src/Shared.elm +++ b/src/Shared.elm @@ -70,8 +70,8 @@ view { page, toMsg } model = , body = [ div [ class "background" ] [ nav - [ class "navbar navbar-expand-lg sticky-top font-weight-bold" ] - [ a [ class "navbar-text", href (Route.toString Route.Top) ] + [ class "navbar navbar-expand-lg sticky-top" ] + [ a [ class "font-weight-bold navbar-text", href (Route.toString Route.Top) ] [ img [ src "/logo-2.png" , class "d-inline-block align-top mr-2"