Make layout responsive
Boris Kubiak
parent
0ecc99d62c
commit
0de342a5f2
|
|
@ -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
|
||||
|
|
|
|||
54
index.html
54
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
|
|||
<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>
|
||||
</div>
|
||||
<div id="progress"></div>
|
||||
<div id="editor"></div>
|
||||
<div id="copy" style="display: none;">
|
||||
<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="grow"
|
||||
class="px-2"
|
||||
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>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
<script src="index.js"></script>
|
||||
|
|
|
|||
6
index.js
6
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);
|
||||
};
|
||||
|
|
|
|||
92
style.css
92
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue