M README.md → README.md

@@ -2,7 +2,7 @@ [![Intro](https://github.com/bokub/nopaste/raw/images/intro.png)][intro-img]
 
 [NoPaste](https://nopaste.ml/) is a client-side paste service which works with **no database**, and **no back-end code**
 
-Instead, the pasted data is **compressed** then **stored** into a unique URL that can be decoded later. For example, [this is the HTML code of the service][example]
+Instead, the pasted data is **compressed** then **stored** into a unique URL that can be decoded later. For example, [this is the CSS code used by NoPaste][example]
 
 As a result, there is no risk of data being lost, censored or deleted. The whole data is **in the link** and nowhere else 🤯
 
@@ -25,5 +25,5 @@
 Feel free to edit the generated `height` and `width` attributes, so they suit your needs
 
 [intro-img]: https://nopaste.ml/?lang=python#XQAAAQA6BAAAAAAAAAAFYH9Ev4Ly6wIDoAZQ25VXENWodOrWpmx8bfd8j6jeNeL/0fGICEpU6gh9GhXuFjqBBpJFOvefaxUXJquUWRQarmV+S0SHFOLUFyg/dw8OQI6RB6Y1yliOBWGL916HxAGqgwyLqjkH4w450OLk+q9oJYS6PrZfXU5uBC5DLe76OkG25ibvbsasKN51JuVyRedgoF/d7F9d6L7p02q0jHAM9pnPpKOKqlIVsNnXwYKXK10tnZ0GdiwJ3EeT//52uhw=
-[example]: https://nopaste.ml/?lang=html#XQAAAQBUCQAAAAAAAAAeCEUG0O+oKBdZ2an16qclPsVsA9xArjEo+v7wdal3Am1AsLdXzw9L86kFJA/HP3aMP31FQJprZ5BJcObQ9gG2mgk/o5ash0rBKVbyUAKaYDis7d4edb3x84EDgAqgJKRMcakcJsfTA+uQObpFvFBj4JdsawhToiw1f3rTDRF0BzhxihlMCqxRYKFQb7lOgjWPhG5X0YrIEDYqhOsPidFI+jXGLFay7Q18DShtXbTtor7HAiKD/vYrV4EftOwEhIx4+QJek98/8NI1prL34cmhuwIMl03D/F8/ijbaohNmhi34/gBcKsIXF8YeJDO38BE4arnsM5u72OLp2kNGcM4gpsjq9RXeRVGj2wDHbfuxw+swN3lcnLMEfbnfTuplO2zZIrfTJWiPOoDS4kxaIUf+1+UhffUA4nF/DSXaCy4NPENINk/9lj2lt8PWjiVcKioRIfsYNXnk0jHkPuUsd1ZnhqZME2V0xVJqp/3eENSLwYITfBWkS7HjcAC54KwLYmdFVEQkkM7hN/pEBpVpo5yjCqZJtllf3zzWh7zl+ygo/1lu3Ns/IzHvUEhvKxoS8CrydYJgEatBNcHfz7PsT0yr8DikUp0yl1Jo6uOpJ4sSVK0lxHg6/le7kpF3yAWDKp5A6dTZzJMn0wpFQn+BGYUE57wZ36ea5H9V/R/Gb85GDMGGUC3mUYA2d0hpBkZ7Lq+rnsXU3u8YWklQajdr1qhiX3YdGTMgbeczKiuxQCqNCO6hqvsmvjunmqE/nL6L864c2Kbo9mqs9gvyfsGC//xzLHxKIkhP+hNmfEItw8IHnci3pRRJge8rKUN3PiJDVBadudeCPirDTGVOOmKt8KTebwXluSp+B1lcujeTl+idLcrgq7QClPftbk0/tBlahYRtupXzX0XiTAJ7bZAzXRtUSY6RimiaGjQjem0NORR91yqUx6W572zG1hvI900/+F9lZEZ0R5boXmxUPnuJYQXlYDxAXNEpusrvquCcS8Mblu2XRqaCDQTsJjb/msVD5TcJTUADPKunwHlFiYiGC4nLNlqs0IEoblvpmP/9wp0otSPHb0gmCsEndDPMp3ezD6E0UNImrvBGGpyjLaDafWxogUaXnZxb/jYP1pGrS4sU/6xjDhv/5G6FEg==
+[example]: https://nopaste.ml/?lang=css#XQAAAQAJCgAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY4GA8LGtu7D/+DJgBVbs7/H2nJiaW8ID1VsHyIYWju5V2entWd4LyJ3xLdIHOdqb6g4zCuKHW0LDkvxJASgscbV2ZWQYLqVAGQt2rZZb+5p53hL6Z3WVof2ddJK47JK2Q1NCpMOZAcKeH9qzh9kDYOOB3NrWiyPoQMYdvZrGIhl7witUWpqgp6yr+ktHW4199Cdzdx1pOwNcRHkMIf8lCsLbb3O0QELaOwY11bn1qgoSFSRSNdClnM3V8rZkAAhE3RbRh0zUBGqjBkDqa0Yjw5ZrNIIm1v8aSd0s2ygAcrwfWhm1vQEfJLbScPHXYJ2zeB6QYodQyRb47gvQ2KTVGJhmfJaeh4/9Vz1lArsRUhbXrTOl4fS1tOI+etrSMv1tkPP12MrEGUjFPiioVd+RIOWG+g9AFKte9YJM5E5XQgOiOAnt/O4eHw+Hd3ssC+Y5MpZXlSUck3v0Vzn3mW0NyygeT3VpdvtruJ2WMXvPAkF9nHbf2DCIVf5TOCqhLOtDrhYENn225Suw3XVhp9U7mzCNLIXFMZdFGNMhXQDaGgo9gxRiSVurY6BeUKGezHjcSCJKszaweI3/+FDdb7hKVHXzCppXITy5tEI41fOzJ54l3cDn9G0oGl8wrNdP5Enp5y/R+NwXq2LJra1oDYUO8E1A+Kk3c5w6z5Vq1+qgWlzjdIgkQ+7a3Aycnl43zA+cPNMHJaJ+HyaMUxCOp/NX++0Cq3EVfuPAQddyP+hewz0q479ktMOQf+f6a+D0Kkz4U47LIBA+6cN9vy07MSZyy0txqWbXVC6HmxeVrhfR9VrshwwvZniXuDewi8+jm0hhr0KosTLs+8pjbqrB7du2szOIJUEzdB5AaFROEoTUL8BWHFGnLmh42kujEKrGdaMrDdm6MgA9qRg7ioyFAvhvrLZ33zMDgNRtQ3rMmtYusQOx2XAtTtHQQI5fwuRck0ZWPeVMUFLo8AcCl06kNwtG8XxnRzkRaoiieulaOi2kVEUl/FBBgKt08Xar1j5xTlV0VtL0NLIAC8LqGtyjqvZUxafmwAHZc/16zBnylT1v4mJfCgJa+Y/Inj9OFDQL5yPa5crUoDEdjtyFQCOo6pVd189UkR/PhNp4LyZT9llIyzfcSqtMN235OxHcwc6WWek5P0/sN+Kq1PS//UrDrBtvl0XFegyPa3AO5F+67vjmJNdmogMVxI3cffIsYG123ujkiRHNcU/uT7XJhw6xMPu/e10HiMEz/8VclWg==
 [topaz-example]: https://topaz.github.io/paste/#XQAAAQAAAQAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXgSRMepMuokjoACV4UPgBzwM3p+V/N2rCi8m90FkQfsRuMJ4LrZVFgr81wKDc2okcywbJBz7OGNPpc8xu2lAkpSekqRO+I/OYMpfHj0xXOussogYYnjDvlmjQ8IAjOjgxiGlI+IRMJvX+FWS6EgMz58UYCIp9qXpSm5RXTK1jq5KXeYI20a9i/kSiEwgldHO8txFQmZAYEH9oKJyGJLTAKsUuhuXVHxv/xxEyI

M index.html → index.html

@@ -24,6 +24,7 @@ <link
             rel="stylesheet"
             type="text/css"
             href="https://cdn.jsdelivr.net/combine/
+npm/bootstrap@4.4.1/dist/css/bootstrap-grid.min.css,
 npm/slim-select@1.25.0/dist/slimselect.min.css,
 npm/codemirror@5.52.0/lib/codemirror.min.css,
 npm/codemirror@5.52.0/addon/scroll/simplescrollbars.css,
@@ -33,29 +34,50 @@ />
         <link rel="stylesheet" href="style.css" />
         <link href="favicon.ico" rel="icon" type="image/x-icon" />
     </head>
-    <body>
-        <div id="controls">
-            <div class="title">{ NoPaste }</div>
-            <span class="grow"></span>
-            <select id="language"></select>
-
-            <button onclick="generateLink('url')" type="button">Generate link</button>
-            <button onclick="generateLink('markdown')" type="button">Generate markdown</button>
-            <button onclick="generateLink('iframe')" type="button">Embed</button>
+    <body class="m-0">
+        <div id="copy" class="container-fluid hidden">
+            <div class="row my-1">
+                <div class="col my-1">
+                    <input
+                        type="text"
+                        value="copy me"
+                        id="copy-link"
+                        class="px-2"
+                        onclick="this.setSelectionRange(0, this.value.length)"
+                    />
+                </div>
+                <div class="col-auto my-1">
+                    <button
+                        class="clipboard py-1 px-2 mx-1"
+                        id="copy-btn"
+                        data-clipboard-target="#copy-link"
+                        type="button"
+                    >
+                        Copy
+                    </button>
+                    <button class="py-1 px-2 mx-1" onclick="hideCopyBar(false)" type="button">Cancel</button>
+                </div>
+            </div>
+        </div>
+        <div id="controls" class="container-fluid">
+            <div class="row align-items-center justify-content-end my-1">
+                <div class="col mb-1">
+                    <h1 class="title my-0">{ NoPaste }</h1>
+                </div>
+                <div class="col-auto my-1">
+                    <select id="language"></select>
+                </div>
+                <div class="col-auto my-1">
+                    <button class="py-1 px-2 mx-0" onclick="generateLink('url')" type="button">Generate link</button>
+                    <button class="py-1 px-2 mx-1" onclick="generateLink('markdown')" type="button">
+                        Generate markdown
+                    </button>
+                    <button class="py-1 px-2 mx-0" onclick="generateLink('iframe')" type="button">Embed</button>
+                </div>
+            </div>
         </div>
         <div id="progress"></div>
         <div id="editor"></div>
-        <div id="copy" style="display: none;">
-            <input
-                type="text"
-                value="copy me"
-                id="copy-link"
-                class="grow"
-                onclick="this.setSelectionRange(0, this.value.length)"
-            />
-            <button class="clipboard" id="copy-btn" data-clipboard-target="#copy-link" type="button">Copy</button>
-            <button onclick="hideCopyBar(false)" type="button">Cancel</button>
-        </div>
     </body>
 
     <script src="index.js"></script>

M index.js → index.js

@@ -82,7 +82,7 @@ const showCopyBar = (dataToCopy) => {
     const linkInput = document.getElementById('copy-link');
     linkInput.value = dataToCopy;
     linkInput.setSelectionRange(0, dataToCopy.length);
-    document.getElementById('copy').style.display = 'flex';
+    document.getElementById('copy').classList.remove('hidden');
 };
 
 // Close the "Copy" bar
@@ -90,12 +90,12 @@ const hideCopyBar = (success) => {
     const copyButton = document.getElementById('copy-btn');
     const copyBar = document.getElementById('copy');
     if (!success) {
-        copyBar.style.display = 'none';
+        copyBar.classList.add('hidden');
         return;
     }
     copyButton.innerText = 'Copied !';
     setTimeout(() => {
-        copyBar.style.display = 'none';
+        copyBar.classList.add('hidden');
         copyButton.innerText = 'Copy';
     }, 800);
 };

M style.css → style.css

@@ -1,98 +1,73 @@
 /* App layout */
 
-#editor,
-#controls,
-#copy,
-#progress {
-    position: absolute;
-    left: 0;
-    right: 0;
+body {
+    display: flex;
+    flex-flow: column;
+    height: 100vh;
 }
 
 #editor {
-    top: 44px;
-    bottom: 0;
-}
-.readonly #editor {
-    top: 0;
-}
-
-#controls {
-    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 10px;
-}
-#controls .title {
-    color: #fff;
-    font-family: JetBrainsMono, sans-serif;
-    font-size: 24px;
-    line-height: 30px;
-}
-
-.CodeMirror {
-    height: 100%;
-    font-size: 14px;
-    font-family: JetBrainsMono, sans-serif;
+    flex-grow: 1;
+    margin-top: -3px;
+    overflow: auto;
 }
 
 #controls,
 #copy {
