Merge branch 'merge-redesigns' into 660_remove-summary-hover

EFForg · Sep 6, 2019 · 4836059 · 4836059
2 parents ff9de1d + 4e364af
commit 4836059
Show file tree

Hide file tree

Showing 41 changed files with 209 additions and 119 deletions.
diff --git a/...ylesheets/fonts/LeagueGothic-regular.woff → app/assets/fonts/LeagueGothic-regular.woff b/...ylesheets/fonts/LeagueGothic-regular.woff → app/assets/fonts/LeagueGothic-regular.woff
diff --git a/...s/stylesheets/fonts/Montserrat-Black.woff → app/assets/fonts/Montserrat-Black.woff b/...s/stylesheets/fonts/Montserrat-Black.woff → app/assets/fonts/Montserrat-Black.woff
diff --git a/...ts/stylesheets/fonts/Montserrat-Bold.woff → app/assets/fonts/Montserrat-Bold.woff b/...ts/stylesheets/fonts/Montserrat-Bold.woff → app/assets/fonts/Montserrat-Bold.woff
diff --git a/...tylesheets/fonts/Montserrat-Hairline.woff → app/assets/fonts/Montserrat-Hairline.woff b/...tylesheets/fonts/Montserrat-Hairline.woff → app/assets/fonts/Montserrat-Hairline.woff
diff --git a/...s/stylesheets/fonts/Montserrat-Light.woff → app/assets/fonts/Montserrat-Light.woff b/...s/stylesheets/fonts/Montserrat-Light.woff → app/assets/fonts/Montserrat-Light.woff
diff --git a/...stylesheets/fonts/Montserrat-Regular.woff → app/assets/fonts/Montserrat-Regular.woff b/...stylesheets/fonts/Montserrat-Regular.woff → app/assets/fonts/Montserrat-Regular.woff
diff --git a/app/assets/javascripts/admin/action_pages.js b/app/assets/javascripts/admin/action_pages.js
@@ -99,7 +99,7 @@ $('#action-page-preview').on('click', function(e) {
   });
 });
 
