[v1.6 beta] pager display title instead of tooltips , improve nav & s…

…tyle, fastClick global

_includes/footer.html

@@ -72,7 +72,7 @@
                 <p class="copyright text-muted">
                     Copyright &copy; {{ site.title }} {{ site.time | date: '%Y' }}
                     <br>
-                    Theme by <a href="http://huangxuan.me">Hux</a> |
+                    Theme © <a href="http://huangxuan.me">Hux</a> |
                     <iframe
                         style="margin-left: 2px; margin-bottom:-5px;"
                         frameborder="0" scrolling="0" width="91px" height="20px"
@@ -127,8 +127,11 @@
 <!--fastClick.js -->
 <script>
     async("http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
-        var $nav = document.querySelector("nav");
-        if($nav) FastClick.attach($nav);
+        // var $nav = document.querySelector("nav");
+        // if($nav) FastClick.attach($nav);
+
+        // global FastClick!!
+        FastClick.attach(document.body);    
     })
 </script>
 

_includes/nav.html

@@ -66,23 +66,18 @@
         }
     })
 
-    /**
-     * Stop 'touchstart' from $collapse propagating to document 
-     */
-    $collapse.addEventListener('touchstart', function(e){
-        e.stopPropagation();
-    })
-
     /**
      * Since Fastclick is used to delegate 'touchstart' globally
      * to hack 300ms delay in iOS by performing a fake 'click',
      * Using 'e.stopPropagation' to stop 'touchstart' event from 
-     * $toggle will break global delegation.
+     * $toggle/$collapse will break global delegation.
      * 
      * Instead, we use a 'e.target' filter to prevent handler
      * added to document close HuxNav.  
+     *
+     * Also, we use 'click' instead of 'touchstart' as compromise
      */
-    document.addEventListener('touchstart', function(e){
+    document.addEventListener('click', function(e){
         if(e.target == $toggle) return;
         if(e.target.className == 'icon-bar') return;
         __HuxNav__.close();

_layouts/page.html

@@ -22,8 +22,8 @@ <h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1
 	<div class="row">
         {% if site.sidebar == false %}
 <!-- NO SIDEBAR -->
-    <!-- Post Container -->
-            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 post-container">
+    <!-- PostList Container -->
+            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 postlist-container">
                 {{ content }}
             </div>
     <!-- Sidebar Container -->
@@ -63,13 +63,13 @@ <h5>FRIENDS</h5>
         {% else %}
 
 <!-- USE SIDEBAR -->
-    <!-- Post Container -->
+    <!-- PostList Container -->
     		<div class="
                 col-lg-8 col-lg-offset-1
                 col-md-8 col-md-offset-1
                 col-sm-12
                 col-xs-12
-                post-container
+                postlist-container
             ">
     			{{ content }}
     		</div>

_layouts/post.html

@@ -80,12 +80,18 @@ <h2 class="subheading">{{ page.subtitle }}</h2>
                 <ul class="pager">
                     {% if page.previous.url %}
                     <li class="previous">
-                        <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
+                        <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">
+                        Previous<br>
+                        <span>{{page.previous.title}}</span>
+                        </a>
                     </li>
                     {% endif %}
                     {% if page.next.url %}
                     <li class="next">
-                        <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
+                        <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">
+                        Next<br>
+                        <span>{{page.next.title}}</span>
+                        </a>
                     </li>
                     {% endif %}
                 </ul>

css/hux-blog.css

@@ -144,6 +144,9 @@ pre code {
   white-space: pre;
   word-wrap: normal;
 }
+.postlist-container {
+  margin-bottom: 15px;
+}
 .post-container a {
   color: #337ab7;
 }
@@ -210,6 +213,23 @@ pre code {
   line-height: 2;
   margin-top: 20px;
 }
+.post-container .pager li {
+  width: 48%;
+}
+.post-container .pager li.next {
+  float: right;
+}
+.post-container .pager li.previous {
+  float: left;
+}
+.post-container .pager li > a {
+  width: 100%;
+}
+.post-container .pager li > a > span {
+  color: #808080;
+  font-weight: normal;
+  letter-spacing: 0.5px;
+}
 @media only screen and (max-width: 767px) {
   /**
 	 * Layout
@@ -709,6 +729,10 @@ form .row:first-child .floating-label-form-group {
   background-color: #0085a1;
   border: 1px solid #0085a1;
 }
+.pager li > a:hover > span,
+.pager li > a:focus > span {
+  color: white;
+}
 .pager .disabled > a,
 .pager .disabled > a:hover,
 .pager .disabled > a:focus,
@@ -928,6 +952,13 @@ img::-moz-selection {
 .comment #ds-thread #ds-reset .ds-post-button {
   border-bottom: 1px solid #ccc;
 }
+.comment #ds-thread #ds-reset .ds-post-button {
+  background: white;
+  box-shadow: none;
+}
+.comment #ds-thread #ds-reset .ds-post-button:hover {
+  background: #eeeeee;
+}
 #ds-smilies-tooltip ul.ds-smilies-tabs li a {
   background: white !important;
 }

js/hux-blog.js

@@ -5,9 +5,10 @@
  */
 
 // Tooltip Init
-$(function() {
-    $("[data-toggle='tooltip']").tooltip();
-});
+// Unuse by Hux since V1.6: Titles now display by default so there is no need for tooltip
+// $(function() {
+//     $("[data-toggle='tooltip']").tooltip();
+// });
 
 
 // make all images responsive

less/hux-blog.less

@@ -111,6 +111,10 @@ pre code{
 	word-wrap: normal;	// no-wrap
 }
 
+// In the list of posts
+.postlist-container{
+	margin-bottom: 15px;
+}
 
 // In the post.
 .post-container{
@@ -172,6 +176,20 @@ pre code{
 			margin-top: 20px;
 		}
 	}
+	// V1.6 Hux display title by default.
+	.pager li{
+		width: 48%;
+		&.next{ float: right};
+		&.previous{ float: left};
+		> a {
+			width: 100%;
+			> span{
+				color: @gray;
+				font-weight: normal;
+				letter-spacing: 0.5px;
+			}
+		}
+	}
 }
 
 
@@ -660,7 +678,6 @@ form .row:first-child .floating-label-form-group {
 // Pager Styling
 
 .pager {
-
 	margin: 20px 0 0 !important;
 	padding:0px !important;
 
@@ -689,6 +706,11 @@ form .row:first-child .floating-label-form-group {
 			color: white;
 			background-color: @brand-primary;
 			border: 1px solid @brand-primary;
+
+			// V1.6 display title
+			> span{
+				color: white;
+			}
 		}
 	}
 
@@ -931,6 +953,14 @@ img::-moz-selection {
 			.ds-post-button{
 				border-bottom: 1px solid #ccc;
 			}
+			//v1.6 flatten button
+			.ds-post-button{
+				background: white;
+				box-shadow: none;
+				&:hover{
+					background: @gray-light;
+				}
+			}
 		}
 	}
 }