Add close icons on modals (bokub#12)

dimio · Oct 18, 2022 · 4a12427 · 4a12427
1 parent 3e9c9c2
commit 4a12427
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -121,8 +121,9 @@ <h1 class="my-0"><span>{</span> NoPaste <span>}</span></h1>
             </div>
         </footer>
         <div id="description-modal" data-micromodal-close class="modal">
-            <div tabindex="-1"  class="modal-overlay">
+            <div tabindex="-1" class="modal-overlay">
                 <div role="dialog" class="modal-content shadow-bottom p-3 m-3">
+                    <div class="modal-close" data-micromodal-close><span class="icon-close"></span></div>
                     <h2 class="mt-0">What is NoPaste?</h2>
 
                     <span class="pink">NoPaste</span> is an open-source website similar to Pastebin where you can store any piece of code,
@@ -144,7 +145,7 @@ <h3>Because of this design:</h3>
                     🔍 Google <span class="pink">will not index</span> your data, even if your link is public<br />
                     <br />
                     If you want to know more, you can find more information on
-                    <a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="pink">Github</a>
+                    <a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="pink">GitHub</a>
                     <div class="additional-info">
                         Note: NoPaste is an improved version of Topaz's
                         <a href="https://topaz.github.io/paste" rel="noopener" target="_blank">Paste</a>
@@ -155,6 +156,7 @@ <h3>Because of this design:</h3>
         <div id="error-modal" class="modal" data-micromodal-close>
             <div tabindex="-1" class="modal-overlay">
                 <div role="dialog" class="modal-content shadow-bottom p-3 m-3">
+                    <div class="modal-close" data-micromodal-close><span class="icon-close"></span></div>
                     NoPaste cannot decompress the URL<br /><br />
                     It's possible that you clicked on an invalid link<br /><br />
                     Sorry about that

diff --git a/style.css b/style.css
@@ -101,6 +101,7 @@ h1 {
     overflow-y: auto;
     box-sizing: border-box;
     cursor: initial;
+    position: relative;
 }
 .modal-content .additional-info {
     opacity: 0.75;
@@ -121,6 +122,12 @@ h1 {
     align-items: center;
     cursor: pointer;
 }
+.modal-close {
+    cursor: pointer;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+}
 
 /* Form elements */
 
@@ -187,7 +194,8 @@ button:hover {
 
 @font-face {
     font-family: 'icomoon';
-    src: url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBdoAAAC8AAAAYGNtYXDpQem4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5Zjy4A24AAAGAAAAEFGhlYWQY57y7AAAFlAAAADZoaGVhB8IDygAABcwAAAAkaG10eBoAAgkAAAXwAAAAJGxvY2EDlARQAAAGFAAAABRtYXhwABIAvQAABigAAAAgbmFtZZlKCfsAAAZIAAABhnBvc3QAAwAAAAAH0AAAACAAAwOrAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBQPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg6QPpBf/9//8AAAAAACDpAOkF//3//wAB/+MXBBcDAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIA3wAVAyUDQAAPAEYAACUVFAYrASImPQE0NjsBMhYTFAYHDgEVMRQGKwEiJj0BNDY3PgE1NCYjIgYHDgEHDgEjIiYvAS4BNzY3PgE3NjMyFx4BFxYVAl0PC5gKDw8KmAsPyGEtHCEOC5gLDFoqJCE7JxUlCgwcHAQKBgQIBGcIBAUaHx9JKiswMzMzUxoax5gLDw8LmAoPDwFyW1QZETUOCxMZChw6WxMRJR4bKAsHCB4jBQUCA08GEwkqIB8qCwoTE0QvLjYACAAA/7gEAAOeAGMAbwB7AIgAlAChAK0AugAAATIXHgEXFhUUBw4BBwYHBiY1PAE1NCYnNjc+ATc2NTQmJz4BJyYGMS4BIyIGBzAmBwYWFw4BFRQXHgEXFhcOAQcOAScuATEiFjEeATEWNjEcARUUBicmJy4BJyY1NDc+ATc2MwE2JicmBgcGFhcWNhc2JicuAQcGFhceARc2NCcuAQcGFBceATcXNiYnLgEHBhYXHgEXNiYnJgYHBhYXFjY3FzQmByIGFRQWNzI2NzQmIw4BFR4BNz4BJwIAal1eiygoGhpdQUBMExAUDioqKkMUFR0YBAwVIG0eQSEgQR9tIBUMBBgdFRRCKiorCxIEFl0iFTkmIhkgF5YPFExAQV0aGigpi11dav7CAQMDAwQBAQIDAwUWAgEDAgYCAgECAwYWAgICBwMCAgMHAhwCAgMDCAIDAgMECCgBBQUECAEBBgQECAEqBwUEBgYFBQYmBwUEBQEHBAUFAQOeKCiLXl1qVU1Nfy8vGgMSCgxNMyQvDAUMDTcvL0oqRBsKSTUKPwkJCQk/CjVJChtEKkovLzcNDAUKIhkKBjslECALP0UIIDYJChIDGi8vf01NVWpdXosoKP0hAgQCAQECAgQCAQEVAgYDAgICAgYDAgIcAgcEAwMCAgcDBAIBHAIIAwMBAgIIAwMBDwMHAQEDAwMGAQECAwMEBAEEAwMFAQQKAwMBBgMDBAEBBgMAAAAAAwCAAKsDgAKrAAMABwALAAATNSEVASEVIRE1IRWAAwD9AAMA/QACAAGBVFQBKlb+VlZWAAIAAP+rBAADqwAMABIAAAEHJzc2MzIfARYVFAcJARcBIzUD8GjVaBAYGBCFEBD8EAJ11v2K1QLFaNZoEBCGEBgYEP27AnXV/YvVAAADAKoAKwOAAtUAGAAcACAAAAEyFxYVFAcGKwEVJzcVMzI3NjU0JyYjITUBFSE1ETUhFQLWRjIyMjJGVoCAYCIaGhoaIv3KAqz9VAEAAdUyMkZGMjJWgIBWGhoiIhoaVAEAVFT9rFRUAAEAAAABAAAk5Hi7Xw889QALBAAAAAAA2uQ8NAAAAADa5Dw0AAD/qwQAA6sAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAkEAAAAAAAAAAAAAAACAAAABAAA3wQAAAAEAACABAAAAAQAAKoAAAAAAAoAFAAeAIIBlgGwAdYCCgABAAAACQC7AAgAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==')
+    /* Can be updated using the JSON data from https://github.com/bokub/nopaste/issues/11 */
+    src: url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZkmZnrUAAAF4AAABVGhlYWQhhmIeAAACzAAAADZoaGVhB0IDyQAAAwQAAAAkaG10eBYAAoAAAAMoAAAAIGxvY2EBLgDcAAADSAAAABJtYXhwAAwAIwAAA1wAAAAgbmFtZZlKCfsAAAN8AAABhnBvc3QAAwAAAAAFBAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABANYAgQMqAtUACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gKZ7u487u487u487u4AAgCAACsDgAMrAAsAEAAAAQcnNzYzMh8BFhUUCQEXASMDdE6gTgwSEgxkDP0AAdig/iigAn9OoE4MDGQMEhL+QAHYoP4oAAAAAwCqACsDgALVABgAHAAgAAABMhcWFRQHBisBFSc3FTMyNzY1NCcmIyE1ARUhNRE1IRUC1kYyMjIyRlaAgGAiGhoaGiL9ygKs/VQBAAHVMjJGRjIyVoCAVhoaIiIaGlQBAFRU/axUVAADAIAAqwOAAqsAAwAHAAsAABM1IRUBIRUhETUhFYADAP0AAwD9AAIAAYFUVAEqVv5WVlYAAQAAAAEAAKuSQ39fDzz1AAsEAAAAAADfdA77AAAAAN90DvsAAAAAA4ADKwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADgAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAADWBAAAgAQAAKoEAACAAAAAAAAKABQAHgA4AFwAkACqAAAAAQAAAAgAIQADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=')
         format('truetype');
     font-weight: normal;
     font-style: normal;
@@ -208,21 +216,18 @@ button:hover {
     font-size: 21px;
 }
 .icon-edit {
-    font-size: 12px;
+    font-size: 14px;
 }
 
-.icon-question:before {
+.icon-close:before {
     content: '\e900';
 }
-.icon-github:before {
-    content: '\e901';
-}
 .icon-edit:before {
-    content: '\e903';
+    content: '\e901';
 }
-.icon-notes:before {
+.icon-wrap-text:before {
     content: '\e902';
 }
-.icon-wrap-text:before {
-    content: '\e905';
+.icon-notes:before {
+    content: '\e903';
 }
diff --git a/sw.js b/sw.js
@@ -1,4 +1,4 @@
-const VERSION = '20220614';
+const VERSION = '20221018';
 const PRECACHE = 'precache-' + VERSION;
 const MODES = 'modes-' + VERSION;