Merge branch 'feature/greedy-nav-long-title-fix' into develop

_includes/head.html

@@ -16,4 +16,19 @@
 <!-- For all browsers -->
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | absolute_url }}">
 
+<!--[if lte IE 9]>
+  <style>
+    /* old IE unsupported flexbox fixes */
+    .greedy-nav .site-title {
+      padding-right: 3em;
+    }
+    .greedy-nav button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+    }
+  </style>
+<![endif]-->
+
 <meta http-equiv="cleartype" content="on">

_includes/masthead.html

@@ -2,9 +2,8 @@
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
-        <button><div class="navicon"></div></button>
+        <a class="site-title" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
         <ul class="visible-links">
-          <li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ '/' | absolute_url }}">{{ site.title }}</a></li>
           {% for link in site.data.navigation.main %}
             {% if link.url contains 'http' %}
               {% assign domain = '' %}
@@ -14,6 +13,7 @@
             <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
           {% endfor %}
         </ul>
+        <button><div class="navicon"></div></button>
         <ul class="hidden-links hidden"></ul>
       </nav>
     </div>

_sass/_masthead.scss

@@ -14,6 +14,10 @@
   &__inner-wrap {
     @include container;
     @include clearfix;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+     justify-content: space-between;
     padding: 1em 1em 1em;
     font-family: $sans-serif-narrow;
 
@@ -31,7 +35,27 @@
   }
 }
 
