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>
<div class="container">
<BackgroundJobTracking class="mb-4" />
<BCard header="Downloading Data">
<div class="d-flex px-3 mb-3 gap-3 flex-column flex-lg-column">
<div class="d-flex flex-row gap-5">
<div class="d-flex flex-fill align-items-end gap-2">
<div class="d-flex flex-column flex-shrink">
<BCard header="Downloading Data" class="px-0">
<div class="d-flex mb-3 gap-3 flex-column">
<div class="d-flex flex-column gap-3">
<div class="d-flex flex-column flex-lg-row gap-3">
<!-- 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>
<BaseStringList v-model="pairs" placeholder="Pair" size="md" />
<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">
<h6>Pairs from template</h6>
<BButton
v-for="pt in pairTemplates"
:key="pt.idx"
@ -80,15 +89,21 @@ async function startDownload() {
</BButton>
</div>
</div>
<div class="d-flex flex-fill align-items-end gap-2">
<div class="d-flex flex-column flex-shrink">
</div>
</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>
<BaseStringList v-model="timeframes" placeholder="Timeframe" size="md" />
</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
v-b-toggle.advanced-options
class="mb-2"
@ -120,8 +135,11 @@ async function startDownload() {
</BCollapse>
</div>
<div class="px-3">
<BButton variant="primary" @click="startDownload">Start Download</BButton>
</div>
</div>
</div>
</BCard>
</div>
</template>