Updated dashboard

* Simplified selectors in dashboard.css.

* Added checkboxes to thumbs view (but there's no un/select all checkbox).

pages/dashboard.html

@@ -13,11 +13,11 @@
     <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
     <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=vZEyc9zyh6">
     <link rel="stylesheet" type="text/css" href="css/style.css?v=vZEyc9zyh6">
-    <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=vZEyc9zyh6">
+    <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=725MLaNmgj">
     <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=8FbubjpYRC"></script>
     <script type="text/javascript" src="libs/axios/axios.min.js?v=8FbubjpYRC"></script>
     <script type="text/javascript" src="libs/clipboard.js/clipboard.min.js?v=8FbubjpYRC"></script>
-    <script type="text/javascript" src="js/dashboard.js?v=vZEyc9zyh6"></script>
+    <script type="text/javascript" src="js/dashboard.js?v=725MLaNmgj"></script>
 
     <!-- Open Graph tags -->
     <meta property="og:type" content="website" />

public/css/dashboard.css

@@ -105,11 +105,11 @@ html {
   border-left-color: #898b8d;
 }
 
-section#dashboard .table {
+.table {
   font-size: .75rem;
 }
 
-section#dashboard div#table div.column {
+.image-container {
   display: flex;
   width: 200px;
   height: 200px;
@@ -119,34 +119,40 @@ section#dashboard div#table div.column {
   align-items: center;
 }
 
-section#dashboard div#table div.column .title {
+.image-container .title {
   font-weight: normal;
 }
 
-section#dashboard div#table div.column a.image {
+.image-container .image {
   width: 100%;
 }
 
-section#dashboard div#table div.column.image-container {
+.image-container {
   position: relative;
 }
 
-section#dashboard div#table div.column div.controls {
+.image-container .file-checkbox {
+  position: absolute;
+  top: .75rem;
+  left: .75rem;
+}
+
+.image-container .controls {
   display: flex;
   position: absolute;
   top: .75rem;
   right: .75rem;
 }
 
-section#dashboard div#table div.column div.controls a.button {
+.image-container .controls .button {
   border-radius: 0;
 }
 
-section#dashboard div#table div.column div.controls a.button:not(:active):not(:hover) {
+.image-container .controls .button:not(:active):not(:hover) {
   background-color: rgba(49, 54, 59, .75);
 }
 
-section#dashboard div#table div.column div.name {
+.image-container .name {
   position: absolute;
   left: .75rem;
   bottom: .75rem;
@@ -157,27 +163,26 @@ section#dashboard div#table div.column div.name {
   font-size: .75rem;
 }
 
-section#dashboard div#table div.column div.name span {
+.image-container .name span {
   font-weight: 800;
 }
 
-/*
-section#dashboard div#table div.column div.controls a.button:hover,
-section#dashboard div#table div.column a.button:active {
-  background-color: #ff3860;
-}
-*/
-
 /* Make extra info appear on hover only on non-touch devices */
 
-.no-touch section#dashboard div#table div.column div.controls,
-.no-touch section#dashboard div#table div.column div.name {
+.no-touch .image-container .file-checkbox {
+  opacity: .25;
+  transition: opacity .25s;
+}
+
+.no-touch .image-container .controls,
+.no-touch .image-container .name {
   opacity: 0;
   transition: opacity .25s;
 }
 
-.no-touch section#dashboard div#table div.column:hover div.controls,
-.no-touch section#dashboard div#table div.column:hover div.name {
+.no-touch .image-container:hover .file-checkbox,
+.no-touch .image-container:hover .controls,
+.no-touch .image-container:hover .name {
   opacity: 1;
 }
 

public/js/dashboard.js

@@ -131,7 +131,7 @@ panel.getUploads = (album, page, element) => {
     `
     const controls = `
       <div class="columns">
-        <div class="column"></div>
+        <div class="column is-hidden-mobile"></div>
         <div class="column" style="text-align: center">
           <a class="button is-small is-danger" title="List view" onclick="panel.setFilesView('list', ${album}, ${page}, this)">
             <span class="icon">
@@ -155,6 +155,7 @@ panel.getUploads = (album, page, element) => {
       </div>
     `
 
+    let allFilesSelected = true
     if (panel.filesView === 'thumbs') {
       panel.page.innerHTML = `
         ${pagination}
@@ -169,6 +170,9 @@ panel.getUploads = (album, page, element) => {
       const table = document.getElementById('table')
 
       for (const item of response.data.files) {
+        const selected = panel.selectedFiles.includes(item.id)
+        if (!selected && allFilesSelected) { allFilesSelected = false }
+
         const div = document.createElement('div')
 
         let displayAlbumOrUser = item.album
@@ -184,6 +188,7 @@ panel.getUploads = (album, page, element) => {
           div.innerHTML = `<a class="image" href="${item.file}" target="_blank"><h1 class="title">.${item.file.split('.').pop()}</h1></a>`
         }
         div.innerHTML += `
+          <input type="checkbox" class="file-checkbox" title="Select this file" onclick="panel.selectFile(${item.id}, this)"${selected ? ' checked' : ''}>
           <div class="controls">
             <a class="button is-small is-info clipboard-js" title="Copy link to clipboard" data-clipboard-text="${item.file}">
               <span class="icon">
@@ -232,7 +237,6 @@ panel.getUploads = (album, page, element) => {
 
       const table = document.getElementById('table')
 
-      let allFilesSelected = true
       for (const item of response.data.files) {
         const selected = panel.selectedFiles.includes(item.id)
         if (!selected && allFilesSelected) { allFilesSelected = false }
@@ -274,10 +278,11 @@ panel.getUploads = (album, page, element) => {
 
         table.appendChild(tr)
       }
+    }
 
-      if (allFilesSelected && response.data.files.length) {
-        document.getElementById('selectAll').checked = true
-      }
+    if (allFilesSelected && response.data.files.length) {
+      const selectAll = document.getElementById('selectAll')
+      if (selectAll) { selectAll.checked = true }
     }
   }).catch(error => {
     console.log(error)