summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2020-03-27 09:49:34 +0100
committerYorhel <git@yorhel.nl>2020-03-27 09:49:34 +0100
commita9a4e7098d4d28822174a588c546051d364b3b66 (patch)
tree6db3e68285f5c512574bec7a497a13759ca6b5f0
parentdaa7536973531c1149dbe60b70a785997bb871a2 (diff)
imgflag: Automatically adjust box size based on window size
-rw-r--r--data/style.css2
-rw-r--r--elm/ImageFlagging.elm24
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 "." ]