Layout adjustements following review

betagouv · Nov 25, 2024 · a239603 · a239603
1 parent 68fab4d
commit a239603
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 44 deletions.
diff --git a/2024-frontend/src/components/EdibleChart.vue b/2024-frontend/src/components/EdibleChart.vue
@@ -43,25 +43,23 @@ const displayOption = ref("chart")
       <div class="fr-col-md-7 fr-mb-2w">
         <h3 class="fr-h6 fr-my-0">Part de comestible</h3>
       </div>
-      <div class="fr-col fr-mb-2w">
-        <div class="fr-grid-row">
-          <DsfrSegmentedSet
-            name="Part de comestible"
-            label="Choix d'affichage"
-            :options="[
-              {
-                label: 'Charte',
-                value: 'chart',
-              },
-              {
-                label: 'Texte',
-                value: 'text',
-              },
-            ]"
-            v-model="displayOption"
-            small
-          />
-        </div>
+      <div class="fr-col fr-mb-2w" style="text-align: right;">
+        <DsfrSegmentedSet
+          name="Part de comestible"
+          label="Choix d'affichage"
+          :options="[
+            {
+              label: 'Charte',
+              value: 'chart',
+            },
+            {
+              label: 'Texte',
+              value: 'text',
+            },
+          ]"
+          v-model="displayOption"
+          small
+        />
       </div>
     </div>
     <div v-if="displayOption === 'chart'" class="fr-py-2w fr-pr-8w">

diff --git a/2024-frontend/src/components/SourceChart.vue b/2024-frontend/src/components/SourceChart.vue
@@ -43,25 +43,23 @@ const displayOption = ref("chart")
       <div class="fr-col-md-7 fr-mb-2w">
         <h3 class="fr-h6 fr-my-0">Origine du gaspillage</h3>
       </div>
-      <div class="fr-col fr-mb-2w">
-        <div class="fr-grid-row">
-          <DsfrSegmentedSet
-            name="Origine du gaspillage"
-            label="Choix d'affichage"
-            :options="[
-              {
-                label: 'Charte',
-                value: 'chart',
-              },
-              {
-                label: 'Texte',
-                value: 'text',
-              },
-            ]"
-            v-model="displayOption"
-            small
-          />
-        </div>
+      <div class="fr-col fr-mb-2w" style="text-align: right;">
+        <DsfrSegmentedSet
+          name="Origine du gaspillage"
+          label="Choix d'affichage"
+          :options="[
+            {
+              label: 'Charte',
+              value: 'chart',
+            },
+            {
+              label: 'Texte',
+              value: 'text',
+            },
+          ]"
+          v-model="displayOption"
+          small
+        />
       </div>
     </div>
     <div v-if="displayOption === 'chart'" class="fr-py-2w fr-pr-8w">

diff --git a/2024-frontend/src/components/WasteMeasurementSummary.vue b/2024-frontend/src/components/WasteMeasurementSummary.vue
@@ -49,10 +49,10 @@ const activeAccordion = ref("")
 
 <template>
   <div>
-    <div v-if="displayMeasurement" class="fr-grid-row">
+    <div v-if="displayMeasurement" class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col fr-mb-4w">
         <div v-if="editable" class="fr-grid-row fr-grid-row--bottom fr-mb-4w">
-          <div class="fr-col-12 fr-col-md-6 fr-pr-4w">
+          <div class="fr-col-12 fr-pr-4w">
             <DsfrSelect v-model="chosenMeasurementIdx" label="Date de l'évaluation" :options="measurementChoices" />
           </div>
         </div>
@@ -72,12 +72,10 @@ const activeAccordion = ref("")
         </div>
         <EmphasiseText :emphasisText="`${formatNumber(wastePerMeal)} g`" contextText="par repas" class="brown" />
         <p v-if="editable">
-          <router-link :to="measurementTunnel" class="fr-btn fr-btn--secondary">
+          <router-link :to="measurementTunnel" class="fr-btn fr-btn--secondary fr-btn--sm fr-mr-1w fr-mb-1w">
             Modifier les données
           </router-link>
-        </p>
-        <p v-if="editable">
-          <router-link :to="newMeasurementRoute" class="fr-btn fr-btn--secondary">
+          <router-link :to="newMeasurementRoute" class="fr-btn fr-btn--primary fr-btn--sm">
             Saisir une nouvelle évaluation
           </router-link>
         </p>