overall fixes for navigation, page grid, CSS, javascript, etc.

errorcorrectionzoo · Jul 21, 2023 · 1baae77 · 1baae77
1 parent 03e3c83
commit 1baae77
Show file tree

Hide file tree

Showing 16 changed files with 299 additions and 94 deletions.
diff --git a/downloaded_citationinfo_cache.json b/downloaded_citationinfo_cache.json
diff --git a/jscomponents/codegraph/codegraph_style.scss b/jscomponents/codegraph/codegraph_style.scss
@@ -30,12 +30,12 @@ $page-link-color: var(--page-link-color); //rgba(50,50,200,1.0);
 @media screen and (max-width: 500px) {
     .EczCodeGraphComponent {
         grid-template-columns: 100%;
-        grid-template-rows: 80% 20%;
+        grid-template-rows: 50% 50%;
 
         .EczCodeGraphComponent_SidePanel {
             > div {
-                min-height: 200px;
-                overflow: hidden;
+                // min-height: 200px;
+                // overflow: hidden;
             }
         }
     }

diff --git a/jscomponents/codegraph/headlessGraphExporter.js b/jscomponents/codegraph/headlessGraphExporter.js
@@ -7,7 +7,10 @@ import { getCyStyleJson } from './index.js';
 import loMerge from 'lodash/merge.js';
 
 
-const importSourceSansFontsCss = "@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');";
+// Keep "Source Sans Pro" for now, not "Source Sans 3", because otherwise I get
+// issues with fonte rendering in the SVG graphic.  Tried a few things, it's
+// buggy, unsure how to best fix!!
+const importSourceSansFontsCss = "@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');";
 
 
 
@@ -71,7 +74,7 @@ ${ importSourceSansFontsCss }
         const styleData = getCyStyleJson(
             loMerge(
                 {
-                    fontFamily: 'Source Sans 3',
+                    fontFamily: "Source Sans Pro",
                     fontSize: '18px',
                 },
                 cyStyleJsonOptions

diff --git a/jscomponents/linkanchorvisualhighlight/index.js b/jscomponents/linkanchorvisualhighlight/index.js
@@ -37,14 +37,34 @@ function possible_link_activated_callback(event)
         );
         const link_target = window.document.getElementById(link_target_id);
         console.log(link_target);
-        link_target.classList.add("visual-highlight");
-        setTimeout(
-            () => link_target.classList.remove("visual-highlight"),
-            1000 // milliseconds
-        );
+
+        // Normally, we let the browser handle the scrolling to the element to
+        // keep behavior as native as possible and to also have the relevant
+        // fragment in the URL address bar (e.g., for link sharing).
+        //
+        // But sometimes, for purely functional elements like navigation, we
+        // should directly scroll to the target element.  This is indicated by a
+        // special css class placed on the target element.
+        //
+        if (link_target.classList.contains('linkanchorvisualhighlight_direct_scroll')) {
+            link_target.scrollIntoView(true);
+            event.preventDefault();
+        }
+
+        // trigger the visual highlight flash on the target element.
+        visualHighlight(link_target);
     }
 }
 
+export function visualHighlight(element)
+{
+    element.classList.add("visual-highlight");
+    setTimeout(
+        () => element.classList.remove("visual-highlight"),
+        1000 // milliseconds
+    );
+}
+
 
 
 //

