From 68fab4d6d309f68fa2dfb4a746f5daf4ed3c01d6 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Thu, 21 Nov 2024 17:30:51 +0100
Subject: [PATCH 1/2] WasteMeasurementSummary: move up date select & edit
 action

---
 .../components/WasteMeasurementSummary.vue    | 57 ++++++++++---------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/2024-frontend/src/components/WasteMeasurementSummary.vue b/2024-frontend/src/components/WasteMeasurementSummary.vue
index 035b582cb..3acab7b65 100644
--- a/2024-frontend/src/components/WasteMeasurementSummary.vue
+++ b/2024-frontend/src/components/WasteMeasurementSummary.vue
@@ -51,10 +51,36 @@ const activeAccordion = ref("")
   <div>
     <div v-if="displayMeasurement" class="fr-grid-row">
       <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">
+            <DsfrSelect v-model="chosenMeasurementIdx" label="Date de l'évaluation" :options="measurementChoices" />
+          </div>
+        </div>
+        <div v-else class="grey-text">
+          <p class="fr-mb-1w">Date de l'évaluation</p>
+          <p>
+            <b>
+              {{
+                formatDate(displayMeasurement.periodStartDate, {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+              - {{ formatDate(displayMeasurement.periodEndDate) }}
+            </b>
+          </p>
+        </div>
         <EmphasiseText :emphasisText="`${formatNumber(wastePerMeal)} g`" contextText="par repas" class="brown" />
-        <router-link v-if="editable" :to="newMeasurementRoute" class="fr-btn fr-btn--secondary fr-mt-sm-2w">
-          Saisir une nouvelle évaluation
-        </router-link>
+        <p v-if="editable">
+          <router-link :to="measurementTunnel" class="fr-btn fr-btn--secondary">
+            Modifier les données
+          </router-link>
+        </p>
+        <p v-if="editable">
+          <router-link :to="newMeasurementRoute" class="fr-btn fr-btn--secondary">
+            Saisir une nouvelle évaluation
+          </router-link>
+        </p>
       </div>
       <div class="fr-col-12 fr-col-sm-4 fr-mb-4w">
         <div v-if="displayMeasurement.isSortedBySource">
@@ -75,31 +101,6 @@ const activeAccordion = ref("")
     </div>
     <DsfrAccordionsGroup v-model="activeAccordion">
       <DsfrAccordion id="waste-measurement-detail" title="Données détaillées" class="fr-my-2w">
-        <div v-if="editable" class="fr-grid-row fr-grid-row--bottom fr-mb-4w">
-          <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-pr-4w">
-            <DsfrSelect v-model="chosenMeasurementIdx" label="Date de l'évaluation" :options="measurementChoices" />
-          </div>
-          <div v-if="editable" class="fr-col-12 fr-col-sm-4">
-            <router-link class="fr-btn fr-btn--tertiary" :to="measurementTunnel">
-              <span class="fr-icon-pencil-line fr-icon--sm fr-mr-1w"></span>
-              Modifier les données
-            </router-link>
-          </div>
-        </div>
-        <div v-else class="grey-text">
-          <p class="fr-mb-1w">Date de l'évaluation</p>
-          <p>
-            <b>
-              {{
-                formatDate(displayMeasurement.periodStartDate, {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-              - {{ formatDate(displayMeasurement.periodEndDate) }}
-            </b>
-          </p>
-        </div>
         <MeasurementDetail :measurement="displayMeasurement" />
         <router-link v-if="editable" class="fr-btn fr-btn--tertiary fr-btn--sm" :to="measurementTunnel">
           <span class="fr-icon-pencil-line fr-icon--sm fr-mr-1w"></span>

From a23960345366f971854abbe00fe96f2ca53d0757 Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:47:31 +0100
Subject: [PATCH 2/2] Layout adjustements following review

---
 2024-frontend/src/components/EdibleChart.vue  | 36 +++++++++----------
 2024-frontend/src/components/SourceChart.vue  | 36 +++++++++----------
 .../components/WasteMeasurementSummary.vue    | 10 +++---
 3 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/2024-frontend/src/components/EdibleChart.vue b/2024-frontend/src/components/EdibleChart.vue
index 75f8d6ac7..4a3751367 100644
--- 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
index fed2558d2..a3a9e3fbf 100644
--- 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
index 3acab7b65..659e5a0de 100644
--- 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>