mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add book modal
This commit is contained in:
Jeremy Thomas
parent
7c9f0a76dc
commit
b4c31c0732
@ -7,7 +7,7 @@
|
||||
{% include book-cover.html %}
|
||||
</div>
|
||||
<div class="bd-book-column bd-is-content">
|
||||
{% include book-content.html %}
|
||||
{% include book-content.html show_cover=false %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,6 +4,13 @@
|
||||
<h3 class="title">The official Bulma book! 😲</h3>
|
||||
<p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
|
||||
</header>
|
||||
|
||||
{% if include.show_cover %}
|
||||
<div class="bd-book-inline-cover">
|
||||
{% include book-cover.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="block bd-book-description is-size-5">
|
||||
<p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
|
||||
</div>
|
||||
|
||||
14
docs/_includes/book-modal.html
Normal file
14
docs/_includes/book-modal.html
Normal file
@ -0,0 +1,14 @@
|
||||
<div id="bookModal" class="bd-book-modal modal">
|
||||
<div class="bd-book-modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="bd-book-modal-columns">
|
||||
<div class="bd-book-modal-column bd-is-cover">
|
||||
{% include book-cover.html %}
|
||||
</div>
|
||||
<div class="bd-book-modal-column bd-is-content">
|
||||
{% include book-content.html show_cover=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
@ -81,4 +81,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% include book-modal.html %}
|
||||
|
||||
{% include scripts.html %}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
|
||||
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
|
||||
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
||||
|
||||
{% if page.route == 'index' %}
|
||||
|
||||
@ -9,29 +9,17 @@
|
||||
{% assign table_class = include.table_class | default: 'is-bordered' %}
|
||||
|
||||
{% if include.custom_message %}
|
||||
|
||||
{{ include.custom_message }}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% assign variables_link_text = "these variables" %}
|
||||
|
||||
{% capture variables_link %}
|
||||
|
||||
{% if data.file_url %}
|
||||
|
||||
<a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
|
||||
|
||||
{% else %}
|
||||
|
||||
{{ variables_link_text }}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endcapture %}
|
||||
|
||||
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endcapture %}
|
||||
@ -42,30 +30,32 @@
|
||||
<p>{{ content | strip }}</p>
|
||||
</div>
|
||||
|
||||
<table class="table {{ table_class }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for variable_hash in variables %}
|
||||
{% assign variable = variable_hash[1] %}
|
||||
<div class="table-container">
|
||||
<table class="table {{ table_class }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<td >
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for variable_hash in variables %}
|
||||
{% assign variable = variable_hash[1] %}
|
||||
<tr>
|
||||
<td >
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,31 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Dropdowns
|
||||
// Cookies
|
||||
|
||||
const bdCookies = Cookies.getJSON('bulma') || {};
|
||||
|
||||
// Book modal
|
||||
|
||||
const $bookModal = document.getElementById('bookModal');
|
||||
const $bookModalCloseButtons = getAll('.bd-book-modal-close');
|
||||
|
||||
if (!bdCookies['closed_book_modal']) {
|
||||
setTimeout(() => {
|
||||
openModal('bookModal');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
if ($bookModalCloseButtons.length > 0) {
|
||||
$bookModalCloseButtons.forEach($el => {
|
||||
$el.addEventListener('click', event => {
|
||||
event.stopPropagation();
|
||||
bdCookies['closed_book_modal'] = true;
|
||||
Cookies.set('bulma', bdCookies);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Meta links
|
||||
|
||||
const $metalinks = getAll('#meta a');
|
||||
|
||||
@ -66,9 +91,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
$modalButtons.forEach($el => {
|
||||
$el.addEventListener('click', () => {
|
||||
const target = $el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
rootEl.classList.add('is-clipped');
|
||||
$target.classList.add('is-active');
|
||||
openModal(target);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -81,13 +104,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', event => {
|
||||
const e = event || window.event;
|
||||
if (e.keyCode === 27) {
|
||||
closeModals();
|
||||
closeDropdowns();
|
||||
}
|
||||
});
|
||||
function openModal(target) {
|
||||
const $target = document.getElementById(target);
|
||||
rootEl.classList.add('is-clipped');
|
||||
$target.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModals() {
|
||||
rootEl.classList.remove('is-clipped');
|
||||
|
||||
@ -1,24 +1,45 @@
|
||||
$book-beige: #FFEDD7
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
to
|
||||
opacity: 1
|
||||
|
||||
@keyframes zoomIn
|
||||
from
|
||||
transform: scale(0.8)
|
||||
to
|
||||
transform: scale(1)
|
||||
|
||||
.bd-book-banner
|
||||
background-color: $white
|
||||
position: relative
|
||||
|
||||
.bd-book-pattern
|
||||
+overlay
|
||||
.bd-book-pattern,
|
||||
.bd-book-modal-column.bd-is-cover
|
||||
background-image: url("/images/hab/lightpaperfibers_@2X.png")
|
||||
background-repeat: repeat
|
||||
background-size: 250px 150px
|
||||
&::after
|
||||
&::before
|
||||
+overlay
|
||||
background-color: rgba($book-beige, 0.1)
|
||||
content: ""
|
||||
display: block
|
||||
|
||||
.bd-book-pattern
|
||||
+overlay
|
||||
|
||||
.bd-book-header
|
||||
position: relative
|
||||
|
||||
.bd-book-cover
|
||||
padding-top: 0.75rem
|
||||
position: relative
|
||||
text-align: center
|
||||
a
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
img
|
||||
display: block
|
||||
|
||||
@ -45,9 +66,38 @@ $book-beige: #FFEDD7
|
||||
margin-right: auto
|
||||
max-width: 1080px
|
||||
|
||||
.bd-book-modal-background
|
||||
+overlay
|
||||
background-color: rgba($black, 0.86)
|
||||
|
||||
.bd-book-modal
|
||||
.bd-book-modal-background,
|
||||
.modal-content
|
||||
animation-duration: 250ms
|
||||
animation-easing-function: ease-out
|
||||
animation-fill-mode: both
|
||||
.bd-book-modal-background
|
||||
animation-name: fadeIn
|
||||
.modal-content
|
||||
animation-name: zoomIn
|
||||
transform-origin: center
|
||||
.bd-book-modal-cover
|
||||
padding: 2rem
|
||||
position: relative
|
||||
|
||||
.bd-book-modal-columns
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
+mobile
|
||||
.bd-book-columns
|
||||
flex-direction: column
|
||||
.bd-book-modal
|
||||
.bd-book-content
|
||||
padding: 2rem
|
||||
.bd-book-modal-column.bd-is-cover
|
||||
display: none
|
||||
|
||||
+tablet
|
||||
.bd-book-columns
|
||||
@ -57,3 +107,20 @@ $book-beige: #FFEDD7
|
||||
position: absolute
|
||||
right: calc(100% + 1.25rem)
|
||||
top: 0.5rem
|
||||
// Modal
|
||||
.bd-book-modal
|
||||
.modal-content
|
||||
width: 960px
|
||||
.bd-book-inline-cover
|
||||
display: none
|
||||
.bd-book-modal-column
|
||||
background-color: $white
|
||||
position: relative
|
||||
&.bd-is-cover
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 2rem
|
||||
&.bd-is-content
|
||||
.bd-book-content
|
||||
box-shadow: none
|
||||
|
||||
@ -4922,6 +4922,17 @@ a.box:active {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.table-container:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tags {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
@ -13474,23 +13485,60 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomIn {
|
||||
from {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-book-banner {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-book-pattern {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
.bd-book-pattern,
|
||||
.bd-book-modal-column.bd-is-cover {
|
||||
background-image: url("/images/hab/lightpaperfibers_@2X.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 250px 150px;
|
||||
}
|
||||
|
||||
.bd-book-pattern::after {
|
||||
.bd-book-pattern::before,
|
||||
.bd-book-modal-column.bd-is-cover::before {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -13501,10 +13549,29 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bd-book-pattern {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bd-book-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-book-cover {
|
||||
padding-top: 0.75rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-book-cover a {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.bd-book-cover img {
|
||||
display: block;
|
||||
}
|
||||
@ -13544,6 +13611,53 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.bd-book-modal-background {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: rgba(10, 10, 10, 0.86);
|
||||
}
|
||||
|
||||
.bd-book-modal .bd-book-modal-background,
|
||||
.bd-book-modal .modal-content {
|
||||
-webkit-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
animation-easing-function: ease-out;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.bd-book-modal .bd-book-modal-background {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
.bd-book-modal .modal-content {
|
||||
-webkit-animation-name: zoomIn;
|
||||
animation-name: zoomIn;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.bd-book-modal-cover {
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-book-modal-columns {
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.bd-book-columns {
|
||||
-webkit-box-orient: vertical;
|
||||
@ -13551,6 +13665,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bd-book-modal .bd-book-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
.bd-book-modal-column.bd-is-cover {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
@ -13563,6 +13683,32 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
right: calc(100% + 1.25rem);
|
||||
top: 0.5rem;
|
||||
}
|
||||
.bd-book-modal .modal-content {
|
||||
width: 960px;
|
||||
}
|
||||
.bd-book-inline-cover {
|
||||
display: none;
|
||||
}
|
||||
.bd-book-modal-column {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
}
|
||||
.bd-book-modal-column.bd-is-cover {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
.bd-book-modal-column.bd-is-content .bd-book-content {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bulma-docs.css.map */
|
||||
@ -2,7 +2,32 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Dropdowns
|
||||
// Cookies
|
||||
|
||||
var bdCookies = Cookies.getJSON('bulma') || {};
|
||||
|
||||
// Book modal
|
||||
|
||||
var $bookModal = document.getElementById('bookModal');
|
||||
var $bookModalCloseButtons = getAll('.bd-book-modal-close');
|
||||
|
||||
if (!bdCookies['closed_book_modal']) {
|
||||
setTimeout(function () {
|
||||
openModal('bookModal');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
if ($bookModalCloseButtons.length > 0) {
|
||||
$bookModalCloseButtons.forEach(function ($el) {
|
||||
$el.addEventListener('click', function (event) {
|
||||
event.stopPropagation();
|
||||
bdCookies['closed_book_modal'] = true;
|
||||
Cookies.set('bulma', bdCookies);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Meta links
|
||||
|
||||
var $metalinks = getAll('#meta a');
|
||||
|
||||
@ -68,9 +93,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
$modalButtons.forEach(function ($el) {
|
||||
$el.addEventListener('click', function () {
|
||||
var target = $el.dataset.target;
|
||||
var $target = document.getElementById(target);
|
||||
rootEl.classList.add('is-clipped');
|
||||
$target.classList.add('is-active');
|
||||
openModal(target);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -83,13 +106,11 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
var e = event || window.event;
|
||||
if (e.keyCode === 27) {
|
||||
closeModals();
|
||||
closeDropdowns();
|
||||
}
|
||||
});
|
||||
function openModal(target) {
|
||||
var $target = document.getElementById(target);
|
||||
rootEl.classList.add('is-clipped');
|
||||
$target.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeModals() {
|
||||
rootEl.classList.remove('is-clipped');
|
||||
|
||||
3
docs/vendor/js.cookie-2.1.4.min.js
vendored
Normal file
3
docs/vendor/js.cookie-2.1.4.min.js
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
/*! js-cookie v2.1.4 | MIT */
|
||||
|
||||
!function(a){var b=!1;if("function"==typeof define&&define.amd&&(define(a),b=!0),"object"==typeof exports&&(module.exports=a(),b=!0),!b){var c=window.Cookies,d=window.Cookies=a();d.noConflict=function(){return window.Cookies=c,d}}}(function(){function a(){for(var a=0,b={};a<arguments.length;a++){var c=arguments[a];for(var d in c)b[d]=c[d]}return b}function b(c){function d(b,e,f){var g;if("undefined"!=typeof document){if(arguments.length>1){if(f=a({path:"/"},d.defaults,f),"number"==typeof f.expires){var h=new Date;h.setMilliseconds(h.getMilliseconds()+864e5*f.expires),f.expires=h}f.expires=f.expires?f.expires.toUTCString():"";try{g=JSON.stringify(e),/^[\{\[]/.test(g)&&(e=g)}catch(p){}e=c.write?c.write(e,b):encodeURIComponent(e+"").replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),b=encodeURIComponent(b+""),b=b.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent),b=b.replace(/[\(\)]/g,escape);var i="";for(var j in f)f[j]&&(i+="; "+j,!0!==f[j]&&(i+="="+f[j]));return document.cookie=b+"="+e+i}b||(g={});for(var k=document.cookie?document.cookie.split("; "):[],l=0;l<k.length;l++){var m=k[l].split("="),n=m.slice(1).join("=");'"'===n.charAt(0)&&(n=n.slice(1,-1));try{var o=m[0].replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent);if(n=c.read?c.read(n,o):c(n,o)||n.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent),this.json)try{n=JSON.parse(n)}catch(p){}if(b===o){g=n;break}b||(g[o]=n)}catch(p){}}return g}}return d.set=d,d.get=function(a){return d.call(d,a)},d.getJSON=function(){return d.apply({json:!0},[].slice.call(arguments))},d.defaults={},d.remove=function(b,c){d(b,"",a(c,{expires:-1}))},d.withConverter=b,d}return b(function(){})});
|
||||
@ -108,3 +108,10 @@ $table-striped-row-even-hover-background-color: $white-ter !default
|
||||
tr:not(.is-selected)
|
||||
&:nth-child(even)
|
||||
background-color: $table-striped-row-even-background-color
|
||||
|
||||
.table-container
|
||||
+block
|
||||
+overflow-touch
|
||||
overflow: auto
|
||||
overflow-y: hidden
|
||||
max-width: 100%
|
||||
Loading…
Reference in New Issue
Block a user