style fix + show user changes

src/script.js

@@ -17,17 +17,20 @@ const pics = document.getElementById('pics')
 const picsHolder = document.getElementById('picsHolder')
 const icHolder = document.getElementById('icHolder')
 const manualUpload = document.getElementById('clickupload')
+const okBadge = document.getElementById('ok')
 
 // helpers
 let allA
 let imgsIndex
 let allImgs
 const decode = a => decodeURIComponent(a).replace(location.origin, '')
-const getArrowSelected = () => document.querySelectorAll('i.arrow-selected')[0]
+const getArrowSelected = () => document.querySelector('.arrow-selected')
 const getASelected = () => !getArrowSelected() ? false : getArrowSelected().parentElement.parentElement.querySelectorAll('a')[0]
 const prependPath = a => a.startsWith('/') ? a : decodeURI(location.pathname) + a
 const prevent = e => e.preventDefault()
+const okBageFlicker = () => okBadge.classList.remove('runFade') || void okBadge.offsetWidth || okBadge.classList.add('runFade')
 
+window.ok = okBageFlicker
 // Add upload icon on phones
 if (typeof window.orientation !== 'undefined') {
   icHolder.innerHTML = '<div onclick="document.getElementById(\'clickupload\').click()" class="ic icon-large-upload"></div>' + icHolder.innerHTML
@@ -66,7 +69,7 @@ window.onClickLink = e => {
   return true
 }
 
-const refresh = () => browseTo(location.href)
+const refresh = () => browseTo(location.href) || okBageFlicker()
 const prevPage = () => picsOff() || browseTo(location.href + '../')
 window.onpopstate = prevPage
 
@@ -290,7 +293,7 @@ function restoreCursorPos () {
 }
 
 function moveArrow (down) {
-  const all = Array.from(document.querySelectorAll('i.arrow-icon'))
+  const all = Array.from(document.querySelectorAll('.arrow-icon'))
   let i = all.findIndex(el => el.classList.contains('arrow-selected'))
 
   clearArrowSelected()

src/style.css

@@ -1,3 +1,9 @@
+@media(min-resolution: 192dpi) {
+  html {
+    zoom: .5;
+  }
+}
+
 html {
   font-size: 1.5em;
 }
@@ -16,31 +22,28 @@ body {
   margin-left: 20px;
 }
 
+div, i {
+  background-size: cover !important;
+}
+
 .icon {
   display: block;
-  height: 20px;
+  height: 25px;
-  width: 20px;
+  width: 25px;
-  background-size: cover !important;
   margin: 1px;
   cursor: pointer;
 }
 
-.arrow-icon {
+.arrow-selected::after {
-  display: block;
+  content: ">";
-  height: 100%;
-  width: 100%;
-}
-
-.arrow-selected {
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAzElEQVQ4T2NkoDJgpLJ5DHQ1kA3oehD+Qoov8LmwBmiQDxB7AfE7Yg3FZyDIdUuAWAuI3YD4GTGGEgpDZqAhM4DYCYhdgfgeIUMJGQjSD1LTBcTRUJdewWcoMQbCDK0EMoqhYXoSl6HEGgjTnw1ktANxEBDvwWYoqQbmAA1pA+JAIN5LiYEgi0HJqIAaXgYZ1gvEEdSIFBagIbOA2J4ayYYdaMgyIFaDuuw5oTQISw641NUCJbyhYUa1rEfVwoEYH2KoITUdErSE6gYCADLQGhW8pB3+AAAAAElFTkSuQmCC");
 }
 
 .arrow {
-  height: 20px;
+  min-width: 32px;
-  width: 20px;
+  text-align: center;
-  padding-top: 3px;
+  font-size: 1.15em;
-  padding-left: 0.3em;
+  font-weight: bold;
-  display: block;
+  padding-left: 10px;
 }
 
 td.file-size {
@@ -66,8 +69,8 @@ h1 {
 }
 
 .ic {
-  width: 32px;
+  width: 45px;
-  height: 32px;
+  height: 45px;
   cursor: pointer;
   display: inline-block;
   overflow: hidden;
@@ -77,7 +80,7 @@ h1 {
 
 
 #picsToggleCinema {
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoElEQVRYhe2Wuw3AIAxEbZRRMwFlJiBLMCBDcClCCwq2gRRc7/cO8RFEOzt/DAAPIABwBixXWL5nKOBN1JQo8lhYQTooKqFmaAAWCxCDzOQSoLm8BzxM/kUwXN4STZM3SsyTV0qo5HMaW2bpFiw9hEuv4dKHqAdsXkICNCuhAalLWKxCxcDEL9lRmU1EdBPRxcxZWoCZM4Cz8JKUs7MzNA81r4TL7qAyXAAAAABJRU5ErkJggg==");
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoElEQVRYhe2Wuw3AIAxEbZRRMwFlJiBLMCBDcClCCwq2gRRc7/cO8RFEOzt/DAAPIABwBixXWL5nKOBN1JQo8lhYQTooKqFmaAAWCxCDzOQSoLm8BzxM/kUwXN4STZM3SsyTV0qo5HMaW2bpFiw9hEuv4dKHqAdsXkICNCuhAalLWKxCxcDEL9lRmU1EdBPRxcxZWoCZM4Cz8JKUs7MzNA81r4TL7qAyXAAAAABJRU5ErkJggg==");
   position: fixed;
   left: 20px;
   top: 20px;
@@ -156,6 +159,26 @@ h1 {
   image-orientation: from-image;
 }
 
+@keyframes fade {
+  0%   { opacity:0; }
+  20%  { opacity:1; }
+  80%  { opacity:1; }
+  100% { opacity:0; }
+}
+
+.runFade {
+  animation: fade 3s 1;
+}
+
+#ok {
+  opacity:0;
+  width: 60px;
+  height: 60px;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+}
+
 .icon-large-folder {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEUAAACZmQAICAj4+Pj//5nMzGb/+/AAAAD/zJkzMwAAAP////+gebovAAAAAXRSTlMAQObYZgAAAAFiS0dECx/XxMAAAAAHdElNRQfiBhgXAy5jJ3EAAAAA1klEQVQoz42RMQ7CMBAEQ0mZIIp0/AGecJFO7kC2FKXmATxikaxUtPS48Ss5XxwnoWI7j3f3fHJV/aFa1KzOuwsRdacFHCjpthjuChbL0U261ipJnDd65IokJhCaGTCzEOZ25SAwaAUgASoOyFFzxWEsEkQGz2BskFJfHMMwWB07AVAXg/QwZscYPzHqXAVicDE4eJ47QOOoHexzhINxQRxIEVkC6I217OGLg9DLIn7qkHHEWiAvEwAdJyQlNKK3gKfcITuxZjzrO+qt2mr/3uj1z1//6AsSG3mwAQQN9wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNFQyMzowMzo0Ni0wNDowMFfZ8nYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjRUMjM6MDM6NDYtMDQ6MDAmhErKAAAAAElFTkSuQmCC");
 }
@@ -174,7 +197,6 @@ h1 {
 
 .icon-large-upload {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAXVBMVEUAAAAzzDPM/8z///8z/2YzmQAzZgAzZv8Amf8AAAAzzP+ZzP8AgADM//8z//8AMwAzzGaZmQD4+Pj//5kAZgD/zGYzmTP/zJmAgAAzMwDMZjPMmTP//wBmMwDwyqYv7S31AAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAHdElNRQfiBhoAOCALTc5BAAAB3klEQVRIx5WUCZKDIBBFAQXEbTTRQbPM/Y85TQMKClm+piplvcdv0YSQINSFfBQAWcHKsqSUc/EBbmnAgedCyje8Xxxxw782LI+zCPORVSWlesPj4qKqETdC3nA8R76uasBr+cJoCmHGdzwadSsxaaPpCiHcPJ6naLQqw3d9J2jEix/AW540msIYZnMMX/et5xnPCNjQC+SrvoUvlh8GzlWW73tcH+YRdk+tIFRqoq6jwPf+Diph5mcjJiEAThkNeQb4MF6uJmej6ShjrJymnR+GjU8YDfLwJk2Wr9DY+LNBi4DHSMHGOcjo418k5Es+TY6vxO94SUU5oUQDXg1QpDlEOBFEu3MOjJKCsfioUNBe0fNqBcfTZaMWdYkKXMUmIF8uAbSo0zx7A+GH9SPDwNqegWD4Oc6yx1dsAuHw61ku2ShsCRoImY4T6fCYlZ0oEMjEl8NG7rd6nVd9bAAjbrCOb1i1PgkkELR7VnpveCV4OLiH1W9dpiGaR5sGH5IQjvPgJKn/Disc9ke755UXzjQ23NTdJRb0NZ5ne16Pp8+HDSEYCPbFvMb0cfuTu3QwcoKOnpf+umFPRpjzSQpkzYe8z/OuPqC+E+5hbhAVXUmsGebx93eLLjzf1L1i/gHK3l4JVuA9nAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNlQwMDo1NjozMi0wNDowMOUpNXoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjZUMDA6NTY6MzItMDQ6MDCUdI3GAAAAAElFTkSuQmCC");
-  background-size: cover !important;
   margin-bottom: 3px;
 }
 

src/template.go

@@ -37,7 +37,7 @@
         <tr>
             <td><i ondblclick="return rm(event)" onclick="return rename(event)" class="btn icon icon-{{.Ext}} icon-blank"></i></td>
             <td class="file-size"><code>{{.Size}}</code></td>
-            <td class="arrow"><i class="arrow-icon"></i></td>
+            <td class="arrow"><div class="arrow-icon"></div></td>
             <td class="display-name"><a class="list-links" onclick="return onClickLink(event)" href="{{.Href}}">{{.Name}}</a></td>
         </tr>
     {{end}}
@@ -45,7 +45,7 @@
         <tr>
             <td><i ondblclick="return rm(event)" onclick="return rename(event)" class="btn icon icon-{{.Ext}} icon-blank"></i></td>
             <td class="file-size"><code>{{.Size}}</code></td>
-            <td class="arrow"><i class="arrow-icon"></i></td>
+            <td class="arrow"><div class="arrow-icon"></div></td>
             <td class="display-name"><a class="list-links" onclick="return onClickLink(event)" href="{{.Href}}">{{.Name}}</a></td>
         </tr>
     {{end}}
@@ -55,4 +55,5 @@
     <span id="dlBarName"></span>
     <div id="dlBarPc">1%</div>
 </div>
+<div id="ok" class="icon-large-ok"></div>
 </html>

src/theme.css

@@ -1,7 +1,4 @@
 html, a {
-    background-color: #2d3436; color: #dfe6e9;
+    background-color: #2d3436;
-}
+    color: #dfe6e9;
-
-.arrow {
-    filter: invert(100%) !important;
 }