Updated

Added new option "Uploads history order" into homepage's config tab.
When set to "Newer files on top", this will use flex-direction CSS
property to reverse sort the uploads history.

Added new entires to todo.md.

Bumped v1 version string.

dist/css/home.css

@@ -1,2 +1,2 @@
-#b{width:200px;height:200px;border-radius:100%;display:inline-block;margin-bottom:40px;vertical-align:top;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:floatUp;animation-name:floatUp;-webkit-animation-timing-function:cubic-bezier(0,.71,.29,1);animation-timing-function:cubic-bezier(0,.71,.29,1);box-shadow:0 20px 60px rgba(10,10,10,.05),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2)}#b img.logo{max-height:200px}#dropzone *{pointer-events:none}#panel,#tokenContainer{display:none}#maxSize{font-size:1rem}.dz-preview .dz-details{display:flex}.dz-preview .dz-details .dz-filename,.dz-preview .dz-details .dz-size{flex:1}.dz-preview .dz-error-mark,.dz-preview .dz-success-mark,.dz-preview img{display:none}@-webkit-keyframes floatUp{0%{opacity:0;box-shadow:0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0);transform:scale(.86)}25%{opacity:1}67%{box-shadow:0 0 0 rgba(10,10,10,0),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}to{box-shadow:0 20px 60px rgba(10,10,10,.05),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}}@keyframes floatUp{0%{opacity:0;box-shadow:0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0);transform:scale(.86)}25%{opacity:1}67%{box-shadow:0 0 0 rgba(10,10,10,0),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}to{box-shadow:0 20px 60px rgba(10,10,10,.05),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}}.uploads>div{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s;margin:1rem}.uploads>div:first-child{margin-top:1.5rem}.uploads.nojs{margin-bottom:0}.uploads .field>.icon:not(.icon-block){color:#3794d2}.uploads .field>.icon.icon-block{color:#da4453}.uploads progress{margin-top:.5rem;margin-bottom:1rem}.uploads img{max-width:200px}.name{font-size:1rem;color:#bdc3c7}.link>a,.name{word-break:break-all}.clipboard-mobile{margin-top:5px}#albumDiv{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#albumDiv .control{text-align:inherit}#linksColumn{margin-top:-.25rem;margin-left:-.25rem;margin-right:-.25rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#linksColumn .column{padding:.25rem}#linksColumn>span{padding:0 .3rem;color:#7f8c8d}.git-commit a{display:inline-block;word-break:break-all}#tabs{margin-bottom:1rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#tabs ul{border-bottom:1px solid #898b8d}#tabs li a{color:#bdc3c7;border-bottom-color:#898b8d}#tabs.is-boxed li.is-active a{color:#3794d2;background:#232629;border-color:#898b8d #898b8d #232629}#tabs.is-boxed li:not(.is-active) a:hover{background:#4d4d4d}.tab-content{margin-bottom:-.75rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.tab-content .label{color:#bdc3c7;font-weight:400}#tab-config.tab-content form{margin-bottom:.75rem}#urlMaxSize{font-weight:700}.render{position:fixed;right:0;bottom:0;font-size:1rem;color:#bdc3c7;cursor:pointer}.render.button{border-bottom-left-radius:0;border-bottom-right-radius:0;right:1%;opacity:.25;transition:opacity .25s}.render.button:hover{opacity:1}
+#b{width:200px;height:200px;border-radius:100%;display:inline-block;margin-bottom:40px;vertical-align:top;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:floatUp;animation-name:floatUp;-webkit-animation-timing-function:cubic-bezier(0,.71,.29,1);animation-timing-function:cubic-bezier(0,.71,.29,1);box-shadow:0 20px 60px rgba(10,10,10,.05),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2)}#b img.logo{max-height:200px}#dropzone *{pointer-events:none}#panel,#tokenContainer{display:none}#maxSize{font-size:1rem}.dz-preview .dz-details{display:flex}.dz-preview .dz-details .dz-filename,.dz-preview .dz-details .dz-size{flex:1}.dz-preview .dz-error-mark,.dz-preview .dz-success-mark,.dz-preview img{display:none}@-webkit-keyframes floatUp{0%{opacity:0;box-shadow:0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0);transform:scale(.86)}25%{opacity:1}67%{box-shadow:0 0 0 rgba(10,10,10,0),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}to{box-shadow:0 20px 60px rgba(10,10,10,.05),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}}@keyframes floatUp{0%{opacity:0;box-shadow:0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0),0 0 0 rgba(10,10,10,0);transform:scale(.86)}25%{opacity:1}67%{box-shadow:0 0 0 rgba(10,10,10,0),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}to{box-shadow:0 20px 60px rgba(10,10,10,.05),0 5px 10px rgba(10,10,10,.1),0 1px 1px rgba(10,10,10,.2);transform:scale(1)}}.uploads.is-reversed{display:flex;flex-direction:column-reverse}.uploads>div{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s;margin:1rem}.uploads.is-reversed>div{flex:0 0 auto}.uploads>div:first-child{margin-top:1.5rem}.uploads.nojs{margin-bottom:0}.uploads>div>.icon:not(.icon-block){color:#3794d2}.uploads>div>.icon.icon-block{color:#da4453}.uploads progress{margin-top:.5rem;margin-bottom:1rem}.uploads img{max-width:200px}.name{font-size:1rem;color:#bdc3c7}.link>a,.name{word-break:break-all}.clipboard-mobile{margin-top:5px}#albumDiv{-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#albumDiv .control{text-align:inherit}#linksColumn{margin-top:-.25rem;margin-left:-.25rem;margin-right:-.25rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#linksColumn .column{padding:.25rem}#linksColumn>span{padding:0 .3rem;color:#7f8c8d}.git-commit a{display:inline-block;word-break:break-all}#tabs{margin-bottom:1rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}#tabs ul{border-bottom:1px solid #898b8d}#tabs li a{color:#bdc3c7;border-bottom-color:#898b8d}#tabs.is-boxed li.is-active a{color:#3794d2;background:#232629;border-color:#898b8d #898b8d #232629}#tabs.is-boxed li:not(.is-active) a:hover{background:#4d4d4d}.tab-content{margin-bottom:-.75rem;-webkit-animation:fadeInOpacity .5s;animation:fadeInOpacity .5s}.tab-content .label{color:#bdc3c7;font-weight:400}#tab-config.tab-content form{margin-bottom:.75rem}#urlMaxSize{font-weight:700}.render{position:fixed;right:0;bottom:0;font-size:1rem;color:#bdc3c7;cursor:pointer}.render.button{border-bottom-left-radius:0;border-bottom-right-radius:0;right:1%;opacity:.25;transition:opacity .25s}.render.button:hover{opacity:1}
 /*# sourceMappingURL=home.css.map */

