Merge pull request #151 from ZeusWPI/homepage

Homepage

content/assets/scripts/gamification.coffee

@@ -1,8 +1,20 @@
 $ ->
   $.getJSON 'https://zeus.ugent.be/game/top4/show.json', (data) ->
-    str = "<ol>"
+    str = "<table>"
     for x in data
-      str += "<li><a href=\"#{x.github_url}\">#{x.github_name}</a> (#{x.score} Z$)</li>"
-    str += "</ol>"
+      str += """
+        <tr>
+          <td class="picture">
+            <img class="coder-picture" src="#{x.avatar_url}">
+          </td>
+          <td class="name">
+            <a class="coder-name" href="#{x.github_url}">#{x.github_name}</a>
+          </td>
+          <td class="score">
+            #{x.score}
+          </td>
+        </tr>
+      """
+    str += "</table>"
 
     $('#gamification-coders').html(str)

content/assets/stylesheets/includes/tiles.scss

@@ -1,3 +1,5 @@
+$top_coder_size: 80px;
+
 a.box {
   &:hover {
     box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $blue
@@ -39,35 +41,46 @@ a.box {
 .icon a{
   color:$tile-orange;
 }
+
 #gamification-coders {
   display: flex;
   justify-content: center;
-  ol{
-    list-style-type: decimal-leading-zero;
-    counter-reset:li;
-    > li{
-      float:left;
-      padding:5px;
-      margin:20px;
-      margin-bottom:3px;
-      margin-top:3px;
-      display:inline;
-      &:before{
-        content:counter(li); /* Use the counter as content */
-        counter-increment:li;
-        color:$tile-orange;
-        font: bold 18pt helvetica, arial, sans-serif;
-        background-color:whitesmoke;
-        height:30px;
-        width:30px;
-        display:inline-block;
-        margin-right:10px;
-        border-radius:50px;
+
+  table {
+    position: relative;
+
+    tr:first-child {
+      height: $top_coder_size;
+      width: $top_coder_size;
+      .picture img {
+        height: $top_coder_size;
+        width: $top_coder_size !important;
+        box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,0.2);
+      }
+    }
+    td {
+      vertical-align: middle;
       text-align: center;
-        line-height: 30px;
+      padding: 0;
+      &.picture {
+        width: $top_coder_size !important;
+      }
+      &.score {
+        text-align: right;
+        padding-right: 10px;
       }
     }
   }
+
+  .picture img {
+    height: 40px;
+    width: 40px !important;
+    vertical-align: middle;
+    margin: 10px 0;
+    border-radius: 50px;
+    z-index: 1;
+  }
+
 }
 
 #blokmap-tile {
@@ -100,3 +113,15 @@ a.box {
     }
   }
 }
+
+.teaser{
+  font-style: italic;
+}
+
+.description{
+  font-weight: bold;
+}
+
+.backgroundimg{
+  background-position: center;
+}

content/index.erb

@@ -7,29 +7,65 @@
 <div id="homepage">
   <div class="tile is-vertical is-ancestor">
     <%= if studytime? then render '/tiles/blokmap.*'end %>
-    <div class="tile is-parent is-12">
-      <div class="tile is-child box highlighted">
+      <div class="tile">
+        <!--top coders -->
+        <div class="tile is-parent is-4">
+          <div class="tile is-child box ">
             <div class="content">
-          <h1 class="has-text-centered"><a href="https://zeus.ugent.be/game">Top Zeus WPI coders this week</a></h1>
+              <h1 class="has-text-centered">
+                <a href="https://zeus.ugent.be/game">
+                  Top Zeus WPI coders this week
+                </a>
+              </h1>
               <div id="gamification-coders" >
                 <!-- EMPTY -->
               </div>
             </div>
           </div>
         </div>
+        <!--next event -->
+        <div class="tile is-parent is-4"  >
+          <%= render '/partials/_tile.*',
+            article: upcoming_events[0] || all_events[-1],
+            small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end%>
+        </div>
+
+        <!-- latest blogpost -->
+        <div class="tile is-4 is-parent">
+          <%= render '/partials/_tile.*',
+            article: sorted_articles.first,
+            small_text: "Latest blogpost",
+            htmlclass:"highlighted"%>
+        </div>
+      </div>
       <div class="tile">
-      <div class="tile is-parent is-4">
-        <%= render '/partials/_tile.*', article: upcoming_events[0] || all_events[-1], small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end %>
-      </div>
-      <div class="tile is-parent is-4">
-        <div class="tile is-child box centering">
-          <div class="content has-text-centered">
-            <div id="quote" >
-              <!-- INTENTIONALLY LEFT BLANK -->
+        <div class="tile is-vertical">
+          <% all_events.reverse[1..3].each do |event| %>
+            <div class="tile is-parent ">
+              <%= render '/partials/_tile.*',
+                article: event,
+                small_text: upcoming_events.include?(event) ? "Upcoming event" : "Past event",
+                htmlclass:"highlighted" %>
           </div>
+        <%end%>
+        </div>
+        <div class="tile is-vertical">
+        <% sorted_articles[1..3].each do |post| %>
+          <div class="tile is-parent ">
+            <%= render '/partials/_tile.*',
+              article: post,
+              small_text: "Blogpost"%>
+          </div>
+        <%end%>
+
         </div>
       </div>
   </div>
+</div>
+<%= asset :js, :gamification %>
+<%= asset :js, :quote %>
+<!--
+
         <div class="tile is-parent is-2">
           <a class="tile box is-child imgcenter project-tile" href="/projects/#12urenloop">
             <%= asset :img, '12urenloop.png' %>
@@ -40,18 +76,4 @@
             <%= asset :img, 'hydra-logo.svg' %>
           </a>
         </div>
-    </div>
-    <div class="tile">
-      <div class="tile is-4 is-parent">
-        <%= render '/partials/_tile.*', article: sorted_articles.first, small_text: "Latest blogpost",htmlclass:"highlighted"%>
-      </div>
-      <div class="tile is-vertical">
-        <div class="tile is-parent">
-          <%= render '/partials/_tile.*', article: upcoming_events[1] || all_events[-2], small_text: if upcoming_events[1] then "Upcoming event" else "Past event" end %>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<%= asset :js, :gamification %>
-<%= asset :js, :quote %>
+-->

layouts/partials/_tile.erb

@@ -1,5 +1,6 @@
-<a href="<%= relative_path_to(@article) %>" class="tile is-child box <%= @htmlclass %>">
-  <div class="content">
+<a href="<%= @article.path %>" class="tile is-child box backgroundimg <%= @htmlclass %>"
+  style="background-image:url('<%= @article[:banner] %>');">
+  <div class="content" >
     <div class="columns">
       <div class="column">
         <h2>
@@ -12,6 +13,11 @@
         </small>
       </div>
     </div>
+    <div class="description">
       <%= @article[:description] %>
     </div>
+    <div class="teaser">
+      <%= get_teaser(@article) %>
+    </div>
+  </div>
 </a>

lib/helpers/tile_helper.rb

@@ -0,0 +1,7 @@
+module TileHelper
+  def get_teaser(post)
+    # excerptize is part of the TextHelper, given by nanoc
+    # https://nanoc.ws/doc/reference/helpers/#text
+    excerptize(post.reps[:text].compiled_content, length: 300)
+  end
+end

lib/helpers_.rb

@@ -17,3 +17,4 @@ include SearchHelper
 include BlogHelper
 include PreprocessHelper
 include TimeHelper
+include TileHelper