Grimgrains

commit: 1191da8b38ca3cdea86ea72ea8164159f8a42216
parent 3a48c03eab499a1103160e5ecc4472f8fdbd3ecd
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date:   Thu,  8 Mar 2018 16:25:40 +1300

Basic recipe template

Diffstat:
M
links/main.css
31
+++++++++++++++++++++++++------
M
scripts/nodes/template.js
3
+--
M
scripts/templates/recipe.js
24
++++++++++++++++--------

3 files changed, 42 insertions(+), 16 deletions(-)
diff --git a/links/main.css b/links/main.css
@@ -1,7 +1,26 @@
-body { background:white; }
-yu { display: block; border:1px solid #ccc; padding:10px; margin:10px; }
-
-list { display: block; background:red; }
+body { background:white; font-family: 'Helvetica Neue', Helvetica, Arial }
+yu { display: block; }
+hr { clear:both; }
+list { display: block; }
 list ln { display: block }
 
-h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; }-
\ No newline at end of file
+h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin-bottom: 30px }
+
+#view { max-width: 800px; margin:0px auto; padding:90px 30px; }
+
+#view #header { display: none }
+
+#view #core { margin-bottom:30px; }
+
+#view #core #content h1 { text-transform: capitalize; font-size:36px; }
+#view #core #content h2 { text-transform: capitalize; font-size:28px; }
+#view #core #content h2 { text-transform: capitalize; font-size:24px; }
+#view #core #content p { font-size:18px; margin-bottom: 30px; max-width:600px; }
+#view #core #content img { margin-bottom: 30px; border-radius: 2px }
+
+#view #core #content list.ingredients { padding-left:20px; margin-bottom: 30px  }
+#view #core #content list.ingredients ln.ingredient { width:100px; display: block; float:left; margin-left:-10px;text-align:center }
+#view #core #content list.ingredients ln.ingredient:hover t.name { text-decoration: underline; }
+#view #core #content list.ingredients ln.ingredient img { max-width: 100% }
+#view #core #content list.ingredients ln.ingredient t.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:14px; margin-bottom: 5px }
+#view #core #content list.ingredients ln.ingredient t.quantity { display: block; font-size:12px; }+
\ No newline at end of file
diff --git a/scripts/nodes/template.js b/scripts/nodes/template.js
@@ -11,10 +11,9 @@ function TemplateNode(id,rect)
     // Select the right signal
     var assoc = this.signal(q.type.slice(0, -1));
     var payload = assoc.answer(q)
-    this.send({body:payload})
+    this.send({view:payload})
 
     // Install Dom
     document.body.appendChild(this.signal("view").answer())
-    
   }
 } 
\ No newline at end of file
diff --git a/scripts/templates/recipe.js b/scripts/templates/recipe.js
@@ -25,12 +25,11 @@ function RecipeTemplate(id,rect)
     var html = "";
 
     html += `
-    <h1>${q.name}</h1>
-    <h2>${recipe.DATE}</h2>
-    <h3>${recipe.SERV} — ${recipe.TIME} minutes</h3>
+    <h1>${q.name.capitalize()}</h1>
+    <h2>${recipe.SERV} — ${recipe.TIME} minutes</h2>
     <p>${new Runic(recipe.DESC)}</p>
-    <h4>Ingredients</h4>
-    <list>${print_sub_list(recipe.INGR)}</list>`;
+    <h2>Ingredients</h2>
+    ${make_ingredients(recipe.INGR)}`;
 
     return html
   }
@@ -62,16 +61,25 @@ function RecipeTemplate(id,rect)
     return a.reverse();
   }
 
-  function print_sub_list(categories)
+  function make_ingredients(categories)
   {
     var html = "";
     for(id in categories){
       var elements = categories[id];
-      html += `<ln class='category'>${id}</ln>`
+      html += categories.length > 1 ? `<h3>${id.capitalize()}</h3>` : ''
+      html += `<list class='ingredients'>`
       for(id in elements){
         var element = elements[id];
-        html += `<ln><a href='#${id.to_url()}'>${id.capitalize()}</a></ln>`
+        html += `
+        <ln class='ingredient'>
+          <a href='#${id.to_url()}'>
+            <img src='media/ingredients/${id.to_path()}.png'/>
+          </a>
+          <t class='name'>${id.capitalize()}</t>
+          <t class='quantity'>${element}</t>
+        </ln>`
       }
+      html += `<hr /></list>`
     }
     return html
   }