src/css/home.css

@@ -89,11 +89,20 @@
   }
 }
 
+.uploads.is-reversed {
+  display: flex;
+  flex-direction: column-reverse
+}
+
 .uploads > div {
   animation: fadeInOpacity 0.5s;
   margin: 1rem
 }
 
+.uploads.is-reversed > div {
+  flex: 0 0 auto
+}
+
 .uploads > div:first-child {
   margin-top: 1.5rem
 }
@@ -102,11 +111,11 @@
   margin-bottom: 0
 }
 
-.uploads .field > .icon:not(.icon-block) {
+.uploads > div > .icon:not(.icon-block) {
   color: #3794d2
 }
 
-.uploads .field > .icon.icon-block {
+.uploads > div > .icon.icon-block {
   color: #da4453
 }
 

src/js/home.js

@@ -4,6 +4,7 @@ const lsKeys = {
   token: 'token',
   chunkSize: 'chunkSize',
   parallelUploads: 'parallelUploads',
+  uploadsHistoryOrder: 'uploadsHistoryOrder',
   fileLength: 'fileLength',
   uploadAge: 'uploadAge'
 }
@@ -24,6 +25,7 @@ const page = {
   album: null,
 
   parallelUploads: null,
+  uploadsHistoryOrder: null,
   fileLength: null,
   uploadAge: null,
 
@@ -591,11 +593,19 @@ page.prepareUploadConfig = () => {
   const siBytes = localStorage[lsKeys.siBytes] !== '0'
   if (!siBytes) document.querySelector('#siBytes').value = '0'
 
+  const olderOnTop = localStorage[lsKeys.uploadsHistoryOrder] !== '0'
+  if (!olderOnTop) {
+    document.querySelector('#uploadsHistoryOrder').value = '0'
+    const uploadFields = document.querySelectorAll('.tab-content > .uploads')
+    for (let i = 0; i < uploadFields.length; i++)
+      uploadFields[i].classList.add('is-reversed')
+  }
+
   document.querySelector('#saveConfig').addEventListener('click', () => {
     if (!form.checkValidity())
       return
 
-    const prefKeys = ['siBytes', 'uploadAge']
+    const prefKeys = ['siBytes', 'uploadsHistoryOrder', 'uploadAge']
     for (let i = 0; i < prefKeys.length; i++) {
       const value = form.elements[prefKeys[i]].value
       if (value !== 'default' && value !== fallback[prefKeys[i]])

todo.md

@@ -14,6 +14,8 @@ Normal priority:
 * [*] Use Gatsby logo for link to [blog.fiery.me](https://blog.fiery.me/) on the homepage.
 * [ ] Auto-detect missing columns in `database/db.js`.
 * [*] Better error message when server is down.
+* [ ] Show expiry date in thumbs view.
+* [ ] Add Select all checkbox somewhere in thumbs view.
 
 Low priority:
 

views/_globals.njk

@@ -16,7 +16,7 @@
   v3: CSS and JS files (libs such as bulma, lazyload, etc).
   v4: Renders in /public/render/* directories (to be used by render.js).
 #}
-{% set v1 = "23xR9kTFtk" %}
+{% set v1 = "JxzI0kN09F" %}
 {% set v2 = "hiboQUzAzp" %}
 {% set v3 = "fFS2CGH95j" %}
 {% set v4 = "S3TAWpPeFS" %}

views/home.njk

@@ -169,6 +169,18 @@
                 </div>
                 <p class="help"></p>
               </div>
+              <div class="field">
+                <label class="label">Uploads history order</label>
+                <div class="control is-expanded">
+                  <div class="select is-fullwidth">
+                    <select id="uploadsHistoryOrder">
+                      <option value="default">Older files on top (default)</option>
+                      <option value="0">Newer files on top</option>
+                    </select>
+                  </div>
+                </div>
+                <p class="help">Newer files on top only works in <a href="https://caniuse.com/#feat=mdn-css_properties_flex-direction" target="_blank" rel="noopener">these browsers</a>.</p>
+              </div>
               <div class="field">
                 <p class="control is-expanded">
                   <button id="saveConfig" type="submit" class="button is-danger is-fullwidth">