midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #151 from ZeusWPI/homepage

Browse source 
Homepage
This commit is contained in:
Eloïse Piret 2017-02-08 17:17:37 +01:00 committed by GitHub
commit 55eb4f23bd
6 changed files with 141 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
content/assets/scripts/gamification.coffee
View file

@ -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)

71
content/assets/stylesheets/includes/tiles.scss
View file

@ -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;
text-align: center;
line-height: 30px;
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;
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;
}

100
content/index.erb
View file

@ -7,51 +7,73 @@
<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="content">
<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>
<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">
<!--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>
<div id="gamification-coders" >
<!-- EMPTY -->
</div>
</div>
</div>
</div>
</div>
<div class="tile is-parent is-2">
<a class="tile box is-child imgcenter project-tile" href="/projects/#12urenloop">
<%= asset :img, '12urenloop.png' %>
</a>
</div>
<div class="tile is-parent is-2">
<a class="tile is-child imgcenter box hydra-tile" href="/projects/#hydra">
<%= 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 %>
<!--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-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>
</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' %>
</a>
</div>
<div class="tile is-parent is-2">
<a class="tile is-child imgcenter box hydra-tile" href="/projects/#hydra">
<%= asset :img, 'hydra-logo.svg' %>
</a>
</div>
-->

12
layouts/partials/_tile.erb
View file

@ -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>
<%= @article[:description] %>
<div class="description">
<%= @article[:description] %>
</div>
<div class="teaser">
<%= get_teaser(@article) %>
</div>
</div>
</a>

7
lib/helpers/tile_helper.rb Normal file
View file

@ -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

1
lib/helpers_.rb
View file

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