Merge pull request #194 from ZeusWPI/revamp-event-tile

Revamp event tile
This commit is contained in:
lorin 2017-10-11 22:50:45 +02:00 committed by GitHub
commit b19070cfd2
8 changed files with 59 additions and 70 deletions

View file

@ -6,13 +6,6 @@
padding:20px;
padding-top:0px;
.image-holder {
padding: 10px;
border: 1px solid lighten(gray, 30%);
width: 15%;
height: 15%;
}
.image {
vertical-align: baseline;
border: 1px solid gray;

View file

@ -16,6 +16,34 @@ a.box {
}
}
.event-tile {
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
filter: grayscale(30%);
.event-content {
color: #4a4a4a;
height: 100%;
width: 100%;
background: rgba($tertiary, 0.2);
display: flex;
align-items: center;
justify-content: center;
.event-text {
display: inline-block;
font-size: 1.1em;
}
.is-divider {
margin: 0.5em;
}
}
}
.centering {
display: flex;

View file

@ -13,8 +13,6 @@ $orange: $zeus-orange;
$blue: $zeus-blue;
$turquoise: #30D1B2;
$primary: $orange;
$family-sans-serif: 'Lato', sans-serif;
$link-visited: $orange;
@ -30,5 +28,9 @@ $cammie-controls-color: rgba(0, 0, 0, 0.60);
$event-padding: 10px;
$primary: $orange;
$secondary: $zeus-blue;
$tertiary: $box-colour;
// Default font size
// $size-normal: 15px;

View file

@ -3,6 +3,7 @@
@import "includes/variables";
@import "../../../node_modules/bulma/bulma";
@import "../../../node_modules/bulma-divider/divider";
.nav-right {
flex: none;

View file

@ -1,39 +0,0 @@
<div class="box event-preview">
<div class="image-holder">
<img src="<%= event[:image]%>" alt="" class="image" />
</div>
<div class="box info">
<div class="title">
<a href="<%= relative_path_to(event) %>">
<%= event[:title] %>
</a>
</div>
<div class="location">
<a href="#">
<%= event[:location] %>
</a>
</div>
<div class="description">
<%= event[:description] %>
</div>
<div class="time">
<%= event[:time].strftime '%A %d %B %Y %H:%M' %>
</div>
</div>
<% if @main_event %>
<div class="box main-event">
<p>
<%= main_event[:title] %>
</p>
<ul>
<% sub_events(main_event).each do |sub_event| %>
<li class="<%= "active" if sub_event[:title] == (event[:title])%>" >
<%= sub_event[:title] %>
</li>
<% end %>
</ul>
</div>
<% end %>
</div>

View file

@ -1,32 +1,30 @@
<% if @event[:banner] %>
<a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
<a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg highlighted"
style="background-image:url('<%= @event[:banner] %>');">
<% elsif @event[:color] %>
<a href="<%= @event.path %>" class="tile is-child box backgroundimg highlighted"
<a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg highlighted"
style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= @event[:color] %>;">
<% else %>
<a href="<%= @event.path %>" class="tile is-child box backgroundimg">
<a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg">
<% end %>
<div class="content">
<div class="columns events-tile">
<div class="column">
<h2>
<div class="content event-content">
<div class="event-text">
<h1 class="has-text-centered">
<%= @event[:title] %>
</h2>
</div>
<div class="column is-narrow">
<small>
<%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B %Y %H:%M') %>
<br>
<%= fa :'map-marker', fw: true %><%= @event[:location] %>
</small>
</div>
</div>
<div class="description">
</h1>
<div class="description has-text-centered">
<%= @event[:description] %>
</div>
<div class="teaser">
<%= get_teaser(@event) %>
<div class="is-divider"></div>
<div class="">
<%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %>
<br>
<%= fa :'map-marker', fw: true %><%= @event[:location] %>
</div>
</div>
</div>
</a>

5
package-lock.json generated
View file

@ -8,6 +8,11 @@
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.5.1.tgz",
"integrity": "sha1-2ygxyUr+cyJQx7ElJ6e3kqTcnvg="
},
"bulma-divider": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/bulma-divider/-/bulma-divider-0.0.1.tgz",
"integrity": "sha1-qcW1TwzgKg6FjTOPTlggN4dRKks="
}
}
}

View file

@ -7,6 +7,7 @@
"license": "MIT",
"repository": "https://github.com/ZeusWPI/zeus.ugent.be",
"dependencies": {
"bulma": "0.5.1"
"bulma": "0.5.1",
"bulma-divider": "~0.0.1"
}
}