From 595f026589f9575d5591e6e63a8c81f71a0da5ca Mon Sep 17 00:00:00 2001
From: philc <phc@ndda.fr>
Date: Sat, 6 Sep 2025 09:53:00 +0200
Subject: [PATCH] simplemobnav change to look like smartphone

---
 wco/apxauth/main_fr.mustache                  |   4 +-
 wco/apxauth/screeninformation_fr.mustache     |   2 +-
 wco/apxauth/screensignup_fr.mustache          |  12 +--
 wco/simplemobnav/main.mustache                |  50 +++++----
 wwws/admin/src/static/css/input.css           |  30 +++---
 wwws/admin/src/static/css/output.css          | 100 +++++++++++-------
 wwws/admin/src/static/css/sourcetw copy.css   |   4 -
 .../admin/src/static/css/tailwind.config.json |   9 ++
 wwws/itm/admin.json                           |   8 +-
 9 files changed, 128 insertions(+), 91 deletions(-)
 delete mode 100644 wwws/admin/src/static/css/sourcetw copy.css
 create mode 100644 wwws/admin/src/static/css/tailwind.config.json

diff --git a/wco/apxauth/main_fr.mustache b/wco/apxauth/main_fr.mustache
index 7295e6e..337f9f7 100644
--- a/wco/apxauth/main_fr.mustache
+++ b/wco/apxauth/main_fr.mustache
@@ -1,7 +1,7 @@
 <!-- screen action-->
-<div class="screenaction mt-5 m-2 sm:mx-auto sm:w-full sm:max-w-sm">
+<div class="screenaction mt-5 px-7 w-full">
 </div>
 <!-- feedback action-->
-<div class="my-5">
+<div class="my-5 w-full">
     <p class="msginfo text-center text-info"></p>
 </div>
\ No newline at end of file
diff --git a/wco/apxauth/screeninformation_fr.mustache b/wco/apxauth/screeninformation_fr.mustache
index b7faaa0..19fa89b 100644
--- a/wco/apxauth/screeninformation_fr.mustache
+++ b/wco/apxauth/screeninformation_fr.mustache
@@ -1,4 +1,4 @@
-<div class="space-y-6 text-justify">
+<div class="mx-3 my-auto text-justify">
     <h2>Qu'est-ce qu'une identité numérique décentralisée?</h2>
     <p>
         C'est <span class="text-secondary">un moyen de s'identifier en prouvant qu'on est le propriétaire
diff --git a/wco/apxauth/screensignup_fr.mustache b/wco/apxauth/screensignup_fr.mustache
index 292e62e..afb80db 100644
--- a/wco/apxauth/screensignup_fr.mustache
+++ b/wco/apxauth/screensignup_fr.mustache
@@ -1,10 +1,10 @@
 <div class="w-full">
-  <p data-wco="createid" class="text-center text-neutral-content">
+  <p data-wco="createid" class="text-center text-neutral-content w-full">
     {{{signuptitle}}}
   </p>
   <div class="paramid space-y-3 w-full">
       <div class="mt-2">
-        <label class="input validator mbt-1 w-full max-w-full">
+        <label class="input validator mbt-1 w-full">
           <svg class="h-[1em] opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <g
               stroke-linejoin="round"
@@ -32,7 +32,7 @@
         </div>
       </div>
       <div class="mt-2">
-        <label class="input validator mt-1 w-full max-w-full">
+        <label class="input validator mt-1 w-full">
           <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <g
               stroke-linejoin="round"
@@ -52,7 +52,7 @@
         </div>
       </div>
       <div class="mt-2">  
-        <label class="input mt-1 w-full max-w-full">
+        <label class="input mt-1 w-full">
           <svg class="h-[1em] opacity-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
             <g
               stroke-linejoin="round"
@@ -81,12 +81,12 @@
         </button>
       </div>
   </div>
-  <div class="getmykeys hidden mt-1">
+  <div class="getmykeys hidden mt-1 w-full">
     <div class="flex m-6">
       <div class="w-14 flex-none">
             <input type="checkbox" checked="checked" class="signuptrustedcheck checkbox checkbox-secondary" />
       </div>
-      <div class="flex-1">
+      <div class="flex-1 w-full">
         <p class="text-sm text-justify" >{{{trusttext}}}</p>
       </div>
     </div>
