Merge pull request #194 from ZeusWPI/revamp-event-tile
Revamp event tile
This commit is contained in:
lorin
GitHub
commit
b19070cfd2
8 changed files with 59 additions and 70 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@import "includes/variables";
|
||||
|
||||
@import "../../../node_modules/bulma/bulma";
|
||||
@import "../../../node_modules/bulma-divider/divider";
|
||||
|
||||
.nav-right {
|
||||
flex: none;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<%= @event[:title] %>
|
||||
</h2>
|
||||
<div class="content event-content">
|
||||
<div class="event-text">
|
||||
<h1 class="has-text-centered">
|
||||
<%= @event[:title] %>
|
||||
</h1>
|
||||
|
||||
<div class="description has-text-centered">
|
||||
<%= @event[:description] %>
|
||||
</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 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 class="description">
|
||||
<%= @event[:description] %>
|
||||
</div>
|
||||
<div class="teaser">
|
||||
<%= get_teaser(@event) %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -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="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue