Merge pull request #50 from andrewMacmurray/cleanup-examples

Cleanup examples

Author: andrewMacmurray

examples/dom-operations/package-lock.json

@@ -3,13 +3,14 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "start": "vite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "vite": "6.0.9",
+    "vite": "^7.3.0",
     "vite-plugin-elm": "^3.0.1"
   }
 }

examples/dom-operations/package.json

@@ -4,8 +4,8 @@ import Browser
 import Browser.Dom as Dom
 import ConcurrentTask exposing (ConcurrentTask)
 import ConcurrentTask.Browser.Dom
-import Html exposing (Html, button, div, input, p, text)
-import Html.Attributes exposing (class, id)
+import Html as H exposing (Html)
+import Html.Attributes as A
 import Html.Events exposing (onClick)
 import Json.Decode as Decode
 
@@ -222,33 +222,49 @@ port receive : (Decode.Value -> msg) -> Sub msg
 
 view : Model -> Html Msg
 view model =
-    div [ class "row" ]
-        [ input [ id "input" ] []
-        , div [ class "box", id "box" ] [ text "What size am i?" ]
-        , div [ class "scrolly-box", id "scrolly-box" ]
-            [ text "Scroll mee!!"
-            , p [] [ text "..." ]
-            , p [] [ text "..." ]
-            , p [] [ text "..." ]
-            , p [] [ text "..." ]
-            , p [] [ text "..." ]
-            , p [] [ text "..." ]
+    H.div
+        [ A.class "col gap-xs pa-s"
+        , A.style "max-width" "800px"
+        ]
+        [ H.input [ A.id "input" ] []
+        , H.div
+            [ A.class "pa-s"
+            , A.style "background-color" "dodgerblue"
+            , A.style "color" "white"
+            , A.id "box"
+            ]
+            [ H.text "What size am i?" ]
+        , H.div
+            [ A.class "pa-s"
+            , A.style "width" "100px"
+            , A.style "height" "100px"
+            , A.style "background-color" "cornflowerblue"
+            , A.style "overflow-y" "scroll"
+            , A.id "scrolly-box"
+            ]
+            [ H.text "Scroll mee!!"
+            , H.p [] [ H.text "..." ]
+            , H.p [] [ H.text "..." ]
+            , H.p [] [ H.text "..." ]
+            , H.p [] [ H.text "..." ]
+            , H.p [] [ H.text "..." ]
+            , H.p [] [ H.text "..." ]
             ]
         , showViewport model
         , showWindowViewport model
         , showElement model
-        , div [ class "buttons" ]
-            [ button [ onClick FocusClicked ] [ text "Focus the Input" ]
-            , button [ onClick BlurClicked ] [ text "Blur the Input" ]
+        , H.div [ A.class "row gap-xs" ]
+            [ H.button [ onClick FocusClicked ] [ H.text "Focus the Input" ]
+            , H.button [ onClick BlurClicked ] [ H.text "Blur the Input" ]
             ]
-        , div [ class "buttons" ]
-            [ button [ onClick SetViewportOfElementClicked ] [ text "Scroll top of the scroll box" ]
-            , button [ onClick ScrollTopClicked ] [ text "Scroll Window to Top" ]
+        , H.div [ A.class "row gap-xs" ]
+            [ H.button [ onClick SetViewportOfElementClicked ] [ H.text "Scroll top of the scroll box" ]
+            , H.button [ onClick ScrollTopClicked ] [ H.text "Scroll Window to Top" ]
             ]
-        , div [ class "buttons" ]
-            [ button [ onClick GetBoxViewportClicked ] [ text "Get Viewport of the blue box" ]
-            , button [ onClick GetWindowViewportClicked ] [ text "Get Window Viewport" ]
-            , button [ onClick GetElementClicked ] [ text "Get Element size of the blue box" ]
+        , H.div [ A.class "row gap-xs" ]
+            [ H.button [ onClick GetBoxViewportClicked ] [ H.text "Get Viewport of the blue box" ]
+            , H.button [ onClick GetWindowViewportClicked ] [ H.text "Get Window Viewport" ]
+            , H.button [ onClick GetElementClicked ] [ H.text "Get Element size of the blue box" ]
             ]
         ]
 
@@ -257,36 +273,36 @@ showViewport : Model -> Html msg
 showViewport model =
     case model.foundViewport of
         Nothing ->
-            text ""
+            H.text ""
 
         Just vp ->
-            div []
-                [ div [] [ text "Found blue box viewport!" ]
-                , div [] [ text (Debug.toString vp) ]
+            H.div []
+                [ H.div [] [ H.text "Found blue box viewport!" ]
+                , H.div [] [ H.text (Debug.toString vp) ]
                 ]
 
 
 showWindowViewport : Model -> Html msg
 showWindowViewport model =
     case model.foundWindowViewport of
         Nothing ->
-            text ""
+            H.text ""
 
         Just vp ->
-            div []
-                [ div [] [ text "Found window viewport!" ]
-                , div [] [ text (Debug.toString vp) ]
+            H.div []
+                [ H.div [] [ H.text "Found window viewport!" ]
+                , H.div [] [ H.text (Debug.toString vp) ]
                 ]
 
 
 showElement : Model -> Html msg
 showElement model =
     case model.foundElement of
         Nothing ->
-            text ""
+            H.text ""
 
         Just vp ->
-            div []
-                [ div [] [ text "Found blue box element size!" ]
-                , div [] [ text (Debug.toString vp) ]
+            H.div []
+                [ H.div [] [ H.text "Found blue box element size!" ]
+                , H.div [] [ H.text (Debug.toString vp) ]
                 ]

examples/dom-operations/src/Main.elm

@@ -1,16 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Browser Tasks</title>
-    <link href="./style.css" rel="stylesheet">
-</head>
+  </head>
 
-<body>
+  <body>
     <main></main>
     <script type="module" src="./index.ts"></script>
-</body>
-
-</html>
+  </body>
+</html>

examples/dom-operations/src/index.html

@@ -1,3 +1,5 @@
+import "../../util/style.css";
+
 import { Elm } from "./Main.elm";
 import * as ConcurrentTask from "../../../runner";
 

examples/dom-operations/src/index.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from "vite";
 import elmPlugin from "vite-plugin-elm";
+import { customLogger } from "../util/vite-logger";
 
 export default defineConfig({
   root: "./src",
   plugins: [elmPlugin()],
+  customLogger,
 });

examples/dom-operations/src/style.css

@@ -10,8 +10,7 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
-            "elm/json": "1.1.3",
-            "mdgriffith/elm-ui": "1.1.8"
+            "elm/json": "1.1.3"
         },
         "indirect": {
             "elm/time": "1.0.0",