Admin option to add banners and show banners

app/assets/javascripts/advanced_search.js.coffee

@@ -23,6 +23,8 @@ App.AdvancedSearch =
     $('.js-calendar').datepicker
       regional: locale
       maxDate:  "+0d"
+    $('.js-calendar-full').datepicker
+      regional: locale
 
   initialize: ->
     App.AdvancedSearch.init_calendar()

app/assets/javascripts/application.js

@@ -44,6 +44,7 @@
 //= require tracks
 //= require valuation_spending_proposal_form
 //= require embed_video
+//= require banners
 
 var initialize_modules = function() {
   App.Comments.initialize();
@@ -63,6 +64,7 @@ var initialize_modules = function() {
   App.Tracks.initialize();
   App.ValuationSpendingProposalForm.initialize();
   App.EmbedVideo.initialize();
+  App.Banners.initialize();
 };
 
 $(function(){

app/assets/javascripts/banners.js.coffee

@@ -0,0 +1,25 @@
+App.Banners =
+
+  update_banner: (selector, text) ->
+    $(selector).html(text)
+
+  update_style: (selector, style) ->
+    $(selector).removeClass($(selector).attr("class"), true)
+               .addClass(style, true)
+
+  initialize: ->
+    $('[data-js-banner-title]').on
+      change: ->
+        App.Banners.update_banner("#js-banner-title", $(this).val())
+
+    $('[data-js-banner-description]').on
+      change: ->
+        App.Banners.update_banner("#js-banner-description", $(this).val())
+
+    $("#banner_style").on
+      change: ->
+        App.Banners.update_style("#js-banner-style", $(this).val())
+
+    $("#banner_image").on
+      change: ->
+        App.Banners.update_style("#js-banner-image", $(this).val())

app/assets/stylesheets/admin.scss

@@ -106,6 +106,7 @@ body.admin {
 
   a {
     color: white\9 !important;
+    color: red\9 !important;    
   }
 
   ul {

app/assets/stylesheets/application.scss

@@ -13,3 +13,4 @@
 @import "annotator_overrides";
 @import "jquery-ui/datepicker";
 @import "datepicker_overrides";
+@import "banners";

app/assets/stylesheets/banners.scss

@@ -0,0 +1,69 @@
+// Place all the styles related to the banner controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+// 01. Banners
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.banner-style-one {
+  background-color: $brand;
+}
+
+.banner-style-two {
+  background-color: $budget;
+}
+
+.banner-style-three {
+  background-color: #33DADF;
+}
+
+@media (min-width: $medium-breakpoint) {
+
+  .banner-img-one {
+    background-image: image-url('banners/banner1.png');
+  }
+
+  .banner-img-two {
+    background-image: image-url('banners/banner2.png');
+  }
+
+  .banner-img-three {
+    background-image: image-url('banners/banner3.png');
+  }
+}
+
+.banner-img-one, .banner-img-two, .banner-img-three {
+  background-position: bottom right;
+  background-repeat: no-repeat;
+}
+
+.banner-style-one, .banner-style-two, .banner-style-three {
+  margin: 0;
+  margin-bottom: $line-height;
+
+  h2, h3, a {
+    color: #eaeaf2;
+  }
+
+  h2 {
+    padding: $line-height/2;
+    padding-bottom: 0;
+  }
+
+  h3 {
+    padding: $line-height/2;
+    padding-top: 0;
+  }
+
+  a:hover h2, a:hover h3 {
+    color: #eaeaf2 !important;
+    text-decoration: none;
+  }
+
+  @media (min-width: $medium-breakpoint) {
+
+    h3 {
+      width: 80%;
+    }
+  }
+}

app/assets/stylesheets/datepicker_overrides.scss

@@ -51,7 +51,7 @@
       border-right: 1px solid $dark;
 
       tr th {
-        color: white;
+        color: $dark;     
       }
     }
 

app/assets/stylesheets/variables.scss

@@ -77,6 +77,7 @@ $budget:            #454372;
 $budget-hover:      #7571BF;
 
 $highlight:         #E7F2FC;
+$highlight-dark:    #33DADF;
 $featured:          #FED900;
 
 $footer-bg:         #DEE0E2;