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> </select>
</div> </div>
</div> </div>
<div class="col-sm-3 col-xs-12"> <div class="col-xs-12 col-sm-3">
<div class="float-end"> <div class="float-end">
<div class="form-check input-group"> <div class="form-check input-group">
<span class="input-group-text"> <span class="input-group-text">
@ -105,38 +105,36 @@
</FullCalendar> </FullCalendar>
<div id="copy-widget"> <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="row justify-content-between align-items-center mb-4">
<div class="col-sm-2 col-xs-12"> <div class="col-xs-12 col-sm-3 col-md-2">
<h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6> <h6 class="chill-red">{{ $t("copy_range_from_to") }}</h6>
</div> </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"> <select v-model="dayOrWeek" id="dayOrWeek" class="form-select">
<option value="day">{{ $t("from_day_to_day") }}</option> <option value="day">{{ $t("from_day_to_day") }}</option>
<option value="week">{{ $t("from_week_to_week") }}</option> <option value="week">{{ $t("from_week_to_week") }}</option>
</select> </select>
</div> </div>
</div>
<div class="row align-items-center">
<template v-if="dayOrWeek === 'day'"> <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" /> <input class="form-control" type="date" v-model="copyFrom" />
</div> </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> <i class="fa fa-angle-double-right"></i>
</div> </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" /> <input class="form-control" type="date" v-model="copyTo" />
</div> </div>
<div class="col-sm-2 col-xs-12"> <div class="col-xs-12 col-sm-5 col-md-1">
<button class="btn btn-action" @click="copyDay"> <button class="btn btn-action float-end" @click="copyDay">
{{ $t("copy_range") }} {{ $t("copy_range") }}
</button> </button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="col-sm-3 col-xs-12"> <div class="col-xs-12 col-sm-3 col-md-3">
<select <select
v-model="copyFromWeek" v-model="copyFromWeek"
id="copyFromWeek" id="copyFromWeek"
@ -147,18 +145,18 @@
</option> </option>
</select> </select>
</div> </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> <i class="fa fa-angle-double-right"></i>
</div> </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"> <select v-model="copyToWeek" id="copyToWeek" class="form-select">
<option v-for="w in nextWeeks" :value="w.value" :key="w.value"> <option v-for="w in nextWeeks" :value="w.value" :key="w.value">
{{ w.text }} {{ w.text }}
</option> </option>
</select> </select>
</div> </div>
<div class="col-sm-2 col-xs-12"> <div class="col-xs-12 col-sm-5 col-md-1">
<button class="btn btn-action" @click="copyWeek"> <button class="btn btn-action float-end" @click="copyWeek">
{{ $t("copy_range") }} {{ $t("copy_range") }}
</button> </button>
</div> </div>