Merge pull request #6 from buzcarter/feature/themes_mobile_fixes

buzcarter · Oct 28, 2023 · 4986ab0 · 4986ab0
2 parents 6c8fc2f + 3e23f50
commit 4986ab0
Show file tree

Hide file tree

Showing 9 changed files with 135 additions and 73 deletions.
diff --git a/src/buildRecipes.js b/src/buildRecipes.js
@@ -138,15 +138,6 @@ const getInlineCss = heroImgURL => !heroImgURL
 </style>
 `;
 
-/*
-  // link icon svg code
-  // via: https://fontawesome.com/icons/external-link-alt
-  let linkIcon = '<svg class="linkIcon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">';
-  linkIcon += '<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>';
-  linkIcon += '</svg>';
-  */
-
-// eslint-disable-next-line no-unused-vars
 function prettyBasedOnSection(section, shortenURLs) {
   // opt: remove cruft from 'based on' links
   return shortenURLs

diff --git a/src/static/images/icons/link.svg b/src/static/images/icons/link.svg
diff --git a/src/static/scripts/index.js b/src/static/scripts/index.js
@@ -71,6 +71,7 @@
     const input = document.querySelector(Selectors.SEARCH);
     input.value = '';
     input.focus();
+    filter('');
   };
 
   function init() {

diff --git a/src/static/styles/recipe.css b/src/static/styles/recipe.css
@@ -58,13 +58,6 @@ a:hover .link-svg {
   color: var(--color-back-arrow-hover);
 }
 
-/*
-svg.linkIcon {
-  width: 14px;
-  margin-left: 0.3em;
-}
-*/
-
 .view-source,
 .view-source:link,
 .view-source:visited {

diff --git a/src/static/styles/recipesIndex.css b/src/static/styles/recipesIndex.css
@@ -1,39 +1,47 @@
 :root {
-  --color-view-btn:          var(--color-neutral-45);
-  --color-view-svg-selected: var(--color-neutral-00);
+  --color-view-btn-inactive: var(--color-neutral-20);
+  --color-view-btn-hover:    var(--color-neutral-45);
   --color-view-btn-selected: var(--color-primary);
+  --color-view-svg-selected: var(--color-neutral-00);
 
   --color-filter-inactive: var(--color-neutral-25);
   --color-filter-hover:    var(--color-neutral-80);
   --color-filter-focus:    var(--color-neutral-50);
 
-  --search-input-height:      40px;
-  --search-icon-length:       18px;
-  --search-cancel-btn-length: 24px;
+  --search-input-height: 40px;
+  --search-icon-length:  18px;
+
+  --small-btn-length:    24px;
 }
 
 .mainTitle {
   text-align: center;
 }
 
-/* nav */
+/* nav alphabet */
 .navigation {
-  max-width: 500px;
-  margin: 0.7em auto 2.6em auto;
   line-height: 1.7em;
+  margin: 0.7em auto 2.6em;
   text-align: center;
 }
 
 .navigation a {
-  margin-right: 0.1em;
+  background-color: var(--color-view-svg-selected);
+  border-radius: 50%;
   color: var(--color-index-pg-nav-letter);
   display: inline-block;
-  width: 1.22em;
-  height: 1.22em;
+  height: var(--small-btn-length);
+  line-height: var(--small-btn-length);
+  margin-right: calc(var(--small-btn-length) / 6);
+  text-decoration: none;
+  vertical-align: middle;
+  width: var(--small-btn-length);
+  transition: color var(--transition-color-duration) ease, background-color var(--transition-color-duration) ease;
 }
 
 .navigation a:hover {
-  color: inherit;
+  background-color: var(--color-view-btn-selected);
+  color: var(--color-view-svg-selected);
 }
 
 /* View radio buttons */
@@ -43,8 +51,8 @@ html body .nav-view__item {
 }
 
 .nav-view__btn {
-  background-color: var(--color-neutral-00);
-  border: solid 1px var(--color-view-btn);
+  background-color: transparent;
+  border: solid 1px var(--color-view-btn-inactive);
   border-radius: 4px;
   padding: 0;
   display: inline-block;
@@ -54,13 +62,16 @@ html body .nav-view__item {
   transition: background-color var(--transition-color-duration) ease;
 }
 
-.nav-view__img {
-  height: 24px;
-  width: 24px;
+.nav-view__btn svg {
+  fill: var(--color-view-btn-inactive);
 }
 
-.nav-view__btn svg {
-  fill: var(--color-view-btn);
+.nav-view__btn:hover {
+  border-color: var(--color-view-btn-hover);
+}
+
+.nav-view__btn:hover svg {
+  fill: var(--color-view-btn-hover);
 }
 
 .view--content .nav-view__btn[data-view="content"],
@@ -76,6 +87,11 @@ html body .nav-view__item {
   fill: var(--color-view-svg-selected);
 }
 
+.nav-view__img {
+  height: 24px;
+  width: 24px;
+}
+
 /* Filter/Search */
 .filter__wrap {
   float: right;
@@ -99,7 +115,7 @@ html body .nav-view__item {
 .filter__text-field:not(:placeholder-shown),
 .filter__text-field:focus {
   border-color: var(--color-filter-focus);
-  width: calc(14em + var(--search-cancel-btn-length) + var(--search-icon-length));
+  width: calc(14em + var(--small-btn-length) + var(--search-icon-length));
 }
 
 .filter__mask-icon {
@@ -135,28 +151,29 @@ html body .nav-view__item {
   border-radius: 4px;
   cursor: pointer;
   display: none;
-  height: var(--search-cancel-btn-length);
-  width: var(--search-cancel-btn-length);
+  height: var(--small-btn-length);
+  width: var(--small-btn-length);
   position: absolute;
-  right: calc(5px + var(--search-cancel-btn-length) + var(--search-icon-length));;
-  top: calc((var(--search-input-height) - var(--search-cancel-btn-length)) / 2);
+  right: calc(5px + var(--small-btn-length) + var(--search-icon-length));
+  ;
+  top: calc((var(--search-input-height) - var(--small-btn-length)) / 2);
 }
 
-.filter__text-field:hover + .filter__icons .filter__search-icon {
+.filter__text-field:hover+.filter__icons .filter__search-icon {
   background-color: var(--color-filter-hover);
 }
 
-.filter__text-field:focus + .filter__icons .filter__search-icon {
+.filter__text-field:focus+.filter__icons .filter__search-icon {
   background-color: var(--color-filter-focus);
 }
 
-.filter__text-field:not(:placeholder-shown) + .filter__icons .filter__cancel-btn,
-.filter__text-field:focus + .filter__icons .filter__cancel-btn {
+.filter__text-field:not(:placeholder-shown)+.filter__icons .filter__cancel-btn,
+.filter__text-field:focus+.filter__icons .filter__cancel-btn {
   display: inline-block;
 }
 
-.filter__text-field:not(:placeholder-shown) + .filter__icons .filter__cancel-icon,
-.filter__text-field:focus + .filter__icons .filter__cancel-icon {
+.filter__text-field:not(:placeholder-shown)+.filter__icons .filter__cancel-icon,
+.filter__text-field:focus+.filter__icons .filter__cancel-icon {
   background-color: var(--color-filter-focus);
 }
 
@@ -225,11 +242,14 @@ body .recipe-list .recipe-list__item--hidden {
 }
 
 /* view: Grid */
+.view--grid .recipe-list {
+  display: grid;
+  gap: 20px;
+}
+
 .view--grid .recipe-list__item {
-  display: inline-block;
-  width: 260px;
+  display: block;
   margin: 0;
-  margin: 0 15px 15px 0;
 }
 
 .view--grid .recipe-list__item a {
@@ -283,8 +303,19 @@ body .recipe-list .recipe-list__item--hidden {
   margin-left: 0.3em;
 }
 
-@media screen and (min-width: 820px) {
+@media screen and (min-width: 580px) {
+  .view--grid .recipe-list {
+    grid-template-columns: 50% 50%;
+  }
+}
 
+@media screen and (min-width: 720px) {
+  .view--grid .recipe-list {
+    grid-template-columns: 33% 33% 33%;
+  }
+}
+
+@media screen and (min-width: 820px) {
   .view--content .recipe-list,
   .view--compact-list .recipe-list {
     column-count: 2;

diff --git a/src/static/styles/theme-nytimes.css b/src/static/styles/theme-nytimes.css
@@ -21,27 +21,27 @@
 
 .nytimes .section--title {
   border-bottom: 1px solid #ccc;
-  padding-top: 30px;
+}
+
+.nytimes .section--heroimage {
+  max-height: 300px;
+  overflow: hidden;
+  min-height: 200px;
+}
+
+.section--heroimage img {
+  width: 100%;
+  height: 100%;
 }
 
 .nytimes .recipe__name {
-  font-size: 40px;
+  font-size: 30px;
   font-weight: normal;
   letter-spacing: .01em;
   line-height: 1.1;
   text-transform: none;
 }
 
-.nytimes .section--heroimage {
-  float: right;
-  margin-left: 25px;
-  max-width: 60%;
-}
-
-.nytimes .section--ingredients {
-  clear: right;
-}
-
 .nytimes .section--steps li {
   margin-left: 0;
   margin-top: 40px;
@@ -56,11 +56,41 @@
   top: -25px;
 }
 
-.nytimes .html {
+.nytimes .header__body {
   font-family: var(--nytimes-font-stack);
   font-size: 18px;
+  text-align: left;
 }
 
-.nytimes .html p {
+.nytimes .header__body p {
   line-height: 1.6;
 }
+
+@media screen and (min-width: 820px) {
+  .nytimes .section--ingredients {
+    clear: right;
+  }
+
+  .nytimes .section--heroimage {
+    float: right;
+    margin-left: 25px;
+    max-width: 60%;
+
+    max-height: unset;
+    overflow: unset;
+    min-height: unset;
+  }
+
+  .section--heroimage img {
+    width: unset;
+    height: unset;
+  }
+
+  .nytimes .section--title {
+    padding-top: 30px;
+  }
+
+  .nytimes .recipe__name {
+    font-size: 40px;
+  }
+}
diff --git a/src/static/styles/theme-washington-post.css b/src/static/styles/theme-washington-post.css
@@ -25,13 +25,7 @@
   background-color: var(--color-neutral-00-80prct);
   border-radius: 8px;
   font-family: var(--wapo-font-stack-body);
-  left: 10%;
-  margin-bottom: -150px;
-  min-width: 300px;
-  padding: 30px;
   position: relative;
-  top: -150px;
-  width: 60%;
 }
 
 .washington-post .recipe__name {
@@ -54,6 +48,10 @@
   top: -25px;
 }
 
+.washington-post .html {
+  text-align: left;
+}
+
 .washington-post .html p {
   line-height: 1.6;
 }
@@ -62,3 +60,14 @@
   font-size: 80%;
   line-height: 1.2;
 }
+
+@media screen and (min-width: 820px) {
+  .washington-post .section--title {
+    left: 10%;
+    margin-bottom: -150px;
+    min-width: 300px;
+    padding: 30px;
+    top: -150px;
+    width: 60%;
+  }
+}
diff --git a/src/templates/index.html b/src/templates/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <title>Recipe Book</title>
-  <!-- basics -->
+  <!-- Basics -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
   {{__metaOGImage__}}
@@ -20,13 +20,15 @@
 
 <body class="view--content">
   <main class="wrapper index">
-    <!-- table of contents -->
     <section class="toc">
       <header>
         <h1 class="mainTitle">Recipe Book</h1>
+        <!-- "Jump To" Alphabet Links -->
         <nav class="navigation">
+          <h3 class="sr-only">Jump To Recipes </h3>
           {{__letters-index__}}
         </nav>
+        <!-- Filter/Search Input Field-->
         <div class="filter__wrap">
           <label>
             <span class="sr-only">Filter</span>
@@ -40,6 +42,7 @@ <h1 class="mainTitle">Recipe Book</h1>
             </span>
           </label>
         </div>
+        <!-- View/Arrangement/Layout Buttons -->
         <div class="nav-view">
           <ul role="radiogroup" class="nav-view__list">
             <li class="nav-view__item">