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

View file

@ -23,7 +23,7 @@
{{#each pagination.files}}
<article class="content">
<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>
</h2>
</header>

View file

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