diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 68a29394..6414ff3f 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -604,7 +604,7 @@ pre { header { z-index: 999; padding: 1.7em 0; - background-color: #2196f3; + background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.075); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } @@ -632,7 +632,7 @@ header p i { } header #logout { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(0, 0, 0, 0.05); border-radius: 0; margin: -0.5em -0.5em -0.5em 0; padding: .5em; @@ -648,9 +648,8 @@ header p i { height: 100%; padding: 0.75em; vertical-align: middle; - color: #fff; border-radius: 0.3em; - background-color: #1e88e5; + background-color: #f5f5f5; transition: .1s ease all; } @@ -673,7 +672,7 @@ header p i { #search i { margin-right: 0.3em; - color: rgba(255, 255, 255, .5); + /* color: rgba(255, 255, 255, .5); */ user-select: none; } @@ -681,7 +680,7 @@ header p i { min-width: 20em; border: 0; outline: 0; - color: rgba(255, 255, 255, 0.72); + /* color: rgba(255, 255, 255, 0.72); */ background-color: transparent; } @@ -782,7 +781,6 @@ header { display: flex; width: 100%; padding: 0.5em; - color: #fff; max-height: 4em; } @@ -820,7 +818,7 @@ header p a:hover { transition: 0.2s ease-in-out all; opacity: 0; color: #fff; - background-color: #6f6f6f; + background-color: #2196f3; } #toolbar.enabled { @@ -982,7 +980,7 @@ header .action span { display: flex; padding: 0; flex-wrap: wrap; - justify-content: flex-start;; + justify-content: flex-start; max-width: calc(100% - 2.2em); width: 100%; opacity: 0; @@ -990,15 +988,20 @@ header .action span { } #listing.list { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; + margin-top: -1em; + width: 100%; + max-width: 100%; } #listing.list .item { width: 100%; - margin: 0 0 1em; + margin: 0; + border: 0; + box-shadow: none; + border-radius: 0; + border-bottom: 1px solid rgba(0,0,0,0.1); + padding: 1em; } #listing .item { @@ -1051,6 +1054,18 @@ header .action span { } +#listing.list .item div:first-of-type { + width: 3em; +} + +#listing.list .item div:first-of-type i { + font-size: 2em; +} + +#listing.list .item div:last-of-type { + width: calc(100% - 3em); +} + /* ANIMATIONS */ i.spin { diff --git a/_embed/public/js/application.js b/_embed/public/js/application.js index e090fa47..e4bd5533 100644 --- a/_embed/public/js/application.js +++ b/_embed/public/js/application.js @@ -170,14 +170,9 @@ var reloadListing = function(callback) { if (request.readyState == 4) { if (request.status == 200) { document.querySelector('body main').innerHTML = request.responseText; - // Handle date times - let timeList = document.getElementsByTagName("time"); - Array.from(timeList).forEach(localizeDatetime); - addNewDirEvents(); - document.getElementById("listing").style.opacity = 1; - + if (typeof callback == 'function') { callback(); } @@ -300,21 +295,6 @@ var backEvent = function(event) { return false; } -// Handles the datetimes present on the document -var localizeDatetime = function(e, index, ar) { - if (e.textContent === undefined) { - return; - } - var d = new Date(e.getAttribute('datetime')); - if (isNaN(d)) { - d = new Date(e.textContent); - if (isNaN(d)) { - return; - } - } - e.textContent = d.toLocaleString(); -} - // Toggles the view mode var viewEvent = function(event) { let cookie = document.getCookie('view-list'); @@ -505,10 +485,6 @@ var searchEvent = function(event) { } document.addEventListener('listing', event => { - // Handle date times - let timeList = document.getElementsByTagName("time"); - Array.from(timeList).forEach(localizeDatetime); - // Handles the current view mode and adds the event to the button handleViewType(document.getCookie("view-list")); document.getElementById("view").addEventListener("click", viewEvent); @@ -686,7 +662,7 @@ function openItem(event) { function selectItem(event) { let el = event.currentTarget, url = el.dataset.url; - + if (selectedItems.length != 0) event.preventDefault(); if (selectedItems.indexOf(url) == -1) { el.setAttribute("aria-selected", true); @@ -1013,16 +989,16 @@ document.addEventListener("DOMContentLoaded", function(event) { (function() { - let columns = Math.floor(document.getElementById('listing').offsetWidth / 300); + let columns = Math.floor(document.getElementById('listing').offsetWidth / 300); var header = getCSSRule('#listing .item'); header.style.width = `calc(${100/columns}% - 1em)`; - + document.getElementById("listing").style.opacity = 1; }()); window.addEventListener("resize", () => { - let columns = Math.floor(document.getElementById('listing').offsetWidth / 300); + let columns = Math.floor(document.getElementById('listing').offsetWidth / 300); var itens = getCSSRule('#listing .item'); itens.style.width = `calc(${100/columns}% - 1em)`; }); @@ -1035,8 +1011,8 @@ function getCSSRule(ruleName) { find.call(document.styleSheets, styleSheet => { result = find.call(styleSheet.cssRules, cssRule => { - return cssRule instanceof CSSStyleRule - && cssRule.selectorText.toLowerCase() == ruleName; + return cssRule instanceof CSSStyleRule && + cssRule.selectorText.toLowerCase() == ruleName; }); return result != null; }); diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl index 4e0c509d..c6abbc88 100644 --- a/_embed/templates/listing.tmpl +++ b/_embed/templates/listing.tmpl @@ -5,14 +5,14 @@ {{- range .Items}} {{ if .UserAllowed }}
+ {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }} + draggable="true" + class="item" + onclick="selectItem(event)" + ondblclick="openItem(event)" + data-dir="{{ .IsDir }}" + data-url="{{ .URL }}" + id="{{.URL}}">
{{- if .IsDir}} folder @@ -28,7 +28,7 @@

{{.HumanSize}}

{{- end}}

- +