close #59

_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';
 }

_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 {
+    #bottom-bar>*:first-child {
-        position: fixed;
+        max-width: calc(100% - 16em);
-        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;
     }
     #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;
+    }
 }
 
 

_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           *

_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;
-            }
-        });
-    });
 });

_embed/templates/base.tmpl

@@ -58,11 +58,7 @@
                 </div>
                 {{- end }}
                 
-                <p>{{ if ne .Name "/"}}{{ .Name }}{{ else }}Root{{ end }}</p>
+                {{ if ne .Name "/"}}<p id="current-file">{{ .Name }}</p>{{ end }}
-            </div>
-            
-            <div class="action mobile-only" id="more">
-                <i class="material-icons">more_vert</i>
             </div>
             
             <div class="actions{{ if .IsDir }} disabled{{ end }}" id="file-only">
@@ -97,6 +93,10 @@
                 {{- end }}
             </div>
             
+            <div class="action mobile-only" id="more">
+                <i class="material-icons">more_vert</i>
+            </div>
+            
             <div class="actions" id="main-actions">                
                 {{- if .IsDir }}
                 <div class="action" id="view">
@@ -188,26 +188,22 @@
     <div class="help">
         <h3>Help</h3>
         
-        <p>
+        <ul>
-            <ul>
+            <li><strong>F1</strong> - this information</li>
-                <li><strong>F1</strong> - this information</li>
+            <li><strong>F2</strong> - rename file</li>
-                <li><strong>F2</strong> - rename file</li>
+            <li><strong>DEL</strong> - delete selected items</li>
-                <li><strong>DEL</strong> - delete selected items</li>
+            <li><strong>ESC</strong> - clear selection and/or close the prompt</li>
-                <li><strong>ESC</strong> - clear selection and/or close the prompt</li>
+            <li><strong>CTRL + S</strong> - save a file or download the directory where you are</li>
-                <li><strong>CTRL + S</strong> - save a file or download the directory where you are</li>
+            <li><strong>CTRL + Click</strong> - select multiple files or directories</li>
-                <li><strong>CTRL + Click</strong> - select multiple files or directories</li>
+            <li><strong>Double click</strong> - open a file or directory</li>
-                <li><strong>Double click</strong> - open a file or directory</li>
+            <li><strong>Click</strong> - select file or directory</li>
-                <li><strong>Click</strong> - select file or directory</li>
+        </ul>
-            </ul>
-        </p>
         
         <p>Not available yet</p>
         
-        <p>
+        <ul>
-            <ul>
+            <li><strong>Alt + Click</strong> - select a group of files</li>
-                <li><strong>Alt + Click</strong> - select a group of files</li>
+        </ul>
-            </ul>
-        </p>
         
         <div>
             <button type="submit" onclick="closeHelp(event);" class="ok">OK</button>

_embed/templates/listing.tmpl

@@ -32,6 +32,10 @@
         </div>
     </div>
     
+    {{ if and (eq .NumDirs 0) (eq .NumFiles 0) }}
+    <h2 class="message">It feels lonely here.</h2>
+    {{ end }}
+    
     {{- if not (eq .NumDirs 0)}}
     <h2>Folders</h2>
     <div>

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,
 	})