Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Bootstrap's collapse for wells. #857

Merged
merged 1 commit into from
Jul 16, 2017
Merged

Use Bootstrap's collapse for wells. #857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions public/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
2 changes: 0 additions & 2 deletions public/assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Contributor

@Johann-S Johann-S Jul 14, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe you can do to change the caret only when the collapse transition ended :

setTimeout(function () {
  btnIcon.classList.toggle('caret-open');
}, 350);

350 is the transition duration of the Collapse plugin (https://github.com/twbs/bootstrap/blob/v3-dev/js/collapse.js#L35)

});
}
Expand Down
20 changes: 10 additions & 10 deletions views/_partials/csscode.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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='<link href="' + file + '" rel="stylesheet" integrity="' + sri + '" crossorigin="anonymous">')
- var formId = 'html_' + name
label(for=formId) HTML
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 = '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:
20 changes: 10 additions & 10 deletions views/_partials/jscode.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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='<script src="' + file + '" integrity="' + sri + '" crossorigin="anonymous"></script>')
- var formId = 'html_' + name
label(for=formId) HTML
input.form-control(id=formId, type='text', value='<script src="' + file + '" integrity="' + sri + '" crossorigin="anonymous"></script>')
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:
28 changes: 14 additions & 14 deletions views/alpha.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 7 additions & 7 deletions views/bootlint.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion views/bootswatch.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 7 additions & 7 deletions views/fontawesome.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
28 changes: 14 additions & 14 deletions views/index.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
28 changes: 14 additions & 14 deletions views/legacy.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down