From fd4be2e53b9244e93ef3692c6461c1711e24bf21 Mon Sep 17 00:00:00 2001 From: Joe Biellik Date: Sat, 29 Jul 2017 17:24:23 +0100 Subject: [PATCH] Update frontend dependencies --- views/highlight.pug | 34 +++++++++++++++++++++++++++++++--- views/index.pug | 45 ++++++++++++++++++++++++++------------------- views/layout.pug | 2 +- 3 files changed, 58 insertions(+), 23 deletions(-) diff --git a/views/highlight.pug b/views/highlight.pug index 641dbb3..252d950 100644 --- a/views/highlight.pug +++ b/views/highlight.pug @@ -2,6 +2,7 @@ extends layout block head link(rel='stylesheet', href='https://cdn.jsdelivr.net/prism/1.5.1/themes/prism-coy.css') + link(rel='stylesheet', href='https://cdn.jsdelivr.net/prism/1.6.0/plugins/toolbar/prism-toolbar.css') link(rel='stylesheet', href='https://cdn.jsdelivr.net/prism/1.5.1/plugins/line-numbers/prism-line-numbers.css') style. html, body { @@ -20,11 +21,38 @@ block head box-shadow: none; display: none; } + pre.code-toolbar > .toolbar { + top: 20px; + right: 20px; + opacity: .5; + } + pre.code-toolbar > .toolbar a, + pre.code-toolbar > .toolbar button, + pre.code-toolbar > .toolbar span { + padding: .5rem 1rem; + font-size: 1.25rem; + color: #fff; + background-color: #0275d8; + border-color: #0275d8; + border-radius: .3rem; + } + pre.code-toolbar > .toolbar a:hover, + pre.code-toolbar > .toolbar a:focus, + pre.code-toolbar > .toolbar button:hover, + pre.code-toolbar > .toolbar button:focus, + pre.code-toolbar > .toolbar span:hover, + pre.code-toolbar > .toolbar span:focus { + color: #fff; + background-color: #025aa5; + } block content pre.line-numbers code(class='language-' + lang) | #{paste} - script(src='https://cdn.jsdelivr.net/prism/1.5.1/prism.js') - script(src='https://cdn.jsdelivr.net/prism/1.5.1/components/prism-' + lang + '.min.js') - script(src='https://cdn.jsdelivr.net/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.js') + script(src='https://cdn.jsdelivr.net/prism/1.6.0/prism.js') + script(src='https://cdn.jsdelivr.net/prism/1.6.0/components/prism-' + lang + '.min.js') + script(src='https://cdn.jsdelivr.net/prism/1.6.0/plugins/toolbar/prism-toolbar.min.js') + script(src='https://cdn.jsdelivr.net/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.js') + script(src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js') + script(src='https://cdn.jsdelivr.net/prism/1.6.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js') diff --git a/views/index.pug b/views/index.pug index 4659b3c..e6b40ec 100644 --- a/views/index.pug +++ b/views/index.pug @@ -8,17 +8,19 @@ block head min-height: 100%; } body { - font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin-bottom: 4rem; } + body, button, input, optgroup, select, textarea { + font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + } @media (min-width: 1800px) { .container { - max-width: 1500px; + min-width: 1500px; } } @media (min-width: 2400px) { .container { - max-width: 1800px; + min-width: 1800px; } } .display-3 { @@ -36,33 +38,38 @@ block head bottom: 0; line-height: 2rem; } + block content - main.container.m-t-3.m-x-6 - h1.display-3.m-b-3 #{title} + a(href='https://github.com/JoeBiellik/paste', style='position: absolute; top: 0; right: 0; border: 0;') + img(src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png', alt='Fork me on GitHub') - a(href='https://github.com/JoeBiellik/paste') - img(style='position: absolute; top: 0; right: 0; border: 0;', src='https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png', alt='Fork me on GitHub') + main.container.pt-5.mx-6 + h1.display-3.mb-5 #{title} form(action='/?redirect', method='POST', accept-charset='UTF-8') fieldset.form-group textarea.form-control(name='paste', rows='10', required, autofocus) - select#highlight.custom-select.select-lg.m-t-2.m-r-2(name='highlight') - option(value='', selected) Choose syntax highlighting - each val, key in highlights - option(value=key) #{val} + div.row.mt-4 + div.col-md-auto.col-sm-12 + select#highlight.custom-select.mt-3(name='highlight') + option(value='', selected) Choose syntax highlighting + each val, key in highlights + option(value=key) #{val} - select#expire.custom-select.select-lg.m-t-2(name='expire') - option(value='', selected) Choose expiry - each val, key in expires - option(value=key) #{val} + div.col-md-auto.col-sm-12 + select#expire.custom-select.mt-3(name='expire') + option(value='', selected) Choose expiry + each val, key in expires + option(value=key) #{val} - button.btn.btn-primary.btn-lg.m-t-2.m-l-2.pull-md-right(type='submit') Upload + div.col.text-md-right + button.btn.btn-primary.btn-lg.mt-3(type='submit') Upload footer.hidden-sm-down - pre.text-md-center.text-muted.m-b-0. + pre.text-center.text-muted.mb-0. echo 'Hello World' | curl -F 'paste=<-' #{url} - script(src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.18/autosize.min.js' integrity='sha256-BnEqLjcr1FPis5CS7xHGpAo7ZmbYrokk0j6/Srd0Rus=', crossorigin='anonymous') - script(src='https://code.jquery.com/jquery-3.1.1.min.js', integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=', crossorigin='anonymous') + script(src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.0/autosize.min.js' integrity='sha256-F7Bbc+3hGv34D+obsHHsSm3ZKRBudWR7e2H0fS0beok=', crossorigin='anonymous') + script(src='https://code.jquery.com/jquery-3.2.1.min.js', integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=', crossorigin='anonymous') script(src='/main.js') diff --git a/views/layout.pug b/views/layout.pug index e7ead0a..d195fe9 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css', integrity='sha256-mIfhv/h3MLq3WSiSlduuZO3saRNzzuf1LK8w3z3l3JY=', crossorigin='anonymous') + link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css', integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ', crossorigin='anonymous') block head