Updated Search page; Updated SidebarBlock

eea · Aug 11, 2020 · d0b0021 · d0b0021
1 parent 16b85ab
commit d0b0021
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 28 deletions.
diff --git a/src/components/manage/Blocks/SidebarBlock/Edit.jsx b/src/components/manage/Blocks/SidebarBlock/Edit.jsx
@@ -67,7 +67,7 @@ const getSchema = props => {
           {
             id: 'default',
             title: 'title',
-            fields: ['title', 'id', 'queryParam'],
+            fields: ['title', 'id', 'queryParam', 'universalQuery'],
           },
         ],
         properties: {
@@ -92,6 +92,10 @@ const getSchema = props => {
             //   return [...makeChoices(keys)];
             // },
           },
+          universalQuery: {
+            title: 'Universal query',
+            type: 'boolean',
+          },
         },
         required: ['id', 'title', 'queryParam'],
       },

diff --git a/src/components/manage/Blocks/SidebarBlock/View.jsx b/src/components/manage/Blocks/SidebarBlock/View.jsx
@@ -152,16 +152,35 @@ const View = ({ content, ...props }) => {
             <NavLink
               onClick={() => {
                 let deleteQueries = false;
+                const universalQueries = {};
                 Object.keys(queryParameters).forEach(key => {
                   if (globalQuery[key] && !deleteQueries) deleteQueries = true;
                 });
+                Object.entries(queryParameters).forEach(([qKey, value]) => {
+                  if (
+                    value.universalQuery &&
+                    typeof data[resourcePackageKey]?.[globalQuery[key]]?.[
+                      value.queryParam
+                    ] !== 'undefined'
+                  ) {
+                    universalQueries[qKey] =
+                      data[resourcePackageKey]?.[globalQuery[key]]?.[
+                        value.queryParam
+                      ];
+                  }
+                });
                 if (multiply && deleteQueries) {
                   props.deleteQueryParam({
                     queryParam: Object.keys(queryParameters),
                   });
                 }
+                if (multiply && Object.keys(universalQueries).length > 0) {
+                  props.setQueryParam({
+                    queryParam: universalQueries,
+                  });
+                }
               }}
-              to={nextItem.url === '' ? `/}` : nextItem.url}
+              to={nextItem.url === '' ? `/` : nextItem.url}
               exact={
                 settings.isMultilingual
                   ? nextItem.url === `/${props.lang}}`

diff --git a/src/components/theme/View/TabsChildView.jsx b/src/components/theme/View/TabsChildView.jsx
@@ -100,7 +100,11 @@ const DefaultView = props => {
         <div className="glossary-search">
           <SearchBlock
             data={{
-              title: { value: 'Glossary page results' },
+              title: { value: 'Glossary' },
+              description: {
+                value:
+                  'This section provides a close-up picture of air pollution from various sources such as road transport, shipping, aviation, domestic heating, agriculture and small business (diffuse emissions). Pollution from diffuse sources occurs over large areas from often indistinct elements. Although the large numbers of houses and vehicles in cities represent many point sources, they collectively represent a large, diffuse source of pollution.',
+              },
               query: {
                 value: {
                   properties: {

diff --git a/src/customizations/volto/components/theme/Search/Search.jsx b/src/customizations/volto/components/theme/Search/Search.jsx
@@ -255,10 +255,15 @@ class Search extends Component {
                   />
                 )}
               </h1>
-
+              {this.props.description ? (
+                <p style={{ marginBottom: '3em' }}>{this.props.description}</p>
+              ) : (
+                ''
+              )}
               <SearchBlock
                 data={{
                   title: { value: this.props.title },
+                  description: { value: this.props.description },
                   query: {
                     value: {
                       properties: {
@@ -297,7 +302,16 @@ class Search extends Component {
                   id={`article_${item['@id']}`}
                 >
                   <Link to={item['@id']}>
-                    <h2 className="tileHeadline mb-1">{item.title}</h2>
+                    <h2 className="tileHeadline mb-1">
+                      <Highlighter
+                        highlightClassName="highlight"
+                        searchWords={
+                          this.props.searchableText?.split(' ') || []
+                        }
+                        autoEscape={true}
+                        textToHighlight={item.title}
+                      />
+                    </h2>
                   </Link>
                   <div className="tileBody">
                     <div className="description">
@@ -320,7 +334,7 @@ class Search extends Component {
                         : item.description}
                     </div>
                     <button
-                      className="expendButton"
+                      className="outline dark-blue expendButton"
                       onClick={() => {
                         if (this.state.expendedItemIndex === index) {
                           this.setState({ expendedItemIndex: -1 }, () => {
@@ -422,6 +436,7 @@ export default compose(
       subject: qs.parse(props.location.search).Subject,
       query: qs.parse(props.location.search),
       title: qs.parse(props.location.search).title,
+      description: qs.parse(props.location.search).description,
       pathname: props.location.pathname,
     }),
     { searchContent },

diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides
@@ -890,7 +890,7 @@ space-around {
 
   div.input {
     padding: 0 4rem;
-    border: 1px solid #606060;
+    border: none;
     height: 50px;
     font-weight: 300;
     font-size: 18px;
@@ -900,22 +900,31 @@ space-around {
   }
 
   .icon {
-    fill: #606060 !important;
+    fill: #32536B !important;
     position: absolute;
     z-index: 1;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
   }
 
+  .searchIcon {
+    fill: #32536B !important;
+  }
+
   .clearIcon {
+    fill: #D63D27 !important;
     left: unset;
     right: 1rem;
     cursor: pointer;
+    &:hover {
+      fill: #32536B !important;
+    }
   }
 }
 
 .search-meta {
+  margin-top: 0.5em;
   margin-bottom: 3rem;
 
   span {
@@ -941,45 +950,49 @@ space-around {
   }
 }
 
-button.outline {
-  background: transparent;
-  color: #000;
-  border: 1px solid #000;
+button.solid,
+.ui.form .searchbox.field button.solid {
+  border-color: #000;
+  background-color: #000;
+  color: #fff;
   padding: 0.6rem 2rem;
   border-radius: 2rem;
   cursor: pointer;
-  text-transform: uppercase;
-
+  &:focus {
+    outline: none;
+  }
   &.dark-blue {
-    border: 1px solid #32536B;
+    border: none;
+    background-color: #32536B;
+    color: #fff;
+    font-weight: bold;
 
     &:hover {
-      background: #32536B;
+      background-color: #32536B;
       color: #fff;
     }
   }
-
-  &:hover {
-    background: #000;
-    color: #fff;
-  }
 }
 
-button.solid,
-.ui.form .searchbox.field button.solid {
-  background: transparent;
+button.outline,
+.ui.form .searchbox.field button.outline {
+  background-color: transparent;
   color: #000;
+  border-color: #000;
   padding: 0.6rem 2rem;
   border-radius: 2rem;
   cursor: pointer;
-
+  &:focus {
+    outline: none;
+  }
   &.dark-blue {
-    background: #32536B;
-    color: #fff;
+    border-color: #32536B;
+    color: #32536B;
     font-weight: bold;
 
     &:hover {
-      background: #32536B;
+      background-color: #32536B;
+      border-color: #32536B;
       color: #fff;
     }
   }
@@ -1047,6 +1060,19 @@ body.has-sidebar {
         }
       }
     }
+    &.grey-menu {
+      background-color: #EDEDED;
+      .item {
+        color: #000;
+        &:before {
+          width: 0;
+          background-color: transparent;
+        }
+      }
+      .active.item {
+        background-color: transparent;
+      }
+    }
     &.item {
       text-align: left !important;
       justify-content: start !important;
@@ -1079,6 +1105,7 @@ body.has-sidebar {
       color: #4296B3;
       font-weight: bold;
       border-bottom: 2px solid #4296B3;
+      border-radius: 0;
       &:hover {
         background: transparent;
         color: #3b849e;