Add book modal

docs/_includes/book-banner.html

@@ -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>

docs/_includes/book-content.html

@@ -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>

docs/_includes/book-modal.html

@@ -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>

docs/_includes/footer.html

@@ -81,4 +81,6 @@
   </div>
 </footer>
 
+{% include book-modal.html %}
+
 {% include scripts.html %}

docs/_includes/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' %}

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 %}
-
         <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 }}">
+<div class="table-container">
-  <thead>
+  <table class="table {{ table_class }}">
-    <tr>
+    <thead>
-      <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] %}
       <tr>
-        <td >
+        <th>Name</th>
-          <code style="white-space: nowrap;">{{ variable.name }}</code>
+        <th>Default value</th>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
       </tr>
-    {% endfor %}
+    </thead>
-  </tbody>
+    <tfoot>
-</table>
+      <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>

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);
+        openModal(target);
-        rootEl.classList.add('is-clipped');
-        $target.classList.add('is-active');
       });
     });
   }
@@ -81,13 +104,11 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  document.addEventListener('keydown', event => {
+  function openModal(target) {
-    const e = event || window.event;
+    const $target = document.getElementById(target);
-    if (e.keyCode === 27) {
+    rootEl.classList.add('is-clipped');
-      closeModals();
+    $target.classList.add('is-active');
-      closeDropdowns();
+  }
-    }
-  });
 
   function closeModals() {
     rootEl.classList.remove('is-clipped');

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
+.bd-book-pattern,
-  +overlay
+.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

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 {
+.bd-book-pattern,
-  bottom: 0;
+.bd-book-modal-column.bd-is-cover {
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
   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 */

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);
+        openModal(target);
-        rootEl.classList.add('is-clipped');
-        $target.classList.add('is-active');
       });
     });
   }
@@ -83,13 +106,11 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
-  document.addEventListener('keydown', function (event) {
+  function openModal(target) {
-    var e = event || window.event;
+    var $target = document.getElementById(target);
-    if (e.keyCode === 27) {
+    rootEl.classList.add('is-clipped');
-      closeModals();
+    $target.classList.add('is-active');
-      closeDropdowns();
+  }
-    }
-  });
 
   function closeModals() {
     rootEl.classList.remove('is-clipped');

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={};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(){})});

sass/elements/table.sass

@@ -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%