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

nstriedinger · 2020-05-08T18:49:38Z

Proof of concept for FS-9

Add this to env.local.js

    // OPTIONAL: Specify the column widths.
    gridTemplateColumns: "50% 50%",
    // OPTIONAL: Add custom classes.
    containerClass: "custom-container",
    asideClass: "custom-aside",
    mainClass: "custom-main",
    // OPTIONAl: Reverse desktop column order.
    reverseDesktopColumns: true,
    // OPTIONAL: Reverse mobile stack order.
    reverseMobileOrder: false,
    // Breakpoint for Desktop. Layout will change when wider then the value specifed.
    breakpointDesktop: 1000,
  },

Note that

desktop columns are now 50/50
Filters are on the right at desktop but still on top for mobile
filter drawer opens at 1000px wide (other styles would still need breakpoint adjusted in override CSS)
Custom classes appear as expected

biz123 · 2020-05-11T14:00:14Z

I added a couple more variables to change the ordering:

	layoutAndClasses : {
        // OPTIONAL: Specify the column widths.
        layout: "50% 50%",
        // OPTIONAL: Add custom classes.
        containerClass: "custom-container",
        asideClass: "custom-aside",
        mainClass: "custom-main",
        // OPTIONAl: Reverse desktop column order.
        reverseDesktopColumns: true,
        // OPTIONAL: Reverse mobile stack order.
        reverseMobileOrder: true,
      },

biz123 · 2020-05-11T14:05:51Z

I added a couple variables to reverse the order between the aside and main column with separate controls on desktop and mobile. I added a flex display on mobile for that. I'd like to play around with this further where we can change the ordering in a more granular way.

Stepping back a bit, we are making it so there are some layout controls, which could be nice as module layout settings for site builders to adjust. I like the idea of being able to add custom classes too, and that might be a better custom theming feature.

…-search-react into test-layout-things

biz123 · 2020-05-14T14:19:52Z

src/components/_fs-aside.scss

