From 03d1b4e5ea7f58668fb052d883fc27aacfed4edc Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 09:09:15 -0400
Subject: [PATCH 01/13] #202: move width of image up to css

---
 assets/js/search/people/person-image.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/js/search/people/person-image.js b/assets/js/search/people/person-image.js
index aa0af6f..d53e7e9 100644
--- a/assets/js/search/people/person-image.js
+++ b/assets/js/search/people/person-image.js
@@ -11,6 +11,7 @@ class PersonImage extends LitElement {
       return css`
       .img-thumbnail {
         border: 3px solid #F3F2F1;
+        width: 130px;
       }
     `
   }
@@ -22,7 +23,7 @@ class PersonImage extends LitElement {
         url = `${this.thumbnail}`;
       }
       return html`
-          <img class="img-thumbnail" width="130" src="${url}" />
+          <img class="img-thumbnail" src="${url}" />
           `
     }
   }

From dd8109440ba0ca71a6a2698e5e59954d28ac9ddc Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 09:09:36 -0400
Subject: [PATCH 02/13] #202: add chrome specific smaller base font

---
 assets/css/common.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/css/common.scss b/assets/css/common.scss
index 6b5c488..591f372 100644
--- a/assets/css/common.scss
+++ b/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;

From 0c5ff0d3e61b823cd1d63194eb169ce839ca25cd Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 09:10:35 -0400
Subject: [PATCH 03/13] #202: move person image width back to attribute

---
 assets/js/search/people/person-image.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/js/search/people/person-image.js b/assets/js/search/people/person-image.js
index d53e7e9..aa0af6f 100644
--- a/assets/js/search/people/person-image.js
+++ b/assets/js/search/people/person-image.js
@@ -11,7 +11,6 @@ class PersonImage extends LitElement {
       return css`
       .img-thumbnail {
         border: 3px solid #F3F2F1;
-        width: 130px;
       }
     `
   }
@@ -23,7 +22,7 @@ class PersonImage extends LitElement {
         url = `${this.thumbnail}`;
       }
       return html`
-          <img class="img-thumbnail" src="${url}" />
+          <img class="img-thumbnail" width="130" src="${url}" />
           `
     }
   }

From 15c55987f56a5641642eba39de689d1506b38dba Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 11:25:52 -0400
Subject: [PATCH 04/13] #202: improve look of mobile search slightly

---
 assets/css/search.scss                        |  1 +
 assets/js/search/facet-group-toggle.js        |  2 ++
 assets/js/search/facet-popup.js               |  2 +-
 assets/js/search/grants/grant-search.js       | 21 ++++++++++++
 assets/js/search/pagination-summary.js        | 12 +++++++
 assets/js/search/people/person-image.js       | 34 +++++++++----------
 assets/js/search/people/person-search.js      | 21 ++++++++++++
 .../search/publications/publication-search.js | 21 ++++++++++++
 locales/all.de-de.yaml                        |  2 ++
 locales/all.en-us.yaml                        |  2 ++
 locales/all.fr-fr.yaml                        |  4 ++-
 locales/all.it-it.yaml                        |  2 ++
 12 files changed, 105 insertions(+), 19 deletions(-)

diff --git a/assets/css/search.scss b/assets/css/search.scss
index d05ee25..8ebaeb9 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -40,6 +40,7 @@
       grid-column-gap: 0;
       grid-template-rows: auto;
       padding: 1em;
+      min-height:0;
     }
     .search-container main {
       padding: 0;
diff --git a/assets/js/search/facet-group-toggle.js b/assets/js/search/facet-group-toggle.js
index 56c5c90..bf68767 100644
--- a/assets/js/search/facet-group-toggle.js
+++ b/assets/js/search/facet-group-toggle.js
@@ -27,12 +27,14 @@ class SearchFacetGroupToggle extends LitElement {
         }
         @media screen and (max-width: 1000px) {
             :host { display: inline; }
+            /*
             :host .fa-filter::before {
                 font-family: 'Font Awesome 5 Free';
                 font-weight: 900;
                 content: "\\f0b0";
                 font-style: normal;
             }
+            */
             :host ::slotted([slot="show"]) {
                 display: inline;
             }
diff --git a/assets/js/search/facet-popup.js b/assets/js/search/facet-popup.js
index 9bef630..0aeb8cf 100644
--- a/assets/js/search/facet-popup.js
+++ b/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;
       }
     }
