Miscellaneous changes (#21)

evoko · Oct 21, 2021 · c3f01b0 · c3f01b0
1 parent 59882c6
commit c3f01b0
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 116 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Evoko theme",
   "author": "Evoko Unlimited AB",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "api_version": 2,
   "default_locale": "en-us",
   "settings": [

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zendesk-theme",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "private": true,
   "scripts": {
     "start": "concurrently \"npm:preview\" \"npm:styles:watch\"",
@@ -14,14 +14,8 @@
   "devDependencies": {
     "autoprefixer": "^10.3.7",
     "concurrently": "^6.3.0",
-    "husky": "^7.0.2",
     "postcss-cli": "^9.0.1",
     "prettier": "^2.4.1",
     "sass": "^1.43.2"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run build"
-    }
   }
 }
diff --git a/script.js b/script.js
@@ -183,7 +183,7 @@ document.addEventListener('DOMContentLoaded', function () {
     toggle.focus();
   }
 
-  var mobileMenuButton = document.querySelector('.header .menu-button');
+  var mobileMenuButton = document.querySelector('.header-mobile-menu-button');
   var mobileMenu = document.querySelector('#mobile-menu');
   var body = document.querySelector('body');
 
@@ -197,6 +197,7 @@ document.addEventListener('DOMContentLoaded', function () {
     if (e.keyCode === ESCAPE) {
       e.stopPropagation();
       closeNavigation(mobileMenuButton, this);
+      body.classList.remove('no-scroll');
     }
   });
 

diff --git a/style.css b/style.css
diff --git a/styles/_callout-boxes.scss b/styles/_callout-boxes.scss
@@ -16,31 +16,29 @@
   border-radius: $border-radius;
   border: 1px solid;
   margin-bottom: 16px;
+  color: $text-color;
 
   &:before {
     position: absolute;
-    left: 14px;
-    top: 13px;
+    left: 16px;
+    top: 20px;
     vertical-align: middle;
-    font-family: 'Font Awesome 5 Free';
-    font-weight: 900;
-    font-size: 22px;
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
+    height: 20px;
+    width: 20px;
+    background-repeat: no-repeat;
   }
 }
 
 .note,
 .callout-note {
   border-color: $yellow-color;
-  background-color: rgba($yellow-color, 0.2);
+  background-color: rgba($yellow-color, 0.1);
 }
 
 .note::before,
 .callout-note::before {
-  content: '\f0f3';
-  color: $yellow-color;
+  content: '';
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath fill='#{rgba($yellow-color, 0.99)}' d='M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'/%3E%3C/svg%3E");
 }
 
 .success,
@@ -51,8 +49,8 @@
 
 .success::before,
 .callout-success::before {
-  content: '\f164';
-  color: $brand-color;
+  content: '';
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath fill='#{rgba($brand-color, 0.99)}' d='M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z'/%3E%3C/svg%3E");
 }
 
 .important,
@@ -63,8 +61,8 @@
 
 .important::before,
 .callout-important::before {
-  content: '\f0a1';
-  color: $red-color;
+  content: '';
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath fill='#{rgba($red-color, 0.99)}' d='M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z'/%3E%3C/svg%3E");
 }
 
 .tip,
@@ -75,6 +73,6 @@
 
 .tip::before,
 .callout-tip::before {
-  content: '\f0d0';
-  color: $blue-color;
+  content: '';
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --%3E%3Cpath fill='#{rgba($blue-color, 0.99)}' d='M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z'/%3E%3C/svg%3E");
 }
diff --git a/styles/_forms.scss b/styles/_forms.scss
@@ -1,7 +1,6 @@
 /***** Forms *****/
 .form {
   max-width: $column-width;
-  margin: 0 auto;
 
   &-header {
     margin-bottom: 30px;

diff --git a/styles/_header.scss b/styles/_header.scss
@@ -21,7 +21,7 @@
   stroke: $text-color;
 
   &:hover,
-  &:focus,
+  &:focus-visible,
   &:active {
     background-color: transparent;
     color: $brand-color;
@@ -86,13 +86,6 @@
       margin: 0 0 0 20px;
     }
 
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: transparent;
-      color: $link_color;
-    }
-
     &.sign-in {
       display: inline-block;
       margin: 0;
@@ -125,43 +118,6 @@
   }
 }
 
-.header-mobile-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  @include tablet {
-    display: none;
-  }
-
-  .search-button,
-  .menu-button {
-    padding: 8px;
-    background: transparent;
-    border: none;
-    color: $text-color;
-    cursor: pointer;
-  }
-
-  .menu-button {
-    svg {
-      display: none;
-    }
-
-    &[aria-expanded='false'] {
-      .menu-icon {
-        display: inline-block;
-      }
-    }
-
-    &[aria-expanded='true'] {
-      .x-icon {
-        display: inline-block;
-      }
-    }
-  }
-}
-
 .header-mobile-menu {
   display: none;
   overflow-y: auto;
@@ -173,13 +129,19 @@
   padding-right: 5%;
   padding-left: 5%;
   padding-bottom: 30px;
-  padding-top: $header-height + 30px;
+  padding-top: $header-height;
   margin-top: -$header-height;
 
   &[aria-expanded='true'] {
     display: block;
   }
 
+  &-search {
+    position: relative;
+    margin-bottom: 10px;
+    padding: 12px 0;
+  }
+
   ul {
     li {
       border-radius: $border-radius;
@@ -209,6 +171,34 @@
   }
 }
 
+.header-mobile-menu-button {
+  padding: 8px;
+  background: transparent;
+  border: none;
+  color: $text-color;
+  cursor: pointer;
+
+  @include tablet {
+    display: none;
+  }
+
+  svg {
+    display: none;
+  }
+
+  &[aria-expanded='false'] {
+    .menu-icon {
+      display: inline-block;
+    }
+  }
+
+  &[aria-expanded='true'] {
+    .x-icon {
+      display: inline-block;
+    }
+  }
+}
+
 .no-scroll {
   left: 0;
   top: 0;

diff --git a/styles/_metadata.scss b/styles/_metadata.scss
@@ -3,14 +3,21 @@
   display: block;
 }
 
+.meta-group-opposite {
+  float: right;
+}
+
+[dir='rtl'] .meta-group-opposite {
+  float: left;
+}
+
 .meta-group * {
   display: inline;
 }
 
 .meta-data {
   color: $secondary-text-color;
   font-size: $font-size-navigation;
-  // font-weight: $font-weight-light;
 
   &:not(:last-child)::after {
     content: '\00B7';

diff --git a/styles/_search_results.scss b/styles/_search_results.scss
@@ -1,7 +1,6 @@
 /***** Search results *****/
 .search-results {
   @include desktop {
-    margin: 0 auto;
     max-width: $column-width;
   }
 
@@ -34,6 +33,12 @@
       padding: 24px 0;
     }
   }
+
+  &-pagination-container {
+    @include desktop {
+      max-width: $column-width;
+    }
+  }
 }
 
 .search-result {

diff --git a/styles/_shame.scss b/styles/_shame.scss
@@ -34,18 +34,6 @@
   outline: 0;
 }
 
-.code-copy-button::before {
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  padding-right: 4px;
-  content: '\f328';
-}
-
 /* for responsive article video embed */
 .embed-container {
   position: relative;

diff --git a/templates/document_head.hbs b/templates/document_head.hbs
@@ -1,3 +1,2 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="theme-color" content="#000">
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+<meta name="theme-color" content="#000">
diff --git a/templates/header.hbs b/templates/header.hbs
@@ -45,40 +45,38 @@
       </div>
     </div>
     {{else}}
-    {{#link "sign_in" class="sign-in"}}
-    {{t 'sign_in'}}
-    {{/link}}
+      {{#link "sign_in"}}
+        {{t 'sign_in'}}
+      {{/link}}
     {{/if}}
   </div>
 
-  <div class="header-mobile-actions">
-    {{!-- TODO: make search available in the header instead of linking to the search page --}}
-    <a href="/hc/en-us/search" class="search-button" >
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
-        <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor" />
-        <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5" />
-      </svg>
-    </a>
-
-    <button aria-expanded="false" aria-controls="mobile-menu" aria-label="{{t 'toggle_navigation'}}" class="menu-button">
-      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" focusable="false" viewBox="0 0 16 16" aria-hidden="true" class="menu-icon">
-        <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13" />
-      </svg>
-
-      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="x-icon">
-        <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3" />
-      </svg>
-    </button>
-  </div>
-
+  <button aria-expanded="false" aria-controls="mobile-menu" aria-label="{{t 'toggle_navigation'}}" class="header-mobile-menu-button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" focusable="false" viewBox="0 0 16 16" aria-hidden="true" class="menu-icon">
+      <path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13" />
+    </svg>
 
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="x-icon">
+      <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3" />
+    </svg>
+  </button>
 </header>
+
 <nav class="header-mobile-menu" aria-expanded="false" id="mobile-menu">
+  <div class="header-mobile-menu-search">
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12"
+      class="search-icon" aria-hidden="true">
+      <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor" />
+      <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5" />
+    </svg>
+    {{search submit=false instant=settings.instant_search placeholder="Search knowledge base..."}}
+  </div>
+
   <ul>
-    <li>{{link 'new_request'}}</li>
     {{#if help_center.community_enabled}}
     <li>{{link 'community'}}</li>
     {{/if}}
+    <li>{{link 'new_request'}}</li>
     {{#if signed_in}}
     <li>{{my_profile}}</li>
     <li>{{link "my_activities"}}</li>

diff --git a/templates/home_page.hbs b/templates/home_page.hbs
@@ -83,5 +83,4 @@
 <style>
   .header { background-color: transparent; }
   .header-desktop-search { display: none; }
-  .header .search-button { display: none; }
 </style>