From 0573f567828413d88a33d98f276e767a473e20e4 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 3 Jul 2024 11:35:33 +0200
Subject: [PATCH] copy week in my calendar - improve layout

---
 .../public/vuejs/MyCalendarRange/App2.vue     | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
index a2afd8fb0..e690f9524 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue
@@ -63,7 +63,7 @@
         </select>
       </div>
     </div>
-    <div class="col-sm-3 col-xs-12">
+    <div class="col-xs-12 col-sm-3">
       <div class="float-end">
         <div class="form-check input-group">
           <span class="input-group-text">
@@ -105,38 +105,36 @@
   </FullCalendar>
 
   <div id="copy-widget">
-    <div class="container mt-4 mb-4">
+    <div class="container mt-2 mb-2">
 
-        <div class="row align-items-center mb-4">
-          <div class="col-sm-2 col-xs-12">
+        <div class="row justify-content-between align-items-center mb-4">
+          <div class="col-xs-12 col-sm-3 col-md-2">
             <h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6>
           </div>
-          <div class="col-sm-3 col-xs-12">
+          <div class="col-xs-12 col-sm-9 col-md-2">
             <select v-model="dayOrWeek" id="dayOrWeek" class="form-select">
               <option value="day">{{ $t("from_day_to_day") }}</option>
               <option value="week">{{ $t("from_week_to_week") }}</option>
             </select>
           </div>
-        </div>
-        <div class="row align-items-center">
           <template v-if="dayOrWeek === 'day'">
-            <div class="col-sm-3 col-xs-12">
+            <div class="col-xs-12 col-sm-3 col-md-3">
               <input class="form-control" type="date" v-model="copyFrom" />
             </div>
-            <div class="col-sm-1 col-xs-12 copy-chevron">
+            <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
               <i class="fa fa-angle-double-right"></i>
             </div>
-            <div class="col-sm-3 col-xs-12">
+            <div class="col-xs-12 col-sm-3 col-md-3">
               <input class="form-control" type="date" v-model="copyTo" />
             </div>
-            <div class="col-sm-2 col-xs-12">
-              <button class="btn btn-action" @click="copyDay">
+            <div class="col-xs-12 col-sm-5 col-md-1">
+              <button class="btn btn-action float-end" @click="copyDay">
                 {{ $t("copy_range") }}
               </button>
             </div>
           </template>
           <template v-else>
-            <div class="col-sm-3 col-xs-12">
+            <div class="col-xs-12 col-sm-3 col-md-3">
               <select
                 v-model="copyFromWeek"
                 id="copyFromWeek"
@@ -147,18 +145,18 @@
                 </option>
               </select>
             </div>
-            <div class="col-sm-1 col-xs-12 copy-chevron">
+            <div class="col-xs-12 col-sm-1 col-md-1 copy-chevron">
               <i class="fa fa-angle-double-right"></i>
             </div>
-            <div class="col-sm-3 col-xs-12">
+            <div class="col-xs-12 col-sm-3 col-md-3">
               <select v-model="copyToWeek" id="copyToWeek" class="form-select">
                 <option v-for="w in nextWeeks" :value="w.value" :key="w.value">
                   {{ w.text }}
                 </option>
               </select>
             </div>
-            <div class="col-sm-2 col-xs-12">
-              <button class="btn btn-action" @click="copyWeek">
+            <div class="col-xs-12 col-sm-5 col-md-1">
+              <button class="btn btn-action float-end" @click="copyWeek">
                 {{ $t("copy_range") }}
               </button>
             </div>