diff --git a/assets/js/search/grants/grant-search.js b/assets/js/search/grants/grant-search.js
index 627f7cf..3ea1cdb 100644
--- a/assets/js/search/grants/grant-search.js
+++ b/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;
+            }
+        }
       `
     }
 
diff --git a/assets/js/search/pagination-summary.js b/assets/js/search/pagination-summary.js
index b6eb60c..4409711 100644
--- a/assets/js/search/pagination-summary.js
+++ b/assets/js/search/pagination-summary.js
@@ -17,6 +17,18 @@ class SearchPaginationSummary extends LitElement {
     this.coordinator = this.closest('vivo-search-coordinator');
   }
 
+  static get styles() {
+    // TODO: should make link color etc...
+    return css`
+    @media screen and (max-width: 1000px) {
+      span {
+        display:none;
+        font-size: 0.85em;
+      }
+    }   
+    `
+  }
+
   render() {
     let pagingText = html``;
 
diff --git a/assets/js/search/people/person-image.js b/assets/js/search/people/person-image.js
index aa0af6f..f380cc7 100644
--- a/assets/js/search/people/person-image.js
+++ b/assets/js/search/people/person-image.js
@@ -1,30 +1,30 @@
 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;
       }
     `
   }
-    render() {
-      // TODO: how to get 'assetPath' in here?
-      var url = `${defaultProfileImage}`;
 
-      if (this.thumbnail != "null") {
-        url = `${this.thumbnail}`;
-      }
-      return html`
+  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}" />
           `
-    }
   }
-  customElements.define('vivo-person-card-image', PersonImage);
-  
\ No newline at end of file
+}
+customElements.define('vivo-person-card-image', PersonImage);
diff --git a/assets/js/search/people/person-search.js b/assets/js/search/people/person-search.js
index 9af5cca..661f1f7 100644
--- a/assets/js/search/people/person-search.js
+++ b/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;
+            }
+        }
       `
     }
 
diff --git a/assets/js/search/publications/publication-search.js b/assets/js/search/publications/publication-search.js
index 00d785a..faced88 100644
--- a/assets/js/search/publications/publication-search.js
+++ b/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;
+          }
+      }
       `
     }
   
diff --git a/locales/all.de-de.yaml b/locales/all.de-de.yaml
index d908e8c..a0b1a06 100644
--- a/locales/all.de-de.yaml
+++ b/locales/all.de-de.yaml
@@ -138,3 +138,5 @@
   translation: "von"
 - id: filter_authors
   translation: "Filter Autoren"
+- id: filter
+  translation: "Filter"    
diff --git a/locales/all.en-us.yaml b/locales/all.en-us.yaml
index 827ffc1..8389a4b 100644
--- a/locales/all.en-us.yaml
+++ b/locales/all.en-us.yaml
@@ -139,4 +139,6 @@
   translation: "of"
 - id: filter_authors
   translation: "Filter Authors"
+- id: filter
+  translation: "Filter"  
 
diff --git a/locales/all.fr-fr.yaml b/locales/all.fr-fr.yaml
index 924fa49..2494c0e 100644
--- a/locales/all.fr-fr.yaml
+++ b/locales/all.fr-fr.yaml
@@ -129,5 +129,7 @@
 - id: date_descending
   translation: "Date (décroissant)"
 - id: filter_authors
-  translation: "filtre Auteurs"
+  translation: "Filtre Auteurs"
+- id: filter
+  translation: "Filtre"    
   
diff --git a/locales/all.it-it.yaml b/locales/all.it-it.yaml
index 886ade4..de24028 100644
--- a/locales/all.it-it.yaml
+++ b/locales/all.it-it.yaml
@@ -130,3 +130,5 @@
   translation: "Data (decrescente)"
 - id: filter_authors
   translation: "Filtro Autori"
+- id: filter
+  translation: "Filtro"  

From 20272414c62642f14d134ddd7f4b515174b95682 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 12:02:19 -0400
Subject: [PATCH 05/13] #202: work out some details for a more compact mobile
 search view

---
 assets/css/search.scss                  |  9 ++++++++
 assets/js/elements/tab-panel.js         |  4 +++-
 assets/js/elements/tab.js               | 28 +++++++++++++++++++++++++
 assets/js/search/facet-group-toggle.js  |  4 ++--
 assets/js/search/people/person-image.js |  9 +++++++-
 templates/search_pages/index.html       |  6 +++---
 6 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/assets/css/search.scss b/assets/css/search.scss
