Mise en forme du barème

src/lib/components/parameters/ScaleAtInstantEdit.svelte

@@ -165,10 +165,10 @@
   }
 </script>
 
-<div class=" rounded-sm px-1 mx-0x mb-4 mt-2">
 <table class="table-auto border-collapse ">
   <thead>
     <tr>
+      <th />
       <th class="font-light text-center bg-gray-100">Seuil</th>
       {#if isAmountScale}
         <th class="font-light text-center bg-gray-100">Montant</th>
@@ -178,12 +178,31 @@
         {/if}
         <th class="font-light text-center bg-gray-100">Taux</th>
       {/if}
-        <th />
     </tr>
   </thead>
   <tbody>
     {#each [...iterArrayWithErrors(scaleAtInstant, errors)] as [bracketAtInstant, errorsAtIndex], index}
       <tr>
+        <td>
+          <button
+            class="pr-1 rounded"
+            on:click={() => deleteBracket(index)}
+            title="Supprimer"
+            type="button"
+          >
+            <!-- Material ui icon : delete -->
+            <svg
+              class="fill-current h-5 w-5 text-gray-500  hover:text-le-jaune-dark"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              ><path d="M0 0h24v24H0z" fill="none" /><path
+                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+              /></svg
+            >
+          </button>
+        </td>
         <td class="p-1">
           <input
             class="bg-white text-black font-serif text-lg border-b border-l-0 border-r-0 border-t-0 py-0 w-24"
@@ -235,9 +254,8 @@
                 value={asRateBracketAtInstant(bracketAtInstant).base ===
                 "expected"
                   ? null
-                    : asNumberValue(
-                        asRateBracketAtInstant(bracketAtInstant).base,
-                      )?.value ?? null}
+                  : asNumberValue(asRateBracketAtInstant(bracketAtInstant).base)
+                      ?.value ?? null}
               />
               {#if showErrors && errorAsKeyValueDictionary(errorAsKeyValueDictionary(errorsAtIndex).base).value !== undefined}
                 <p>
@@ -270,26 +288,6 @@
             {/if}
           </td>
         {/if}
-          <td>
-            <button
-              class="p-1 rounded"
-              on:click={() => deleteBracket(index)}
-              title="Supprimer"
-              type="button"
-            >
-              <!-- Material ui icon : delete -->
-              <svg
-                class="fill-current h-5 w-5 text-gray-500  hover:text-le-jaune-dark"
-                xmlns="http://www.w3.org/2000/svg"
-                height="24px"
-                viewBox="0 0 24 24"
-                width="24px"
-                ><path d="M0 0h24v24H0z" fill="none" /><path
-                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                /></svg
-              >
-            </button>
-          </td>
       </tr>
     {/each}
   </tbody>
@@ -300,7 +298,7 @@
   on:click={appendBracket}
   type="button"
 >
-    <div class="mt-4 text-sm  flex items-center">
+  <div class="mt-4 text-sm pl-1 flex items-center">
     <svg
       class="fill-current inline mr-1"
       xmlns="http://www.w3.org/2000/svg"
@@ -314,4 +312,3 @@
     >Ajouter un seuil
   </div></button
 >
-</div>

src/lib/components/variables/VariableReferredScaleParameter.svelte

@@ -97,6 +97,22 @@
 
 <section class="mb-5">
   <VariableReferredParameterHeader {depth} {parameter} />
+
+  <div class="flex">
+    <div class="bg-white rounded-sm pr-2 pl-1 py-2 ml-2 mb-1 mt-1 mr-6">
+      <ScaleAtInstantEdit
+        errors={{}}
+        {parameter}
+        on:change={changeScale}
+        scaleAtInstant={latestScaleAtInstant}
+        showErrors={true}
+      />
+    </div>
+  </div>
+  <p class="ml-4 text-sm mb-3 text-gray-600">
+    depuis {latestInstantSplit[1]}/{latestInstantSplit[0]}
+  </p>
+
   <div class="bg-gray-100 flex items-baseline text-gray-600 text-xs px-2">
     <div class="flex items-center">
       <div class="bg-gray-100 flex text-gray-600 text-sm">
@@ -104,6 +120,7 @@
           <div class="flex pr-1">
             {#if latestInstant < "2020" || latestInstant === "0001-01-01"}
               <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
+              <div class="flex pr-1">
                 <svg
                   aria-hidden="true"
                   class="block fill-current h-5 w-5 text-white "
@@ -121,12 +138,14 @@
                     d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
                   />
                 </svg>
+              </div>
               <span
                 title="La dernière relecture date de {latestInstantSplit[1]}/{latestInstantSplit[0]}"
                 >À vérifier</span
               >
             {:else}
               <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
+              <div class="flex pr-1">
                 <svg
                   aria-hidden="true"
                   class="block h-5 w-5 text-white "
@@ -142,6 +161,7 @@
                     fill="white"
                   />
                 </svg>
+              </div>
               <span
                 title="La dernière relecture date de {latestInstantSplit[1]}/{latestInstantSplit[0]}"
                 >Vérifié</span
@@ -149,14 +169,8 @@
             {/if}
           </div>
         </div>
-        <!--Date du paramètre-->
-        <div class="mx-2">
-          <p>
-            {latestInstantSplit[1]}/{latestInstantSplit[0]}
-          </p>
-        </div>
+
         <div>
-          ⎢
           <a
             class="text-sm ml-1 underline text-gray-600 hover:text-gray-700"
             href="/parameters/{parameter.name}"
@@ -176,12 +190,4 @@
       </div>
     </div>
   </div>
-
-  <ScaleAtInstantEdit
-    errors={{}}
-    {parameter}
-    on:change={changeScale}
-    scaleAtInstant={latestScaleAtInstant}
-    showErrors={true}
-  />
 </section>