Merge pull request #177 from SumOfUs/development

v0.4

Gemfile

@@ -18,6 +18,7 @@ gem 'codemirror-rails'
 gem 'selectize-rails'
 gem 'countries'
 gem 'browserify-rails'
+gem 'font-awesome-sass'
 
 # they still haven't merged the PR to support sprockets 3, but will in the next few weeks
 gem "compass-rails", git: 'https://github.com/robkilby/compass-rails', branch: 'sprockets-3'

Gemfile.lock

@@ -242,6 +242,8 @@ GEM
       nokogiri (~> 1.5, >= 1.5.11)
     font-awesome-rails (4.4.0.0)
       railties (>= 3.2, < 5.0)
+    font-awesome-sass (4.4.0)
+      sass (>= 3.2)
     formatador (0.2.5)
     globalid (0.3.6)
       activesupport (>= 4.1.0)
@@ -476,6 +478,7 @@ DEPENDENCIES
   factory_girl_rails
   faker
   fog-aws
+  font-awesome-sass
   jbuilder (~> 2.0)
   jquery-rails
   liquid

app/assets/javascripts/application.js

@@ -25,6 +25,7 @@
 
 //= require show_errors
 //= require collection_editor
+//= require dropzone_image_upload
 //= require edit_page
 //= require selectize_config.js
 //= require ajax

app/assets/javascripts/dropzone_image_upload.js

@@ -0,0 +1,42 @@
+(function(){
+  var configureDropZone = function() {
+    Dropzone.options.dropzone = {
+      maxFilesize: 2,
+      paramName: "image[content]",
+      addRemoveLinks: false,
+      previewsContainer: null,
+      createImageThumbnails: true,
+
+      init: function() {
+        this.on("success", function(resp, html) {
+          $('.campaign-images').append(html);
+          $('.campaign-images .notice').hide();
+        });
+
+        this.on("addedfiled", function(file) {
+          this.removeFile(file);
+        });
+      }
+    };
+  };
+
+  var bindHandlers = function() {
+    $('.campaign-images').on('ajax:success', "a[data-method=delete]", function(){
+      $(this).parents('.image-thumb').fadeOut();
+    });
+  };
+
+  var checkAnyImages = function() {
+    if( $('.campaign-images img').length == 0) {
+      $('.campaign-images').hide();
+    }
+  };
+
+  var initialize = function() {
+    configureDropZone();
+    bindHandlers();
+  };
+
+  $.subscribe("page:edit:loaded", initialize);
+}());
+

app/assets/javascripts/edit_page.js

