From 18a1b6540895d83370677bea474ac7dd8cfa1bd2 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Mon, 2 Jan 2017 12:20:20 +0000 Subject: [PATCH] close #59 --- _embed/public/css/fonts.css | 6 +- ...greek-ext.woff2 => medium-greek-ext.woff2} | Bin _embed/public/css/styles.css | 51 ++++++++++----- _embed/public/js/common.js | 42 +++++++----- _embed/public/js/listing.js | 61 ++++++++++-------- _embed/templates/base.tmpl | 40 ++++++------ _embed/templates/listing.tmpl | 4 ++ handlers/listing.go | 9 ++- 8 files changed, 129 insertions(+), 84 deletions(-) rename _embed/public/css/roboto/{medim-greek-ext.woff2 => medium-greek-ext.woff2} (100%) diff --git a/_embed/public/css/fonts.css b/_embed/public/css/fonts.css index 0e78c2c0..c8e74f4e 100644 --- a/_embed/public/css/fonts.css +++ b/_embed/public/css/fonts.css @@ -74,7 +74,7 @@ font-family: 'Roboto'; font-style: normal; font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-greek-ext.woff22) format('woff2'); + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } @@ -129,6 +129,8 @@ white-space: nowrap; word-wrap: normal; direction: ltr; - -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: 'liga'; } \ No newline at end of file diff --git a/_embed/public/css/roboto/medim-greek-ext.woff2 b/_embed/public/css/roboto/medium-greek-ext.woff2 similarity index 100% rename from _embed/public/css/roboto/medim-greek-ext.woff2 rename to _embed/public/css/roboto/medium-greek-ext.woff2 diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index b526863a..31f54ff6 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -358,9 +358,6 @@ header .action span { header>div div { vertical-align: middle; position: relative; - text-overflow: ellipsis; - /* overflow: hidden; */ - white-space: nowrap; } header .actions { @@ -556,6 +553,15 @@ header .actions { #bottom-bar>*:first-child { margin-right: auto; + max-width: calc(100% - 21em); + width: 100%; +} + +#bottom-bar p { + text-overflow: ellipsis; + overflow: hidden; + width: calc(100% - 3em); + white-space: nowrap; } #more { @@ -681,6 +687,7 @@ header .actions { color: #6f6f6f; transition: .1s ease all; align-items: center; + cursor: pointer; } #listing .item div:last-of-type { @@ -708,6 +715,13 @@ header .actions { vertical-align: bottom; } +#listing .message { + text-align: center; + font-size: 3em; + margin: 1em 0; + display: block !important; +} + /* * * * * * * * * * * * * * * * * LISTING - MOSAIC * @@ -945,7 +959,7 @@ header .actions { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 2em; max-width: 25em; - width: 95%; + width: 90%; } .prompt h3, @@ -1006,7 +1020,7 @@ header .actions { .help ul { padding: 0; - margin: 0; + margin: 1em 0; list-style: none; } @@ -1042,18 +1056,8 @@ footer a:hover { #top-bar>div:nth-child(1) { display: none; } - #file-only { - position: fixed; - left: 0; - top: 4em; - background-color: #fafafa; - border-right: 0; - border-top: 1px solid rgba(0, 0, 0, 0.075); - border-bottom: 1px solid rgba(0, 0, 0, 0.075); - height: 3.8em; - display: flex; - width: calc(100% - 10em); - padding: .5em; + #bottom-bar>*:first-child { + max-width: calc(100% - 16em); } #main-actions { position: fixed; @@ -1093,6 +1097,19 @@ footer a:hover { margin-left: .5em; font-size: .9em; } + #listing.list .item .size, + #listing.list .item .modified { + display: none; + } + #listing.list .item .name { + width: 100%; + } +} + +@media screen and (max-width: 450px) { + #bottom-bar p { + display: none !important; + } } diff --git a/_embed/public/js/common.js b/_embed/public/js/common.js index cfa1ca47..a520648a 100644 --- a/_embed/public/js/common.js +++ b/_embed/public/js/common.js @@ -72,21 +72,6 @@ Element.prototype.changeToDone = function(error, html) { return false; } -function getCSSRule(ruleName) { - ruleName = ruleName.toLowerCase(); - var result = null, - find = Array.prototype.find; - - find.call(document.styleSheets, styleSheet => { - result = find.call(styleSheet.cssRules, cssRule => { - return cssRule instanceof CSSStyleRule && - cssRule.selectorText.toLowerCase() == ruleName; - }); - return result != null; - }); - return result; -} - function toWebDavURL(url) { return window.location.origin + url.replace(baseURL + "/", webdavURL + "/"); } @@ -100,6 +85,33 @@ var removeLastDirectoryPartOf = function(url) { return (arr.join('/')); } +function getCSSRule(rules) { + for (let i = 0; i < rules.length; i++) { + rules[i] = rules[i].toLowerCase(); + } + + var result = null, + find = Array.prototype.find; + + find.call(document.styleSheets, styleSheet => { + result = find.call(styleSheet.cssRules, cssRule => { + let found = false; + + if (cssRule instanceof CSSStyleRule) { + for (let i = 0; i < rules.length; i++) { + if (cssRule.selectorText.toLowerCase() == rules[i]) found = true; + } + } + + return found; + }); + + return result != null; + }); + + return result; +} + /* * * * * * * * * * * * * * * * * * * EVENTS * diff --git a/_embed/public/js/listing.js b/_embed/public/js/listing.js index b151927e..712f56ec 100644 --- a/_embed/public/js/listing.js +++ b/_embed/public/js/listing.js @@ -14,7 +14,8 @@ listing.reload = function(callback) { if (request.readyState == 4) { if (request.status == 200) { document.querySelector('body main').innerHTML = request.responseText; - + listing.addDoubleTapEvent(); + if (typeof callback == 'function') { callback(); } @@ -311,11 +312,42 @@ listing.newFilePrompt = function(event) { listing.updateColumns = function(event) { let columns = Math.floor(document.getElementById('listing').offsetWidth / 300), - items = getCSSRule('#listing.mosaic .item'); + items = getCSSRule(['#listing.mosaic .item', '.mosaic#listing .item']); items.style.width = `calc(${100/columns}% - 1em)`; } + +listing.addDoubleTapEvent = function() { + let items = document.getElementsByClassName('item'), + touches = { + id: '', + count: 0 + }; + + Array.from(items).forEach(file => { + file.addEventListener('touchstart', event => { + console.log("hey") + 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; + } + }); + }); +} + // Keydown events window.addEventListener('keydown', (event) => { if (event.keyCode == 27) { @@ -346,6 +378,7 @@ window.addEventListener("resize", () => { document.addEventListener('DOMContentLoaded', event => { listing.updateColumns(); + listing.addDoubleTapEvent(); buttons.rename = document.getElementById("rename"); buttons.upload = document.getElementById("upload"); @@ -400,29 +433,5 @@ 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; - } - }); - }); }); \ No newline at end of file diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl index 3a6130ec..e5caf1f3 100644 --- a/_embed/templates/base.tmpl +++ b/_embed/templates/base.tmpl @@ -58,11 +58,7 @@ {{- end }} -

