Optimize responsive (#586)

* [all] Better mobile experience using body scroll and router * [all] Tweaking styling on spinner and search * [components] Smaller padding on mobile * [components] Nicer fullscreen dialog * [desk-tool] Not using position absolute on mobile * [components] Width on default dialog mobile
sanity-io · Feb 14, 2018 · 4ea1182 · 4ea1182
1 parent f2ae92d
commit 4ea1182
Show file tree

Hide file tree

Showing 22 changed files with 246 additions and 126 deletions.
diff --git a/packages/@sanity/components/src/buttons/styles/DefaultButton.css b/packages/@sanity/components/src/buttons/styles/DefaultButton.css
@@ -121,6 +121,17 @@
   @nest &:not(.disabled):hover {
     background-color: color(var(--default-button-color) a(90%));
   }
+
+  @nest &:not(.disabled) {
+    @nest &:hover {
+      background-color: color(var(--default-button-color) lightness(- 5%) a(10%));
+    }
+
+    @nest &:active {
+      background-color: color(var(--default-button-color) lightness(+ 10%) a(10%));
+      outline: 0;
+    }
+  }
 }
 
 .inverted {
@@ -313,6 +324,10 @@
   margin-right: var(--small-padding);
 }
 
+.onlyIcon .content {
+  display: block;
+}
+
 .onlyIcon .icon {
   margin-right: 0;
 }

diff --git a/packages/@sanity/components/src/dialogs/styles/DefaultDialog.css b/packages/@sanity/components/src/dialogs/styles/DefaultDialog.css
@@ -99,7 +99,7 @@
   animation-iteration-count: once;
   transform-origin: center;
   height: auto;
-  width: auto;
+  width: calc(100vw - var(--medium-padding) * 2);
   box-sizing: border-box;
   background-color: var(--body-bg);
   transition: all 0.3s linear;

diff --git a/packages/@sanity/components/src/dialogs/styles/FullscreenDialog.css b/packages/@sanity/components/src/dialogs/styles/FullscreenDialog.css
@@ -1,6 +1,7 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
+  composes: flexCenter from 'part:@sanity/base/theme/layout/positioning-style';
   position: fixed;
   top: 0;
   bottom: 0;
