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;
+    top: 0;
-    left: 0;
     color: #7d7d7d;
     list-style: none;
     margin: 0;
     padding: 0;
-    background: #fff;
+    flex-direction: column;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
-    border-radius: .2em;
-    flex-direction: column-reverse;
-    display: none;
-    transition: .2s ease all;
-    min-width: 3em;
-    z-index: 99999;
 }
 
-.action ul:before {
+.action ul li {
-    top: -16px;
+    line-height: 1;
-    left: 1em;
+    padding: .7em;
-    right: auto;
+    transition: .1s ease background-color;
-    border: 8px solid transparent;
-    border-bottom-color: #ffffff;
-    content: '';
-    position: absolute;
 }
 
-.action ul a {
+.action ul li:hover {
-    padding: .3em .5em;
+    background-color: rgba(0, 0, 0, 0.04);
-    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;
 }
 
 
@@ -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

@@ -397,7 +397,7 @@ window.addEventListener('keydown', (event) => {
 document.addEventListener("DOMContentLoaded", function(event) {
     overlay = document.querySelector('.overlay');
     clickOverlay = document.querySelector('#click-overlay');
-    
+
     buttons.logout = document.getElementById("logout");
     buttons.open = document.getElementById("open");
     buttons.delete = document.getElementById("delete");
@@ -414,18 +414,21 @@ document.addEventListener("DOMContentLoaded", function(event) {
         buttons.delete.addEventListener("click", deleteEvent);
     }
 
-    if (buttons.previous) {
+    let dropdownButtons = document.querySelectorAll('.action[data-dropdown]')
-        buttons.previous.addEventListener("click", event => {
+    Array.from(dropdownButtons).forEach(button => {
-            document.getElementById("breadcrumbs").classList.toggle("active");
+        button.addEventListener("click", event => {
-            
+            event.preventDefault();
+            event.stopPropagation();
+
+            button.querySelector('ul').classList.toggle("active");
             clickOverlay.classList.add('active');
-            
+
-            clickOverlay.addEventListener('click', event => {        
+            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')) {
@@ -435,21 +438,21 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
         closePrompt(event);
     })
-    
+
     let mainActions = document.getElementById('main-actions');
-    
+
     document.getElementById('more').addEventListener('click', event => {
         event.preventDefault();
         event.stopPropagation();
-        
+
         clickOverlay.classList.add('active');
         mainActions.classList.add('active');
-        
+
-        clickOverlay.addEventListener('click', event => {        
+        clickOverlay.addEventListener('click', event => {
             mainActions.classList.remove('active');
             clickOverlay.classList.remove('active');
         })
-    })    
+    })
 
     setupSearch();
     return false;

_embed/public/js/listing.js

@@ -355,7 +355,7 @@ document.addEventListener('DOMContentLoaded', event => {
     document.getElementById('multiple-selection-activate').addEventListener('click', event => {
         listing.selectMultiple = true;
         clickOverlay.click();
-        
+
         document.getElementById('multiple-selection').classList.add('active');
         document.querySelector('body').style.paddingBottom = "4em";
     })
@@ -370,7 +370,7 @@ document.addEventListener('DOMContentLoaded', event => {
     if (user.AllowEdit) {
         buttons.rename.addEventListener("click", listing.rename);
     }
-    
+
     let items = document.getElementsByClassName('item');
 
     if (user.AllowNew) {
@@ -399,23 +399,27 @@ document.addEventListener('DOMContentLoaded', event => {
 
         document.addEventListener("drop", listing.documentDrop, false);
     }
-    
+
     let touches = {
         id: '',
         count: 0
     };
-    
+
     Array.from(items).forEach(file => {
         file.addEventListener('touchstart', event => {
             if (touches.id != file.id) {
                 touches.id = file.id;
                 touches.count = 1;
                 
+                setTimeout(() => {
+                    touches.count = 0;
+                }, 500)
+
                 return;
             }
-            
+
             touches.count++;
-            
+
             if (touches.count > 1) {
                 window.location = file.dataset.url;
             }

_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>
+                    <ul class="dropdown" id="breadcrumbs">
+                    {{- range $item := .BreadcrumbMap }}
+                        <a href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
+                    {{- end }}
+                    </ul>
+                    {{- end }}
                 </div>
-
-                <ul class="dropdown" id="breadcrumbs">
-                {{- range $item := .BreadcrumbMap }}
-                <a href="{{ $absURL }}{{ $item.URL }}"><li>{{ $item.Name }}</li></a>
-                {{- end }}
-                </ul>
-                {{- end }}
                 
                 <p>{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}</p>
             </div>
@@ -119,12 +118,10 @@
                 </div>
                 {{- end }}
                 
-                <div class="action" id="download">
+                <div data-dropdown class="action" id="download">
-                    <a href="?download=true">
+                    <i class="material-icons" title="Download">file_download</i><span>Download</span>
-                        <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>