From b4c31c073231ef025bd02a10429221316eec2f78 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 26 Mar 2018 15:33:31 +0100 Subject: [PATCH] Add book modal --- docs/_includes/book-banner.html | 2 +- docs/_includes/book-content.html | 7 ++ docs/_includes/book-modal.html | 14 +++ docs/_includes/footer.html | 2 + docs/_includes/scripts.html | 1 + docs/_includes/variables.html | 64 +++++------- docs/_javascript/main.js | 43 ++++++-- docs/_sass/book.sass | 73 ++++++++++++- docs/css/bulma-docs.css | 160 +++++++++++++++++++++++++++-- docs/lib/main.js | 43 ++++++-- docs/vendor/js.cookie-2.1.4.min.js | 3 + sass/elements/table.sass | 7 ++ 12 files changed, 349 insertions(+), 70 deletions(-) create mode 100644 docs/_includes/book-modal.html create mode 100644 docs/vendor/js.cookie-2.1.4.min.js diff --git a/docs/_includes/book-banner.html b/docs/_includes/book-banner.html index 5e94afab..11234408 100644 --- a/docs/_includes/book-banner.html +++ b/docs/_includes/book-banner.html @@ -7,7 +7,7 @@ {% include book-cover.html %}
- {% include book-content.html %} + {% include book-content.html show_cover=false %}
diff --git a/docs/_includes/book-content.html b/docs/_includes/book-content.html index 04e4a7a8..1f171aa1 100644 --- a/docs/_includes/book-content.html +++ b/docs/_includes/book-content.html @@ -4,6 +4,13 @@

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

+ + {% if include.show_cover %} +
+ {% include book-cover.html %} +
+ {% endif %} +

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

diff --git a/docs/_includes/book-modal.html b/docs/_includes/book-modal.html new file mode 100644 index 00000000..182ab0bd --- /dev/null +++ b/docs/_includes/book-modal.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 453ebd2d..48df70f5 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -81,4 +81,6 @@ +{% include book-modal.html %} + {% include scripts.html %} diff --git a/docs/_includes/scripts.html b/docs/_includes/scripts.html index 35bd786c..6d07d48a 100644 --- a/docs/_includes/scripts.html +++ b/docs/_includes/scripts.html @@ -1,4 +1,5 @@ + {% if page.route == 'index' %} diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html index 3aae6e11..de0d3e7a 100644 --- a/docs/_includes/variables.html +++ b/docs/_includes/variables.html @@ -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 %} - {{ variables_link_text }} - {% else %} - {{ variables_link_text }} - {% endif %} - {% endcapture %} - You can use {{ variables_link | strip }} to customize this {{ type }}. Simply set one or multiple of these variables before importing Bulma. Learn how. - {% endif %} {% endcapture %} @@ -42,30 +30,32 @@

{{ content | strip }}

- - - - - - - - - - - - - - - {% for variable_hash in variables %} - {% assign variable = variable_hash[1] %} +
+
NameDefault value
NameDefault value
+ - - + + - {% endfor %} - -
- {{ variable.name }} - - {{ variable.value }} - NameDefault value
+ + + + Name + Default value + + + + {% for variable_hash in variables %} + {% assign variable = variable_hash[1] %} + + + {{ variable.name }} + + + {{ variable.value }} + + + {% endfor %} + + + diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index df05457c..6316d8cb 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -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'); diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass index b1cbedba..23b0224f 100644 --- a/docs/_sass/book.sass +++ b/docs/_sass/book.sass @@ -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 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 6c545975..4c46aacf 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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 */ \ No newline at end of file diff --git a/docs/lib/main.js b/docs/lib/main.js index 172dcd17..bdd7ec6c 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -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'); diff --git a/docs/vendor/js.cookie-2.1.4.min.js b/docs/vendor/js.cookie-2.1.4.min.js new file mode 100644 index 00000000..f5e3b190 --- /dev/null +++ b/docs/vendor/js.cookie-2.1.4.min.js @@ -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={};a1){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