Improvements on navigator

_includes/footer.html

@@ -1,15 +1,17 @@
 <footer class="footer dark_bg">
 
   <div class="container-fluid">
-
     <div class="row">
-
       <div class="col-md-7 col-md-offset-3">
         <div class="footer-social">
           <ul>
-            <li><a class="button hvr-sweep-to-top" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+            <li><a href="mailto:{{ site.email }}"><i class="fa fa-envelope-o"></i></a></li>
-            <li><a class="button hvr-sweep-to-top" href="{{ "/feed.xml" | prepend: site.baseurl }}">RSS</a></li>
+            <li><a href="{{ "/feed.xml" | prepend: site.baseurl }}"><i class="fa fa-rss-square"></i></a></li>
-            <li><a class="button hvr-sweep-to-top" href="{{site.facebook_link}}">Facebook</a></li>
+            <li><a href="{{site.facebook_link}}"><i class="fa fa-facebook-square"></i></a></li>
+          </ul>
+        </div>
+        <div class="footer-support">
+          <ul>
             <li><h4>Support from</h4></li>
             <li><a href="http://pankeculture.com" target="_blank"><img src="/assets/panke_logo.png"></img></a></li>
             <li><a href="http://pankeculture.com" target="_blank"><img src="/assets/troika_logo.png"></img></a></li>

_includes/head.html

@@ -10,6 +10,7 @@
 
   <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css"/>
   <link rel="stylesheet" type="text/css" href="/bower_components/vegas/dist/jquery.vegas.min.css"/>
+  <link rel="stylesheet" type="text/css" href="/bower_components/fontawesome/css/font-awesome.min.css"/>
   <link rel="stylesheet" href="{{ "/css/custom.css" | prepend: site.baseurl }}">
   <link rel="stylesheet" href="{{ "/css/hover.css" | prepend: site.baseurl }}">
   <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
@@ -26,7 +27,7 @@
 
   <script type="text/javascript">
 