diff --git a/wco/simplemobnav/main.mustache b/wco/simplemobnav/main.mustache
index 860c125..4d227a9 100644
--- a/wco/simplemobnav/main.mustache
+++ b/wco/simplemobnav/main.mustache
@@ -1,29 +1,35 @@
- <div class="py-1 sm:w-full sm:max-w-sm mx-auto">
-    <img
-        class="mx-auto w-auto block dark:hidden"
-        data-wco="logo"
-        src="{{logobglight.src}}"
-        alt="{{logobglight.alt}}"
-        src="{{logobgdark.src}}"
-        alt="{{logobgdark.alt}}"
-    />
-    <img
-        class="mx-auto w-auto hidden dark:block"
-        data-wco="logo"
-        src="{{logobgdark.src}}"
-        alt="{{logobgdark.alt}}"
-    />
-    <h2
-        class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight"
-        data-wco="claim"
-    >
-        {{claim.textContent}}
-    </h2>
+<div id="pageheader" class="py-5 w-full max-w-sm mx-auto">
+     <div class="flex flex-col items-center h-sm:flex-row h-sm:text-start h-sm:items-start h-sm:gap-4">
+        <div class="h-sm:w-1/3">
+            <img
+                class="mx-auto w-auto block dark:hidden h-sm:max-h-10"
+                data-wco="logo"
+                src="{{logobglight.src}}"
+                alt="{{logobglight.alt}}"
+                src="{{logobgdark.src}}"
+                alt="{{logobgdark.alt}}"
+            />
+            <img
+                class="mx-auto w-auto hidden dark:block h-sm:max-h-10"
+                data-wco="logo"
+                src="{{logobgdark.src}}"
+                alt="{{logobgdark.alt}}"
+            />
+        </div>
+        <div class="h-sm:w-2/3">
+            <h2
+                class="mt-10 h-sm:mt-0 h-sm:text-lg text-2xl font-bold leading-9 tracking-tight"
+                data-wco="claim"
+            >
+                {{claim.textContent}}
+            </h2>
+        </div>
+    </div>    
 </div>
 <div id="loading" class="flex min-h-full flex-col justify-center">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm py-4 text-center">
           <span class="loading loading-spinner loading-lg text-secondary"></span>
     </div>
 </div>
-<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="flex flex-col overflow-y-auto flex justify-center"></div>
+<div id="{{contentid}}" wco-name="{{contentwconame}}" wco-link="{{contentscreen}}" class="py-5 flex-grow flex flex-col overflow-y-auto items-start"></div>
 <div class="navlink flex justify-around border-t bg-base-200 p-2"></div>
\ No newline at end of file
diff --git a/wwws/admin/src/static/css/input.css b/wwws/admin/src/static/css/input.css
index 8dc463b..5866bfa 100644
--- a/wwws/admin/src/static/css/input.css
+++ b/wwws/admin/src/static/css/input.css
@@ -26,6 +26,10 @@
 @import "/opt/apxtowns/farm-test/apxtri/node_modules/tailwindcss";
 @plugin "/opt/apxtowns/farm-test/apxtri/node_modules/daisyui";
 @import "./sourcetw.css";
+/*
+ add h-sm a vertical breakpoint to check screen height that doies not exist in tw or daisyui
+*/
+@config "./tailwind.config.json";
 
 @theme {
   --font-display: "Questrial", "sans-serif";
@@ -117,17 +121,17 @@
   --noise: 0;
 }
 
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-  ::-webkit-scrollbar-track {
-    background: #2d3748;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: #4a5568;
-    border-radius: 4px;
-  }
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #2d3748;
+}
+::-webkit-scrollbar-thumb {
+  background: #4a5568;
+  border-radius: 4px;
+}
 
-  .transition-width {
-    transition: width 0.3s ease;
-  }
+.transition-width {
+  transition: width 0.3s ease;
+}
diff --git a/wwws/admin/src/static/css/output.css b/wwws/admin/src/static/css/output.css
index d905e48..5a616a3 100644
--- a/wwws/admin/src/static/css/output.css
+++ b/wwws/admin/src/static/css/output.css
@@ -2494,6 +2494,9 @@
   }
   .container {
     width: 100%;
+    @media (width >= (max-height: 700px)) {
+      max-width: (max-height: 700px);
+    }
     @media (width >= 40rem) {
       max-width: 40rem;
     }
@@ -2513,9 +2516,6 @@
   .m-1 {
     margin: calc(var(--spacing) * 1);
   }
-  .m-2 {
-    margin: calc(var(--spacing) * 2);
-  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -2564,6 +2564,9 @@
       }
     }
   }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -2573,6 +2576,9 @@
   .my-5 {
     margin-block: calc(var(--spacing) * 5);
   }
