Html improvements:

- Use partial instead of inline
- Correct background colour if event has none
- Don't use <i> tag, use <em>
- Use UTF8 ™ character
This commit is contained in:
Niko Strijbol 2020-01-13 14:31:30 +01:00
parent d1ab7c73d1
commit 647d942412
No known key found for this signature in database
GPG key ID: 1A8AEBABD9012251
2 changed files with 18 additions and 45 deletions

View file

@ -57,33 +57,22 @@
<div class="content has-text-centered">
<h1>Sorry.</h1>
<h2>No events planned yet this year.</h2>
<h4 class="has-text-grey"><i>Soon TM.<i></h4>
<h4 class="has-text-grey"><em>Soon™.</em></h4>
</div>
<% end %>
</div>
<% unless soon_events().empty? %>
<% unless soon_events.empty? %>
<div class="column is-3 is-narrow">
<div class="menu">
<div class="content">
<h1>
Soon TM.
Soon
</h1>
</div>
<% soon_events().each do |event| %>
<div class="tile box highlighted"
<% if event[:color] %>
style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= event[:color] %>;"
<% else %>
style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:'light-grey';"
<% end %>
>
<div class="content event-content has-text-centered">
<h3 style="color: white;"><%= event[:title] %></h3>
<p><%= event[:description] %></p>
</div>
</div>
<% end %>
<% soon_events.each do |event| %>
<%= render '/partials/_soon_tile.*', event: event %>
<% end %>
</div>
</div>
<% end %>

View file

@ -1,33 +1,17 @@
<% if @event[:banner] %>
<a href="<%= @event.path %>" class="tile event-tile is-child box backgroundimg highlighted"
style="background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0, 0, 0, 0.65)), url('<%= @event[:banner] %>');">
<% elsif @event[:color] %>
<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 event-tile is-child box backgroundimg">
<% end %>
<div class="tile box highlighted"
<% if event[:color] %>
style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color:<%= event[:color] %>;"
<% else %>
style="background-image: linear-gradient(to top right,rgba(255,255,255,0),rgba(0,0,0,.60)); background-color: lightgrey;"
<% end %>
>
<div class="content event-content">
<% if nil && @event[:image] %>
<% if @event[:image] %>
<img class="event-tile-image" src="<%= @event[:image] %>" alt="">
<% end %>
<div class="event-text">
<h1 class="has-text-centered">
<%= @event[:title] %>
</h1>
<div class="description has-text-centered">
<%= @event[:description] %>
</div>
<div class="is-divider"></div>
<div class="event-time-loc">
<%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %>
<br>
<%= fa :'map-marker', fw: true %><%= @event[:location] %>
</div>
<div class="has-text-centered">
<h3><%= @event[:title] %></h3>
<p><%= @event[:description] %></p>
</div>
</div>
</a>
</div>