feat: Refactor docs page into base layout; new nav

(WIP #54)
riboseinc · Dec 16, 2018 · 6022bb2 · 6022bb2
1 parent 72c5aaf
commit 6022bb2
Show file tree

Hide file tree

Showing 7 changed files with 402 additions and 413 deletions.
diff --git a/_includes/project-doc-page.html b/_includes/project-doc-page.html
@@ -1,61 +0,0 @@
-{% assign nav = page.navigation | default: layout.navigation %}
-{% assign num_nav_sections = nav.sections | size %}
-
-{% for item in nav.items %}
-  {% assign topmost_item = item %}
-
-  {% if page.url == item.path %}
-    {% assign selected_item = item %}
-    {% assign selected_section = item %}
-  {% endif %}
-
-  {% if item.items %}
-    {% for item in item.items %}
-        {% if page.url == item.path %}
-          {% assign selected_item = item %}
-          {% assign selected_section = topmost_item %}
-        {% endif %}
-    {% endfor %}
-  {% endif %}
-{% endfor %}
-
-<section class="documentation {{ page.html-class }}">
-  <nav class="docs-nav">
-    <header class="sidebar-header">
-      <h3 class="title">
-        <a href="javascript: void 0;">
-          {{ include.header_main }}{% if selected_section %}: {{ selected_section.title }}{% endif %}
-        </a>
-      </h3>
-
-      {% if include.header_side %}
-      <span class="section-title">
-        &rarr;&nbsp;{{ include.header_side|replace: " ", "&nbsp;" }}
-      </span>
-      {% endif %}
-    </header>
-
-    <ul class="nav-items">
-      {% for item in nav.items %}
-        {% include _nav-item.html selected_item=selected_item item=item %}
-      {% endfor %}
-    </ul>
-  </nav>
-
-  <article>
-    <header>
-      <div class="title">
-        <h1 class="text">{{ page.article_header_title | default: page.title }}</h1>
-      </div>
-
-      <div>
-        <h3 class="lead">{{ page.description }}</h3>
-      </div>
-    </header>
-
-    <div class="body">
-      {{ content }}
-    </div>
-
-  </article>
-</section>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -32,6 +32,7 @@
 
 {% assign num_projects = site.projects | size %}
 <body class="
+    {{ page.html-class }} {{ layout.html-class }}
     {% if num_projects > 0 %}site--hub{% else %}site--project{% endif %}
     {% if page.layout %}layout--{{ page.layout }}{% endif %}">
   <div class="underlay header">

diff --git a/_layouts/docs-base.html b/_layouts/docs-base.html
@@ -0,0 +1,74 @@
+---
+layout: default
+---
+
+{% assign nav = page.navigation | default: layout.navigation %}
+{% assign num_nav_sections = nav.sections | size %}
+
+{% for item in nav.items %}
+  {% assign topmost_item = item %}
+
+  {% if page.url == item.path %}
+    {% assign selected_item = item %}
+    {% assign selected_section = item %}
+  {% endif %}
+
+  {% if item.items %}
+    {% for item in item.items %}
+        {% if page.url == item.path %}
+          {% assign selected_item = item %}
+          {% assign selected_section = topmost_item %}
+        {% endif %}
+    {% endfor %}
+  {% endif %}
+{% endfor %}
+
+
+<header class="documentation-header">
+  {% if page.title %}
+  <span class="section-title">
+    {{ page.title|replace: " ", "&nbsp;" }}
+  </span>
+  {% endif %}
+
+  <div class="nav-header">
+    <h3 class="title">
+      <a href="javascript: void 0;">
+        {{ layout.docs_title }}{% if selected_section %}: {{ selected_section.title }}{% endif %}
+      </a>
+    </h3>
+
+    <span class="nav-toggle-icon">
+      <i class="open far fa-ellipsis-v"></i>
+      <i class="close far fa-times"></i>
+    </span>
+  </div>
+</header>
+
+
+<section class="documentation {{ page.html-class }}">
+  <nav class="docs-nav">
+    <ul class="nav-items">
+      {% for item in nav.items %}
+        {% include _nav-item.html selected_item=selected_item item=item %}
+      {% endfor %}
+    </ul>
+  </nav>
+
+  <article>
+    <header>
+      <div class="title">
+        <h1 class="text">{{ page.article_header_title | default: page.title }}</h1>
+      </div>
+
+      <div>
+        <h3 class="lead">{{ page.description }}</h3>
+      </div>
+    </header>
+
+    <div class="body">
+      {{ content }}
+    </div>
+
+  </article>
+</section>
diff --git a/_sass/headroom.scss b/_sass/headroom.scss
@@ -1,6 +1,6 @@
 .headroom {
     will-change: transform;
-    transition: transform 200ms linear;
+    transition: transform .1s linear;
 }
 .headroom--pinned {
     transform: translateY(0%);
@@ -10,7 +10,7 @@
 }
 
 body.with-headroom {
-  &.layout--docs, &.layout--product, &.layout--spec {
+  &.docs-page {
     .underlay.header {
       position: fixed;
       top: 0;

diff --git a/_sass/jekyll-theme-open-project.scss b/_sass/jekyll-theme-open-project.scss
@@ -665,11 +665,7 @@ main {
   &.layout--spec > main > article {
     @extend .main-article;
   }
-  &.layout--spec > main,
-  &.layout--product > main,
-  &.layout--docs > main {
-    > .documentation:only-child {
-      @include docs-page($primary-dark-color);
-    }
+  &.docs-page > main {
+    @include docs-page($primary-dark-color);
   }
 }