From 1b126443a3e8e74400b5ea97c0e82e03514b46e3 Mon Sep 17 00:00:00 2001 From: Pavle Rohalj Date: Tue, 3 Dec 2019 13:18:34 -0800 Subject: [PATCH] Events and announcements UI update (#183) 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. --- app/assets/stylesheets/home.scss | 44 +++++++++-- app/controllers/static_controller.rb | 2 +- app/helpers/static_helper.rb | 18 +++++ app/views/static/index.html.erb | 109 ++++++++++++++++----------- 4 files changed, 123 insertions(+), 50 deletions(-) diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss index 2181bde2..ba773c58 100644 --- a/app/assets/stylesheets/home.scss +++ b/app/assets/stylesheets/home.scss @@ -8,7 +8,7 @@ .primary-slideshow { z-index: 1; - height: 600px; + height: 400px; background: #2c3e50; .gradient { @@ -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; @@ -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; } diff --git a/app/controllers/static_controller.rb b/app/controllers/static_controller.rb index f83fe100..711c3365 100644 --- a/app/controllers/static_controller.rb +++ b/app/controllers/static_controller.rb @@ -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 diff --git a/app/helpers/static_helper.rb b/app/helpers/static_helper.rb index d9149441..45b72a82 100644 --- a/app/helpers/static_helper.rb +++ b/app/helpers/static_helper.rb @@ -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? diff --git a/app/views/static/index.html.erb b/app/views/static/index.html.erb index a7219870..7be37b7b 100644 --- a/app/views/static/index.html.erb +++ b/app/views/static/index.html.erb @@ -1,7 +1,7 @@ <% content_for :header do %>
- <%= render 'components/slideshow', :id => "main-slideshow", :slideshow_options => { + <%= render 'components/slideshow', :id => "main-slideshow", :classes => "", :slideshow_options => { :autoplay => true, :arrows => false, :dots => true, @@ -13,10 +13,10 @@
-

<%= announcement.title %>

- <% if not announcement.caption.blank? %> -

<%= announcement.caption %>

- <% end %> +

<%= announcement.title %>

+ <%# if not announcement.caption.blank? %> + + <%# end %> <% if not announcement.details_url.blank? %> More Details @@ -31,47 +31,72 @@

Upcoming Events

- <%= link_to "Event Calendar", events_path, {:class => "button is-outlined is-info"} %> + Event Calendar
-<% if @events.length > 0 %> -
- <% @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 - %> -
-
-

<%= event.start.strftime("%B %e") %>, <%= event.start.strftime("%l:%M%P") %> - -<%= event.end.strftime("%l:%M%P") %>

-

<%= event.location %>

+ +
+ <%= 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| %> +
+
+ <% list.each do |item| %> + <% campus_background_color_class = bg_color_class(item) + %> +
+
+

<%= item.start.strftime("%B %e") %> + , <%= item.start.strftime("%l:%M%P") %> + -<%= item.end.strftime("%l:%M%P") %>

+

<%= item.location %>

+
+

+ <%= item.name %>

+
+ <% end %>
-

- <%= event.name %> -

<% end %> -
-<% else %> -
-
-

No upcoming events. Would you like to <%= link_to "submit one?", new_event_path %>

-
-
-<% end %> + <% end %> +
+ + +
+ <%= 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| %> +
+
+ <% campus_background_color_class = bg_color_class(item) + %> +
+
+

<%= item.start.strftime("%B %e") %> + , <%= item.start.strftime("%l:%M%P") %> + -<%= item.end.strftime("%l:%M%P") %>

+

<%= item.location %>

+
+

+ <%= item.name %>

+
+
+
+ <% end %> + <% end %> +

The Student Life

@@ -94,7 +119,7 @@ <% else %>
-

No TSL articles found.

+

There are no articles available.

<% end %>