]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
projects / thirdparty / bulma.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 270d37d)
Add highlight
authorJeremy Thomas <bbxdesign@gmail.com>
Sun, 2 Jul 2017 16:34:44 +0000 (17:34 +0100)
committerJeremy Thomas <bbxdesign@gmail.com>
Sun, 2 Jul 2017 16:34:44 +0000 (17:34 +0100)
docs/_includes/blog-hero.html patch | blob | blame | history
docs/_includes/navbar.html patch | blob | blame | history
docs/_javascript/main.js patch | blob | blame | history
docs/_layouts/default.html patch | blob | blame | history
docs/_layouts/documentation.html patch | blob | blame | history
docs/documentation/components/navbar.html patch | blob | blame | history
docs/index.html patch | blob | blame | history
docs/lib/main.js patch | blob | blame | history

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index d8cd05bfd7c5c47cff93929f0417de9ff20a21f2..8022ac82400534896d58b010bbd1fe2d8ceead1e 100644 (file)
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -1,5 +1,5 @@
 <div class="container">
-  {% include navbar.html %}
+  {% include navbar.html id="BlogHero" %}
 </div>
 
 <section class="hero is-primary">
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index d6a17e4c4151f54f0a77e3e1d6da2390ebceba00..19eebb42c9dd7ff6d031d5cfa826194ea5195c98 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -16,14 +16,14 @@
       </span>
     </a>
 
-    <div id="navBurger" class="navbar-burger">
+    <div class="navbar-burger burger" data-target="navMenu{{ include.id }}">
       <span></span>
       <span></span>
       <span></span>
     </div>
   </div>
 
-  <div id="navMenu" class="navbar-menu">
+  <div id="navMenu{{ include.id }}" class="navbar-menu">
     <div class="navbar-start">
       <a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
         Home
diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index c544160c860d82aad5eff6844ca97feec0cc24e7..5704d875e1512ba4be27710f327eda64f35bb151 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -1,14 +1,18 @@
 document.addEventListener('DOMContentLoaded', () => {
 
-  // Navbar burger menu
+  // Toggles
 
-  const $navBurger = document.getElementById('navBurger');
-  const $navMenu = document.getElementById('navMenu');
+  const $burgers = getAll('.burger');
+  const $fries = getAll('.fries');
 
-  if ($navBurger) {
-    $navBurger.addEventListener('click', () => {
-      $navBurger.classList.toggle('is-active');
-      $navMenu.classList.toggle('is-active');
+  if ($burgers.length > 0) {
+    $burgers.forEach($el => {
+      $el.addEventListener('click', () => {
+        const target = $el.dataset.target;
+        const $target = document.getElementById(target);
+        $el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
     });
   }
 
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 39dbb71b4fa3df538f9b5a738cc82aae3ea2aaba..0521f28a3a7d9e84187dd7acaf57b83dc6a5dd05 100644 (file)
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -3,5 +3,6 @@
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {{ content }}
+    {% include footer.html %}
   </body>
 </html>
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 4d43ab80b7a6acecdb591422292917e06a9b9083..4034caec7b2dc08055358258a0fa17bac1f023ea 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -4,7 +4,7 @@ route: documentation
 ---
 
 <div class="container">
-  {% include navbar.html %}
+  {% include navbar.html id="Documentation" %}
 </div>
 
 <section class="hero is-primary">
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index adeaf555ee3edab25749181af22fc7a74ba9e552..978a504e6d0569224b5770d90aa545c39e320918 100644 (file)
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -7,7 +7,31 @@ doc-subtab: navbar
 {% include subnav-components.html %}
 
 {% capture navbar_example %}
-{% include navbar.html %}
+{% include navbar.html id="Example" %}
+{% endcapture %}
+
+{% capture navbar_brand_example %}
+<nav class="navbar">
+  <div class="navbar-brand">
+    <!-- nav items, nav burger ... -->
+  </div>
+</nav>
+{% endcapture %}
+
+{% capture navbar_brand_items_example %}
+<nav class="navbar">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="{{ site.url }}">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
+    </a>
+
+    <div class="navbar-burger">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+</nav>
 {% endcapture %}
 
 <section class="section">
@@ -35,7 +59,7 @@ doc-subtab: navbar
           <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
+              <code>.navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</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
@@ -82,5 +106,37 @@ doc-subtab: navbar
 
     {% highlight html %}{{navbar_example}}{% endhighlight %}
 
+    <hr>
+
+    <h3 class="title">Navbar brand</h3>
+
+    <div class="content">
+      <p>
+        The <code>.navbar-brand</code> is the left side of the navbar. It can contain:
+      </p>
+      <ul>
+        <li>
+          a number of <code>.navbar-item</code>
+        </li>
+        <li>
+          the <code>.navbar-burger</code> as last child
+        </li>
+      </ul>
+    </div>
+
+    {% highlight html %}{{navbar_brand_example}}{% endhighlight %}
+
+    <div class="content">
+      <p>
+        The navbar brand is <strong>always visible</strong>: on both touch devices (< 1000px) and desktop (1000px +). As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
+      </p>
+    </div>
+
+    <div class="example is-paddingless">
+      {{navbar_brand_items_example}}
+    </div>
+
+    {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
+
   </div>
 </section>
diff --git a/docs/index.html b/docs/index.html
index ca08a098eafa580bdd8e5935602022e9636400f2..a23b6cdafd61b886afeff38b8cacd5201fc3c654 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@ route: index
 ---
 
 <div class="container">
-  {% include navbar.html transparent=true boxed=true %}
+  {% include navbar.html id="Index" transparent=true boxed=true %}
 </div>
 
 <section class="hero is-medium has-text-centered">
diff --git a/docs/lib/main.js b/docs/lib/main.js
index a1de71a78ee4dc7e5404e4bc1dfd0044f7e0ab09..6c48f6328d949117c5ad4450dd80ff618990f013 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -2,15 +2,19 @@
 
 document.addEventListener('DOMContentLoaded', function () {
 
-  // Navbar burger menu
+  // Toggles
 
-  var $navBurger = document.getElementById('navBurger');
-  var $navMenu = document.getElementById('navMenu');
+  var $burgers = getAll('.burger');
+  var $fries = getAll('.fries');
 
-  if ($navBurger) {
-    $navBurger.addEventListener('click', function () {
-      $navBurger.classList.toggle('is-active');
-      $navMenu.classList.toggle('is-active');
+  if ($burgers.length > 0) {
+    $burgers.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        var target = $el.dataset.target;
+        var $target = document.getElementById(target);
+        $el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
     });
   }
 
Mirror of https://github.com/jgthms/bulma.git