From 0de342a5f22632f497d11c0f6d5861c354a6aba9 Mon Sep 17 00:00:00 2001 From: Boris Kubiak Date: Fri, 24 Apr 2020 12:24:08 +0200 Subject: [PATCH] Make layout responsive --- README.md | 4 +-- index.html | 62 ++++++++++++++++++++++++------------ index.js | 6 ++-- style.css | 92 ++++++++++++++++++++---------------------------------- 4 files changed, 80 insertions(+), 84 deletions(-) diff --git a/README.md b/README.md index 78a22d5..821fb2c 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [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 @@ You can include NoPaste code snippets into your own website by clicking the _Emb 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 diff --git a/index.html b/index.html index 7efa1c2..471219c 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ npm/codemirror@5.52.0/mode/meta.min.js 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 @@ npm/codemirror@5.52.0/theme/dracula.min.css - -
-
{ NoPaste }
- - - - - - + + +
+
+
+

{ NoPaste }

+
+
+ +
+
+ + + +
+
- diff --git a/index.js b/index.js index db1a780..cdb2482 100644 --- a/index.js +++ b/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); }; diff --git a/style.css b/style.css index 0ba71fc..ef53b06 100644 --- a/style.css +++ b/style.css @@ -1,30 +1,41 @@ /* 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; + flex-grow: 1; + margin-top: -3px; + overflow: auto; } -#controls { +#controls, +#copy { + background-color: #3b3b47; + z-index: 10; box-shadow: rgba(0, 0, 0, 0.15) 0 3px 10px; } -#controls .title { - color: #fff; + +#progress { + min-height: 3px; + background: #ff79c6; + z-index: 15; + width: 0; +} + +#copy:not(.hidden) + #controls, +.hidden, +.readonly #controls, +.readonly #copy { + display: none; +} + +#copy-link { font-family: JetBrainsMono, sans-serif; - font-size: 24px; - line-height: 30px; + width: 100%; } .CodeMirror { @@ -33,66 +44,30 @@ font-family: JetBrainsMono, sans-serif; } -#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; -} - -#progress { - top: 0; - height: 3px; - background: #ff79c6; - z-index: 5; - width: 0; -} - -#copy-link { - font-family: JetBrainsMono, sans-serif; -} - -.grow { - flex-grow: 1; +.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 @@ input::selection { } button { cursor: pointer; - padding: 4px 8px; } button:hover { background-color: rgba(255, 255, 255, 0.1) !important;