feat: actions visibles en tableau mobile

Signed-off-by: Maud Royer <hello@maudroyer.fr>
AgenceBio · Apr 2, 2024 · 5319dec · 5319dec
1 parent 190e177
commit 5319dec
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/src/components/Features/FeatureGroup.vue b/src/components/Features/FeatureGroup.vue
@@ -8,12 +8,21 @@
         </div>
       </td>
       <td class="accordion"><span class="fr-icon fr-icon-arrow-down-s-line" :aria-checked="open" aria-role="button" /></td>
-      <th class="labels" scope="row" :data-group-id="featureGroup.key">{{ featureGroup.label }}</th>
-      <td class="surface numeric">{{ inHa(featureGroup.surface) }}&nbsp;ha</td>
+      <th class="labels" scope="row" :data-group-id="featureGroup.key">
+        {{ featureGroup.label }}
+        <small class="group-precision fr-hidden-sm fr-hidden-md fr-hidden-lg fr-hidden-xl">
+          {{ inHa(featureGroup.surface) }}&nbsp;ha
+        </small>
+      </th>
+      <td class="surface numeric">
+        <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl">
+          {{ inHa(featureGroup.surface) }}&nbsp;ha
+        </span>
+      </td>
       <td class="actions">
         <span
             v-if="groupErrors"
-            class="fr-btn fr-btn--tertiary-no-outline fr-icon-warning-fill fr-icon--warning fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl"
+            class="fr-btn fr-btn--tertiary-no-outline fr-icon-warning-fill fr-icon--warning"
             :title="`${groupErrors} parcelles à amender`"
         />
       </td>
@@ -203,6 +212,11 @@ tr.parcelle th {
       padding: 0;
     }
   }
+
+  & > .group-precision {
+    display: block;
+    color: var(--text-mention-grey);
+  }
 }
 
 td.numeric,

diff --git a/src/components/record/Table.vue b/src/components/record/Table.vue
@@ -48,13 +48,26 @@
               </select>
             </div>
           </th>
-          <th scope="col" class="numeric">Surface</th>
+          <th scope="col" class="numeric">
+            <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl ">
+              Surface
+            </span>
+          </th>
           <th />
         </tr>
         <tr class="summary" v-if="(selectedFeatureIds.length === 0 && hasFeatures)">
           <td colspan="2"></td>
-          <td class="labels">{{ features.length }} parcelles</td>
-          <td class="numeric">{{ inHa(surface(features)) }}&nbsp;ha</td>
+          <td class="labels">
+            {{ features.length }} parcelles
+            <span class="fr-hidden-sm fr-hidden-md fr-hidden-lg fr-hidden-xl">
+              - {{ inHa(surface(features)) }}&nbsp;ha
+            </span>
+          </td>
+          <td class="numeric">
+            <span class="fr-hidden fr-unhidden-sm fr-unhidden-md fr-unhidden-lg fr-unhidden-xl ">
+            {{ inHa(surface(features)) }}&nbsp;ha
+            </span>
+          </td>
           <th />
         </tr>
       </thead>
@@ -220,18 +233,13 @@ async function performAsyncRecordAction (promise, text = 'Modification enregistr
 
 <style scoped>
 .selection {
-  min-width: 1.5rem;
+  min-width: 2rem;
 }
 
 .accordion {
   width: 2.5rem;
 }
 
-.surface {
-  width: 1rem;
-}
-
-
 .seamless-select {
   position: relative;
   padding-right: 1rem;
@@ -266,9 +274,15 @@ async function performAsyncRecordAction (promise, text = 'Modification enregistr
     padding: 0;
     font-size: 0;
     line-height: 0;
-
     white-space: nowrap;
   }
+
+  th:has(span.fr-hidden.fr-unhidden-sm),
+  td:has(span.fr-hidden.fr-unhidden-sm){
+    @media (max-width: 579px) {
+      padding: 0;
+    }
+  }
 }
 
 .fr-table thead {