(fix) general layout fixes

omni · Mar 19, 2019 · 425c896 · 425c896
1 parent 9722406
commit 425c896
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 30 deletions.
diff --git a/src/assets/images/themes/ethereum-classic/background/bg-pattern.svg b/src/assets/images/themes/ethereum-classic/background/bg-pattern.svg
diff --git a/src/assets/stylesheets/application.css b/src/assets/stylesheets/application.css
diff --git a/src/assets/stylesheets/application/_events.scss b/src/assets/stylesheets/application/_events.scss
@@ -4,7 +4,7 @@
   padding-top: 40px;
 
   .events-container {
-    width: 960px;
+    width: $container-width;
 
     .events-header {
       display: flex;

diff --git a/src/assets/stylesheets/application/_pattern-background.scss b/src/assets/stylesheets/application/_pattern-background.scss
@@ -1,4 +1,5 @@
 .pattern-background {
+    margin-left: auto;
     overflow: hidden;
     padding-top: 25px;
     width: 15%;
@@ -11,7 +12,7 @@
       min-width: 192px;
     }
 
-    @media screen and (max-width: $mobile-width) {
+    @media screen and (max-width: $tablet-width-landscape) {
       display: none;
     }
   }
diff --git a/src/assets/stylesheets/application/_statistics.scss b/src/assets/stylesheets/application/_statistics.scss
@@ -5,10 +5,16 @@
   .statistics-page-container {
     display: flex;
     flex-direction: column;
+    max-width: $container-width;
     width: 70%;
 
-    @media screen and (max-width: $tablet-width) {
-      width: 90%;
+    @media screen and (max-width: $tablet-width-landscape) {
+      width: 100%;
+    }
+
+    @media screen and (max-width: $mobile-width) {
+      padding-left: 15px;
+      padding-right: 15px;
     }
 
     .statistics-title {
@@ -60,20 +66,11 @@
   }
 
   .statistics-left-container {
+    margin-right: auto;
     padding-top: 25px;
     width: 15%;
 
-    @media screen and (max-width: $mobile-width) {
-      display: none;
-    }
-  }
-
-  .statistics-right-container {
-    overflow: hidden;
-    padding-top: 25px;
-    width: 15%;
-
-    @media screen and (max-width: $mobile-width) {
+    @media screen and (max-width: $tablet-width-landscape) {
       display: none;
     }
   }

diff --git a/src/assets/stylesheets/application/_status.scss b/src/assets/stylesheets/application/_status.scss
@@ -5,10 +5,16 @@
   .status-page-container {
     display: flex;
     flex-direction: column;
+    max-width: $container-width;
     width: 70%;
 
-    @media screen and (max-width: $tablet-width) {
-      width: 90%;
+    @media screen and (max-width: $tablet-width-landscape) {
+      width: 100%;
+    }
+
+    @media screen and (max-width: $mobile-width) {
+      padding-left: 15px;
+      padding-right: 15px;
     }
 
     .status-title {
@@ -105,10 +111,11 @@
   }
 
   .status-left-container {
+    margin-right: auto;
     padding-top: 25px;
     width: 15%;
 
-    @media screen and (max-width: $mobile-width) {
+    @media screen and (max-width: $tablet-width-landscape) {
       display: none;
     }
   }

diff --git a/src/assets/stylesheets/helpers/_variables.scss b/src/assets/stylesheets/helpers/_variables.scss
@@ -2,9 +2,10 @@ $base-images-path: '../images';
 
 $container-width: 960px;
 $container-responsive-width: 980px;
+$tablet-width-landscape: 1024px;
 $tablet-width: 768px;
 $mobile-width: 414px;
 $small-mobile-width: 360px;
 
 $footer-height_desktop: 66px;
-$footer-height_mobile: 98px;
+$footer-height_mobile: 160px;