commit: 86d3341f4b5298fb4dedf289d097226913e4ffc3
parent 1191da8b38ca3cdea86ea72ea8164159f8a42216
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Thu, 8 Mar 2018 17:39:20 +1300
Improved Dom nodes
Diffstat:
6 files changed, 62 insertions(+), 21 deletions(-)
diff --git a/links/main.css b/links/main.css
@@ -3,24 +3,34 @@ yu { display: block; }
hr { clear:both; }
list { display: block; }
list ln { display: block }
+img { max-width: 100% }
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 #header { position: absolute; top:0px; left:0px; padding:60px; z-index: 900; background:white}
+#view #header #logo img { max-width: 200px; display: block; margin:0px auto; }
+#view #header #search { display: none }
#view #core { margin-bottom:30px; }
+#view #core #content { position: relative; z-index: 100 }
#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 { padding-left:20px; margin-bottom: 60px }
#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
+#view #core #content list.ingredients ln.ingredient t.quantity { display: block; font-size:12px; }
+
+#view #core #related { width:calc(100% + 60px); margin-left:-10px; }
+#view #core #related ln { max-width: calc((100% / 3) - 20px); float:left; padding:10px; }
+#view #core #related ln img { border-radius: 2px }
+#view #core #related ln t.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:16px; margin-bottom: 5px; text-transform: capitalize; line-height: 30px }
+#view #core #related ln t.details { display: block; font-family: 'alte_haas_grotesk_regular'; font-size:14px; text-transform: capitalize; line-height: 30px; line-height: 18px }+
\ No newline at end of file
diff --git a/scripts/database/recipes.js b/scripts/database/recipes.js
@@ -328,7 +328,7 @@ KURO PRETZELS
- Using a flat spatula, gently place one pretzel into the pot of boiling water for 30 seconds. Only put one piece in at a time. After, place them onto the baking sheet you prepared earlier.
- Brush or spray the pretzels with some soy milk, and sprinkle with some fleur de sel.
- Bake for 12 minutes and place on a cooling rack!
- INGR
+ INGR
Pretzels
Water : 3/4 cup
Maple syrup : 1/2 tbsp
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -23,15 +23,15 @@ function graph()
Ø("view").create({x:2,y:2},DomNode),
Ø("header").create({x:2,y:8},DomNode),
- Ø("logo").create({x:2,y:14},DomNode),
- Ø("search").create({x:5,y:14},DomNode),
- Ø("menu").create({x:8,y:14},DomNode),
+ Ø("logo").create({x:2,y:14},DomNode,"wr","<img src='media/interface/logo.png'/>"),
+ Ø("search").create({x:6,y:14},DomNode),
+ Ø("menu").create({x:10,y:14},DomNode),
- Ø("core").create({x:11,y:8},DomNode),
- Ø("content").create({x:11,y:14},DomNode),
- Ø("related").create({x:14,y:14},DomNode),
+ Ø("core").create({x:14,y:8},DomNode),
+ Ø("content").create({x:14,y:14},DomNode),
+ Ø("related").create({x:18,y:14},DomNode,"list"),
- Ø("footer").create({x:8,y:8},DomNode),
+ Ø("footer").create({x:6,y:8},DomNode),
])
// Model
diff --git a/scripts/lib/riven.js b/scripts/lib/riven.js
@@ -42,9 +42,9 @@ function Node(id,rect={x:0,y:0,w:2,h:2})
this.ports.request = new Port(this,"request",PORT_TYPES.request)
}
- this.create = function(pos = {x:0,y:0},type = Node,param)
+ this.create = function(pos = {x:0,y:0},type = Node,...params)
{
- var node = new type(this.id,rect,param)
+ var node = new type(this.id,rect,...params)
this.rect.x = pos.x
this.rect.y = pos.y
node.setup();
diff --git a/scripts/nodes/dom.js b/scripts/nodes/dom.js
@@ -1,11 +1,21 @@
-function DomNode(id,rect)
+function DomNode(id,rect,...params)
{
Node.call(this,id,rect);
+ this.type = params[0] ? params[0] : "yu";
this.glyph = NODE_GLYPHS.dom
+ this.label = `${this.id}:${this.type}`
- this.el = document.createElement("yu")
+ console.log(params)
+
+ this.el = document.createElement(this.type)
this.el.id = this.id
+
+ console.log(params)
+ if(params[1]){
+
+ this.el.innerHTML = params[1]
+ }
this.is_installed = false;
this.receive = function(content)
diff --git a/scripts/templates/recipe.js b/scripts/templates/recipe.js
@@ -38,22 +38,43 @@ function RecipeTemplate(id,rect)
{
var html = "";
var recipe = q.result
- var recipes = find_related(recipe,q.tables.recipes)
+ var recipes = find_related(q.name,recipe,q.tables.recipes)
+ var count = 0;
for(id in recipes){
var name = recipes[id][0];
- html += `<ln><a href='#${name.to_url()}'>${name.capitalize()}</a>(${recipes[id][1]})</ln>`
+ html += `
+ <ln class='recipe'>
+ <a href='#${name.to_url()}'><img src='media/recipes/${name.to_path()}.jpg'/></a>
+ <t class='name'>${name.capitalize()}</t>
+ <t class='details'>${q.tables.recipes[name].SERV}<br />${q.tables.recipes[name].TIME} minutes<br />${q.tables.recipes[name].INST.length} steps<br />${count_ingredients(q.tables.recipes[name])} ingredients</t>
+ </ln>`
+ if(count > 1){ break; }
+ count += 1
}
- return html
+ return `<list class='related'>${html}<hr/></list>`
}
- function find_related(target,recipes)
+ function count_ingredients(recipe)
+ {
+ var ingredients = {}
+ for(cat in recipe.INGR){
+ for(id in recipe.INGR[cat]){
+ ingredients[id] = 1
+ }
+ }
+ return Object.keys(ingredients).length
+ }
+
+ function find_related(name,target,recipes)
{
var a = [];
for(id in recipes){
var recipe = recipes[id];
var index = similarity(target.TAGS,recipe.TAGS)
- a.push([id,index])
+ if(id != name){
+ a.push([id,index])
+ }
}
a.sort(function(a, b) {
return a[1] - b[1];
