fix mobile version

DSchougaard · Mar 16, 2016 · fdd0fc8 · fdd0fc8
1 parent ac60477
commit fdd0fc8
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 23 deletions.
diff --git a/src/app/pages/components/mail/composeBox/compose.html b/src/app/pages/components/mail/composeBox/compose.html
@@ -16,7 +16,7 @@
     <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
   </div>
 </div>
-<div class="compose-footer">
+<div class="compose-footer clearfix">
   <button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
   <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
   <div class="footer-controls">

diff --git a/src/app/theme/components/baPanel/baPanelBlurHelper.service.js b/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
@@ -28,6 +28,7 @@
     this.getBodyBgImageSizes = function() {
       var elemW = document.documentElement.clientWidth;
       var elemH = document.documentElement.clientHeight;
+      if(elemW <= 640) return;
       var imgRatio = (image.height / image.width);       // original img ratio
       var containerRatio = (elemH / elemW);     // container ratio
 

diff --git a/src/assets/img/blur-bg-mobile.jpg b/src/assets/img/blur-bg-mobile.jpg
diff --git a/src/sass/app/_email.scss b/src/sass/app/_email.scss
@@ -729,7 +729,7 @@
 }
 
 .modal .modal-dialog.modal-compose {
-  width: 398px;
+  max-width: 398px;
   position: fixed;
   bottom: 0;
   right: 0;
@@ -738,6 +738,7 @@
   .form-control, .bootstrap-tagsinput input {
     @include placeholderStyle($default-text, 1);
     color: $default-text;
+    border-radius: 0;
   }
   .ta-toolbar {
     .btn {
@@ -754,6 +755,12 @@
   @include overrideColors($default-text)
 }
 
+@media (max-width: 640px) {
+  .modal .modal-dialog.modal-compose {
+    max-height: 600px;
+  }
+}
+
 body.badmin-transparent {
   .mail-navigation-container {
     overflow: hidden;

diff --git a/src/sass/app/_iconsPage.scss b/src/sass/app/_iconsPage.scss
@@ -38,26 +38,35 @@ a.see-all-icons {
 }
 
 .kameleon-row {
+  display: inline-block;
+  min-width: 102px;
   width: 20%;
-  float: left;
-  min-height: 80px;
-  position: relative;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 12px;
-  & > div {
-    width: 70%;
-  }
   .kameleon-icon {
-    max-width: 84px;
+    padding:0 10px;
     img {
-      width: 100%;
-      min-width: 81px;
-      min-height: 81px;
+      width: 81px;
     }
   }
 }
 
+@media (max-width: 750px) {
+  .kameleon-row {
+    width: 25%;
+  }
+}
+
+@media (max-width: 550px) {
+  .kameleon-row {
+    width: 33%;
+  }
+}
+
+@media (max-width: 430px) {
+  .kameleon-row {
+    width: 50%;
+  }
+}
+
 .kameleon-icon-tabs {
   max-width: 84px;
   img {
@@ -111,9 +120,4 @@ a.see-all-icons {
   }
 }
 
-@media (max-width: 1500px) and (min-width: $resL), (max-width: $resS) {
-  .kameleon-row {
-    width: 25%;
-  }
-}
 
diff --git a/src/sass/app/_typography.scss b/src/sass/app/_typography.scss
@@ -57,7 +57,7 @@ h5 {
     }
 
     .panel.with-scroll .panel-body{
-      height: 100%;
+      height: calc(100% - 45px);
     }
 
     .panel-content{
@@ -334,6 +334,7 @@ a.learn-more {
   height: 400px;
   img {
     height: 100%;
+    width: 100%;
     display: block
   }
 }
@@ -422,7 +423,7 @@ a.learn-more {
 
 .panel.banner-column-panel {
   padding: 0;
-  margin-bottom: 50px;
+  margin-bottom: 90px;
 
   .panel-body{
     padding: 0;

diff --git a/src/sass/theme/_layout.scss b/src/sass/theme/_layout.scss
@@ -18,6 +18,12 @@ body {
   @include main-background();
 }
 
+@media (max-width: 640px) {
+  body {
+    background-image: url($images-root + 'blur-bg-mobile.jpg');
+  }
+}
+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
 {
   html{

diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss
@@ -82,6 +82,12 @@ $panel-heading-font-size: 16px;
   transition: none;
 }
 
+@media (max-width: 640px) {
+  .panel-blur {
+    background: transparent;
+  }
+}
+
 .panel-primary {
   > .panel-heading {
     color: $primary;

diff --git a/src/sass/theme/dashboard/_trafficChart.scss b/src/sass/theme/dashboard/_trafficChart.scss
@@ -226,9 +226,36 @@
   }
 }
 
+
+@media (max-width: 380px){
+
+  .traffic-chart{
+    width: 240px;
+  }
+
+  .canvas-holder{
+    width: 240px;
+    height: 240px;
+  }
+
+  .chart-bg {
+    top: 30px;
+  }
+}
+@media (max-width: 320px){
+  .chart-bg {
+    left: 50px;
+    top: 50px;
+    width: 142px;
+    height: 142px;
+  }
+}
+
+
 body.badmin-transparent{
   .traffic-chart canvas{
     border: 10px solid rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
     border-radius: 150px;
   }
 }
diff --git a/src/sass/theme/skins/_02_transparent.scss b/src/sass/theme/skins/_02_transparent.scss
@@ -1,6 +1,6 @@
 body.badmin-transparent {
   @include overrideColors(#fff);
-  @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
+  @include overridePanelBg(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
   .default-color {
     color: $default-text !important;;
   }