From 84f7ed1a37248ce236ad12b1d13f343de32a5b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elo=C3=AFse=20Piret?= <Eloise.Piret@ugent.be>
Date: Tue, 7 Feb 2017 23:30:11 +0100
Subject: [PATCH] layout upper tiles

---
 .../stylesheets/includes/tiles.erb.scss       | 105 ++++++++++++++++++
 .../assets/stylesheets/includes/tiles.scss    |   8 ++
 content/assets/stylesheets/main.scss          |   2 +-
 content/index.erb                             |   8 +-
 layouts/partials/_tile.erb                    |  10 +-
 lib/helpers/tile_helper.rb                    |  14 +++
 lib/helpers_.rb                               |   1 +
 7 files changed, 142 insertions(+), 6 deletions(-)
 create mode 100644 content/assets/stylesheets/includes/tiles.erb.scss
 create mode 100644 lib/helpers/tile_helper.rb

diff --git a/content/assets/stylesheets/includes/tiles.erb.scss b/content/assets/stylesheets/includes/tiles.erb.scss
new file mode 100644
index 0000000..0b53100
--- /dev/null
+++ b/content/assets/stylesheets/includes/tiles.erb.scss
@@ -0,0 +1,105 @@
+a.box {
+  &:hover {
+    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $blue
+  }
+}
+
+#homepage {
+  .box {
+    border-radius: 0;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.centering {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.highlighted{
+  background: $tile-orange;
+  .content {
+    color: white;
+
+    h1, h2 {
+      color: inherit;
+    }
+    a, a:visited {
+      color:inherit;
+    }
+  }
+}
+#quote{
+  font-style: italic;
+}
+
+.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;
+        text-align: center;
+        line-height: 30px;
+      }
+    }
+  }
+}
+
+#blokmap-tile {
+  position: relative;
+
+  height: 200px;
+  //background-image: url("https://i.imgur.com/PMaIG7X.jpg");
+  background-image: url("https://cldup.com/-FmSDFbd07.jpg");
+
+  background-position: center;
+
+  .overlay {
+    left: 0;
+    top: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .content {
+    position: relative;
+
+    h1, h2 {
+      color: white;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+  }
+}
+
+.eventtile{
+}
diff --git a/content/assets/stylesheets/includes/tiles.scss b/content/assets/stylesheets/includes/tiles.scss
index a62ba5f..20251d2 100644
--- a/content/assets/stylesheets/includes/tiles.scss
+++ b/content/assets/stylesheets/includes/tiles.scss
@@ -100,3 +100,11 @@ a.box {
     }
   }
 }
+
+.teaser{
+  font-style: italic;
+}
+
+.description{
+  font-weight: bold;
+}
diff --git a/content/assets/stylesheets/main.scss b/content/assets/stylesheets/main.scss
index 2096b9a..e394794 100644
--- a/content/assets/stylesheets/main.scss
+++ b/content/assets/stylesheets/main.scss
@@ -24,7 +24,7 @@ body.site {
 
 @import "includes/cammie";
 @import "includes/events";
-@import "includes/tiles";
+@import "includes/tileS";
 @import "includes/blogpost";
 @import "includes/general";
 @import "includes/eventpage";
diff --git a/content/index.erb b/content/index.erb
index 5d7fcf0..8c795b4 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -20,10 +20,10 @@
           </div>
         </div>
         <!--next event -->
-        <div class="tile is-parent is-4">
+        <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 %>
+            small_text: if upcoming_events[0] then "Upcoming event" else "Past event" end%>
         </div>
 
         <!-- latest blogpost -->
@@ -58,7 +58,9 @@
       <div class="tile">
         <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 %>
+            <%= 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>
diff --git a/layouts/partials/_tile.erb b/layouts/partials/_tile.erb
index 9808a7b..63135af 100644
--- a/layouts/partials/_tile.erb
+++ b/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="<%= relative_path_to(@article) %>" class="tile is-child box <%= @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>
diff --git a/lib/helpers/tile_helper.rb b/lib/helpers/tile_helper.rb
new file mode 100644
index 0000000..29636d4
--- /dev/null
+++ b/lib/helpers/tile_helper.rb
@@ -0,0 +1,14 @@
+
+module TileHelper
+  def get_teaser(post)
+    content = strip_html(post.compiled_content)
+    return truncate(content, 300)
+  end
+
+  def truncate(s, max=70, elided = ' ...')
+    s.match( /(.{1,#{max}})(?:\s|\z)/ )[1].tap do |res|
+      res << elided unless res.length == s.length
+    end
+  end
+
+end
diff --git a/lib/helpers_.rb b/lib/helpers_.rb
index 6b6ae4e..c1c965b 100644
--- a/lib/helpers_.rb
+++ b/lib/helpers_.rb
@@ -17,3 +17,4 @@ include SearchHelper
 include BlogHelper
 include PreprocessHelper
 include TimeHelper
+include TileHelper