initial pass

.gitignore

@@ -0,0 +1,2 @@
+/elm-stuff
+/index.html

elm.json

@@ -0,0 +1,24 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src"
+    ],
+    "elm-version": "0.19.1",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.2",
+            "elm/core": "1.0.5",
+            "elm/html": "1.0.0"
+        },
+        "indirect": {
+            "elm/json": "1.1.3",
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}

src/Attachment.elm

@@ -0,0 +1,31 @@
+module Attachment exposing (Attachment, init, view)
+
+import Html exposing (Html)
+import Html.Attributes as Attrs
+
+
+type alias Attachment =
+    { top : Int }
+
+
+init : Int -> Attachment
+init =
+    Attachment << abs
+
+
+view : Int -> Attachment -> Html msg
+view left { top } =
+    Html.div
+        [ Attrs.style "width" "15px"
+        , Attrs.style "height" "15px"
+        , Attrs.style "border" "1px solid blue"
+        , Attrs.style "border-radius" "100%"
+        , Attrs.style "background-color" "white"
+        , Attrs.style "cursor" "pointer"
+
+        -- position
+        , Attrs.style "position" "absolute"
+        , Attrs.style "left" (String.fromInt left ++ "px")
+        , Attrs.style "top" (String.fromInt top ++ "px")
+        ]
+        []

src/Comment.elm

@@ -0,0 +1,25 @@
+module Comment exposing (Comment, init, view)
+
+import Html exposing (Html)
+import Html.Attributes as Attrs
+
+
+type alias Comment =
+    { height : Int }
+
+
+init : Int -> Comment
+init =
+    Comment << abs
+
+
+view : Comment -> Html msg
+view { height } =
+    Html.div
+        [ Attrs.style "width" "150px"
+        , Attrs.style "height" (String.fromInt height ++ "px")
+        , Attrs.style "border" "1px solid blue"
+        , Attrs.style "border-radius" "10px"
+        , Attrs.style "background-color" "white"
+        ]
+        []

src/Main.elm

@@ -0,0 +1,75 @@
+module Main exposing (..)
+
+import Attachment exposing (Attachment)
+import Browser
+import Comment exposing (Comment)
+import Html exposing (Html)
+import Html.Attributes as Attrs
+
+
+type alias Model =
+    { attachments : List Attachment
+    , comments : List Comment
+    }
+
+
+type Msg
+    = AddNewCommentAndAttachment
+
+
+init : () -> ( Model, Cmd Msg )
+init _ =
+    ( { attachments = []
+      , comments = []
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update _ _ =
+    Debug.todo "update"
+
+
+view : Model -> Browser.Document Msg
+view model =
+    { title = "Comment Constraint Experiment"
+    , body =
+        [ Html.node "style" [] [ Html.text "body { user-select: none; }" ]
+        , Html.main_
+            [ Attrs.style "width" "100%"
+            , Attrs.style "height" "100vh"
+            , Attrs.style "background-color" "aliceblue"
+            ]
+            (let
+                horizMargin =
+                    50
+             in
+             -- line
+             [ Html.div
+                [ Attrs.style "width" "1px"
+                , Attrs.style "height" "94vh"
+                , Attrs.style "position" "absolute"
+                , Attrs.style "left" (String.fromInt horizMargin ++ "px")
+                , Attrs.style "top" "3vh"
+                , Attrs.style "background-color" "blue"
+                ]
+                []
+             ]
+                -- attachments
+                ++ List.map (Attachment.view horizMargin) model.attachments
+                -- comments
+                ++ List.map Comment.view model.comments
+            )
+        ]
+    }
+
+
+main : Program () Model Msg
+main =
+    Browser.document
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = \_ -> Sub.none
+        }