From 342d90928cc6b68e70cac2855299ae69b41fcd48 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 14 Jul 2017 22:58:19 +0300 Subject: [PATCH] Use Bootstrap's collapse for wells. --- public/assets/css/style.css | 6 ++++-- public/assets/js/main.js | 2 -- views/_partials/csscode.pug | 20 ++++++++++---------- views/_partials/jscode.pug | 20 ++++++++++---------- views/alpha.pug | 28 ++++++++++++++-------------- views/bootlint.pug | 14 +++++++------- views/bootswatch.pug | 2 +- views/fontawesome.pug | 14 +++++++------- views/index.pug | 28 ++++++++++++++-------------- views/legacy.pug | 28 ++++++++++++++-------------- 10 files changed, 81 insertions(+), 81 deletions(-) diff --git a/public/assets/css/style.css b/public/assets/css/style.css index bbae4465e..cd78345a2 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -55,10 +55,12 @@ iframe { height: 20px; } +.caret { + transition: transform 0.35s ease; +} + .caret-open { -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); transform: rotate(180deg); } diff --git a/public/assets/js/main.js b/public/assets/js/main.js index adb5907ec..02c6dc0c2 100644 --- a/public/assets/js/main.js +++ b/public/assets/js/main.js @@ -8,11 +8,9 @@ var el = document.querySelectorAll(selector); function toggleCode(index) { - var name = el[index].getAttribute('data-el'); var btnIcon = el[index].querySelector('span'); el[index].addEventListener('click', function() { - document.getElementById(name).classList.toggle('hidden'); btnIcon.classList.toggle('caret-open'); }); } diff --git a/views/_partials/csscode.pug b/views/_partials/csscode.pug index 1059bbbc5..53ac32df0 100644 --- a/views/_partials/csscode.pug +++ b/views/_partials/csscode.pug @@ -1,20 +1,20 @@ -.well.hidden(id=name) +.well.collapse(id=name) .form-group - - var id = 'html_' + name - label(for=id) HTML - input.form-control(id=id, type='text', value='') + - var formId = 'html_' + name + label(for=formId) HTML + input.form-control(id=formId, type='text', value='') span.help-block Click to copy .form-group - - var id = 'jade_' + name - label(for=id) + - var formId = 'jade_' + name + label(for=formId) a(href='https://pugjs.org/', target='_blank', rel='noopener') Pug - input.form-control(id=id, type='text', value='link(href="' + file + '", rel="stylesheet", integrity="' + sri + '", crossorigin="anonymous")') + input.form-control(id=formId, type='text', value='link(href="' + file + '", rel="stylesheet", integrity="' + sri + '", crossorigin="anonymous")') span.help-block Click to copy .form-group - - var id = 'haml_' + name - label(for=id) + - var formId = 'haml_' + name + label(for=formId) a(href='http://haml.info/', target='_blank', rel='noopener') Haml - input.form-control(id=id, type='text', value='%link{href: "' + file + '", rel: "stylesheet", integrity: "' + sri + '", crossorigin: "anonymous"}') + input.form-control(id=formId, type='text', value='%link{href: "' + file + '", rel: "stylesheet", integrity: "' + sri + '", crossorigin: "anonymous"}') span.help-block Click to copy //- vim: ft=pug sw=4 sts=4 et: diff --git a/views/_partials/jscode.pug b/views/_partials/jscode.pug index 74cb2d5a3..6f9bdea5d 100644 --- a/views/_partials/jscode.pug +++ b/views/_partials/jscode.pug @@ -1,20 +1,20 @@ -.well.hidden(id=name) +.well.collapse(id=name) .form-group - - var id = 'html_' + name - label(for=id) HTML - input.form-control(id=id, type='text', value='') + - var formId = 'html_' + name + label(for=formId) HTML + input.form-control(id=formId, type='text', value='') span.help-block Click to copy .form-group - - var id = 'jade_' + name - label(for=id) + - var formId = 'jade_' + name + label(for=formId) a(href='https://pugjs.org/', target='_blank', rel='noopener') Pug - input.form-control(id=id, type='text', value='script(src="' + file + '", integrity="' + sri + '", crossorigin="anonymous")') + input.form-control(id=formId, type='text', value='script(src="' + file + '", integrity="' + sri + '", crossorigin="anonymous")') span.help-block Click to copy .form-group - - var id = 'haml_' + name - label(for=id) + - var formId = 'haml_' + name + label(for=formId) a(href='http://haml.info/', target='_blank', rel='noopener') Haml - input.form-control(id=id, type='text', value='%script{src: "' + file + '", integrity: "' + sri + '", crossorigin: "anonymous"}') + input.form-control(id=formId, type='text', value='%script{src: "' + file + '", integrity: "' + sri + '", crossorigin: "anonymous"}') span.help-block Click to copy //- vim: ft=pug sw=4 sts=4 et: diff --git a/views/alpha.pug b/views/alpha.pug index 9f8eafaca..34e6ff9ef 100644 --- a/views/alpha.pug +++ b/views/alpha.pug @@ -18,33 +18,33 @@ block content hr .well - - var name = 'alphaCSS'.toLowerCase() - - var file = config.bootstrap4[0].stylesheet - - var sri = config.bootstrap4[0].stylesheetSri - - var id = name + '_form' + - var name = 'alphaCSS'.toLowerCase() + - var file = config.bootstrap4[0].stylesheet + - var sri = config.bootstrap4[0].stylesheetSri + - var formId = name + '_form' .form-group - label(for=id) Complete CSS + label(for=formId) Complete CSS .input-group.input-group-lg - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default.btn-lg(type='button', data-el=name) + button.btn.btn-default.btn-lg(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy include _partials/csscode.pug - - var name = 'alphaJS'.toLowerCase() - - var file = config.bootstrap4[0].javascript - - var sri = config.bootstrap4[0].javascriptSri - - var id = name + '_form' + - var name = 'alphaJS'.toLowerCase() + - var file = config.bootstrap4[0].javascript + - var sri = config.bootstrap4[0].javascriptSri + - var formId = name + '_form' .form-group - label(for=id) Complete JavaScript + label(for=formId) Complete JavaScript .input-group.input-group-lg - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default.btn-lg(type='button', data-el=name) + button.btn.btn-default.btn-lg(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy diff --git a/views/bootlint.pug b/views/bootlint.pug index 3c32ebea7..726b31051 100644 --- a/views/bootlint.pug +++ b/views/bootlint.pug @@ -3,17 +3,17 @@ extends layout block content h2 Bootlint .well - - var name = 'bootlintJS'.toLowerCase() - - var file = config.bootlint[0].javascript - - var sri = config.bootlint[0].javascriptSri - - var id = name + '_form' + - var name = 'bootlintJS'.toLowerCase() + - var file = config.bootlint[0].javascript + - var sri = config.bootlint[0].javascriptSri + - var formId = name + '_form' .form-group - label(for=id) Complete JavaScript + label(for=formId) Complete JavaScript .input-group.input-group-lg - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default.btn-lg(type='button', data-el=name) + button.btn.btn-default.btn-lg(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy diff --git a/views/bootswatch.pug b/views/bootswatch.pug index da9b1ab1f..e24b8e464 100644 --- a/views/bootswatch.pug +++ b/views/bootswatch.pug @@ -22,7 +22,7 @@ block content .input-group input.form-control(type='text', value=file) .input-group-btn - button.btn.btn-default(type='button', data-el=name) + button.btn.btn-default(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy diff --git a/views/fontawesome.pug b/views/fontawesome.pug index dabb42610..ce2e2c364 100644 --- a/views/fontawesome.pug +++ b/views/fontawesome.pug @@ -3,17 +3,17 @@ extends layout block content h2 Font Awesome .well - - var name = 'fontawesomeCSS1'.toLowerCase() - - var file = config.fontawesome[0].stylesheet - - var sri = config.fontawesome[0].stylesheetSri - - var id = name + '_form' + - var name = 'fontawesomeCSS'.toLowerCase() + - var file = config.fontawesome[0].stylesheet + - var sri = config.fontawesome[0].stylesheetSri + - var formId = name + '_form' .form-group - label(for=id) Font Awesome CSS + label(for=formId) Font Awesome CSS .input-group.input-group-lg - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default.btn-lg(type='button', data-el=name) + button.btn.btn-default.btn-lg(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy diff --git a/views/index.pug b/views/index.pug index 0b25bf474..c0f274887 100644 --- a/views/index.pug +++ b/views/index.pug @@ -3,33 +3,33 @@ extends layout block content h2=title .well - - var name = 'quickstartCSS'.toLowerCase() - - var file = config.bootstrap[0].stylesheet - - var sri = config.bootstrap[0].stylesheetSri - - var id = name + '_form' + - var name = 'quickstartCSS'.toLowerCase() + - var file = config.bootstrap[0].stylesheet + - var sri = config.bootstrap[0].stylesheetSri + - var formId = name + '_form' .form-group - label(for=id) Complete CSS + label(for=formId) Complete CSS .input-group.input-group-lg - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default.btn-lg(type='button', data-el=name) + button.btn.btn-default.btn-lg(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy include _partials/csscode.pug - - var name = 'quickstartJS'.toLowerCase() - - var file = config.bootstrap[0].javascript - - var sri = config.bootstrap[0].javascriptSri - - var id = name + '_form' + - var name = 'quickstartJS'.toLowerCase() + - var file = config.bootstrap[0].javascript + - var sri = config.bootstrap[0].javascriptSri + - var formId = name + '_form' .form-group - label(for=id) Complete JavaScript + label(for=formId) Complete JavaScript .input-group.input-group-lg - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default.btn-lg(type='button', data-el=name) + button.btn.btn-default.btn-lg(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy diff --git a/views/legacy.pug b/views/legacy.pug index f564f434c..7f5f2a4fb 100644 --- a/views/legacy.pug +++ b/views/legacy.pug @@ -7,34 +7,34 @@ block content .well h2=item.version - if (item.stylesheet) - - var file = item.stylesheet - - var sri = item.stylesheetSri - - var name = 'css_complete_' + item.version.replace(/\./g, '_') - - var id = name + '_form' + - var file = item.stylesheet + - var sri = item.stylesheetSri + - var name = 'css_complete_' + item.version.replace(/\./g, '_') + - var formId = name + '_form' .form-group - label(for=id) Complete CSS + label(for=formId) Complete CSS .input-group - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default(type='button', data-el=name) + button.btn.btn-default(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy include _partials/csscode.pug - if (item.javascript) - - var file = item.javascript - - var sri = item.javascriptSri - - var name = 'javascript_' + item.version.replace(/\./g, '_') - - var id = name + '_form' + - var file = item.javascript + - var sri = item.javascriptSri + - var name = 'javascript_' + item.version.replace(/\./g, '_') + - var formId = name + '_form' .form-group - label(for=id) Complete JavaScript + label(for=formId) Complete JavaScript .input-group - input.form-control(id=id, type='text', value=file) + input.form-control(id=formId, type='text', value=file) .input-group-btn - button.btn.btn-default(type='button', data-el=name) + button.btn.btn-default(type='button', data-toggle='collapse', data-target='#' + name, aria-expanded='false', aria-controls=name) span.caret span.help-block Click to copy