Templates: Changed template to use boostrap columns to align the elements

This commit is contained in:
Thomas Schwery 2016-05-30 07:55:12 +02:00
parent 32f5db8c62
commit 4d7aab58da
3 changed files with 27 additions and 22 deletions

View file

@ -5,16 +5,17 @@
} }
.ingredients { .ingredients {
display: inline-block;
list-style-type: none; list-style-type: none;
max-width: 240px; margin-right: 0px;
padding-right: 0px;
} }
.instructions { .instructions {
display: inline-block; margin-left: 0px;
position: absolute; }
left: 250px;
bottom: 10px; .ing-quantity {
text-align: right;
} }
.ing-name { .ing-name {
@ -26,10 +27,10 @@
} }
.content-title { .content-title {
text-align: left;
border-bottom: solid 1px; border-bottom: solid 1px;
margin-bottom: -10px;
} }
.header { .header-metadata {
text-align: right; text-align: right;
} }

View file

@ -23,7 +23,7 @@
{{#each pagination.files}} {{#each pagination.files}}
<article class="content"> <article class="content">
<header class="header"> <header class="header">
<h2 class="content-title"> <h2 class="list-content-title">
<a href="{{ path.href }}"><span class="glyphicon glyphicon-apple"></span>{{ data.title }}</a> <a href="{{ path.href }}"><span class="glyphicon glyphicon-apple"></span>{{ data.title }}</a>
</h2> </h2>
</header> </header>

View file

@ -19,28 +19,32 @@
<h1 class="content-title"> <h1 class="content-title">
Recette {{ data.title }} Recette {{ data.title }}
</h1> </h1>
<small class="header-category"> <small class="header-container row">
<div class="header-category col-sm-4">
<a href="/tags/{{ category }}/">{{ category }}</a> <a href="/tags/{{ category }}/">{{ category }}</a>
</small> </div>
<small class="header-metadata"> <div class="col-sm-2">
</div>
<div class="header-metadata col-sm-6">
{{#if data.description }}{{ data.description }}{{/if }} {{#if data.description }}{{ data.description }}{{/if }}
{{ data.portion }} {{ data.portion }}
{{#if data.time }}{{ data.time }}{{/if }} {{#if data.time }}{{ data.time }}{{/if }}
</div>
</small> </small>
</header> </header>
<section class="content"> <section class="content">
{{#each data.steps }} {{#each data.steps }}
<div class="step"> <div class="row step">
<ul class="ingredients"> <ul class="col-xs-5 ingredients">
{{#each ingredients}} {{#each ingredients}}
<li class="ingredient"> <li class="row ingredient">
<span class="ing-quantity">{{ quantity }} {{ unit }}</span> <span class="col-xs-4 ing-quantity">{{ quantity }} {{ unit }}</span>
<span class="ing-name">{{ name }}</span> <span class="col-xs-8 ing-name">{{ name }}</span>
{{#if comment }}<span class="ing-comment">{{ comment }}</span>{{/if }} {{#if comment }}<span class="ing-comment">{{ comment }}</span>{{/if }}
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
<div class="instructions"> <div class="col-xs-7 instructions">
{{ instructions }} {{ instructions }}
</div> </div>
</div> </div>