alignment

This commit is contained in:
vabene1111 2021-01-13 20:41:42 +01:00
parent a431031c04
commit ec778edb93
3 changed files with 33 additions and 38 deletions

View File

@ -18,51 +18,47 @@
<hr/>
<div class="row">
<div class="col col-md-3">
<table>
<tr>
<td rowspan="2"><i class="fas fa-user-clock fa-2x text-primary"></i></td>
<td><span class="text-primary"><b>{{ _('Preparation') }}</b></span></td>
</tr>
<tr>
<td> {{ recipe.working_time }} {{ _('min') }}</td>
</tr>
</table>
<div class="row d-flex" style="padding-left: 16px;height: 100%">
<div class="my-auto" style="padding-right: 4px">
<i class="fas fa-user-clock fa-2x text-primary"></i>
</div>
<div class="my-auto" style="padding-right: 4px">
<span class="text-primary"><b>{{ _('Preparation') }}</b></span><br/>
{{ recipe.working_time }} {{ _('min') }}
</div>
</div>
</div>
<div class="col col-md-3">
<table>
<tr>
<td rowspan="2"><i class="far fa-clock fa-2x text-primary"></i></td>
<td><span class="text-primary"><b>{{ _('Waiting') }}</b></span></td>
</tr>
<tr>
<td>{{ recipe.waiting_time }} {{ _('min') }}</td>
</tr>
</table>
<div class="col col-md-3">
<div class="row d-flex" style="height: 100%">
<div class="my-auto" style="padding-right: 4px">
<i class="far fa-clock fa-2x text-primary"></i>
</div>
<div class="my-auto" style="padding-right: 4px">
<span class="text-primary"><b>{{ _('Waiting') }}</b></span><br/>
{{ recipe.waiting_time }} {{ _('min') }}
</div>
</div>
</div>
<div class="col col-md-4 col-10">
<table>
<tr>
<td>
<i class="fas fa-pizza-slice fa-2x text-primary"></i>
</td>
<td>
<input dir="rtl"
<div class="row d-flex" style="padding-left: 16px;height: 100%">
<div class="my-auto" style="padding-right: 4px">
<i class="fas fa-pizza-slice fa-2x text-primary"></i>
</div>
<div class="my-auto" style="padding-right: 4px">
<input dir="rtl"
style="border-width:0px;border:none; padding:0px; padding-left: 0.5vw; padding-right: 8px; max-width: 80px"
value="1" maxlength="3"
type="number" class="form-control form-control-lg" v-model.number="servings"/>
</td>
<td style="padding-left: 0.5vw">
<b>{{ _('Servings') }}</b>
</td>
</tr>
</table>
</div>
<div class="my-auto">
<b>{{ _('Servings') }}</b>
</div>
</div>
</div>
<div class="col col-md-2 col-2" style="text-align: right; padding-right: 1vw">
<div class="col col-md-2 col-2 my-auto" style="text-align: right; padding-right: 1vw">
<recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu>
</div>
</div>
@ -124,7 +120,6 @@
<ImageViewer :recipe="recipe"></ImageViewer>
</div>
<!--TODO timers -->
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
<Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
@update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>

View File

@ -60,7 +60,7 @@
</b-link>
</div>
<div class="col-1" style="text-align: right">
<div class="col-2" style="text-align: right">
<b-button @click="details_visible = !details_visible" style="border: none; background: none"
class="shadow-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
<i class="far fa-check-circle"></i>

View File

@ -1 +1 @@
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.28f50ed664b7081f0b31.hot-update.js","publicPath":"http://localhost:8080/recipe_view.28f50ed664b7081f0b31.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.28f50ed664b7081f0b31.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n 4:41 error Unexpected mutation of \"ingredient\" prop vue/no-mutating-props\n\n✖ 1 problem (1 error, 0 warnings)\n"}
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.053e29b2cace695f54ae.hot-update.js","publicPath":"http://localhost:8080/recipe_view.053e29b2cace695f54ae.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.053e29b2cace695f54ae.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n 4:41 error Unexpected mutation of \"ingredient\" prop vue/no-mutating-props\n\n✖ 1 problem (1 error, 0 warnings)\n"}