style updates

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

_embed/public/js/application.js

@@ -170,12 +170,7 @@ 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') {
@@ -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);
@@ -1035,8 +1011,8 @@ function getCSSRule(ruleName) {
 
     find.call(document.styleSheets, styleSheet => {
         result = find.call(styleSheet.cssRules, cssRule => {
-            return cssRule instanceof CSSStyleRule 
+            return cssRule instanceof CSSStyleRule &&
-                && cssRule.selectorText.toLowerCase() == ruleName;
+                cssRule.selectorText.toLowerCase() == ruleName;
         });
         return result != null;
     });

_embed/templates/listing.tmpl

@@ -5,14 +5,14 @@
     {{- range .Items}}
         {{ if .UserAllowed }}
         <div ondragstart="itemDragStart(event)" 
-        {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }} 
+            {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }} 
-        draggable="true" 
+            draggable="true" 
-        class="item" 
+            class="item" 
-        onclick="selectItem(event)"
+            onclick="selectItem(event)"
-        ondblclick="openItem(event)"
+            ondblclick="openItem(event)"
-        data-dir="{{ .IsDir }}" 
+            data-dir="{{ .IsDir }}" 
-        data-url="{{ .URL }}"
+            data-url="{{ .URL }}"
-        id="{{.URL}}">
+            id="{{.URL}}">
             <div>
                 {{- if .IsDir}}
                 <i class="material-icons">folder</i>
@@ -28,7 +28,7 @@
                 <p data-order="{{.Size}}">{{.HumanSize}}</p>
                 {{- end}}
                 <p>
-                <time datetime="{{.HumanModTime " 2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time>
+                <time datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "2 Jan 2006 03:04 PM"}}</time>
                 </p>
             </div>
         </div>