Splash view for banner component

app/assets/stylesheets/osem.css

@@ -92,22 +92,27 @@ body {
     padding-bottom: 20px;
 }
 
-#venue-banner-disp{
+.banner-disp{
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  background-size: cover;
  -webkit-background-size:cover;
 }
-#venue-banner-disp.with-background{
+.banner-disp.with-location-background{
     min-height: 500px;
 }
-
+.banner-disp.with-splash-banner{
-#venue-banner-disp li{
+    min-height: 700px;
+}
+.location-links li{
   display: inline-block;
   margin-right: 2em;
 }
-
+.banner-text{
+    padding-top: 10%;
+    color: #fff;
+}
 .pad{
     padding-top: 35px;
     padding-bottom: 35px;

app/views/conference/_location.html.haml

@@ -3,7 +3,7 @@
     %a{ href: '#location' } Location
 
 
-%div#venue-banner-disp{ style: ("background-image: url(#{@conference.venue.photo})" unless @conference.venue.photo.blank?), class:('with-background' unless @conference.venue.photo.blank?) }
+%div.banner-disp{ style: ("background-image: url(#{@conference.venue.photo})" unless @conference.venue.photo.blank?), class:('with-location-background' unless @conference.venue.photo.blank?) }
   %div.container.text-center
     .div.row.col-md-12
       - unless @conference.venue.name.blank?
@@ -15,7 +15,7 @@
       - unless @conference.venue.description.blank?
         %p
           %strong #{ @conference.venue.description }
-      %ul
+      %ul.location-links
         - unless @conference.venue.address.blank?
           %li
             %b

app/views/conference/show.html.haml

@@ -1,7 +1,19 @@
 = content_for :brand do
   = link_to @conference.title, conference_url(@conference.short_title), class: 'navbar-brand'
 = content_for :splash do
+  - if @conference.include_banner_in_splash?
+    %section{ id: 'splash-banner' }
+    %div.banner-disp{ style: ("background-image: url(#{@conference.banner_photo})" unless @conference.banner_photo.blank?), class:('with-splash-banner' unless @conference.banner_photo.blank?) }
+      %div.container.text-center.banner-text
+        .row.col-md-12
+          %h1
+            = @conference.title
+        - if @conference.start_date && @conference.end_date
+          %h3
+            = conference_date_string(@conference)
+
         - unless @conference.description.blank?
+          .row-fluid.col-md-12.lead
             %p= @conference.description
 
   - if @conference.include_program_in_splash?

spec/views/conference/show.html.haml_spec.rb

@@ -16,7 +16,8 @@ describe 'conference/show.html.haml' do
                                       include_sponsors_in_splash: true,
                                       include_social_media_in_splash: true,
                                       include_tracks_in_splash: true,
-                                      include_tickets_in_splash: true)
+                                      include_tickets_in_splash: true,
+                                      include_banner_in_splash: true)
     @conference.call_for_papers = create(:call_for_papers, conference: @conference,
                                                            include_cfp_in_splash: true)
     @conference.sponsorship_levels << create(:sponsorship_level, conference: @conference)
@@ -30,8 +31,12 @@ describe 'conference/show.html.haml' do
     render
   end
 
-  it 'renders program partial' do
+  it 'renders banner component' do
     expect(view.content_for(:splash)).to include("#{@conference.description}")
+    expect(view.content_for(:splash)).to include("#{@conference.title}")
+  end
+
+  it 'renders program partial' do
     expect(view).to render_template(partial: 'conference/_program')
   end