Merge pull request #96 from piperhaywood/dev

v2.1.7
piperhaywood · Nov 16, 2019 · 6d50a45 · 6d50a45
2 parents 53b2ec9 + a4241e2
commit 6d50a45
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 81 deletions.
diff --git a/css/_blocks.button.scss b/css/_blocks.button.scss
@@ -22,7 +22,7 @@
     border: 1px solid $black;
     &:hover,
     &:focus {
-      background-color: $black;
+      background-color: $black !important;
       color: $white;
     }
   }

diff --git a/css/_components.comments.scss b/css/_components.comments.scss
@@ -92,7 +92,8 @@
   }
 }
 
-.comment {
+.comment,
+.pingback {
   border: 1px solid $black;
   margin-top: 1rem;
   padding: $container-padding;

diff --git a/css/_components.searchform.scss b/css/_components.searchform.scss
@@ -22,12 +22,18 @@
 }
 
 .searchform input[type="submit"] {
+  @include style-h4;
+  background-color: $white;
+  border: none !important;
+  color: $black;
   cursor: pointer;
   padding: 1rem;
 }
 
-.searchform input[type="submit"]:hover {
-  text-decoration: underline;
+.searchform input[type="submit"]:hover,
+.searchform input[type="submit"]:focus {
+  background-color: $black !important;
+  color: $white;
 }
 
 .searchform__group {

diff --git a/css/_components.site-header.scss b/css/_components.site-header.scss
@@ -46,9 +46,9 @@ body.is-not-tabbing.is-header-open {
   margin-bottom: 2em;
 }
 
-.header__desc.prose p {
-  padding-left: 0;
-  padding-right: 0;
+.header__desc.prose > * {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 }
 
 .smallprint {

diff --git a/css/_rainbow.scss b/css/_rainbow.scss
@@ -1,4 +1,6 @@
 .rainbow {
+  .searchform input[type="submit"]:hover,
+  .searchform input[type="submit"]:focus,
   .has-bg,
   .post-item__link,
   .comment-reply-link,
@@ -24,11 +26,15 @@
   .post__time .has-bg,
   .article .prose blockquote,
   .comment,
+  .pingback,
+  .comment-reply-link,
+  .post__time .has-bg,
   textarea,
   .comments input[type="text"],
   input[type="url"],
   input[type="password"],
   input[type="search"],
+  input[type="submit"],
   .prose button {
     border: 1px solid var(--color);
   }

diff --git a/css/_typography.scss b/css/_typography.scss
@@ -1,7 +1,8 @@
 .prose,
 .wp-block-column {
   &.e-content,
-  &.archive-description {
+  &.archive-description,
+  &.header__desc {
     > p,
     > ul,
     > ol,

diff --git a/js/scripts.js b/js/scripts.js
@@ -1,68 +1,77 @@
-var infinite = {
-  init: function() {
-    var next = document.querySelector(".js-next");
-    var container = document.querySelector(".js-infinite-container");
+// Add class so that we can style skip links
+function handleFirstTab(e) {
+  if (e.keyCode === 9) {
+    document.body.classList.add("is-tabbing");
+    document.body.classList.remove("is-not-tabbing");
+    window.removeEventListener("keydown", handleFirstTab);
+  }
+}
+
+const infinite = {
+  init() {
+    const next = document.querySelector(".js-next");
+    const container = document.querySelector(".js-infinite-container");
     if (!next || !container) {
       return;
     }
-    var infScroll = new InfiniteScroll(container, {
+    const infScroll = new InfiniteScroll(container, {
       path: ".js-next a",
       append: ".js-article",
       hideNav: ".js-pagination"
     });
 
-    infScroll.on("append", function(response, path, items) {
+    infScroll.on("append", (response, path, items) => {
       // Reset asset HTML due to Infinite Scroll behaviour
-      items.forEach(function(item) {
-        var imgs = item.querySelectorAll("img");
-        var audios = item.querySelectorAll("audio");
-        var videos = item.querySelectorAll("video");
-        var assetGroups = [imgs, audios, videos];
-        assetGroups.forEach(function(group) {
-          group.forEach(function(asset) {
+      items.forEach(item => {
+        let imgs = item.querySelectorAll("img");
+        let audios = item.querySelectorAll("audio");
+        let videos = item.querySelectorAll("video");
+        let assetGroups = [imgs, audios, videos];
+        assetGroups.forEach(group => {
+          group.forEach(asset => {
             asset.outerHTML = asset.outerHTML;
           });
         });
       });
     });
 
-    var loadingMessage = document.querySelector(".js-infinite-loading");
-    var endMessage = document.querySelector(".js-infinite-end");
-    infScroll.on("request", function(path) {
+    const loadingMessage = document.querySelector(".js-infinite-loading");
+    const endMessage = document.querySelector(".js-infinite-end");
+    infScroll.on("request", path => {
       loadingMessage.classList.add("show");
     });
-    infScroll.on("last", function(response, path) {
+    infScroll.on("last", (response, path) => {
       loadingMessage.classList.remove("show");
       endMessage.classList.add("show");
     });
     return infScroll;
   }
 };
 
-var menu = {
+const menu = {
   scroll: window.pageYOffset,
   height: 0,
-  init: function() {
-    var vm = this;
-    var details = document.querySelector(".js-header-details");
-    var sum = document.querySelector(".js-header-summary");
+  init() {
+    const vm = this;
+    const details = document.querySelector(".js-header-details");
+    const sum = document.querySelector(".js-header-summary");
     if (!details || !sum) {
       return;
     }
 
     vm.height = details.clientHeight - sum.clientHeight;
-    details.addEventListener("toggle", function(e) {
-      var open = e.target.getAttribute("open");
+    details.addEventListener("toggle", e => {
+      let open = e.target.getAttribute("open");
       if (open == null) {
         vm.close(sum, details);
       } else {
         vm.open(sum);
       }
     });
 
-    var closeMenu = document.querySelector(".js-close-menu");
+    const closeMenu = document.querySelector(".js-close-menu");
     if (closeMenu) {
-      closeMenu.addEventListener("click", function(e) {
+      closeMenu.addEventListener("click", e => {
         e.preventDefault();
         vm.close(sum, details);
       });
@@ -71,37 +80,46 @@ var menu = {
     // TODO trap focus
     // For now, there is a “close menu” button at the base of the menu
   },
-  close: function(elem, details) {
-    var vm = this;
+  close(elem, details) {
+    const vm = this;
     document.body.classList.remove("is-header-open");
     details.removeAttribute("open");
     elem.setAttribute("aria-expanded", "false");
     window.scrollTo(0, vm.scroll);
   },
-  open: function(elem) {
-    var vm = this;
+  open(elem) {
+    const vm = this;
     // Save the scroll position so that we can reset it when header is closed and body is “unfrozen”
     vm.scroll = window.pageYOffset;
     document.body.classList.add("is-header-open");
     elem.setAttribute("aria-expanded", "true");
   }
 };
 
-// Add class so that we can style skip links
-function handleFirstTab(e) {
-  if (e.keyCode === 9) {
-    // the "I am a keyboard user" key
-    document.body.classList.add("is-tabbing");
-    document.body.classList.remove("is-not-tabbing");
-    window.removeEventListener("keydown", handleFirstTab);
+const replies = {
+  init() {
+    const links = document.querySelectorAll(".comment-reply-link");
+    const details = document.querySelector("#reply");
+    const input = document.querySelector("#comment");
+    if (!details || !links || !input) {
+      return;
+    }
+    links.forEach(link => {
+      link.addEventListener("click", e => {
+        e.preventDefault();
+        details.setAttribute("open", "true");
+        details.scrollIntoView({ behavior: "smooth" });
+        input.focus();
+      });
+    });
   }
-}
-window.addEventListener("keydown", handleFirstTab);
+};
 
 // Add class if browser doesn’t support open/close of details
 if (!("open" in document.createElement("details"))) {
   document.body.classList.add("no-details");
 }
-
-var infScroll = infinite.init();
+window.addEventListener("keydown", handleFirstTab);
+infinite.init();
 menu.init();
+replies.init();
diff --git a/notebook-ph/404.php b/notebook-ph/404.php
@@ -11,13 +11,10 @@
 
       <section class="prose e-content">
         <p><?php _e('Sorry, there&rsquo;s nothing to see here. Please search or browse keywords below. Get in touch if you can&rsquo;t find what you&rsquo;re looking&nbsp;for.', 'notebook-ph'); ?></p>
-      </section>
-      <section class="container browse-search">
         <?php get_search_form(); ?>
+        <?php echo do_shortcode('[notebookindex count="2"]'); ?>
       </section>
 
-      <?php echo do_shortcode('[notebookindex count="2"]'); ?>
-
       <footer class="post__footer">
       </footer>
 

diff --git a/notebook-ph/comments.php b/notebook-ph/comments.php
@@ -13,7 +13,7 @@
 
   <?php if ( have_comments() ) : ?>
     <div class="comments__section">
-      <details <?php echo have_comments() ? 'open' : ''; ?>>
+      <details>
         <summary>
           <?php
           printf( _x( 'View discussion <span class="comments__count" aria-hidden="true">%s</span>', 'comments title', 'notebook-ph' ), get_comments_number() );
@@ -45,7 +45,7 @@
 
   <?php if (comments_open()) : ?>
     <div class="comments__section">
-      <details>
+      <details id="reply">
         <?php $discussion = 'Leave a reply'; ?>
         <?php $discussion = have_comments() ? $discussion . ' / view discussion <span class="comments__count">%s</span>' : $discussion; ?>
         <summary>

diff --git a/notebook-ph/functions.php b/notebook-ph/functions.php
@@ -524,16 +524,14 @@ function nph_get_list($posts = false) {
             $excerpt = $excerpt ? $excerpt : get_the_title();
           }
           ?>
-          <?php $src = false; ?>
-          <?php if (has_post_thumbnail($post)) : ?>
-            <?php $src = get_the_post_thumbnail_url($post, 'thumbnail'); ?>
-          <?php endif; ?>
           <li class="post-index__post-item post-item" style="--color:<?php echo $hsl; ?>;">
             <a class="post-item__link" href="<?php the_permalink(); ?>"
               aria-label="<?php printf(esc_attr__('Visit post published %s titled “%s”', 'notebook-ph'), get_the_date('d F Y'), get_the_title()); ?>">
               <time class="post-item__time" datetime="<?php echo nph_date(true, false); ?>"><?php echo get_the_date('d M Y'); ?></time>
               <span>&mdash;</span>
-              <?php if ($src) : ?><img class="post-item__image" src="<?php echo $src; ?>"><?php endif; ?>
+              <?php if (has_post_thumbnail($post)) : ?>
+                <?php echo nph_list_thumb($post, 'thumbnail'); ?>
+              <?php endif; ?>
               <div class="post-item__text"><?php echo $excerpt; ?></div>
             </a>
           </li>
@@ -545,6 +543,13 @@ function nph_get_list($posts = false) {
   }
 }
 
+function nph_list_thumb($post, $size = 'thumbnail') {
+  add_filter('wp_calculate_image_srcset_meta', '__return_null');
+  $html = get_the_post_thumbnail($post, $size, array('loading' => 'lazy', 'class' => 'post-item__image'));
+  remove_filter('wp_calculate_image_srcset_meta', '__return_null');
+  return $html;
+}
+
 function nph_comment($comment, $args, $depth) {
   if ( 'div' === $args['style'] ) {
     $tag       = 'div';

diff --git a/notebook-ph/index.php b/notebook-ph/index.php
@@ -34,7 +34,7 @@
               )); ?></span>
             <?php endif; ?>
             <h1 class="p-name post__title<?php echo $format ? ' visuallyhidden' : ''; ?>">
-              <?php nph_title(); ?>
+              <?php echo $format ? get_the_title() : nph_title(false); ?>
             </h1>
           </header>
 
@@ -90,15 +90,12 @@
     <article class="post article type-<?php echo get_post_type(); ?>" style="--color:<?php echo nph_get_hsl(); ?>;">
       <div class="article__inner">
 
-        <div class="prose">
+        <div class="prose e-content">
           <p><?php _e('Nothing found!', 'notebook-ph'); ?></p>
-        </div>
-
-        <div class="container browse-search">
           <?php get_search_form(); ?>
+          <?php echo do_shortcode('[notebookindex count="2"]'); ?>
         </div>
 
-        <?php echo do_shortcode('[notebookindex count="2"]'); ?>
       </div>
       <footer class="post__footer">
       </footer>

diff --git a/notebook-ph/scripts.js b/notebook-ph/scripts.js
diff --git a/notebook-ph/style.css b/notebook-ph/style.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "notebook-ph",
   "title": "Notebook by PH",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "A simple WordPress theme for keeping notes. ",
   "author": {
     "name": "Piper Haywood",