From d8569e5eae8d833ee4670bb6056b336a22d32646 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Wed, 21 Nov 2018 23:00:08 +0800
Subject: [PATCH] update layout for mobile devices

---
 index.html         | 11 +++++----
 src/css/style.scss | 58 +++++++++++++++++++++++++++++++++++++---------
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 3bccbcc..35439a1 100644
--- a/index.html
+++ b/index.html
@@ -85,11 +85,6 @@
 		<div class="header">
 			void.cat
 		</div>
-		<ins class="adsbygoogle" style="display:block; margin-left: auto; margin-right: auto;" data-ad-client="ca-pub-3289062345896209"
-		 data-ad-slot="9187315106" data-ad-format="auto" data-full-width-responsive="true"></ins>
-		<script>
-			(adsbygoogle = window.adsbygoogle || []).push({});
-		</script>
 		<div id="page-upload">
 			<div class="page-left" style="width: 100%">
 				<div id="dropzone">Click me!</div>
@@ -119,6 +114,12 @@
 		<div id="page-faq">
 
 		</div>
+		
+		<ins class="adsbygoogle" style="display:block; margin-left: auto; margin-right: auto;" data-ad-client="ca-pub-3289062345896209"
+		 data-ad-slot="9187315106" data-ad-format="auto" data-full-width-responsive="true"></ins>
+		<script>
+			(adsbygoogle = window.adsbygoogle || []).push({});
+		</script>
 	</div>
 	<!--<script type="text/javascript" src="src/js/Const.js" async></script>
 	<script type="text/javascript" src="src/js/Util.js" async></script>
diff --git a/src/css/style.scss b/src/css/style.scss
index 4ffe154..6187b21 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -18,12 +18,6 @@ html, body {
     background-color: #444;
 }
 
-@media (max-device-width: $page-width){
-    .page {
-        width: auto !important;
-    }
-}
-
 .page {
     width: $page-width;
     margin-left: auto;
@@ -185,12 +179,12 @@ html, body {
     grid-template-columns: 60% 40%;
 }
 
-.view-default span {
-    float: right;
+.view-default div {
+    line-height: 30px;
 }
 
-.view-default div:nth-child(4) {
-    grid-row-start: 5;
+.view-default span {
+    float: right;
 }
 
 .view-default .view-transfer-stats {
@@ -217,7 +211,7 @@ html, body {
     line-height: 100px;
     grid-column-start: 2;
     grid-row-start: 1;
-    grid-row-end: 1;
+    grid-row-end: 5;
 }
 
 .view-default .view-download-progress div:nth-child(1) {
@@ -231,4 +225,46 @@ html, body {
     height: 20px;
     width: 0px;
     margin-top: -20px;
+}
+
+@media (max-device-width: $page-width){
+    .page {
+        width: auto !important;
+        margin-top: 0;
+        border-radius: 0;
+    }
+
+    .header {
+        border-radius: 0;
+    }
+
+    .page-left { 
+        width: initial !important;
+        float: initial !important;
+    }
+
+    .page-right { 
+        width: initial !important;
+        float: initial !important;
+        margin-top: 10px;
+    }
+
+    .view-default {
+        grid-template-columns: 100%;
+    }
+
+    .view-default .btn-download {
+        line-height: 50px;
+        grid-column-start: 1;
+        grid-row-start: 5;
+        grid-row-end: initial;
+    }
+
+    #page-view .file-info {
+        grid-template-columns: none;
+    }
+
+    #page-view .file-info span {
+        float: right;
+    }
 }
\ No newline at end of file