202 mobile search changes

assets/css/common.scss

@@ -4,11 +4,15 @@
 *:focus {
     outline: none;
 }
-
 :root {
   font-family: Verdana, sans-serif;
   line-height: 1.6em;
 }
+// NOTE: chrome specific
+// https://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only
+.selector:not(*:root), :root {
+  font-size: 0.85em;
+}
 .site-header {
   position: fixed;
   left: 0;

assets/css/search.scss

@@ -40,6 +40,8 @@
       grid-column-gap: 0;
       grid-template-rows: auto;
       padding: 1em;
+      min-height:0;
+      padding-right: 0.5em;
     }
     .search-container main {
       padding: 0;
@@ -53,4 +55,20 @@
       grid-row-start: 2;
       background-color: var(--lightNeutralColor);
     }
+    .search-container vivo-filter-clearer {
+      display: none;
+    }
+
+    .search-container vivo-facet-group-toggle {
+      float:right;
+      height: 1em;
+    }
+
+    .search-container vivo-tab {
+        width: 85%;
+        color: var(--textColor);
+        padding-top:0;
+        padding-left: 0;
+        border-top: none;
+    }
   }

assets/js/elements/tab-panel.js

@@ -22,7 +22,6 @@ class TabPanel extends LitElement {
     }
 
     :host([vivo-tab-style="secondary"]) {
-      border-top: 1px solid var(--mediumNeutralColor);
       border-top: none;
     }
     @media (max-width: 45em) {

assets/js/elements/tab.js

@@ -39,7 +39,6 @@ class Tab extends LitElement {
         opacity: 100%;
       }
 
-
       .fas { display: none; }
       @media (max-width: 45em) {
         .fas {

assets/js/search/facet-group-toggle.js

@@ -12,6 +12,7 @@ class SearchFacetGroupToggle extends LitElement {
         super();
         this.shown = false;
         this.handleToggleFilters = this.handleToggleFilters.bind(this);
+        this.handleClearFilters = this.handleClearFilters.bind(this);
     }
 
     static get styles() {
@@ -25,30 +26,41 @@ class SearchFacetGroupToggle extends LitElement {
         a:hover {
           cursor: pointer;
         }
+
         @media screen and (max-width: 1000px) {
-            :host { display: inline; }
+            :host { display: block; }
+            div { display: flex; }
+            :host ::slotted([slot=clear]) {
+                display:none;
+            }
+            :host([shown]) {
+                display:block;
+                width: 100%;
+            }   
             :host .fa-filter::before {
                 font-family: 'Font Awesome 5 Free';
                 font-weight: 900;
                 content: "\\f0b0";
                 font-style: normal;
             }
-            :host ::slotted([slot="show"]) {
-                display: inline;
-            }
-            :host ::slotted([slot="hide"]) {
-                display: none;
-            }
-            :host([shown]) ::slotted([slot="show"]) {
-                display: none;
-            }
-            :host([shown]) ::slotted([slot="hide"]) {
-                display: inline;
+            :host([shown]) ::slotted([slot=clear]) {
+                display:block; 
+                flex-grow: 4;
+                font-weight: bold;
             }
         }        
         `
     }
 
+    handleClearFilters(e) {
+        this.dispatchEvent(new CustomEvent('removeFilters', {
+            detail: { clear: true }, // not sure what to put
+            bubbles: true,
+            cancelable: false,
+            composed: true
+        }));
+    }
+
     handleToggleFilters(e) {
         this.dispatchEvent(new CustomEvent('toggleFilters', {
             detail: { show: !this.shown }, // not sure what to put
@@ -57,15 +69,19 @@ class SearchFacetGroupToggle extends LitElement {
             composed: true
         }));
         this.shown = !this.shown;
+
+        this.toggleOptions();
     }
 
     render() {
         return html`
-        <button @click="${this.handleToggleFilters}">
-          <i class="fas fa-filter"></i> 
-          <slot name="show"></slot>
-          <slot name="hide"></slot>
-        </button>`
+        <div>
+          <slot name="clear" @click="${this.handleClearFilters}"></slot>
+          <button @click="${this.handleToggleFilters}">
+            <i class="fas fa-filter"></i> 
+          </button>
+        </div>
+        `
     }
 }
 

assets/js/search/facet-popup.js

@@ -314,7 +314,7 @@ class FacetPopupBox extends Faceter(LitElement) {
         overflow-x: hidden;
         scrollbar-base-color:#ffeaff;
         min-height: unset;
-        max-height: 85%;
+        max-height: 65%;
         font-size: unset;
       }
     }

assets/js/search/grants/grant-search.js

@@ -145,6 +145,27 @@ class GrantSearch extends Searcher(LitElement) {
         .grants {
             padding: 1em;
         }
+        @media screen and (max-width: 1000px) {
+            .grants {
+                padding-left: 0;
+                padding-right: 0;
+            }
+            .search-actions {
+                display: flex;
+                flex-direction: column;
+                padding-left: 0;
+                padding-right: 0;
+            }
+            ::slotted(vivo-search-sort-options) {
+                flex-basis: auto;
+                flex-grow: 1;
+                text-align: left;
+            }
+            ::slotted(vivo-pagination-summary) {
+               flex-basis; auto;
+               flex-grow: 1;
+            }
+        }
       `
     }
 

assets/js/search/pagination-summary.js

@@ -17,6 +17,17 @@ class SearchPaginationSummary extends LitElement {
     this.coordinator = this.closest('vivo-search-coordinator');
   }
 
+  static get styles() {
+    return css`
+    @media screen and (max-width: 1000px) {
+      span {
+        display:none;
+        font-size: 0.85em;
+      }
+    }   
+    `
+  }
+
   render() {
     let pagingText = html``;
 

assets/js/search/pagination.js

@@ -54,6 +54,15 @@ class SearchPagination extends LitElement {
         background-color: #337ab7;
         color: #fff;
       }
+      @media screen and (max-width: 1000px) {
+        :host {
+          font-size: 0.9em;
+        }
+        li a {
+          padding: 4px 10px;
+        }
+      }   
+
     `
   }
 

assets/js/search/people/person-image.js

@@ -1,30 +1,36 @@
 import { LitElement, html, css } from "lit-element";
 
 class PersonImage extends LitElement {
-    static get properties() {
-      return {
-        thumbnail: { type: String }
-      }
+  static get properties() {
+    return {
+      thumbnail: { type: String }
     }
-
-    static get styles() {
-      return css`
+  }
+
+  static get styles() {
+    return css`
       .img-thumbnail {
         border: 3px solid #F3F2F1;
+        width: 130px;
+      }
+
+      @media screen and (max-width: 1000px) {
+        .img-thumbnail {
+          width: 110px;
+        }
       }
     `
   }
-    render() {
-      // TODO: how to get 'assetPath' in here?
-      var url = `${defaultProfileImage}`;
 
-      if (this.thumbnail != "null") {
-        url = `${this.thumbnail}`;
-      }
-      return html`
-          <img class="img-thumbnail" width="130" src="${url}" />
-          `
+  render() {
+    var url = `${defaultProfileImage}`;
+
+    if (this.thumbnail != "null") {
+      url = `${this.thumbnail}`;
     }
+    return html`
+          <img class="img-thumbnail" src="${url}" />
+          `
   }
-  customElements.define('vivo-person-card-image', PersonImage);
-  
+}
+customElements.define('vivo-person-card-image', PersonImage);

assets/js/search/people/person-search.js

@@ -53,6 +53,27 @@ class PersonSearch extends Searcher(LitElement) {
         #overview {
             width: 75%;
         }
+        @media screen and (max-width: 1000px) {
+            .people {
+                padding-left: 0;
+                padding-right: 0;
+            }
+            .search-actions {
+                display: flex;
+                flex-direction: column;
+                padding-left: 0;
+                padding-right: 0;
+            }
+            ::slotted(vivo-search-sort-options) {
+                flex-basis: auto;
+                flex-grow: 1;
+                text-align: left;
+            }
+            ::slotted(vivo-pagination-summary) {
+                flex-basis; auto;
+                flex-grow: 1;
+            }
+        }
       `
     }
 

assets/js/search/publications/publication-search.js

@@ -37,6 +37,27 @@ class PublicationSearch extends Searcher(LitElement) {
           flex-basis:35%;
           text-align: right;
         }
+        @media screen and (max-width: 1000px) {
+          .publications {
+              padding-left: 0;
+              padding-right: 0;
+          }
+          .search-actions {
+              display: flex;
+              flex-direction: column;
+              padding-left: 0;
+              padding-right: 0;
+          }
+          ::slotted(vivo-search-sort-options) {
+              flex-basis: auto;
+              flex-grow: 1;
+              text-align: left;
+          }
+          ::slotted(vivo-pagination-summary) {
+             flex-basis; auto;
+             flex-grow: 1;
+          }
+      }
       `
     }
 

locales/all.de-de.yaml

@@ -138,3 +138,11 @@
   translation: "von"
 - id: filter_authors
   translation: "Filter Autoren"
+- id: filter
+  translation: "Filter"   
+- id: show
+  translation: "Anzeigen"
+- id: hide
+  translation: "Verbergen"
+- id: reset
+  translation: "Zurücksetzen"   

locales/all.en-us.yaml

@@ -139,4 +139,12 @@
   translation: "of"
 - id: filter_authors
   translation: "Filter Authors"
+- id: filter
+  translation: "Filter"  
+- id: show
+  translation: "Show"
+- id: hide
+  translation: "Hide"
+- id: reset
+  translation: "Reset"
 

locales/all.fr-fr.yaml

@@ -129,5 +129,13 @@
 - id: date_descending
   translation: "Date (décroissant)"
 - id: filter_authors
-  translation: "filtre Auteurs"
+  translation: "Filtre Auteurs"
+- id: filter
+  translation: "Filtre"
+- id: show
+  translation: "Afficher"
+- id: hide
+  translation: "Masquer"
+- id: reset
+  translation: "Réinitialiser"  
 

locales/all.it-it.yaml

@@ -130,3 +130,11 @@
   translation: "Data (decrescente)"
 - id: filter_authors
   translation: "Filtro Autori"
+- id: filter
+  translation: "Filtro"
+- id: show
+  translation: "Mostra"
+- id: hide
+  translation: "Nascondi"
+- id: reset
+  translation: "Ripristina"  

templates/search_pages/index.html

@@ -123,8 +123,9 @@ <h4><%= t("funding_source") %></h4>
 
       <!-- NOTE: only seen on smaller screens -->
       <vivo-facet-group-toggle>
-        <span slot="show"><%= t("show_filters") %></span>
-        <span slot="hide"><%= t("hide_filters") %></span>
+        <div slot="clear">
+          <span>&lt; <%= t("reset_search_filters") %></span>
+        </div>
       </vivo-facet-group-toggle>
 
       <vivo-tabs id="all-search-tabs" vivo-tab-style="secondary">