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

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

src/components/_fs-container.scss

@@ -0,0 +1,26 @@
+/**
+ * container.scss
+ * Define container styles.
+ *
+ * @copyright Copyright (c) 2017-2020 Palantir.net
+ */
+
+.fs-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 260px;
+  padding: 0 1.46667em;
+  margin: 0 auto;
+  @include breakpoint($bp2) {
+    display: grid;
+    grid-column-gap: 0;
+    grid-template-columns: 25% 75%;
+    width: 90%;
+    padding: 0;
+  }
+  @include breakpoint($bp2) {
+    max-width: 1400px;
+  }
+}

src/components/_fs-main.scss

@@ -9,11 +9,19 @@
   margin-left: 0;
   margin-right: 0;
   margin-bottom: rhythm(1);
+  @include breakpoint($bp2) {
+    padding-left: 7.5%; //Default to match previous version padding.
+  }
+  &.fs-main__has-custom-columns {
+    @include breakpoint($bp2) {
+      padding-left: 2em;
+    }
+  }
+}
 
+.fs-main__desktop-reverse {
   @include breakpoint($bp2) {
-    float: right;
-    clear: none;
-    width: 74.28571%;
-    padding-top: rhythm(1);
+    padding-left: 0;
+    padding-right: 2em;
   }
 }

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} ${reverseDesktopColumns ? 'fs-main__desktop-reverse' : ''} ${reverseMobileOrder ? 'fs-main__mobile-reverse' : ''} ${gridTemplateColumns ? 'fs-main__has-custom-columns' : ''}`}>
             {pageTitle}
             <div className="fs-search-form" autoComplete="on">
               <FederatedTextSearch

src/components/search-field-container.js

@@ -11,9 +11,12 @@ class FederatedSearchFieldContainer extends React.Component {
     // This will return the width of the viewport.
     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);
@@ -22,7 +25,7 @@ class FederatedSearchFieldContainer extends React.Component {
       // Desktop height.
       let height = 'auto';
       // In mobile view, when resized, lets close things.
-      if (window.innerWidth < 900) {
+      if (window.innerWidth < breakpointDesktop) {
         height = 0;
       }
       this.setState({
@@ -78,6 +81,7 @@ class FederatedSearchFieldContainer extends React.Component {
 FederatedSearchFieldContainer.propTypes = {
   children: PropTypes.array,
   onNewSearch: PropTypes.func,
+  options: PropTypes.object,
 };
 
 export default FederatedSearchFieldContainer;

src/components/sort-menu/_fs-search-scope.scss

@@ -10,6 +10,70 @@
   margin: rhythm(1) 0;
 }
 
+.fs-search-scope__filter {
+  width: 48.57143%;
+  clear: right;
+  float: left;
+  margin-left: 0;
+  margin-right: 2.85714%;
+
+  @include breakpoint($bp1) {
+    width: 31.42857%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+  }
+
+  &:nth-of-type(3n+1) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: left;
+      margin-right: -100%;
+      margin-left: 0;
+      clear: both;
+    }
+  }
+
+  &:nth-of-type(3n+2) {
+    width: 48.57143%;
+    clear: right;
+    float: right;
+    margin-right: 0;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: left;
+      margin-right: -100%;
+      margin-left: 34.28571%;
+      clear: none;
+    }
+  }
+
+  &:nth-of-type(3n+3) {
+    width: 48.57143%;
+    clear: right;
+    float: left;
+    margin-left: 0;
+    margin-right: 2.85714%;
+    clear: both;
+
+    @include breakpoint($bp1) {
+      width: 31.42857%;
+      float: right;
+      margin-left: 0;
+      margin-right: 0;
+      clear: none;
+    }
+  }
+}
 .fs-search-scope__select {
   @extend %select;
   @include adjust-font-size-to($label, .8);

src/components/text-search/_fs-autocomplete.scss

@@ -8,6 +8,17 @@
 
 .fs-search-form__autocomplete-container {
   display: flex;
+  @include breakpoint($bp1) {
+    width: 75%;
+  }
+
+  @include breakpoint($bp3) {
+    width: 50%;
+  }
+
+  .fs-search-form__input-wrapper {
+    width: 100%;
+  }
 }
 
 /** These classes are outside of Federated Search app namespace. **/

src/components/text-search/_fs-search-form.scss

@@ -21,6 +21,13 @@
   border-radius: 3px;
   display: flex;
   justify-content: space-between;
+  @include breakpoint($bp1) {
+    width: 75%;
+  }
+
+  @include breakpoint($bp3) {
+    width: 50%;
+  }
 }
 
 .fs-search-form__input {