+  .my-auto {
+    margin-block: auto;
+  }
   .label {
     display: inline-flex;
     align-items: center;
@@ -3061,9 +3067,6 @@
   .h-\[1em\] {
     height: 1em;
   }
-  .h-\[700px\] {
-    height: 700px;
-  }
   .h-auto {
     height: auto;
   }
@@ -3127,9 +3130,6 @@
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
-  .w-\[375px\] {
-    width: 375px;
-  }
   .w-auto {
     width: auto;
   }
@@ -3309,13 +3309,6 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -3357,9 +3350,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
-  }
   .rounded-box {
     border-radius: var(--radius-box);
   }
@@ -3514,6 +3504,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
@@ -3526,6 +3519,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -4010,31 +4006,11 @@
       display: none;
     }
   }
-  .sm\:h-\[700px\] {
-    @media (width >= 40rem) {
-      height: 700px;
-    }
-  }
   .sm\:w-64 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 64);
     }
   }
-  .sm\:w-\[375px\] {
-    @media (width >= 40rem) {
-      width: 375px;
-    }
-  }
-  .sm\:w-\[400px\] {
-    @media (width >= 40rem) {
-      width: 400px;
-    }
-  }
-  .sm\:w-\[500px\] {
-    @media (width >= 40rem) {
-      width: 500px;
-    }
-  }
   .sm\:w-\[600px\] {
     @media (width >= 40rem) {
       width: 600px;
@@ -4086,6 +4062,52 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
+  .h-sm\:mt-0 {
+    @media (max-height: 700px) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+  .h-sm\:max-h-10 {
+    @media (max-height: 700px) {
+      max-height: calc(var(--spacing) * 10);
+    }
+  }
+  .h-sm\:w-1\/3 {
+    @media (max-height: 700px) {
+      width: calc(1/3 * 100%);
+    }
+  }
+  .h-sm\:w-2\/3 {
+    @media (max-height: 700px) {
+      width: calc(2/3 * 100%);
+    }
+  }
+  .h-sm\:flex-row {
+    @media (max-height: 700px) {
+      flex-direction: row;
+    }
+  }
+  .h-sm\:items-start {
+    @media (max-height: 700px) {
+      align-items: flex-start;
+    }
+  }
+  .h-sm\:gap-4 {
+    @media (max-height: 700px) {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
+  .h-sm\:text-start {
+    @media (max-height: 700px) {
+      text-align: start;
+    }
+  }
+  .h-sm\:text-lg {
+    @media (max-height: 700px) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
   .dark\:block {
     @media (prefers-color-scheme: dark) {
       display: block;
diff --git a/wwws/admin/src/static/css/sourcetw copy.css b/wwws/admin/src/static/css/sourcetw copy.css
deleted file mode 100644
index a6b3ea7..0000000
--- a/wwws/admin/src/static/css/sourcetw copy.css	
+++ /dev/null
@@ -1,4 +0,0 @@
-@source "/var/lib/apxtowns/data/apxtri/objects/wco/apx/*.{html,js,mustache}";
-@source "/var/lib/apxtowns/data/apxtri/objects/wwws/admin/src/**/*.{html,js,mustache}";
-@source "/var/lib/apxtowns/data/apxtri/objects/wco/simplemobnav/*.{html,js,mustache}";
-@source "/var/lib/apxtowns/data/apxtri/objects/wco/apxauth/*.{html,js,mustache}";
diff --git a/wwws/admin/src/static/css/tailwind.config.json b/wwws/admin/src/static/css/tailwind.config.json
new file mode 100644
index 0000000..fad2c63
--- /dev/null
+++ b/wwws/admin/src/static/css/tailwind.config.json
@@ -0,0 +1,9 @@
+{
+  "theme": {
+    "extend": {
+      "screens": {
+        "h-sm": { "raw": "(max-height: 700px)" }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/wwws/itm/admin.json b/wwws/itm/admin.json
index a885c07..9f1afaf 100644
--- a/wwws/itm/admin.json
+++ b/wwws/itm/admin.json
@@ -27,12 +27,12 @@
         "apxtri/objects/persons"
       ],
       "ref": {
-        "Odmdb": "apxtri/models/tplstrings/Odmdb",
-        "Pagans": "apxtri/models/tplstrings/Pagans",
-        "Persons": "apxtri/models/tplstrings/Persons",
         "Checkjson": "apxtri/models/tplstrings/Checkjson",
         "Notification": "apxtri/models/tplstrings/Notifications",
-        "Middlewares": "apxtri/models/tplstrings/Middlewares"
+        "Middlewares": "apxtri/models/tplstrings/Middlewares",
+        "Odmdb": "apxtri/models/tplstrings/Odmdb",
+        "Pagans": "apxtri/models/tplstrings/Pagans",
+        "Persons": "apxtri/models/tplstrings/Persons"
       }
     }
   }