From ddfe8e52270fb537add4dde75ca643031d368c72 Mon Sep 17 00:00:00 2001 From: Gopesh Tulsyan Date: Fri, 1 Aug 2014 12:23:33 +0530 Subject: [PATCH] Fix splash layouts, other ui fixes --- app/assets/stylesheets/splash.css.scss | 365 +++++++++--------- app/views/admin/tracks/_track_fields.html.erb | 2 +- .../conference/_call_for_papers.html.haml | 16 +- app/views/conference/_gallery_photo.html.haml | 2 +- app/views/conference/_location.html.haml | 2 +- app/views/conference/_lodging.html.haml | 4 +- app/views/conference/_registration.html.haml | 2 +- app/views/conference/_sponsor.html.haml | 2 +- app/views/conference/_tickets.html.haml | 4 +- app/views/conference/show.html.haml | 100 ++--- 10 files changed, 245 insertions(+), 254 deletions(-) diff --git a/app/assets/stylesheets/splash.css.scss b/app/assets/stylesheets/splash.css.scss index ce20201c..968235ca 100644 --- a/app/assets/stylesheets/splash.css.scss +++ b/app/assets/stylesheets/splash.css.scss @@ -67,206 +67,197 @@ src: local('Coustard-Black'), url("fonts/Coustard-Black.woff") format('woff'); } -body { +.splash { background-color: #f2f2f2; font-family: 'Lato'; font-weight: 300; font-size: 16px; color: #555; + margin-top: -10px; -webkit-font-smoothing: antialiased; /*-webkit-overflow-scrolling: touch;*/ -} -/* Titles */ -h1, h2, h3, h4, h5, h6 { - font-family: "Raleway"; - font-weight: 300; - color: #333; -} -/* Paragraph & Typographic */ -p { - line-height: 28px; - margin-bottom: 25px; - font-size: 18px; -} - -.centered { - text-align: center; -} - -/* Links */ -a { - color: #f85c37; - word-wrap: break-word; - - -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; - -moz-transition: color 0.1s ease-in, background 0.1s ease-in; - -ms-transition: color 0.1s ease-in, background 0.1s ease-in; - -o-transition: color 0.1s ease-in, background 0.1s ease-in; - transition: color 0.1s ease-in, background 0.1s ease-in; -} - -a:hover, -a:focus { - color: #7b7b7b; - text-decoration: none; - outline: 0; -} - -a:before, -a:after { - -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; - -moz-transition: color 0.1s ease-in, background 0.1s ease-in; - -ms-transition: color 0.1s ease-in, background 0.1s ease-in; - -o-transition: color 0.1s ease-in, background 0.1s ease-in; - transition: color 0.1s ease-in, background 0.1s ease-in; -} - - hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} -/* ========================================================================== - Wrap Sections - ========================================================================== */ - -#splash-banner{ - h1, h3{ - color:#3399CC; - } - h3{ - font-family: 'Coustard', serif; - font-weight: 600; - text-shadow: 0.2em 0.2em 0 #4A4F6A; - } - h1{ - font-size: 200px; - font-weight: 700; - text-shadow:0.04em 0.04em 0 black; - } - p { - color: #fff; - font-weight: 500; - } -} - -#program{ - .tracks:hover{ - background-color: white; - } -} - -#callforpapers{ - .timer-box{ - width: 130px; - margin: 35px 24px 20px 0; - border-radius: 50%; - border:4px solid #989797; - } - #cfp-date{ - font-size: 40px; - font-family: 'Coustard', serif; - color: #ff6633; - } -} - -#registration{ - background-color: #e0e0e0; -} - -#sponsors{ - h2,h3,h4{ - color: #fff; - font-weight: 400; - } - - color: #fff; - background-color: #343b3d; -} - -#social-media{ - i{ - color: #4a4a4a; - } - i:hover{ - color: #16a085; - } -} - -#location{ - - h1,h2,p{ - color: #fff; - } - h1,h2,li,p{ - text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); - font-weight: 400; - } -} -#gallery{ - min-height: 600px; - .item{ - img { - height: 600px; - background-repeat: no-repeat; - background-position: center center; - width: 100%; - background-size: cover; - -webkit-background-size:cover; - } - } - .modal-body{ - i{ - margin-top: 35%; - } - } - #carousel-example-generic{ - visibility: hidden; - } -} - -.scroll-top-wrapper { - position: fixed; - opacity: 0; - visibility: hidden; - overflow: hidden; - text-align: center; - z-index: 99999999; - background-color: #424242; - width: 50px; - height: 48px; - line-height: 48px; - right: 30px; - bottom: 30px; - padding-top: 2px; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - border-bottom-left-radius: 10px; - -webkit-transition: all 0.5s ease-in-out; - -moz-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - - i.fa { - line-height: inherit; - } - - &.show { - visibility:visible; - cursor:pointer; - opacity: 1.0; + /* Titles */ + h1, h2, h3, h4, h5, h6 { + font-family: "Raleway"; + font-weight: 300; + color: #333; } + /* Links */ a { - color: white; + color: #f85c37; + word-wrap: break-word; + + -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; + -moz-transition: color 0.1s ease-in, background 0.1s ease-in; + -ms-transition: color 0.1s ease-in, background 0.1s ease-in; + -o-transition: color 0.1s ease-in, background 0.1s ease-in; + transition: color 0.1s ease-in, background 0.1s ease-in; + } + + a:hover, + a:focus { + color: #7b7b7b; + text-decoration: none; + outline: 0; + } + + a:before, + a:after { + -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; + -moz-transition: color 0.1s ease-in, background 0.1s ease-in; + -ms-transition: color 0.1s ease-in, background 0.1s ease-in; + -o-transition: color 0.1s ease-in, background 0.1s ease-in; + transition: color 0.1s ease-in, background 0.1s ease-in; + } + + hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; + } + /* ========================================================================== + Wrap Sections + ========================================================================== */ + + #splash-banner{ + h1, h3{ + color:#3399CC; + } + h3{ + font-family: 'Coustard', serif; + font-weight: 600; + text-shadow: 0.2em 0.2em 0 #4A4F6A; + } + h1{ + font-size: 5em; + font-weight: 700; + text-shadow:0.04em 0.04em 0 black; + } + p { + color: #fff; + font-weight: 500; + } + } + + #program{ + .tracks:hover{ + background-color: white; + } + } + + #callforpapers{ + .timer-box{ + width: 130px; + margin: 35px 24px 20px 0; + border-radius: 50%; + border:4px solid #989797; + } + #cfp-date{ + font-size: 40px; + font-family: 'Coustard', serif; + color: #ff6633; + } + } + + #registration{ + background-color: #e0e0e0; + } + + #sponsors{ + h2,h3,h4{ + color: #fff; + font-weight: 400; + } + + color: #fff; + background-color: #343b3d; + } + + #social-media{ + i{ + color: #4a4a4a; + } + i:hover{ + color: #16a085; + } + } + + #location{ + + h1,h2,p{ + color: #fff; + } + h1,h2,li,p{ + text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); + font-weight: 400; + } + } + #gallery{ + min-height: 600px; + .item{ + img { + height: 600px; + background-repeat: no-repeat; + background-position: center center; + width: 100%; + background-size: cover; + -webkit-background-size:cover; + } + } + .modal-body{ + i{ + margin-top: 35%; + } + } + #carousel-example-generic{ + visibility: hidden; + } + } + + .scroll-top-wrapper { + position: fixed; + opacity: 0; + visibility: hidden; + overflow: hidden; + text-align: center; + z-index: 99999999; + background-color: #424242; + width: 50px; + height: 48px; + line-height: 48px; + right: 30px; + bottom: 30px; + padding-top: 2px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + -webkit-transition: all 0.5s ease-in-out; + -moz-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + + i.fa { + line-height: inherit; + } + + &.show { + visibility:visible; + cursor:pointer; + opacity: 1.0; + } + + a { + color: white; + } } } diff --git a/app/views/admin/tracks/_track_fields.html.erb b/app/views/admin/tracks/_track_fields.html.erb index 78463fd5..a3115ba0 100644 --- a/app/views/admin/tracks/_track_fields.html.erb +++ b/app/views/admin/tracks/_track_fields.html.erb @@ -6,4 +6,4 @@ <%= remove_association_link :track, f %> <% end %> -data: { provide: "markdown-editable" } + diff --git a/app/views/conference/_call_for_papers.html.haml b/app/views/conference/_call_for_papers.html.haml index f669c388..767f9069 100644 --- a/app/views/conference/_call_for_papers.html.haml +++ b/app/views/conference/_call_for_papers.html.haml @@ -8,32 +8,32 @@ %h1 Call For Papers - if !@conference.call_for_papers.description.blank? - %p + .lead = markdown(@conference.call_for_papers.description) - if !@conference.call_for_papers.start_date.blank? && !@conference.call_for_papers.end_date.blank? - %p.lead Proposals will be accepted between + .lead Proposals will be accepted between #cfp-date = date_string(@conference.call_for_papers.start_date, @conference.call_for_papers.end_date) - if @conference.cfp_open? - if @conference.call_for_papers.end_date.to_time < Time.now - %p Today is the last day. Hurry Up! + .lead Today is the last day. Hurry Up! - else .row .col-md-8.col-md-offset-3 %div.col-md-2.timer-box %h2#days - %p Days + .lead Days %div.col-md-2.timer-box %h2#hours - %p Hours + .lead Hours %div.col-md-2.timer-box %h2#minutes - %p Minutes + .lead Minutes %div.col-md-2.timer-box %h2#seconds - %p Seconds + .lead Seconds .row - %p + .lead = link_to "Submit Your Proposals Today", conference_proposal_index_path(@conference.short_title), class: 'btn btn-info', target: '_blank' -else %h3 Deadline has ended diff --git a/app/views/conference/_gallery_photo.html.haml b/app/views/conference/_gallery_photo.html.haml index 647cfb2d..db013bd3 100644 --- a/app/views/conference/_gallery_photo.html.haml +++ b/app/views/conference/_gallery_photo.html.haml @@ -3,5 +3,5 @@ = image_tag(photo.picture(:banner)) - unless photo.description.blank? %div.carousel-caption - %p.lead + .lead = photo.description diff --git a/app/views/conference/_location.html.haml b/app/views/conference/_location.html.haml index c41a1ed9..7353d2d6 100644 --- a/app/views/conference/_location.html.haml +++ b/app/views/conference/_location.html.haml @@ -13,7 +13,7 @@ %h2 %strong #{ @conference.venue.address } - unless @conference.venue.description.blank? - %p + .lead = markdown(@conference.venue.description) %ul.location-links - unless @conference.venue.address.blank? diff --git a/app/views/conference/_lodging.html.haml b/app/views/conference/_lodging.html.haml index 43864ba4..ac50fe92 100644 --- a/app/views/conference/_lodging.html.haml +++ b/app/views/conference/_lodging.html.haml @@ -1,7 +1,7 @@ %div.container.text-center %h2 Lodgings -unless @conference.lodging_description.blank? - %p.lead + .lead = markdown(@conference.lodging_description) %div.row.text-center @@ -13,7 +13,7 @@ -unless r.name.blank? %h4.text-center #{ r.name } -unless r.description.blank? - %p.text-left #{ markdown(r.description) } + .lead.text-left #{ markdown(r.description) } - unless r.website_link.blank? .text-center = link_to 'Go to Website', r.website_link diff --git a/app/views/conference/_registration.html.haml b/app/views/conference/_registration.html.haml index 124d3209..acee2262 100644 --- a/app/views/conference/_registration.html.haml +++ b/app/views/conference/_registration.html.haml @@ -5,7 +5,7 @@ %div.row %h1 Registration - if !@conference.registration_description.blank? - %p + .lead = markdown(@conference.registration_description) - if @conference.registration_dates_given? -if @conference.registration_end_date >= Date.today diff --git a/app/views/conference/_sponsor.html.haml b/app/views/conference/_sponsor.html.haml index 9480fd04..9ad6e262 100644 --- a/app/views/conference/_sponsor.html.haml +++ b/app/views/conference/_sponsor.html.haml @@ -6,7 +6,7 @@ %div.col-md-12 %h2 Sponsors -if !@conference.sponsor_description.blank? - %p + .lead = markdown(@conference.sponsor_description) -if !@conference.sponsor_email.blank? %h3= mail_to "#{ @conference.sponsor_email }", 'Become a Sponsor' diff --git a/app/views/conference/_tickets.html.haml b/app/views/conference/_tickets.html.haml index 1387f94b..635a82f2 100644 --- a/app/views/conference/_tickets.html.haml +++ b/app/views/conference/_tickets.html.haml @@ -1,14 +1,14 @@ %div.row %h3 Tickets -if !@conference.ticket_description.blank? - %p + .lead = markdown(@conference.ticket_description) - @conference.supporter_levels.each do |s| %div.col-md-6 - if !s.title.blank? %h4 #{ s.title } -if !s.description.blank? - %p #{ s.description } + .lead #{ s.description } - if !s.url.blank? %div.btn-group = link_to "Buy Ticket", s.url, class: 'btn btn-success', target: '_blank' diff --git a/app/views/conference/show.html.haml b/app/views/conference/show.html.haml index b1014821..3c0c9779 100644 --- a/app/views/conference/show.html.haml +++ b/app/views/conference/show.html.haml @@ -1,61 +1,61 @@ = content_for :brand do - = link_to @conference.title, conference_url(@conference.short_title), class: 'navbar-brand' + = link_to @conference.short_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-background' unless @conference.banner_photo.blank?) } - %div.container.text-center.banner-text - .row - %h1 - = @conference.short_title - - if @conference.start_date && @conference.end_date + .splash + - 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-background' unless @conference.banner_photo.blank?) } + %div.container.text-center.banner-text .row - %h3 - = date_string(@conference.start_date, @conference.end_date) + %h1 + = @conference.title + - if @conference.start_date && @conference.end_date + .row + %h3 + = date_string(@conference.start_date, @conference.end_date) - - unless @conference.description.blank? - .row-fluid - .col-md-12.lead - %p - = markdown(@conference.description) - -unless @conference.photos.blank? - = link_to 'Gallery', gallery_photos_conference_path(@conference.short_title), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true - = render 'gallery' - - if @conference.include_program_in_splash? - %section{ id: 'program' } - .pad - = render 'program' - - - if @conference.include_registrations_in_splash? - %section{ id: 'registration' } - .pad - = render 'registration' - - - -unless @conference.call_for_papers.blank? - - if @conference.call_for_papers.include_cfp_in_splash? - %section{ id:'callforpapers' } + - unless @conference.description.blank? + .row-fluid + .col-md-12.lead + .lead + = markdown(@conference.description) + -unless @conference.photos.blank? + = link_to 'Gallery', gallery_photos_conference_path(@conference.short_title), class: 'btn btn-primary btn-lg', id: 'gallery-btn', remote: true + = render 'gallery' + - if @conference.include_program_in_splash? + %section{ id: 'program' } .pad - = render 'call_for_papers' + = render 'program' - -unless @conference.venue.blank? - - if @conference.venue.include_venue_in_splash? - %section{ id: 'location' } + - if @conference.include_registrations_in_splash? + %section{ id: 'registration' } .pad - = render 'location' - - unless @conference.venue.lodgings.empty? - - if @conference.venue.include_lodgings_in_splash? - = render 'lodging' + = render 'registration' - - if @conference.include_sponsors_in_splash? - %section{ id: 'sponsors' } - .pad - = render 'sponsor' - - if @conference.contact.public? - %section{ id: 'social-media' } - .pad - = render 'social_media' + -unless @conference.call_for_papers.blank? + - if @conference.call_for_papers.include_cfp_in_splash? + %section{ id:'callforpapers' } + .pad + = render 'call_for_papers' - = render 'footer' + -unless @conference.venue.blank? + - if @conference.venue.include_venue_in_splash? + %section{ id: 'location' } + .pad + = render 'location' + - unless @conference.venue.lodgings.empty? + - if @conference.venue.include_lodgings_in_splash? + = render 'lodging' + - if @conference.include_sponsors_in_splash? + %section{ id: 'sponsors' } + .pad + = render 'sponsor' + + - if @conference.contact.public? + %section{ id: 'social-media' } + .pad + = render 'social_media' + + = render 'footer'