feat: Improved download data mobile styles

This commit is contained in:
Matthias 2024-11-23 09:14:03 +01:00
parent a4d7e34ac2
commit a1b2ea0e06

View File

@ -58,17 +58,26 @@ async function startDownload() {
<template> <template>
<div class="container"> <div class="container">
<BackgroundJobTracking class="mb-4" /> <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 -->
<div class="flex-fill">
<div class="d-flex flex-column gap-2">
<div class="d-flex justify-content-between px-3">
<h4 class="text-start">Select Pairs</h4> <h4 class="text-start">Select Pairs</h4>
<BaseStringList v-model="pairs" placeholder="Pair" size="md" /> <h5 class="text-start">Pairs from template</h5>
</div> </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"> <div class="d-flex flex-column gap-1">
<h6>Pairs from template</h6>
<BButton <BButton
v-for="pt in pairTemplates" v-for="pt in pairTemplates"
:key="pt.idx" :key="pt.idx"
@ -80,15 +89,21 @@ async function startDownload() {
</BButton> </BButton>
</div> </div>
</div> </div>
<div class="d-flex flex-fill align-items-end gap-2"> </div>
<div class="d-flex flex-column flex-shrink"> </div>
</div>
<!-- Timeframes section -->
<div class="flex-fill px-3">
<div class="d-flex flex-column gap-2">
<h4 class="text-start">Select timeframes</h4> <h4 class="text-start">Select timeframes</h4>
<BaseStringList v-model="timeframes" placeholder="Timeframe" size="md" /> <BaseStringList v-model="timeframes" placeholder="Timeframe" size="md" />
</div> </div>
</div> </div>
</div> </div>
<div class="mb-2 border rounded-1 p-2 text-start"> <!-- Advanced options section -->
<div class="mb-2 border rounded-1 p-2 text-start mx-3">
<BButton <BButton
v-b-toggle.advanced-options v-b-toggle.advanced-options
class="mb-2" class="mb-2"
@ -120,8 +135,11 @@ async function startDownload() {
</BCollapse> </BCollapse>
</div> </div>
<div class="px-3">
<BButton variant="primary" @click="startDownload">Start Download</BButton> <BButton variant="primary" @click="startDownload">Start Download</BButton>
</div> </div>
</div>
</div>
</BCard> </BCard>
</div> </div>
</template> </template>