Filters fixed

RivalsDB · Nov 24, 2021 · 9458888 · 9458888
1 parent 3e342a1
commit 9458888
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 101 deletions.
diff --git a/client/src/Pages/Build.sass b/client/src/Pages/Build.sass
@@ -37,6 +37,8 @@ $actions-bar-height: 60px
   &-filters,
   &-flaggroup
     display: inline-block
+  &-flaggroup
+    margin-bottom: 8px
   &-collectionitems--images
     margin: 0
     padding: 0

diff --git a/client/src/Pages/Deck/Edit/Id_.elm b/client/src/Pages/Deck/Edit/Id_.elm
@@ -12,8 +12,8 @@ import Html.Events exposing (onClick)
 import Page
 import Request
 import Shared
+import UI.Deckbuilder as Deckbuilder
 import UI.Decklist
-import UI.DecklistOptions as DecklistOptions
 import UI.Icon as Icon
 import UI.Layout.Template
 import View exposing (View)
@@ -42,7 +42,7 @@ type Model
 
 type alias Data =
     { deck : DeckPostSave
-    , builderOptions : DecklistOptions.Model Msg
+    , builderOptions : Deckbuilder.Model Msg
     }
 
 
@@ -55,7 +55,7 @@ init collection deckId =
 
 type Msg
     = FromShared Shared.Msg
-    | FromBuilderOptions DecklistOptions.Msg
+    | FromBuilderOptions Deckbuilder.Msg
     | ChoseLeader Cards.Faction
     | Save
     | SavedDecklist API.Decklist.ResultUpdate
@@ -72,7 +72,7 @@ update user msg modelx =
             ( modelx, Effect.fromShared subMsg )
 
         ( Loading, FetchedDecklist (Ok deck) ) ->
-            ( Editing { deck = deck, builderOptions = DecklistOptions.init }, Effect.none )
+            ( Editing { deck = deck, builderOptions = Deckbuilder.init }, Effect.none )
 
         ( _, FetchedDecklist (Err _) ) ->
             ( modelx, Effect.none )
@@ -83,15 +83,15 @@ update user msg modelx =
         ( Editing oldModel, FetchedDecklist (Ok deck) ) ->
             ( Editing { oldModel | deck = deck }, Effect.none )
 
-        ( Editing oldModel, FromBuilderOptions (DecklistOptions.ChangedDecklist change) ) ->
+        ( Editing oldModel, FromBuilderOptions (Deckbuilder.ChangedDecklist change) ) ->
             let
                 oldDeck =
                     oldModel.deck
             in
             ( Editing { oldModel | deck = { oldDeck | decklist = Deck.setCard oldDeck.decklist change } }, Effect.none )
 
         ( Editing oldModel, FromBuilderOptions subMsg ) ->
-            ( Editing { oldModel | builderOptions = DecklistOptions.update subMsg oldModel.builderOptions }, Effect.none )
+            ( Editing { oldModel | builderOptions = Deckbuilder.update subMsg oldModel.builderOptions }, Effect.none )
 
         ( Editing model, ChoseLeader leader ) ->
             let
@@ -180,7 +180,7 @@ view shared model =
                     , div [ class "deckbldr-decklist" ]
                         [ UI.Decklist.viewEdit decklistActions data.deck ]
                     , div [ class "deckbldr-choices" ] <|
-                        DecklistOptions.view shared.collection FromBuilderOptions data.builderOptions data.deck.decklist
+                        Deckbuilder.view shared.collection FromBuilderOptions data.builderOptions data.deck.decklist
                     ]
                 ]
 

diff --git a/client/src/Pages/Deck/New.elm b/client/src/Pages/Deck/New.elm
@@ -14,8 +14,8 @@ import Html.Events exposing (onClick)
 import Page
 import Request
 import Shared
+import UI.Deckbuilder as Deckbuilder
 import UI.Decklist
-import UI.DecklistOptions as DecklistOptions
 import UI.Icon as Icon
 import UI.Layout.Template
 import View exposing (View)
@@ -40,23 +40,23 @@ page shared req =
 type alias Model =
     { key : Key
     , deck : DeckPreSave
-    , builderOptions : DecklistOptions.Model Msg
+    , builderOptions : Deckbuilder.Model Msg
     }
 
 
 init : Navigation.Key -> ( Model, Effect Msg )
 init key =
     ( { key = key
       , deck = Deck.init
-      , builderOptions = DecklistOptions.init
+      , builderOptions = Deckbuilder.init
       }
     , Effect.none
     )
 
 
 type Msg
     = FromShared Shared.Msg