+.site-title {
+  display: -webkit-box;
+  display: flex;
+  padding: 0.5rem 0;
+  align-self: stretch;
+  -webkit-box-align: center;
+        align-items: center;
+  font-weight: bold;
+  z-index: 20;
+}
+
 .masthead__menu {
+  width: 100%;
+
+  .site-nav {
+    margin-left: 0;
+
+    @include breakpoint($small) {
+      float: right;
+    }
+  }
 
   ul {
     margin: 0;

_sass/_navigation.scss

@@ -175,7 +175,10 @@
 
 .greedy-nav {
   position: relative;
-  min-width: 250px;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+        align-items: center;
   background: $background-color;
 
   a {
@@ -188,34 +191,35 @@
     &:hover {
       color: $masthead-link-color-hover;
     }
+
+    &.site-title {
+      margin-left: 0;
+    }
   }
 
   button {
-    position: absolute;
-    height: 100%;
-    right: 0;
     padding: 0 0.5rem;
+    align-self: stretch;
     border: 0;
     outline: none;
-    background-color: $primary-color;
     color: #fff;
+    background-color: $primary-color;
     cursor: pointer;
   }
 
   .visible-links {
-    display: table;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: end;
+     justify-content: flex-end;
+    -webkit-box-flex: 1;
+                flex: 1;
+    padding-right: 2rem;
+    overflow: hidden;
 
     li {
-      display: table-cell;
+      -webkit-box-flex: 0;
-      vertical-align: middle;
+                  flex: none;
-
-      &:first-child {
-        font-weight: bold;
-
-        a {
-          margin-left: 0;
-        }
-      }
 
       &:last-child {
         a {
@@ -238,14 +242,13 @@
         -webkit-transition: $global-transition;
         transition: $global-transition;
         -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
-            -ms-transform: scaleX(0) translate3d(0, 0 , 0);
                 transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
       }
 
       &:hover:before {
         -webkit-transform: scaleX(1);
-            -ms-transform: scaleX(1);
+                -ms-transform: scaleX(1);
-                transform: scaleX(1); /* reveal*/
+            transform: scaleX(1); /* reveal*/
       }
     }
   }
@@ -261,6 +264,10 @@
     background: #fff;
     box-shadow: 0 0 10px rgba(#000, 0.25);
 
+    &.hidden {
+      display: none;
+    }
+
     a {
       margin: 0;
       padding: 10px 20px;
@@ -348,11 +355,14 @@
         height: 0.125em;
         line-height: 1;
         background-color: $gray;
+        -webkit-transition: 0.2s ease-out;
         transition: 0.2s ease-out;
       }
 
       &:after {
-        transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+                -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
       }
 
       &:hover {
@@ -378,13 +388,17 @@
       }
     }
 
-    // on hover show expand
+    /* on hover show expand*/
     label:hover:after {
-      transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+              -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
     }
 
     input:checked + label:hover:after {
-      transform: rotate(0);
+      -webkit-transform: rotate(0);
+              -ms-transform: rotate(0);
+          transform: rotate(0);
     }
 
     ul {
@@ -438,8 +452,8 @@
     -webkit-transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
     -webkit-transform: translate(0, 10%);
-        -ms-transform: translate(0, 10%);
+            -ms-transform: translate(0, 10%);
-            transform: translate(0, 10%);
+        transform: translate(0, 10%);
   }
 }
 
@@ -447,13 +461,13 @@
   .nav__list input:checked ~ .nav__items {
     -webkit-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
-    max-height: 9999px; // exaggerate max-height to accommodate tall lists
+    max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
     overflow: visible;
     opacity: 1;
     margin-top: 1em;
     -webkit-transform: translate(0, 0);
-        -ms-transform: translate(0, 0);
+            -ms-transform: translate(0, 0);
-            transform: translate(0, 0);
+        transform: translate(0, 0);
   }
 }
 

_sass/_page.scss

@@ -8,8 +8,10 @@
   margin-top: 2em;
   padding-left: 1em;
   padding-right: 1em;
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.35s;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.35s;
+          animation-delay: 0.35s;
 
   @include breakpoint($x-large) {
     max-width: $x-large;
@@ -111,8 +113,10 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.25s;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.25s;
+          animation-delay: 0.25s;
 
   &--overlay {
     position: relative;
@@ -122,8 +126,10 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    animation: intro 0.3s both;
+    -webkit-animation: intro 0.3s both;
-    animation-delay: 0.25s;
+            animation: intro 0.3s both;
+    -webkit-animation-delay: 0.25s;
+            animation-delay: 0.25s;
 
     a {
       color: #fff;
@@ -297,6 +303,7 @@
 .page__comments-form {
   padding: 1em;
   background: $lighter-gray;
+  -webkit-transition: $global-transition;
   transition: $global-transition;
 
   &.disabled {

_sass/_syntax.scss

@@ -46,7 +46,7 @@ figure.highlight {
     padding: 5px;
     border: 0;
 
-    // line numbers
+    /* line numbers*/
     &.gutter {
       padding-right: 1em;
       color: $light-gray;

_sass/_variables.scss

@@ -123,6 +123,6 @@ $right-sidebar-width-wide   : 400px !default;
 
 $border-radius              : 4px !default;
 $box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
-$navicon-width              : 28px !default;
+$navicon-width              : 1.5rem !default;
-$navicon-height             : 4px !default;
+$navicon-height             : 0.25rem !default;
 $global-transition          : all 0.2s ease-in-out !default;

assets/js/plugins/jquery.greedy-navigation.js

@@ -1,72 +1,74 @@
 /*
-* Greedy Navigation
+GreedyNav.js - https://github.com/lukejacksonn/GreedyNav
-*
+Licensed under the MIT license - http://opensource.org/licenses/MIT
-* http://codepen.io/lukejacksonn/pen/PwmwWV
+Copyright (c) 2015 Luke Jackson
-*
 */
 
-var $nav = $('#site-nav');
+$(document).ready(function(){
-var $btn = $('#site-nav button');
-var $vlinks = $('#site-nav .visible-links');
-var $hlinks = $('#site-nav .hidden-links');
 
-var breaks = [];
+  var $btn = $('nav.greedy-nav button');
+  var $vlinks = $('nav.greedy-nav .visible-links');
+  var $hlinks = $('nav.greedy-nav .hidden-links');
 
-function updateNav() {
+  var numOfItems = 0;
+  var totalSpace = 0;
+  var closingTime = 1000;
+  var breakWidths = [];
 
-  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
+  // Get initial state
+  $vlinks.children().outerWidth(function(i, w) {
+    totalSpace += w;
+    numOfItems += 1;
+    breakWidths.push(totalSpace);
+  });
 
-  // The visible list is overflowing the nav
+  var availableSpace, numOfVisibleItems, requiredSpace, timer;
-  if($vlinks.width() > availableSpace) {
 
-    // Record the width of the list
+  function check() {
-    breaks.push($vlinks.width());
 
-    // Move item to the hidden list
+    // Get instant state
-    $vlinks.children().last().prependTo($hlinks);
+    availableSpace = $vlinks.width() - 10;
+    numOfVisibleItems = $vlinks.children().length;
+    requiredSpace = breakWidths[numOfVisibleItems - 1];
 
-    // Show the dropdown btn
+    // There is not enough space
-    if($btn.hasClass('hidden')) {
+    if (requiredSpace > availableSpace) {
-      $btn.removeClass('hidden');
+      $vlinks.children().last().prependTo($hlinks);
-    }
+      numOfVisibleItems -= 1;
-
+      check();
-  // The visible list is not overflowing
+      // There is more than enough space
-  } else {
+    } else if (availableSpace > breakWidths[numOfVisibleItems]) {
-
-    // There is space for another item in the nav
-    if(availableSpace > breaks[breaks.length-1]) {
-
-      // Move the item to the visible list
       $hlinks.children().first().appendTo($vlinks);
-      breaks.pop();
+      numOfVisibleItems += 1;
+      check();
     }
-
+    // Update the button accordingly
-    // Hide the dropdown btn if hidden list is empty
+    $btn.attr("count", numOfItems - numOfVisibleItems);
-    if(breaks.length < 1) {
+    if (numOfVisibleItems === numOfItems) {
       $btn.addClass('hidden');
+    } else $btn.removeClass('hidden');
+  }
+
+  // Window listeners
+  $(window).resize(function() {
+    check();
+  });
+
+  $btn.on('click', function() {
+    $hlinks.toggleClass('hidden');
+    clearTimeout(timer);
+  });
+
+  $hlinks.on('mouseleave', function() {
+    // Mouse has left, start the timer
+    timer = setTimeout(function() {
       $hlinks.addClass('hidden');
-    }
+    }, closingTime);
-  }
+  }).on('mouseenter', function() {
+    // Mouse is back, cancel the timer
+    clearTimeout(timer);
+  })
 
-  // Keep counter updated
+  check();
-  $btn.attr("count", breaks.length);
 
-  // Recur if the visible list is still overflowing the nav
-  if($vlinks.width() > availableSpace) {
-    updateNav();
-  }
-
-}
-
-// Window listeners
-
-$(window).resize(function() {
-  updateNav();
 });
-
-$btn.on('click', function() {
-  $hlinks.toggleClass('hidden');
-  $(this).toggleClass('close');
-});
-
-updateNav();

test/_config.yml

@@ -9,7 +9,7 @@ theme                    : "minimal-mistakes-jekyll"
 
 # Site Settings
 locale                   : "en"
-title                    : "dev_MM"
+title                    : "Minimal Mistakes Development Test Site"
 title_separator          : "-"
 name                     : "Your Name"
 description              : "Minimal Mistakes theme test."