-$('.action_pages-index .table .page-actions').on('click', function() {
+$('.action_pages-index').on('click', '.table .page-actions', function() {
   $('.page-actions.open').removeClass('open');
   $(this).addClass('open');
 });

diff --git a/app/assets/stylesheets/action_page.scss b/app/assets/stylesheets/action_page.scss
@@ -18,7 +18,7 @@
     }
     @media screen and (min-width: $lg) {
       > div:first-child {
-        margin: 2rem 3rem 1rem 0;
+        margin: 1rem 3rem 1rem 0;
         width: 65%;
       }
       > div:last-child {
@@ -57,6 +57,10 @@
   input:not(:checked) + label + div {  // for Learn more
     display: none;
   };
+  input:checked + label + div {  // for Learn more
+    display: flex !important;
+  };
+
 
   [type="checkbox"]:not(:checked) + label,
   [type="checkbox"]:checked + label {
@@ -79,6 +83,7 @@
 
 #description {
   @include flex-this;
+  display: none; // for learn more
   > div {
     @include flex-item;
   }
@@ -148,12 +153,15 @@
     background-color: $gray-darker;
     color: black;
     margin-bottom: 1.5rem;
-    text-align: center;
+    text-align: left;
     h3 {
       color: black;
       font-size: $base-font-size * 1.2;
       line-height: $base-line-height * 1.2;
       margin-top: 0;
+      em {
+        font-style: normal;
+      }
     }
     a {
       color: black;
@@ -172,7 +180,7 @@
       }
     }
     .tool-container {
-      padding: 2rem 0.4rem 1rem 0.4rem;
+      padding: 2rem 0.8rem 1rem 0.8rem;
       img {
         width: 100px;
         height: 100px;
@@ -192,6 +200,10 @@
         margin: 0;
         text-transform: uppercase;
       }
+      .tool-title.precall,
+      .tool-title.postcall {  // for call tool
+        padding-left: 0;
+      }
       p {
         color: black;
         margin-top: 1rem;
@@ -237,9 +249,12 @@
       font-size: 0.8rem;
     }
     select {
-      max-width: 60%;
+      color: $charcoal;
+      height: 2.5rem;
       margin-bottom: 0.5rem;
+      padding: 0.5rem;
     }
+
     #affiliations select {
       max-width: 100%;
     }
@@ -345,18 +360,30 @@
 #thank-you.tool {
   @extend form;
   display: none;
-  .tool-title {
+}
+#thank-you {
+  > div {
     text-align: center;
   }
-  #tweet-back {
-    text-decoration: underline;
-    &:hover {
-      cursor: pointer;
+  .tool {
+    #tweet-back {
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
 }
-#call-tool h3.tool-title {
-  text-align: center;
+#call-tool {
+  h3.tool-title {
+    margin-left: 0;
+    padding-left: 1rem;
+    text-align: center !important;
+  }
+  .advisory {
+    color: black;
+    text-align: left;
+  }
 }
 .js {
   .tool {
@@ -374,8 +401,8 @@
 #petition-tool .tool-body .signed { text-align: center; }
 
 #tools #petition-tool {
+  padding: 2rem;
   .tool-title {
-    text-align: center;
     margin-left: 0;
     padding: 0;
   }
@@ -392,22 +419,25 @@
   cursor: pointer;
   font-size: 0.8em;
   margin-top: 0.6em;
+  padding: 1.3rem 0.3rem;
+  text-align: center;
+  width: 6.5rem;
 }
 
-#tools #tweet-tool {
+#tools > #tweet-tool {
   .tool-body {
-    @extend form;
+    margin-bottom: 0;
+    padding-bottom: 0;
   }
 
   .form-group input {
     font-style: italic;
   }
 
   .newsletter-subscription {
-    margin: 0 15px;
+    margin: 0 0.5rem;
   }
 
-
   img.individual {
     display: block;
     max-width: 200px;
@@ -499,7 +529,7 @@
 }
 
 .description h3,
-h5.privacy-notice-header,
+.privacy-notice-header,
 h3.header,
 #tools #email-tool h3,
 #tools #congress-message-tool h3 {
@@ -514,6 +544,7 @@ h3.header,
 
 .privacy-notice {
   position: relative;
+  text-align: left;
   span.privacy-notice-popover {
     @include eff-tooltip;
     color: black;
@@ -551,14 +582,21 @@ h3.header,
   }
 }
 #description .letter, #letter {
+  background-color: $off-white;
+  color: $charcoal;
+  font-family: serif;
   -webkit-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.1); // iOS <4.3 & Android <4.1
   box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.1);
-
   margin: 2em 0 3em;
-  padding: 3em 3em 5em;
+  padding: 3em 2em 5em;
   position: relative;
-  font-family: serif;
-  color: #555;
+  a {
+    color: $charcoal;
+    border-bottom: 2px solid $charcoal;
+    &:hover {
+
+    }
+  }
   &:after {
     content: '';
     display: block;
@@ -628,17 +666,20 @@ h3.header,
   h3.header {
     text-transform: uppercase;
   }
-  .call-body-active {
+  .call-body-active,
+  .call-body-phone-saved,
+  .call-body-phone-not-saved  {
     margin: 0 1rem;
   }
+
   .call-script-box {
     padding: 0;
     margin: 0 0 1rem 0;
   }
   .call-script {
     background: $off-white;
     font-size: $base-font-size * 0.9;
-    margin: 0 1rem;
+    margin: 0;
     padding: 1rem;
     text-align: left;
   }
@@ -647,9 +688,13 @@ h3.header,
     margin-bottom: 1rem;
   }
 
-  .call-body-phone-saved p.privacy-notice {
-    padding: 2rem;
+  form.call-tool {
+    padding: 0;  // to make margins uniform  on initial form for non-signed in users
+  }
+  .signup-checkbox {
+    padding-top: 2rem;
   }
+
 }
 
 .email-tool-container {
@@ -683,6 +728,9 @@ h3.header,
   }
 }
 // congress-message-tool, privacy_notice
+span.customize-message-popover {
+  @include eff-tooltip;
+}
 h3 {
   &.legislator-label {
     margin-top: 0px;
@@ -692,17 +740,21 @@ h3 {
       margin-bottom: 0;
     }
   }
-  span.customize-message-popover {
-    @include eff-tooltip;
-  }
+
 
   span.legislator-info-popover {
     @include eff-tooltip;
   }
 }
 
 .privacy-notice-header {
+  color: black;
+  font-size: 0.85rem;
   position: relative;
+  text-transform: none;
+  .customize-message-popover {
+    top: 0.8rem;
+  }
 }
 #tools #congress-message-tool {
   .tool-body {
@@ -891,7 +943,16 @@ h3 {
     margin: 2rem 0;
   }
   section.more-actions {
+    .row {
+      @media screen and (min-width: $md) {
+        margin-bottom: 5rem;
+      }
+    }
     .row > div {
+      margin-bottom: 4rem;
+      @media screen and (min-width: $md) {
+        margin-bottom: 0;
+      }
       a {
         border: none;
         &:hover {
@@ -908,9 +969,10 @@ h3 {
     }
   }
   .pagination {
-    text-align: center;
-    margin-top: 4rem;
+    font-size: $base-font-size * 1.2;
     margin-bottom: 8rem;
+    margin-top: 4rem;
+    text-align: center;
     a {
       border: none;
     }
@@ -972,17 +1034,13 @@ html.js {
 /* Tools div media queries */
 
 @media screen and (min-width: $md) {
-  #tools {
-
-  }
-
-
   #tools .tool select {
     max-width: auto;
   }
-  .action-content {
-    margin-bottom: 40px;
-  }
+}
+
+#action-content {
+  margin: 4rem 0;
 }
 
 .no-js .plain-date {

diff --git a/app/assets/stylesheets/application/_fonts.scss b/app/assets/stylesheets/application/_fonts.scss
@@ -2,34 +2,34 @@
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 100;
-  src: local("Montserrat Hairline"), local("Montserrat-Hairline"), url('fonts/Montserrat-Hairline.woff') format('woff'); }
+  src: local("Montserrat Hairline"), local("Montserrat-Hairline"), font-url('Montserrat-Hairline.woff') format('woff'); }
 
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 300;
-  src: local("Montserrat Light"), local("Montserrat-Light"), url('fonts/Montserrat-Light.woff') format('woff'); }
+  src: local("Montserrat Light"), local("Montserrat-Light"), font-url('Montserrat-Light.woff') format('woff'); }
 
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
-  src: local("Montserrat Regular"), local("Montserrat-Regular"), url('fonts/Montserrat-Regular.woff') format('woff'); }
+  src: local("Montserrat Regular"), local("Montserrat-Regular"), font-url('Montserrat-Regular.woff') format('woff'); }
 
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
-  src: local("Montserrat Bold"), local("Montserrat-Bold"), url('fonts/Montserrat-Bold.woff') format('woff'); }
+  src: local("Montserrat Bold"), local("Montserrat-Bold"), font-url('Montserrat-Bold.woff') format('woff'); }
 
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 900;
-  src: local("Montserrat Black"), local("Montserrat-Black"), url('fonts/Montserrat-Black.woff') format('woff'); }
+  src: local("Montserrat Black"), local("Montserrat-Black"), font-url('Montserrat-Black.woff') format('woff'); }
 
 @font-face {
   font-family: 'LeagueGothic';
   font-style: normal;
   font-weight: 200;
-  src: local("LeagueGothic"), local("LeagueGothic"), url('fonts/LeagueGothic-regular.woff') format('woff'); }
+  src: local("LeagueGothic"), local("LeagueGothic"), font-url('LeagueGothic-regular.woff') format('woff'); }