T7357 - visuele opluis e-mail pagina

Author: Koen De Voegt

src/assets/scss/_mail.scss

@@ -22,4 +22,62 @@
     border: 1px solid $sgv-oranje !important;
     box-shadow: 0 0 0 0.2rem $sgv-oranje !important;
   }
-}
+}
+// Alle invoervelden in de linkerkolom minstens zo breed als het sjabloon-dropdown (285px).
+// Enkel op brede schermen, waar de linkerkolom naast Onderwerp staat.
+// Het label in het dropdown is zelf ook een p-inputtext en valt hier bewust buiten,
+// anders wordt het dropdown 285px label + pijlknop en dus breder dan de rest.
+@media (min-width: 992px) {
+  .mail-kolom-links .p-inputtext:not(.p-dropdown-label),
+  .mail-kolom-links .p-dropdown,
+  .mail-kolom-links .p-fileupload {
+    min-width: 285px;
+  }
+
+  // Van, Antwoorden naar en Bcc groeien mee met de kolom.
+  // BaseInput beperkt het veld standaard tot col-sm-7 (58%).
+  .mail-kolom-links .p-grid .col-sm-7 {
+    width: 100%;
+  }
+
+  // Ontvangers, de checkboxen en Bijlage volgen dezelfde minimumbreedte
+  .mail-kolom-links .row .text-align-left {
+    min-width: 285px;
+  }
+}
+
+// Uniform verticaal ritme voor de veldlabels (Opgeslagen sjablonen, Van,
+// Antwoorden naar, Bcc en Onderwerp): boven elk label evenveel ruimte,
+// en een kleine vaste afstand tussen label en veld
+.veld-label {
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
+
+  label {
+    margin: 0;
+  }
+}
+
+// De knop 'Bestanden kiezen' altijd op zijn natuurlijke breedte houden.
+// De FileUpload-wrapper is op md/lg maar 33%/50% breed en drukt de knop anders plat.
+.mail-kolom-links .p-fileupload-choose {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+// Checkbox en label naast elkaar op één lijn houden, het label springt anders
+// bij weinig ruimte onder de checkbox
+.mail-kolom-links .col-lg-12.text-align-left {
+  display: flex;
+  align-items: center;
+
+  .p-checkbox {
+    flex-shrink: 0;
+  }
+
+  label {
+    white-space: nowrap;
+    // mt-1 van het label verstoort de verticale centrering
+    margin-top: 0 !important;
+  }
+}

src/views/Mail.vue

@@ -28,8 +28,8 @@
         </h4>
         <div class="row">
           <div class="col-12 col-lg-4">
-            <div class="pl-lg-4em mt-2">
-              <div class="d-flex justify-content-start">
+            <div class="pl-lg-4em mt-2 mail-kolom-links">
+              <div class="d-flex justify-content-start veld-label">
                 <label>Opgeslagen sjablonen:</label>
               </div>
               <div class="d-flex justify-content-start">
@@ -59,19 +59,19 @@
                   />
                 </div>
               </div>
-              <div class="d-flex justify-content-start">
+              <div class="d-flex justify-content-start veld-label">
                 <label>Van:</label>
               </div>
               <BaseInput
                 v-model="sjabloon.van"
                 :invalid="errors['van']"
                 error-message="Dit veld is verplicht"
               ></BaseInput>
-              <div class="d-flex justify-content-start">
+              <div class="d-flex justify-content-start veld-label">
                 <label>Antwoorden naar:</label>
               </div>
               <BaseInput v-model="sjabloon.replyTo"></BaseInput>
-              <div class="d-flex justify-content-start">
+              <div class="d-flex justify-content-start veld-label">
                 <label>Bcc:</label>
               </div>
               <BaseInput v-model="sjabloon.bcc"> </BaseInput>
@@ -118,7 +118,7 @@
                     class="mt--3p"
                   ></checkbox>
                   <label class="mt-1 ml-3" for="alleContacten"
-                    >Stuur naar de contacten van leden</label
+                    >Stuur naar contacten van leden</label
                   >
                 </div>
               </div>
@@ -146,7 +146,7 @@
                   chooseLabel="Bestanden kiezen"
                   :showUploadButton="false"
                   :showCancelButton="false"
-                  class="d-flex justify-content-start md:w-4 lg:w-6 sm:max-w-full"
+                  class="d-flex justify-content-start sm:max-w-full"
                 ></FileUpload>
                 <div
                   v-for="(file, index) in files"
@@ -186,7 +186,7 @@
             </div>
           </div>
           <div class="col-12 col-lg-8 pl-lg-5em mt-2">
-            <div class="d-flex justify-content-start">
+            <div class="d-flex justify-content-start veld-label">
               <label>Onderwerp:</label>
             </div>
             <BaseInput