feat: mobile fix, transitions

3box · May 21, 2020 · 03d1169 · 03d1169
1 parent b874f15
commit 03d1169
Show file tree

Hide file tree

Showing 9 changed files with 373 additions and 146 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -86,9 +86,9 @@ workflows:
       - deploy-dev:
           requires:
             - test-and-build
-          filters:
-            branches:
-              only: develop
+          # filters:
+          #   branches:
+          #     only: develop
       - deploy-prod:
           requires:
             - test-and-build

diff --git a/iframe/css/style.scss b/iframe/css/style.scss
@@ -66,6 +66,26 @@ button {
   }
 }
 
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+
+}
+
+@keyframes slideInFromBottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+
+}
+
 .card {
   width: 420px;
   border: 1px solid $borderColor;
@@ -77,13 +97,32 @@ button {
   box-shadow: 0px 4px 10px 1px #00000025;
   margin-top: 10px;
   margin-left: 10px;
+  position: absolute;
 }
 
+@mixin slide {
+  animation-duration: 0.7s;
+  animation-timing-function: ease-out;
+  animation-delay: 0s;
+  animation-iteration-count: 1;
+}
+
+.slideLeft {
+  @include slide;
+  animation-name: slideInFromLeft;
+}
+
+.slideBottom {
+  @include slide;
+  animation-name: slideInFromBottom;
+}
+
+
 .cardMobile {
-  width: 85vw !important;
+  width: 100vw !important;
   height: 100vh !important;
   justify-content: flex-start !important;
-  margin-top: 0px !important;
+  margin-top: 20px !important;
   margin-left: 0px !important;
 }
 

diff --git a/iframe/html/template.js b/iframe/html/template.js
@@ -5,7 +5,7 @@ const capitalizeFirst = string => string.charAt(0).toUpperCase() + string.slice(
 const spaceString = (spaces) => spaces.join(', ')
 
 const template = (data,isMobile) => `
-  <div class='${style.card} ${isMobile ? style.cardMobile : ''}'>
+  <div class='${style.card} ${isMobile ? style.cardMobile : ''} ${isMobile && !data.error ? style.slideBottom : !data.error ? style.slideLeft : ''}'>
     <div class=${style.controls}>
       <div class=${style.controls_logo}>
         <a

diff --git a/iframe/index.js b/iframe/index.js
@@ -9,11 +9,6 @@ store.remove('error')
  *  UI Window Functions
  */
 
-window.handleBrokenImage = (image) => {
-  image.onerror = "";
-  document.getElementById("siteFavicon").style.display = 'none';
-}
-
 const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
 const checkIsMobile = () => mobileRegex.test(navigator.userAgent)