index 8ebaeb9..f37f3c4 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -46,6 +46,8 @@
       padding: 0;
       grid-column-start: 1;
       grid-row-start: 1;
+      display: flex;
+      justify-content: flex-end; 
     }
     .search-container aside {
       padding: 0;
@@ -54,4 +56,11 @@
       grid-row-start: 2;
       background-color: var(--lightNeutralColor);
     }
+    .search-container vivo-filter-clearer {
+      display: none;
+    }
+
+    .search-container vivo-facet-group-toggle {
+      order: 2;
+    }
   }
\ No newline at end of file
diff --git a/assets/js/elements/tab-panel.js b/assets/js/elements/tab-panel.js
index 6fcbb32..9290d55 100644
--- a/assets/js/elements/tab-panel.js
+++ b/assets/js/elements/tab-panel.js
@@ -22,7 +22,9 @@ class TabPanel extends LitElement {
     }
 
     :host([vivo-tab-style="secondary"]) {
-      border-top: 1px solid var(--mediumNeutralColor);
+      border-top: none;
+    }
+    :host([vivo-tab-style="combo"]) {
       border-top: none;
     }
     @media (max-width: 45em) {
diff --git a/assets/js/elements/tab.js b/assets/js/elements/tab.js
index 26c8d4d..505283d 100644
--- a/assets/js/elements/tab.js
+++ b/assets/js/elements/tab.js
@@ -39,6 +39,22 @@ class Tab extends LitElement {
         opacity: 100%;
       }
 
+      :host([vivo-tab-style="combo"]) {
+        color: var(--textColor);
+        background-color: transparent;
+        padding: .5rem 3rem;
+        opacity: 25%;
+      }
+      :host([vivo-tab-style="combo"]:hover) {
+        color: var(--textColor);
+        border-bottom: 3px solid var(--textColor);
+      }
+      :host([vivo-tab-style="combo"][selected]) {
+        color: var(--textColor);
+        border-bottom: 3px solid var(--textColor);
+        opacity: 100%;
+      }
+
 
       .fas { display: none; }
       @media (max-width: 45em) {
@@ -76,6 +92,18 @@ class Tab extends LitElement {
           color: var(--textColor);
         }
       }
+
+      @media screen and (max-width: 1000px) {
+        :host([vivo-tab-style="combo"]) {
+          width: 90%;
+          color: var(--textColor);
+          padding-top:0;
+          border-top: none;
+        }
+        :host([vivo-tab-style="combo"]) {
+          padding-top:0;
+        }
+      }
     `
   }
 
diff --git a/assets/js/search/facet-group-toggle.js b/assets/js/search/facet-group-toggle.js
index bf68767..f89853a 100644
--- a/assets/js/search/facet-group-toggle.js
+++ b/assets/js/search/facet-group-toggle.js
@@ -27,14 +27,14 @@ class SearchFacetGroupToggle extends LitElement {
         }
         @media screen and (max-width: 1000px) {
             :host { display: inline; }
-            /*
+            
             :host .fa-filter::before {
                 font-family: 'Font Awesome 5 Free';
                 font-weight: 900;
                 content: "\\f0b0";
                 font-style: normal;
             }
-            */
+            
             :host ::slotted([slot="show"]) {
                 display: inline;
             }
diff --git a/assets/js/search/people/person-image.js b/assets/js/search/people/person-image.js
index f380cc7..1843b31 100644
--- a/assets/js/search/people/person-image.js
+++ b/assets/js/search/people/person-image.js
@@ -11,6 +11,13 @@ class PersonImage extends LitElement {
     return css`
       .img-thumbnail {
         border: 3px solid #F3F2F1;
+        width: 130px;
+      }
+
+      @media screen and (max-width: 1000px) {
+        .img-thumbnail {
+          width: 110px;
+        }
       }
     `
   }
@@ -23,7 +30,7 @@ class PersonImage extends LitElement {
       url = `${this.thumbnail}`;
     }
     return html`
-          <img class="img-thumbnail" width="130" src="${url}" />
+          <img class="img-thumbnail" src="${url}" />
           `
   }
 }
diff --git a/templates/search_pages/index.html b/templates/search_pages/index.html
index ade9486..feb84b8 100644
--- a/templates/search_pages/index.html
+++ b/templates/search_pages/index.html
@@ -123,11 +123,11 @@ <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>
+        <span slot="show"></span>
+        <span slot="hide"></span>
       </vivo-facet-group-toggle>
 
-      <vivo-tabs id="all-search-tabs" vivo-tab-style="secondary">
+      <vivo-tabs id="all-search-tabs" vivo-tab-style="combo">
         <vivo-tab id="person-search-tab">
           <%= t("people") %> (<span id="person-search-count">0</span>)
         </vivo-tab>

From 6862380721d478e33984918c2ab0212d2d323560 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 15:17:55 -0400
Subject: [PATCH 06/13] #202: possible compact mobile design

---
 assets/css/search.scss                 |  1 +
 assets/js/search/facet-group-toggle.js | 66 ++++++++++++++++++++++++--
 locales/all.de-de.yaml                 |  8 +++-
 locales/all.en-us.yaml                 |  6 +++
 locales/all.fr-fr.yaml                 |  8 +++-
 locales/all.it-it.yaml                 |  8 +++-
 templates/search_pages/index.html      |  5 +-
 7 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/assets/css/search.scss b/assets/css/search.scss
index f37f3c4..9c9e69e 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -41,6 +41,7 @@
       grid-template-rows: auto;
       padding: 1em;
       min-height:0;
+      padding-right: 0.5em;
     }
     .search-container main {
       padding: 0;
diff --git a/assets/js/search/facet-group-toggle.js b/assets/js/search/facet-group-toggle.js
index f89853a..0dfa5a9 100644
--- a/assets/js/search/facet-group-toggle.js
+++ b/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,6 +26,9 @@ class SearchFacetGroupToggle extends LitElement {
         a:hover {
           cursor: pointer;
         }
+
+
+
         @media screen and (max-width: 1000px) {
             :host { display: inline; }
             
@@ -35,8 +39,30 @@ class SearchFacetGroupToggle extends LitElement {
                 font-style: normal;
             }
             
+            #menu {
+                display: none;
+            }
+            #menu.open {
+                display: block;
+                color: var(--textColor);
+                background-color: var(--lightNeutralColor);  
+            }
+            #menu.open ul {
+                list-style: none;
+                padding-left: 8px;
+                padding-right: 4px;
+                margin-top: 0;
+            }
+            #menu.open ul li {
+                font-weight: bold;
+            }
+            :host ::slotted([slot="clear"]) {
+                cursor: pointer;
+                display: inline;
+            }
             :host ::slotted([slot="show"]) {
                 display: inline;
+                cursor: pointer;
             }
             :host ::slotted([slot="hide"]) {
                 display: none;
@@ -46,12 +72,35 @@ class SearchFacetGroupToggle extends LitElement {
             }
             :host([shown]) ::slotted([slot="hide"]) {
                 display: inline;
+                cursor: pointer;
             }
         }        
         `
     }
 