-    var rnd=Math.floor(Math.random()*4);
+    var rnd=Math.floor(Math.random()*6);
 
     $(function() {
       $.vegas({
@@ -38,7 +39,7 @@
     });
 
     // $( document ).ready(function() {
-      $('.artist_media').centerImage('inside');
+      $('.artist-media').centerImage('inside');
     // });
 
   </script>

_includes/header.html

@@ -9,24 +9,15 @@
     </div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="">
+    <div>
       <ul class="nav navbar-nav navbar-right">
-        <li class="dropdown">
+        <li><a href="#" class="navigator-toggle"><i class="fa fa-caret-square-o-down"></i> Upcoming session & more</a></li>
-          <a href="#" class="navigator-toggle button hvr-sweep-to-top">More</a>
-          <!-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Jump to session<span class="caret"></span></a> -->
-          <ul class="dropdown-menu" role="menu">
-            {% for post in site.posts %}
-             {% assign pos = 39 | minus: post.number %}
-              <li><a data-scroll-nav="{{pos}}">#{{post.number}}: {{post.topics}}</a></li>
-            {% endfor %}
-          </ul>
-        </li>
         {% for page in site.pages %}
-        {% if page.title %}
+         {% if page.title %}
-        <li><a class="button hvr-sweep-to-top" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
+          <li><a class="header-btn" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
-        {% endif %}
+          {% endif %}
         {% endfor %}
-        <li><a href="#" data-scroll-nav="0" class="button hvr-sweep-to-top">TOP</a></li>
+        <li><a class="top-button" data-scroll-nav="0">TOP</a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
 
@@ -36,20 +27,40 @@
 
 <div class="container-fluid navigator">
  <div class="row">
-  <div class="col-md-6 col-md-offset-1">
+  <div class="col-md-7">
-    <h4>Browse by content</h4>
+    <h4><i class="fa fa-search"></i> Browse by topic</h4>
-
+    {% for post in site.posts %}
-     {% for post in site.posts %}
+      {% assign pos = 39 | minus: post.number %}
-       {% assign pos = 39 | minus: post.number %}
+      {% for topic in post.topics | split:"," %}
-       {% for topic in post.topics | split:"," %}
+        <a class="topic" data-scroll-nav="{{pos}}">{{topic}}</a>
-         <a class="button hvr-sweep-to-top" data-scroll-nav="{{pos}}">{{topic}}</a>
+      {% endfor %}
-       {% endfor %}
+    {% endfor %}
-     {% endfor %}
-
   </div>
   <div class="col-md-4">
-   <h4>Upcoming session</h4>
+   <h4><i class="fa fa-calendar"></i> Upcoming session</h4>
+    {% assign post = site.posts | first%}
+    <!-- <div class="container-fluid navigator"> -->
+     <h3>#{{post.number}}{{post.date_text}} ({{post.location}})</h3>
+     {% for topic in post.topics | split:"," %}
+       <a class="topic">{{topic}}</a>
+     {% endfor %}
+     {% for talk in post.talks %}
+      <div class="upcoming row">
 
+       <div class="upcoming-media">
+         {% if {{talk.media_artist_url}} %}
+           <img src={{talk.media_artist_url}}></img>
+         {% else %}
+           <img src="/assets/no_artist-media.png"></img>
+         {% endif %}
+       </div>
+
+       <div class="upcoming-detail">
+         <h4>{{talk.artist}} / {{talk.title}}</h4>
+       </div>
+
+      </div>
+     {% endfor %}
   </div>
  </div>
 </div>

_layouts/event.html

@@ -39,15 +39,15 @@ layout: default
 
           <div class="talk col-md-{{col_width}}">
 
-            <div class="artist_media">
+            <div class="artist-media">
               {% if {{talk.media_artist_url}} %}
-                <img class="artist_media" src={{talk.media_artist_url}}></img>
+                <img class="artist-media" src={{talk.media_artist_url}}></img>
               {% else %}
-                <img class="artist_media" src="/assets/no_artist_media.png"></img>
+                <img class="artist-media" src="/assets/no_artist-media.png"></img>
               {% endif %}
             </div>
 
-            <div class="talk_detail">
+            <div class="talk-detail">
               <h4>{{talk.artist}} / {{talk.title}}</h4>
               {% if talk.description %}
                 <p>{{talk.description}}</p>
@@ -57,7 +57,6 @@ layout: default
                 <p>{{talk.artist_bio}}</p>
               {% endif %}
               {% if talk.artist_website || talk.video_artist_url || talk.video_url %}
-                <h5>Links</h5>
                 {% if talk.artist_website %}
                   <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a>
                 {% endif %}

artists.html

@@ -17,8 +17,8 @@ permalink: /artists/
 
     {% capture counter %}{{ '0' }}{% endcapture %}
 
-    {% for event in site.posts %}
+    {% for post in site.posts %}
-      {% for talk in event.talks %}
+      {% for talk in post.talks %}
 
         {% if counter == '0' %}
           <div class="row">
@@ -26,18 +26,17 @@ permalink: /artists/
 
           <div class="dark_bg col-md-3">
 
-            <div class="artist_media">
+            <div class="artist-media">
               {% if {{talk.media_artist_url}} %}
-                <img class="artist_media" src={{talk.media_artist_url}}></img>
+                <img class="artist-media" src={{talk.media_artist_url}}></img>
               {% else %}
-                <img class="artist_media" src="/assets/no_artist_media.png"></img>
+                <img class="artist-media" src="/assets/no_artist-media.png"></img>
               {% endif %}
             </div>
 
-            <div class="talk_detail">
+            <div class="talk-detail">
-              <h4>{{talk.artist}}</h4>
+             <h4>{{talk.artist}}</h4>
-              <!-- <p>{{talk.artist_bio}}</p> -->
+             <a class="button hvr-sweep-to-top" href={{post.url}}>#{{post.number}}</a>                         
-              <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a>
             </div>
 
           </div>

bower.json

@@ -20,6 +20,7 @@
     "bootstrap": "~3.3.1",
     "vegas": "~1.3.5",
     "imagefill.js": "*",
-    "imagesloaded": "~3.1.8"
+    "imagesloaded": "~3.1.8",
+    "fontawesome": "~4.3.0"
   }
 }

css/custom.css

@@ -12,16 +12,18 @@ h3{
 }
 
 a{
-
+  color: #9775af;
 }
 
 a:hover{
   text-decoration: none;
-  color: #ff0000;
+  color: #9775af;
+  cursor: pointer;
 }
 
