simplemobnav change to look like smartphone

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>

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

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>

wco/simplemobnav/main.mustache

@@ -1,6 +1,8 @@
- <div class="py-1 sm:w-full sm:max-w-sm mx-auto">
+<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"
+                class="mx-auto w-auto block dark:hidden h-sm:max-h-10"
                 data-wco="logo"
                 src="{{logobglight.src}}"
                 alt="{{logobglight.alt}}"
@@ -8,22 +10,26 @@
                 alt="{{logobgdark.alt}}"
             />
             <img
-        class="mx-auto w-auto hidden dark:block"
+                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 text-center text-2xl font-bold leading-9 tracking-tight"
+                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>

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";

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;

wwws/admin/src/static/css/sourcetw copy.css

@@ -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}";

wwws/admin/src/static/css/tailwind.config.json

@@ -0,0 +1,9 @@
+{
+  "theme": {
+    "extend": {
+      "screens": {
+        "h-sm": { "raw": "(max-height: 700px)" }
+      }
+    }
+  }
+}

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"
       }
     }
   }