Update libraries and refactor UI

pull/20/head
Joe Biellik 5 years ago
parent 419a20c25e
commit ed7bbe6205

@ -2,8 +2,12 @@
/* global $ autosize */
$(function() {
$.fn.selectpicker.Constructor.BootstrapVersion = '4';
autosize($('textarea'));
$('select#highlight').selectpicker();
$('textarea').on('keydown', function(e) {
if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey && $(this).val()) {
$(this).closest('form').submit();

@ -1,9 +1,11 @@
extends layout
block head
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/themes/prism-coy.css')
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/toolbar/prism-toolbar.css')
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.css')
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:400,300')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css', integrity='sha256-VcuSs+n31yebPlEcehu6PvnidJ808ScFBsK8+tJKX+Q=', crossorigin='anonymous')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.css', integrity='sha256-P45OhhEWm49G8sadt2n5rDaWLa3xZbDOQhJliuaojH0=', crossorigin='anonymous')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.css', integrity='sha256-Afz2ZJtXw+OuaPX10lZHY7fN1+FuTE/KdCs+j7WZTGc=', crossorigin='anonymous')
style.
html, body, .code-toolbar, pre, code {
height: 100%;
@ -14,37 +16,51 @@ block head
pre[class*="language-"]::before, pre[class*="language-"]::after {
display: none;
}
.code-toolbar > .toolbar {
top: 1rem;
right: 1rem;
opacity: 1;
}
pre[class*="language-"] > code {
border-left: none;
}
.code-toolbar > .toolbar a, .code-toolbar > .toolbar button, .code-toolbar > .toolbar span {
padding: 0.25rem 1rem 0.5rem;
font-size: 1.2rem;
.line-numbers-rows {
-webkit-user-select: none;
user-select: none;
}
div.code-toolbar > .toolbar {
top: 1rem;
right: 2.5rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: none;
opacity: 1;
}
div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
border-radius: .3rem;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
background-color: #007bff;
border-color: #007bff;
display: inline-block;
font-weight: 400;
transition: color 0.15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
border: 1px solid transparent;
}
.code-toolbar > .toolbar a:hover, .code-toolbar > .toolbar a:focus, .code-toolbar > .toolbar button:hover, .code-toolbar > .toolbar button:focus, .code-toolbar > .toolbar span:hover, .code-toolbar > .toolbar span:focus {
div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar span:focus, div.code-toolbar > .toolbar span:hover {
color: #fff;
background-color: #025aa5;
opacity: 1;
background-color: #0069d9;
border-color: #0062cc;
}
block content
pre.line-numbers
code(class='language-' + lang)
| #{paste}
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/prism.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/components/prism-' + lang + '.min.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/toolbar/prism-toolbar.min.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js', integrity='sha256-3teItwIfMuVB74Alnxw/y5HAZ2irOsCULFff3EgbtEs=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-' + lang + '.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.js', integrity='sha256-7I/IdbPM17QdjqRNwpVYj4iDGAQw7ZFHy9RSSU1yvLE=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.js', integrity='sha256-hep5s8952MqR7Y79JYfCXZD6vQjVHs7sOu/ZGrs1OEQ=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js', integrity='sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js', integrity='sha256-5F8rynXScCOEtnwlm5P293TlCvTT1beoEJcmWHCg4BU=', crossorigin='anonymous')

@ -2,6 +2,7 @@ extends layout
block head
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:400,300')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css', integrity='sha256-VMPhaMmJn7coDSbzwqB0jflvb+CDnoAlfStC5RogOQo=', crossorigin='anonymous')
style.
html {
position: relative;
@ -31,6 +32,9 @@ block head
line-height: 1.5em;
box-shadow: none;
}
.border-gray {
border: 1px solid #ced4da;
}
footer {
width: 100%;
height: 2.5rem;
@ -52,7 +56,7 @@ block content
div.row.mt-4
div.col-md-auto.col-sm-12
select#highlight.custom-select.mt-3(name='highlight')
select#highlight.mt-3(name='highlight', data-live-search='true', data-width='auto', data-style='text-dark border-gray', data-styleBase='custom-select')
option(value='', selected) Choose syntax highlighting
each val, key in highlights
option(value=key) #{val}
@ -71,5 +75,7 @@ block content
echo 'Hello World' | curl -F 'paste=<-' #{url}
script(src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js' integrity='sha256-dW8u4dvEKDThJpWRwLgGugbARnA3O2wqBcVerlg9LMc=', crossorigin='anonymous')
script(src='https://code.jquery.com/jquery-3.3.1.min.js', integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=', crossorigin='anonymous')
script(src='https://code.jquery.com/jquery-3.5.1.min.js', integrity='sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js', integrity='sha256-Xt8pc4G0CdcRvI0nZ2lRpZ4VHng0EoUDMlGcBSQ9HiQ=', crossorigin='anonymous')
script(src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js', integrity='sha256-QOE02Glo1C1gHzP96JOaxyIMt4XSFv/exZaYLY4dwO0=', crossorigin='anonymous')
script(src='/main.js')

@ -4,7 +4,7 @@ html(lang='en')
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
title #{title}
link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO', crossorigin='anonymous')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css', integrity='sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=', crossorigin='anonymous')
block head

Loading…
Cancel
Save