Emi/yes-no-maybe-kink-tool
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Allow deleting tiles by moving them out of a column

Browse source
This commit is contained in:
Emi Simpson 2023-07-05 22:31:43 -04:00
parent f66ea690a8
commit ca82750003
Signed by: Emi
GPG key ID: A12F2C2FFDC3D847
2 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/Main.elm
View file

@ -14,7 +14,7 @@ import Html exposing (Attribute, button, div, h3, input, Html, section, text)
import Html.Attributes exposing (class, disabled, id, style, value) import Html.Attributes exposing (class, disabled, id, style, value)
import Html.Attributes.Extra as Attributes exposing (attributeIf) import Html.Attributes.Extra as Attributes exposing (attributeIf)
import Html.Extra exposing (viewMaybe) import Html.Extra exposing (viewMaybe)
import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter) import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter, onMouseLeave)
import Html.Lazy exposing (lazy, lazy2) import Html.Lazy exposing (lazy, lazy2)
import Json.Decode as D import Json.Decode as D
import List exposing (map, singleton) import List exposing (map, singleton)
@ -118,6 +118,7 @@ view {columns, heldTile, mousePos} =
viewColumns : Maybe HeldTile -> Array Column -> Html Msg viewColumns : Maybe HeldTile -> Array Column -> Html Msg
viewColumns heldTile columns = viewColumns heldTile columns =
Array.indexedMap (viewColumn heldTile) columns Array.indexedMap (viewColumn heldTile) columns
|> Array.map (singleton >> div [])
|> Array.toList |> Array.toList
|> section |> section
[ class "columns" [ class "columns"
@ -157,6 +158,7 @@ viewColumn heldOverTile columnIndex {name, tiles} =
in in
div div
[ class "column" [ class "column"
, attributeIf isTileHeld (onMouseLeave <| HeldOverNewTile -1 -1)
] ]
( ( h3 ( ( h3
[] []

16
style.sass
View file

@ -14,26 +14,26 @@ input
display: flex display: flex
overflow-y: auto overflow-y: auto
.column & > :nth-child(4n+1)
width: 400px
padding: 20px
&:nth-child(4n+1)
--color-strong: #c0d694 --color-strong: #c0d694
--color-weak: #e5eed4 --color-weak: #e5eed4
&:nth-child(4n+2) & > :nth-child(4n+2)
--color-strong: #6ed8d6 --color-strong: #6ed8d6
--color-weak: #d3f3f2 --color-weak: #d3f3f2
&:nth-child(4n+3) & > :nth-child(4n+3)
--color-strong: #d3aee1 --color-strong: #d3aee1
--color-weak: #eddef3 --color-weak: #eddef3
&:nth-child(4n+4) & > :nth-child(4n+4)
--color-strong: #eeab87 --color-strong: #eeab87
--color-weak: #f9e5db --color-weak: #f9e5db
.column
width: 400px
padding: 20px
& > h3 & > h3
color: var(--color-strong) color: var(--color-strong)
& > .add-tile & > .add-tile