Skip to content

add button to toggle the optional theme when viewing the docs #13463

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

Merged
merged 5 commits into from
May 23, 2014
Merged

add button to toggle the optional theme when viewing the docs #13463

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7d0f7e8
add button to toggle the optional theme when viewing the docs; fixes …
cvrebert Apr 29, 2014
bdd822a
regenerate minified docs JS & CSS
cvrebert Apr 29, 2014
707b362
Merge branch 'master' into docs-theme-toggler
mdo May 21, 2014
12b5d46
move it to the sidebar
mdo May 23, 2014
326f6b2
Merge branch 'master' into docs-theme-toggler
mdo May 23, 2014
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
4 changes: 4 additions & 0 deletions docs/_includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@

<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
Copy link
Member

Choose a reason for hiding this comment

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

BTW @cvrebert is this right? I mean is the href="data:text/css;charset=utf-8," part needed?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes, the <link> has to have an href for our HTML to validate.

Copy link
Member

Choose a reason for hiding this comment

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

I thought so too. But why do we need data-href too? I mean, we should be able to change href just fine, shouldn't we?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Right, but we need to put the actual URL to the theme CSS somewhere in our code (so that we can then put it into or take it out of the href). This way (data-href) seemed cleaner than hardcoding the URL into the JavaScript.

{% endif %}

<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">
Expand Down
5 changes: 5 additions & 0 deletions docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ <h1>{{ page.title }}</h1>
</div>
</div>
</div>
{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
<div>
<button id="bs-theme-btn" type="button" class="btn btn-default">Activate Theme</button>
</div>
{% endif %}

</div>

Expand Down
6 changes: 6 additions & 0 deletions docs/assets/css/_src/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1452,3 +1452,9 @@ h1[id] {
-webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}

#bs-theme-btn {
position: fixed;
bottom: 0;
left: 0;
}
2 changes: 1 addition & 1 deletion docs/assets/css/docs.min.css
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 17 additions & 0 deletions docs/assets/js/_src/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,23 @@
$('.bs-top').affix()
}, 100)

// theme toggler
;(function () {
var stylesheetLink = $('#bs-theme-stylesheet')
var themeBtn = $('#bs-theme-btn')
themeBtn.click(function () {
var href = stylesheetLink.attr('href');
if (!href || href.indexOf('data') === 0) {
stylesheetLink.attr('href', stylesheetLink.attr('data-href'))
themeBtn.text('Deactivate Theme')
}
else {
stylesheetLink.attr('href', '')
themeBtn.text('Activate Theme')
}
})
})();

// tooltip demo
$('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]',
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/js/docs.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.