Merge pull request #523 from Datawheel/release

Release

Author: jhmullen

app/App.css

@@ -84,7 +84,12 @@ td > a,
   transition: color 0.2s;
 
   /* interactions */
-  &:hover, &:focus {
+  /* increase visiblility when focusing via keyboard */
+  &:focus {
+    color: var(--sky-black);
+    text-decoration: underline;
+  }
+  &:hover {
     color: var(--sky);
   }
   &:active {
@@ -94,8 +99,7 @@ td > a,
   /* danger text */
   &.danger-text:hover,
   &.danger-text:focus {
-    color: var(--danger);
-    opacity: 0.8; /* approximate sky color value */
+    color: var(--danger-dark);
   }
 }
 
@@ -161,6 +165,13 @@ td > a,
     box-shadow: 0 2px 1em rgba(35, 50, 51, 0.15);
     z-index: 1;
   }
+
+  /* disabled state */
+  /* NOTE: remember to also set `tabIndex="-1"` */
+  &.is-disabled {
+    @add-mixin disable-field;
+    opacity: 0.3;
+  }
 }
 
 /* danger button */
@@ -235,6 +246,17 @@ blueprint overrides
   background-color: rgba(245, 245, 255, 0.7);
 }*/
 
+/* overlay in front of nav */
+.pt-portal,
+.pt-overlay {
+  z-index: 100;
+}
+
+/* give rando div a z-index so the content isn't hidden on mobile (wtf blueprint) */
+.pt-overlay div:not([class]){
+  z-index: 1;
+}
+
 .pt-input {
   border-radius: var(--radius-sm);
 }
@@ -264,7 +286,8 @@ blueprint overrides
   } */
 
   /* override blueprint disabled style */
