Mobile fixes.

ntslive · Sep 6, 2017 · b89970e · b89970e
1 parent 8825e80
commit b89970e
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -47,6 +47,8 @@
 
 <body>
 
+<div id="bg"></div>
+
 <div id="header">
     <div class="header__left" >
         <a id="nts-logo" href="http://www.nts.live" target="_blank"> </a>
@@ -89,7 +91,6 @@
 
 <div id="app"></div>
 
-<canvas id="collage-canvas"></canvas>
 
 </body>
 

diff --git a/public/css/style.min.css b/public/css/style.min.css
diff --git a/public/css/style.min.css.map b/public/css/style.min.css.map
diff --git a/public/img/bg_mobile.jpg b/public/img/bg_mobile.jpg
diff --git a/public/js/app.min.js b/public/js/app.min.js
diff --git a/public/js/app.min.js.map b/public/js/app.min.js.map
diff --git a/react/Collage/Collage.jsx b/react/Collage/Collage.jsx
@@ -97,6 +97,7 @@ class Collage extends React.Component {
     renderCanvas() {
         console.log("rendering canvas");
         let that = this;
+        $()
         this.canvas = new fabric.Canvas('collage-canvas');
 
         /** Handle canvas Resizing **/
@@ -120,6 +121,8 @@ class Collage extends React.Component {
     render() {
         return (
             <div id="collage">
+                <canvas id="collage-canvas" > </canvas>
+
                 {this.renderCanvas()}
             </div>
         )

diff --git a/react/react-index.jsx b/react/react-index.jsx
@@ -126,6 +126,10 @@ const reactState = {
 const store = createStore(reducers, reactState, applyMiddleware(logger, thunk));
 
 class DesktopApp extends React.Component {
+    componentWillMount() {
+        $('body').append('<canvas id="collage-canvas"></canvas>');
+    }
+
     render() {
         return (
             <div>

diff --git a/style.scss b/style.scss
@@ -20,6 +20,12 @@ $text-color: black;
 }
 
 body {
+}
+
+#bg {
+    position: fixed;
+    top: 0; bottom: 0;
+    left: 0; right: 0;
     background: url('../img/bg.jpg') no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -31,16 +37,6 @@ a {
     color: $text-color;
     text-decoration: none;
 
-    //-webkit-transition: opacity 0.15s;
-    //-moz-transition: opacity 0.15s;
-    //-ms-transition: opacity 0.15s;
-    //-o-transition: opacity 0.15s;
-    //transition: opacity 0.15s;
-
-    //&:hover {
-    //    text-decoration: none;
-    //    opacity: 0.7;
-    //}
     &:visited {
         color: $text-color;
     }
@@ -281,8 +277,8 @@ $mq-desktop: "(min-width: 1025px) and (max-width: 1499px)";
 $mq-lg-desktop: "(min-width: 1500px)";
 $mq-md-desktop: "(min-width: 1190px) and (max-width: 1499px)";
 $mq-sm-desktop: "(min-width: 1025px) and (max-width: 1190px)";
-$mq-tablet: "(min-width: 500px) and (max-width: 1024px)";
-$mq-phone: "(max-width: 500px)";
+$mq-tablet: "(min-width: 768px) and (max-width: 1024px)";
+$mq-phone: "(max-width: 767px)";
 
 img {
     max-width: 100%;
@@ -356,12 +352,34 @@ img {
 }
 
 @media #{$mq-phone} {
+    #bg {
+        z-index: -1;
+        background: url('../img/bg_mobile.jpg') no-repeat center center fixed;
+        -webkit-background-size: cover;
+        -moz-background-size: cover;
+        -o-background-size: cover;
+        background-size: cover;
+    }
     #collage-canvas {
         display: none;
     }
     #header {
         display: none;
     }
+
+    #pre-save-link {
+        width: 116px;
+        span {
+            padding-right: 1px;
+            padding-bottom: 6px;
+        }
+    }
+    #pre-order-link {
+        width: 129px;
+        span {
+            padding-bottom: 6px;
+        }
+    }
 }