feat #128: first step towards responsive layout

getodk · Jun 10, 2024 · 4c8d1ac · 4c8d1ac
1 parent e7bef0c
commit 4c8d1ac
Show file tree

Hide file tree

Showing 10 changed files with 351 additions and 53 deletions.
diff --git a/packages/web-forms/icomoon.json b/packages/web-forms/icomoon.json
@@ -9,7 +9,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["add_circle"],
+        "tags": [
+          "add_circle"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -33,7 +35,10 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["clear", "close"],
+        "tags": [
+          "clear",
+          "close"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -57,7 +62,11 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["create", "mode_edit", "edit"],
+        "tags": [
+          "create",
+          "mode_edit",
+          "edit"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -81,7 +90,10 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["gps_fixed", "my_location"],
+        "tags": [
+          "gps_fixed",
+          "my_location"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -105,7 +117,10 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["cloud_upload", "backup"],
+        "tags": [
+          "cloud_upload",
+          "backup"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -123,11 +138,16 @@
     },
     {
       "icon": {
-        "paths": ["M214 768h596v86h-596v-86zM810 384l-298 298-298-298h170v-256h256v256h170z"],
+        "paths": [
+          "M214 768h596v86h-596v-86zM810 384l-298 298-298-298h170v-256h256v256h170z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["file_download", "get_app"],
+        "tags": [
+          "file_download",
+          "get_app"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -145,11 +165,15 @@
     },
     {
       "icon": {
-        "paths": ["M214 768h596v86h-596v-86zM384 682v-256h-170l298-298 298 298h-170v256h-256z"],
+        "paths": [
+          "M214 768h596v86h-596v-86zM384 682v-256h-170l298-298 298 298h-170v256h-256z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["file_upload"],
+        "tags": [
+          "file_upload"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -167,11 +191,15 @@
     },
     {
       "icon": {
-        "paths": ["M316 366l196 196 196-196 60 60-256 256-256-256z"],
+        "paths": [
+          "M316 366l196 196 196-196 60 60-256 256-256-256z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["keyboard_arrow_down"],
+        "tags": [
+          "keyboard_arrow_down"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -189,11 +217,15 @@
     },
     {
       "icon": {
-        "paths": ["M658 708l-60 60-256-256 256-256 60 60-196 196z"],
+        "paths": [
+          "M658 708l-60 60-256-256 256-256 60 60-196 196z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["keyboard_arrow_left"],
+        "tags": [
+          "keyboard_arrow_left"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -211,11 +243,15 @@
     },
     {
       "icon": {
-        "paths": ["M366 708l196-196-196-196 60-60 256 256-256 256z"],
+        "paths": [
+          "M366 708l196-196-196-196 60-60 256 256-256 256z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["keyboard_arrow_right"],
+        "tags": [
+          "keyboard_arrow_right"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -233,11 +269,15 @@
     },
     {
       "icon": {
-        "paths": ["M316 658l-60-60 256-256 256 256-60 60-196-196z"],
+        "paths": [
+          "M316 658l-60-60 256-256 256 256-60 60-196-196z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["keyboard_arrow_up"],
+        "tags": [
+          "keyboard_arrow_up"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -261,7 +301,10 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["local_printshop", "print"],
+        "tags": [
+          "local_printshop",
+          "print"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -279,11 +322,15 @@
     },
     {
       "icon": {
-        "paths": ["M298 426h428l-214 214z"],
+        "paths": [
+          "M298 426h428l-214 214z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["arrow_drop_down"],
+        "tags": [
+          "arrow_drop_down"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -301,11 +348,15 @@
     },
     {
       "icon": {
-        "paths": ["M298 598l214-214 214 214h-428z"],
+        "paths": [
+          "M298 598l214-214 214 214h-428z"
+        ],
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["arrow_drop_up"],
+        "tags": [
+          "arrow_drop_up"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -329,7 +380,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["more_vert"],
+        "tags": [
+          "more_vert"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -353,7 +406,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["delete"],
+        "tags": [
+          "delete"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -377,7 +432,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["info"],
+        "tags": [
+          "info"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -401,7 +458,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["language"],
+        "tags": [
+          "language"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -425,7 +484,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["search"],
+        "tags": [
+          "search"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -449,7 +510,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["calendar_today"],
+        "tags": [
+          "calendar_today"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -473,7 +536,9 @@
         "attrs": [],
         "isMulticolor": false,
         "isMulticolor2": false,
-        "tags": ["repeat"],
+        "tags": [
+          "repeat"
+        ],
         "grid": 24
       },
       "attrs": [],
@@ -488,19 +553,55 @@
       "setIdx": 0,
       "setId": 4,
       "iconIdx": 35
+    },
+    {
+      "icon": {
+        "paths": [
+          "M128 256h768v86h-768v-86zM128 554v-84h768v84h-768zM128 768v-86h768v86h-768z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "menu"
+        ],
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "menu",
+        "id": 600,
+        "order": 299,
+        "prevSize": 48,
+        "code": 59670,
+        "name": "menu"
+      },
+      "setIdx": 0,
+      "setId": 4,
+      "iconIdx": 600
     }
   ],
   "height": 1024,
-  "metadata": { "name": "icomoon" },
+  "metadata": {
+    "name": "icomoon"
+  },
   "preferences": {
     "showGlyphs": true,
     "showQuickUse": true,
     "showQuickUse2": true,
     "showSVGs": true,
     "fontPref": {
       "prefix": "icon-",
-      "metadata": { "fontFamily": "icomoon", "majorVersion": 1, "minorVersion": 0 },
-      "metrics": { "emSize": 1024, "baseline": 6.25, "whitespace": 50 },
+      "metadata": {
+        "fontFamily": "icomoon",
+        "majorVersion": 1,
+        "minorVersion": 0
+      },
+      "metrics": {
+        "emSize": 1024,
+        "baseline": 6.25,
+        "whitespace": 50
+      },
       "embed": false,
       "showSelector": true,
       "showMetrics": true,
@@ -526,4 +627,4 @@
     "gridSize": 16,
     "showLiga": false
   }
-}
+}
diff --git a/packages/web-forms/src/assets/css/icomoon.css b/packages/web-forms/src/assets/css/icomoon.css
@@ -88,3 +88,6 @@
 .icon-repeat:before {
 	content: '\e914';
 }
+.icon-menu:before {
+  content: "\e916";
+}
diff --git a/packages/web-forms/src/assets/css/style.scss b/packages/web-forms/src/assets/css/style.scss
@@ -1,3 +1,3 @@
 body {
-	background: var(--gray-200);
+	margin:0;
 }
diff --git a/packages/web-forms/src/assets/fonts/icomoon.svg b/packages/web-forms/src/assets/fonts/icomoon.svg
diff --git a/packages/web-forms/src/assets/fonts/icomoon.ttf b/packages/web-forms/src/assets/fonts/icomoon.ttf
diff --git a/packages/web-forms/src/assets/fonts/icomoon.woff b/packages/web-forms/src/assets/fonts/icomoon.woff