-    top: 0;
-    height: 36px;
-    padding: 8px 8px 0;
     background-color: #3b3b47;
-    display: flex;
-    flex-wrap: wrap;
     z-index: 10;
-}
-#controls > *,
-#copy > * {
-    margin: 0 6px;
-}
-
-.readonly #controls {
-    display: none;
+    box-shadow: rgba(0, 0, 0, 0.15) 0 3px 10px;
 }
 
 #progress {
-    top: 0;
-    height: 3px;
+    min-height: 3px;
     background: #ff79c6;
-    z-index: 5;
+    z-index: 15;
     width: 0;
 }
 
+#copy:not(.hidden) + #controls,
+.hidden,
+.readonly #controls,
+.readonly #copy {
+    display: none;
+}
+
 #copy-link {
     font-family: JetBrainsMono, sans-serif;
+    width: 100%;
 }
 
-.grow {
-    flex-grow: 1;
+.CodeMirror {
+    height: 100%;
+    font-size: 14px;
+    font-family: JetBrainsMono, sans-serif;
+}
+
+.title {
+    color: #fff;
+    font: normal 24px JetBrainsMono, sans-serif;
+    white-space: nowrap;
 }
 
 /* Form elements */
 
 #controls .ss-main {
-    max-width: 230px;
-    width: calc(100% - 150px);
+    width: 180px;
     font-family: Roboto, sans-serif;
-    margin-right: 30px;
 }
 
 .ss-main .ss-single-selected,
 button,
 input[type='text'],
 input[type='search'] {
-    height: 28px;
     background-color: #3b3b47 !important;
     color: #fff !important;
     border-radius: 2px !important;
     border: 1px solid #ccc !important;
     font-size: 14px !important;
     font-family: Roboto, sans-serif;
-}
-input[type='text'],
-input[type='search'] {
     height: 26px !important;
-    padding: 0 5px;
 }
 
 input::-webkit-search-cancel-button {
@@ -106,7 +81,6 @@ background-color: rgba(90, 95, 128, 0.99);
 }
 button {
     cursor: pointer;
-    padding: 4px 8px;
 }
 button:hover {
     background-color: rgba(255, 255, 255, 0.1) !important;