Updates

* Small styling update to auth page. * Changed icons used in dashboard. * Added ClipboardJS. * Added "copy link" button in file list (list view only) and album list. They will use ClipboardJS. * Added "copy link" in upload result. For desktop, there will be small clipboard icons after the links, but for mobile and tablet, there will be a clickable buttons instead. * Updated placeholder color for input elements. * Updated "Loading..." in home page to use Bulma's loading spinner instead. It will also now be unclickable while still loading. * Matched version string for all JS and CSS files.
2025-01-18 17:21:33 +00:00 · 2018-03-29 03:05:01 +07:00 · 2018-03-29 03:05:01 +07:00 · 0f32319552
commit 0f32319552
parent 2dd724f88f
17 changed files with 166 additions and 69 deletions
--- a/pages/album.html
+++ b/pages/album.html
@ -10,8 +10,8 @@
    <title>safe.fiery.me &#8211; A small safe worth protecting.</title>

    <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=K6t86DbYuR">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=XcTZuW9fFV">
+    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=8FbubjpYRC">
    <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="js/album.js?v=V2RnA3Mwhh"></script>
--- a/pages/auth.html
+++ b/pages/auth.html
@ -10,9 +10,9 @@
    <title>safe.fiery.me &#8211; A small safe worth protecting.</title>

    <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=K6t86DbYuR">
+    <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=V2RnA3Mwhh">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=XcTZuW9fFV">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=8FbubjpYRC">
    <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="js/auth.js?v=8FbubjpYRC"></script>
@ -67,7 +67,7 @@
      <div class="hero-body">
        <div class="container">
          <div class="columns is-centered">
-            <div class="column is-one-quarter is-hidden-mobile"></div>
+            <div class="column is-one-third is-hidden-touch"></div>
            <div class="column">
              <h1 class="title">
                Dashboard Access
@ -94,7 +94,7 @@
                </div>
              </div>
            </div>
-            <div class="column is-one-quarter is-hidden-mobile"></div>
+            <div class="column is-one-third is-hidden-touch"></div>
          </div>
        </div>
      </div>
--- a/pages/dashboard.html
+++ b/pages/dashboard.html
@ -10,12 +10,13 @@
    <title>safe.fiery.me &#8211; A small safe worth protecting.</title>

    <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=K6t86DbYuR">
-    <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=V2RnA3Mwhh">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=XcTZuW9fFV">
+    <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=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=8FbubjpYRC">
    <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=GBG98Tjuxh">
    <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=8FbubjpYRC"></script>

    <!-- Open Graph tags -->
--- a/pages/faq.html
+++ b/pages/faq.html
@ -10,8 +10,8 @@
    <title>safe.fiery.me &#8211; A small safe worth protecting.</title>

    <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=K6t86DbYuR">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=XcTZuW9fFV">
+    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=8FbubjpYRC">

    <!-- Open Graph tags -->
    <meta property="og:type" content="website" />
--- a/pages/home.html
+++ b/pages/home.html
@ -10,11 +10,13 @@
    <title>safe.fiery.me &#8211; A small safe worth protecting.</title>

    <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=K6t86DbYuR">
-    <link rel="stylesheet" type="text/css" href="css/style.css?v=XcTZuW9fFV">
+    <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=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="css/style.css?v=8FbubjpYRC">
    <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=8FbubjpYRC"></script>
    <script type="text/javascript" src="libs/dropzone/dropzone.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/home.js?v=8FbubjpYRC"></script>

    <!-- Open Graph tags -->
@ -49,6 +51,12 @@
    <meta name="msapplication-config" content="https://safe.fiery.me/icons/browserconfig.xml?v=V2RnA3Mwhh">
    <meta name="theme-color" content="#232629">

+    <style>
+      #dropzone * {
+        pointer-events: none;
+      }
+    </style>
+
  </head>

  <body>
@ -67,7 +75,7 @@
          <div class="columns">
            <div class="column is-hidden-mobile"></div>
            <div class="column" id="uploadContainer">
-              <a id="loginToUpload" href="auth" class="button is-danger">Loading&hellip;</a>
+              <a id="loginToUpload" class="button is-danger is-loading" style="display: flex"></a>
              <div class="field" id="albumDiv" style="display: none">
                <p class="control select-wrapper">
                  <span class="select">