{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}

- - -
- more_vert + {{ if ne .Name "/"}}

{{ .Name }}

{{ end }}
@@ -97,6 +93,10 @@ {{- end }}
+
+ more_vert +
+
{{- if .IsDir }}
@@ -188,26 +188,22 @@

Help

-

-

    -
  • F1 - this information
    • -
  • F2 - rename file
    • -
  • DEL - delete selected items
    • -
  • ESC - clear selection and/or close the prompt
    • -
  • CTRL + S - save a file or download the directory where you are
    • -
  • CTRL + Click - select multiple files or directories
    • -
  • Double click - open a file or directory
    • -
  • Click - select file or directory
    • -
-

+
    +
  • F1 - this information
    • +
  • F2 - rename file
    • +
  • DEL - delete selected items
    • +
  • ESC - clear selection and/or close the prompt
    • +
  • CTRL + S - save a file or download the directory where you are
    • +
  • CTRL + Click - select multiple files or directories
    • +
  • Double click - open a file or directory
    • +
  • Click - select file or directory
    • +

Not available yet

-

-

    -
  • Alt + Click - select a group of files
    • -
-

+
    +
  • Alt + Click - select a group of files
    • +
diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl index f23e9b07..563ea391 100644 --- a/_embed/templates/listing.tmpl +++ b/_embed/templates/listing.tmpl @@ -32,6 +32,10 @@
+ {{ if and (eq .NumDirs 0) (eq .NumFiles 0) }} +

It feels lonely here.

+ {{ end }} + {{- if not (eq .NumDirs 0)}}

Folders

diff --git a/handlers/listing.go b/handlers/listing.go index 60cd5e59..c0d7d148 100644 --- a/handlers/listing.go +++ b/handlers/listing.go @@ -29,9 +29,14 @@ func ServeListing(w http.ResponseWriter, r *http.Request, c *config.Config, u *c URL: r.URL, } + cookieScope := c.BaseURL + if cookieScope == "" { + cookieScope = "/" + } + // Copy the query values into the Listing struct var limit int - listing.Sort, listing.Order, limit, err = handleSortOrder(w, r, c.BaseURL) + listing.Sort, listing.Order, limit, err = handleSortOrder(w, r, cookieScope) if err != nil { return http.StatusBadRequest, err } @@ -72,7 +77,7 @@ func ServeListing(w http.ResponseWriter, r *http.Request, c *config.Config, u *c http.SetCookie(w, &http.Cookie{ Name: "display", Value: displayMode, - Path: c.BaseURL, + Path: cookieScope, Secure: r.TLS != nil, })