diff --git a/Gemfile b/Gemfile index d709a6ea..50afc353 100644 --- a/Gemfile +++ b/Gemfile @@ -78,6 +78,9 @@ gem 'turbolinks' # Use active_model_serializers for JSON serializatioin our API gem 'active_model_serializers' +# Use FontAwesome for splash themes +gem 'font-awesome-rails' + # Use rspec and capybara as testing framework group :development, :test do gem 'rspec', '>= 3.0.0.beta' diff --git a/Gemfile.lock b/Gemfile.lock index d6a462c6..c52dd2cc 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -118,6 +118,8 @@ GEM faraday (0.9.0) multipart-post (>= 1.2, < 3) ffi (1.9.3) + font-awesome-rails (4.1.0.0) + railties (>= 3.2, < 5.0) formatador (0.2.4) formtastic (2.3.0.rc3) actionpack (>= 3.0) @@ -387,6 +389,7 @@ DEPENDENCIES database_cleaner devise factory_girl_rails + font-awesome-rails formtastic (~> 2.3.0.rc3) formtastic-bootstrap gravtastic diff --git a/app/assets/images/fb-logo-blue.png b/app/assets/images/fb-logo-blue.png deleted file mode 100644 index 86f565a1..00000000 Binary files a/app/assets/images/fb-logo-blue.png and /dev/null differ diff --git a/app/assets/images/flickr.png b/app/assets/images/flickr.png deleted file mode 100644 index 3a76415b..00000000 Binary files a/app/assets/images/flickr.png and /dev/null differ diff --git a/app/assets/images/google-logo.png b/app/assets/images/google-logo.png deleted file mode 100644 index ccd1d4a2..00000000 Binary files a/app/assets/images/google-logo.png and /dev/null differ diff --git a/app/assets/images/instagram.png b/app/assets/images/instagram.png deleted file mode 100644 index 992f8dd3..00000000 Binary files a/app/assets/images/instagram.png and /dev/null differ diff --git a/app/assets/images/twitter-logo-blue.png b/app/assets/images/twitter-logo-blue.png deleted file mode 100644 index a1435701..00000000 Binary files a/app/assets/images/twitter-logo-blue.png and /dev/null differ diff --git a/app/assets/images/vimeo-logo-dark.png b/app/assets/images/vimeo-logo-dark.png deleted file mode 100644 index c8952544..00000000 Binary files a/app/assets/images/vimeo-logo-dark.png and /dev/null differ diff --git a/app/assets/images/youtube-color-logo.png b/app/assets/images/youtube-color-logo.png deleted file mode 100644 index b29e7789..00000000 Binary files a/app/assets/images/youtube-color-logo.png and /dev/null differ diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 41c8fb74..febb4d2e 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -9,4 +9,5 @@ *= require osem-rating *= require osem-schedule *= require osem-schedule-print + *= require font-awesome */ diff --git a/app/assets/stylesheets/osem.css b/app/assets/stylesheets/osem.css index 089acc74..e9af8f12 100644 --- a/app/assets/stylesheets/osem.css +++ b/app/assets/stylesheets/osem.css @@ -115,7 +115,6 @@ body { .banner-text{ padding-top: 10%; - color: #fff; } .pad{ diff --git a/app/assets/stylesheets/splash.css.scss b/app/assets/stylesheets/splash.css.scss new file mode 100644 index 00000000..5388e8a8 --- /dev/null +++ b/app/assets/stylesheets/splash.css.scss @@ -0,0 +1,146 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic); +@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700); +@import url(http://fonts.googleapis.com/css?family=Coustard:400,900); + +body { + background-color: #f2f2f2; + font-family: 'Lato'; + font-weight: 300; + font-size: 16px; + color: #555; + + -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; + } +} diff --git a/app/views/conference/_call_for_papers.html.haml b/app/views/conference/_call_for_papers.html.haml index f1b41c52..4d453980 100644 --- a/app/views/conference/_call_for_papers.html.haml +++ b/app/views/conference/_call_for_papers.html.haml @@ -11,24 +11,25 @@ %p = @conference.call_for_papers.description - if !@conference.call_for_papers.start_date.blank? && !@conference.call_for_papers.end_date.blank? - %p Proposals will be accepted between - #{ date_string(@conference.call_for_papers.start_date, @conference.call_for_papers.end_date) } + %p.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! - else .row .col-md-8.col-md-offset-3 - %div.col-md-2 + %div.col-md-2.timer-box %h2#days %p Days - %div.col-md-2 + %div.col-md-2.timer-box %h2#hours %p Hours - %div.col-md-2 + %div.col-md-2.timer-box %h2#minutes %p Minutes - %div.col-md-2 + %div.col-md-2.timer-box %h2#seconds %p Seconds .row diff --git a/app/views/conference/_location.html.haml b/app/views/conference/_location.html.haml index d7698e31..e6d4c62f 100644 --- a/app/views/conference/_location.html.haml +++ b/app/views/conference/_location.html.haml @@ -14,7 +14,7 @@ %strong #{ @conference.venue.address } - unless @conference.venue.description.blank? %p - %strong #{ @conference.venue.description } + = @conference.venue.description %ul.location-links - unless @conference.venue.address.blank? %li diff --git a/app/views/conference/_registration.html.haml b/app/views/conference/_registration.html.haml index cf7982c6..654bb2ca 100644 --- a/app/views/conference/_registration.html.haml +++ b/app/views/conference/_registration.html.haml @@ -3,7 +3,7 @@ %a.smoothscroll{ href: '#registration' } Registration %div.container.text-center %div.row - %h2 Registration + %h1 Registration - if !@conference.registration_description.blank? %p = @conference.registration_description diff --git a/app/views/conference/_social_media.html.haml b/app/views/conference/_social_media.html.haml index 3270d557..af091888 100644 --- a/app/views/conference/_social_media.html.haml +++ b/app/views/conference/_social_media.html.haml @@ -6,30 +6,31 @@ %div.row - if !@conference.facebook_url.blank? %div.col-md-3 - = link_to image_tag('fb-logo-blue.png', class: 'img-responsive'), - "#{ @conference.facebook_url }" + = link_to "#{ @conference.facebook_url }" do + %i.fa.fa-facebook-square.fa-4x - if !@conference.twitter_url.blank? %div.col-md-3 - = link_to image_tag('twitter-logo-blue.png', class: 'img-responsive'), "#{ @conference.twitter_url }" + = link_to "#{ @conference.twitter_url }" do + %i.fa.fa-twitter.fa-4x - if !@conference.media_type.blank? && !@conference.media_id.blank? %div.col-md-3 -if @conference.media_type == 'YouTube' - = link_to image_tag('youtube-color-logo.png', class: 'img-responsive'), - "http://youtu.be/#{ @conference.media_id}" + = link_to "http://youtu.be/#{ @conference.media_id}" do + %i.fa.fa-youtube.fa-4x -if @conference.media_type == 'SlideShare' = link_to image_tag('slideshare.png', class: 'img-responsive'), "#{ @conference.media_id}" -if @conference.media_type == 'Instagram' - = link_to image_tag('instagram.png', class: 'img-responsive'), - "http://instagram.com/p/#{ @conference.media_id}" + = link_to "http://instagram.com/p/#{ @conference.media_id}" do + %i.fa.fa-instagram.fa-4x -if @conference.media_type == 'Vimeo' - = link_to image_tag('vimeo-logo-dark.png', class: 'img-responsive'), - "http://vimeo.com/#{ @conference.media_id}" + = link_to "http://vimeo.com/#{ @conference.media_id}" do + %i.fa.fa-vimeo-square.fa-4x -if @conference.media_type == 'Speakerdeck' = link_to image_tag('speakerdeck.png', class: 'img-responsive'),"#{ @conference.media_id}" -if @conference.media_type == 'Flickr' - = link_to image_tag('flickr.png', class: 'img-responsive'), - "https://flic.kr/p/#{ @conference.media_id}" + = link_to "https://flic.kr/p/#{ @conference.media_id}" do + %i.fa.fa-flickr.fa-4x - if !@conference.google_url.blank? %div.col-md-3 - = link_to image_tag('google-logo.png', class: 'img-responsive'), - "#{ @conference.google_url }" + = link_to "#{ @conference.google_url }" do + %i.fa.fa-google-plus-square.fa-4x diff --git a/app/views/conference/_tracks.html.haml b/app/views/conference/_tracks.html.haml index e2b07f89..f3c85c87 100644 --- a/app/views/conference/_tracks.html.haml +++ b/app/views/conference/_tracks.html.haml @@ -2,7 +2,7 @@ %div.col-md-12 %h2 Tracks - @conference.tracks.each do |t| - %div{ class: (@conference.tracks.count.to_i <= 2 ? "col-md-#{12/@conference.tracks.count.to_i}" : "col-md-4") } + %div.tracks{ class: (@conference.tracks.count.to_i <= 2 ? "col-md-#{12/@conference.tracks.count.to_i}" : "col-md-4") } %h4 = t.name %p diff --git a/app/views/conference/show.html.haml b/app/views/conference/show.html.haml index 277b5218..ce120949 100644 --- a/app/views/conference/show.html.haml +++ b/app/views/conference/show.html.haml @@ -7,7 +7,7 @@ %div.container.text-center.banner-text .row %h1 - = @conference.title + = @conference.short_title - if @conference.start_date && @conference.end_date .row %h3 diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 199dbfb0..84263735 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -6,6 +6,7 @@ %meta{:content => "", :name => "description"} %meta{:content => "", :name => "author"} = stylesheet_link_tag "application", :media => "all" + = stylesheet_link_tag "splash" if content_for :splash = javascript_include_tag "application" = csrf_meta_tags :javascript diff --git a/spec/views/conference/show.html.haml_spec.rb b/spec/views/conference/show.html.haml_spec.rb index 717a1223..9ea5e023 100644 --- a/spec/views/conference/show.html.haml_spec.rb +++ b/spec/views/conference/show.html.haml_spec.rb @@ -33,7 +33,7 @@ describe 'conference/show.html.haml' do it 'renders banner component' do expect(view.content_for(:splash)).to include("#{@conference.description}") - expect(view.content_for(:splash)).to include("#{@conference.title}") + expect(view.content_for(:splash)).to include("#{@conference.short_title}") end it 'renders program partial' do