@ -86,9 +94,24 @@
              <div class="column is-hidden-mobile"></div>
              <div class="column">
                <progress class="progress is-small is-danger" value="0" max="100"></progress>
-                <img data-dz-thumbnail style="max-width: 200px" />
+                <img class="is-unselectable" style="max-width: 200px" data-dz-thumbnail>
                <p class="error"></p>
-                <p class="link"><a target="_blank" style="display: none"></a></p>
+                <p class="link" style="display: none">
+                  <a target="_blank"></a>
+                  <a class="has-text-info is-outlined is-hidden-touch is-unselectable clipboard-js" title="Copy link to clipboard">
+                    <span class="icon is-small">
+                      <i class="icon-attach"></i>
+                    </span>
+                  </a>
+                </p>
+                <p class="clipboard-mobile is-hidden-desktop" style="margin-top: 5px">
+                  <a class="button is-info is-outlined clipboard-js" style="display: flex">
+                    <span class="icon">
+                      <i class="icon-attach"></i>
+                    </span>
+                    <span>Copy link to clipboard</span>
+                  </a>
+                </p>
              </div>
              <div class="column is-hidden-mobile"></div>
            </div>
--- a/public/css/style.css
+++ b/public/css/style.css
@ -186,3 +186,19 @@ hr {
 .help {
  color: #7f8c8d;
 }
+
+.input::-moz-placeholder {
+  color: #7f8c8d;
+}
+
+.input::-webkit-input-placeholder {
+  color: #7f8c8d;
+}
+
+.input:-moz-placeholder {
+  color: #7f8c8d;
+}
+
+.input:-ms-input-placeholder {
+  color: #7f8c8d;
+}
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
@ -1,11 +1,12 @@
 /* eslint-disable no-unused-expressions */
-/* global swal, axios */
+/* global swal, axios, ClipboardJS */

 const panel = {
  page: undefined,
  username: undefined,
  token: localStorage.token,
-  filesView: localStorage.filesView
+  filesView: localStorage.filesView,
+  clipboardJS: undefined
 }

 panel.preparePage = () => {
@ -132,12 +133,12 @@ panel.getUploads = (album, page, element) => {
        <div class="column">
          <a class="button is-small is-outlined is-danger" title="List view" onclick="panel.setFilesView('list', ${album}, ${page}, this)">
            <span class="icon is-small">
-              <i class="fa icon-list-bullet"></i>
+              <i class="icon-th-list"></i>
            </span>
          </a>
          <a class="button is-small is-outlined is-danger" title="Thumbs view" onclick="panel.setFilesView('thumbs', ${album}, ${page}, this)">
            <span class="icon is-small">
-              <i class="fa icon-th-large"></i>
+              <i class="icon-th-large"></i>
            </span>
          </a>
        </div>
@ -175,7 +176,7 @@ panel.getUploads = (album, page, element) => {
        div.innerHTML += `
          <a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteFile(${item.id}, ${album}, ${page})">
            <span class="icon is-small">
-              <i class="fa icon-trash"></i>
+              <i class="icon-trash-1"></i>
            </span>
          </a>
          <div class="name">
@ -228,10 +229,15 @@ panel.getUploads = (album, page, element) => {
            <th>${displayAlbumOrUser}</th>
            <td>${item.size}</td>
            <td>${item.date}</td>
-            <td>
-              <a class="button is-small is-danger is-outlined" title="Delete album" onclick="event.stopPropagation(); panel.deleteFile(${item.id}, ${album}, ${page})">
+            <td style="text-align: right">
+              <a class="button is-small is-info is-outlined clipboard-js" title="Copy link to clipboard" data-clipboard-text="${item.file}">
                <span class="icon is-small">
-                  <i class="fa icon-trash"></i>
+                  <i class="icon-attach"></i>
+                </span>
+              </a>
+              <a class="button is-small is-danger is-outlined" title="Delete album" panel.deleteFile(${item.id}, ${album}, ${page})">
+                <span class="icon is-small">
+                  <i class="icon-trash-1"></i>
                </span>
              </a>
            </td>
@ -242,6 +248,8 @@ panel.getUploads = (album, page, element) => {

        if (item.thumb) {
          tr.addEventListener('click', function (event) {
+            if (event.target.tagName.toLowerCase() === 'a') { return }
+            if (event.target.className.includes('icon')) { return }
            document.getElementById('modalImage').src = item.thumb
            document.getElementById('modal').className += ' is-active'
          })
@ -349,15 +357,20 @@ panel.getAlbums = () => {
          <th>${item.files}</th>
          <td>${item.date}</td>
          <td><a href="${item.identifier}" target="_blank">${item.identifier}</a></td>
-          <td>
+          <td style="text-align: right">
            <a class="button is-small is-primary is-outlined" title="Edit name" onclick="panel.renameAlbum(${item.id})">
              <span class="icon is-small">
-                <i class="fa icon-pencil"></i>
+                <i class="icon-edit"></i>
+              </span>
+            </a>
+            <a class="button is-small is-info is-outlined clipboard-js" title="Copy link to clipboard" data-clipboard-text="${item.identifier}">
+              <span class="icon is-small">
+                <i class="icon-attach"></i>
              </span>
            </a>
            <a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteAlbum(${item.id})">
              <span class="icon is-small">
-                <i class="fa icon-trash"></i>
+                <i class="icon-trash-1"></i>
              </span>
            </a>
          </td>
@ -735,5 +748,17 @@ window.onload = () => {
  if (!('ontouchstart' in document.documentElement)) {
    document.documentElement.className += ' no-touch'
  }
+
  panel.preparePage()
+
+  panel.clipboardJS = new ClipboardJS('.clipboard-js')
+
+  panel.clipboardJS.on('success', () => {
+    return swal('Copied!', 'The link has been copied to clipboard.', 'success')
+  })
+
+  panel.clipboardJS.on('error', event => {
+    console.error(event)
+    return swal('An error occurred', 'There was an error when trying to copy the link to clipboard, please check the console for more information.', 'error')
+  })
 }
--- a/public/js/home.js
+++ b/public/js/home.js
@ -1,5 +1,5 @@
 /* eslint-disable no-unused-expressions */
-/* global swal, axios, Dropzone */
+/* global swal, axios, Dropzone, ClipboardJS */

 const upload = {
  isPrivate: true,
@ -8,7 +8,8 @@ const upload = {
  chunkedUploads: undefined,
  // Add the album let to the upload so we can store the album id in there
  album: undefined,
-  dropzone: undefined
+  dropzone: undefined,
+  clipboardJS: undefined
 }

 const imageExtensions = ['.webp', '.jpg', '.jpeg', '.bmp', '.gif', '.png']
@ -32,8 +33,10 @@ upload.preparePage = () => {
    if (upload.token) {
      return upload.verifyToken(upload.token, true)
    } else {
-      document.getElementById('loginToUpload').innerText = 'Running in private mode. Log in to upload.'
-      document.getElementById('loginToUpload').style.display = 'inline-flex' // ???
+      const button = document.getElementById('loginToUpload')
+      button.href = 'auth'
+      button.innerText = 'Running in private mode. Log in to upload.'
+      button.className = button.className.replace(' is-loading', '')
    }
  } else {
    return upload.prepareUpload()
@ -104,7 +107,13 @@ upload.prepareUpload = () => {

  const div = document.createElement('div')
  div.id = 'dropzone'
-  div.innerHTML = 'Click here or drag and drop files'
+  div.className = 'button'
+  div.innerHTML = `
+    <span class="icon">
+      <i class="icon-upload-cloud"></i>
+    </span>
+    <span>Click here or drag and drop files</span>
+  `
  div.style.display = 'flex'

  document.getElementById('maxFileSize').innerHTML = `Maximum upload size per file is ${upload.maxFileSize}`
@ -132,7 +141,7 @@ upload.prepareDropzone = () => {
    parallelUploads: 2,
    uploadMultiple: false,
    previewsContainer: 'div#uploads',
-    previewTemplate: previewTemplate,
+    previewTemplate,
    createImageThumbnails: false,
    maxFiles: 1000,
    autoProcessQueue: true,
@ -176,10 +185,8 @@ upload.prepareDropzone = () => {
        return done()
      }

-      const a = file.previewTemplate.querySelector('.link > a')
-      a.href = a.innerHTML = response.files[0].url
-      a.style = ''
-      upload.showThumbnail(file, a.href)
+      upload.appendLink(file, response.files[0].url)
+      upload.showThumbnail(file, response.files[0].url)
      return done()
    }
  })
@ -209,10 +216,8 @@ upload.prepareDropzone = () => {
      return
    }

-    const a = file.previewTemplate.querySelector('.link > a')
-    a.href = a.innerHTML = response.files[0].url
-    a.style = ''
-    upload.showThumbnail(file, a.href)
+    upload.appendLink(file, response.files[0].url)
+    upload.showThumbnail(file, response.files[0].url)
  })

  upload.dropzone.on('error', (file, error) => {
@ -223,6 +228,16 @@ upload.prepareDropzone = () => {
  upload.prepareShareX()
 }

+upload.appendLink = (file, url) => {
+  const a = file.previewTemplate.querySelector('.link > a')
+  const clipTablet = file.previewTemplate.querySelector('.link > .clipboard-js')
+  const clipMobile = file.previewTemplate.querySelector('.clipboard-mobile > .clipboard-js')
+
+  console.log(url)
+  a.href = a.innerHTML = clipTablet.dataset['clipboardText'] = clipMobile.dataset['clipboardText'] = url
+  a.parentElement.style = ''
+}
+
 upload.showThumbnail = (file, url) => {
  const exec = /.[\w]+(\?|$)/.exec(url)
  if (exec && exec[0] && imageExtensions.includes(exec[0].toLowerCase())) {
@ -270,4 +285,15 @@ window.addEventListener('paste', event => {

 window.onload = () => {
  upload.checkIfPublic()
+
+  upload.clipboardJS = new ClipboardJS('.clipboard-js')
+
+  upload.clipboardJS.on('success', () => {
+    return swal('Copied!', 'The link has been copied to clipboard.', 'success')
+  })
+
+  upload.clipboardJS.on('error', event => {
+    console.error(event)
+    return swal('An error occurred', 'There was an error when trying to copy the link to clipboard, please check the console for more information.', 'error')
+  })
 }
--- a/public/libs/clipboard.js/clipboard.min.js
+++ b/public/libs/clipboard.js/clipboard.min.js
--- a/public/libs/fontello/LICENSE
+++ b/public/libs/fontello/LICENSE
@ -1,12 +1,12 @@
 Font license info


-## Font Awesome
+## Typicons

-   Copyright (C) 2016 by Dave Gandy
+   (c) Stephen Hutchings 2012

-   Author:    Dave Gandy
-   License:   SIL ()
-   Homepage:  http://fortawesome.github.com/Font-Awesome/
+   Author:    Stephen Hutchings
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://typicons.com/


--- a/public/libs/fontello/fontello.css
+++ b/public/libs/fontello/fontello.css
@ -1,11 +1,11 @@
@font-face {
  font-family: 'fontello';
-  src: url('fontello.eot?90492172');
-  src: url('fontello.eot?90492172#iefix') format('embedded-opentype'),
-       url('fontello.woff2?90492172') format('woff2'),
-       url('fontello.woff?90492172') format('woff'),
-       url('fontello.ttf?90492172') format('truetype'),
-       url('fontello.svg?90492172#fontello') format('svg');
+  src: url('fontello.eot?31646562');
+  src: url('fontello.eot?31646562#iefix') format('embedded-opentype'),
+       url('fontello.woff2?31646562') format('woff2'),
+       url('fontello.woff?31646562') format('woff'),
+       url('fontello.ttf?31646562') format('truetype'),
+       url('fontello.svg?31646562#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -15,32 +15,33 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
-    src: url('fontello.svg?90492172#fontello') format('svg');
+    src: url('fontello.svg?63853457#fontello') format('svg');
  }
 }
 */

- [class^="fa icon-"]:before, [class*=" icon-"]:before {
-  font: normal normal 14px/1 fontello;
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;

  display: inline-block;
  text-decoration: inherit;
-  width: 1em;
  text-align: center;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-.icon-th-large:before { content: '\e800'; } /* '' */
-.icon-pencil:before { content: '\e802'; } /* '' */
-.icon-list-bullet:before { content: '\f0ca'; } /* '' */
-.icon-trash:before { content: '\f1f8'; } /* '' */
+.icon-edit:before { content: '\e800'; } /* '' */
+.icon-upload-cloud:before { content: '\e801'; } /* '' */
+.icon-trash-1:before { content: '\e802'; } /* '' */
+.icon-th-list:before { content: '\e803'; } /* '' */
+.icon-attach:before { content: '\e804'; } /* '' */
+.icon-th-large:before { content: '\e805'; } /* '' */
--- a/public/libs/fontello/fontello.eot
+++ b/public/libs/fontello/fontello.eot
--- a/public/libs/fontello/fontello.svg
+++ b/public/libs/fontello/fontello.svg
@ -6,13 +6,17 @@
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="th-large" unicode="&#xe800;" d="M429 279v-215q0-29-22-50t-50-21h-286q-29 0-50 21t-21 50v215q0 29 21 50t50 21h286q29 0 50-21t22-50z m0 428v-214q0-29-22-50t-50-22h-286q-29 0-50 22t-21 50v214q0 29 21 50t50 22h286q29 0 50-22t22-50z m500-428v-215q0-29-22-50t-50-21h-286q-29 0-50 21t-21 50v215q0 29 21 50t50 21h286q29 0 50-21t22-50z m0 428v-214q0-29-22-50t-50-22h-286q-29 0-50 22t-21 50v214q0 29 21 50t50 22h286q29 0 50-22t22-50z" horiz-adv-x="928.6" />
+<glyph glyph-name="edit" unicode="&#xe800;" d="M966 671q24-23 24-55t-24-55l-185-185 0-469q0-21-15-36t-37-16l-676 0q-22 0-37 16t-16 36l0 677q0 21 16 37t37 15l468 0 185 185q24 24 55 24t55-24z m-523-486l327 328-112 112-328-327z m-134 69l4-86 88-4z m369-295l0 312-167-160q-20-20-63-33t-80-14l-159 0 0 159q0 41 11 82t31 61l165 167-312 0 0-574 574 0z m130 590l67 67-114 114-67-67z" horiz-adv-x="990" />

-<glyph glyph-name="pencil" unicode="&#xe802;" d="M203-7l50 51-131 131-51-51v-60h72v-71h60z m291 518q0 12-12 12-5 0-9-4l-303-302q-4-4-4-10 0-12 13-12 5 0 9 4l303 302q3 4 3 10z m-30 107l232-232-464-465h-232v233z m381-54q0-29-20-50l-93-93-232 233 93 92q20 21 50 21 29 0 51-21l131-131q20-22 20-51z" horiz-adv-x="857.1" />
+<glyph glyph-name="upload-cloud" unicode="&#xe801;" d="M781 506q108 0 184-76t76-184-76-184-184-77l-208 0 0 239 67-66q16-17 38-17 20 0 36 17 15 15 15 36t-15 36l-156 156q-14 14-37 15t-37-15l-156-156q-15-15-15-36t15-36q16-17 37-17 20 0 36 17l68 66 0-239-260 0q-86 0-148 61t-61 148q0 72 44 128t112 73l0 8q0 130 92 221t221 91q100 0 180-58t114-152q2 0 8 1t10 0z" horiz-adv-x="1041" />

-<glyph glyph-name="list-bullet" unicode="&#xf0ca;" d="M214 64q0-44-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m0 286q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m786-232v-107q0-7-5-13t-13-5h-678q-8 0-13 5t-5 13v107q0 7 5 12t13 6h678q7 0 13-6t5-12z m-786 518q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m786-232v-108q0-7-5-12t-13-5h-678q-8 0-13 5t-5 12v108q0 7 5 12t13 5h678q7 0 13-5t5-12z m0 285v-107q0-7-5-12t-13-6h-678q-8 0-13 6t-5 12v107q0 8 5 13t13 5h678q7 0 13-5t5-13z" horiz-adv-x="1000" />
+<glyph glyph-name="trash-1" unicode="&#xe802;" d="M729 636q21 0 37-15t15-36-15-37-37-15l0-417q0-86-61-147t-147-62l-261 0q-86 0-147 62t-60 147l0 417q-22 0-37 15t-16 37 16 36 37 15l51 0 0 53q0 42 30 73t75 31l364 0q43 0 74-31t31-73l0-53 51 0z m-520 53l0-53 364 0 0 53-364 0z m416-573l0 417-469 0 0-417q0-43 31-74t73-31l261 0q43 0 73 31t31 74z m-390 338q10 0 18-8t7-17l0-313q0-10-7-18t-18-8-18 8-8 18l0 313q0 10 8 17t18 8z m104 0q10 0 18-8t8-17l0-313q0-10-8-18t-18-8-18 8-8 18l0 313q0 10 8 17t18 8z m104 0q10 0 18-8t8-17l0-313q0-10-8-18t-18-8-19 8-8 18l0 313q0 10 8 17t19 8z m105 0q10 0 17-8t8-17l0-313q0-10-8-18t-17-8-19 8-8 18l0 313q0 10 8 17t19 8z" horiz-adv-x="781" />

-<glyph glyph-name="trash" unicode="&#xf1f8;" d="M286 82v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m143 0v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m142 0v393q0 8-5 13t-12 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q7 0 12 5t5 13z m-303 554h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q23 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
+<glyph glyph-name="th-list" unicode="&#xe803;" d="M860 90q43 0 73-31t31-74q0-43-31-73t-73-31l-365 0q-44 0-74 31t-31 73 31 74 74 31l365 0z m0 364q43 0 73-31t31-73-31-73-73-31l-365 0q-44 0-74 31t-31 73 31 73 74 31l365 0z m0 365q43 0 73-31t31-73q0-44-31-74t-73-31l-365 0q-42 0-74 31t-31 74 31 73 74 31l365 0z m-860-834q0 130 130 130t130-130-130-130-130 130z m0 365q0 130 130 130t130-130-130-130-130 130z m0 365q0 130 130 130t130-130-130-130-130 130z" horiz-adv-x="964" />
+
+<glyph glyph-name="attach" unicode="&#xe804;" d="M285 223q-52 0-91 38t-39 92q0 55 38 93l236 236q61 61 147 61t148-61 61-148-61-147l-369-369q-61-61-146-61-86 0-148 61t-61 148 61 147l42 41q0-61 37-110l-5-5q-30-30-30-73t30-74 74-30 74 30q61 61 183 184t184 185q30 30 30 73t-30 74q-31 30-74 30t-73-30l-237-236q-7-8-7-19t7-19 19-7 19 7l184 184q31-31 31-74 0-41-31-72l-110-111q-38-38-93-38z" horiz-adv-x="785" />
+
+<glyph glyph-name="th-large" unicode="&#xe805;" d="M0 663q0 65 46 110t110 46l104 0q65 0 111-46t45-110l0-104q0-65-45-111t-111-45l-104 0q-65 0-110 45t-46 111l0 104z m521 0q0 65 46 110t111 46l103 0q65 0 111-46t46-110l0-104q0-65-46-111t-111-45l-103 0q-65 0-111 45t-46 111l0 104z m-521-521q0 65 46 110t110 46l104 0q65 0 111-46t45-110l0-104q0-65-45-111t-111-46l-104 0q-65 0-110 46t-46 111l0 104z m521 0q0 65 46 110t111 46l103 0q65 0 111-46t46-110l0-104q0-65-46-111t-111-46l-103 0q-65 0-111 46t-46 111l0 104z" horiz-adv-x="938" />
 </font>
 </defs>
 </svg>
--- a/public/libs/fontello/fontello.ttf
+++ b/public/libs/fontello/fontello.ttf
--- a/public/libs/fontello/fontello.woff
+++ b/public/libs/fontello/fontello.woff
--- a/public/libs/fontello/fontello.woff2
+++ b/public/libs/fontello/fontello.woff2
--- a/views/album.handlebars
+++ b/views/album.handlebars
@ -10,8 +10,8 @@
    <title>{{ title }}</title>

    <!-- Stylesheets and scripts -->
-    <link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css?v=K6t86DbYuR">
-    <link rel="stylesheet" type="text/css" href="../css/style.css?v=XcTZuW9fFV">
+    <link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css?v=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="../css/style.css?v=8FbubjpYRC">
    <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>