+    toggleOptions() {   
+        const showMenu = this.shadowRoot.querySelector("#menu");
+        if (showMenu.classList.contains('open')){
+          showMenu.classList.remove('open');
+        } else {
+          showMenu.classList.add('open');
+        }
+    }
+
+    handleClearFilters(e) {
+        this.dispatchEvent(new CustomEvent('removeFilters', {
+            detail: { clear: true }, // not sure what to put
+            bubbles: true,
+            cancelable: false,
+            composed: true
+        }));
+
+        this.toggleOptions();
+    }
+
     handleToggleFilters(e) {
+        
+        // actually show menu instead ...
         this.dispatchEvent(new CustomEvent('toggleFilters', {
             detail: { show: !this.shown }, // not sure what to put
             bubbles: true,
@@ -59,15 +108,24 @@ class SearchFacetGroupToggle extends LitElement {
             composed: true
         }));
         this.shown = !this.shown;
+
+        this.toggleOptions();
     }
 
+    //<button @click="${this.handleToggleFilters}">
     render() {
         return html`
-        <button @click="${this.handleToggleFilters}">
+        <button @click="${this.toggleOptions}">
           <i class="fas fa-filter"></i> 
-          <slot name="show"></slot>
-          <slot name="hide"></slot>
-        </button>`
+        </button>
+        <div id="menu">
+          <ul>
+            <li><slot name="show" @click="${this.handleToggleFilters}"></slot></li>
+            <li><slot name="hide" @click="${this.handleToggleFilters}"></slot></li>
+            <li><slot name="clear" @click="${this.handleClearFilters}"></slot></li>
+          </ul>
+        </div>
+        `
     }
 }
 
diff --git a/locales/all.de-de.yaml b/locales/all.de-de.yaml
index a0b1a06..8ff4d31 100644
--- a/locales/all.de-de.yaml
+++ b/locales/all.de-de.yaml
@@ -139,4 +139,10 @@
 - id: filter_authors
   translation: "Filter Autoren"
 - id: filter
-  translation: "Filter"    
+  translation: "Filter"   
+- id: show
+  translation: "Anzeigen"
+- id: hide
+  translation: "Verbergen"
+- id: reset
+  translation: "Zurücksetzen"   
diff --git a/locales/all.en-us.yaml b/locales/all.en-us.yaml
index 8389a4b..b55557b 100644
--- a/locales/all.en-us.yaml
+++ b/locales/all.en-us.yaml
@@ -141,4 +141,10 @@
   translation: "Filter Authors"
 - id: filter
   translation: "Filter"  
+- id: show
+  translation: "Show"
+- id: hide
+  translation: "Hide"
+- id: reset
+  translation: "Reset"
 
diff --git a/locales/all.fr-fr.yaml b/locales/all.fr-fr.yaml
index 2494c0e..d0587d0 100644
--- a/locales/all.fr-fr.yaml
+++ b/locales/all.fr-fr.yaml
@@ -131,5 +131,11 @@
 - id: filter_authors
   translation: "Filtre Auteurs"
 - id: filter
-  translation: "Filtre"    
+  translation: "Filtre"
+- id: show
+  translation: "Afficher"
+- id: hide
+  translation: "Masquer"
+- id: reset
+  translation: "Réinitialiser"  
   
diff --git a/locales/all.it-it.yaml b/locales/all.it-it.yaml
index de24028..f646092 100644
--- a/locales/all.it-it.yaml
+++ b/locales/all.it-it.yaml
@@ -131,4 +131,10 @@
 - id: filter_authors
   translation: "Filtro Autori"
 - id: filter
-  translation: "Filtro"  
+  translation: "Filtro"
+- id: show
+  translation: "Mostra"
+- id: hide
+  translation: "Nascondi"
+- id: reset
+  translation: "Ripristina"  
diff --git a/templates/search_pages/index.html b/templates/search_pages/index.html
index feb84b8..06b67a8 100644
--- a/templates/search_pages/index.html
+++ b/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"></span>
-        <span slot="hide"></span>
+        <span slot="show"><%= t("show") %></span>
+        <span slot="hide"><%= t("hide") %></span>
+        <span slot="clear"><%= t("reset") %></span>
       </vivo-facet-group-toggle>
 
       <vivo-tabs id="all-search-tabs" vivo-tab-style="combo">

From 39de91576f8ff88f2144928c568c4e6e44e831c0 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Thu, 14 May 2020 15:39:20 -0400
Subject: [PATCH 07/13] #202: few more mobile tweaks for tabs and pagination

---
 assets/js/elements/tab.js      | 4 +---
 assets/js/search/pagination.js | 9 +++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/assets/js/elements/tab.js b/assets/js/elements/tab.js
index 505283d..79b3b13 100644
--- a/assets/js/elements/tab.js
+++ b/assets/js/elements/tab.js
@@ -98,11 +98,9 @@ class Tab extends LitElement {
           width: 90%;
           color: var(--textColor);
           padding-top:0;
+          padding-left: 0;
           border-top: none;
         }
-        :host([vivo-tab-style="combo"]) {
-          padding-top:0;
-        }
       }
     `
   }
diff --git a/assets/js/search/pagination.js b/assets/js/search/pagination.js
index 94d6f94..67dd963 100644
--- a/assets/js/search/pagination.js
+++ b/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;
+        }
+      }   
+
     `
   }
 

From 568b472d4bdb5e3419953ca02cfb7d48b2abad58 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Fri, 15 May 2020 11:25:37 -0400
Subject: [PATCH 08/13] #202: remove one css line

---
 assets/css/search.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/css/search.scss b/assets/css/search.scss
index 9c9e69e..4222ca2 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -48,7 +48,6 @@
       grid-column-start: 1;
       grid-row-start: 1;
       display: flex;
-      justify-content: flex-end; 
     }
     .search-container aside {
       padding: 0;

From 2842ce5b7cdbdc65382374a9ae06a33085b12cb9 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Tue, 19 May 2020 11:37:42 -0400
Subject: [PATCH 09/13] #202: take away toggle facets button drop-down

---
 assets/css/search.scss                 |  4 +-
 assets/js/elements/tab.js              |  2 +-
 assets/js/search/facet-group-toggle.js | 77 +++-----------------------
 3 files changed, 12 insertions(+), 71 deletions(-)

diff --git a/assets/css/search.scss b/assets/css/search.scss
index 4222ca2..3587be0 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -47,7 +47,6 @@
       padding: 0;
       grid-column-start: 1;
       grid-row-start: 1;
-      display: flex;
     }
     .search-container aside {
       padding: 0;
@@ -61,6 +60,7 @@
     }
 
     .search-container vivo-facet-group-toggle {
-      order: 2;
+      float:right;
+      height: 1em;
     }
   }
\ No newline at end of file
diff --git a/assets/js/elements/tab.js b/assets/js/elements/tab.js
index 79b3b13..d8f7982 100644
--- a/assets/js/elements/tab.js
+++ b/assets/js/elements/tab.js
@@ -95,7 +95,7 @@ class Tab extends LitElement {
 
       @media screen and (max-width: 1000px) {
         :host([vivo-tab-style="combo"]) {
-          width: 90%;
+          width: 85%;
           color: var(--textColor);
           padding-top:0;
           padding-left: 0;
diff --git a/assets/js/search/facet-group-toggle.js b/assets/js/search/facet-group-toggle.js
index 0dfa5a9..2694936 100644
--- a/assets/js/search/facet-group-toggle.js
+++ b/assets/js/search/facet-group-toggle.js
@@ -27,77 +27,26 @@ class SearchFacetGroupToggle extends LitElement {
           cursor: pointer;
         }
 
-
-
         @media screen and (max-width: 1000px) {
             :host { display: inline; }
-            
+            :host([shown]) {
+                display:block;
+                margin-left: 85%;
+            }
+            :host([shown]) vivo-filter-clearer {
+                display:block;
+                margin-left: 85%;
+            }
             :host .fa-filter::before {
                 font-family: 'Font Awesome 5 Free';
                 font-weight: 900;
                 content: "\\f0b0";
                 font-style: normal;
             }
-            
-            #menu {
-                display: none;
-            }
-            #menu.open {
-                display: block;
-                color: var(--textColor);
-                background-color: var(--lightNeutralColor);  
-            }
-            #menu.open ul {
-                list-style: none;
-                padding-left: 8px;
-                padding-right: 4px;
-                margin-top: 0;
-            }
-            #menu.open ul li {
-                font-weight: bold;
-            }
-            :host ::slotted([slot="clear"]) {
-                cursor: pointer;
-                display: inline;
-            }
-            :host ::slotted([slot="show"]) {
-                display: inline;
-                cursor: pointer;
-            }
-            :host ::slotted([slot="hide"]) {
-                display: none;
-            }
-            :host([shown]) ::slotted([slot="show"]) {
-                display: none;
-            }
-            :host([shown]) ::slotted([slot="hide"]) {
-                display: inline;
-                cursor: pointer;
-            }
         }        
         `
     }
 