-    | FromBuilderOptions DecklistOptions.Msg
+    | FromBuilderOptions Deckbuilder.Msg
     | ChoseLeader Cards.Faction
     | Save
     | SavedDecklist API.Decklist.ResultCreate
@@ -71,15 +71,15 @@ update user msg model =
         FromShared subMsg ->
             ( model, Effect.fromShared subMsg )
 
-        FromBuilderOptions (DecklistOptions.ChangedDecklist change) ->
+        FromBuilderOptions (Deckbuilder.ChangedDecklist change) ->
             let
                 oldDeck =
                     model.deck
             in
             ( { model | deck = { oldDeck | decklist = Deck.setCard oldDeck.decklist change } }, Effect.none )
 
         FromBuilderOptions subMsg ->
-            ( { model | builderOptions = DecklistOptions.update subMsg model.builderOptions }, Effect.none )
+            ( { model | builderOptions = Deckbuilder.update subMsg model.builderOptions }, Effect.none )
 
         ChoseLeader leader ->
             let
@@ -157,7 +157,7 @@ view shared model =
             , div [ class "deckbldr-decklist" ]
                 [ UI.Decklist.viewCreate decklistActions model.deck ]
             , div [ class "deckbldr-choices" ] <|
-                DecklistOptions.view shared.collection FromBuilderOptions model.builderOptions model.deck.decklist
+                Deckbuilder.view shared.collection FromBuilderOptions model.builderOptions model.deck.decklist
             ]
         ]
 

diff --git a/client/src/Pages/Search.sass b/client/src/Pages/Search.sass
@@ -6,7 +6,10 @@
     overflow: hidden
 
   &-flaggroup
+    $margin: 8px
     flex: 0 0 max-content
+    margin-right: $margin
+    margin-bottom: $margin
 
   &-text
     margin-top: 10px

diff --git a/client/src/UI/DecklistOptions.elm → client/src/UI/Deckbuilder.elm b/client/src/UI/DecklistOptions.elm → client/src/UI/Deckbuilder.elm
@@ -1,4 +1,4 @@
-module UI.DecklistOptions exposing (Model, Msg(..), init, update, view)
+module UI.Deckbuilder exposing (Model, Msg(..), init, update, view)
 
 import Cards exposing (Card)
 import Clan exposing (Clan)

diff --git a/client/src/UI/FilterSelection.elm b/client/src/UI/FilterSelection.elm
@@ -1,8 +1,8 @@
 module UI.FilterSelection exposing (Model, Msg(..), attackTypes, clans, disciplines, isAllowed, primaryTraits, secondaryTraits, stacks, update, view)
 
-import Cards
+import Cards exposing (Card)
 import Clan exposing (Clan)
-import Html exposing (Html, div, input, label, span)
+import Html exposing (Html, div, input, label)
 import Html.Attributes exposing (class, classList, type_)
 import Html.Events exposing (onCheck)
 import UI.Icon as Icon
@@ -15,81 +15,81 @@ type alias Model value msg =
 stacks : Model Cards.CardStack msg
 stacks =
     List.map modelHelper
