feat: Display vertical counter on mobile

dawidjaniga · Jul 4, 2019 · 6bad9fb · 6bad9fb
1 parent 0de8637
commit 6bad9fb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/examples/bundle.js b/examples/bundle.js
@@ -411,7 +411,7 @@
         _this.initPolygons();
       };
 
-      if (!window.google.maps) {
+      if (!window.google || !window.google.hasOwnProperty('maps')) {
         this.appendMapScriptToDocument();
       }
     }
@@ -567,7 +567,7 @@
     }
   }
 
-  var css = ".map-countdown {\n\tposition: relative;\n    pointer-events: none;\n}\n\n.map-countdown__countdown {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: space-around;\n    z-index: 100;\n    width: 100%;\n    height: 100%;\n}\n\n.map-countdown__item {\n\twidth: 12%;\n}\n.map-countdown__number {\n\tcolor: #FFF;\n\tfont-size: 50pt;\n\tfont-family: 'Raleway', sans-serif;\n\tborder-bottom: 2px solid;\n\tfont-weight: 500;\n}\n.map-countdown__number--days {\n\tborder-color: #202808;\n}\n.map-countdown__number--hours {\n\tborder-color: #643627;\n}\n.map-countdown__number--minutes {\n\tborder-color: #822d76;\n}\n.map-countdown__number--seconds {\n\tborder-color: #afd02a;\n}\n.map-countdown__label {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    margin-top: 10%;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__title {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__map {\n    width: 100%;\n    height: 100%;\n    min-height: 35vh;\n}";
+  var css = ".map-countdown {\n\tposition: relative;\n    pointer-events: none;\n}\n\n.map-countdown__countdown {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: space-around;\n    z-index: 100;\n    width: 100%;\n    height: 100%;\n}\n\n.map-countdown__item {\n\twidth: 12%;\n}\n.map-countdown__number {\n\tcolor: #FFF;\n\tfont-size: 50pt;\n\tfont-family: 'Raleway', sans-serif;\n\tborder-bottom: 2px solid;\n\tfont-weight: 500;\n}\n.map-countdown__number--days {\n\tborder-color: #202808;\n}\n.map-countdown__number--hours {\n\tborder-color: #643627;\n}\n.map-countdown__number--minutes {\n\tborder-color: #822d76;\n}\n.map-countdown__number--seconds {\n\tborder-color: #afd02a;\n}\n.map-countdown__label {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    margin-top: 10%;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__title {\n\tcolor: #FFF;\n    text-transform: uppercase;\n    font-weight: 100;\n    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;\n}\n\n.map-countdown__map {\n    width: 100%;\n    height: 100%;\n    min-height: 50vh;\n}\n\n@media (max-width: 600px) {\n    .map-countdown__countdown {\n        flex-direction: column;\n        height: 100vh;\n    }\n    \n    .map-countdown__item {\n        width: 100%;\n        display: flex;\n        flex-direction: row;\n        justify-content: space-around;\n        align-items: center;\n    }\n    \n}";
   styleInject(css);
 
   var MapCountdown =

diff --git a/examples/routePoints.js b/examples/routePoints.js
diff --git a/src/style.css b/src/style.css
@@ -53,5 +53,21 @@
 .map-countdown__map {
     width: 100%;
     height: 100%;
-    min-height: 35vh;
+    min-height: 50vh;
+}
+
+@media (max-width: 600px) {
+    .map-countdown__countdown {
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    .map-countdown__item {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+    }
+
 }