-    toggleOptions() {   
-        const showMenu = this.shadowRoot.querySelector("#menu");
-        if (showMenu.classList.contains('open')){
-          showMenu.classList.remove('open');
-        } else {
-          showMenu.classList.add('open');
-        }
-    }
-
-    handleClearFilters(e) {
-        this.dispatchEvent(new CustomEvent('removeFilters', {
-            detail: { clear: true }, // not sure what to put
-            bubbles: true,
-            cancelable: false,
-            composed: true
-        }));
-
-        this.toggleOptions();
-    }
-
     handleToggleFilters(e) {
         
         // actually show menu instead ...
@@ -112,19 +61,11 @@ class SearchFacetGroupToggle extends LitElement {
         this.toggleOptions();
     }
 
-    //<button @click="${this.handleToggleFilters}">
     render() {
         return html`
-        <button @click="${this.toggleOptions}">
+        <button @click="${this.handleToggleFilters}">
           <i class="fas fa-filter"></i> 
         </button>
-        <div id="menu">
-          <ul>
-            <li><slot name="show" @click="${this.handleToggleFilters}"></slot></li>
-            <li><slot name="hide" @click="${this.handleToggleFilters}"></slot></li>
-            <li><slot name="clear" @click="${this.handleClearFilters}"></slot></li>
-          </ul>
-        </div>
         `
     }
 }

