Merge pull request #167 from vivo-community/107_search_styling

107 search styling
vivo-community · Apr 2, 2020 · 3302e8d · 3302e8d
2 parents fc4fc21 + 089524f
commit 3302e8d
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 12 deletions.
diff --git a/assets/js/search/facet.js b/assets/js/search/facet.js
@@ -33,11 +33,14 @@ class SearchFacet extends LitElement {
       }
       .label {
         flex-grow: 2;
-        flex-basis: 90%;
+        flex-basis: 95%;
         padding-right: 0.5em;
         line-height: 16pt;
         display: inline-block;
       }
+      .label.count {
+        padding-left: 2px;
+      }
       .label::before {
         display: block;
         content: attr(title);
@@ -48,7 +51,7 @@ class SearchFacet extends LitElement {
       }
       .checkbox-container {
         flex-grow: 1;
-        flex-basis: 10%;
+        flex-basis: 5%;
         display:inline-block;
         position: relative;
       }
@@ -135,8 +138,8 @@ class SearchFacet extends LitElement {
             selected="${this.selected}"
             @click=${this.handleFacetSelected}
           >
-            <span class="label" title="${this.label} (${this.count}))">
-              ${this.label} (${this.count})
+            <span class="label" title="${this.label} (${this.count})">
+              ${this.label}&nbsp;(${this.count})
             </span>
             <!-- NOTE: adding value again so event can do parent.value -->
             <span class="checkbox-container" value=${this.value}>

diff --git a/assets/js/search/facets.js b/assets/js/search/facets.js
@@ -28,6 +28,7 @@ class SearchFacets extends Faceter(LitElement) {
       :host {
         display: block;
         line-height: 1.6em;
+        padding-bottom: 1em;
       }
       vivo-search-facet[selected=""] {
         font-weight: bold;
@@ -36,6 +37,11 @@ class SearchFacets extends Faceter(LitElement) {
         opacity: 50%;
         font-size: 1em;
         font-weight: normal;
+        margin: 0;
+      }
+      ::slotted(h4) {
+        padding: 0;
+        margin: 0;
       }
     `
   }

diff --git a/assets/js/search/grants/grant-card.js b/assets/js/search/grants/grant-card.js
@@ -22,7 +22,7 @@ class GrantCard extends LitElement {
       }
       :host {
           display: block;
-          margin-bottom: 1em;
+          margin-bottom: 1.5em;
       }
       
     `

diff --git a/assets/js/search/grants/grant-search.js b/assets/js/search/grants/grant-search.js
@@ -126,6 +126,7 @@ class GrantSearch extends Searcher(LitElement) {
         return css`
         .search-actions {
             display: flex;
+            padding-top: 5px;
         }
         vivo-search-pagination-summary {
             flex-grow: 2;

diff --git a/assets/js/search/people/person-search.js b/assets/js/search/people/person-search.js
@@ -27,6 +27,7 @@ class PersonSearch extends Searcher(LitElement) {
         }
         .search-actions {
             display: flex;
+            padding-top: 5px;
         }
         vivo-search-pagination-summary {
             flex-grow: 2;
@@ -63,7 +64,8 @@ class PersonSearch extends Searcher(LitElement) {
           }
           .truncate-overflow::before {
             position: absolute;
-            content: "...";
+            // FIXME: this overlaps text in chrome */
+            /* content: "..."; */
             inset-block-end: 0; /* "bottom" */
             inset-inline-end: 0; /* "right" */
           }

diff --git a/assets/js/search/publications/publication-search.js b/assets/js/search/publications/publication-search.js
@@ -26,6 +26,7 @@ class PublicationSearch extends Searcher(LitElement) {
         }
         .search-actions {
           display: flex;
+          padding-top: 5px;
         }
         vivo-search-pagination-summary {
           flex-grow: 2;

diff --git a/assets/js/search/search-sidebar-item.js b/assets/js/search/search-sidebar-item.js
@@ -24,11 +24,6 @@ class SearchSidebarItem extends LitElement {
         padding: 0 1em;
         font-size: 0.85em;
         background-color: var(--highlightBackgroundColor);
-        /* background-color: var(--lightNeutralColor); */
-        /* text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        */
       }
       @media screen and (max-width: 800px) {
         ::slotted([slot="content"]) {

diff --git a/templates/search_pages/index.html b/templates/search_pages/index.html
@@ -12,6 +12,10 @@
   }
   aside {
     padding: 0;
+    background-color: var(--highlightBackgroundColor);
+  }
+  .container aside {
+    padding: 0;
   }
   vivo-sidebar {
     margin: 0;
@@ -52,7 +56,7 @@ <h4>Department</h4>
             </vivo-search-facets>
 
             <vivo-search-facets key="people" field="type" tag="type">
-              <h4>Type</h4>
+              <h4>Position</h4>
             </vivo-search-facets>
 
             <vivo-search-facets key="people" field="researchAreas" tag="ra">
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,7 @@ class GrantCard extends LitElement { @@
           }
           :host {
               display: block;
-              margin-bottom: 1em;
+              margin-bottom: 1.5em;
           }
         `
@@ Expand Down @@