refactor(ui): update udjat.css

Author: matthiasschaub

esbuild.mjs

@@ -26,9 +26,9 @@ let ctx = await esbuild.context({
     "./ui/js/index.js",
     "./ui/js/helper.js",
     "./ui/js/edit-task.js",
-    "./node_modules/htmx.org/dist/ext/path-deps.js",
-    "./node_modules/htmx.org/dist/ext/json-enc.js",
-    "./node_modules/htmx.org/dist/ext/client-side-templates.js",
+    "./node_modules/htmx-ext-path-deps/path-deps.js",
+    "./node_modules/htmx-ext-json-enc/json-enc.js",
+    "./node_modules/htmx-ext-client-side-templates/client-side-templates.js",
   ],
   external: ["*.svg", "*.woff2", "*.ttf"],
   entryNames: "[ext]/[name]", // will name the result files by their folder names

maat/app/maat-api.hoon

@@ -121,7 +121,7 @@
           [(send [404 ~ [%plain "404 - Not Found"]]) state]
           ::
              %version
-           [(send [200 ~ [%json (version:enjs '2024-06-16.3')]]) state]
+           [(send [200 ~ [%json (version:enjs '2024-06-21.2')]]) state]
           ::
             %members
           [(send [200 ~ [%json (ships:enjs reg)]]) state]

maat/app/maat-ui.hoon

@@ -27,6 +27,7 @@
 /*  js-index                  %js     /app/ui/js/index/js
 /*  js-helper                 %js     /app/ui/js/helper/js
 /*  js-edit-task              %js     /app/ui/js/edit-task/js
+/*  js-htmx                   %js     /app/ui/js/htmx/js
 /*  js-json-enc               %js     /app/ui/js/json-enc/js
 /*  js-path-deps              %js     /app/ui/js/path-deps/js
 /*  js-client-side-templates  %js     /app/ui/js/client-side-templates/js
@@ -156,6 +157,8 @@
         [(send [200 ~ [%js js-helper]]) state]
       [%apps %maat %edit-task ~]
         [(send [200 ~ [%js js-edit-task]]) state]
+      [%apps %maat %htmx ~]
+        [(send [200 ~ [%js js-htmx]]) state]
       [%apps %maat %json-enc ~]
         [(send [200 ~ [%js js-json-enc]]) state]
       [%apps %maat %path-deps ~]

package-lock.json

@@ -6,7 +6,10 @@
   "author": "~talfus-laddus",
   "license": "MIT",
   "dependencies": {
-    "htmx.org": "^1.9.12",
+    "htmx.org": "^2.0.0",
+    "htmx-ext-client-side-templates": "^2.0.0",
+    "htmx-ext-json-enc": "^2.0.0",
+    "htmx-ext-path-deps": "^2.0.0",
     "mustache": "^4.2.0"
   },
   "devDependencies": {

package.json

@@ -18,23 +18,6 @@ button::after.icon-circle {
   font-display: swap;
 }
 
-:root {
-  --sidebar-gap: var(--vspace);
-  /* --sidebar-side-minwidth: 0; */
-  --sidebar-main-minwidth: 50%;
-
-  font-family: Inter, sans-serif;
-  font-feature-settings:
-    "liga" 1,
-    "calt" 1;
-  /* fix for Chrome */
-}
-
-@supports (font-variation-settings: normal) {
-  :root {
-    font-family: InterVariable, sans-serif;
-  }
-}
 
 body {
   position: relative;
@@ -48,12 +31,13 @@ h1 {
   font-weight: 600;
 }
 
-h2 {
-  font-family: "Soria";
-  font-weight: normal;
-  text-transform: none;
-}
+/* h2 { */
+/*   font-family: "Soria"; */
+/*   font-weight: normal; */
+/*   text-transform: none; */
+/* } */
 
+.inline_form,
 form.inline {
   display: inline-block;
 
@@ -81,10 +65,11 @@ header > .header-icon {
 }
 
 .svg-ico {
-  margin-top: var(--vspace);
+  margin-top: var(--vspace-0);
   display: inline;
   vertical-align: middle;
   height: 4em;
+  /* margin-bottom: var(--vspace-2); */
   /* height: 2em; */
   /* width: 2em; */
 }
@@ -108,52 +93,6 @@ header > .header-icon {
 /*     max-width: calc(1.3 * var(--max-width)); */
 /* } */
 
-.with-sidebar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sidebar-gap);
-}
-
-.with-sidebar > :first-child {
-  /* sidebar */
-  /* ↓ The width when the sidebar _is_ a sidebar */
-  /* flex-basis: 30%; */
-  flex-basis: var(--sidebar-minwidth);
-  flex-grow: 1;
-}
-
-.with-sidebar > :last-child {
-  /* not-sidebar (main) */
-  /* ↓ Grow from nothing and take up all available space */
-  flex-basis: 0;
-  flex-grow: 999;
-  /* ↓ Wrap when the elements are of equal width */
-  min-inline-size: 50%;
-}
-
-.with-sidebar > div > nav ul,
-.with-sidebar > div > nav ol {
-  /* align-content: space-around; */
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  list-style-type: none;
-  flex-wrap: wrap;
-  padding: 0;
-}
-
-/* List items are inline elements, make them behave more like blocks */
-.with-sidebar > div > nav ul li,
-.with-sidebar > div > nav ol li {
-  display: inline-block;
-}
-
-.with-sidebar > div > nav a,
-.with-sidebar > div > nav a:visited {
-  display: inline-block;
-  padding: 0.1rem 1rem;
-}
-
 main > ul {
   padding: 0;
 }
@@ -238,7 +177,7 @@ main > ul > li {
 }
 
 .tasks > li:not(:last-child) {
-  margin-bottom: var(--vspace-4);
+  margin-bottom: var(--vspace--1);
 }
 
 /* .column { */
@@ -282,17 +221,17 @@ main > ul > li {
   position: sticky;
   top: 0;
   background: var(--color-bg);
-  padding-top: var(--vspace-3);
-  padding-bottom: var(--vspace-4);
+  padding-top: var(--vspace--1);
+  padding-bottom: var(--vspace--2);
 }
 
 .sticky-bottom {
   /* use together with .top or .bottom */
   position: sticky;
   bottom: 0;
   background: var(--color-bg);
-  padding-top: var(--vspace-4);
-  padding-bottom: var(--vspace-3);
+  padding-top: var(--vspace--2);
+  padding-bottom: var(--vspace--1);
 }
 
 /* lists table */
@@ -312,10 +251,10 @@ main > ul > li {
 .lists > :is(thead, tbody) > tr > :is(th, td) {
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-bottom: var(--vspace-4);
+  padding-bottom: var(--vspace--2);
 
   &:first-child {
-    padding-top: var(--vspace-4);
+    padding-top: var(--vspace--2);
   }
 }