-.button{
+.top-button{
-
+ display:none;
+ float:right;
 }
 
 .navbar-header{
@@ -33,13 +35,13 @@ a:hover{
   float:right;
 }
 
-.navbar-options a{
+/*.navbar-options a{
   margin-left: 10px;
   color: #000;
   padding: 10px;
   background: #CCC;
   font-size: 18px;
-}
+}*/
 
 .navbar-brand img{
   height: 30px;
@@ -49,6 +51,16 @@ a:hover{
   color:#000;
 }
 
+.navbar-nav li a{
+ color:#000;
+ border-bottom: 4px solid #f8f8f8;
+}
+
+.navbar-nav li a:hover{
+  color:#9775af;
+  border-bottom: 4px solid #9775af;
+}
+
 .navigator{
  padding:20px;
  background: #fff;
@@ -57,15 +69,39 @@ a:hover{
  display:none;
 }
 
+.navigator a{
+ color: #000;
+}
+
+.navigator a:hover{
+ color: #9775af;
+}
+
 .navigator li{
  float: left;
  margin: 4px;
 }
 
+.navigator h3{
+ color:#9775af;
+}
+
 .navigator h4{
  color:#000;
+ padding-left:0px;
 }
 
+.upcoming{
+ padding: 10px;
+}
+
+.upcoming-media img{
+ height: 80px;
+ float: left;
+ margin-right:10px;
+}
+
+
 .site-header{
   background:#fff;
 }
@@ -113,12 +149,12 @@ a:hover{
   background: #000;
 }
 
-.artist_media{
+.artist-media{
   background: #000;
   text-align:center;
 }
 
-.artist_media img{
+.artist-media img{
   width:100%;
 }
 
@@ -141,11 +177,6 @@ a:hover{
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
 }
 
-.upcoming{
-  background: #ccc;
-  display: normal;
-}
-
 .talk{
   padding:20px 5px;
 }
@@ -153,30 +184,29 @@ a:hover{
 .talk :hover{
 }
 
-.talk_detail{
+.talk-detail{
 
 }
 
-.talk_detail h3{
+.talk-detail h3{
   font-size: 24px;
 }
 
-.talk_detail h4{
+.talk-detail h4{
   font-size: 20px;
   background: #fff;
   color: #000;
   padding: 4px;
 }
 
-.talk_detail h5{
+.talk-detail h5{
   font-size: 18px;
   background: #fff;
   color: #000;
   padding: 4px;
 }
 
-.talk_detail a{
+.talk-detail a{
-  color: #337AB7;
   margin: 0 auto;
   padding: 2px;
   float: center;
@@ -267,6 +297,19 @@ a:hover{
   margin: 10px;
 }
 
-.footer-social li img{
+.footer-support{
+  float: right;
+}
+
+.footer li {
+ font-size: 32px;
+}
+
+.footer li a:hover{
+ color: #000;
+ font-size: 32px;
+}
+
+.footer li img{
   height:40px;
 }

index.html

@@ -3,93 +3,80 @@ layout: default
 ---
 <div class="content container-fluid">
 
-      {% for post in site.posts %}
+ {% for post in site.posts %}
 
-       {% assign pos = 39 | minus: post.number %}
+  {% if forloop.first != true %}
 
-        <div data-scroll-index="{{pos}}" class="row">
+   <!-- TODO parametrize this, no hardcoded numbers  -->
+   {% assign pos = 39 | minus: post.number %}
 
-          <div class="event-date col-md-2 col-md-offset-1">
+    <div data-scroll-index="{{pos}}" class="row">
 
-            <a class="button hvr-sweep-to-top" href={{post.url}}>
+      <div class="event-date col-md-2 col-md-offset-1">
-              <h3>#{{post.number}}</h3>
-              <h4>{{post.date_text}}</h4>
-            </a>
 
-            {% if post.topics %}
+        <a class="button hvr-sweep-to-top" href={{post.url}}>
-              <p><ul>
+          <h3>#{{post.number}}</h3>
-                {% assign tags = (post.topics | split:",") %}
+          <h4>{{post.date_text}}</h4>
-                {% for tag in tags %}
+        </a>
-                  <li>{{tag}}</li>
-                {% endfor%}
-              </ul></p>
-            {% endif %}
 
-            {% if post.location %}
+        {% if post.topics %}
-              <p><a class="highlight button hvr-sweep-to-top" href={{post.location_website}} target="_blank">{{post.location}}</a></p>
+          <p><ul>
-            {% endif %}
+            {% assign tags = (post.topics | split:",") %}
+            {% for tag in tags %}
+              <li>{{tag}}</li>
+            {% endfor%}
+          </ul></p>
+        {% endif %}
+
+        {% if post.location %}
+          <p><a class="highlight button hvr-sweep-to-top" href={{post.location_website}} target="_blank">{{post.location}}</a></p>
+        {% endif %}
+
+      </div>
+
+      <div class="event event-{{post.number}} dark_bg col-md-7">
+
+        {% capture talks_number %}{{ post.talks | size }}{% endcapture %}
+        {% capture col_width %}{{ 12 | divided_by:talks_number }}{% endcapture %}
+
+        {% for talk in post.talks %}
+
+          <div class="talk col-md-{{col_width}}">
+
+            <div class="artist-media">
+              {% if {{talk.media_artist_url}} %}
+                <img src={{talk.media_artist_url}}></img>
+              {% else %}
+                <img src="/assets/no_artist-media.png"></img>
+              {% endif %}
+            </div>
+
+            <div class="talk-detail">
+              <h4>{{talk.artist}} / {{talk.title}}</h4>
+              <p>{{talk.description}}</p>
+              {% if talk.artist_website %}
+                <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a>
+              {% endif %}
+              {% if talk.video_artist_url %}
+                <br>
+                <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank">Artist's Video</a>
+              {% endif %}
+              {% if talk.video_url %}
+                <br>
+                <a class="button hvr-sweep-to-top" href={{talk.video_url}} target="_blank">Talk's Video</a>
+              {% endif %}
+            </div>
 
           </div>
 
-          <div class="event event-{{post.number}} dark_bg col-md-7">
+        {% endfor %}
 
-            {% capture talks_number %}{{ post.talks | size }}{% endcapture %}
+      </div>
-            {% capture col_width %}{{ 12 | divided_by:talks_number }}{% endcapture %}
-
-            {% for talk in post.talks %}
-
-              <div class="talk col-md-{{col_width}}">
-
-                <div class="artist_media">
-                  {% if {{talk.media_artist_url}} %}
-                    <img src={{talk.media_artist_url}}></img>
-                  {% else %}
-                    <img src="/assets/no_artist_media.png"></img>
-                  {% endif %}
-                </div>
-
-                <div class="talk_detail">
-                  <h4>{{talk.artist}} / {{talk.title}}</h4>
-                  <p>{{talk.description}}</p>
-                  {% if talk.artist_website %}
-                    <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a>
-                  {% endif %}
-                  {% if talk.video_artist_url %}
-                    <br>
-                    <a class="button hvr-sweep-to-top" href={{talk.video_artist_url}} target="_blank">Artist's Video</a>
-                  {% endif %}
-                  {% if talk.video_url %}
-                    <br>
-                    <a class="button hvr-sweep-to-top" href={{talk.video_url}} target="_blank">Talk's Video</a>
-                  {% endif %}
-                </div>
-
-              </div>
-
-            {% endfor %}
-
-          </div>
-
-        </div>
-
-      {% endfor %}
-
-      <!-- <div class="row">
-
-        <div class="nav_bottom dark_bg col-md-3 col-md-offset-3">
-          {% if paginator.previous_page_path %}
-            <a href="{{ paginator.previous_page_path }}" class="previous">Previous </a>
-          {% endif %}
-            <span class="page_number">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
-          {% if paginator.next_page %}
-            <a href="{{ paginator.next_page_path }}" class="next"> Next</a>
-          {% endif %}
-        </div>
-
-      </div> -->
 
     </div>
 
-  </div>
+   {% endif %}
+
+  {% endfor %}
 
 </div>

js/custom.js

@@ -1,4 +1,6 @@
 var scrolling = false;
+var navigatorOpen = false;
+var topButtonVisible = true;
 
 $(document).ready(function(){
 
@@ -8,21 +10,72 @@ $(document).ready(function(){
 
 
  $(".navigator-toggle").click(function() {
-  if (!scrolling){
+  if (navigatorOpen){
+   closeTopMenu();
+  }else{
+   openTopMenu();
+  }
+  navigatorOpen = !navigatorOpen;
+ });
+
+ $(".topic").click(function() {
+  closeTopMenu();
+ });
+
+ function openTopMenu(){
+  if (!scrolling && !navigatorOpen){
    scrolling = true;
    $(".navigator").slideDown( "slow", function() {
     scrolling = false;
+    navigatorOpen = true;
    });
   }
- });
+ }
 
- $(".navbar").mouseover(function() {
+ function closeTopMenu(){
-  if (!scrolling){
+  if (!scrolling && navigatorOpen){
    scrolling = true;
    $('.navigator').slideUp( "slow", function() {
     scrolling = false;
+    navigatorOpen = false;
    });
   }
+ }
+
+ function showTopButton(){
+  console.log('showTopButton');
+  if (!topButtonVisible){
+   $('.top-button').show( "slow", function() {
+    topButtonVisible = true;
+   });
+  }
+ }
+
+ function hideTopButton(){
+  console.log('hideTopButton');
+  if (topButtonVisible){
+   $('.top-button').hide( "slow", function() {
+    topButtonVisible = false;
+   });
+  }
+ }
+
+ var timeout = null;
+ var navbarHeight = $('.navbar').height();
+
+ $(window).scroll(function () {
+  if (!timeout) {
+      timeout = setTimeout(function () {
+          clearTimeout(timeout);
+          timeout = null;
+          if ($(window).scrollTop() >= navbarHeight) {
+           closeTopMenu();
+           showTopButton();
+          }else{
+           hideTopButton();
+          }
+      }, 250);
+  }
  });
 
 });