We use cookies to ensure you get the best experience on our website
Начало Каталог Помощ
Регистрация Вход
0ct0pu5
/
bulma
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

Add highlight

Jeremy Thomas преди 8 години
родител
270d37d2d4
ревизия
d5372f08af
променени са 8 файла, в които са добавени 86 реда и са изтрити 21 реда
Разделен изглед Покажи статистика за разликите
  1. 1 1
      docs/_includes/blog-hero.html
  2. 2 2
      docs/_includes/navbar.html
  3. 11 7
      docs/_javascript/main.js
  4. 1 0
      docs/_layouts/default.html
  5. 1 1
      docs/_layouts/documentation.html
  6. 58 2
      docs/documentation/components/navbar.html
  7. 1 1
      docs/index.html
  8. 11 7
      docs/lib/main.js

+ 1 - 1
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">

+ 2 - 2
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

+ 11 - 7
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');
 
+      });
 
     });
 
   }

+ 1 - 0
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>

+ 1 - 1
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">

+ 58 - 2
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>

+ 1 - 1
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">

+ 11 - 7
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');
 
+      });
 
     });
 
   }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5