@@ -6,15 +6,18 @@
 */

 .fs-aside {
-  width: 22.85714%;


Not sure how these specific widths were calculated before but we should have grid-template-columns in .fs-container match them by default to keep the layout the same by default.

22.85714% 74.28571%

biz123 · 2020-05-14T14:26:39Z

We should update src/.env.local.js.example to show all the new variables.

biz123 · 2020-05-14T14:30:38Z

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

@@ -100,12 +100,13 @@ class FederatedSolrFacetedSearch extends React.Component {

    return (
      <LiveAnnouncer>
-        <div className="fs-container">
-          <aside className="fs-aside">
+        <div className={`fs-container ${this.props.options.layoutAndClasses.containerClass}`} style={{ gridTemplateColumns: this.props.options.layoutAndClasses.layout }}>


We need checks if the the following exist before we use them:
this.props.options.layoutAndClasses.containerClass
this.props.options.layoutAndClasses.layout
this.props.options.layoutAndClasses.asideClass
this.props.options.layoutAndClasses.mainClass

We could use the ternary check like we have on this.props.options.layoutAndClasses.reverseDesktopColumns to be consistent.

biz123 · 2020-05-14T14:32:03Z

@nstriedinger this is back to you.

biz123 · 2020-05-14T22:31:16Z

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%",


this doesn't exactly work with clean percentages because the gap width needs to be subtracted, so we might want to make some preset styles with the widths calculated for the most common percentages. Or use padding instead of the grid gap...

biz123 · 2020-05-14T22:33:18Z

@agentrickard this is still ready to review as proof of concept, but we should tweak the column widths a bit before merging as noted in the recent comment.

agentrickard · 2020-05-15T15:30:33Z

Not sure the search and sort boxes should be 100% width in that area. Is that a change?

agentrickard · 2020-05-15T15:36:11Z

I think we've lost some default padding of the columns.

Other than that, it seems great!

agentrickard · 2020-05-15T15:38:50Z

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 = '',


Did we lose some default values here?

The optional custom classes would be additional to existing classes if needed so the default is to have none, so I think this is ok as is.

…ustomized

…ly deleted

biz123 · 2020-05-18T22:35:35Z

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

@@ -10,6 +10,70 @@
  margin: rhythm(1) 0;
 }

+.fs-search-scope__filter {


@nstriedinger When I was reviewing to see if padding and other previous styling was getting lost I caught these styles from #70 and adding them back in without singularity. Let me know if we decided this styling was not needed. It looks like they may have been removed accidentally.

biz123 · 2020-05-18T22:36:28Z

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

@@ -8,6 +8,17 @@

 .fs-search-form__autocomplete-container {
  display: flex;
+  @include breakpoint($bp1) {


@nstriedinger these styles as well were removed in pr #70.

biz123 · 2020-05-18T22:41:47Z

@nstriedinger I made this so the default padding if no layout customizations are made matches the old styles, but if the layout is customized I have an em value, because the default percentage looks too wide in some configurations. Take a look and see if this seems reasonable to you.

Since there were some general concerns about changes in padding etc, I also went over some of our recent PRs where we deleted a lot of styles and restored a few styles where I think too much got removed.

I may try to use our diffy account to compare this to before all the CSS changes to see if there are any remaining differences.

biz123 · 2020-05-22T14:06:16Z

Here are the desktop layouts on Diffy comparing this branch with 1.x:

biz123 · 2020-05-22T14:09:53Z

Here's the mobile comparison:

biz123 · 2020-05-26T14:24:55Z

I feel like we might be going back and forth a bit between keeping CSS bare-bones vs preserving exact previous appearance from 1.x. Maybe we can use https://palantir.atlassian.net/browse/FS-47 to sort this out where we can preserve a lot of previous theming but allow that theming to be disabled as libraries by component.

nstriedinger and others added 2 commits May 8, 2020 14:49

mess around with layout

98191a8

adds ability to change column order on mobile and/or desktop

484dd7a

nstriedinger added 3 commits May 12, 2020 11:10

add onresize

5e54afd

Merge branch 'test-layout-things' of github.com:palantirnet/federated…

f9e6b79

…-search-react into test-layout-things

use our breakpoint

8a1d512

biz123 reviewed May 14, 2020

View reviewed changes

biz123 assigned nstriedinger May 14, 2020

nstriedinger added 5 commits May 14, 2020 12:10

add some checks

5b45520

check for vars

b68284f

update env example

a4fb9c8

code cleanup

e7bbbd3

fix reverse

19c2a6a

biz123 changed the title ~~Mess around with layout~~ FS-9 Mess around with layout (proof of concept) May 14, 2020

biz123 requested a review from agentrickard May 14, 2020 22:15

match default layout columns to previous

3382e1f

biz123 reviewed May 14, 2020

View reviewed changes

agentrickard reviewed May 15, 2020

View reviewed changes

biz123 added 5 commits May 18, 2020 07:14

restores container styles

cbf2347

border-box fix

23a4e26

uses percentage default for gap to match previous but em value when c…

8b4d040

…ustomized

review of CSS, adding back a few styles that may have been accidental…

4d6dd5a

…ly deleted

merge3 develop and fix conflicts

85c2b2e

biz123 reviewed May 18, 2020

View reviewed changes

biz123 added 3 commits May 21, 2020 08:05

matches 1.x columns and padding

a8e9762

adjust aside to visually match v 1.x

127bf45

margin tweak

c2fd448

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nstriedinger commented May 8, 2020 •

edited by biz123

Loading

biz123 commented May 11, 2020

biz123 commented May 11, 2020

biz123 May 14, 2020

biz123 May 14, 2020

biz123 commented May 14, 2020

biz123 May 14, 2020

biz123 commented May 14, 2020

biz123 May 14, 2020

biz123 commented May 14, 2020

agentrickard commented May 15, 2020

agentrickard commented May 15, 2020

agentrickard May 15, 2020

biz123 May 18, 2020 •

edited

Loading

biz123 May 18, 2020

biz123 May 18, 2020

biz123 commented May 18, 2020 •

edited

Loading

biz123 commented May 22, 2020

biz123 commented May 22, 2020

biz123 commented May 26, 2020 •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

nstriedinger commented May 8, 2020 • edited by biz123 Loading

biz123 commented May 11, 2020

biz123 commented May 11, 2020

biz123 May 14, 2020

Choose a reason for hiding this comment

biz123 May 14, 2020

Choose a reason for hiding this comment

biz123 commented May 14, 2020

biz123 May 14, 2020

Choose a reason for hiding this comment

biz123 commented May 14, 2020

biz123 May 14, 2020

Choose a reason for hiding this comment

biz123 commented May 14, 2020

agentrickard commented May 15, 2020

agentrickard commented May 15, 2020

agentrickard May 15, 2020

Choose a reason for hiding this comment

biz123 May 18, 2020 • edited Loading

Choose a reason for hiding this comment

biz123 May 18, 2020

Choose a reason for hiding this comment

biz123 May 18, 2020

Choose a reason for hiding this comment

biz123 commented May 18, 2020 • edited Loading

biz123 commented May 22, 2020

biz123 commented May 22, 2020

biz123 commented May 26, 2020 • edited Loading

nstriedinger commented May 8, 2020 •

edited by biz123

Loading

biz123 May 18, 2020 •

edited

Loading

biz123 commented May 18, 2020 •

edited

Loading

biz123 commented May 26, 2020 •

edited

Loading