-  &:disabled {
+  &:disabled,
+  &.pt-disabled {
     color: var(--white) !important;
     background-color: var(--light-2) !important;
   }
@@ -339,8 +362,8 @@ blueprint overrides
 
 /* fix dialog container bug */
 .pt-dialog-container {
-  width: 100vw;
-  height: 100vh;
+  @add-mixin absolute-expand;
+  position: fixed !important;
 }
 
 .pt-dialog {
@@ -352,6 +375,11 @@ blueprint overrides
   &.is-fullscreen {
     width: calc(100% - var(--gutter-lg));
     height: calc(100vh - var(--gutter-lg));
+
+    @add-mixin max-sm {
+      width: calc(100% - var(--gutter-sm));
+      height: calc(100vh - var(--gutter-sm));
+    }
   }
 
   /* center align alert contents */
@@ -556,8 +584,7 @@ label.pt-control  {
     color: var(--sky-dark);
 
     /* interactions */
-    /* NOTE: it's a div, so there's no :focus */
-    &:hover {
+    &:hover, &:focus {
       color: var(--sky);
     }
   }
@@ -585,19 +612,35 @@ layout
 ----------------------------------- */
 
 /* fix overflow */
+html,
 body {
-  overflow-y: auto;
   overflow-x: hidden;
 }
-/* if vh units are supported, move overflow to app */
-@supports (height: 100vh) {
-  body {
-    overflow-y: hidden;
+/* behind the bottom toolbar in iOS safari */
+body {
+  background-color: var(--sky-light);
+}
+
+/* prevent double overflow scrolling when overlays are open */
+/* NOTE: .pt-overlay-open is automatically applied to the body element */
+body.pt-overlay-open,
+body.pt-overlay-open #app {
+  overflow-y: hidden !important;
+
+  & .pt-overlay,
+  & .pt-overlay-backdrop {
+    overflow: hidden !important;
   }
-  #app {
+
+  & .pt-dialog {
+    overflow-y: auto;
+  }
+}
+
+/* inline dialog fixes */
+.pt-overlay-inline {
+  & .pt-dialog {
     overflow-y: auto;
-    overflow-x: hidden;
-    height: 100vh;
   }
 }
 
@@ -925,6 +968,12 @@ form field layout
     @add-mixin text-input-theme;
   }
 
+  /* min font size for mobile */
+  &.font-sm > input:not([type=submit]):not([type=file]),
+  &.font-sm > textarea {
+    font-size: 16px;
+  }
+
   /* textarea min/max height */
   & > textarea {
     min-height: 11rem;
@@ -1130,13 +1179,24 @@ form field layout
     padding-top: 0.25em;
     padding-bottom: 0.375em;
     opacity: 0;
+
+    /* hover & focus states */
+    &:hover ~ .fake-file-select:after,
+    &:focus ~ .fake-file-select:after {
+      background-color: var(--sky-black);
+    }
+
+    /* focus state */
+    &:focus ~ .fake-file-select {
+      background-color: var(--sky-light);
+    }
   }
   /* make real field and fake field take up width of container */
   & .field-input {
     width: 100%;
 
     /* interactions */
-    &:hover, &:focus {
+    &:hover {
       & ~ .fake-file-select {
         background-color: var(--white);
         border-color: var(--sky-dark);
@@ -1197,6 +1257,10 @@ form field layout
       text-align: center;
       border-radius: 1.5em;
     }
+    @add-mixin min-md {
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
   }
 }
 
@@ -1228,6 +1292,11 @@ form field layout
     @add-mixin font-md;
   }
 
+  /* icon color on :focus */
+  &:focus-within .pt-icon-calendar {
+    color: var(--sky-dark);
+  }
+
   /* THE PICKER */
   /* offset positioning, make it stop uncentering itself */
   & .pt-overlay {
@@ -1366,11 +1435,21 @@ utility classes
     display: none !important;
   }
 }
+.u-hide-above-xs {
+  @add-mixin min-xs {
+    display: none !important;
+  }
+}
 .u-hide-above-sm {
   @add-mixin min-sm {
     display: none !important;
   }
 }
+.u-hide-above-md {
+  @add-mixin min-md {
+    display: none !important;
+  }
+}
 
 /* vertially align child content via flexbox */
 .u-vertical-align-children {

app/App.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
-import {Canon, isAuthenticated} from "datawheel-canon";
+import {Canon, isAuthenticated} from "@datawheel/canon-core";
 import PropTypes from "prop-types";
 import Helmet from "react-helmet";
 
@@ -142,7 +142,7 @@ class App extends Component {
     const isAdmin = this.props.router.location.pathname.includes("admin") ? true : false;
 
     return (
-      <Canon id="app" className={bareRoute && "share-app"}>
+      <div id="app" className={bareRoute && "share-app"}>
         <Helmet link={ header.link } meta={ meta } />
         {
           !bareRoute && (location.href.includes("dev.") || location.href.includes("nightly."))
@@ -162,7 +162,7 @@ class App extends Component {
             { !isHome && !isAdmin ? <Clouds /> : null }
             <LoadingSpinner />
           </div> }
-      </Canon>
+      </div>
     );
 
   }

app/Islands.css

@@ -27,6 +27,7 @@ then add the theme name to the @each loop below */
   .island-$(theme) {
     /* set background image paths */
     & .island-image,
+    & .mobile-island-image,
     & > .island-link-image,
     & .lessonplan-header-image {
       background-image: url("/islands/island-$(theme).png");
@@ -59,8 +60,8 @@ then add the theme name to the @each loop below */
     }
     /* set color */
     & .island-path .code-block.is-done .side,
+    & .island-path .code-block.is-next .side,
     & .pt-dialog-header-title,
-
     & .lessonplan-toc > *,
     & .item-editor-inner h1,
     & .item-editor-inner h2 {
@@ -88,7 +89,9 @@ then add the theme name to the @each loop below */
     }
     & .button:not(.inverted-button):not(.danger-button),
     &.pt-button,
-    & .pt-button {
+    & .pt-button,
+    & .code-block.is-next,
+    & .code-block.is-done {
       background-color: var(--$(theme)-island-medium);
       border-color: var(--$(theme)-island-medium);
       /* interactions */
@@ -120,8 +123,7 @@ then add the theme name to the @each loop below */
       color: var(--$(theme)-island-dark);
 
       /* interactions */
-      /* NOTE: it's a div, so there's no :focus */
-      &:hover {
+      &:hover, &:focus {
         color: var(--$(theme)-island-medium);
       }
     }

app/components/CTA.css

@@ -4,12 +4,17 @@
 .cta {
   /* sizing */
   padding: 2.5rem var(--gutter-lg) 2rem var(--gutter-lg);
-  max-width: 47.5rem; /* 760px */
+  width: 47.5rem; /* 760px */
+  max-width: calc(100% - var(--gutter-xs));
   /* positioning */
   margin-left: auto;
   margin-right: auto;
-  margin-top: 10rem;
+  margin-top: 12rem;
 
+  /* decrease padding on small screens */
+  @add-mixin max-xs { padding: 1rem; }
+
+  /* scale up margin */
   @add-mixin min-xs { margin-top: 15rem; }
   @add-mixin min-sm { margin-top: 18rem; }
   @add-mixin min-lg { margin-top: calc(15% + 10vh); }

app/components/CTA.jsx

@@ -7,7 +7,7 @@ import "./CTA.css";
 
 import {Dialog} from "@blueprintjs/core";
 
-/** 
+/**
  * Call To Action Component, encourage users to sign up after visiting SEO-enable page
  */
 
@@ -30,7 +30,7 @@ class CTA extends Component {
 
     return (
       <div className="cta u-text-center">
-        
+
         {/* avatar */}
         <img className="cta-avatar-img" alt=""
           src="/avatars/avatar-excited-transparent.png"
@@ -45,7 +45,7 @@ class CTA extends Component {
         </h2>
 
         {/* login | signup button */}
-        <button className="cta-button pt-button pt-intent-primary font-md u-margin-top-md" onClick={this.authForm.bind(this, "signup")}>
+        <button className="cta-button button font-md u-margin-top-md" onClick={this.authForm.bind(this, "signup")}>
           { t("Home.GetStarted") }
         </button>
 

app/components/Clouds.css

@@ -1,5 +1,18 @@
+@import 'mixins.css';
+
+#Canon,
 #app {
-  background-image: linear-gradient(var(--sky) 0, var(--sky-light) 100%);
+  /* fixed gradient bg */
+  &:after {
+    /* pseudo stuff */
+    content: '';
+    display: block;
+    /* positioning */
+    @add-mixin absolute-expand;
+    position: fixed !important;
+    z-index: -1;
+    background-image: linear-gradient(var(--sky) 0, var(--sky-light) 100%);
+  }
 }
 
 #clouds {