Skip to content

Commit

Permalink
Events and announcements UI update (#183)
Browse files Browse the repository at this point in the history 
Make application header with announcements shorter. Move events into a
3-column carousel on desktop and 1-column carousel on mobile and populate
both with 9 latest events. Make announcement title size smaller on mobile.
  • Loading branch information
@pavlerohalj
pavlerohalj authored Dec 3, 2019
1 parent a2d2756 commit 1b12644
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 50 deletions.
44 changes: 37 additions & 7 deletions app/assets/stylesheets/home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

.primary-slideshow {
z-index: 1;
height: 600px;
height: 400px;
background: #2c3e50;

.gradient {
Expand All @@ -27,23 +27,32 @@
.title, .subtitle {
line-height: 1.5;
}

@media only screen and (max-width: 600px) {
.title, .subtitle {
font-size: 2rem;
line-height: 1.25;
}
}
}
}
}



.slick-dots li button::before,
.slick-dots li.slick-active button::before {
color: #fff;
font-size: 1rem;
width: 1rem;
height: 1rem;
font-size: 0.75rem;
width: 0.75rem;
height: 0.75rem;
line-height: 1;
}

.slick-dots li,
.slick-dots li button {
width: 1rem;
height: 1rem;
width: 0.75rem;
height: 0.75rem;
padding: 0;
top: auto;
bottom: 1.5rem;
Expand Down Expand Up @@ -82,8 +91,29 @@
* Events section
*/

#events-slideshow-desktop,
#events-slideshow-mobile {

.slick-list {
margin-bottom: 3rem;
}

.slick-dots {
position: relative;

li button::before,
li.slick-active button::before {
color: #2c3e50;
}
}
}

.events-slide {
display: block !important;
}

.event .event-info {
border-bottom-width: 2px;
border-bottom-width: 2.5px;
border-bottom-style: solid;
padding-bottom: 1rem;
}
Expand Down
2 changes: 1 addition & 1 deletion app/controllers/static_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ def delete_image
def index
@announcements = Announcement.priority_order.all
time = Time.parse(Time.now.in_time_zone("Pacific Time (US & Canada)").strftime('%Y-%m-%d %H:%M:%S')).to_s(:db)
@events = Event.where("start >= ?", time).where(:status => :approved).order(:start).take(3)
@events = Event.where("start >= ?", time).where(:status => :approved).order(:start).take(9)
@news = news
end

Expand Down
18 changes: 18 additions & 0 deletions app/helpers/static_helper.rb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
module StaticHelper

# Method used to set a class based on event's college affiliation in events slideshow on homepage
def bg_color_class(item)
case item.college_affiliation.try(:to_sym)
when :pomona
"event-PO"
when :claremont_mckenna
"event-CM"
when :harvey_mudd
"event-HM"
when :scripps
"event-SC"
when :pitzer
"event-PZ"
else
"event-PO" # catchall because Frank/Frary/Oldenborg to not symbolize to Pomona
end
end

# Profile picture image helper for senator/staff profiles
def avatar_photo (person)
if person.image.attached?
Expand Down
109 changes: 67 additions & 42 deletions app/views/static/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% content_for :header do %>

