More elegant event tile

This commit is contained in:
Wout Schellaert 2017-10-11 22:31:19 +02:00
parent b08d63f711
commit a6ddcf846e
6 changed files with 59 additions and 24 deletions

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,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 sis-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>
</h1>
<div class="description has-text-centered">
<%= @event[:description] %>
</div>
<div class="column is-narrow">
<small>
<div class="is-divider"></div>
<div class="">
<%= 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">
<%= @event[:description] %>
</div>
<div class="teaser">
<%= get_teaser(@event) %>
</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"
}
}