From df6987632aea5aa6e0722cdb00e95acbb46c367e Mon Sep 17 00:00:00 2001
From: David Merfield <dmerfield@gmail.com>
Date: Wed, 20 Mar 2024 16:50:09 +0000
Subject: [PATCH] Updates photo template (#758)

* Updates photo template

* Updates photo template
---
 app/templates/latest/photo/_footer.html      |   6 +
 app/templates/latest/photo/_grid_square.html |  23 ++-
 app/templates/latest/photo/_navigation.html  |   2 +
 app/templates/latest/photo/_search_form.html | 160 +------------------
 app/templates/latest/photo/archive.js        |   8 +-
 app/templates/latest/photo/archives.html     |  11 +-
 app/templates/latest/photo/package.json      |   4 +-
 app/templates/latest/photo/search.html       |  52 ++++++
 app/templates/latest/photo/style.css         |   7 +-
 9 files changed, 97 insertions(+), 176 deletions(-)

diff --git a/app/templates/latest/photo/_footer.html b/app/templates/latest/photo/_footer.html
index ce3a366ef18..80f1bcd6825 100644
--- a/app/templates/latest/photo/_footer.html
+++ b/app/templates/latest/photo/_footer.html
@@ -4,6 +4,12 @@
   
   
 </div>
+{{#infinite_scroll}}
+{{#pagination}}
+  <a class="next-page" {{#next}}href="/page/{{next}}"{{/next}}>Next &rarr;</a>
+{{/pagination}}
+{{/infinite_scroll}}
+
 <script src="{{{scriptURL}}}" type="text/javascript"></script>
 </body>
 
diff --git a/app/templates/latest/photo/_grid_square.html b/app/templates/latest/photo/_grid_square.html
index 0a09818ff62..74d2bf5cc28 100644
--- a/app/templates/latest/photo/_grid_square.html
+++ b/app/templates/latest/photo/_grid_square.html
@@ -4,8 +4,10 @@
   .yield > h1:first-child,
   .yield style:first-child + .posts {
     padding-top: calc({{spacing}}rem + 1.4em);
-    {{/sticky_navigation}}
   }
+  {{/sticky_navigation}}
+
+  
 
   .posts {
     display: flex;
@@ -145,23 +147,38 @@
           class="pre-loaded"
           onload="this.className='loaded'"
           alt="{{ title }}"
+          width="{{thumbnail.large.width}}"
+          height="{{thumbnail.large.height}}"
           srcset="
           {{{thumbnail.small.url}}}  {{thumbnail.small.width}}w,
           {{{thumbnail.medium.url}}}  {{thumbnail.medium.width}}w,
           {{{thumbnail.large.url}}}  {{thumbnail.large.width}}w
         "
           src="{{{thumbnail.large.url}}}"
-          sizes="calc(100vw / {{ thumbnails_per_row }})" />
+          {{#is.thumbnail_size}}
+          {{#small}}
+          sizes="(max-width: 540px) 33vw, (max-width: 800px) 25vw, (max-width: 1000px) 20vw, (max-width: 1200px) 16vw, 14vw"
+          {{/small}}
+          {{#medium}}
+          sizes="(max-width: 540px) 50vw, (max-width: 800px) 33.3333vw, (max-width: 1000px) 33.3333vw, 20vw"
+          {{/medium}}
+          {{#large}}
+          sizes="(max-width: 540px) 100vw, (max-width: 800px) 100vw, (max-width: 1000px) 50vw, (max-width: 1200px) 50vw"
+          {{/large}}
+          {{/is.thumbnail_size}}
+          />
         <noscript>
           <img
             alt="{{ title }}"
+            width="{{thumbnail.large.width}}"
+            height="{{thumbnail.large.height}}"  
             srcset="
           {{{thumbnail.small.url}}}  {{thumbnail.small.width}}w,
           {{{thumbnail.medium.url}}}  {{thumbnail.medium.width}}w,
           {{{thumbnail.large.url}}}  {{thumbnail.large.width}}w
         "
             src="{{{thumbnail.large.url}}}"
-            sizes="calc(100vw / {{ thumbnails_per_row }})" />
+             />
         </noscript>
         {{/thumbnail.medium}}
         {{^thumbnail.medium}}
diff --git a/app/templates/latest/photo/_navigation.html b/app/templates/latest/photo/_navigation.html
index c4c73c6918e..4aeeca2f56b 100644
--- a/app/templates/latest/photo/_navigation.html
+++ b/app/templates/latest/photo/_navigation.html
@@ -18,10 +18,12 @@
     {{/menu}}
 
     {{#pagination}}
+    {{^infinite_scroll}}
     <span class="spacer"></span>
     <span class="tabular-numerals"><span id="current-page">{{current}}</span> of {{total}}</span>
     <a class="previous-page" {{#previous}}href="/page/{{previous}}"{{/previous}}>&larr; </a>
     <a class="next-page" {{#next}}href="/page/{{next}}"{{/next}}> &rarr;</a>
+    {{/infinite_scroll}}
     {{/pagination}}
 
     {{#entry}}
diff --git a/app/templates/latest/photo/_search_form.html b/app/templates/latest/photo/_search_form.html
index 6309e0216ff..6f61216e762 100644
--- a/app/templates/latest/photo/_search_form.html
+++ b/app/templates/latest/photo/_search_form.html
@@ -102,163 +102,5 @@
     <a href="/search?q=">
         <span class="thumbnail"><img src="/icons/search.svg"></span>
         <span id="link-to-search"></span><span style="color:rgba(0,0,0,.4)">&puncsp;–&puncsp;Search</span></a>
-    <div id="results" style=""></div>
   </div>
-</form>
-<script type="text/javascript">
-
-var searchInput = document.querySelectorAll('[name="q"]')[0];
-var results = document.getElementById("results");
-var searchForm = document.getElementById("searchForm");
-var dropdown = document.getElementById("dropdown");
-var linkToSearch = document.getElementById("link-to-search");
-
-var index = null;
-
-function moveFocusUp() {
-  if (index === null) {
-    index = 0;
-  } else {
-    index--;
-  }
-
-  setFocus();
-}
-
-function moveFocusDown() {
-  if (index === null) {
-    index = 0;
-  } else {
-    index++;
-  }
-
-  setFocus();
-}
-
-function setFocus() {
-  var focussedLinks = document.querySelectorAll("#dropdown a");
-
-  if (index > focussedLinks.length) {
-    index = focussedLinks.length;
-  }
-
-  if (index < 0) {
-    index = 0;
-  }
-
-  focussedLinks[index].focus();
-}
-
-// My take on jquery's $(node).parents(secondnode);
-function parents(node, secondnode) {
-  while (node.parentNode) {
-    if (node.parentNode === secondnode) return true;
-    node = node.parentNode;
-  }
-  return false;
-}
-
-document.onkeydown = function(e) {
-
-  if (!parents(document.activeElement, searchForm)) return;
-
-  if (e.keyCode === 37 && document.activeElement !== searchInput) {
-    searchInput.focus();
-    e.preventDefault();
-    return false;
-  }
-
-  if (e.keyCode !== 40 && e.keyCode !== 38) return;
-
-  if (e.keyCode === 40) {
-    moveFocusDown();
-  } else if (e.keyCode === 38) {
-    moveFocusUp();
-  }
-
-  e.preventDefault();
-  return false;
-};
-
-function close() {
-  dropdown.style.display = "none";
-  index = null;
-}
-
-if (searchInput) {
-searchInput.oninput = loadResults;
-searchInput.onclick = loadResults;
-}
-
-function loadResults() {
-  dropdown.addEventListener("mousedown", function(e) {
-    e.stopPropagation();
-  });
-
-  document.body.addEventListener("mousedown", close);
-
-  var query = searchInput.value;
-
-  if (!query) {
-    dropdown.style.display = "none";
-    return;
-  }
-
-  dropdown.style.display = "block";
-
-  linkToSearch.innerHTML = searchInput.value;
-  linkToSearch.parentNode.href =
-    "/search?q=" + encodeURIComponent(searchInput.value);
-
-  httpGetAsync("/search?q=" + query + "&debug=true", function(res) {
-    if (searchInput.value !== query) return;
-
-    res = JSON.parse(res);
-
-    // limit number of results to 15
-    res.entries = res.entries.slice(0, 15);
-
-    var result, html;
-    html = "";
-    res.entries.forEach(function(entry) {
-      result = "";
-
-      result += '<a class="result" href="' + entry.url + '">';
-
-      result += '<span class="thumbnail">';
-
-      if (entry.thumbnail && entry.thumbnail.square)
-        result += '<img src="' + entry.thumbnail.square.url + '">';
-
-      result += "</span>";
-
-      result +=
-        '<span class="title">' +
-        entry.title.split(query).join("<b>" + query + "</b>") +
-        '</span>';
-
-      if (entry.date)
-        result += '<span class="date"> - ' +
-        entry.date +
-        "</span>";
-
-      result += "</a>";
-
-      html += result;
-    });
-    results.innerHTML = html;
-  });
-}
-
-function httpGetAsync(theUrl, callback) {
-  var xmlHttp = new XMLHttpRequest();
-  xmlHttp.onreadystatechange = function() {
-    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
-      callback(xmlHttp.responseText);
-  };
-  xmlHttp.open("GET", theUrl, true); // true for asynchronous
-  xmlHttp.send(null);
-}
-
-  
-</script>
\ No newline at end of file
+</form>
\ No newline at end of file
diff --git a/app/templates/latest/photo/archive.js b/app/templates/latest/photo/archive.js
index 090d9202ae5..b1edc216533 100644
--- a/app/templates/latest/photo/archive.js
+++ b/app/templates/latest/photo/archive.js
@@ -6,7 +6,6 @@
     { 
       "title": "{{title}}",
       "url": "{{{url}}}",
-      "tags": [ {{#tags}}{"tag": "{{tag}}", "slug": "{{slug}}"}, {{/tags}}],
       "thumbnail": "{{{thumbnail.small.url}}}",
       "date": "{{date}}"
     },
@@ -22,11 +21,11 @@ const container = document.getElementById('hyperlist');
 const list = HyperList.create(container, {
   // All items must be the exact same height currently. Although since there is
   // a generate method, in the future this should be configurable.
-  itemHeight: 36,
+  itemHeight: 80,
 
   width: "100vw",
 
-  height: window.innerHeight - 60,
+  height: window.innerHeight - 120,
 
   useFragment: false,
 
@@ -66,8 +65,7 @@ const list = HyperList.create(container, {
           </noscript>` : ''}
       </span>
       <span class="title">${articles[index].title}</span>
-      <span class="tags">${articles[index].tags.map(({tag, slug}) => `<a href="/tagged/${slug}">${tag}</a>`).join(' ')}</span>
-      <span>${articles[index].date}</span>
+      <span class="date">${articles[index].date}</span>
     `;
     return el;
   },
diff --git a/app/templates/latest/photo/archives.html b/app/templates/latest/photo/archives.html
index fd9186b36da..83405323701 100644
--- a/app/templates/latest/photo/archives.html
+++ b/app/templates/latest/photo/archives.html
@@ -8,7 +8,7 @@
     #hyperlist {
       display: block;
       position: absolute;
-      top: calc(2 * ({{spacing}}rem + 1.4em));
+      top: calc(1 * ({{spacing}}rem + 1.4em));
       right: calc(-1 * {{spacing}}rem);
       left:  calc(-1 * {{spacing}}rem);
       width: 100vw;
@@ -26,7 +26,7 @@
       padding: 0 {{spacing}}rem;
       display: flex;
       width: 100%;
-      height: 36px;
+      height: 80px;
       margin: 0;
     }
 
@@ -34,11 +34,12 @@
     #hyperlist > a:hover .title {text-decoration: underline;}
     #hyperlist > a:active {opacity: 0.5}
     
-    #hyperlist > a .thumbnail {width: 2rem;height:36px;}
-    #hyperlist > a .title {flex-grow: 1;margin:0 {{spacing}}rem;}
+    #hyperlist > a .thumbnail {width: 80px;height:80px;}
+    #hyperlist > a .title {flex-grow: 1;margin:0 calc({{spacing}}rem*0.5);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+    #hyperlist > a .date {flex-shrink: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
 
 #hyperlist > a .thumbnail img {
-  max-width: 2rem;max-height: 2rem;width:auto;height: auto;
+  max-width: 80px;max-height: 80px;width:auto;height: auto;
 }
 
 input[type=radio] {display: none;}
diff --git a/app/templates/latest/photo/package.json b/app/templates/latest/photo/package.json
index 360fb43a56d..8eb4ad1c5d8 100644
--- a/app/templates/latest/photo/package.json
+++ b/app/templates/latest/photo/package.json
@@ -7,7 +7,7 @@
     "link_color": "#00008B",
     "hide_dates": false,
     "infinite_scroll": true,
-    "sticky_navigation": true,
+    "sticky_navigation": false,
     "collapse_navigation_by_default": false,
     "navigation_alignment": "justified",
     "navigation_alignment_options": [
@@ -16,7 +16,7 @@
       "right",
       "center"
     ],
-    "thumbnail_size": "small",
+    "thumbnail_size": "medium",
     "thumbnail_size_options": [
       "small",
       "medium",
diff --git a/app/templates/latest/photo/search.html b/app/templates/latest/photo/search.html
index 0af634afd70..a68e9791215 100644
--- a/app/templates/latest/photo/search.html
+++ b/app/templates/latest/photo/search.html
@@ -2,4 +2,56 @@
 
 {{> search_form}}
 
+<style type="text/css">
+    body, html {height: 100%;overflow: hidden;}
+
+    #hyperlist a {
+            text-decoration: none;
+            padding: 0 calc({{spacing}}*0.25rem);
+      color: inherit;
+      box-sizing:border-box;
+      display: block;
+    }
+
+    #hyperlist > a {
+      padding: 0 {{spacing}}rem;
+      display: flex;
+      width: 100%;
+      height: 80px;
+      margin: 0;
+    }
+
+    #hyperlist > a:hover {opacity: 0.75}
+    #hyperlist > a:hover .title {text-decoration: underline;}
+    #hyperlist > a:active {opacity: 0.5}
+    
+    #hyperlist > a .thumbnail {width: 80px;height:80px;}
+    #hyperlist > a .title {flex-grow: 1;margin:0 calc({{spacing}}rem*0.5);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+    #hyperlist > a .date {flex-shrink: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+
+#hyperlist > a .thumbnail img {
+  max-width: 80px;max-height: 80px;width:auto;height: auto;
+}
+
+input[type=radio] {display: none;}
+.filter {list-style-type: none;padding: 0;display: flex;}
+.filter label {cursor: pointer;padding:{{spacing_size}}px;margin:{{spacing_size}}px;background:#eee}
+</style>
+
+
+    <div id="hyperlist" class="container">
+        {{#entries}}
+        <a href="{{{url}}}">
+            <span class="thumbnail">
+          <img src="{{{thumbnail.small.url}}}" class="pre-loaded" onload="this.className+=' loaded';" />
+          <noscript>  
+          <img src="{{{thumbnail.small.url}}}">
+          </noscript>
+      </span>
+      <span class="title">{{title}}</span>
+      <span class="date">{{date}}</span>
+        </a>
+        {{/entries}}
+        </div>
+
 {{> footer}}
\ No newline at end of file
diff --git a/app/templates/latest/photo/style.css b/app/templates/latest/photo/style.css
index b4a60190807..3b1f35299c2 100644
--- a/app/templates/latest/photo/style.css
+++ b/app/templates/latest/photo/style.css
@@ -128,7 +128,11 @@ header {
   flex-wrap: wrap;
   justify-content: space-between;
   position: relative;
-  padding: calc({{spacing}}rem/2) {{spacing}}rem;
+  padding: calc({{spacing}}rem/2) calc({{spacing}}rem);
+  {{^sticky_navigation}}
+  position: relative;
+  z-index: 1;
+  {{/sticky_navigation}}
   {{#sticky_navigation}}
   position: fixed;
   {{#is.navigation_position.top}}
@@ -147,7 +151,6 @@ header {
   {{#is.navigation_alignment.right}}
   right:0;
   {{/is.navigation_alignment.right}}
-
   z-index: 1;
   {{/sticky_navigation}}
 }