<div class="slideshow-container primary-slideshow">
<%= render 'components/slideshow', :id => "main-slideshow", :slideshow_options => {
<%= render 'components/slideshow', :id => "main-slideshow", :classes => "", :slideshow_options => {
:autoplay => true,
:arrows => false,
:dots => true,
Expand All @@ -13,10 +13,10 @@
<div class="cover-image" style="background-image: url(<%= url_for(announcement.background_image) %>);">
<div class="gradient">
<div class="announcement-info has-shadow">
<h3 class="title is-1 has-text-white"><%= announcement.title %></h3>
<% if not announcement.caption.blank? %>
<p class="subtitle has-text-white"><%= announcement.caption %></p>
<% end %>
<h2 class="title is-2 has-text-white"><%= announcement.title %></h2>
<%# if not announcement.caption.blank? %>
<!-- <p class="subtitle has-text-white"><%#= announcement.caption %></p> -->
<%# end %>
<% if not announcement.details_url.blank? %>
<a class="button is-medium is-outlined is-info" href="<%= announcement.details_url %>" tabindex="0">More
Details</a>
Expand All @@ -31,47 +31,72 @@

<div class="margin-bottom-3 home-heading">
<h3 class="title is-3">Upcoming Events</h3>
<%= link_to "Event Calendar", events_path, {:class => "button is-outlined is-info"} %>
<a class="button is-outlined is-info" href="/events">Event Calendar</a>
</div>

<% if @events.length > 0 %>
<div class="columns events margin-bottom-4">
<% @events.each do |event| %>
<% campus_background_color_class =
case event.college_affiliation.try(:to_sym)
when :pomona
"event-PO"
when :claremont_mckenna
"event-CM"
when :harvey_mudd
"event-HM"
when :scripps
"event-SC"
when :pitzer
"event-PZ"
else
"event-PO" # catchall because Frank/Frary/Oldenborg to not symbolize to Pomona
end
%>
<div class="column is-4 event">
<div class="event-info <%= campus_background_color_class %>">
<p class="event-date-time"><%= event.start.strftime("%B %e") %>, <%= event.start.strftime("%l:%M%P") %>
-<%= event.end.strftime("%l:%M%P") %></p>
<p class="event-location"><%= event.location %><br></p>
<!-- Events slideshow for desktop screens -->
<div class="is-hidden-mobile">
<%= render 'components/slideshow', :id => "events-slideshow-desktop", :slideshow_options => {
:autoplay => true,
:arrows => false,
:dots => true,
:useTransform => true,
:easing => 'swing',
:fade => true
} do %>
<% @events.each_slice(3) do |list| %>
<div class="container events-slide">
<div class="columns">
<% list.each do |item| %>
<% campus_background_color_class = bg_color_class(item)
%>
<div class="column is-4 event">
<div class="event-info <%= campus_background_color_class %>">
<p class="event-date-time"><%= item.start.strftime("%B %e") %>
, <%= item.start.strftime("%l:%M%P") %>
-<%= item.end.strftime("%l:%M%P") %></p>
<p class="event-location"><%= item.location %><br></p>
</div>
<h4 class="title is-4">
<a href="<%= url_for(item) %>"><%= item.name %></a></h4>
</div>
<% end %>
</div>
<h4 class="title is-4">
<a href="<%= url_for(event) %>"><%= event.name %></a>
</h4>
</div>
<% end %>
</div>
<% else %>
<div class="columns margin-bottom-3">
<div class="column">
<p>No upcoming events. Would you like to <%= link_to "submit one?", new_event_path %></p>
</div>
</div>
<% end %>
<% end %>
</div>

<!-- Events slideshow for mobile screens -->
<div class="is-hidden-tablet is-hidden-desktop">
<%= render 'components/slideshow', :id => "events-slideshow-mobile", :slideshow_options => {
:autoplay => true,
:arrows => false,
:dots => true,
:useTransform => true,
:easing => 'swing',
:fade => true
} do %>
<% @events.each do |item| %>
<div class="container">
<div class="columns events-slide">
<% campus_background_color_class = bg_color_class(item)
%>
<div class="column event">
<div class="event-info <%= campus_background_color_class %>">
<p class="event-date-time"><%= item.start.strftime("%B %e") %>
, <%= item.start.strftime("%l:%M%P") %>
-<%= item.end.strftime("%l:%M%P") %></p>
<p class="event-location"><%= item.location %><br></p>
</div>
<h4 class="title is-4">
<a href="<%= url_for(item) %>"><%= item.name %></a></h4>
</div>
</div>
</div>
<% end %>
<% end %>
</div>

<div class="margin-bottom-3 home-heading">
<h3 class="title is-3">The Student Life</h3>
Expand All @@ -94,7 +119,7 @@
<% else %>
<div class="columns margin-bottom-3">
<div class="column">
<p>No TSL articles found.</p>
<p>There are no articles available.</p>
</div>
</div>
<% end %>

0 comments on commit 1b12644

Please sign in to comment.