copy week in my calendar - improve layout

This commit is contained in:
nobohan 2024-07-03 11:35:33 +02:00
parent 843698a1d8
commit 0573f56782

View File

@ -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>