@@ -69,15 +70,15 @@
 }
 
 .inner {
-  @nest .centered & {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateY(-50%) translateX(-50%);
-    max-width: 40em;
-    font-size: 1em;
-    margin: 0 auto;
-    line-height: 1.5em;
+  box-sizing: border-box;
+  composes: lightScrollbars from "part:@sanity/base/theme/layout/scrolling-style";
+  composes: scrollY from "part:@sanity/base/theme/layout/scrolling-style";
+  max-height: calc(100vh - 200px);
+  max-width: calc(100vw - 3rem);
+
+  @media (--screen-medium) {
+    max-height: 90vh;
+    max-width: 80vw;
   }
 }
 

diff --git a/packages/@sanity/components/src/fieldsets/styles/DefaultFieldset.css b/packages/@sanity/components/src/fieldsets/styles/DefaultFieldset.css
@@ -72,23 +72,35 @@
 }
 
 .canFocus > .fieldset > .inner > .content {
-  padding: var(--medium-padding);
+  padding: var(--small-padding);
   border-radius: var(--border-radius-base);
   box-shadow: var(--component-box-shadow);
+
+  @media (--screen-medium) {
+    padding: var(--medium-padding);
+  }
 }
 
 .level1 > .fieldset > .inner > .content {
   background-color: var(--component-bg);
   box-shadow: var(--component-box-shadow);
-  padding: var(--medium-padding);
+  padding: var(--small-padding);
   border-radius: var(--border-radius-base);
+
+  @media (--screen-medium) {
+    padding: var(--medium-padding);
+  }
 }
 
 .level2 > .fieldset > .inner > .content {
   background-color: var(--component-bg);
   box-shadow: var(--component-box-shadow);
-  padding: var(--medium-padding);
+  padding: var(--small-padding);
   border-radius: var(--border-radius-base);
+
+  @media (--screen-medium) {
+    padding: var(--medium-padding);
+  }
 }
 
 .root {

diff --git a/packages/@sanity/components/src/loading/styles/Spinner.css b/packages/@sanity/components/src/loading/styles/Spinner.css
@@ -48,14 +48,12 @@
 .center {
   background-color: color(var(--body-bg) a(50%));
   z-index: var(--zindex-spinner);
-  position: fixed;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
 
   @media (--screen-medium) {
-    position: absolute;
     background-color: color(var(--body-bg) a(10%));
   }
 
@@ -89,7 +87,8 @@
   composes: center;
   background-color: color(var(--body-bg) a(90%));
   position: fixed;
-  z-index: var(--zindex-spinner);
+  width: 100vw;
+  height: 100vw;
 }
 
 .root svg {

diff --git a/packages/@sanity/components/src/panes/DefaultPane.js b/packages/@sanity/components/src/panes/DefaultPane.js
@@ -18,7 +18,6 @@ class Pane extends React.PureComponent {
     renderFunctions: PropTypes.func,
     children: PropTypes.node,
     isSelected: PropTypes.bool,
-    isScrollable: PropTypes.bool,
     onMenuToggle: PropTypes.func,
     className: PropTypes.string,
     styles: PropTypes.object,
@@ -110,14 +109,13 @@ class Pane extends React.PureComponent {
   }
 
   render() {
-    const {title, children, isSelected, renderFunctions, renderMenu, isCollapsed, isScrollable, styles} = this.props
+    const {title, children, isSelected, renderFunctions, renderMenu, isCollapsed, styles} = this.props
 
     return (
       <div
         className={`
           ${isCollapsed ? styles.isCollapsed : styles.root}
-          ${isScrollable ? styles.isScrollable : ''}
-          ${isSelected ? styles.isActive : ''}
+          ${isSelected ? styles.isActive : styles.isDisabled}
         `}
         ref={this.setRootElement}
       >

diff --git a/packages/@sanity/components/src/panes/styles/DefaultPane.css b/packages/@sanity/components/src/panes/styles/DefaultPane.css
@@ -3,13 +3,6 @@
 .root {
   display: flex;
   flex-direction: column;
-
-  /* On mobile the panes are just stacked on top of each other */
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   background-color: var(--body-bg);
 
   @media (--screen-medium) {
@@ -24,6 +17,18 @@
   }
 }
 
+.isDisabled {
+  display: none; /* hide on mobile */
+
+  @media (--screen-medium) {
+    display: flex;
+  }
+}
+
+.isActive {
+  display: flex;
+}
+
 .isCollapsed {
   @media (--screen-medium) {
     composes: root;
@@ -170,17 +175,26 @@
 }
 
 .scrollContainer {
-  composes: lightScrollbars from "part:@sanity/base/theme/layout/scrolling-style";
-  composes: scrollY from "part:@sanity/base/theme/layout/scrolling-style";
-  position: absolute;
-  top: -3rem;
-  padding-top: 3rem;
-  left: 0;
-  right: 0;
-  height: calc(100% + 3rem);
   display: block;
   box-sizing: border-box;
 
+  @media (--screen-medium) {
+    composes: lightScrollbars from "part:@sanity/base/theme/layout/scrolling-style";
+    composes: scrollY from "part:@sanity/base/theme/layout/scrolling-style";
+    position: absolute;
+    top: -3rem;
+    padding-top: 3rem;
+    left: 0;
+    right: 0;
+    height: calc(100% + 3rem);
+  }
+
+  /* @media (--max-screen-medium) {
+    overflow: visible;
+    position: relative;
+    height: auto;
+  } */
+
   @nest .isCollapsed & {
     display: none;
   }

diff --git a/packages/@sanity/components/src/panes/styles/SplitController.css b/packages/@sanity/components/src/panes/styles/SplitController.css
@@ -1,15 +1,17 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
+  @media (--screen-medium) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
 }
 
 .vertical {

diff --git a/packages/@sanity/default-layout/src/components/DefaultLayout.js b/packages/@sanity/default-layout/src/components/DefaultLayout.js
@@ -152,6 +152,17 @@ export default withRouterHOC(
               <span className={styles.createButtonText}>New</span>
               <Ink duration={200} opacity={0.1} radius={200} />
             </a>
+            <div className={styles.mobileCreateButton}>
+              <Button
+                kind="simple"
+                onClick={this.handleCreateButtonClick}
+                title="Create new item"
+                icon={PlusIcon}
+              >
+                New
+              </Button>
+            </div>
+
             <div className={styles.mobileMenuButton}>
               <Button
                 kind="simple"

diff --git a/packages/@sanity/default-layout/src/components/Search.js b/packages/@sanity/default-layout/src/components/Search.js
@@ -269,24 +269,35 @@ export default enhanceClickOutside(class Search extends React.Component {
             ref={this.setInput}
 
           />
-          <div className={styles.spinner}>
-            {isSearching && <Spinner />}
-          </div>
         </div>
-        {isOpen && hits && hits.length > 0 && (
-          <div className={styles.listContainer}>
-            <ul
-              className={styles.hits}
-              onKeyDown={this.handleKeyDown}
-              onKeyPress={this.handleKeyPress}
-              ref={this.setListElement}
-            >
-              {hits.map((hit, index) => (
-                <li key={hit._id} className={styles.hit}>
-                  {this.renderItem(hit, index)}
-                </li>
-              ))}
-            </ul>
+        {isOpen && (inputValue || isSearching || hits > 0) && (
+          <div className={styles.result}>
+            <div className={styles.spinner}>
+              {isSearching && <Spinner />}
+            </div>
+            {
+              inputValue && !isSearching && (!hits || hits.length === 0) && (
+                <div className={styles.noHits}>Could not find <strong>&ldquo;{inputValue}&rdquo;</strong></div>
+              )
+            }
+            {
+              !isSearching && hits && hits.length > 0 && (
+                <div className={styles.listContainer}>
+                  <ul
+                    className={styles.hits}
+                    onKeyDown={this.handleKeyDown}
+                    onKeyPress={this.handleKeyPress}
+                    ref={this.setListElement}
+                  >
+                    {hits.map((hit, index) => (
+                      <li key={hit._id} className={styles.hit}>
+                        {this.renderItem(hit, index)}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )
+            }
           </div>
         )}
       </div>