Refactored repository view and integrated into drawer

material/base.html

@@ -24,7 +24,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-cbcef7edd5.css">
+    <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-a65065dc36.css">
     {% for path in extra_css %}
       <link rel="stylesheet" href="{{ path }}">
     {% endfor %}

material/partials/header.html

@@ -13,22 +13,10 @@
         <label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
         {% include "partials/search.html" %}
       </div>
-      {% if "github." in repo_url %}
-        {% set platform = "md-source--github" %}
-      {% elif "gitlab." in repo_url %}
-        {% set platform = "md-source--gitlab" %}
-      {% elif "bitbucket." in repo_url %}
-        {% set platform = "md-source--bitbucket" %}
-      {% else %}
-        {% set platform = "" %}
-      {% endif %}
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
+        <div class="md-header-nav__source">
-          <div class="md-source__repository">{{ repo_name }}</div>
+          {% include "partials/source.html" %}
-          <ul class="md-source__facts">
+        </div>
-            <li class="md-source__fact">v0.2.4</li>                             
-          </ul>
-        </a>
       </div>
     </div>
   </nav>

material/partials/nav.html

@@ -1,9 +1,12 @@
 <nav class="md-nav md-nav--primary">
-  <label class="md-nav__title" for="drawer">Navigation</label>
+  <label class="md-nav__title" for="drawer">{{ site_name }}</label>
   <ul class="md-nav__list">
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
       {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>
+  <div class="md-nav__source">
+    {% include "partials/source.html" %}
+  </div>
 </nav>

material/partials/source.html

@@ -0,0 +1,17 @@
+{% if "github." in repo_url %}
+  {% set platform = "md-source--github" %}
+{% elif "gitlab." in repo_url %}
+  {% set platform = "md-source--gitlab" %}
+{% elif "bitbucket." in repo_url %}
+  {% set platform = "md-source--bitbucket" %}
+{% else %}
+  {% set platform = "" %}
+{% endif %}
+<a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
+  <div class="md-source__repository">
+    {{ repo_name }}
+    <ul class="md-source__facts">
+      <li class="md-source__fact">v0.2.4</li>                             
+    </ul>
+  </div>
+</a>

src/assets/javascripts/application.js

@@ -126,28 +126,31 @@ document.addEventListener('DOMContentLoaded', function() {
       var stars = data.stargazers_count;
       var forks = data.forks_count;
       // store in session!!!
-      var list = document.querySelector('.md-source__facts');
+      var lists = document.querySelectorAll('.md-source__facts');
-      // list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
+      [].forEach.call(lists, function(list) {
-      // list.innerHTML += '<li>' + forks + ' Forks</li>\n';
+        // list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
+        // list.innerHTML += '<li>' + forks + ' Forks</li>\n';
 
-      var li = document.createElement('li');
+        var li = document.createElement('li');
-      li.className = 'md-source__fact md-source__fact--hidden';
+        li.className = 'md-source__fact md-source__fact--hidden';
-      li.innerText = stars + ' Stars';
+        li.innerText = stars + ' Stars';
-      list.appendChild(li);
+        list.appendChild(li);
 
 
-      setTimeout(function(li) {
+        setTimeout(function(li) {
-        li.classList.remove('md-source__fact--hidden');
+          li.classList.remove('md-source__fact--hidden');
-      }, 100, li);
+        }, 100, li);
 
-      li = document.createElement('li');
+        li = document.createElement('li');
-      li.className = 'md-source__fact md-source__fact--hidden';
+        li.className = 'md-source__fact md-source__fact--hidden';
-      li.innerText = forks + ' Forks';
+        li.innerText = forks + ' Forks';
-      list.appendChild(li);
+        list.appendChild(li);
+
+        setTimeout(function(li) {
+          li.classList.remove('md-source__fact--hidden');
+        }, 500, li);
+      })
 
-      setTimeout(function(li) {
-        li.classList.remove('md-source__fact--hidden');
-      }, 500, li);
 
       // setTimeout(function() {
       //   li.classList.remove('md-source__fact--hidden');

src/assets/stylesheets/_shame.scss

@@ -252,50 +252,4 @@ mark {
   display: block;
   margin: 0 -16px;
   padding: 0 16px;
-}
+}
-
-// [tablet -]: Adjust spacing on screens
-@include break-to-device(tablet) {
-  .md-sidebar--primary {
-    .md-nav--secondary .md-nav {
-      position: static; // TODO DODODODODO
-
-      .md-nav__item {
-        padding-left: 1.2rem;
-      }
-    }
-    // second level list!
-    .md-nav--secondary .md-nav__list .md-nav__list {
-      position: static;
-      pointer-events: initial; //!!!
-    }
-    .md-nav__item {
-      // transition: background .25s;
-      //
-      // & :hover {
-      //   background: lighten($md-color-primary, 50%);
-      // }
-    }
-  }
-}
-
-// .md-nav--secondary > .md-nav__title {
-//   // -webkit-overflow-scrolling: touch;
-//   @include z-depth(1);
-// }
-// .md-nav__toggle:checked ~ .md-nav > .md-nav__list {
-//
-//   > :first-child {
-//     border-top: 0;
-//   }
-//
-// 	background:
-// 		linear-gradient(white 10%, rgba(255,255,255,0)), // cover
-//     linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 60%); // shadow
-// 	background-repeat: no-repeat;
-// 	background-color: white;
-// 	background-size: 100% 20px, 100% 4px;
-//
-// 	/* Opera doesn't support this in the shorthand */
-// 	background-attachment: local, scroll;
-// }

src/assets/stylesheets/base/_typeset.scss

@@ -26,6 +26,7 @@
 
 // Default fonts
 body {
+  color: $md-color-black;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
@@ -44,6 +45,7 @@ body {
 pre,
 code,
 kbd {
+  color: $md-color-black;
   font-family: "Roboto Mono", "Courier New", Courier, monospace;
   font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
@@ -60,7 +62,6 @@ kbd {
 
 // Content that is typeset
 .md-content--typeset {
-  color: $md-color-black;
   font-size: ms(0);
   line-height: 1.6;
 

src/assets/stylesheets/extensions/_permalinks.scss

@@ -44,14 +44,16 @@
 
     // Make permalink visible on hover
     &:hover  .headerlink,
-    &:target .headerlink {
+    &:target .headerlink,
+    & .headerlink:focus {
       transform: translate3d(0, 0, 0);
       opacity: 1;
     }
 
     // Active or targeted permalink
     &:hover  .headerlink:hover,
-    &:target .headerlink {
+    &:target .headerlink,
+    & .headerlink:focus {
       color: $md-color-accent;
     }
   }

src/assets/stylesheets/layout/_base.scss

@@ -139,7 +139,7 @@ hr {
 
     // Shrink to minimum width
     &--shrink {
-      width: 1%;
+      width: 0%;
     }
 
     // Stretch to maximum width

src/assets/stylesheets/layout/_header.scss

@@ -71,4 +71,17 @@
     font-size: 1.8rem;
     line-height: 4.8rem;
   }
+
+  // Repository containing source
+  &__source {
+    display: none;
+
+    // [tablet landscape +]: Show the reposistory from tablet
+    @include break-from-device(tablet landscape) {
+      display: block;
+      width: 23.0rem;
+      max-width: 23.0rem;
+      padding-right: 1.2rem;
+    }
+  }
 }

src/assets/stylesheets/layout/_nav.scss

@@ -27,21 +27,20 @@
 // Nested navigation
 .md-nav {
   font-size: ms(-1);
-  line-height: 1.2;
+  line-height: 1.3;
 
   // Table of contents
   &--secondary {
     border-left: px2rem(4px) solid $md-color-primary;
   }
 
-  // Title
+  // List title
   &__title {
     display: block;
-    margin: 0;
     padding: 1.2rem 1.2rem 0;
-    font-size: inherit;
     font-weight: 700;
-    line-height: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
     // Icon, hidden by default
     &::before {
@@ -62,11 +61,10 @@
   // List item
   &__item {
     padding: 0.625em 1.2rem 0;
-    line-height: 1.3;
 
     // Add bottom spacing to last item
     &:last-child {
-      padding-bottom: 0.625em;
+      padding-bottom: 1.2rem;
     }
 
     // 2nd+ level items
@@ -98,12 +96,13 @@
       }
     }
 
-    // Hide link to table of contents by default
+    // Hide link to table of contents by default - this will only match the
-    &[for="toc"] {
+    // table of contents inside the drawer below and including tablet portrait.
+    html &[for="toc"] {
       display: none;
 
       // Hide table of contents by default
-      html & ~ .md-nav {
+      & ~ .md-nav {
         display: none;
       }
 
@@ -126,6 +125,11 @@
     }
   }
 
+  // Repository containing source
+  &__source {
+    display: none;
+  }
+
   // [tablet -]: Layered navigation
   @include break-to-device(tablet) {
 
@@ -138,7 +142,6 @@
       right: 0;
       left: 0;
       flex-direction: column;
-      width: auto;
       height: 100%;
       z-index: 1;
     }
@@ -155,8 +158,9 @@
         background: $md-color-white;
       }
 
-      // Title
+      // List title - higher specificity is necessary to ensure that the title
-      .md-nav__title {
+      // inside the drawer is always styled accordingly.
+      html & .md-nav__title {
         position: relative;
         padding: 0.4rem 1.6rem 0.4rem 5.6rem;
         background: $md-color-black--lightest;
@@ -164,10 +168,8 @@
         font-size: 1.8rem;
         font-weight: 400;
         line-height: 4.8rem;
-        text-overflow: ellipsis;
         white-space: nowrap;
         cursor: pointer;
-        overflow: hidden;
 
         // Icon
         &::before {
@@ -178,6 +180,11 @@
           height: 4.0rem;
           color: $md-color-black--light;
         }
+
+        // Remove border for first ist item
+        ~ .md-nav__list > .md-nav__item:first-child {
+          border-top: 0;
+        }
       }
 
       // List of items
@@ -190,7 +197,11 @@
       .md-nav__item {
         padding: 0;
         border-top: 0.1rem solid $md-color-black--lightest;
-        font-size: 1.6rem;
+
+        // Increase spacing to account for icon
+        &--nested > .md-nav__link {
+          padding-right: 4.8rem;
+        }
       }
 
       // Link inside item
@@ -201,11 +212,42 @@
         // Rotate icon
         &::after {
           position: absolute;
+          top: 50%;
           right: 1.2rem;
-          transform: rotate(-90deg);
+          transform: translateY(-50%) rotate(-90deg);
+          transition: inherit;
           color: $md-color-black--light;
           font-size: 2.4rem;
-          line-height: 2.0rem;
+        }
+
+        // Color of icon should inherit link color on hover
+        &:hover::after {
+          color: $md-color-accent;
+        }
+      }
+
+      // Set nested navigation for table of contents to static
+      .md-nav--secondary .md-nav {
+        position: static;
+
+        // 3rd level link
+        .md-nav__link {
+          padding-left: 2.8rem;
+        }
+
+        // 4th level link
+        .md-nav .md-nav__link {
+          padding-left: 4.0rem;
+        }
+
+        // 5th level link
+        .md-nav .md-nav .md-nav__link {
+          padding-left: 5.2rem;
+        }
+
+        // 6th level link
+        .md-nav .md-nav .md-nav .md-nav__link {
+          padding-left: 6.4rem;
         }
       }
     }
@@ -236,6 +278,13 @@
         opacity: 1;
       }
     }
+
+    // List item
+    .md-nav__title,
+    .md-nav__item {
+      font-size: 1.6rem;
+      line-height: 1.4;
+    }
   }
 
   // [tablet portrait -]: Show table of contents in drawer
@@ -246,13 +295,15 @@
       border-left: 0;
     }
 
-    // Show link to table of contents
+    // Show link to table of contents - higher specificity is necessary to
-    &__link[for="toc"] {
+    // display the table of contents inside the drawer.
+    html &__link[for="toc"] {
       display: block;
 
       // Unrotate icon for table of contents
       &::after {
-        transform: none;
+        transform: translateY(-50%);
+        color: $md-color-accent;
         content: "toc";
       }
 
@@ -262,10 +313,18 @@
       }
 
       // Show table of contents
-      html & ~ .md-nav {
+      & ~ .md-nav {
         display: flex;
       }
     }
+
+    // Repository containing source
+    &__source {
+      display: block;
+      padding: 0.4rem;
+      background: $md-color-black;
+      color: $md-color-white;
+    }
   }
 
   // [screen +]: Tree-like navigation
@@ -282,7 +341,7 @@
       max-height: 100%;
     }
 
-    // Title
+    // List title
     &__title {
 
       // Hide titles for nested navigation

src/assets/stylesheets/layout/_sidebar.scss

@@ -48,7 +48,8 @@
       width: 24.2rem;
       height: 100%;
       transform: translate3d(0, 0, 0);
-      transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
+      transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
+                  box-shadow 0.25s;
       background: $md-color-white;
       z-index: 2;
 
@@ -59,6 +60,8 @@
 
       // Expanded drawer
       .md-toggle--drawer:checked ~ .md-container & {
+        @include z-depth(8);
+
         transform: translate3d(24.2rem, 0, 0);
 
         // Just show drawer, if browser doesn't support 3D transforms
@@ -100,7 +103,7 @@
   &__scrollwrap {
     margin: 2.4rem 0.4rem;
     overflow-y: scroll;
-    // -webkit-overflow-scrolling: touch;                 // TODO: define on sidebar
+    // -webkit-overflow-scrolling: touch;                                       // TODO: problems with iOS
 
     // [tablet -]: Adjust margins
     @include break-to-device(tablet) {

src/assets/stylesheets/layout/_source.scss

@@ -26,17 +26,11 @@
 
 // Repository containing source
 .md-source {
-  display: table-cell;
+  display: block;
-  position: relative;
-  min-width: 23.0rem;
-  max-width: 23.0rem;
-  height: 4.8rem;
-  padding: 0 1.2rem;
   transition: opacity 0.25s;
   font-size: 1.3rem;
   line-height: 1.2;
   white-space: nowrap;
-  vertical-align: middle;
 
   // Hovered source information
   &:hover {
@@ -47,20 +41,17 @@
   &--bitbucket,
   &--github,
   &--gitlab {
-    padding-left: 4.0rem;
 
     // Platform icon
     &::before {
-      display: block;
+      display: inline-block;
-      position: absolute;
+      width: 4.8rem;
-      top: 50%;
+      height: 4.8rem;
-      left: $md-icon-padding;
-      width:  $md-icon-size;
-      height: $md-icon-size;
-      transform: translateY(-50%);
       background-repeat: no-repeat;
+      background-position: center;
       background-size: $md-icon-size $md-icon-size;
       content: "";
+      vertical-align: middle;
     }
   }
 
@@ -81,18 +72,23 @@
 
   // Repository name
   &__repository {
+    display: inline-block;
+    max-width: 100%;
+    margin-left: -4.4rem;
+    padding-left: 4.0rem;
     font-weight: 700;
     text-overflow: ellipsis;
     overflow: hidden;
+    vertical-align: middle;
   }
 
   // Source facts (statistics etc.)
   &__facts {
     margin: 0;
     padding: 0;
-    color: $md-color-white--light;
     font-size: 1.1rem;
     font-weight: 700;
+    opacity: 0.75;
     list-style-type: none;
   }
 
@@ -104,21 +100,21 @@
                 transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
     opacity: 1;
 
+    // Facts are hidden by default
     &--hidden {
       transform: translateY(100%);
       opacity: 0;
     }
 
+    // Middle dots before fact
     &::before {
       margin: 0 0.2rem;
       content: "\00B7";
     }
 
-    &:first-child {
+    // Remove middle dot on first fact
-
+    &:first-child::before {
-      &::before {
+      display: none;
-        display: none;
-      }
     }
   }
 }

src/partials/header.html

@@ -49,29 +49,11 @@
         {% include "partials/search.html" %}
       </div>
 
-      <!--
+      <!-- Repository containing source -->
-        Check whether the repository is hosted on one of the supported code
-        hosting platforms (Github, Gitlab or Bitbucket) to show icon.
-      -->
-      {% if "github." in repo_url %}
-        {% set platform = "md-source--github" %}
-      {% elif "gitlab." in repo_url %}
-        {% set platform = "md-source--gitlab" %}
-      {% elif "bitbucket." in repo_url %}
-        {% set platform = "md-source--bitbucket" %}
-      {% else %}
-        {% set platform = "" %}
-      {% endif %}
-
-      <!-- Link to repository -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ repo_url }}" title="Go to repository"
+        <div class="md-header-nav__source">
-            class="md-source {{ platform }}">
+          {% include "partials/source.html" %}
-          <div class="md-source__repository">{{ repo_name }}</div>
+        </div>
-          <ul class="md-source__facts">
-            <li class="md-source__fact">v0.2.4</li>                             <!-- TODO: make dynamic -->
-          </ul>
-        </a>
       </div>
     </div>
   </nav>

src/partials/nav.html

@@ -22,11 +22,14 @@
 
 <!-- Main navigation -->
 <nav class="md-nav md-nav--primary">
-  <label class="md-nav__title" for="drawer">Navigation</label>
+  <label class="md-nav__title" for="drawer">{{ site_name }}</label>
   <ul class="md-nav__list">
     {% for nav_item in nav %}
       {% set path = "nav-" + loop.index | string %}
       {% include "partials/nav-item.html" %}
     {% endfor %}
   </ul>
+  <div class="md-nav__source">
+    {% include "partials/source.html" %}
+  </div>
 </nav>

src/partials/source.html

@@ -0,0 +1,46 @@
+<!--
+  Copyright (c) 2016 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.
+-->
+
+<!--
+  Check whether the repository is hosted on one of the supported code hosting
+  platforms (Github, Gitlab or Bitbucket) to show icon.
+-->
+{% if "github." in repo_url %}
+  {% set platform = "md-source--github" %}
+{% elif "gitlab." in repo_url %}
+  {% set platform = "md-source--gitlab" %}
+{% elif "bitbucket." in repo_url %}
+  {% set platform = "md-source--bitbucket" %}
+{% else %}
+  {% set platform = "" %}
+{% endif %}
+
+<!-- Repository containing source -->
+<a href="{{ repo_url }}" title="Go to repository"
+    class="md-source {{ platform }}">
+  <div class="md-source__repository">
+    {{ repo_name }}
+    <ul class="md-source__facts">
+      <li class="md-source__fact">v0.2.4</li>                             <!-- TODO: make dynamic -->
+    </ul>
+  </div>
+</a>