-        [ ( Cards.AgendaStack, Icon.icon ( Icon.AgendaCard, Icon.Standard ) )
-        , ( Cards.HavenStack, Icon.icon ( Icon.Haven, Icon.Standard ) )
-        , ( Cards.FactionStack, Icon.icon ( Icon.Faction, Icon.Standard ) )
-        , ( Cards.LibraryStack, Icon.icon ( Icon.Library, Icon.Standard ) )
+        [ ( Cards.AgendaStack, Icon.AgendaCard )
+        , ( Cards.HavenStack, Icon.Haven )
+        , ( Cards.FactionStack, Icon.Faction )
+        , ( Cards.LibraryStack, Icon.Library )
         ]
 
 
 primaryTraits : Model Cards.Trait msg
 primaryTraits =
     List.map modelHelper
-        [ ( Cards.Action, Icon.icon ( Icon.Action, Icon.Standard ) )
-        , ( Cards.UnhostedAction, Icon.icon ( Icon.UnhostedAction, Icon.Standard ) )
-        , ( Cards.Attack, Icon.icon ( Icon.Attack, Icon.Standard ) )
-        , ( Cards.Reaction, Icon.icon ( Icon.Reaction, Icon.Standard ) )
-        , ( Cards.InfluenceModifier, Icon.icon ( Icon.InfluenceModifier, Icon.Standard ) )
+        [ ( Cards.Action, Icon.Action )
+        , ( Cards.UnhostedAction, Icon.UnhostedAction )
+        , ( Cards.Attack, Icon.Attack )
+        , ( Cards.Reaction, Icon.Reaction )
+        , ( Cards.InfluenceModifier, Icon.InfluenceModifier )
         ]
 
 
 secondaryTraits : Model Cards.Trait msg
 secondaryTraits =
     List.map modelHelper
-        [ ( Cards.Ongoing, Icon.icon ( Icon.Ongoing, Icon.Standard ) )
-        , ( Cards.Scheme, Icon.icon ( Icon.Scheme, Icon.Standard ) )
-        , ( Cards.Title, Icon.icon ( Icon.Title, Icon.Standard ) )
-        , ( Cards.Conspiracy, Icon.icon ( Icon.Conspiracy, Icon.Standard ) )
-        , ( Cards.Alchemy, Icon.icon ( Icon.Alchemy, Icon.Standard ) )
-        , ( Cards.Ritual, Icon.icon ( Icon.Ritual, Icon.Standard ) )
-        , ( Cards.Special, Icon.icon ( Icon.Special, Icon.Standard ) )
+        [ ( Cards.Ongoing, Icon.Ongoing )
+        , ( Cards.Scheme, Icon.Scheme )
+        , ( Cards.Title, Icon.Title )
+        , ( Cards.Conspiracy, Icon.Conspiracy )
+        , ( Cards.Alchemy, Icon.Alchemy )
+        , ( Cards.Ritual, Icon.Ritual )
+        , ( Cards.Special, Icon.Special )
         ]
 
 
 attackTypes : Model Cards.AttackType msg
 attackTypes =
     List.map modelHelper
-        [ ( Cards.Physical, Icon.icon ( Icon.Physical, Icon.Standard ) )
-        , ( Cards.Social, Icon.icon ( Icon.Social, Icon.Standard ) )
-        , ( Cards.Mental, Icon.icon ( Icon.Mental, Icon.Standard ) )
-        , ( Cards.Ranged, Icon.icon ( Icon.Ranged, Icon.Standard ) )
+        [ ( Cards.Physical, Icon.Physical )
+        , ( Cards.Social, Icon.Social )
+        , ( Cards.Mental, Icon.Mental )
+        , ( Cards.Ranged, Icon.Ranged )
         ]
 
 
 clans : Model Clan msg
 clans =
     List.map modelHelper
-        [ ( Clan.Brujah, Icon.icon ( Icon.Brujah, Icon.Standard ) )
-        , ( Clan.Gangrel, Icon.icon ( Icon.Gangrel, Icon.Standard ) )
-        , ( Clan.Malkavian, Icon.icon ( Icon.Malkavian, Icon.Standard ) )
-        , ( Clan.Nosferatu, Icon.icon ( Icon.Nosferatu, Icon.Standard ) )
-        , ( Clan.ThinBlood, Icon.icon ( Icon.ThinBlood, Icon.Standard ) )
-        , ( Clan.Toreador, Icon.icon ( Icon.Toreador, Icon.Standard ) )
-        , ( Clan.Tremere, Icon.icon ( Icon.Tremere, Icon.Standard ) )
-        , ( Clan.Ventrue, Icon.icon ( Icon.Ventrue, Icon.Standard ) )
+        [ ( Clan.Brujah, Icon.Brujah )
+        , ( Clan.Gangrel, Icon.Gangrel )
+        , ( Clan.Malkavian, Icon.Malkavian )
+        , ( Clan.Nosferatu, Icon.Nosferatu )
+        , ( Clan.ThinBlood, Icon.ThinBlood )
+        , ( Clan.Toreador, Icon.Toreador )
+        , ( Clan.Tremere, Icon.Tremere )
+        , ( Clan.Ventrue, Icon.Ventrue )
         ]
 
 
 disciplines : Model Cards.Discipline msg
 disciplines =
     List.map modelHelper
-        [ ( Cards.Animalism, Icon.icon ( Icon.Animalism, Icon.Standard ) )
-        , ( Cards.Auspex, Icon.icon ( Icon.Auspex, Icon.Standard ) )
-        , ( Cards.Celerity, Icon.icon ( Icon.Celerity, Icon.Standard ) )
-        , ( Cards.Dominate, Icon.icon ( Icon.Dominate, Icon.Standard ) )
-        , ( Cards.Fortitude, Icon.icon ( Icon.Fortitude, Icon.Standard ) )
-        , ( Cards.Obfuscate, Icon.icon ( Icon.Obfuscate, Icon.Standard ) )
-        , ( Cards.Potence, Icon.icon ( Icon.Potence, Icon.Standard ) )
-        , ( Cards.Presence, Icon.icon ( Icon.Presence, Icon.Standard ) )
-        , ( Cards.Protean, Icon.icon ( Icon.Protean, Icon.Standard ) )
-        , ( Cards.BloodSorcery, Icon.icon ( Icon.BloodSorcery, Icon.Standard ) )
-        , ( Cards.ThinBloodAlchemy, Icon.icon ( Icon.ThinBloodAlchemy, Icon.Standard ) )
+        [ ( Cards.Animalism, Icon.Animalism )
+        , ( Cards.Auspex, Icon.Auspex )
+        , ( Cards.Celerity, Icon.Celerity )
+        , ( Cards.Dominate, Icon.Dominate )
+        , ( Cards.Fortitude, Icon.Fortitude )
+        , ( Cards.Obfuscate, Icon.Obfuscate )
+        , ( Cards.Potence, Icon.Potence )
+        , ( Cards.Presence, Icon.Presence )
+        , ( Cards.Protean, Icon.Protean )
+        , ( Cards.BloodSorcery, Icon.BloodSorcery )
+        , ( Cards.ThinBloodAlchemy, Icon.ThinBloodAlchemy )
         ]
 
 
-modelHelper : ( trait, Html msg ) -> ( trait, ( Html msg, Bool ) )
+modelHelper : ( trait, Icon.IconImage ) -> ( trait, ( Html msg, Bool ) )
 modelHelper ( trait, icon ) =
-    ( trait, ( span [ class "fltrslct-icon_wrapper" ] [ icon ], False ) )
+    ( trait, ( Icon.icon ( icon, Icon.Standard ), False ) )
 
 
 type Msg value
@@ -113,27 +113,31 @@ update msg model =
 
 view : (Msg value -> msg) -> Model value msg -> Html msg
 view msg options =
-    div [ class "fltrslct" ] <|
-        List.map
-            (\( value, ( icon, isActive ) ) ->
-                label
-                    [ classList
-                        [ ( "fltrslct-option", True )
-                        , ( "fltrslct-option--actv", isActive )
-                        ]
-                    ]
-                    [ div [ class "fltrslct-icon" ] [ icon ]
-                    , input
-                        [ type_ "checkbox"
-                        , onCheck (ChangedValue value >> msg)
-                        ]
-                        []
-                    ]
-            )
-            options
-
-
-isAllowed : (Cards.Card -> List value) -> Model value msg -> Cards.Card -> Bool
+    div [ class "filterpicker" ]
+        (List.map (viewFilterOption msg) options)
+
+
+viewFilterOption : (Msg value -> msg) -> ( value, ( Html msg, Bool ) ) -> Html msg
+viewFilterOption msg ( value, ( icon, isActive ) ) =
+    label
+        [ class "filterpicker__option"
+        , classList [ ( "filterpicker__option--active", isActive ) ]
+        ]
+        [ div
+            [ class "filterpicker__box"
+            , classList [ ( "filterpicker__box--active", isActive ) ]
+            ]
+            [ icon ]
+        , input
+            [ class "filterpicker__checkbox"
+            , type_ "checkbox"
+            , onCheck (ChangedValue value >> msg)
+            ]
+            []
+        ]
+
+
+isAllowed : (Card -> List value) -> Model value msg -> Card -> Bool
 isAllowed toValues model card =
     let
         whitelist =

diff --git a/client/src/UI/FilterSelection.sass b/client/src/UI/FilterSelection.sass
@@ -1,33 +1,34 @@
-.fltrslct
-  margin: 5px
+.filterpicker
   display: flex
   flex-wrap: wrap
 
-  &-option
-    $iconSize: 30px
+  $optionInner: 32px
 
+  &__option
     display: inline-block
-    height: $iconSize
-    width: $iconSize
-    padding: 5px
-    box-shadow: inset 0 0 2px var(--color-bg)
+    padding: 2px
+    height: $optionInner
+    width: $optionInner
     cursor: pointer
     text-align: center
-    background: var(--color-greylight)
-    input
-      display: none
-    &--actv
-      background: var(--color-greydeep)
+    background: var(--color-bg-farthest)
 
-  &-icon
-    height: 100%
-    width: 100%
+    &--active
+      background: var(--color-bg-closest)
+
+  &__checkbox
+    display: none
+
+  &__box
+    $padding: 4px
+    $size: $optionInner - (2 * $padding)
+    height: $size
+    width: $size
+    padding: $padding
     display: flex
     justify-content: center
     align-items: center
-    font-size: 24px
-    line-height: 1
-  &-icon_wrapper
-    height: 100%
-    width: 100%
-    display: inline-block
+    background: var(--color-bg-closest)
+
+    &--active
+      background: var(--color-bg-farthest)