Flagrant/sponsors bug fixes (#300)

codyjamesbrooks · web-flow · commit 72262db9510c · 2022-07-13T14:29:25.000-06:00
* CSS/Bug fixes for sponsors

While working on recording some Loom demo videos I thought I would go ahead and fix small things that I noticed

Additional notes
- fixed up some CSS class duplication
- adding padding, and max-width to sponsors containers on the sponsors page
- properly style the page title to the sponsors page
- allow tags on programs page to wrap rather than overflow their container
- order sponsors on index
- resize sponsor primary logo
- add sponsor star the the data that is sent back from the js time slot form
- properly scope the query to pull an websites events sponsors on the sponsors show page
- require sponsors have a name, tier, url, description, and lastly a primary_logo
- remove 'other_title' from the sponsor model
- modify sponsors index to indicate if the sponsor has a footer_logo or a banner_ad present

* write test on new features/bugs
diff --git a/app/assets/stylesheets/themes/default/application.scss b/app/assets/stylesheets/themes/default/application.scss
@@ -79,6 +79,15 @@ h3.section-title {
   text-align: center;
 }
 
+.page-title {
+  padding-top: 100px;
+  text-align: center;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 38px;
+  margin-bottom: 35px
+}
+
 @media screen and (max-width: 900px) and (orientation: portrait),
   (max-width: 823px) and (orientation: landscape) {
   header + #content {
diff --git a/app/assets/stylesheets/themes/default/program.scss b/app/assets/stylesheets/themes/default/program.scss
@@ -1,75 +1,3 @@
-.program-page-wrapper {
-  h3.page-title {
-    padding-top: 100px;
-    text-align: center;
-    font-size: 32px;
-    font-weight: 700;
-    line-height: 38px;
-    margin-bottom: 15px
-  }
-
-  .bg-track-1 { background-color: var(--bg-track-1); }
-  .bg-track-2 { background-color: var(--bg-track-2); }
-  .bg-track-3 { background-color: var(--bg-track-3); }
-  .bg-track-4 { background-color: var(--bg-track-4); }
-  .bg-track-5 { background-color: var(--bg-track-5); }
-  .bg-track-6 { background-color: var(--bg-track-6); }
-  .bg-track-7 { background-color: var(--bg-track-7); }
-  .bg-track-8 { background-color: var(--bg-track-8); }
-  .bg-track-9 { background-color: var(--bg-track-9); }
-  .bg-track-10 { background-color: var(--bg-track-10); }
-  .bg-track-11 { background-color: var(--bg-track-11); }
-  .bg-track-12 { background-color: var(--bg-track-12); }
-
-  .session-format-bg-1 { background-color: var(--session-format-tag-1);}
-  .session-format-bg-2 { background-color: var(--session-format-tag-2);}
-  .session-format-bg-3 { background-color: var(--session-format-tag-3);}
-  .session-format-bg-4 { background-color: var(--session-format-tag-4);}
-  .session-format-bg-5 { background-color: var(--session-format-tag-5);}
-}
-
-.session-format-tag {
-  padding: 8px 10px 8px 50px;
-  border: 1px solid var(--divider-light);
-  border-radius: 100px;
-  font-size: 12px;
-  margin-right: 8px;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 26px;
-    transform: translate(-50%, -50%);
-    height: 12px;
-    width: 24px;
-    border-radius: 150px 150px 0 0;
-  }
-  &.session-format-tag-1::before { background-color: var(--session-format-tag-1);}
-  &.session-format-tag-2::before { background-color: var(--session-format-tag-2);}
-  &.session-format-tag-3::before { background-color: var(--session-format-tag-3);}
-  &.session-format-tag-4::before { background-color: var(--session-format-tag-4);}
-  &.session-format-tag-5::before { background-color: var(--session-format-tag-5);}
-}
-
-.track-tag {
-  font-size: 12px;
-  padding: 7px 10px;
-  border-radius: 20px;
-  border: 1px solid var(--divider-light);
-
-  .track-dot{
-    height: 16px;
-    width: 16px;
-    display: inline-block;
-    position: relative;
-    top: 3px;
-    border-radius: 50%;
-    margin-right: 4px;
-  }
-}
-
 .program-sessions-wrapper {
   display: flex;
   margin: auto;
@@ -100,8 +28,6 @@
   }
 }
 
