From 4d7aab58da05380dcfefcdf30102fcd1964d4604 Mon Sep 17 00:00:00 2001
From: Thomas Schwery <thomas@inf3.ch>
Date: Mon, 30 May 2016 07:55:12 +0200
Subject: [PATCH] Templates: Changed template to use boostrap columns to align
 the elements

---
 styles/customHighlight.css | 17 +++++++++--------
 templates/index.hbs        |  2 +-
 templates/recette.hbs      | 30 +++++++++++++++++-------------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/styles/customHighlight.css b/styles/customHighlight.css
index df8e002..b9a07a3 100644
--- a/styles/customHighlight.css
+++ b/styles/customHighlight.css
@@ -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;
 }
diff --git a/templates/index.hbs b/templates/index.hbs
index 63754bb..d89c501 100644
--- a/templates/index.hbs
+++ b/templates/index.hbs
@@ -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>
diff --git a/templates/recette.hbs b/templates/recette.hbs
index 7418244..82d44de 100644
--- a/templates/recette.hbs
+++ b/templates/recette.hbs
@@ -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>