jessa
/
inkyboo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make layout responsive

master
Boris Kubiak 2020-04-24 12:24:08 +02:00
parent 0ecc99d62c
commit 0de342a5f2
4 changed files with 80 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -2,7 +2,7 @@
[NoPaste](https://nopaste.ml/) is a client-side paste service which works with **no database**, and **no back-end code** [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 🤯 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 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= [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 [topaz-example]: https://topaz.github.io/paste/#XQAAAQAAAQAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXgSRMepMuokjoACV4UPgBzwM3p+V/N2rCi8m90FkQfsRuMJ4LrZVFgr81wKDc2okcywbJBz7OGNPpc8xu2lAkpSekqRO+I/OYMpfHj0xXOussogYYnjDvlmjQ8IAjOjgxiGlI+IRMJvX+FWS6EgMz58UYCIp9qXpSm5RXTK1jq5KXeYI20a9i/kSiEwgldHO8txFQmZAYEH9oKJyGJLTAKsUuhuXVHxv/xxEyI

62
index.html
View File

@ -24,6 +24,7 @@ npm/codemirror@5.52.0/mode/meta.min.js
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="https://cdn.jsdelivr.net/combine/ 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/slim-select@1.25.0/dist/slimselect.min.css,
npm/codemirror@5.52.0/lib/codemirror.min.css, npm/codemirror@5.52.0/lib/codemirror.min.css,
npm/codemirror@5.52.0/addon/scroll/simplescrollbars.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 rel="stylesheet" href="style.css" />
<link href="favicon.ico" rel="icon" type="image/x-icon" /> <link href="favicon.ico" rel="icon" type="image/x-icon" />
</head> </head>
<body> <body class="m-0">
<div id="controls"> <div id="copy" class="container-fluid hidden">
<div class="title">{ NoPaste }</div> <div class="row my-1">
<span class="grow"></span> <div class="col my-1">
<select id="language"></select> <input
type="text"
<button onclick="generateLink('url')" type="button">Generate link</button> value="copy me"
<button onclick="generateLink('markdown')" type="button">Generate markdown</button> id="copy-link"
<button onclick="generateLink('iframe')" type="button">Embed</button> 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>
<div id="progress"></div> <div id="progress"></div>
<div id="editor"></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> </body>
<script src="index.js"></script> <script src="index.js"></script>

6
index.js
View File

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

92
style.css
View File

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