From 0d3591cb49395689196711f97f0809e4fb5a03bc Mon Sep 17 00:00:00 2001
From: Bobby Wibowo <bobbywibowo98@gmail.com>
Date: Wed, 4 Apr 2018 10:18:53 +0700
Subject: [PATCH] Updates

Added bulma tooltip extension for icons in home and file name in dashboard. I MAY revert this someday. I was bored as heck so I did this.
---
 pages/dashboard.html                    |  3 ++-
 pages/home.html                         | 15 ++++++++-------
 public/js/dashboard.js                  |  4 ++--
 public/libs/bulma/bulma-tooltip.min.css |  1 +
 4 files changed, 13 insertions(+), 10 deletions(-)
 create mode 100644 public/libs/bulma/bulma-tooltip.min.css

diff --git a/pages/dashboard.html b/pages/dashboard.html
index 3aa6221..33c1aa7 100644
--- a/pages/dashboard.html
+++ b/pages/dashboard.html
@@ -11,13 +11,14 @@
 
     <!-- Stylesheets and scripts -->
     <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma-tooltip.min.css?v=8FbubjpYRC">
     <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=YBMnkTE6GB">
     <link rel="stylesheet" type="text/css" href="css/style.css?v=YBMnkTE6GB">
     <link rel="stylesheet" type="text/css" href="css/dashboard.css?v=YXK9PzZfYP">
     <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=YXK9PzZfYP"></script>
+    <script type="text/javascript" src="js/dashboard.js?v=8FbubjpYRC"></script>
 
     <!-- Open Graph tags -->
     <meta property="og:type" content="website" />
diff --git a/pages/home.html b/pages/home.html
index bfc3e19..8ce7bd9 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -11,6 +11,7 @@
 
     <!-- Stylesheets and scripts -->
     <link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=8FbubjpYRC">
+    <link rel="stylesheet" type="text/css" href="libs/bulma/bulma-tooltip.min.css?v=8FbubjpYRC">
     <link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=YBMnkTE6GB">
     <link rel="stylesheet" type="text/css" href="css/style.css?v=YBMnkTE6GB">
     <script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=8FbubjpYRC"></script>
@@ -135,37 +136,37 @@
             <a href="auth" id="loginLinkText"></a>
           </h3>
           <h3 id="links">
-            <a href="https://fiery.me" title="Home">
+            <a href="https://fiery.me" data-tooltip="Home" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-home icon-2x"></i>
               </span>
             </a>
-            <a href="https://blog.fiery.me" title="Blog">
+            <a href="https://blog.fiery.me" data-tooltip="Blog" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-archive icon-2x"></i>
               </span>
             </a>
-            <a id="ShareX" href="https://safe.fiery.me/sharex.txt" title="ShareX">
+            <a id="ShareX" href="https://safe.fiery.me/sharex.txt" data-tooltip="ShareX" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-sharex icon-2x"></i>
               </span>
             </a>
-            <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" title="Chrome extension">
+            <a href="https://chrome.google.com/webstore/detail/loli-safe-uploader/enkkmplljfjppcdaancckgilmgoiofnj" data-tooltip="Chrome extension" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-chrome icon-2x"></i>
               </span>
             </a>
-            <a href="faq" title="FAQ">
+            <a href="faq" data-tooltip="FAQ" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-help-circled icon-2x"></i>
               </span>
             </a>
-            <a href="auth" title="Dashboard">
+            <a href="auth" data-tooltip="Dashboard" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-gauge icon-2x"></i>
               </span>
             </a>
-            <a href="https://github.com/BobbyWibowo/lolisafe" title="GitHub">
+            <a href="https://github.com/BobbyWibowo/lolisafe" data-tooltip="GitHub" class="tooltip">
               <span class="icon is-medium">
                 <i class="icon-github-circled icon-2x"></i>
               </span>
diff --git a/public/js/dashboard.js b/public/js/dashboard.js
index 3cc3b99..6829d07 100644
--- a/public/js/dashboard.js
+++ b/public/js/dashboard.js
@@ -268,7 +268,7 @@ panel.getUploads = (album, page, element) => {
         tr.innerHTML = `
           <tr>
             <th><input type="checkbox" class="file-checkbox" title="Select this file" data-id="${file.id}" onclick="panel.selectFile(this)"${selected ? ' checked' : ''}></th>
-            <th><a href="${file.file}" target="_blank">${file.name}</a></th>
+            <th><a href="${file.file}" target="_blank" data-tooltip="${file.file}" class="tooltip is-tooltip-right is-tooltip-multiline">${file.name}</a></th>
             <th>${displayAlbumOrUser}</th>
             <td>${file.size}</td>
             <td>${file.date}</td>
@@ -637,7 +637,7 @@ panel.getAlbums = () => {
             <tr>
                 <th>Name</th>
                 <th>Files</th>
-                <th>Created At</th>
+                <th>Created at</th>
                 <th>Public link</th>
                 <th></th>
             </tr>
diff --git a/public/libs/bulma/bulma-tooltip.min.css b/public/libs/bulma/bulma-tooltip.min.css
new file mode 100644
index 0000000..920ebeb
--- /dev/null
+++ b/public/libs/bulma/bulma-tooltip.min.css
@@ -0,0 +1 @@
+@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.tooltip{position:relative}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active::before,.tooltip:hover::before{z-index:99999;position:absolute;display:inline-block;pointer-events:none}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{content:"";border-style:solid;border-width:.5rem}.tooltip.is-tooltip-active::before,.tooltip:hover::before{opacity:0;content:attr(data-tooltip);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;padding:.4rem .8rem;-webkit-transform:translate(-50%,1rem);transform:translate(-50%,1rem);background:rgba(74,74,74,.9);border-radius:3px;color:#fff;max-width:24rem}.tooltip.is-tooltip-active:not(.is-loading)::after,.tooltip:focus:not(.is-loading)::after,.tooltip:hover:not(.is-loading)::after{top:0;bottom:auto;left:50%;opacity:1;margin-left:-.5rem;margin-top:-.5rem;border-color:rgba(74,74,74,.9) transparent transparent transparent}.tooltip.is-tooltip-active::before,.tooltip:focus::before,.tooltip:hover::before{top:auto;bottom:100%;left:50%;opacity:1;-webkit-transform:translate(-50%,-.5rem);transform:translate(-50%,-.5rem)}.tooltip.is-tooltip-right::before{top:auto;bottom:50%;left:100%;right:auto;-webkit-transform:translate(-1rem,50%);transform:translate(-1rem,50%)}.tooltip.is-tooltip-right.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-right:focus:not(.is-loading)::after,.tooltip.is-tooltip-right:hover:not(.is-loading)::after{top:50%;left:100%;right:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.tooltip.is-tooltip-right.is-tooltip-active::before,.tooltip.is-tooltip-right:focus::before,.tooltip.is-tooltip-right:hover::before{-webkit-transform:translate(.5rem,50%);transform:translate(.5rem,50%)}.tooltip.is-tooltip-bottom::before{top:100%;bottom:auto;left:50%;right:auto;-webkit-transform:translate(-50%,-1rem);transform:translate(-50%,-1rem)}.tooltip.is-tooltip-bottom.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-bottom:focus:not(.is-loading)::after,.tooltip.is-tooltip-bottom:hover:not(.is-loading)::after{top:100%;bottom:auto;left:50%;right:auto;border-color:transparent transparent rgba(74,74,74,.9) transparent}.tooltip.is-tooltip-bottom.is-tooltip-active::before,.tooltip.is-tooltip-bottom:focus::before,.tooltip.is-tooltip-bottom:hover::before{-webkit-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem)}.tooltip.is-tooltip-left::before{top:auto;bottom:50%;left:auto;right:100%;-webkit-transform:translate(1rem,50%);transform:translate(1rem,50%)}.tooltip.is-tooltip-left.is-tooltip-active:not(.is-loading)::after,.tooltip.is-tooltip-left:focus:not(.is-loading)::after,.tooltip.is-tooltip-left:hover:not(.is-loading)::after{top:50%;left:auto;right:calc(100% - .5rem);border-color:transparent transparent transparent rgba(74,74,74,.9)}.tooltip.is-tooltip-left.is-tooltip-active::before,.tooltip.is-tooltip-left:focus::before,.tooltip.is-tooltip-left:hover::before{-webkit-transform:translate(-.5rem,50%);transform:translate(-.5rem,50%)}.tooltip.is-tooltip-multiline::before{min-width:24rem;text-overflow:clip;white-space:normal;word-break:break-word}.tooltip.is-tooltip-white:not(.is-loading)::after{border-color:rgba(255,255,255,.9) transparent transparent transparent}.tooltip.is-tooltip-white.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,255,255,.9) transparent transparent}.tooltip.is-tooltip-white.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,255,255,.9) transparent}.tooltip.is-tooltip-white.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,255,255,.9)}.tooltip.is-tooltip-white::before{background:rgba(255,255,255,.9);color:#0a0a0a}.tooltip.is-tooltip-black:not(.is-loading)::after{border-color:rgba(10,10,10,.9) transparent transparent transparent}.tooltip.is-tooltip-black.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(10,10,10,.9) transparent transparent}.tooltip.is-tooltip-black.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(10,10,10,.9) transparent}.tooltip.is-tooltip-black.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(10,10,10,.9)}.tooltip.is-tooltip-black::before{background:rgba(10,10,10,.9);color:#fff}.tooltip.is-tooltip-light:not(.is-loading)::after{border-color:rgba(245,245,245,.9) transparent transparent transparent}.tooltip.is-tooltip-light.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(245,245,245,.9) transparent transparent}.tooltip.is-tooltip-light.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(245,245,245,.9) transparent}.tooltip.is-tooltip-light.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(245,245,245,.9)}.tooltip.is-tooltip-light::before{background:rgba(245,245,245,.9);color:#363636}.tooltip.is-tooltip-dark:not(.is-loading)::after{border-color:rgba(54,54,54,.9) transparent transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(54,54,54,.9) transparent transparent}.tooltip.is-tooltip-dark.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(54,54,54,.9) transparent}.tooltip.is-tooltip-dark.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(54,54,54,.9)}.tooltip.is-tooltip-dark::before{background:rgba(54,54,54,.9);color:#f5f5f5}.tooltip.is-tooltip-primary:not(.is-loading)::after{border-color:rgba(0,209,178,.9) transparent transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(0,209,178,.9) transparent transparent}.tooltip.is-tooltip-primary.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(0,209,178,.9) transparent}.tooltip.is-tooltip-primary.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(0,209,178,.9)}.tooltip.is-tooltip-primary::before{background:rgba(0,209,178,.9);color:#fff}.tooltip.is-tooltip-link:not(.is-loading)::after{border-color:rgba(50,115,220,.9) transparent transparent transparent}.tooltip.is-tooltip-link.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(50,115,220,.9) transparent transparent}.tooltip.is-tooltip-link.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(50,115,220,.9) transparent}.tooltip.is-tooltip-link.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(50,115,220,.9)}.tooltip.is-tooltip-link::before{background:rgba(50,115,220,.9);color:#fff}.tooltip.is-tooltip-info:not(.is-loading)::after{border-color:rgba(32,156,238,.9) transparent transparent transparent}.tooltip.is-tooltip-info.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(32,156,238,.9) transparent transparent}.tooltip.is-tooltip-info.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(32,156,238,.9) transparent}.tooltip.is-tooltip-info.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(32,156,238,.9)}.tooltip.is-tooltip-info::before{background:rgba(32,156,238,.9);color:#fff}.tooltip.is-tooltip-success:not(.is-loading)::after{border-color:rgba(35,209,96,.9) transparent transparent transparent}.tooltip.is-tooltip-success.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(35,209,96,.9) transparent transparent}.tooltip.is-tooltip-success.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(35,209,96,.9) transparent}.tooltip.is-tooltip-success.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(35,209,96,.9)}.tooltip.is-tooltip-success::before{background:rgba(35,209,96,.9);color:#fff}.tooltip.is-tooltip-warning:not(.is-loading)::after{border-color:rgba(255,221,87,.9) transparent transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,221,87,.9) transparent transparent}.tooltip.is-tooltip-warning.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,221,87,.9) transparent}.tooltip.is-tooltip-warning.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,221,87,.9)}.tooltip.is-tooltip-warning::before{background:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}.tooltip.is-tooltip-danger:not(.is-loading)::after{border-color:rgba(255,56,96,.9) transparent transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-right:not(.is-loading)::after{border-color:transparent rgba(255,56,96,.9) transparent transparent}.tooltip.is-tooltip-danger.is-tooltip-bottom:not(.is-loading)::after{border-color:transparent transparent rgba(255,56,96,.9) transparent}.tooltip.is-tooltip-danger.is-tooltip-left:not(.is-loading)::after{border-color:transparent transparent transparent rgba(255,56,96,.9)}.tooltip.is-tooltip-danger::before{background:rgba(255,56,96,.9);color:#fff}