diff --git a/site/src/index.11ty.js b/site/src/index.11ty.js
@@ -4,15 +4,28 @@ const data = {
     title: 'Home',
     tags: ['sitePage'],
     page_layout_info: {
+
         header_large_text: 'Welcome to the error correction zoo!',
+
         wide_layout: true,
+
         div_bodycontents_classes: ['page-index'],
-        // jscomponents: {
-        //     randomcode: true,
-        // },
+
         jscomponents_profile: {
             dynamic: 'home',
         },
+
+        // These <meta> tags will enable the mobile site to be pinned to the
+        // phone's home screen and will appear without safari controls when
+        // opened.
+        extra_head_content: `
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+<meta name="apple-mobile-web-app-title" content="Error Correction Zoo" />
+<meta name="theme-color" content="#00007f">
+`,
+
     },
     eleventyComputed: {
         // ---

diff --git a/site/src/list/list.11ty.js b/site/src/list/list.11ty.js
@@ -20,6 +20,10 @@ const data = async () => {
             alias: 'codelist',
         },
         tags: ['sitePage'],
+        page_layout_info: {
+            // provide wide page layouts in code lists
+            wide_layout: true,
+        },
         eleventyComputed: {
             permalink: (data) =>
                 data.eczoodb.zoo_object_permalink('codelist', data.codelist.list_id) + '.html',

diff --git a/site/stylesheets/flm-formatting.scss b/site/stylesheets/flm-formatting.scss
@@ -75,17 +75,17 @@ table.cells {
       background-color: rgba(255,120,120,0.30);  /*rgb(255,200,200);*/
   }
   .cellstyle-lvert {
-      border-left: solid .5pt;
+      border-left: solid var(--main-text-color) .5pt;
   }
   .cellstyle-rvert {
-      border-right: solid .5pt;
+      border-right: solid var(--main-text-color) .5pt;
   }
 
   .celltbledge-top {
-      border-top: solid 1pt;
+      border-top: solid var(--main-text-color) 1pt;
   }
   .celltbledge-bottom {
-      border-bottom: solid 1pt;
+      border-bottom: solid var(--main-text-color) 1pt;
   }
 
 }

diff --git a/site/stylesheets/home-page.scss b/site/stylesheets/home-page.scss
@@ -50,6 +50,9 @@
                 display: inline;
                 padding: 2px 0px;
             }
+            > li:last-child {
+                margin-right: 0.5em;
+            }
 
             .spacer {
                 display: inline-block;

diff --git a/site/stylesheets/main.scss b/site/stylesheets/main.scss
@@ -106,7 +106,7 @@ details > summary > span {
 ////////////////////////////////////////////////////////////////////////////////
 
 $header-padding: 3px;
-$header-bgimage-gap: 23px;
+$header-bgimage-horizontal-gap: 23px;
 $header-bgimage-width: 150px;
 $header-bgimage-width-mobile: 80px;
 $header-min-height: 80px;
@@ -144,7 +144,7 @@ $header-min-height-mobile: 100px;
     color: $pageheader-text-color;
 }
 #header {
-    display: flex;
+    display: flex; // ensures correct vertical centering of the h1 element
 
     padding: 10px 0px;
 
@@ -162,11 +162,11 @@ $header-min-height-mobile: 100px;
 
     background-position-x: 0%;
     background-position-y: center;
-    background-size: $header-bgimage-width auto;
+    background-size: contain; //$header-bgimage-width auto;
 
     width: $header-bgimage-width;
 
-    margin-right: $header-bgimage-gap;
+    margin-right: $header-bgimage-horizontal-gap;
 }
 
 
@@ -176,13 +176,16 @@ $header-min-height-mobile: 100px;
 // space.
 //
 @media screen and (max-width: $page-collapse-layout-width) {
-#bodycontents.page-header-has-text #header-bg-decoration {
-    min-height: $header-min-height-mobile;
-}
-#bodycontents.page-header-has-text #logo {
-    background-image: url('~/site/static/icons/eczoo-main-logo-mobile.svg');
-    width: $header-bgimage-width-mobile;
-    background-size: $header-bgimage-width-mobile auto;
+#bodycontents:not(.app-full-width).page-header-has-text {
+    #header-bg-decoration {
+        min-height: $header-min-height-mobile;
+    }
+    #logo {
+        background-image: url('~/site/static/icons/eczoo-main-logo-mobile.svg');
+        width: $header-bgimage-width-mobile;
+        // it's set to 'contain'
+        //background-size: $header-bgimage-width-mobile auto;
+    }
 }
 }
 
@@ -286,16 +289,16 @@ ul.code-index, ol.code-index {
 table.codelistpage-table {
     margin: 1.5rem 0rem 2rem;
 
-    border-top: solid .15rem black;
-    border-bottom: solid .15rem black;
+    border-top: solid .15rem var(--main-text-color);
+    border-bottom: solid .15rem var(--main-text-color);
 
     width: 100%;
     box-sizing: border-box;
     border-collapse: collapse;
 
     thead {
         tr {
-            border-bottom: solid .1rem black;
+            border-bottom: solid .1rem var(--main-text-color);
 
             th {
                 //font-weight: normal;
@@ -311,10 +314,10 @@ table.codelistpage-table {
     &.hlines {
         thead tr {
             // turn the thin rule below header into a thick rule
-            border-bottom: solid .15rem black;
+            border-bottom: solid .15rem var(--main-text-color);
         }
         tbody tr {
-            border-bottom: solid .1rem black;
+            border-bottom: solid .1rem var(--main-text-color);
         }
     }
 

diff --git a/site/stylesheets/navigation.scss b/site/stylesheets/navigation.scss
@@ -24,7 +24,7 @@
 
 
 
-// sidebar contents
+// navigation list contents
 
 nav h1 {
     font-size: 1rem;
@@ -73,6 +73,26 @@ input.navbar-search {
     }
 }
 
+@media screen and (max-width: #{$page-collapse-layout-width - 1}) {
+#navigation.collapsed-into-js-menu {
+    display: none;
+
+    // position into the main grid layout slot
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 2;
+    grid-row-end: 3;
+    margin: 0px 3px;
+    box-shadow: 3px 3px 15px $main-background-color;
+
+    // when displayed, it should not take too much space
+    overflow: auto;
+    z-index: 9999;
+}
+#navigation.collapsed-into-js-menu-shown {
+    display: block;
+}
+}
 
 //
 // Styling of navigation links when they are embedded in the main header
@@ -138,4 +158,17 @@ input.navbar-search {
         }
 
     }
+
+    // in full-page "app" mode, make the navigation element scrollable and keep
+    // the header height
+    #bodycontents.app-full-width #navigation {
+        overflow: auto;
+        max-height: var(--header-height);
+        box-sizing: border-box;
+
+        // make links smaller, for user convenience
+        font-size: 0.9rem;
+        padding: 3px 3px 3px 0px;
+    }
+
 }