Updates photo template (#758)

* Updates photo template * Updates photo template
davidmerfield · Mar 20, 2024 · df69876 · df69876
1 parent 150bfc4
commit df69876
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 176 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+</form>
diff --git a/app/templates/latest/photo/archive.js b/app/templates/latest/photo/archive.js
diff --git 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,19 +26,20 @@
       padding: 0 {{spacing}}rem;
       display: flex;
       width: 100%;
-      height: 36px;
+      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: 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
@@ -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
@@ -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}}