updates on mobile stuff

_embed/public/css/styles.css

@@ -251,58 +251,25 @@ i.spin {
     background-color: rgba(0, 0, 0, .1);
 }
 
-.action:hover ul {
-    display: flex;
-}
-
 .action ul {
     position: absolute;
-    top: 3.1em;
-    left: 0;
+    top: 0;
     color: #7d7d7d;
     list-style: none;
     margin: 0;
     padding: 0;
-    background: #fff;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
-    border-radius: .2em;
-    flex-direction: column-reverse;
-    display: none;
-    transition: .2s ease all;
-    min-width: 3em;
-    z-index: 99999;
+    flex-direction: column;
+    display: flex;
 }
 
-.action ul:before {
-    top: -16px;
-    left: 1em;
-    right: auto;
-    border: 8px solid transparent;
-    border-bottom-color: #ffffff;
-    content: '';
-    position: absolute;
+.action ul li {
+    line-height: 1;
+    padding: .7em;
+    transition: .1s ease background-color;
 }
 
-.action ul a {
-    padding: .3em .5em;
-    border-bottom: 1px solid #f5f5f5;
-    transition: .2s ease all;
-    text-align: left;
-}
-
-.action ul a:first-child {
-    border: 0;
-    border-bottom-right-radius: .2em;
-    border-bottom-left-radius: .2em;
-}
-
-.action ul a:last-child {
-    border-top-right-radius: .2em;
-    border-top-left-radius: .2em;
-}
-
-.action ul a:hover {
-    background-color: #f5f5f5;
+.action ul li:hover {
+    background-color: rgba(0, 0, 0, 0.04);
 }
 
 
@@ -609,6 +576,16 @@ header .actions {
     visibility: hidden;
 }
 
+#download ul.active {
+    top: 0;
+    right: 0;
+}
+
+#more ul.active {
+    right: .5em;
+    top: 4.5em;
+}
+
 
 /* * * * * * * * * * * * * * * *
  *            DROPDOWN         *
@@ -629,8 +606,6 @@ header .actions {
 }
 
 .dropdown.active {
-    right: .5em;
-    top: 4.5em;
     visibility: visible;
 }
 
@@ -659,33 +634,15 @@ header .actions {
 }
 
 #breadcrumbs {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    margin: 0;
-    padding: 0;
     min-width: 7em;
 }
 
 #breadcrumbs.active {
-    opacity: 1;
-    visibility: visible;
     top: 0;
     left: 0;
     right: auto;
 }
 
-#breadcrumbs li {
-    line-height: 1;
-    padding: .7em;
-    transition: .1s ease all;
-}
-
-#breadcrumbs li:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-}
-
 
 /* * * * * * * * * * * * * * * *
  *            LISTING          *

_embed/public/js/common.js

@@ -414,18 +414,21 @@ document.addEventListener("DOMContentLoaded", function(event) {
         buttons.delete.addEventListener("click", deleteEvent);
     }
 
-    if (buttons.previous) {
-        buttons.previous.addEventListener("click", event => {
-            document.getElementById("breadcrumbs").classList.toggle("active");
+    let dropdownButtons = document.querySelectorAll('.action[data-dropdown]')
+    Array.from(dropdownButtons).forEach(button => {
+        button.addEventListener("click", event => {
+            event.preventDefault();
+            event.stopPropagation();
 
+            button.querySelector('ul').classList.toggle("active");
             clickOverlay.classList.add('active');
 
             clickOverlay.addEventListener('click', event => {
-                document.getElementById("breadcrumbs").classList.remove("active");
+                button.querySelector('ul').classList.remove("active");
                 clickOverlay.classList.remove('active');
             })
         });
-    }
+    });
 
     overlay.addEventListener('click', event => {
         if (document.querySelector('.help.active')) {

_embed/public/js/listing.js

@@ -411,6 +411,10 @@ document.addEventListener('DOMContentLoaded', event => {
                 touches.id = file.id;
                 touches.count = 1;
                 
+                setTimeout(() => {
+                    touches.count = 0;
+                }, 500)
+
                 return;
             }
 

_embed/templates/base.tmpl

@@ -48,16 +48,15 @@
         <div id="bottom-bar">
             <div>
                 {{- if ne .Name "/"}}                
-                <div class="action" id="previous">
+                <div data-dropdown class="action" id="previous">
                     <i class="material-icons">subdirectory_arrow_left</i>
-                </div>
-
                     <ul class="dropdown" id="breadcrumbs">
                     {{- range $item := .BreadcrumbMap }}
                         <a href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
                     {{- end }}
                     </ul>
                     {{- end }}
+                </div>
                 
                 <p>{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}</p>
             </div>
@@ -119,12 +118,10 @@
                 </div>
                 {{- end }}
                 
-                <div class="action" id="download">
-                    <a href="?download=true">
+                <div data-dropdown class="action" id="download">
                     <i class="material-icons" title="Download">file_download</i><span>Download</span>
-                    </a>
                     {{- if .IsDir }}
-                    <ul class="prev-links">
+                    <ul class="dropdown" id="download-drop">
                         <a data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
                         <a data-format="targz" href="?download=targz"><li>tar.gz</li></a>
                         <a data-format="tar" href="?download=tar"><li>tar</li></a>