Merge pull request #52 from eyalroth/dev

Merge dev to master

Author: eyalroth

.env.development

@@ -1,2 +1,3 @@
 URL="http://localhost:8000"
-GOOGLE_ANALYTICS=UA-141926834-2
+GOOGLE_ANALYTICS=UA-141926834-2
+AUTO_RELOAD="true"

gatsby-browser.js

@@ -3,21 +3,9 @@ require("prismjs/plugins/line-numbers/prism-line-numbers.css")
 
 import littlefoot from 'littlefoot'
 import './src/assets/scss/littlefoot.scss'
-import './src/assets/scss/_progress.scss'
 import './src/assets/fonts/fontello/css/fontello.css'
 
-export const onServiceWorkerUpdateReady = () => {
-    const answer = window.confirm(
-      `This application has been updated. ` +
-        `Reload to display the latest version?`
-    )
-  
-    if (answer === true) {
-      window.location.reload()
-    }
-}
-
-export function onRouteUpdate({ location }) {
+export function onRouteUpdate() {
   addLittlefoot()
 }
 

gatsby-config.js

@@ -182,17 +182,15 @@ module.exports = {
     `gatsby-plugin-netlify`,
     `gatsby-plugin-robots-txt`,
     {
-      resolve: 'gatsby-plugin-page-progress-fork',
+      resolve: `gatsby-plugin-layout`,
       options: {
-        includePaths: [
-          { regex: '^/' },
-        ],
+          component: require.resolve(`./src/components/Layout/index.jsx`)
       }
     },
     {
-      resolve: `gatsby-plugin-layout`,
+      resolve: `gatsby-plugin-browser-reload`,
       options: {
-          component: require.resolve(`./src/components/Layout/index.jsx`)
+          autoReload: process.env.AUTO_RELOAD
       }
     },
   ],

netlify.toml

@@ -4,8 +4,10 @@
 
 [build.environment]
   GOOGLE_ANALYTICS = "UA-141926834-2"
+  AUTO_RELOAD = "false"
 
 [context.production]
 
 [context.production.environment]
-  GOOGLE_ANALYTICS = "UA-141926834-1"
+  GOOGLE_ANALYTICS = "UA-141926834-1"
+  AUTO_RELOAD = "true"

plugins/gatsby-plugin-browser-reload/gatsby-browser.js

@@ -0,0 +1,11 @@
+export function onServiceWorkerUpdateReady({}, pluginOptions ) {
+
+  const autoReload = pluginOptions.autoReload && pluginOptions.autoReload.toLowerCase() == 'true'
+  const answer = autoReload ||  window.confirm(
+    `This application has been updated. ` +
+      `Reload to display the latest version?`
+  )
+  if (answer === true) {
+    window.location.reload()
+  }
+}

plugins/gatsby-plugin-page-progress-fork/package.json plugins/gatsby-plugin-browser-reload/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gatsby-plugin-page-progress-fork",
+  "name": "gatsby-plugin-browser-reload",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

plugins/gatsby-plugin-page-progress-fork/gatsby-browser.js

@@ -60,9 +60,8 @@ $sidebar-width-pct: 0.25;
 $content-width-pct: 0.65;
 
 $max-layout-width: 1280px;
-$bg-width: $max-layout-width - 120px;
-$bg-shift: 110px;
-$content-max-width: 660px;
+$max-content-width: 660px;
+$bg-width: round($max-layout-width * 0.9);
 
 
 // breakpoint - base - handset (portrait)
@@ -79,17 +78,32 @@ $content-width-sm: 92vw;
 // breakpoint - md - xlarge tablet (portrait), tablet (landscape), xlarge handset (landscape)
 $layout-breakpoint-md: 900px;
 
-$sidebar-width-md: 100vw * $sidebar-width-pct;
-$content-width-md: 100vw * $content-width-pct;
+$sidebar-width-md: round($layout-breakpoint-md * $sidebar-width-pct);
+$content-width-md: round($layout-breakpoint-md * $content-width-pct);
 
-$sidebar-side-margin-md: 30px;
-$content-side-padding-md: calc(#{$sidebar-width-md} + #{$sidebar-side-margin-md} + 30px);
+$content-side-padding-md: round($max-layout-width * 0.04);
+$content-outer-position-md: $content-side-padding-md + $content-width-md;
+$content-gap-md: calc(100vw - #{$content-outer-position-md});
+$sidebar-side-margin-md:  calc(#{$content-outer-position-md} + (#{$content-gap-md} - #{$sidebar-width-md}) / 2);
+
+// breakpoint - xmd
+$layout-breakpoint-xmd: $bg-width;
+
+$sidebar-width-xmd: round($layout-breakpoint-xmd * $sidebar-width-pct);
+$content-width-xmd: min(round($layout-breakpoint-xmd * $content-width-pct), $max-content-width);
+
+$content-side-padding-xmd: calc(#{$content-side-padding-md} + 2.5vw);
+$content-outer-position-xmd: calc(#{$content-side-padding-xmd} + #{$content-width-xmd});
+$content-gap-xmd: calc(100vw - #{$content-outer-position-xmd});
+$sidebar-side-margin-xmd:  calc(#{$content-outer-position-xmd} + (#{$content-gap-xmd} - #{$sidebar-width-xmd}) / 6);
 
 // breakpoint - lg - laptop, xlarge tablet (landscape)
 $layout-breakpoint-lg: $max-layout-width;
 
-$sidebar-width-lg: $max-layout-width * $sidebar-width-pct;
-$content-width-lg: $max-layout-width * $content-width-pct;
+$sidebar-width-lg: round($max-layout-width * $sidebar-width-pct);
+$content-width-lg: min(round($max-layout-width * $content-width-pct), $max-content-width);
 
-$content-side-padding-lg: $sidebar-width-lg + $max-layout-width * 0.085;
-$sidebar-side-margin-lg: ($content-side-padding-lg - $sidebar-width-lg) / 2.5;
+$content-side-padding-lg: round($max-layout-width * 0.1);
+$content-outer-position-lg: $content-side-padding-lg + $content-width-lg;
+$content-gap-lg: $max-layout-width - $content-outer-position-lg;
+$sidebar-side-margin-lg: $content-outer-position-lg + round(($content-gap-lg - $sidebar-width-lg) / 2.5);

plugins/gatsby-plugin-page-progress-fork/progress.css

@@ -18,6 +18,12 @@
     }
 }
 
+@mixin breakpoint-xmd {
+    @media screen and (min-width: $layout-breakpoint-xmd) {
+        @content;
+    }
+}
+
 @mixin breakpoint-lg {
     @media screen and (min-width: $layout-breakpoint-lg) {
         @content

src/assets/scss/_progress.scss

@@ -5,6 +5,7 @@ import ContextConsumer, { ContextProviderComponent } from '../Context'
 import '../../assets/scss/init.scss'
 import Sidebar from '../Sidebar'
 import Footer from '../Footer'
+import ProgressBar from '../ProgressBar'
 import { Languages } from '../../consts/languages'
 import { Themes } from '../../consts/themes'
 import './style.scss'
@@ -17,12 +18,6 @@ class Layout extends React.Component {
   render() {
     const { children } = this.props
 
-    const sidebar = (
-      <ContextConsumer>
-          {context => (context.data.sidebar.isRendered) ? <Sidebar /> : null}
-      </ContextConsumer>
-    )
-
     const surface0 = (
       <div className="surface0"/>
     )
@@ -33,6 +28,18 @@ class Layout extends React.Component {
       </ContextConsumer>
     )
 
+    const progressBar = (
+      <ContextConsumer>
+          {context => (context.data.sidebar.isRendered) ? <ProgressBar /> : null}
+      </ContextConsumer>
+    )
+
+    const sidebar = (
+      <ContextConsumer>
+          {context => (context.data.sidebar.isRendered) ? <Sidebar /> : null}
+      </ContextConsumer>
+    )
+
     return (
       <CookiesProvider>
         <ContextProviderComponent>
@@ -49,11 +56,14 @@ class Layout extends React.Component {
 
               return (
                 <div className={`page-container ${languageCss} ${theme.cssClass}`}>
+                  {progressBar}
                   {surface0}
                   {surface1}
                   <div className="content-wrap">
                     {sidebar}  
-                    {children}
+                    <div className="content">
+                      {children}
+                    </div>
                   </div>
                   <Footer languageId={context.data.languageId} />
                 </div>