close £6

assets/public/css/styles.css

@@ -693,14 +693,28 @@ header div:nth-child(2) {
     position: relative;
 }
 
+#listing .item:hover .checkbox {
+    opacity: 1;
+}
+
 #listing .item .checkbox {
     position: absolute;
-    top: 0;
+    top: -.9em;
-    right: 0;
+    right: -.9em;
     border-radius: 50%;
-    background: #000;
+    background: #fff;
     border: 0;
     -webkit-appearance: initial;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+    line-height: 0;
+    padding: .4em;
+    transition: .2s ease all;
+    opacity: 0;
+}
+
+#listing .checkbox i {
+    font-size: 1em;
+    margin: 0;
 }
 
 .item:hover {

assets/public/js/application.js

@@ -286,14 +286,15 @@ var backEvent = function(event) {
 
 // Handles the click event
 var itemClickEvent = function(event) {
-    var url = this.getElementsByTagName('a')[0].getAttribute('href');
+    var url = this.dataset.href;
+    var el = document.getElementById(url);
 
     if (selectedItems.length != 0) event.preventDefault();
     if (selectedItems.indexOf(url) == -1) {
-        this.classList.add('selected');
+        el.classList.add('selected');
         selectedItems.push(url);
     } else {
-        this.classList.remove('selected');
+        el.classList.remove('selected');
         selectedItems.removeElement(url);
     }
 
@@ -412,7 +413,7 @@ document.addEventListener('listing', event => {
     document.getElementById("view").addEventListener("click", viewEvent);
 
     // Add event to items
-    let items = document.getElementsByClassName('item');
+    let items = document.getElementsByClassName('checkbox');
     Array.from(items).forEach(link => {
         link.addEventListener('click', itemClickEvent);
     });

assets/templates/base.tmpl

@@ -20,7 +20,7 @@
     {{ if ne $lnk ""}}
      <a href="{{ $lnk }}">
      {{ end }}
-     <div class="action{{ if eq $lnk " "}} disabled{{ end }}" id="prev">
+     <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
       <i class="material-icons">subdirectory_arrow_left</i>
      </div>
      {{ if ne $lnk ""}}
@@ -28,7 +28,7 @@
     {{ end }}
 
     <p>
-     <a href="{{ if eq .Config.BaseURL " " }}/{{ else }}{{ .Config.BaseURL }}{{ end }}">
+     <a href="{{ if eq .Config.BaseURL "" }}/{{ else }}{{ .Config.BaseURL }}{{ end }}">
       {{ if .Config.HugoEnabled }}Hugo{{ else }}File Manager{{ end }}
      </a>
      {{ if ne .Name "/"}}

assets/templates/listing.tmpl

@@ -25,7 +25,7 @@
       </p>
      </a>
     </div>
-    <span class="checkbox"></div>
+    <span class="checkbox" data-href="{{.URL}}"><i class="material-icons">check</i></div>
     {{- end}}
    </div>
   </div>