diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index d87651dc..b526863a 100644 --- a/_embed/public/css/styles.css +++ b/_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 * diff --git a/_embed/public/js/common.js b/_embed/public/js/common.js index 89caaf00..e8739f3a 100644 --- a/_embed/public/js/common.js +++ b/_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) { - 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"); + + clickOverlay.addEventListener('click', event => { + 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; diff --git a/_embed/public/js/listing.js b/_embed/public/js/listing.js index a441ae91..b151927e 100644 --- a/_embed/public/js/listing.js +++ b/_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; } diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl index fe7ebcf7..c33ea58f 100644 --- a/_embed/templates/base.tmpl +++ b/_embed/templates/base.tmpl @@ -48,16 +48,15 @@
{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}