cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve recipe toolbar visualization on mobile and position of elements

Browse Source
This commit is contained in:
Oleh Astappiev 2022-05-29 17:42:40 +02:00
parent d5dd64acd2
commit 43666e1f63
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -30,16 +30,14 @@
</div> </div>
<hr/> <hr/>
<div class="row"> <div class="row align-items-center">
<div class="col col-md-3"> <div class="col col-md-3">
<div class="row d-flex" style="padding-left: 16px"> <div class="d-flex">
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto mr-1">
<i class="fas fa-user-clock fa-2x text-primary"></i> <i class="fas fa-fw fa-user-clock fa-2x text-primary"></i>
</div> </div>
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto mr-1">
<span class="text-primary" <span class="text-primary"><b>{{ $t("Preparation") }}</b></span><br/>
><b>{{ $t("Preparation") }}</b></span
><br/>
{{ recipe.working_time }} {{ $t("min") }} {{ recipe.working_time }} {{ $t("min") }}
</div> </div>
</div> </div>
@ -47,27 +45,25 @@
<div class="col col-md-3"> <div class="col col-md-3">
<div class="row d-flex"> <div class="row d-flex">
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto mr-1">
<i class="far fa-clock fa-2x text-primary"></i> <i class="far fa-fw fa-clock fa-2x text-primary"></i>
</div> </div>
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto mr-1">
<span class="text-primary" <span class="text-primary"><b>{{ $t("Waiting") }}</b></span><br/>
><b>{{ $t("Waiting") }}</b></span
><br/>
{{ recipe.waiting_time }} {{ $t("min") }} {{ recipe.waiting_time }} {{ $t("min") }}
</div> </div>
</div> </div>
</div> </div>
<div class="col col-md-4 col-10 mt-2 mt-md-0 mt-lg-0 mt-xl-0"> <div class="col col-md-4 col-10 mt-2 mt-md-0">
<div class="row d-flex" style="padding-left: 16px"> <div class="d-flex">
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto mr-1">
<i class="fas fa-pizza-slice fa-2x text-primary"></i> <i class="fas fa-fw fa-pizza-slice fa-2x text-primary"></i>
</div> </div>
<div class="my-auto" style="padding-right: 4px"> <div class="my-auto mr-1">
<CustomInputSpinButton v-model.number="servings"/> <CustomInputSpinButton v-model.number="servings"/>
</div> </div>
<div class="my-auto"> <div class="my-auto mr-1">
<span class="text-primary"> <span class="text-primary">
<b> <b>
<template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template> <template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template>
@ -78,7 +74,7 @@
</div> </div>
</div> </div>
<div class="col col-md-2 col-2 my-auto" style="text-align: right; padding-right: 1vw"> <div class="col col-md-2 col-2 mt-2 mt-md-0 text-right">
<recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu> <recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu>
</div> </div>
</div> </div>