mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-10 08:38:34 -05:00
Code Issues Packages Projects Releases Wiki Activity

multiple ux fixes

Browse Source
This commit is contained in:
Kaibu
2022-05-11 17:10:12 +02:00
parent ad88eff9e3
commit 7276cea3d5
4 changed files with 97 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/templates/base.html
View File

@@ -77,7 +77,7 @@
{% if not request.user.is_authenticated or request.user.userpreference.theme == request.user.userpreference.TANDOOR %} {% if not request.user.is_authenticated or request.user.userpreference.theme == request.user.userpreference.TANDOOR %}
<a class="navbar-brand p-0 me-2 justify-content-center" href="{% base_path request 'base' %}" <a class="navbar-brand p-0 me-2 justify-content-center" href="{% base_path request 'base' %}"
aria-label="Tandoor"> aria-label="Tandoor">
<img class="brand-icon" src="{% static 'assets/brand_logo.svg' %}" alt="Logo"> <img class="brand-icon" src="{% static 'assets/brand_logo.png' %}" alt="Logo">
</a> </a>
{% endif %} {% endif %}
{% endif %} {% endif %}

2
vue/src/apps/ImportResponseView/ImportResponseView.vue
View File

@@ -22,7 +22,7 @@
}}! }}!
</b-badge> </b-badge>
<b-badge variant="primary" v-else class="float-right"> <b-badge variant="primary" v-else class="float-right">
{{ $t('Import_running') }} {{ $t('import_running') }}
<b-spinner small class="d-inline-block"></b-spinner> <b-spinner small class="d-inline-block"></b-spinner>
</b-badge> </b-badge>
</h4> </h4>

