feat: Improved download data mobile styles

src/components/ftbot/DownloadDataMain.vue

@@ -58,69 +58,87 @@ async function startDownload() {
 <template>
   <div class="container">
     <BackgroundJobTracking class="mb-4" />
-    <BCard header="Downloading Data">
+    <BCard header="Downloading Data" class="px-0">
-      <div class="d-flex px-3 mb-3 gap-3 flex-column flex-lg-column">
+      <div class="d-flex mb-3 gap-3 flex-column">
-        <div class="d-flex flex-row gap-5">
+        <div class="d-flex flex-column gap-3">
-          <div class="d-flex flex-fill align-items-end gap-2">
+          <div class="d-flex flex-column flex-lg-row gap-3">
-            <div class="d-flex flex-column flex-shrink">
+            <!-- Pairs section - keeping template buttons next to input -->
-              <h4 class="text-start">Select Pairs</h4>
+            <div class="flex-fill">
-              <BaseStringList v-model="pairs" placeholder="Pair" size="md" />
+              <div class="d-flex flex-column gap-2">
+                <div class="d-flex justify-content-between px-3">
+                  <h4 class="text-start">Select Pairs</h4>
+                  <h5 class="text-start">Pairs from template</h5>
+                </div>
+                <div class="d-flex gap-2 px-3">
+                  <BaseStringList
+                    v-model="pairs"
+                    placeholder="Pair"
+                    size="md"
+                    class="flex-grow-1"
+                  />
+                  <div class="d-flex flex-column gap-1">
+                    <div class="d-flex flex-column gap-1">
+                      <BButton
+                        v-for="pt in pairTemplates"
+                        :key="pt.idx"
+                        variant="secondary"
+                        :title="pt.pairs"
+                        @click="addPairs(pt.pairs)"
+                      >
+                        {{ pt.description }}
+                      </BButton>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
 
-            <div class="d-flex flex-column gap-1">
+            <!-- Timeframes section -->
-              <h6>Pairs from template</h6>
+            <div class="flex-fill px-3">
-              <BButton
+              <div class="d-flex flex-column gap-2">
-                v-for="pt in pairTemplates"
+                <h4 class="text-start">Select timeframes</h4>
-                :key="pt.idx"
+                <BaseStringList v-model="timeframes" placeholder="Timeframe" size="md" />
-                variant="secondary"
+              </div>
-                :title="pt.pairs"
-                @click="addPairs(pt.pairs)"
-              >
-                {{ pt.description }}
-              </BButton>
             </div>
           </div>
-          <div class="d-flex flex-fill align-items-end gap-2">
+
-            <div class="d-flex flex-column flex-shrink">
+          <!-- Advanced options section -->
-              <h4 class="text-start">Select timeframes</h4>
+          <div class="mb-2 border rounded-1 p-2 text-start mx-3">
-              <BaseStringList v-model="timeframes" placeholder="Timeframe" size="md" />
+            <BButton
-            </div>
+              v-b-toggle.advanced-options
+              class="mb-2"
+              @click="isAdvancedOpen = !isAdvancedOpen"
+            >
+              Advanced Options
+              <i-mdi-chevron-down v-if="!isAdvancedOpen" />
+              <i-mdi-chevron-up v-else />
+            </BButton>
+            <BCollapse id="advanced-options">
+              <div class="mb-2 border rounded-1 p-2 text-start">
+                <BFormCheckbox v-model="erase" class="mb-2">Erase existing data</BFormCheckbox>
+                <BFormCheckbox v-model="downloadTrades" class="mb-2">
+                  Download Trades instead of OHLCV data
+                </BFormCheckbox>
+              </div>
+              <div class="mb-2 border rounded-1 p-2 text-start">
+                <BFormCheckbox
+                  v-model="exchange.customExchange"
+                  v-b-toggle.custom-exchange
+                  class="mb-2"
+                >
+                  Custom Exchange
+                </BFormCheckbox>
+                <BCollapse id="custom-exchange">
+                  <ExchangeSelect v-model="exchange.selectedExchange" />
+                </BCollapse>
+              </div>
+            </BCollapse>
+          </div>
+
+          <div class="px-3">
+            <BButton variant="primary" @click="startDownload">Start Download</BButton>
           </div>
         </div>
-
-        <div class="mb-2 border rounded-1 p-2 text-start">
-          <BButton
-            v-b-toggle.advanced-options
-            class="mb-2"
-            @click="isAdvancedOpen = !isAdvancedOpen"
-          >
-            Advanced Options
-            <i-mdi-chevron-down v-if="!isAdvancedOpen" />
-            <i-mdi-chevron-up v-else />
-          </BButton>
-          <BCollapse id="advanced-options">
-            <div class="mb-2 border rounded-1 p-2 text-start">
-              <BFormCheckbox v-model="erase" class="mb-2">Erase existing data</BFormCheckbox>
-              <BFormCheckbox v-model="downloadTrades" class="mb-2">
-                Download Trades instead of OHLCV data
-              </BFormCheckbox>
-            </div>
-            <div class="mb-2 border rounded-1 p-2 text-start">
-              <BFormCheckbox
-                v-model="exchange.customExchange"
-                v-b-toggle.custom-exchange
-                class="mb-2"
-              >
-                Custom Exchange
-              </BFormCheckbox>
-              <BCollapse id="custom-exchange">
-                <ExchangeSelect v-model="exchange.selectedExchange" />
-              </BCollapse>
-            </div>
-          </BCollapse>
-        </div>
-
-        <BButton variant="primary" @click="startDownload">Start Download</BButton>
       </div>
     </BCard>
   </div>