Merge branch 'ui-grid' into 'master'

Ui grid

See merge request leximpact/leximpact-socio-fiscal-ui!33

src/lib/components/NavBar.svelte

@@ -22,9 +22,9 @@
 </script>
 
 <div class="fixed top-0 w-full z-50">
-  <nav class="bg-le-jaune h-14 shadow-md mx-auto px-2 sm:px-6 lg:px-8 w-full">
+  <nav class="bg-le-jaune h-14 shadow-md mx-auto px-4 lg:px-8 w-full">
     <!-- Création d'un div sur l'ensemble de la nav bar pour répartir les blocs-->
-    <div class="hidden sm:flex  justify-between">
+    <div class="hidden md:flex  justify-between">
       <!-- Premier div pour le logo AN et le menu A propos-->
       <div class="flex w-64 items-center">
         <!-- logo assemblee nationale -->
@@ -120,7 +120,7 @@
       </div>
 
       <!-- Deuxième div pour le logo Contrib. & prestas sociales-->
-      <div class="hidden sm:flex">
+      <div class="hidden md:flex">
         <a href="/">
           <div
             class="space-y-1 flex items-center h-14 gap-2 rounded text-white p-1"
@@ -144,7 +144,7 @@
         <div class="flex">
           <a
             href="/contribuer"
-            class="hidden sm:inline-flex text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
+            class="hidden md:inline-flex text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
             type="button"
           >
             <div class="flex items-center">
@@ -271,7 +271,7 @@
 
     <!--Menu écran téléphone-->
 
-    <div class="sm:hidden flex justify-between items-center">
+    <div class="md:hidden flex justify-between items-center">
       <!-- Premier div pour le logo AN et le menu A propos-->
       <div class="w-16">
         <!-- logo assemblee nationale -->
@@ -299,11 +299,11 @@
       </div>
 
       <!-- Troisième div pour le bouton menu-->
-      <div class="w-16 ">
+      <div class="w-16 flex justify-end">
         <button
           aria-expanded={openAproposMenu}
           aria-haspopup="true"
-          class="text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
+          class="text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1 justify-self-end"
           id="user-menu"
           on:click={() => (openAproposMenu = !openAproposMenu)}
           type="button"
@@ -311,7 +311,7 @@
           <span class="sr-only">Open user menu</span>
           <!-- Material icon : menu -->
           <svg
-            class="sm:hidden fill-current text-white"
+            class="md:hidden fill-current text-white"
             xmlns="http://www.w3.org/2000/svg"
             height="24px"
             viewBox="0 0 24 24"

src/lib/components/test_cases/TestCasesPane.svelte

@@ -86,7 +86,7 @@
   }
 </script>
 
-<section class=" grid grid-cols-1 md:grid-cols-2 gap-10">
+<section class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-10">
   {#each $testCases as situation, situationIndex}
     <TestCaseView
       calculationName={$calculationName}

src/routes/index.svelte

@@ -535,10 +535,12 @@
   <title>Calculs | {$session.title}</title>
 </svelte:head>
 
-<main class="fond flex flex-col lg:flex-row">
+<main class="fond flex flex-col md:flex-row">
   <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement et cas type)-->
   {#if editionMode !== null}
-    <div class="bg-white flex-none pb-4 lg:pb-0 shadow-md w-full lg:w-1/3">
+    <div
+      class="bg-white flex-none pb-4 lg:pb-0 shadow-md w-full md:w-1/2 lg:w-1/3 2xl:w-1/4"
+    >
       <div class="flex justify-end pr-4 py-4 w-full">
         <!-- Bouton de fermeture du panneau de gauche -->
         <button on:click={closeEditionPane}>
@@ -673,9 +675,10 @@
   {/if}
 
   <!-- Panneau de droite pour les impacts et notamment le waterfall-->
-  <div class="w-full {editionMode !== null ? 'hidden lg:block' : ''}">
+  <div class="w-full {editionMode !== null ? 'hidden md:block' : ''}">
     <div class="mx-1 my-2 px-4">
       <div class="flex justify-between">
+        <!--
         <label
           ><input bind:checked={$adaptAmountsScale} type="checkbox" />
           <span class="hidden text-xs lg:inline text-gray-600">
@@ -685,9 +688,9 @@
             Échelle unique
           </span></label
         >
-
+        -->
         <select
-          class="flex rounded border-1 mx-auto text-xs "
+          class=" rounded border-1 text-xs "
           required
           bind:value={$calculationName}
         >
@@ -703,7 +706,7 @@
           >
             <div class="flex justify-center">
               <!-- Material Icon Share --><svg
-                class="fill-current md:mr-2"
+                class="fill-current lg:mr-2"
                 xmlns="http://www.w3.org/2000/svg"
                 height="18px"
                 viewBox="0 0 24 24"
@@ -713,7 +716,7 @@
                   d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
                 /></svg
               >
-              <span class="hidden md:flex"> Sauvegarder / partager</span>
+              <span class="hidden lg:flex"> Sauvegarder / partager</span>
             </div>
           </button>