meal plan simple mobile layout
This commit is contained in:
vabene1111
parent
1a5b7244dd
commit
a4f0f38300
@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<b-tabs content-class="mt-3" v-model="current_tab">
|
<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 calender-row">
|
<div class="row calender-row d-none d-lg-block">
|
||||||
<div class="col-12 calender-parent">
|
<div class="col-12 calender-parent">
|
||||||
<calendar-view
|
<calendar-view
|
||||||
:show-date="showDate"
|
:show-date="showDate"
|
||||||
@ -48,6 +48,70 @@
|
|||||||
</calendar-view>
|
</calendar-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row d-block d-lg-none">
|
||||||
|
<div>
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="col-12 d-flex justify-content-center mt-2">
|
||||||
|
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||||
|
<b-button-group class="mx-1">
|
||||||
|
<b-button v-html="'<<'" class="p-2 pr-3 pl-3"
|
||||||
|
@click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
|
||||||
|
<b-button v-html="'<'" @click="setStartingDay(-1)" class="p-2 pr-3 pl-3"></b-button>
|
||||||
|
</b-button-group>
|
||||||
|
<b-button-group class="mx-1">
|
||||||
|
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
|
||||||
|
class="fas fa-home"></i></b-button>
|
||||||
|
<b-form-datepicker button-only button-variant="secondary"></b-form-datepicker> <!-- TODO datepicker not working -->
|
||||||
|
</b-button-group>
|
||||||
|
<b-button-group class="mx-1">
|
||||||
|
<b-button v-html="'>'" @click="setStartingDay(1)" class="p-2 pr-3 pl-3"></b-button>
|
||||||
|
<b-button v-html="'>>'" class="p-2 pr-3 pl-3"
|
||||||
|
@click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
|
||||||
|
</b-button-group>
|
||||||
|
</b-button-toolbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 mt-2">
|
||||||
|
<div v-for="day in mobileSimpleGrid" v-bind:key="day.day">
|
||||||
|
<b-list-group>
|
||||||
|
<b-list-group-item >
|
||||||
|
<div class="d-flex flex-row align-items-center">
|
||||||
|
<div>
|
||||||
|
<h4>{{ day.date_label }}</h4>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 text-right">
|
||||||
|
<b-button class=""><i
|
||||||
|
class="fa fa-plus"></i></b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item v-for="plan in day.plan_entries" v-bind:key="plan.id" class="hover-div">
|
||||||
|
<div class="d-flex flex-row align-items-center">
|
||||||
|
<div>
|
||||||
|
<b-img style="height: 50px; width: 50px; object-fit: cover"
|
||||||
|
:src="plan.recipe.image" rounded="circle"></b-img>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ml-2"
|
||||||
|
style="text-overflow: ellipsis; overflow-wrap: anywhere;">
|
||||||
|
<span class="two-row-text"><a
|
||||||
|
:href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{
|
||||||
|
plan.recipe.name
|
||||||
|
}}</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="hover-button">
|
||||||
|
<b-button><i class="fas fa-pencil-alt"></i></b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-list-group-item>
|
||||||
|
|
||||||
|
</b-list-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</b-tab>
|
</b-tab>
|
||||||
<b-tab :title="$t('Settings')">
|
<b-tab :title="$t('Settings')">
|
||||||
<div class="row mt-3">
|
<div class="row mt-3">
|
||||||
@ -207,52 +271,21 @@
|
|||||||
@reload-meal-types="refreshMealTypes"
|
@reload-meal-types="refreshMealTypes"
|
||||||
></meal-plan-edit-modal>
|
></meal-plan-edit-modal>
|
||||||
|
|
||||||
<transition name="slide-fade">
|
<div class="row d-none d-lg-block">
|
||||||
<div class="row fixed-bottom p-2 b-1 border-top text-center d-none d-lg-block" style="background: rgba(255, 255, 255, 0.6)"
|
<div class="col-12 float-right">
|
||||||
v-if="current_tab === 0">
|
<button class="btn btn-success shadow-none" @click="createEntryClick(new Date())"><i
|
||||||
<div class="col-md-3 col-6 mb-1 mb-md-0">
|
|
||||||
<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") }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<a class="btn btn-primary shadow-none" :href="iCalUrl"><i class="fas fa-download"></i>
|
||||||
<div class="col-md-3 col-6 mb-1 mb-md-0">
|
|
||||||
<a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"
|
|
||||||
><i class="fas fa-download"></i>
|
|
||||||
{{ $t("Export_To_ICal") }}
|
{{ $t("Export_To_ICal") }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<!-- <div class="col-md-3 col-6 mb-1 mb-md-0">-->
|
|
||||||
<!-- <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 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-group class="mx-1">
|
|
||||||
<b-button v-html="'<<'" class="p-2 pr-3 pl-3"
|
|
||||||
@click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
|
|
||||||
<b-button v-html="'<'" @click="setStartingDay(-1)" class="p-2 pr-3 pl-3"></b-button>
|
|
||||||
</b-button-group>
|
|
||||||
<b-button-group class="mx-1">
|
|
||||||
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
|
|
||||||
class="fas fa-home"></i></b-button>
|
|
||||||
<b-form-datepicker button-only button-variant="secondary"></b-form-datepicker>
|
|
||||||
</b-button-group>
|
|
||||||
<b-button-group class="mx-1">
|
|
||||||
<b-button v-html="'>'" @click="setStartingDay(1)" class="p-2 pr-3 pl-3"></b-button>
|
|
||||||
<b-button v-html="'>>'" class="p-2 pr-3 pl-3"
|
|
||||||
@click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
|
|
||||||
</b-button-group>
|
|
||||||
</b-button-toolbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</div>
|
||||||
|
|
||||||
<bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
|
<bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
|
||||||
<template #custom_create_functions>
|
<template #custom_create_functions>
|
||||||
<a class="dropdown-item" @click="createEntryClick(new Date())"><i
|
<a class="dropdown-item" @click="createEntryClick(new Date())"><i
|
||||||
class="fas fa-calendar-plus"></i> {{$t("Create")}}</a>
|
class="fas fa-calendar-plus"></i> {{ $t("Create") }}</a>
|
||||||
</template>
|
</template>
|
||||||
</bottom-navigation-bar>
|
</bottom-navigation-bar>
|
||||||
</div>
|
</div>
|
||||||
@ -379,6 +412,22 @@ export default {
|
|||||||
return ""
|
return ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mobileSimpleGrid() {
|
||||||
|
let grid = []
|
||||||
|
|
||||||
|
if (useMealPlanStore().plan_list.length > 0 && this.current_period !== null) {
|
||||||
|
for (const x of Array(7).keys()) {
|
||||||
|
let moment_date = moment(this.current_period.periodStart).add(x, "d")
|
||||||
|
grid.push({
|
||||||
|
date: moment_date,
|
||||||
|
create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates
|
||||||
|
date_label: moment_date.format('DD.MM'),
|
||||||
|
plan_entries: useMealPlanStore().plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return grid
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(function () {
|
this.$nextTick(function () {
|
||||||
@ -601,6 +650,10 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
#id_base_container {
|
||||||
|
margin-top: 12px
|
||||||
|
}
|
||||||
|
|
||||||
.slide-fade-enter-active {
|
.slide-fade-enter-active {
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user