logo

Grimgrains

Unnamed repository; edit this file 'description' to name the repository.
commit: 1191da8b38ca3cdea86ea72ea8164159f8a42216
parent 3a48c03eab499a1103160e5ecc4472f8fdbd3ecd
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date:   Thu,  8 Mar 2018 16:25:40 +1300

Basic recipe template

Diffstat:

Mlinks/main.css31+++++++++++++++++++++++++------
Mscripts/nodes/template.js3+--
Mscripts/templates/recipe.js24++++++++++++++++--------
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 }