diff options
author | Yorhel <git@yorhel.nl> | 2020-03-27 09:49:34 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2020-03-27 09:49:34 +0100 |
commit | a9a4e7098d4d28822174a588c546051d364b3b66 (patch) | |
tree | 6db3e68285f5c512574bec7a497a13759ca6b5f0 | |
parent | daa7536973531c1149dbe60b70a785997bb871a2 (diff) |
imgflag: Automatically adjust box size based on window size
-rw-r--r-- | data/style.css | 2 | ||||
-rw-r--r-- | elm/ImageFlagging.elm | 24 |
2 files changed, 18 insertions, 8 deletions
diff --git a/data/style.css b/data/style.css index 18922823..576842cf 100644 --- a/data/style.css +++ b/data/style.css @@ -1063,7 +1063,7 @@ p.filselect i { font-style: normal } * 2: image * 3: metadata * 4: vote box */ -.imageflag { width: 810px; margin: auto } +.imageflag { margin: auto } .imageflag > div:nth-child(1) { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2px } .imageflag > div:nth-child(1) span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0px 20px } .imageflag > div:nth-child(2) { border: 1px solid $border$; padding: 5px; display: flex; justify-content: center; align-items: center; background: #000 } diff --git a/elm/ImageFlagging.elm b/elm/ImageFlagging.elm index b37c2d44..54d0a555 100644 --- a/elm/ImageFlagging.elm +++ b/elm/ImageFlagging.elm @@ -7,6 +7,7 @@ import Array import Dict import Browser import Browser.Events as EV +import Browser.Dom as DOM import Task import Process import Json.Decode as JD @@ -22,10 +23,10 @@ import Gen.ImageVote as GIV main : Program GI.Recv Model Msg main = Browser.element - { init = \e -> (init e, Cmd.none) + { init = \e -> (init e, Task.perform Viewport DOM.getViewport) , view = view , update = update - , subscriptions = \m -> if m.warn || m.myVotes < 100 then Sub.none else Sub.batch [ EV.onKeyDown (keydown m), EV.onKeyUp (keyup m) ] + , subscriptions = \m -> Sub.batch <| EV.onResize Resize :: if m.warn || m.myVotes < 100 then [] else [ EV.onKeyDown (keydown m), EV.onKeyUp (keyup m) ] } @@ -44,6 +45,8 @@ type alias Model = , saveTimer : Bool , loadState : Api.State , saveState : Api.State + , pWidth : Int + , pHeight : Int } init : GI.Recv -> Model @@ -59,6 +62,8 @@ init d = , saveTimer = False , saveState = Api.Normal , loadState = Api.Normal + , pWidth = 0 + , pHeight = 0 } @@ -105,6 +110,8 @@ type Msg | Saved GApi.Response | Prev | Next + | Viewport DOM.Viewport + | Resize Int Int update : Msg -> Model -> (Model, Cmd Msg) @@ -161,14 +168,17 @@ update msg model = Prev -> desc ({ model | saved = False, index = model.index - (if model.index == 0 then 0 else 1) }, Cmd.none) Next -> desc <| pre <| load ({ model | saved = False, index = model.index + (if model.single then 0 else 1) }, Cmd.none) + Resize width height -> ({ model | pWidth = width, pHeight = height }, Cmd.none) + Viewport v -> ({ model | pWidth = round v.viewport.width, pHeight = round v.viewport.height }, Cmd.none) + + view : Model -> Html Msg view model = let - -- TODO: Dynamic box size depending on available space? - boxwidth = 800 - boxheight = 600 - px n = String.fromInt (floor n) ++ "px" + boxwidth = clamp 600 1200 <| model.pWidth - 300 + boxheight = clamp 300 800 <| model.pHeight - clamp 200 300 (model.pHeight - 500) + px n = String.fromInt n ++ "px" stat avg stddev = case (avg, stddev) of (Just a, Just s) -> Ffi.fmtFloat a 2 ++ " σ " ++ Ffi.fmtFloat s 2 @@ -287,7 +297,7 @@ view model = in div [ class "mainbox" ] [ h1 [] [ text "Image flagging" ] - , div [ class "imageflag" ] <| + , div [ class "imageflag", style "width" (px (boxwidth + 10)) ] <| if model.warn then [ ul [] [ li [] [ text "Make sure you are familiar with the ", a [ href "/d19" ] [ text "image flagging guidelines" ], text "." ] |