Grimgrains

commit: 98ad74060bf6915cdf8b1f0d258e149eb2afa6c4
parent 4c72837106432aafaa68d0bfec4b96d96a9f21e0
Author: microlith57 <microlith57@gmail.com>
Date:   Thu, 12 Dec 2019 14:58:23 +1300

Add page jump utility

Signed-off-by: microlith57 <microlith57@gmail.com>

Diffstat:
M
index.html
9
+++++----
M
links/main.css
7
++++++-
A
scripts/lib/util.js
6
++++++
M
scripts/templates/home.js
3
++-

4 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
@@ -16,9 +16,10 @@
   <meta property="og:type" content="article" />
   <meta property="og:url" content="http://grimgrains.com/" />
   <meta property="og:image" content="https://grimgrains.com/media/services/icon.jpg" />
-  <meta property="og:description" content="An illustrated food blog." /> 
+  <meta property="og:description" content="An illustrated food blog." />
   <meta property="og:site_name" content="Grimgrains" />
-  
+
+  <script  type="text/javascript" src="scripts/lib/util.js"></script>
   <script  type="text/javascript" src="scripts/lib/riven.js"></script>
   <script  type="text/javascript" src="scripts/graph.js"></script>
   <script  type="text/javascript" src="scripts/lib/runic.js"></script>
@@ -30,7 +31,7 @@
   <script  type="text/javascript" src="scripts/nodes/template.js"></script>
   <script  type="text/javascript" src="scripts/nodes/dom.js"></script>
   <script  type="text/javascript" src="scripts/nodes/document.js"></script>
-  
+
   <script  type="text/javascript" src="scripts/database/ingredients.ndtl"></script>
   <script  type="text/javascript" src="scripts/database/recipes.ndtl"></script>
   <script  type="text/javascript" src="scripts/database/pages.ndtl"></script>
@@ -52,7 +53,7 @@
     let RIVEN = new Riven();
     graph()
   </script>
-  
+
   <noscript>
     <h2 style="color:white">
       This website requires Javascript. To view the content, please enable it in your browser settings.
diff --git a/links/main.css b/links/main.css
@@ -17,7 +17,7 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
 #view #header #logo a:hover { opacity: 0.7 }
 #view #header #logo a:focus { opacity: 0.7 }
 #view #header #logo a img { max-width: 240px; display: block; margin:0px auto; margin-bottom:30px; }
-#view #header ul { display: block;line-height: 40px; border-bottom: 2px solid black; margin-bottom:30px; overflow: hidden;height: 40px; }
+#view #header ul { display: block;line-height: 40px; border-bottom: 2px solid black; margin-bottom:30px; overflow: hidden;min-height: 40px; }
 #view #header ul li { display: inline-block;border-top-left-radius: 3px;border-top-right-radius: 3px; margin-right:10px; margin-bottom: -2px; line-height: 40px}
 #view #header ul li a { display: inline-block; font-family: 'alte_haas_grotesk_bold'; font-size:14px; line-height: 40px; border-bottom:2px solid transparent }
 #view #header ul li.right { float: right;margin-right:0px;margin-left:10px }
@@ -36,6 +36,11 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
 #view #core #content h1.name { float:left; font-size:32px; line-height: 40px }
 #view #core #content h2.serving { float:right; font-size:32px; line-height: 40px }
 #view #core #content h3 { text-transform: capitalize; font-size:24px; border-bottom:2px solid black; line-height: 45px }
+#view #core #content .jump { padding: 5px 0; text-transform: lowercase; font-size: initial; position: absolute; right: 0; }
+#view #core #content .jump:before { content: '(jump to '; }
+#view #core #content .jump::after { content: ')'; }
+#view #core #content .jump:hover { text-decoration: 2px solid black underline;}
+#view #core #content .jump:focus { text-decoration: 2px solid black underline;}
 #view #core #content hr.stroke { border-bottom:2px solid black; max-width: 600px; margin-bottom:30px; }
 #view #core #content p { font-size:18px; margin-bottom: 30px; max-width:600px; line-height: 26px }
 #view #core #content p.bref { font-size:28px; margin-bottom: 45px; line-height: 34px }
diff --git a/scripts/lib/util.js b/scripts/lib/util.js
@@ -0,0 +1,6 @@
+function Š (target) {
+  const elem = document.getElementById('jump-' + target)
+  if (!elem) { console.error('Undefined jump target', target); return }
+  elem.scrollIntoView()
+  elem.focus()
+}
diff --git a/scripts/templates/home.js b/scripts/templates/home.js
@@ -13,8 +13,9 @@ function HomeTemplate (id, rect) {
     const sorted_ingredients = sort_ingredients(ingredients)
 
     const html = `
+    <h1>Ingredients <a class='jump' id='jump-ingredients' href='javascript:Š("recipes")'>recipes</a></h1>
     ${make_ingredients(sorted_ingredients, q.tables.ingredients)}
-    <h1>Recipes</h1>
+    <h1 id='recipes_header'>Recipes <a class='jump' id='jump-recipes' href='javascript:Š("ingredients")'>ingredients</a></h1>
     ${make_recipes(q.tables.recipes)}
     `
     return {