Merge pull request #270 from gopesht/splash_themes

Splash themes

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'

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

app/assets/stylesheets/application.css

@@ -9,4 +9,5 @@
  *= require osem-rating
  *= require osem-schedule
  *= require osem-schedule-print
+ *= require font-awesome
 */

app/assets/stylesheets/osem.css

@@ -115,7 +115,6 @@ body {
 
 .banner-text{
     padding-top: 10%;
-    color: #fff;
 }
 
 .pad{

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;
+  }
+}

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

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

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

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

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

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

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

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