FS-9 Mess around with layout (proof of concept)

src/.env.local.js.example

@@ -46,6 +46,20 @@ module.exports = {
   pageTitle: null,
   // OPTIONAL: The hostname to emulate when testing.
   hostname: "example.local",
+  layoutAndClasses : {
+    // OPTIONAL: Specify the column widths.
+    gridTemplateColumns: "33% 66%",
+    // OPTIONAL: Add custom classes.
+    containerClass: "custom-container",
+    asideClass: "custom-aside",
+    mainClass: "custom-main",
+    // OPTIONAl: Reverse desktop column order.
+    reverseDesktopColumns: false,
+    // OPTIONAL: Reverse mobile stack order.
+    reverseMobileOrder: false,
+    // Breakpoint for Desktop. Layout will change when wider then the value specifed.
+    breakpointDesktop: 900,
+  },
   // OPTIONAL: Machine name of those search fields whose facets/filter and current values should be hidden in UI.
   // Note: if their values are pre-set (i.e. sent in qs to app), they will still be sent in the query.
   // hiddenSearchFields: [ // Defaults to [];

src/components/_fs-aside.scss

@@ -6,15 +6,18 @@
  */
 
 .fs-aside {
-  width: 22.85714%;
-  float: left;
-  margin-right: -100%;
-  margin-left: 0;
-  clear: both;
-  margin-bottom: rhythm(1);
   background-color: $c-bg-gray;
+  @include breakpoint($bp2) {
+  }
+}
+
+.fs-aside__mobile-reverse {
+  order: 2;
+}
 
+// Layout option to move aside to right on desktop
+.fs-aside__desktop-reverse {
   @include breakpoint($bp2) {
-    padding-top: rhythm(1);
+    order: 6; // Should be higher than all mobile orders.
   }
 }

src/components/_fs-container.scss

@@ -0,0 +1,16 @@
+/**
+ * container.scss
+ * Define container styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+
+.fs-container {
+  display: flex;
+  flex-direction: column;
+  @include breakpoint($bp2) {
+    display: grid;
+    grid-column-gap: 1em;
+    grid-template-columns: 33% 66%;
+  }
+}

src/components/_fs-main.scss

@@ -6,14 +6,6 @@
  */
 
 .fs-main {
-  width: 74.28571%;
-  float: right;
-  margin-left: 0;
-  margin-right: 0;
-  clear: none;
-  margin-bottom: rhythm(1);
-
   @include breakpoint($bp2) {
-    padding-top: rhythm(1);
   }
 }

src/components/federated-solr-faceted-search.js

@@ -98,14 +98,25 @@ class FederatedSolrFacetedSearch extends React.Component {
       pageTitle = <h1>{this.props.options.pageTitle}</h1>;
     }
 
+    // Grab env vars.
+    const {
+      containerClass = '',
+      asideClass = '',
+      mainClass = '',
+      gridTemplateColumns = '',
+      reverseDesktopColumns = false,
+      reverseMobileOrder = false,
+    } = this.props.options.layoutAndClasses || {};
+
     return (
       <LiveAnnouncer>
-        <div className="fs-container">
-          <aside className="fs-aside">
+        <div className={`fs-container ${containerClass}`} style={{ gridTemplateColumns: gridTemplateColumns }}>
+          <aside className={`fs-aside ${asideClass} ${reverseDesktopColumns ? 'fs-aside__desktop-reverse' : ''} ${reverseMobileOrder ? 'fs-aside__mobile-reverse' : ''}`}>
             <SearchFieldContainerComponent
               bootstrapCss={bootstrapCss}
               onNewSearch={this.resetFilters}
               resultsCount={this.props.results.numFound}
+              options={this.props.options}
             >
               {/* Only render the visible facets / filters.
                   Note: their values may still be used in the query, if they were pre-set. */}
@@ -137,7 +148,7 @@ class FederatedSolrFacetedSearch extends React.Component {
               }
             </SearchFieldContainerComponent>
           </aside>
-          <div className="fs-main">
+          <div className={`fs-main ${mainClass}`}>
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch

src/components/search-field-container.js

@@ -9,14 +9,29 @@ class FederatedSearchFieldContainer extends React.Component {
     super(props);
 
     // This will return the width of the viewport.
-    const intFrameWidth = window.innerWidth;
+    let intFrameWidth = window.innerWidth;
+
+    // Get our breakpoint option from env.
+    const { breakpointDesktop = '900' } = this.props.options.layoutAndClasses || {};
 
     this.state = {
       // Filters are visible for large / hidden for small screens by default.
-      expanded: intFrameWidth > 900,
+      expanded: intFrameWidth > breakpointDesktop,
     };
 
     this.handleClick = this.handleClick.bind(this);
+
+    window.addEventListener('resize', () => {
+      // Desktop height.
+      let height = 'auto';
+      // In mobile view, when resized, lets close things.
+      if (window.innerWidth < breakpointDesktop) {
+        height = 0;
+      }
+      this.setState({
+        expanded: height,
+      });
+    });
   }
 
   handleClick() {
@@ -66,6 +81,7 @@ class FederatedSearchFieldContainer extends React.Component {
 FederatedSearchFieldContainer.propTypes = {
   children: PropTypes.array,
   onNewSearch: PropTypes.func,
+  options: PropTypes.object,
 };
 
 export default FederatedSearchFieldContainer;

src/styles.css

@@ -524,41 +524,43 @@
   .fs-search-accordion__title.js-fs-search-accordion-open:after {
     content: "–"; }
 
+/**
+ * container.scss
+ * Define container styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+.fs-container {
+  display: flex;
+  flex-direction: column; }
+  @media (min-width: 900px) {
+    .fs-container {
+      display: grid;
+      grid-column-gap: 1em;
+      grid-template-columns: 33% 66%; } }
+
 /**
  * aside.scss
  * Define aside styles.
  *
  * @copyright Copyright (c) 2017-2019 Palantir.net
  */
 .fs-aside {
-  width: 22.85714%;
-  float: left;
-  margin-right: -100%;
-  margin-left: 0;
-  clear: both;
-  margin-bottom: 1.46667em;
   background-color: #f6f6f6; }
-  @media (min-width: 900px) {
-    .fs-aside {
-      padding-top: 1.46667em; } }
+
+.fs-aside__mobile-reverse {
+  order: 2; }
+
+@media (min-width: 900px) {
+  .fs-aside__desktop-reverse {
+    order: 6; } }
 
 /**
  * aside.scss
  * Define aside styles.
  *
  * @copyright Copyright (c) 2017-2020 Palantir.net
  */
-.fs-main {
-  width: 74.28571%;
-  float: right;
-  margin-left: 0;
-  margin-right: 0;
-  clear: none;
-  margin-bottom: 1.46667em; }
-  @media (min-width: 900px) {
-    .fs-main {
-      padding-top: 1.46667em; } }
-
 /**
  * fs-search-results.scss
  * Define search results styles.

src/styles.scss

@@ -21,6 +21,7 @@
 @import "components/text-search/fs-search-form";
 @import "components/text-search/fs-autocomplete";
 @import "components/fs-search-filters";
+@import "components/fs-container";
 @import "components/fs-aside";
 @import "components/fs-main";
 @import "components/results/fs-search-results";