[288] Removes Tags UI from search results

CHANGELOG.md

@@ -13,3 +13,4 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 
 - Updated search bar placeholder font size and darked the text color.
+- [288](https://github.com/iodepo/OceanBestPractices/issues/288) Removed "View Tags" button and side bar from search results

website/src/js/components/Result.js

@@ -106,14 +106,14 @@ class Result extends Component {
   render() {
     // Find out if the tags are active by comparing the id saved on the state saved to the
     // id of the current element
-    const isActiveTags = this.props.termsReducer.activeTerms && this.props.termsReducer.activeTerms.id === this.props.id;
+    // const isActiveTags = this.props.termsReducer.activeTerms && this.props.termsReducer.activeTerms.id === this.props.id;
     const docHandle = this.props.handle ? "https://repository.oceanbestpractices.org/handle/" + this.props.handle : null;
     const { showCitation, showDocument } = this.state;
 
-    var toggleClassName = isActiveTags ? 'result__button result__tag-button--is-active' : 'result__button';
-    var toggleTagsIcon = isActiveTags ? 'fa fa-times' : 'fa fa-tags';
+    // var toggleClassName = isActiveTags ? 'result__button result__tag-button--is-active' : 'result__button';
+    // var toggleTagsIcon = isActiveTags ? 'fa fa-times' : 'fa fa-tags';
+    // var toggleLabelClassName = isActiveTags ? 'result__tag-label result__tag-label--is-active' : 'result__tag-label';
     var citationIcon = showCitation ? 'fa fa-times' : 'fa fa-quote-right';
-    var toggleLabelClassName = isActiveTags ? 'result__tag-label result__tag-label--is-active' : 'result__tag-label';
 
     var authorList = null;
     if (this.props.author) {
@@ -224,12 +224,12 @@ class Result extends Component {
             <div className="result__highlight"> { this.componentListFromStrings(this.props.highlight) } </div>
             <div className="result__publisher">
 
-              <Superlink event_category="results" event_action={`link | ${isActiveTags ? 'clear' : 'view'}`} event_label={isActiveTags ? 'Viewing Tags' : 'View Tags'}>
+              {/* <Superlink event_category="results" event_action={`link | ${isActiveTags ? 'clear' : 'view'}`} event_label={isActiveTags ? 'Viewing Tags' : 'View Tags'}>
                 <a className={toggleClassName} onClick={isActiveTags ? this.onReset.bind(this) : this.handleTagToggle.bind(this)} href="#tagSection">
                   <span className="result__button-icon"><i className={toggleTagsIcon} aria-hidden="true"></i></span>
                   <span className={toggleLabelClassName}></span>
                 </a>
-              </Superlink>
+              </Superlink> */}
 
               {document_button}
               {citation_button}

website/src/js/layouts/Search.js

@@ -13,7 +13,7 @@ class Search extends Component {
 
     return (
         <Wrapper header={true} history={history} childrenContainerClass="search" footerLinks={true}>
-          <SidebarSidebar />
+          {/* <SidebarSidebar /> */}
           <SearchResults />
         </Wrapper>
     );

website/src/scss/components/_search-results.scss

@@ -3,6 +3,7 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  width: 100%;
 }
 
 .search-results--has-status {
@@ -18,7 +19,7 @@
   z-index: 1;
   font-size: 0.825rem;
   color: $dark-gray;
-  background:#fff;
+  background: #fff;
   border-bottom: 1px solid #D8D8D8;
 }
 
@@ -37,14 +38,14 @@
 
 .search-results__breadcrumbs-home {
   text-decoration: none;
-  
+
   &:after {
     content: "/";
     margin-left: .5em;
     margin-right: .5em;
     color: #D8D8D8;
   }
-  
+
   li {
     color: #588bce;
   }
@@ -53,7 +54,7 @@
 .search-results__number {
   margin-right: .75rem;
   display: none;
-  
+
   @media #{$screen-m} {
     display: inline-block;
   }
@@ -78,4 +79,4 @@
 
 .search-result__fit-filter {
   position: relative;
-}
+}

website/src/scss/layouts/_search.scss

@@ -1,11 +1,12 @@
 .search {
-
-  display: grid;
-  grid-template-rows: max-content auto;
+  // Switched from grid to flex for https://github.com/iodepo/OceanBestPractices/issues/288
+  // Leaving grid settings here because this may be reverted in the future.
+  display: flex;
+  // grid-template-rows: max-content auto;
   min-width: 0;
 
   @media #{$screen-s} {
-    grid-template-columns: max-content auto;
-    grid-template-rows: none;
+    // grid-template-columns: max-content auto;
+    // grid-template-rows: none;
   }
 }

website/src/scss/main.css

@@ -800,13 +800,8 @@ html {
     text-decoration: none; }
 
 .search {
-  display: grid;
-  grid-template-rows: max-content auto;
+  display: flex;
   min-width: 0; }
-  @media (min-width: 641px) {
-    .search {
-      grid-template-columns: max-content auto;
-      grid-template-rows: none; } }
 
 .wrapper {
   height: 100vh;
@@ -1907,7 +1902,8 @@ html {
   position: relative;
   margin: 0;
   padding: 0;
-  list-style: none; }
+  list-style: none;
+  width: 100%; }
 
 .search-results--has-status {
   display: flex;