Add ability of UI to remove sidebar when no Sort or Filter fields exist and adjust styling

Author: Brian Earwood

src/components/Body.js

@@ -9,7 +9,7 @@ import {
   ResultsPerPage,
   Sorting
 } from "../containers";
-import { buildSortOptionsFromConfig } from "../config/config-helper";
+import { getFacetFields, getSortFields, buildSortOptionsFromConfig } from "../config/config-helper";
 
 export default function Body() {
   return (
@@ -19,7 +19,7 @@ export default function Body() {
           Type a search above to begin.
         </div>
         <div className="search-results">
-          <div className="sidebar">
+          <div className={"sidebar" + (getFacetFields().length > 0 || getSortFields().length > 0 ? '' : ' hidden')}>
             <Sorting sortOptions={buildSortOptionsFromConfig()} />
             <Facets />
           </div>

src/config/config-helper.js

@@ -46,6 +46,14 @@ export function getUrlField() {
   return getConfig().urlField;
 }
 
+export function getFacetFields() {
+  return getConfig().facets || [];
+}
+
+export function getSortFields() {
+  return getConfig().sortFields || [];
+}
+
 export function getUrlFieldTemplate() {
   return getConfig().urlFieldTemplate;
 }

src/styles/styles.css

@@ -393,7 +393,10 @@ a {
   padding: 0 24px; }
 
 .sidebar {
-  flex: 0 1 30%; }
+  flex: 0 1 30%;
+  padding-right: 12px; }
+  .sidebar.hidden {
+    display: none; }
 
 .sorting {
   padding-top: 32px; }
@@ -476,77 +479,79 @@ a {
     width: 100%;
     justify-content: space-between;
     align-items: center; }
-  .active-search .results {
-    padding: 32px 0 0 32px;
-    border-left: 1px solid #eeeeee; }
-
-.result {
-  border-top: 1px solid #eeeeee;
-  padding: 24px 0; }
-  .result + .result {
-    margin-top: 20px; }
-  .result em {
-    position: relative;
-    color: #3a56e4;
-    font-weight: 900;
-    font-style: inherit; }
-    .result em:after {
-      content: "";
-      position: absolute;
-      top: -3px;
-      left: -3px;
-      width: calc(100% + 6px);
-      height: calc(100% + 6px);
-      background: rgba(37, 139, 248, 0.08);
-      pointer-events: none; }
-  .result__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center; }
-  .result__title {
-    font-size: 1.8em;
-    font-weight: 700; }
-  .result__key {
-    font-family: monospace;
-    font-weight: 400;
-    font-size: 14px;
-    flex: 0 1 50%;
-    color: #777777; }
-    .result__key:before {
-      content: '"'; }
-    .result__key:after {
-      content: '": '; }
-  .result__value {
-    font-weight: 400;
-    font-size: 14px; }
-  .result__version {
-    font-size: 12px;
-    display: inline;
-    vertical-align: bottom; }
-  .result__lisence {
-    font-size: 12px;
-    color: #999999;
-    display: inline-block;
-    border: 1px solid #ccc;
-    border-radius: 3px;
-    line-height: 1;
-    padding: 4px 4px 3px 4px; }
-  .result__body {
-    margin-top: 1rem;
-    line-height: 1.5; }
-    .result__body p {
-      margin: 0; }
-  .result__details {
-    max-height: 300px;
-    position: relative;
-    overflow: hidden;
-    overflow-y: auto;
-    padding: 24px;
-    background-color: #f9f9f9; }
-  .result__footer {
-    padding: 0 2rem;
-    margin-top: 1rem;
-    line-height: 1; }
+
+.result em {
+  position: relative;
+  color: #3a56e4;
+  font-weight: 900;
+  font-style: inherit; }
+  .result em:after {
+    content: "";
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: calc(100% + 6px);
+    height: calc(100% + 6px);
+    background: rgba(37, 139, 248, 0.08);
+    pointer-events: none; }
+
+.result__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center; }
+
+.result__title {
+  font-size: 1.8em;
+  font-weight: 700;
+  margin-top: 24px; }
+
+.result__key {
+  font-family: monospace;
+  font-weight: 400;
+  font-size: 14px;
+  flex: 0 1 50%;
+  color: #777777; }
+  .result__key:before {
+    content: '"'; }
+  .result__key:after {
+    content: '": '; }
+
+.result__value {
+  font-weight: 400;
+  font-size: 14px; }
+
+.result__version {
+  font-size: 12px;
+  display: inline;
+  vertical-align: bottom; }
+
+.result__lisence {
+  font-size: 12px;
+  color: #999999;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  line-height: 1;
+  padding: 4px 4px 3px 4px; }
+
+.result__body {
+  margin-top: 1rem;
+  line-height: 1.5; }
+  .result__body p {
+    margin: 0; }
+
+.result__details {
+  max-height: 300px;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 24px;
+  background-color: #f9f9f9; }
+
+.result__footer {
+  padding: 0 2rem;
+  margin-top: 1rem;
+  line-height: 1; }
 
 .rc-pagination {
   display: flex;

src/styles/styles.scss

@@ -181,6 +181,11 @@ a {
 
 .sidebar {
   flex: 0 1 30%;
+  padding-right: $sizeM;
+
+  &.hidden {
+    display: none;
+  }
 }
 
 .sorting {
@@ -289,21 +294,9 @@ a {
     justify-content: space-between;
     align-items: center;
   }
-
-  .active-search & {
-    padding: $sizeXL 0 0 $sizeXL;
-    border-left: 1px solid $resultsLeftBorderColor;
-  }
 }
 
 .result {
-  border-top: 1px solid $resultBorderColor;
-  padding: $sizeL 0;
-
-  & + & {
-    margin-top: 20px;
-  }
-
   em {
     position: relative;
     color: $textMatchColor;
@@ -331,6 +324,7 @@ a {
   &__title {
     font-size: 1.8em;
     font-weight: $fontWeightBold;
+    margin-top: $sizeL;
   }
 
   &__key {