Better links on bottom and displaying max file size

This commit is contained in:
Pitu 2017-01-17 20:02:32 -03:00
parent 66f4961c38
commit 410c702b2d
3 changed files with 22 additions and 28 deletions

View File

@ -15,9 +15,10 @@
<p id="b">
<img class='logo' src="/images/logo.png">
</p>
<h1 id="bulma" class="title">loli-safe</h1>
<h2 id="modern-framework" class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
<h1 class="title">loli-safe</h1>
<h2 class="subtitle">A <strong>modern</strong> self-hosted file upload service</h2>
<h3 class="subtitle" id="maxFileSize"></h2>
<div class="columns">
<div class="column is-hidden-mobile"></div>
<div class="column" id='uploadContainer'>
@ -31,23 +32,9 @@
<div class="column is-hidden-mobile"></div>
</div>
<div class="columns">
<div class="column is-hidden-mobile"></div>
<div class="column"><a id='panel' href="/panel" target="_blank" class="is-danger">Dashboard</a></div>
<div class="column is-hidden-mobile"></div>
</div>
<div class="columns">
<div class="column is-hidden-mobile"></div>
<div class="column">
<p>
<a href="https://github.com/kanadeko/loli-safe" target="_blank" class="is-danger">View on Github</a>
|
<a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj/related" target="_blank" class="is-danger">Chrome extension</a>
</p>
</div>
<div class="column is-hidden-mobile"></div>
</div>
<h3 id="links">
<a href="https://github.com/kanadeko/loli-safe" target="_blank" class="is-danger">View on Github</a><span>|</span><a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj/related" target="_blank" class="is-danger">Chrome extension</a><span>|</span><a href="/panel" target="_blank" class="is-danger">Dashboard</a>
</h3>
<div id="uploads">
<div id="template" class="columns">

View File

@ -2,7 +2,7 @@
HOME
------------------ */
#b {
section#home #b {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 1.5s;
@ -23,7 +23,7 @@
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
}
div#dropzone {
section#home div#dropzone {
border: 1px solid #dbdbdb;
background-color: rgba(0, 0, 0, 0);
border-color: #ff3860;
@ -44,18 +44,25 @@ div#dropzone {
cursor: pointer;
}
div#dropzone:hover {
section#home div#dropzone:hover {
background-color: #ff3860;
border-color: #ff3860;
color: #fff;
}
div#uploads, p#tokenContainer, a#panel { display: none; }
section#home div#uploads, section#home p#tokenContainer, section#home a#panel { display: none; }
img.logo { height: 200px; margin-top: 20px; }
.dz-preview .dz-details { display: flex; }
.dz-preview .dz-details .dz-size, .dz-preview .dz-details .dz-filename { flex: 1 }
.dz-preview img, .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { display: none }
section#home img.logo { height: 200px; margin-top: 20px; }
section#home .dz-preview .dz-details { display: flex; }
section#home .dz-preview .dz-details .dz-size, section#home .dz-preview .dz-details .dz-filename { flex: 1 }
section#home .dz-preview img, section#home .dz-preview .dz-success-mark, section#home .dz-preview .dz-error-mark { display: none }
section#home h3#links span {
padding-left: 5px;
padding-right: 5px;
}
section#home h3#maxFileSize {
font-size: 14px;
}
@keyframes floatUp {
0% {

View File

@ -64,9 +64,9 @@ upload.prepareUpload = function(){
div.innerHTML = 'Click here or drag and drop files';
div.style.display = 'flex';
document.getElementById('maxFileSize').innerHTML = 'Maximum upload size per file is ' + upload.maxFileSize;
document.getElementById('tokenContainer').style.display = 'none';
document.getElementById('uploadContainer').appendChild(div);
document.getElementById('panel').style.display = 'block';
upload.prepareDropzone();