From: Jeremy Thomas Date: Sun, 2 Jul 2017 15:52:20 +0000 (+0100) Subject: Add navbar component, Fix JS highlight X-Git-Tag: 0.4.3~3^2~7 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=43b034e0af327d13480039299cd1d73a2404b4e7;p=thirdparty%2Fbulma.git Add navbar component, Fix JS highlight --- diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html index ee3eac531..fb0902159 100644 --- a/docs/_includes/blog-hero.html +++ b/docs/_includes/blog-hero.html @@ -1,4 +1,6 @@ -{% include navbar.html %} +
+ {% include navbar.html %} +
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 232c51e48..d6a17e4c4 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,99 +1,97 @@ -
-
+ diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 81b8c0f19..c544160c8 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -15,15 +15,14 @@ document.addEventListener('DOMContentLoaded', () => { // Modals const $html = document.documentElement; - const $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0); - const $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0); - const $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0); + const $modals = getAll('.modal'); + const $modalButtons = getAll('.modal-button'); + const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'); if ($modalButtons.length > 0) { $modalButtons.forEach($el => { $el.addEventListener('click', () => { const target = $el.dataset.target; - console.log('target', target); const $target = document.getElementById(target); $html.classList.add('is-clipped'); $target.classList.add('is-active'); @@ -53,4 +52,60 @@ document.addEventListener('DOMContentLoaded', () => { }); } + // Clipboard + + const $highlights = getAll('.highlight'); + let itemsProcessed = 0; + + if ($highlights.length > 0) { + $highlights.forEach($el => { + const copy = ''; + const expand = ''; + $el.insertAdjacentHTML('beforeend', copy); + + if ($el.firstElementChild.scrollHeight > 600) { + $el.insertAdjacentHTML('beforeend', expand); + } + + itemsProcessed++; + if (itemsProcessed === $highlights.length) { + addHighlightControls(); + } + }); + } + + function addHighlightControls() { + const $highlightButtons = getAll('.highlight .copy, .highlight .expand'); + + $highlightButtons.forEach($el => { + $el.addEventListener('mouseenter', () => { + $el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63'; + }); + + $el.addEventListener('mouseleave', () => { + $el.parentNode.style.boxShadow = 'none'; + }); + }); + + const $highlightExpands = getAll('.highlight .expand'); + + $highlightExpands.forEach($el => { + $el.addEventListener('click', () => { + $el.parentNode.firstElementChild.style.maxHeight = 'none'; + }); + }); + } + + new Clipboard('.copy', { + target: function(trigger) { + return trigger.previousSibling; + } + }); + + // Functions + + function getAll(selector) { + return Array.prototype.slice.call(document.querySelectorAll(selector), 0); + } + }); diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 4e4432b34..4d43ab80b 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -3,7 +3,9 @@ layout: default route: documentation --- -{% include navbar.html %} +
+ {% include navbar.html %} +
diff --git a/docs/_posts/2017-07-02-new-navbar-component.md b/docs/_posts/2017-07-02-new-navbar-component.md new file mode 100644 index 000000000..fea4e2a07 --- /dev/null +++ b/docs/_posts/2017-07-02-new-navbar-component.md @@ -0,0 +1,6 @@ +--- +layout: post +title: "RIP nav; long live the navbar!" +published: true +introduction: "

The .control element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its block characteristics with its inline variations.

" +--- diff --git a/docs/blog.html b/docs/blog.html index 0227c8f44..af64c356b 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -20,8 +20,8 @@ route: blog
-
- {{ post.content }} +
+ {{ post.introduction }}
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 3cbea739b..798829ee6 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -13,6 +13,10 @@ @import "./_sass/bsa" @import "./_sass/route" +\:root + --primary: #{$primary} + --gap: 0.75rem + html \::-moz-selection background: $primary diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 54221b304..20934aea7 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -174,7 +174,7 @@ input[type="radio"] { } small { - font-size: 0.8em; + font-size: 0.875em; } span { @@ -1716,14 +1716,12 @@ input[type="submit"].button { .content ol { list-style: decimal outside; margin-left: 2em; - margin-right: 2em; margin-top: 1em; } .content ul { list-style: disc outside; margin-left: 2em; - margin-right: 2em; margin-top: 1em; } @@ -4549,6 +4547,9 @@ a.navbar-item.is-active, padding: 0.375rem 1rem; white-space: nowrap; } + .navbar-dropdown a.navbar-item { + padding-right: 3rem; + } .navbar-dropdown.is-boxed { border-radius: 5px; border-top: none; @@ -8192,6 +8193,11 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } +:root { + --primary: #00d1b2; + --gap: 0.75rem; +} + html ::-moz-selection { background: #00d1b2; color: #fff; diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html index 7123f42e2..adeaf555e 100644 --- a/docs/documentation/components/navbar.html +++ b/docs/documentation/components/navbar.html @@ -6,19 +6,81 @@ doc-subtab: navbar {% include subnav-components.html %} +{% capture navbar_example %} +{% include navbar.html %} +{% endcapture %} +
+

Navbar

A responsive horizontal navbar that can supports images, links, buttons, and dropdowns

+
+

The new .navbar replaces the old .nav component. You can still access its documentation here.

-
+
+

+ The .navbar component is a responsive and versatile horizontal navigation bar with the following structure: +

+
    +
  • + .navbar the main container +
      +
    • + .navbar-brand the left side, which usually contains the logo and optionally some links or icons +
        +
      • + .navbar-burger the hamburger icon, which toggles the navbar menu on touch devices +
        • +
      +
      • +
    • + .navbar-menu the right side, hidden on touch devices, visible on desktop +
        +
      • + .navbar-start the left part of the menu, which appears next to the navbar brand on desktop +
        • +
      • + .navbar-end the right part of the menu, which appears at the end of the navbar +
          +
        • + .navbar-item each single item of the navbar, which can either be a a or a div +
            +
          • + .navbar-link a link as the sibling of a dropdown, with an arrow +
            • +
          • + .navbar-dropdown the dropdown menu, which can include navbar items and dividers +
              +
            • + .navbar-divider a horizontal line to separate navbar items +
              • +
            +
            • +
          +
          • +
        +
        • +
      +
      • +
    +
    • +
+
+ +
+ {{navbar_example}} +
+ + {% highlight html %}{{navbar_example}}{% endhighlight %} +
diff --git a/docs/index.html b/docs/index.html index bd223ffbd..ca08a098e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,7 +3,9 @@ layout: default route: index --- -{% include navbar.html transparent=true boxed=true %} +
+ {% include navbar.html transparent=true boxed=true %} +
diff --git a/docs/lib/index.js b/docs/lib/index.js index e953f8b73..2e659c190 100644 --- a/docs/lib/index.js +++ b/docs/lib/index.js @@ -4,7 +4,6 @@ document.addEventListener('DOMContentLoaded', function () { var $grid = document.getElementById('grid'); var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0); - console.log('$columns', $columns); var $markup = document.querySelector('#markup code'); var $message = document.getElementById('message'); var $add = document.getElementById('add'); diff --git a/docs/lib/main.js b/docs/lib/main.js index fe028148b..a1de71a78 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -17,15 +17,14 @@ document.addEventListener('DOMContentLoaded', function () { // Modals var $html = document.documentElement; - var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0); - var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0); - var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0); + var $modals = getAll('.modal'); + var $modalButtons = getAll('.modal-button'); + var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'); if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener('click', function () { var target = $el.dataset.target; - console.log('target', target); var $target = document.getElementById(target); $html.classList.add('is-clipped'); $target.classList.add('is-active'); @@ -54,4 +53,60 @@ document.addEventListener('DOMContentLoaded', function () { $el.classList.remove('is-active'); }); } + + // Clipboard + + var $highlights = getAll('.highlight'); + var itemsProcessed = 0; + + if ($highlights.length > 0) { + $highlights.forEach(function ($el) { + var copy = ''; + var expand = ''; + $el.insertAdjacentHTML('beforeend', copy); + + if ($el.firstElementChild.scrollHeight > 600) { + $el.insertAdjacentHTML('beforeend', expand); + } + + itemsProcessed++; + if (itemsProcessed === $highlights.length) { + addHighlightControls(); + } + }); + } + + function addHighlightControls() { + var $highlightButtons = getAll('.highlight .copy, .highlight .expand'); + + $highlightButtons.forEach(function ($el) { + $el.addEventListener('mouseenter', function () { + $el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63'; + }); + + $el.addEventListener('mouseleave', function () { + $el.parentNode.style.boxShadow = 'none'; + }); + }); + + var $highlightExpands = getAll('.highlight .expand'); + + $highlightExpands.forEach(function ($el) { + $el.addEventListener('click', function () { + $el.parentNode.firstElementChild.style.maxHeight = 'none'; + }); + }); + } + + new Clipboard('.copy', { + target: function target(trigger) { + return trigger.previousSibling; + } + }); + + // Functions + + function getAll(selector) { + return Array.prototype.slice.call(document.querySelectorAll(selector), 0); + } }); \ No newline at end of file diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 9358e038b..4382bb2f2 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -69,7 +69,7 @@ input[type="radio"] vertical-align: baseline small - font-size: 0.8em + font-size: 0.875em span font-style: inherit diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 16040aaf3..5678b808a 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -11,6 +11,7 @@ $navbar-dropdown-border: $border !default $navbar-dropdown-offset: -4px !default $navbar-dropdown-arrow: $link !default $navbar-dropdown-radius: $radius-large !default +$navbar-dropdown-z: 20 !default $navbar-dropdown-item-hover-background: $background !default $navbar-dropdown-item-active: $primary !default @@ -156,10 +157,12 @@ a.navbar-item, min-width: 100% position: absolute top: 100% - z-index: 20 + z-index: $navbar-dropdown-z .navbar-item padding: 0.375rem 1rem white-space: nowrap + a.navbar-item + padding-right: 3rem &.is-boxed border-radius: $navbar-dropdown-radius border-top: none diff --git a/sass/elements/content.sass b/sass/elements/content.sass index 22fb05038..8edba2a9f 100644 --- a/sass/elements/content.sass +++ b/sass/elements/content.sass @@ -54,12 +54,10 @@ ol list-style: decimal outside margin-left: 2em - margin-right: 2em margin-top: 1em ul list-style: disc outside margin-left: 2em - margin-right: 2em margin-top: 1em ul list-style-type: circle @@ -67,22 +65,22 @@ ul list-style-type: square dd - margin-left: 2em - figure - text-align: center - img - display: inline-block - figcaption - font-style: italic - pre + margin-left: 2em + figure + text-align: center + img + display: inline-block + figcaption + font-style: italic + pre +overflow-touch overflow-x: auto padding: 1.25em 1.5em white-space: pre - word-wrap: normal - sup, - sub - font-size: 70% + word-wrap: normal + sup, + sub + font-size: 70% table width: 100% td,