From 7e033d676bf510e289eafd6a2ac4a122f70484d3 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Tue, 19 May 2020 11:43:33 -0400
Subject: [PATCH 10/13] #202: remove call to undefined function

---
 assets/js/search/facet-group-toggle.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/assets/js/search/facet-group-toggle.js b/assets/js/search/facet-group-toggle.js
index 2694936..d26fe1c 100644
--- a/assets/js/search/facet-group-toggle.js
+++ b/assets/js/search/facet-group-toggle.js
@@ -12,7 +12,6 @@ class SearchFacetGroupToggle extends LitElement {
         super();
         this.shown = false;
         this.handleToggleFilters = this.handleToggleFilters.bind(this);
-        this.handleClearFilters = this.handleClearFilters.bind(this);
     }
 
     static get styles() {
@@ -48,8 +47,6 @@ class SearchFacetGroupToggle extends LitElement {
     }
 
     handleToggleFilters(e) {
-        
-        // actually show menu instead ...
         this.dispatchEvent(new CustomEvent('toggleFilters', {
             detail: { show: !this.shown }, // not sure what to put
             bubbles: true,

From 8b74957028872866ce5c53fd2f059887918aeda3 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Tue, 19 May 2020 12:30:36 -0400
Subject: [PATCH 11/13] #202: add 'reset filters' link to facet-toggle on
 mobile

---
 assets/js/search/facet-group-toggle.js | 38 +++++++++++++++++++-------
 templates/search_pages/index.html      |  6 ++--
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/assets/js/search/facet-group-toggle.js b/assets/js/search/facet-group-toggle.js
index d26fe1c..533cb8f 100644
--- a/assets/js/search/facet-group-toggle.js
+++ b/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() {
@@ -27,25 +28,39 @@ class SearchFacetGroupToggle extends LitElement {
         }
 
         @media screen and (max-width: 1000px) {
-            :host { display: inline; }
-            :host([shown]) {
-                display:block;
-                margin-left: 85%;
+            :host { display: block; }
+            div { display: flex; }
+            :host ::slotted([slot=clear]) {
+                display:none;
             }
-            :host([shown]) vivo-filter-clearer {
+            :host([shown]) {
                 display:block;
-                margin-left: 85%;
-            }
+                width: 100%;
+            }   
             :host .fa-filter::before {
                 font-family: 'Font Awesome 5 Free';
                 font-weight: 900;
                 content: "\\f0b0";
                 font-style: normal;
             }
+            :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
@@ -60,9 +75,12 @@ class SearchFacetGroupToggle extends LitElement {
 
     render() {
         return html`
-        <button @click="${this.handleToggleFilters}">
-          <i class="fas fa-filter"></i> 
-        </button>
+        <div>
+          <slot name="clear" @click="${this.handleClearFilters}"></slot>
+          <button @click="${this.handleToggleFilters}">
+            <i class="fas fa-filter"></i> 
+          </button>
+        </div>
         `
     }
 }
diff --git a/templates/search_pages/index.html b/templates/search_pages/index.html
index 06b67a8..b9b24de 100644
--- a/templates/search_pages/index.html
+++ b/templates/search_pages/index.html
@@ -123,9 +123,9 @@ <h4><%= t("funding_source") %></h4>
 
       <!-- NOTE: only seen on smaller screens -->
       <vivo-facet-group-toggle>
-        <span slot="show"><%= t("show") %></span>
-        <span slot="hide"><%= t("hide") %></span>
-        <span slot="clear"><%= t("reset") %></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="combo">

From f3e2b5f984291fdfcbd1ae357e04f4ee20fc1e3c Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Tue, 19 May 2020 13:20:00 -0400
Subject: [PATCH 12/13] #202: remove third 'combo' style tab specification

---
 assets/css/search.scss            |  8 ++++++++
 assets/js/elements/tab-panel.js   |  3 ---
 assets/js/elements/tab.js         | 27 ---------------------------
 templates/search_pages/index.html |  2 +-
 4 files changed, 9 insertions(+), 31 deletions(-)

diff --git a/assets/css/search.scss b/assets/css/search.scss
index 3587be0..2b46ba3 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -63,4 +63,12 @@
       float:right;
       height: 1em;
     }
+
+    .search-container vivo-tab {
+        width: 85%;
+        color: var(--textColor);
+        padding-top:0;
+        padding-left: 0;
+        border-top: none;
+    }
   }
\ No newline at end of file
diff --git a/assets/js/elements/tab-panel.js b/assets/js/elements/tab-panel.js
index 9290d55..0e1adf5 100644
--- a/assets/js/elements/tab-panel.js
+++ b/assets/js/elements/tab-panel.js
@@ -24,9 +24,6 @@ class TabPanel extends LitElement {
     :host([vivo-tab-style="secondary"]) {
       border-top: none;
     }
-    :host([vivo-tab-style="combo"]) {
-      border-top: none;
-    }
     @media (max-width: 45em) {
       :host {
         order: initial;
diff --git a/assets/js/elements/tab.js b/assets/js/elements/tab.js
index d8f7982..fd18a2f 100644
--- a/assets/js/elements/tab.js
+++ b/assets/js/elements/tab.js
@@ -39,23 +39,6 @@ class Tab extends LitElement {
         opacity: 100%;
       }
 
-      :host([vivo-tab-style="combo"]) {
-        color: var(--textColor);
-        background-color: transparent;
-        padding: .5rem 3rem;
-        opacity: 25%;
-      }
-      :host([vivo-tab-style="combo"]:hover) {
-        color: var(--textColor);
-        border-bottom: 3px solid var(--textColor);
-      }
-      :host([vivo-tab-style="combo"][selected]) {
-        color: var(--textColor);
-        border-bottom: 3px solid var(--textColor);
-        opacity: 100%;
-      }
-
-
       .fas { display: none; }
       @media (max-width: 45em) {
         .fas {
@@ -92,16 +75,6 @@ class Tab extends LitElement {
           color: var(--textColor);
         }
       }
-
-      @media screen and (max-width: 1000px) {
-        :host([vivo-tab-style="combo"]) {
-          width: 85%;
-          color: var(--textColor);
-          padding-top:0;
-          padding-left: 0;
-          border-top: none;
-        }
-      }
     `
   }
 
diff --git a/templates/search_pages/index.html b/templates/search_pages/index.html
index b9b24de..2fea6a5 100644
--- a/templates/search_pages/index.html
+++ b/templates/search_pages/index.html
@@ -128,7 +128,7 @@ <h4><%= t("funding_source") %></h4>
         </div>
       </vivo-facet-group-toggle>
 
-      <vivo-tabs id="all-search-tabs" vivo-tab-style="combo">
+      <vivo-tabs id="all-search-tabs" vivo-tab-style="secondary">
         <vivo-tab id="person-search-tab">
           <%= t("people") %> (<span id="person-search-count">0</span>)
         </vivo-tab>

From 06e5963925461f49bd79a4f0f304b4f5a6932e59 Mon Sep 17 00:00:00 2001
From: Rob Nelson <robert.nelson@duke.edu>
Date: Tue, 19 May 2020 14:24:07 -0400
Subject: [PATCH 13/13] #202: remove a few spurious comments

---
 assets/js/search/pagination-summary.js  | 1 -
 assets/js/search/people/person-image.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/assets/js/search/pagination-summary.js b/assets/js/search/pagination-summary.js
index 4409711..d93b96e 100644
--- a/assets/js/search/pagination-summary.js
+++ b/assets/js/search/pagination-summary.js
@@ -18,7 +18,6 @@ class SearchPaginationSummary extends LitElement {
   }
 
   static get styles() {
-    // TODO: should make link color etc...
     return css`
     @media screen and (max-width: 1000px) {
       span {
diff --git a/assets/js/search/people/person-image.js b/assets/js/search/people/person-image.js
index 1843b31..bf6835f 100644
--- a/assets/js/search/people/person-image.js
+++ b/assets/js/search/people/person-image.js
@@ -23,7 +23,6 @@ class PersonImage extends LitElement {
   }
 
   render() {
-    // TODO: how to get 'assetPath' in here?
     var url = `${defaultProfileImage}`;
 
     if (this.thumbnail != "null") {