From 71b300aaa11a36176e59013253304a7648e18fd3 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Thu, 26 Jan 2017 21:10:52 +0100
Subject: [PATCH] Added possibility to add tabs

---
 material/base.html                       |  6 +++-
 material/partials/tabs-item.html         | 11 ++++++
 material/partials/tabs.html              |  9 +++++
 scripts/lint                             |  2 +-
 src/assets/stylesheets/layout/_tabs.scss | 43 ++++++++++++++++++++++
 src/base.html                            |  4 +++
 src/partials/tabs-item.html              | 46 ++++++++++++++++++++++++
 src/partials/tabs.html                   | 32 +++++++++++++++++
 8 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 material/partials/tabs-item.html
 create mode 100644 material/partials/tabs.html
 create mode 100644 src/assets/stylesheets/layout/_tabs.scss
 create mode 100644 src/partials/tabs-item.html
 create mode 100644 src/partials/tabs.html

diff --git a/material/base.html b/material/base.html
index d6c48d90a..905db1f59 100644
--- a/material/base.html
+++ b/material/base.html
@@ -31,7 +31,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/modernizr-facb31f4a3.js"></script>
     {% endblock %}
     {% block fonts %}
       {% if config.extra.font != "none" %}
@@ -82,6 +82,10 @@
       {% include "partials/header.html" %}
     {% endblock %}
     <div class="md-container">
+      {% set feature = config.extra.get("feature", {}) %}
+      {% if feature.tabs %}
+        {% include "partials/tabs.html" %}
+      {% endif %}
       <main class="md-main">
         <div class="md-main__inner md-grid" data-md-component="container">
           {% block site_nav %}
diff --git a/material/partials/tabs-item.html b/material/partials/tabs-item.html
new file mode 100644
index 000000000..82061ddde
--- /dev/null
+++ b/material/partials/tabs-item.html
@@ -0,0 +1,11 @@
+<li class="md-tabs__item">
+  {% if nav_item.children and nav_item.children | length > 0 %}
+  <a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
+    {{ nav_item.title }}
+  </a>
+  {% else %}
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link {% if nav_item.active %} md-tabs__link--active {% endif %}">
+      {{ nav_item.title }}
+    </a>
+  {% endif %}
+</li>
diff --git a/material/partials/tabs.html b/material/partials/tabs.html
new file mode 100644
index 000000000..92a67ce3d
--- /dev/null
+++ b/material/partials/tabs.html
@@ -0,0 +1,9 @@
+<nav class="md-tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      {% for nav_item in nav %}
+        {% include "partials/tabs-item.html" %}
+      {% endfor %}
+    </ul>
+  </div>
+</nav>
diff --git a/scripts/lint b/scripts/lint
index 51c64adc0..f83f6c9ba 100755
--- a/scripts/lint
+++ b/scripts/lint
@@ -28,7 +28,7 @@ if [[ ! -d `npm bin` ]]; then
 fi
 
 # Run ESLint
-`npm bin`/eslint .
+`npm bin`/eslint --max-warnings 0 .
 ESLINT=$?
 
 # Run Stylelint
diff --git a/src/assets/stylesheets/layout/_tabs.scss b/src/assets/stylesheets/layout/_tabs.scss
new file mode 100644
index 000000000..3e898ab6b
--- /dev/null
+++ b/src/assets/stylesheets/layout/_tabs.scss
@@ -0,0 +1,43 @@
+// TODO: proof of concept - needs refactor
+.md-tabs {
+  width: 100%;
+  background: mix($md-color-primary, $md-color-black, 75%);
+  overflow: scroll;
+
+  &__list {
+    margin: 0;
+    margin-left: 6rem;
+    padding: 0;
+    list-style: none;
+    white-space: nowrap;
+  }
+
+  &__item {
+    display: inline-block;
+
+    // text-transform: uppercase;
+  }
+
+  &__link {
+    display: block;
+    padding-right: 1.2rem;
+    padding-left: 1.2rem;
+    transition: color 0.25s;
+    color: $md-color-white--light;
+    font-size: 1.4rem;      // TODO: somehow centralize
+    line-height: 4.8rem;
+
+    &--active,
+    &:hover {
+      color: $md-color-white;
+    }
+
+    &--active {
+      box-shadow: 0 -0.2rem 0 mix($md-color-accent, $md-color-white, 25) inset;
+    }
+  }
+}
+
+.md-header {
+  box-shadow: none !important;
+}
diff --git a/src/base.html b/src/base.html
index 9383f1554..4bf0afef5 100644
--- a/src/base.html
+++ b/src/base.html
@@ -170,6 +170,10 @@
 
     <!-- Container, necessary for web-application context -->
     <div class="md-container">
+      {% set feature = config.extra.get("feature", {}) %}
+      {% if feature.tabs %}
+        {% include "partials/tabs.html" %}
+      {% endif %}
 
       <!-- Main container -->
       <main class="md-main">
diff --git a/src/partials/tabs-item.html b/src/partials/tabs-item.html
new file mode 100644
index 000000000..4e736ba38
--- /dev/null
+++ b/src/partials/tabs-item.html
@@ -0,0 +1,46 @@
+<!--
+  Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Tab item -->
+<li class="md-tabs__item">
+
+  <!-- Main navigation item with nested items -->
+  {% if nav_item.children and nav_item.children | length > 0 %}
+  <a href="{{ nav_item.children[0].url }}" title="{{ nav_item.title }}"
+      class="md-tabs__link
+        {% if nav_item.active %}
+          md-tabs__link--active
+        {% endif %}">
+    {{ nav_item.title }}
+  </a>
+
+  <!-- Main navigation item -->
+  {% else %}
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+        class="md-tabs__link
+          {% if nav_item.active %}
+            md-tabs__link--active
+          {% endif %}">
+      {{ nav_item.title }}
+    </a>
+  {% endif %}
+</li>
diff --git a/src/partials/tabs.html b/src/partials/tabs.html
new file mode 100644
index 000000000..21bd010ba
--- /dev/null
+++ b/src/partials/tabs.html
@@ -0,0 +1,32 @@
+<!--
+  Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Tabs with outline -->
+<nav class="md-tabs">
+  <div class="md-tabs__inner md-grid">
+    <ul class="md-tabs__list">
+      {% for nav_item in nav %}
+        {% include "partials/tabs-item.html" %}
+      {% endfor %}
+    </ul>
+  </div>
+</nav>