100
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@@ -54,14 +54,20 @@
<div class="col-12 col-md-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" :label="$t('Period')" :description="$t('Plan_Period_To_Show')" label-for="UomInput"> <b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
<b-form-select id="UomInput" v-model="settings.displayPeriodUom" :options="options.displayPeriodUom"></b-form-select> label-for="UomInput">
<b-form-select id="UomInput" v-model="settings.displayPeriodUom"
:options="options.displayPeriodUom"></b-form-select>
</b-form-group> </b-form-group>
<b-form-group id="PeriodInput" :label="$t('Periods')" :description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput"> <b-form-group id="PeriodInput" :label="$t('Periods')"
<b-form-select id="PeriodInput" v-model="settings.displayPeriodCount" :options="options.displayPeriodCount"></b-form-select> :description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
<b-form-select id="PeriodInput" v-model="settings.displayPeriodCount"
:options="options.displayPeriodCount"></b-form-select>
</b-form-group> </b-form-group>
<b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')" label-for="DaysInput"> <b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
<b-form-select id="DaysInput" v-model="settings.startingDayOfWeek" :options="dayNames"></b-form-select> label-for="DaysInput">
<b-form-select id="DaysInput" v-model="settings.startingDayOfWeek"
:options="dayNames"></b-form-select>
</b-form-group> </b-form-group>
<b-form-group id="WeekNumInput" :label="$t('Week_Numbers')"> <b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
<b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num"> <b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
@@ -73,18 +79,24 @@
<div class="col-12 col-md-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" :empty-insert-threshold="10" @sort="sortMealTypes()" ghost-class="ghost"> <draggable :list="meal_types" group="meal_types" :empty-insert-threshold="10"
<b-card no-body class="mt-1 list-group-item p-2" style="cursor: move" v-for="(meal_type, index) in meal_types" v-hover :key="meal_type.id"> @sort="sortMealTypes()" ghost-class="ghost">
<b-card no-body class="mt-1 list-group-item p-2" style="cursor: move"
v-for="(meal_type, index) in meal_types" v-hover :key="meal_type.id">
<b-card-header class="p-2 border-0"> <b-card-header class="p-2 border-0">
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-2">
<button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button> <button type="button" class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v"></i></button>
</div> </div>
<div class="col-10"> <div class="col-10">
<h5 class="mt-1 mb-1"> <h5 class="mt-1 mb-1">
{{ meal_type.icon }} {{ meal_type.name {{ meal_type.icon }} {{
meal_type.name
}}<span class="float-right text-primary" style="cursor: pointer" }}<span class="float-right text-primary" style="cursor: pointer"
><i class="fa" v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }" @click="editOrSaveMealType(index)" aria-hidden="true"></i ><i class="fa"
v-bind:class="{ 'fa-pen': !meal_type.editing, 'fa-save': meal_type.editing }"
@click="editOrSaveMealType(index)" aria-hidden="true"></i
></span> ></span>
</h5> </h5>
</div> </div>
@@ -93,19 +105,27 @@
<b-card-body class="p-4" v-if="meal_type.editing"> <b-card-body class="p-4" v-if="meal_type.editing">
<div class="form-group"> <div class="form-group">
<label>{{ $t("Name") }}</label> <label>{{ $t("Name") }}</label>
<input class="form-control" :placeholder="$t('Name')" v-model="meal_type.name" /> <input class="form-control" :placeholder="$t('Name')"
v-model="meal_type.name"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<emoji-input :field="'icon'" :label="$t('Icon')" :value="meal_type.icon"></emoji-input> <emoji-input :field="'icon'" :label="$t('Icon')"
:value="meal_type.icon"></emoji-input>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>{{ $t("Color") }}</label> <label>{{ $t("Color") }}</label>
<input class="form-control" type="color" name="Name" :value="meal_type.color" @change="meal_type.color = $event.target.value" /> <input class="form-control" type="color" name="Name"
:value="meal_type.color"
@change="meal_type.color = $event.target.value"/>
</div> </div>
<b-form-checkbox id="checkbox-1" v-model="meal_type.default" name="default_checkbox" class="mb-2"> <b-form-checkbox id="checkbox-1" v-model="meal_type.default"
name="default_checkbox" class="mb-2">
{{ $t("Default") }} {{ $t("Default") }}
</b-form-checkbox> </b-form-checkbox>
<button class="btn btn-danger" @click="deleteMealType(index)">{{ $t("Delete") }}</button> <button class="btn btn-danger" @click="deleteMealType(index)">{{
$t("Delete")
}}
</button>
<button class="btn btn-primary float-right" @click="editOrSaveMealType(index)"> <button class="btn btn-primary float-right" @click="editOrSaveMealType(index)">
{{ $t("Save") }} {{ $t("Save") }}
</button> </button>
@@ -129,7 +149,9 @@
openEntryEdit(contextData.originalItem.entry) openEntryEdit(contextData.originalItem.entry)
" "
> >
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pen"></i> {{ $t("Edit") }}</a> <a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pen"></i> {{
$t("Edit")
}}</a>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
v-if="contextData && contextData.originalItem && contextData.originalItem.entry.recipe != null" v-if="contextData && contextData.originalItem && contextData.originalItem.entry.recipe != null"
@@ -138,7 +160,8 @@
openRecipe(contextData.originalItem.entry.recipe) openRecipe(contextData.originalItem.entry.recipe)
" "
> >
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pizza-slice"></i> {{ $t("Recipe") }}</a> <a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-pizza-slice"></i>
{{ $t("Recipe") }}</a>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
@click=" @click="
@@ -146,7 +169,8 @@
moveEntryLeft(contextData) moveEntryLeft(contextData)
" "
> >
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-left"></i> {{ $t("Move") }}</a> <a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-left"></i>
{{ $t("Move") }}</a>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
@click=" @click="
@@ -154,7 +178,8 @@
moveEntryRight(contextData) moveEntryRight(contextData)
" "
> >
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-right"></i> {{ $t("Move") }}</a> <a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-arrow-right"></i>
{{ $t("Move") }}</a>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
@click=" @click="
@@ -170,7 +195,8 @@
addToShopping(contextData) addToShopping(contextData)
" "
> >
<a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-shopping-cart"></i> {{ $t("Add_to_Shopping") }}</a> <a class="dropdown-item p-2" href="javascript:void(0)"><i class="fas fa-shopping-cart"></i>
{{ $t("Add_to_Shopping") }}</a>
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
@click=" @click="
@@ -178,7 +204,8 @@
deleteEntry(contextData) deleteEntry(contextData)
" "
> >
<a class="dropdown-item p-2 text-danger" href="javascript:void(0)"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a> <a class="dropdown-item p-2 text-danger" href="javascript:void(0)"><i class="fas fa-trash"></i>
{{ $t("Delete") }}</a>
</ContextMenuItem> </ContextMenuItem>
</template> </template>
</ContextMenu> </ContextMenu>
@@ -221,12 +248,17 @@
</div> </div>
</template> </template>
<transition name="slide-fade"> <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="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 class="fas fa-calendar-plus"></i> {{ $t("Create") }}</button> <button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
class="fas fa-calendar-plus"></i> {{ $t("Create") }}
</button>
</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" v-b-toggle.sidebar-shopping><i class="fas fa-shopping-cart"></i> {{ $t("Shopping_list") }}</button> <button class="btn btn-block btn-primary shadow-none" v-b-toggle.sidebar-shopping><i
class="fas fa-shopping-cart"></i> {{ $t("Shopping_list") }}
</button>
</div> </div>
<div class="col-md-3 col-6"> <div class="col-md-3 col-6">
<a class="btn btn-block btn-primary shadow-none" :href="iCalUrl" <a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"
@@ -235,23 +267,27 @@
</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')"> <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top
:title="$t('Coming_Soon')">
{{ $t("Auto_Planner") }} {{ $t("Auto_Planner") }}
</button> </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">
<b-button-group class="mx-1"> <b-button-group class="mx-1">
<b-button v-html="'<<'" @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button> <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
<b-button v-html="'<'" @click="setStartingDay(-1)"></b-button> @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>
<b-button-group class="mx-1"> <b-button-group class="mx-1">
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i class="fas fa-home"></i></b-button> <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-form-datepicker button-only button-variant="secondary"></b-form-datepicker>
</b-button-group> </b-button-group>
<b-button-group class="mx-1"> <b-button-group class="mx-1">
<b-button v-html="'>'" @click="setStartingDay(1)"></b-button> <b-button v-html="'>'" @click="setStartingDay(1)" class="p-2 pr-3 pl-3"></b-button>
<b-button v-html="'>>'" @click="setShowDate($refs.header.headerProps.nextPeriod)"></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-group>
</b-button-toolbar> </b-button-toolbar>
</div> </div>
@@ -694,7 +730,7 @@ export default {
} }
.calender-row { .calender-row {
height: calc(100% - 240px); height: calc(100vh - 240px);
} }
.calender-parent { .calender-parent {

6
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@@ -1756,7 +1756,7 @@ export default {
flex-grow: 1; flex-grow: 1;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
height: calc(100% - 170px); height: calc(100vh - 170px);
} }
#id_base_container { #id_base_container {
@@ -1764,6 +1764,10 @@ export default {
padding-left: 5px; padding-left: 5px;
} }
input {
font-size: 16px !important;
}
@media (max-width: 991.9px) { @media (max-width: 991.9px) {
#shoppinglist { #shoppinglist {
max-width: none; max-width: none;