hiding action buttons in plan settings view

This commit is contained in:
Kaibu
2021-11-07 14:42:28 +01:00
parent f0335ebe40
commit 195a13f825

View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<b-tabs content-class="mt-3"> <b-tabs content-class="mt-3" v-model="current_tab">
<b-tab :title="$t('Planner')" active> <b-tab :title="$t('Planner')" active>
<div class="row"> <div class="row">
<div class="col-12 calender-parent"> <div class="col-12 calender-parent">
@@ -35,7 +35,7 @@
</b-tab> </b-tab>
<b-tab :title="$t('Settings')"> <b-tab :title="$t('Settings')">
<div class="row mt-3"> <div class="row mt-3">
<div class="col-3 calender-options"> <div class="col-12 col-md-3 calender-options">
<h5>{{ $t('Planner_Settings') }}</h5> <h5>{{ $t('Planner_Settings') }}</h5>
<b-form> <b-form>
<b-form-group id="UomInput" <b-form-group id="UomInput"
@@ -76,7 +76,7 @@
</b-form-group> </b-form-group>
</b-form> </b-form>
</div> </div>
<div class="col-9 col-lg-6"> <div class="col-12 col-md-9 col-lg-6">
<h5>{{ $t('Meal_Types') }}</h5> <h5>{{ $t('Meal_Types') }}</h5>
<div> <div>
<draggable :list="meal_types" group="meal_types" <draggable :list="meal_types" group="meal_types"
@@ -186,7 +186,9 @@
</b-sidebar> </b-sidebar>
</div> </div>
</template> </template>
<div class="row fixed-bottom p-2 b-1 border-top text-center" style="background:rgba(255,255,255,0.6);"> <transition name="slide-fade">
<div class="row fixed-bottom p-2 b-1 border-top text-center" style="background:rgba(255,255,255,0.6);"
v-if="current_tab === 0">
<div class="col-md-3 col-6"> <div class="col-md-3 col-6">
<button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i <button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
class="fas fa-calendar-plus"></i> {{ $t('Create') }} class="fas fa-calendar-plus"></i> {{ $t('Create') }}
@@ -203,7 +205,10 @@
</a> </a>
</div> </div>
<div class="col-md-3 col-6"> <div class="col-md-3 col-6">
<button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top :title="$t('Coming_Soon')">{{ $t('Auto_Planner') }}</button> <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top
:title="$t('Coming_Soon')">
{{ $t('Auto_Planner') }}
</button>
</div> </div>
<div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none"> <div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none">
<b-button-toolbar key-nav aria-label="Toolbar with button groups"> <b-button-toolbar key-nav aria-label="Toolbar with button groups">
@@ -226,6 +231,7 @@
</b-button-toolbar> </b-button-toolbar>
</div> </div>
</div> </div>
</transition>
</div> </div>
</template> </template>
@@ -283,6 +289,7 @@ export default {
displayWeekNumbers: true displayWeekNumbers: true
}, },
dragged_item: null, dragged_item: null,
current_tab: 0,
meal_types: [], meal_types: [],
current_context_menu_item: null, current_context_menu_item: null,
options: { options: {
@@ -629,6 +636,19 @@ export default {
</script> </script>
<style> <style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateY(10px);
opacity: 0;
}
.calender-parent { .calender-parent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;