Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add navbar component, Fix JS highlight

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-02 16:52:20 +01:00
parent 6fe8ce9795
commit 43b034e0af
15 changed files with 345 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/blog-hero.html
View File

@@ -1,4 +1,6 @@
{% include navbar.html %} <div class="container">
{% include navbar.html %}
</div>
<section class="hero is-primary"> <section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">

236
docs/_includes/navbar.html
View File

@@ -1,99 +1,97 @@
<div class="container"> <nav class="navbar {% if include.transparent %}is-transparent{% endif %}">
<nav class="navbar {% if include.transparent %}is-transparent{% endif %}"> <div class="navbar-brand">
<div class="navbar-brand"> <a class="navbar-item" href="{{ site.url }}">
<a class="navbar-item" href="{{ site.url }}"> <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28"> </a>
</a>
<a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank"> <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
<span class="icon" style="color: #333;"> <span class="icon" style="color: #333;">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
</span> </span>
</a> </a>
<a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank"> <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;"> <span class="icon" style="color: #55acee;">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
</a> </a>
<div id="navBurger" class="navbar-burger"> <div id="navBurger" class="navbar-burger">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div>
</div> </div>
</div>
<div id="navMenu" class="navbar-menu"> <div id="navMenu" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/"> <a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
Home Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
Docs
</a> </a>
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
<a class="navbar-link {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}"> <a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.documentation }}">
Docs Overview
</a> </a>
<div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}"> <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
<a class="navbar-item {% if page.doc-tab == 'overview' %}is-active{% endif %}" href="{{ site.documentation }}"> Modifiers
Overview </a>
</a> <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
<a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/"> Grid
Modifiers </a>
</a> <a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
<a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/"> Elements
Grid </a>
</a> <a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
<a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/"> Components
Elements </a>
</a> <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
<a class="navbar-item {% if page.doc-tab == 'components' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/"> Layout
Components </a>
</a> <hr class="navbar-divider">
<a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/"> <div class="navbar-item">
Layout <div>version <p class="has-text-info">{{ site.version }}</p></div>
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div>version <p class="has-text-info">{{ site.version }}</p></div>
</div>
</div> </div>
</div> </div>
<div class="navbar-item has-dropdown is-hoverable"> </div>
<a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/"> <div class="navbar-item has-dropdown is-hoverable">
Blog <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
</a> Blog
<div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;"> </a>
{% for post in site.posts limit:3 %} <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
<a class="navbar-item" href="{{ post.url }}"> {% for post in site.posts limit:3 %}
<div class="navbar-content"> <a class="navbar-item" href="{{ post.url }}">
<p>
<small>{{ post.date | date_to_string }}</small>
</p>
<p>{{ post.title }}</p>
</div>
</a>
{% endfor %}
<a class="navbar-item" href="{{ site.url }}/blog/">
More posts
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content"> <div class="navbar-content">
<div class="level is-mobile"> <p>
<div class="level-left"> <small>{{ post.date | date_to_string }}</small>
<div class="level-item"> </p>
<strong>Stay up to date!</strong> <p>{{ post.title }}</p>
</div> </div>
</a>
{% endfor %}
<a class="navbar-item" href="{{ site.url }}/blog/">
More posts
</a>
<hr class="navbar-divider">
<div class="navbar-item">
<div class="navbar-content">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<strong>Stay up to date!</strong>
</div> </div>
<div class="level-right"> </div>
<div class="level-item"> <div class="level-right">
<a class="button is-rss is-small" href="{{ site.url }}/atom.xml"> <div class="level-item">
<span class="icon is-small"> <a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
<i class="fa fa-rss"></i> <span class="icon is-small">
</span> <i class="fa fa-rss"></i>
<span>Subscribe</span> </span>
</a> <span>Subscribe</span>
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@@ -101,41 +99,41 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item" href="{{ site.github }}" target="_blank"> <a class="navbar-item" href="{{ site.github }}" target="_blank">
Github Github
</a> </a>
<a class="navbar-item" href="{{ site.twitter }}" target="_blank"> <a class="navbar-item" href="{{ site.twitter }}" target="_blank">
Twitter Twitter
</a> </a>
<div class="navbar-item"> <div class="navbar-item">
<div class="field is-grouped"> <div class="field is-grouped">
<p class="control"> <p class="control">
<a id="twitter" <a id="twitter"
class="button" class="button"
data-social-network="Twitter" data-social-network="Twitter"
data-social-action="tweet" data-social-action="tweet"
data-social-target="{{ site.url }}" data-social-target="{{ site.url }}"
target="_blank" target="_blank"
href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms"> href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
<span class="icon"> <span class="icon">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
<span>Tweet</span> <span>Tweet</span>
</a> </a>
</p> </p>
<p class="control"> <p class="control">
<a class="button is-primary" href="{{ site.download }}"> <a class="button is-primary" href="{{ site.download }}">
<span class="icon"> <span class="icon">
<i class="fa fa-download"></i> <i class="fa fa-download"></i>
</span> </span>
<span>Download</span> <span>Download</span>
</a> </a>
</p> </p>
</div>
</div> </div>
</div> </div>
</div> </div>
</nav> </div>
</div> </nav>