@@ -1,25 +1,4 @@
 (function(){
-
-  var configureDropZone = function() {
-    Dropzone.options.dropzone = {
-      maxFilesize: 2,
-      paramName: "image[content]",
-      addRemoveLinks: false,
-      previewsContainer: null,
-      createImageThumbnails: true,
-
-      init: function() {
-        this.on("success", function(resp, data) {
-          $('.campaign-images').append(data.html);
-        });
-
-        this.on("addedfiled", function(file) {
-          this.removeFile(file);
-        });
-      }
-    };
-  }
-
   var configureQuillEditor = function() {
     if($('#editor').length === 0){
       return false;
@@ -77,10 +56,10 @@
   };
 
   var initialize = function() {
-    configureDropZone();
     configureQuillEditor();
     configureToggle();
   };
 
-  $.subscribe("page:has_loaded", initialize);
+  $.subscribe("page:edit:loaded", initialize);
 }());
+

app/assets/javascripts/plugins/actions.js

@@ -2,13 +2,12 @@ $(function(){
   $('form.action').on('ajax:error', window.Champaign.showErrors);
 
   $('form.action').on('ajax:success', function(e, data){
-    $('.post-action span.name').text(data.form_data.first_name);
-
-    $(this).fadeOut(function(){
-      $('.post-action').fadeIn('fast');
-    });
-
-    $('#share-modal').modal('show');
+    if (data.follow_up_url) {
+      window.location.href = data.follow_up_url
+    } else {
+      // this should never happen, but just in case.
+      alert("You've signed the petition! Thanks so much!");
+    }
   });
 });
 

app/assets/stylesheets/common.scss

@@ -168,3 +168,18 @@ input.has-error {
 .submenu-horizontal {
   margin-bottom: 20px;
 }
+
+.image-thumb {
+  position: relative;
+  display: inline-block;
+  margin-right: 5px;
+  .thumb-remove {
+    background: white;
+    padding: 1px;
+    border-radius: 0 4px 0 0;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+  }
+}
+

app/assets/stylesheets/sumofus/components/button.scss

@@ -1,4 +1,4 @@
-.button {
+@mixin button($color) {
   width: 100%;
   height: 60px;
   border: none;
@@ -9,15 +9,98 @@
   border-radius: 3px;
   cursor: pointer;
   outline: none;
+  box-sizing: border-box;
+  display: block;
+  padding-top: 23px;
+  text-decoration: none;
+
+  @if is-superselector(button, &) {
+    padding-top: 0;
+  }
 
   // main color scheme
-  background-color: $orange;
+  background-color: $color;
 
   &:hover, &:active {
-    background-color: darken($orange, 5%);
+    background-color: darken($color, 5%);
+    text-decoration: none;
   }
   &:active {
     outline: none;
-    @include box-shadow(inset darken($orange, 15%) 0 3px 10px);
+    @include box-shadow(inset darken($color, 15%) 0 3px 10px);
+  }
+}
+
+button.button {
+  @include button($orange);
+}
+
+.button {
+  @include button($orange);
+}
+
+
+
+// shareprogress isn't super customization friendly, so we do
+// what we can.
+.button {
+  &--facebook, &--twitter {
+    float: left;
+    width: 145px;
+    &.sp_em_small, &.sp_em_large, &.sp_tw_small, &.sp_tw_large, &.sp_fb_small, &.sp_fb_large {
+      a {
+        width: 100%;
+        max-width: 145px;
+        padding-top: 20px;
+      }
+    }
+
+    a::before {
+      color: white;
+      font-size: 18px;
+      line-height: 35px;
+    }
+    a::after {
+      color: white;
+      font-family: FontAwesome;
+      font-size: 22px;
+      margin-left: 10px;
+      line-height: 35px;
+      vertical-align: top;
+    }
+  }
+  &--facebook {
+    &.sp_em_small, &.sp_em_large, &.sp_tw_small, &.sp_tw_large, &.sp_fb_small, &.sp_fb_large {
+      a {
+        @include button($facebook);
+        padding-top: 15px;
+        color: $facebook; // hide SP text in browsers that don't handle font-size: 0;
+        font-size: 1px;
+        font-size: 0;
+      }
+    }
+  }
+  &--twitter {
+    &.sp_em_small, &.sp_em_large, &.sp_tw_small, &.sp_tw_large, &.sp_fb_small, &.sp_fb_large {
+      a {
+        @include button($twitter);
+        padding-top: 15px;
+        color: $twitter; // hide SP text in browsers that don't handle font-size: 0;
+        font-size: 1px;
+        font-size: 0;
+      }
+    }
+  }
+  &--facebook a::before {
+    content: "Share";
+  }
+  &--facebook a::after {
+    content: "\f09a";
+  }
+  &--twitter a::before {
+    content: 'Tweet';
+  }
+  &--twitter a::after {
+    content: '\f099';
   }
 }

app/assets/stylesheets/sumofus/components/footer.scss

@@ -8,6 +8,11 @@
   overflow: hidden;
   border-top: 2px solid $dingy-gray;
 
+  &--stuck-to-bottom {
+    position: absolute;
+    bottom: 0;
+  }
+
   &__logo {
     float: left;
   }
@@ -22,4 +27,10 @@
     font-size: 10px;
     padding-top: 10px;
   }
-}
+
+  &__license, &__tagline {
+    @media(max-width: $mobile-width) {
+      display: none;
+    }
+  }
+}

app/assets/stylesheets/sumofus/components/form.scss

@@ -34,6 +34,9 @@
         }
       }
     }
+    select {
+      height: 58px;
+    }
 
     label.checkbox-label {
       margin: 10px 0 4px;

app/assets/stylesheets/sumofus/components/header.scss

@@ -1,30 +1,46 @@
 .header-logo {
-  color: white;
   padding: 20px 15px 15px;
-
   position: fixed;
   width: 100%;
   z-index: 100;
   @include clearfix();
+  top: 0;
+  box-sizing: border-box;
+
+  @media(max-width: $mobile-width) {
+    position: absolute;
+  }
 
-  // when the element is not --at-top, the gradient is moved up and out of the way
-  // and a background color is applied.
-  background-color: rgba(0,0,0,0.35);
-  background-position-y: -80px;
-  background-repeat: no-repeat;
-  @include transition(background-color 0.40s ease-in-out, background-position 0.20s ease-out);
-  @include background-image(linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)));
+  &--dark {
+    color: white;
+
+    // when the element is not --at-top, the gradient is moved up and out of the way
+    // and a background color is applied.
+    background-color: rgba(0,0,0,0.35);
+    background-position-y: -80px;
+    background-repeat: no-repeat;
+    @include transition(background-color 0.40s ease-in-out, background-position 0.20s ease-out);
+    @include background-image(linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)));
+
+    &.checks-top--at-top {
+      background-color: rgba(0,0,0,0);
+      background-position-y: 0;
+    }
+  }
+
+  &--light {
+    background: none;
+  }
 
   &__logo {
     float: left;
   }
 
   &__tagline {
     float: left;
-  }
 
-  &.checks-top--at-top {
-    background-color: rgba(0,0,0,0);
-    background-position-y: 0;
+    @media(max-width: $mobile-width) {
+      display: none;
+    }
   }
 }

app/assets/stylesheets/sumofus/components/logo.scss

@@ -1,19 +1,21 @@
 .sumofus-logo {
   &--negative {
     background-image: url(asset-path('sumofus/logo-white.png'));
+  }
+  &--positive {
+    background-image: url(asset-path('sumofus/logo-positive.png'));
+  }
+  &--positive, &--negative {
     background-size: 100%;
     background-repeat: no-repeat;
     width: 150px;
     height: 30px;
   }
+
   &--tagline {
     font-size: 20px;
     line-height: 32px;
     margin-left: 15px;
-
-    @media(max-width: $mobile-width) {
-      display: none;
-    }
   }
 }