-
-
 .session-card {
   display: flex;
   position: relative;
@@ -116,8 +42,19 @@
   .seesion-title-abstract-container {
     height: 13.75rem;
   }
+
   .session-speaker-track-container {
-    height: 5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    margin-bottom: .75rem;
+  }
+
+  .tag-wrapper {
+    .session-format-tag,
+    .track-tag {
+      margin-bottom: .25rem;
+    }
   }
 
   .session-title {
diff --git a/app/assets/stylesheets/themes/default/shared.scss b/app/assets/stylesheets/themes/default/shared.scss
@@ -18,6 +18,9 @@
 .session-format-bg-5 { background-color: var(--session-format-tag-5); }
 
 .session-format-tag {
+  display: inline-block;
+  width: min-content;
+  white-space: nowrap;
   padding: 8px 10px 8px 50px;
   border: 1px solid var(--divider-light);
   border-radius: 100px;
diff --git a/app/assets/stylesheets/themes/default/sponsors.scss b/app/assets/stylesheets/themes/default/sponsors.scss
@@ -1,17 +1,9 @@
-.sponsors-page-wrapper {
-  h3 {
-    font-weight: 700;
-    font-size: 24px;
-    text-align: center;
-  }
-}
-
 .sponsor-tier-wrapper {
   margin-bottom: 20px;
 
   .tier-title {
-    margin-bottom: 10px;
-    font-size: 16px;
+    margin-bottom: 15px;
+    font-size: 18px;
     font-weight: 600;
     text-transform: capitalize;
     text-align: center;
@@ -22,6 +14,9 @@
 
   .sponsors-wrapper {
     column-count: 3;
+    margin: auto;
+    padding: 0 20px;
+    max-width: 1600px;
 
     .sponsor-wrapper {
       position: relative;
@@ -79,7 +74,6 @@
   column-count: 3;
   margin-bottom: 30px;
 
-
   .sponsor-footer-card {
     width: 100%;
     position: relative;
diff --git a/app/controllers/sponsors_controller.rb b/app/controllers/sponsors_controller.rb
@@ -4,7 +4,7 @@ class SponsorsController < ApplicationController
   after_action :set_cache_headers, only: :show
 
   def show
-    @sponsors_by_tier = Sponsor.published.order_by_tier.group_by(&:tier)
+    @sponsors_by_tier = current_website.event.sponsors.published.order_by_tier.group_by(&:tier)
     render layout: "themes/#{current_website.theme}"
   end
 end
diff --git a/app/controllers/staff/sponsors_controller.rb b/app/controllers/staff/sponsors_controller.rb
@@ -2,7 +2,7 @@ class Staff::SponsorsController < Staff::ApplicationController
   before_action :enable_website_subnav
 
   def index
-    @sponsors = current_event.sponsors
+    @sponsors = current_event.sponsors.order_by_tier
   end
 
   def new
diff --git a/app/decorators/staff/time_slot_decorator.rb b/app/decorators/staff/time_slot_decorator.rb
@@ -27,7 +27,7 @@ def row_data_time_sortable(buttons: false)
 
   def row_data(buttons: false)
     row = [object.conference_day, start_time, end_time, linked_title,
-           display_presenter, object.room_name, display_track_name]
+           display_presenter, object.room_name, display_sponsor_star, display_track_name]
 
     row << action_links if buttons
     row
diff --git a/app/models/sponsor.rb b/app/models/sponsor.rb
@@ -8,7 +8,7 @@ class Sponsor < ApplicationRecord
   has_one_attached :footer_logo
   has_one_attached :banner_ad
 
-  validates :primary_logo, presence: true
+  validates_presence_of :primary_logo, :name, :tier, :url, :description
 
   TIERS = ['platinum', 'gold', 'silver', 'bronze', 'other', 'supporter']
 
diff --git a/app/views/program_sessions/_program_session.html.haml b/app/views/program_sessions/_program_session.html.haml
@@ -10,12 +10,13 @@
     .session-speaker-details
       = program_session.speaker_names
 
-    %span.session-format-tag{ class: "#{current_website.session_format_tag_class(program_session.session_format)}" }
-      = current_website.session_format_name(program_session.session_format)
+    .tag-wrapper
+      %span.session-format-tag{ class: "#{current_website.session_format_tag_class(program_session.session_format)}" }
+        = current_website.session_format_name(program_session.session_format)
 
-    -if program_session.track
-      %span.track-tag
-        %span.track-dot{ class: "#{current_website.track_background(program_session.track)}" }
-        = program_session.track_name
+      -if program_session.track
+        %span.track-tag
+          %span.track-dot{ class: "#{current_website.track_background(program_session.track)}" }
+          = program_session.track_name
 
   .session-accent{ class: program_session.track ? current_website.track_background(program_session.track) : current_website.session_format_background_class(program_session.session_format) }
diff --git a/app/views/sponsors/show.html.haml b/app/views/sponsors/show.html.haml
@@ -1,6 +1,6 @@
 - content_for(:title) { "Sponsors" }
 %div.sponsors-page-wrapper
-  %h3
+  %h3.page-title
     Sponsors
 
   #sponsors
diff --git a/app/views/staff/sponsors/_form.html.haml b/app/views/staff/sponsors/_form.html.haml
@@ -2,14 +2,13 @@
   .row
     %fieldset.col-md-6
       = f.input :name, maxlength: 60, input_html: { class: 'watched js-maxlength-alert', rows: 1 }
-      = f.input :other_title
       = f.input :tier, collection: Sponsor::TIERS
       = f.input :url
       = f.input :published, as: :boolean, wrapper: :vertical_radio_and_checkboxes
       = f.input :description
 
       - if f.object.primary_logo.attached?
-        = image_tag f.object.primary_logo
+        = resize_image_tag(f.object.primary_logo, width: 100)
       = f.input :primary_logo, class: "form-contorl-file"
 
       - if f.object.footer_logo.attached?
diff --git a/app/views/staff/sponsors/_sponsor.html.haml b/app/views/staff/sponsors/_sponsor.html.haml
@@ -5,5 +5,10 @@
   %td
     %a{ href: sponsor.url, target: "_blank" }
       = sponsor.url
-  %td= sponsor.other_title
+  %td
+    - if sponsor.footer_logo.attached?
+      %span.glyphicon.glyphicon-ok
+  %td
+    - if sponsor.banner_ad.attached?
+      %span.glyphicon.glyphicon-ok
   %td= link_to "Edit Sponsor", edit_event_staff_sponsor_path(current_event, sponsor)
diff --git a/app/views/staff/sponsors/index.html.haml b/app/views/staff/sponsors/index.html.haml
@@ -16,7 +16,8 @@
         %th Tier
         %th Published
         %th Url
-        %th Alt Title
+        %th Footer Logo?
+        %th Banner Ad?
         %th Edit
         %th.hidden
 
diff --git a/db/migrate/20220606213730_remove_other_title_from_sponsor.rb b/db/migrate/20220606213730_remove_other_title_from_sponsor.rb
@@ -0,0 +1,5 @@
+class RemoveOtherTitleFromSponsor < ActiveRecord::Migration[6.1]
+  def change
+    remove_column :sponsors, :other_title, :string
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2022_05_23_185412) do
+ActiveRecord::Schema.define(version: 2022_06_06_213730) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -232,7 +232,6 @@
     t.string "tier"
     t.boolean "published"
     t.string "url"
-    t.string "other_title"
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
     t.text "description"
diff --git a/spec/factories/sponsors.rb b/spec/factories/sponsors.rb
@@ -1,6 +1,7 @@
 FactoryBot.define do
   factory :sponsor do
     event { Event.first || create(:event) }
+    url { "https://www.fakeurl.com/" }
     name { Faker::Company.name }
     published { true }
     tier { 'platinum' }
@@ -16,7 +17,7 @@
 
     trait :with_offer do
       offer_headline { "A really great offer" }
-      offer_url { "http://fakeoffer.com/" }
+      offer_url { "https://www.fakeoffer.com/" }
       offer_text { Faker::Hipster.paragraph }
     end
   end
diff --git a/spec/features/staff/sponsor_spec.rb b/spec/features/staff/sponsor_spec.rb
@@ -7,19 +7,23 @@
   context 'An admin organizer' do
     before { login_as(organizer) }
 
-    it 'can create an event sponsor with images' do
+    it 'can create an event sponsor with images', js: true do
       visit event_staff_sponsors_path(event)
       expect(page).to have_link 'New Sponsor'
 
       click_on 'New Sponsor'
 
       fill_in 'sponsor_name', with: 'Fake Sponsor'
+      fill_in 'sponsor_url', with: 'https://www.fakeurl.com'
+      fill_in 'sponsor_description', with: "Brief Description"
       select Sponsor::TIERS.first, from: "sponsor_tier"
+
       attach_file('sponsor_primary_logo', Rails.root.join('spec/fixtures/files/ruby1.png'))
       attach_file('sponsor_footer_logo', Rails.root.join('spec/fixtures/files/ruby2.jpeg'))
       attach_file('sponsor_banner_ad', Rails.root.join('spec/fixtures/files/ruby3.png'))
 
       click_on 'Save'
+
       expect(page).to have_content('Fake Sponsor')
       expect(page).to have_content(Sponsor::TIERS.first)
 
@@ -47,11 +51,16 @@
       sponsor = create(:sponsor, event: event)
       visit edit_event_staff_sponsor_path(event, sponsor)
 
-      visit edit_event_staff_sponsor_path(event, sponsor)
-
       accept_confirm { click_on 'Delete Sponsor' }
       expect(page).to have_content('Sponsor was successfully removed.')
       expect(event.sponsors.count).to eq(0)
     end
+
+    it 'sponsons are listed in tier order on the index page' do
+      Sponsor::TIERS.each { |tier| create(:sponsor, tier: tier) }
+      visit event_staff_sponsors_path(event)
+
+      expect(page).to have_content(/platinum.*gold.*silver.*bronze.*other.*supporter/)
+    end
   end
 end
diff --git a/spec/features/website/schedule_spec.rb b/spec/features/website/schedule_spec.rb
@@ -22,6 +22,24 @@
     expect(page).to have_content('Updated Title')
   end
 
+  scenario "the schedule page display sponsor information for time slots with sponsors", js: true do
+    sponsor = create(:sponsor)
+    time_slot = create(:time_slot, event: event)
+
+    visit schedule_path(event)
+
+    expect(page).to_not have_content('Sponsored')
+    click_on(time_slot.title)
+    expect(page).to_not have_content(sponsor.description)
+
+    time_slot.update(sponsor: sponsor)
+
+    visit schedule_path(event)
+    expect(page).to have_content('Sponsored')
+    click_on(time_slot.title)
+    expect(page).to have_content(sponsor.description)
+  end
+
   scenario "the event website schedule page displays time slots that have program sessions", js: true do
     time_slot = create(:with_workshop_session, event: event)
 
diff --git a/spec/features/website/sponsor_spec.rb b/spec/features/website/sponsor_spec.rb
@@ -60,5 +60,16 @@
       expect(page).to_not have_content(sponsor.offer_text)
       expect(page).to_not have_content(sponsor.offer_headline)
     end
+
+    it "Sponsor page doesn't display sponsors from a different event", js: true do
+      previous_event = create(:event, name: 'My Older Event')
+      previous_sponsor = create(:sponsor, event: previous_event, name: "Previous Sponsor", tier: "Gold")
+
+      sponsor = create(:sponsor)
+      visit sponsors_path(event)
+
+      expect(page).to have_content(sponsor.description)
+      expect(page).to_not have_content(previous_sponsor.description)
+    end
   end
 end
