view list/modules

assets/public/css/styles.css

@@ -509,6 +509,7 @@ footer {
     font-size: .6em;
     text-align: center;
     color: grey;
+    margin: 1em 0;
 }
 footer a,
 footer a:hover {
@@ -572,7 +573,7 @@ pre {
 /* HEADER */
 
 header {
-    background-color: #2196F3;
+    background-color: #2196f3;
     padding: 1.7em 0;
 }
 header h1 {
@@ -588,7 +589,7 @@ header p {
 }
 header p i {
     font-size: 1em !important;
-    color: rgba(0, 0, 0, 0.21);
+    color: rgba(255, 255, 255, 0.31);
 }
 header p i {
     vertical-align: middle;
@@ -597,7 +598,7 @@ header form {
     display: inline-block;
     background-color: #1E88E5;
     padding: .75em;
-    color: #212121;
+    color: #fff;
     border-radius: .3em;
     height: 100%;
     vertical-align: middle;
@@ -607,7 +608,7 @@ header form input, header form i {
 }
 header form i {
     margin-right: .3em;
-    color: rgba(0, 0, 0, 0.5)
+    color: rgba(255,255,255, 0.5)
 }
 header form input {
     border: 0;
@@ -617,21 +618,21 @@ header form input {
 }
 ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
-    color: rgba(0, 0, 0, 0.5);
+    color: rgba(255,255,255, 0.5);
 }
 :-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
-    color: rgba(0, 0, 0, 0.5);
+    color: rgba(255,255,255, 0.5);
     opacity: 1;
 }
 ::-moz-placeholder {
     /* Mozilla Firefox 19+ */
-    color: rgba(0, 0, 0, 0.5);
+    color: rgba(255,255,255, 0.5);
     opacity: 1;
 }
 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
-    color: rgba(0, 0, 0, 0.5);
+    color: rgba(255,255,255, 0.5);
 }
 header, #toolbar {
     position: fixed;
@@ -640,6 +641,7 @@ header, #toolbar {
     left: 0;
     padding: .5em;
     display: flex;
+    color: #fff;
 }
 #toolbar div, header div {
     flex-grow: 1;
@@ -696,6 +698,9 @@ header, #toolbar {
     justify-content: space-between;
     padding: 0 .5em;
 }
+#listing.list {
+  flex-direction: column;
+}
 #listing .item {
     background-color: #fff;
     border-radius: .2em;
@@ -729,7 +734,10 @@ header, #toolbar {
     font-size: 4em;
     margin-right: .1em;
 }
-
+.item a:hover,
+.item a {
+    color: #6f6f6f;
+}
 /* ANIMATIONS */
 i.spin {
     animation: 1s spin linear infinite;

assets/public/js/application.js

@@ -9,39 +9,40 @@ Array.prototype.removeElement = function(element) {
     }
 }
 
-document.addEventListener("DOMContentLoaded", function(event) {
+var viewEvent = function(event) {
-    var items = document.getElementsByClassName('item');
+  var cookie = getCookie("view-list");
-    Array.from(items).forEach(link => {
+  var listing = document.getElementById("listing");
-        link.addEventListener('click', function(event) {
+
-            var url = link.getElementsByTagName('a')[0].getAttribute('href');
+  if (cookie != "true") {
-            if (selectedItems.indexOf(url) == -1) {
+    document.cookie = "view-list=true";
-                link.classList.add('selected');
-                selectedItems.push(url);
   } else {
-                link.classList.remove('selected');
+    document.cookie = "view-list=false";
-                selectedItems.removeElement(url);
   }
 
-            var event = new CustomEvent('changed-selected');
+  handleViewType(getCookie("view-list"));
-            document.dispatchEvent(event);
   return false;
-        });
+}
-    });
 
-    document.getElementById("open").addEventListener("click", openEvent);
+var handleViewType = function(viewList) {
-    if (document.getElementById("back")) {
+  var listing = document.getElementById("listing");
-        document.getElementById("back").addEventListener("click", backEvent)
+  var button = document.getElementById("view");
-    };
+
-    document.getElementById("delete").addEventListener("click", deleteEvent);
+  if (viewList == "true") {
-    document.getElementById("download").addEventListener("click", downloadEvent);
+    listing.classList.add("list");
+    button.innerHTML = "<i class=\"material-icons\">view_module</i>";
     return false;
-});
+  }
-
-var changeView = function(event) {
 
+  button.innerHTML = "<i class=\"material-icons\">view_list</i>";
+  listing.classList.remove("list");
   return false;
 }
 
+var getCookie = function(name) {
+  var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
+  return document.cookie.replace(re, "$1");
+}
+
 var changeToLoading = function(element) {
     var originalText = element.innerHTML;
     element.style.opacity = 0;
@@ -184,3 +185,35 @@ document.addEventListener("changed-selected", function(event) {
     toolbar.classList.remove("enabled");
     return false;
 });
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    var items = document.getElementsByClassName('item');
+    Array.from(items).forEach(link => {
+        link.addEventListener('click', function(event) {
+            var url = link.getElementsByTagName('a')[0].getAttribute('href');
+            if (selectedItems.indexOf(url) == -1) {
+                link.classList.add('selected');
+                selectedItems.push(url);
+            } else {
+                link.classList.remove('selected');
+                selectedItems.removeElement(url);
+            }
+
+            var event = new CustomEvent('changed-selected');
+            document.dispatchEvent(event);
+            return false;
+        });
+    });
+
+    document.getElementById("open").addEventListener("click", openEvent);
+    if (document.getElementById("back")) {
+        document.getElementById("back").addEventListener("click", backEvent)
+    };
+    if (document.getElementById("view")) {
+        handleViewType(getCookie("view-list"));
+        document.getElementById("view").addEventListener("click", viewEvent)
+    };
+    document.getElementById("delete").addEventListener("click", deleteEvent);
+    document.getElementById("download").addEventListener("click", downloadEvent);
+    return false;
+});

assets/templates/listing.tmpl

@@ -13,6 +13,7 @@
 				</a>
 			</div>
 			<div>
+				<a href="{{.URL}}">
 					<span class="name">{{.Name}}</span>
 					{{- if .IsDir}}
 					<p data-order="-1">&mdash;</p>
@@ -20,6 +21,7 @@
 					<p data-order="{{.Size}}">{{.HumanSize}}</p>
 					{{- end}}
 					<p class="hideable"><time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time></p>
+				</a>
 			</div>
 		</div>
 		{{- end}}