highperfocused/void.cat
1
0
Fork 0
mirror of https://git.v0l.io/Kieran/void.cat.git synced 2025-09-28 22:32:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

update layout for mobile devices

Browse Source
This commit is contained in:
Kieran
2018-11-21 23:00:08 +08:00
parent 02fb1ef4e8
commit d8569e5eae
2 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -85,11 +85,6 @@
<div class="header"> <div class="header">
void.cat void.cat
</div> </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 id="page-upload">
<div class="page-left" style="width: 100%"> <div class="page-left" style="width: 100%">
<div id="dropzone">Click me!</div> <div id="dropzone">Click me!</div>
@@ -119,6 +114,12 @@
<div id="page-faq"> <div id="page-faq">
</div> </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> </div>
<!--<script type="text/javascript" src="src/js/Const.js" async></script> <!--<script type="text/javascript" src="src/js/Const.js" async></script>
<script type="text/javascript" src="src/js/Util.js" async></script> <script type="text/javascript" src="src/js/Util.js" async></script>

58
src/css/style.scss
View File

@@ -18,12 +18,6 @@ html, body {
background-color: #444; background-color: #444;
} }
@media (max-device-width: $page-width){
.page {
width: auto !important;
}
}
.page { .page {
width: $page-width; width: $page-width;
margin-left: auto; margin-left: auto;
@@ -185,12 +179,12 @@ html, body {
grid-template-columns: 60% 40%; grid-template-columns: 60% 40%;
} }
.view-default span { .view-default div {
float: right; line-height: 30px;
} }
.view-default div:nth-child(4) { .view-default span {
grid-row-start: 5; float: right;
} }
.view-default .view-transfer-stats { .view-default .view-transfer-stats {
@@ -217,7 +211,7 @@ html, body {
line-height: 100px; line-height: 100px;
grid-column-start: 2; grid-column-start: 2;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 5;
} }
.view-default .view-download-progress div:nth-child(1) { .view-default .view-download-progress div:nth-child(1) {
@@ -231,4 +225,46 @@ html, body {
height: 20px; height: 20px;
width: 0px; width: 0px;
margin-top: -20px; 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;
}
} }