63
docs/_javascript/main.js
View File

@@ -15,15 +15,14 @@ document.addEventListener('DOMContentLoaded', () => {
// Modals // Modals
const $html = document.documentElement; const $html = document.documentElement;
const $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0); const $modals = getAll('.modal');
const $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0); const $modalButtons = getAll('.modal-button');
const $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0); const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
if ($modalButtons.length > 0) { if ($modalButtons.length > 0) {
$modalButtons.forEach($el => { $modalButtons.forEach($el => {
$el.addEventListener('click', () => { $el.addEventListener('click', () => {
const target = $el.dataset.target; const target = $el.dataset.target;
console.log('target', target);
const $target = document.getElementById(target); const $target = document.getElementById(target);
$html.classList.add('is-clipped'); $html.classList.add('is-clipped');
$target.classList.add('is-active'); $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 = '<button class="copy">Copy</button>';
const expand = '<button class="expand">Expand</button>';
$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);
}
}); });

4
docs/_layouts/documentation.html
View File

@@ -3,7 +3,9 @@ layout: default
route: documentation route: documentation
--- ---
{% include navbar.html %} <div class="container">
{% include navbar.html %}
</div>
<section class="hero is-primary"> <section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">

6
docs/_posts/2017-07-02-new-navbar-component.md Normal file
View File

@@ -0,0 +1,6 @@
---
layout: post
title: "RIP nav; long live the navbar!"
published: true
introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
---

4
docs/blog.html
View File

@@ -20,8 +20,8 @@ route: blog
</h2> </h2>
</div> </div>
<div class="column is-8"> <div class="column is-8">
<div class="content"> <div class="content is-medium">
{{ post.content }} {{ post.introduction }}
</div> </div>
</div> </div>
</div> </div>

4
docs/bulma-docs.sass
View File

@@ -13,6 +13,10 @@
@import "./_sass/bsa" @import "./_sass/bsa"
@import "./_sass/route" @import "./_sass/route"
\:root
--primary: #{$primary}
--gap: 0.75rem
html html
\::-moz-selection \::-moz-selection
background: $primary background: $primary

12
docs/css/bulma-docs.css
View File

@@ -174,7 +174,7 @@ input[type="radio"] {
} }
small { small {
font-size: 0.8em; font-size: 0.875em;
} }
span { span {
@@ -1716,14 +1716,12 @@ input[type="submit"].button {
.content ol { .content ol {
list-style: decimal outside; list-style: decimal outside;
margin-left: 2em; margin-left: 2em;
margin-right: 2em;
margin-top: 1em; margin-top: 1em;
} }
.content ul { .content ul {
list-style: disc outside; list-style: disc outside;
margin-left: 2em; margin-left: 2em;
margin-right: 2em;
margin-top: 1em; margin-top: 1em;
} }
@@ -4549,6 +4547,9 @@ a.navbar-item.is-active,
padding: 0.375rem 1rem; padding: 0.375rem 1rem;
white-space: nowrap; white-space: nowrap;
} }
.navbar-dropdown a.navbar-item {
padding-right: 3rem;
}
.navbar-dropdown.is-boxed { .navbar-dropdown.is-boxed {
border-radius: 5px; border-radius: 5px;
border-top: none; 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 { html ::-moz-selection {
background: #00d1b2; background: #00d1b2;
color: #fff; color: #fff;

64
docs/documentation/components/navbar.html
View File

@@ -6,19 +6,81 @@ doc-subtab: navbar
{% include subnav-components.html %} {% include subnav-components.html %}
{% capture navbar_example %}
{% include navbar.html %}
{% endcapture %}
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<h1 class="title">Navbar</h1> <h1 class="title">Navbar</h1>
<h2 class="subtitle"> <h2 class="subtitle">
A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
</h2> </h2>
<hr>
<div class="message is-success"> <div class="message is-success">
<div class="message-body"> <div class="message-body">
<p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p> <p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
</div> </div>
</div> </div>
<hr> <div class="content">
<p>
The <code>.navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
</p>
<ul>
<li>
<code>.navbar</code> the <strong>main</strong> container
<ul>
<li>
<code>.navbar-brand</code> the <strong>left side</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
<ul>
<li>
<code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
</li>
</ul>
</li>
<li>
<code>.navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
<ul>
<li>
<code>.navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
</li>
<li>
<code>.navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
<ul>
<li>
<code>.navbar-item</code> each <strong>single item</strong> of the navbar, which can either be a <code>a</code> or a <code>div</code>
<ul>
<li>
<code>.navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
</li>
<li>
<code>.navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
<ul>
<li>
<code>.navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="example is-paddingless">
{{navbar_example}}
</div>
{% highlight html %}{{navbar_example}}{% endhighlight %}
</div> </div>
</section> </section>

4
docs/index.html
View File

@@ -3,7 +3,9 @@ layout: default
route: index route: index
--- ---
{% include navbar.html transparent=true boxed=true %} <div class="container">
{% include navbar.html transparent=true boxed=true %}
</div>
<section class="hero is-medium has-text-centered"> <section class="hero is-medium has-text-centered">
<div class="hero-body"> <div class="hero-body">

1
docs/lib/index.js
View File

@@ -4,7 +4,6 @@ document.addEventListener('DOMContentLoaded', function () {
var $grid = document.getElementById('grid'); var $grid = document.getElementById('grid');
var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0); var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
console.log('$columns', $columns);
var $markup = document.querySelector('#markup code'); var $markup = document.querySelector('#markup code');
var $message = document.getElementById('message'); var $message = document.getElementById('message');
var $add = document.getElementById('add'); var $add = document.getElementById('add');

63
docs/lib/main.js
View File

@@ -17,15 +17,14 @@ document.addEventListener('DOMContentLoaded', function () {
// Modals // Modals
var $html = document.documentElement; var $html = document.documentElement;
var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0); var $modals = getAll('.modal');
var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0); var $modalButtons = getAll('.modal-button');
var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0); var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
if ($modalButtons.length > 0) { if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) { $modalButtons.forEach(function ($el) {
$el.addEventListener('click', function () { $el.addEventListener('click', function () {
var target = $el.dataset.target; var target = $el.dataset.target;
console.log('target', target);
var $target = document.getElementById(target); var $target = document.getElementById(target);
$html.classList.add('is-clipped'); $html.classList.add('is-clipped');
$target.classList.add('is-active'); $target.classList.add('is-active');
@@ -54,4 +53,60 @@ document.addEventListener('DOMContentLoaded', function () {
$el.classList.remove('is-active'); $el.classList.remove('is-active');
}); });
} }
// Clipboard
var $highlights = getAll('.highlight');
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copy = '<button class="copy">Copy</button>';
var expand = '<button class="expand">Expand</button>';
$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);
}
}); });

2
sass/base/generic.sass
View File

@@ -69,7 +69,7 @@ input[type="radio"]
vertical-align: baseline vertical-align: baseline
small small
font-size: 0.8em font-size: 0.875em
span span
font-style: inherit font-style: inherit

5
sass/components/navbar.sass
View File

@@ -11,6 +11,7 @@ $navbar-dropdown-border: $border !default
$navbar-dropdown-offset: -4px !default $navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default $navbar-dropdown-arrow: $link !default
$navbar-dropdown-radius: $radius-large !default $navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default
$navbar-dropdown-item-hover-background: $background !default $navbar-dropdown-item-hover-background: $background !default
$navbar-dropdown-item-active: $primary !default $navbar-dropdown-item-active: $primary !default
@@ -156,10 +157,12 @@ a.navbar-item,
min-width: 100% min-width: 100%
position: absolute position: absolute
top: 100% top: 100%
z-index: 20 z-index: $navbar-dropdown-z
.navbar-item .navbar-item
padding: 0.375rem 1rem padding: 0.375rem 1rem
white-space: nowrap white-space: nowrap
a.navbar-item
padding-right: 3rem
&.is-boxed &.is-boxed
border-radius: $navbar-dropdown-radius border-radius: $navbar-dropdown-radius
border-top: none border-top: none

26
sass/elements/content.sass
View File

@@ -54,12 +54,10 @@
ol ol
list-style: decimal outside list-style: decimal outside
margin-left: 2em margin-left: 2em
margin-right: 2em
margin-top: 1em margin-top: 1em
ul ul
list-style: disc outside list-style: disc outside
margin-left: 2em margin-left: 2em
margin-right: 2em
margin-top: 1em margin-top: 1em
ul ul
list-style-type: circle list-style-type: circle
@@ -67,22 +65,22 @@
ul ul
list-style-type: square list-style-type: square
dd dd
margin-left: 2em margin-left: 2em
figure figure
text-align: center text-align: center
img img
display: inline-block display: inline-block
figcaption figcaption
font-style: italic font-style: italic
pre pre
+overflow-touch +overflow-touch
overflow-x: auto overflow-x: auto
padding: 1.25em 1.5em padding: 1.25em 1.5em
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
sup, sup,
sub sub
font-size: 70% font-size: 70%
table table
width: 100% width: 100%
td, td,