Ajustement des tailles de polices section appel, + taille des pages ajustés pour les navigateurs téléphones

Author: Loshido

bun.lockb

@@ -33,7 +33,7 @@ export default component$(() => {
     }
 
     return <section 
-        class="w-svw h-svh sm:grid overflow-hidden"
+        class="w-dvw h-dvh sm:grid overflow-hidden"
         style="grid-template-columns: auto 1fr">
         <div class="sm:hidden p-2 flex flex-row gap-3 border-b items-center">
             <div class="p-2 hover:bg-black hover:bg-opacity-10 rounded

src/routes/admin/layout.tsx

@@ -273,7 +273,7 @@ export default component$(() => {
         }
     })
 
-    return <section>
+    return <>
         <div class="text-2xl font-medium p-5 sm:p-10
             flex flex-row flex-wrap gap-x-2 items-center">
             Appel du pôle 
@@ -288,7 +288,7 @@ export default component$(() => {
         </div>
         {
             state.pole
-            ? <div class="appel w-full flex flex-col gap-0">
+            ? <div class="appel w-full flex flex-col gap-0 lg:text-xl lg:leading-6">
                 <div class="ligne tete font-semibold">
                     <Entete
                         trie={{
@@ -347,7 +347,7 @@ export default component$(() => {
                         /> )
                 }
             </div>
-            : <div class="w-full h-full sm:px-32 md:px-48 lg:px-64 xl:px-96 flex flex-row gap-2 items-center justify-center min-h-96 font-medium">
+            : <div class="w-full min-h-96 sm:px-32 md:px-48 lg:px-64 xl:px-96 flex flex-row gap-2 items-center justify-center min-h-96 font-medium">
                 <LuTag/>
                 <p class="w-2/3 sm:w-auto">
                     Vous devez choisir le pôle pour lequel vous voulez faire l'appel!
@@ -375,7 +375,7 @@ export default component$(() => {
             }
 
         </div>
-    </section>
+    </>
 })
 
 export const head: DocumentHead = {

src/routes/dash/appels/index.tsx

@@ -2,7 +2,7 @@
     border-top: 1px solid #0001;
 
     display: grid;
-    grid-template-columns: 200px 200px 100px 40px 40px;
+    grid-template-columns: 20dvw 20dvw 15dvw 40px 40px;
 }
 
 .appel .ligne > * {
@@ -19,6 +19,7 @@
 .appel .ligne.tete > *{
     cursor: pointer;
     user-select: none;
+    line-height: 1;
 }
 
 .appel .ligne .cube{

src/routes/dash/appels/style.css

@@ -26,7 +26,7 @@ export default component$(() => {
     }
 
     return <section id="dash-layout"
-        class="w-svw h-svh sm:grid overflow-hidden"
+        class="w-dvw h-dvh sm:grid overflow-hidden"
         style="grid-template-columns: auto 1fr">
         <div class="sm:hidden p-2 flex flex-row gap-3 border-b items-center">
             <div class="p-2 hover:bg-black hover:bg-opacity-10 rounded
@@ -37,7 +37,7 @@ export default component$(() => {
         <DashNavigation
             open={menu.value}
             permissions={permissions}/>
-        <div class="w-full h-full overflow-auto">
+        <div class="w-full h-full overflow-auto pb-12 sm:pb-0">
             <Slot/>
         </div>
     </section>

src/routes/dash/layout.tsx

@@ -3,7 +3,7 @@ import { DocumentHead, Link } from "@builder.io/qwik-city";
 
 import Cat from "~/assets/cat.png?jsx"
 export default component$(() => {
-    return <section class="w-svw h-svh">
+    return <section class="w-dvw h-dvh">
         <Link href="/" class="absolute top-4 left-4 font-light
         hover:text-black hover:text-opacity-25 transition-colors">
             Revenir en arrière

src/routes/etc/password-reset/index.tsx

@@ -89,7 +89,7 @@ export default component$(() => {
     })
 
     return <section class="flex md:grid flex-col md:items-center gap-2 sm:gap-10 
-        p-5 md:p-10 w-svw h-svh
+        p-5 md:p-10 w-dvw h-dvh
         md:grid-cols-2 md:grid-rows-1">
         <FlowField/> 
         <Form