@nanoporetech-digital/components 5.10.0 → 5.11.1

package/dist/collection/components/global-search-results/global-search-results.css

@@ -19,13 +19,13 @@
   display: flex;
   background: white;
   font-size: 14px;
-  min-height: calc(100vh - 63px);
+  min-block-size: calc(100vh - 63px);
   justify-content: space-between;
 }
 .main-search__wrap {
   /* autoprefixer: ignore next */
   display: contents;
-  height: 100%;
+  block-size: 100%;
 }
 .main-search ul {
   margin: 0;
@@ -56,18 +56,15 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  -webkit-margin-after: 1em;
-          margin-block-end: 1em;
+  margin-block-end: 1em;
 }
 .main-search__topbar::after {
   content: "";
-  width: calc(100% - 30px);
+  inline-size: calc(100% - 30px);
   inset-inline-start: 30px;
   position: relative;
-  -webkit-border-after: 1px solid #e5eef1;
-          border-block-end: 1px solid #e5eef1;
-  -webkit-padding-before: 0.9em;
-          padding-block-start: 0.9em;
+  border-block-end: 1px solid #e5eef1;
+  padding-block-start: 0.9em;
 }
 .main-search__applied-filters {
   border: solid 1px #e4e6e8;
@@ -80,8 +77,7 @@
   padding: 5px 5px 0;
   letter-spacing: 2px;
   flex-wrap: wrap;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .main-search__applied-filters span {
   display: flex;
@@ -132,13 +128,12 @@
   flex: 1;
 }
 .main-search .topbar__order {
-  min-width: 175px;
-  max-width: 200px;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  min-inline-size: 175px;
+  max-inline-size: 200px;
+  margin-inline-start: auto;
 }
 :host(.small) .main-search .topbar__order {
-  max-width: 300px;
+  max-inline-size: 300px;
 }
 .main-search .topbar nano-select {
   opacity: 1;
@@ -148,8 +143,7 @@
   opacity: 0;
 }
 .main-search .topbar__show-filters {
-  -webkit-margin-start: 0.5em;
-          margin-inline-start: 0.5em;
+  margin-inline-start: 0.5em;
   text-transform: uppercase;
   display: none;
   flex-direction: column;
@@ -162,8 +156,8 @@
   display: flex;
 }
 .main-search .topbar__filter-count {
-  width: 12px;
-  height: 12px;
+  inline-size: 12px;
+  block-size: 12px;
   box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);
   border: solid 1px #005c76;
   background-color: #005c76;
@@ -174,15 +168,14 @@
   align-items: center;
   justify-content: center;
   line-height: 1;
-  -webkit-margin-after: 3px;
-          margin-block-end: 3px;
+  margin-block-end: 3px;
 }
 .main-search__results {
   font-size: 14px;
   padding: 1em 40px;
   color: rgba(69, 85, 86, 0.85);
-  width: 70%;
-  height: 100%;
+  inline-size: 70%;
+  block-size: 100%;
 }
 @media (max-width: 576px) {
   .main-search__results {
@@ -190,7 +183,7 @@
   }
 }
 :host(.small) .main-search__results {
-  width: 100%;
+  inline-size: 100%;
 }
 .main-search__filters {
   outline: none;
@@ -201,13 +194,12 @@
 }
 @media (max-width: 576px) {
   .main-search__filters {
-    -webkit-padding-end: 20px;
-            padding-inline-end: 20px;
+    padding-inline-end: 20px;
   }
 }
 :host(:not(.small)) .main-search__filters {
-  max-width: 350px;
-  min-width: 220px;
+  max-inline-size: 350px;
+  min-inline-size: 220px;
 }
 
 .filters {
@@ -217,8 +209,8 @@
 }
 :host(.small) .filters {
   position: fixed;
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   z-index: 10;
   inset-block-start: 0;
   inset-inline-end: 0;
@@ -226,8 +218,8 @@
   background: none;
 }
 :host(.small) .filters.show {
-  height: 100vh;
-  width: 100vw;
+  block-size: 100vh;
+  inline-size: 100vw;
   transition: all 0s ease 0s;
 }
 :host(.small) .filters.show::after {
@@ -252,8 +244,7 @@
   margin-block: 0;
 }
 .filters__old-posts {
-  -webkit-margin-start: 1rem;
-          margin-inline-start: 1rem;
+  margin-inline-start: 1rem;
 }
 :host(.small) .filters-wrap {
   position: absolute;
@@ -261,14 +252,14 @@
   inset-inline-end: 0;
   background: #f7f6f6;
   transform: translateX(100%);
-  width: 300px;
-  min-width: 200px;
-  max-width: 80vw;
+  inline-size: 300px;
+  min-inline-size: 200px;
+  max-inline-size: 80vw;
   transition: transform 0.3s ease;
   padding: 1em;
   color: black;
   overflow: auto;
-  height: 100vh;
+  block-size: 100vh;
 }
 :host(.small) .filters.show .filters-wrap {
   transform: translateX(0%);
@@ -289,18 +280,13 @@
 }
 .filters nano-details strong[slot] {
   display: block;
-  -webkit-padding-start: calc(20px - 0.8em);
-          padding-inline-start: calc(20px - 0.8em);
+  padding-inline-start: calc(20px - 0.8em);
 }
 .filters nano-details nano-icon[slot=icon-end] {
-  -webkit-padding-start: calc(20px - 0.8em);
-          padding-inline-start: calc(20px - 0.8em);
-  -webkit-padding-end: calc(20px - 0.8em);
-          padding-inline-end: calc(20px - 0.8em);
+  padding-inline: calc(20px - 0.8em) calc(20px - 0.8em);
 }
 .filters li:last-child .filter-label {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  margin-block-end: 0;
 }
 .filters .filter-label {
   display: flex;
@@ -317,17 +303,17 @@
   border: 1px solid #007495;
   background: #fff;
   border-radius: 3px;
-  height: 1em;
-  width: 1em;
-  min-width: 1em;
-  min-height: 1em;
+  block-size: 1em;
+  inline-size: 1em;
+  min-inline-size: 1em;
+  min-block-size: 1em;
   display: inline-block;
 }
 .filters .filter-label::after {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='%23ffffff'%20d='M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'/></svg>");
   content: "";
-  height: 0.7em;
-  width: 0.7em;
+  block-size: 0.7em;
+  inline-size: 0.7em;
   position: absolute;
   inset-inline-start: 2px;
   inset-block-start: 50%;
@@ -358,12 +344,9 @@
 .filters-header {
   display: flex;
   align-items: center;
-  -webkit-border-after: 1px solid #90c6e7;
-          border-block-end: 1px solid #90c6e7;
-  -webkit-padding-after: 0.5rem;
-          padding-block-end: 0.5rem;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  border-block-end: 1px solid #90c6e7;
+  padding-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .filters-reset {
   color: #007495;
@@ -390,10 +373,8 @@
   text-decoration: none;
   display: flex;
   flex-flow: row wrap;
-  -webkit-padding-after: 14px;
-          padding-block-end: 14px;
-  -webkit-border-after: 1px solid #90c6e7;
-          border-block-end: 1px solid #90c6e7;
+  padding-block-end: 14px;
+  border-block-end: 1px solid #90c6e7;
 }
 .result * {
   word-wrap: break-word;
@@ -401,7 +382,7 @@
 }
 .result__title {
   margin: 1em 0 0.5em;
-  width: 70%;
+  inline-size: 70%;
   display: flex;
 }
 .result__title a {
@@ -414,30 +395,29 @@
 .result__title nano-icon {
   margin-inline: 0 0.5em;
   margin-block: 0;
-  min-width: 20px;
-  min-height: 20px;
+  min-inline-size: 20px;
+  min-block-size: 20px;
   opacity: 0.8;
 }
 @media (max-width: 992px) {
   .result__title {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 .result__body {
   color: #455556;
   font-size: 13px;
-  width: 70%;
+  inline-size: 70%;
   text-decoration: none;
 }
 @media (max-width: 992px) {
   .result__body {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 .result__pdf {
   display: inline-block;
-  -webkit-margin-start: 0.5rem;
-          margin-inline-start: 0.5rem;
+  margin-inline-start: 0.5rem;
   color: #b5aea7;
 }
 .result__meta {
@@ -446,27 +426,22 @@
   color: #455556;
   font-size: 11px;
   line-height: 13px;
-  width: 100%;
+  inline-size: 100%;
   align-items: center;
 }
 .result__meta > * {
-  -webkit-margin-before: 0.5rem;
-          margin-block-start: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 .result__meta > *:not(:last-child) {
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  padding-inline-end: 0;
 }
 .result__meta > *:not(:last-child)::after {
   content: "";
-  height: 1rem;
-  width: 1px;
+  block-size: 1rem;
+  inline-size: 1px;
   background: #90c6e7;
   display: inline-block;
-  -webkit-margin-start: 0.7rem;
-          margin-inline-start: 0.7rem;
-  -webkit-margin-end: 0.7rem;
-          margin-inline-end: 0.7rem;
+  margin-inline: 0.7rem 0.7rem;
 }
 @media (max-width: 576px) {
   .result__meta > *:not(:last-child)::after {
@@ -485,8 +460,7 @@
 }
 @media (max-width: 576px) {
   .result__tags {
-    -webkit-padding-start: 0;
-            padding-inline-start: 0;
+    padding-inline-start: 0;
   }
 }
 .result__tags-tag {
@@ -518,21 +492,18 @@
 }
 .result__source {
   color: #455556;
-  -webkit-padding-end: 0.75rem;
-          padding-inline-end: 0.75rem;
+  padding-inline-end: 0.75rem;
 }
 .result__authors {
   font-size: 12px;
   color: #455556;
-  -webkit-margin-after: 0.25rem;
-          margin-block-end: 0.25rem;
+  margin-block-end: 0.25rem;
   text-decoration: none;
-  width: 70%;
+  inline-size: 70%;
 }
 .result__buttons {
-  width: 70%;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  inline-size: 70%;
+  margin-block-end: 0.5rem;
 }
 .result__buttons-button {
   background-color: #007495;
@@ -545,20 +516,18 @@
   border: none;
 }
 .result__promo {
-  width: 70%;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  inline-size: 70%;
+  margin-block-end: 0.5rem;
   text-decoration: none;
   color: #455556;
 }
 .result__promo-box {
-  width: 300px;
+  inline-size: 300px;
   background-color: #e3eef1;
   padding: 12px 12px 8px 4px;
   display: flex;
   flex-flow: row nowrap;
-  -webkit-margin-before: 1rem;
-          margin-block-start: 1rem;
+  margin-block-start: 1rem;
 }
 .result__promo-bigdate {
   flex: 0 1 60px;
@@ -571,7 +540,7 @@
 }
 @media (max-width: 992px) {
   .result__promo-bigdate {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 .result__promo-bigdate span {
@@ -579,10 +548,8 @@
   display: block;
 }
 .result__promo-bigdate ~ div {
-  -webkit-padding-start: 1rem;
-          padding-inline-start: 1rem;
-  -webkit-border-start: 1px solid #c5dbe1;
-          border-inline-start: 1px solid #c5dbe1;
+  padding-inline-start: 1rem;
+  border-inline-start: 1px solid #c5dbe1;
 }
 .result__promo-date {
   font-size: 12px;
@@ -594,8 +561,7 @@
   color: #007495;
   position: relative;
   inset-block-start: 1px;
-  -webkit-padding-end: 2px;
-          padding-inline-end: 2px;
+  padding-inline-end: 2px;
 }
 .result__image {
   display: block;
@@ -604,15 +570,14 @@
   background-position: center;
   border-radius: 4px;
   position: relative;
-  width: 100%;
-  height: 150px;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  inline-size: 100%;
+  block-size: 150px;
+  margin-block-end: 0.5rem;
 }
 @media (min-width: 576px) {
   .result__image {
-    width: 142px;
-    height: 80px;
+    inline-size: 142px;
+    block-size: 80px;
   }
 }
 .result__image nano-icon {
@@ -633,14 +598,14 @@
   }
 }
 .result__video-body {
-  width: 70%;
+  inline-size: 70%;
   text-decoration: none;
   display: flex;
   flex-flow: row wrap;
 }
 @media (max-width: 992px) {
   .result__video-body {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 @media (max-width: 576px) {
@@ -649,18 +614,15 @@
   }
 }
 .result__video-body .result__body {
-  -webkit-padding-start: 1rem;
-          padding-inline-start: 1rem;
+  padding-inline-start: 1rem;
   display: flex;
   flex-direction: column;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  margin-block-end: 0;
   flex: 1;
 }
 @media (max-width: 576px) {
   .result__video-body .result__body {
-    -webkit-padding-start: 0;
-            padding-inline-start: 0;
+    padding-inline-start: 0;
   }
 }
 .result__video-body .result__body p {
@@ -673,8 +635,7 @@
   text-decoration: none;
 }
 .result__video-body .result__body .result__meta {
-  -webkit-margin-before: 0.5rem;
-          margin-block-start: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 .result__video-body .result__body .result__description {
   flex: 1 0 auto;
@@ -683,20 +644,17 @@
 .search-empty {
   padding: 3rem 0;
   text-align: center;
-  -webkit-border-before: 1px solid #e5eef1;
-          border-block-start: 1px solid #e5eef1;
+  border-block-start: 1px solid #e5eef1;
 }
 .search-empty h2 {
   color: #455556;
   font-size: 1.125rem;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .search-empty-icon {
   font-size: 7rem;
   --icon-color: #e4e6e8;
-  -webkit-margin-after: 2rem;
-          margin-block-end: 2rem;
+  margin-block-end: 2rem;
 }
 
 .search__highlight {

package/dist/collection/components/global-search-results/global-search-results.js

@@ -38,6 +38,7 @@ export class GlobalSearchResults {
     if (!this.index || !this.algoliaEle)
       return;
     this.algoliaEle.searchIndex = this.index;
+    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
   }
   handleGlobalNavReset(e) {
     if (e.target.tagName !== 'NANO-GLOBAL-NAV')
@@ -166,7 +167,6 @@ export class GlobalSearchResults {
       this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
   }
   componentDidLoad() {
-    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
     if (!window['ResizeObserver'])
       return;
     this.ro = new ResizeObserver((entries) => {
@@ -179,7 +179,7 @@ export class GlobalSearchResults {
     this.ro.observe(this.el);
   }
   render() {
-    return (h(Host, { class: { small: this.currentWidth < 677 }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { "store-id": "searchq", "store-method": "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => (this.algoliaEle = ele), id: "main-search" }, h("template", { slot: "template" }, 
+    return (h(Host, { class: { small: this.currentWidth < 677 }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : undefined }, h("nano-algolia", { "store-id": "searchq", "store-method": "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("template", { slot: "template" }, 
     /* html */ `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">