From a8018910a0ed600db47188f67a2c3359d4984451 Mon Sep 17 00:00:00 2001
From: Heather Billings <heatherjaybillings@gmail.com>
Date: Wed, 21 Oct 2015 16:53:52 -0500
Subject: [PATCH] some cleanup related to #90

---
 static/css/cityhallmonitor.css   |  4 +--
 static/js/cityhallmonitor.js     | 17 +++++++---
 static/sass/cityhallmonitor.scss |  3 +-
 templates/notifications.html     |  2 +-
 templates/search.html            |  2 +-
 templates/subscriptions.html     | 53 +++++++++++++++-----------------
 6 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/static/css/cityhallmonitor.css b/static/css/cityhallmonitor.css
index 8dc98e9..4b54b83 100644
--- a/static/css/cityhallmonitor.css
+++ b/static/css/cityhallmonitor.css
@@ -112,14 +112,14 @@ body {
 .alert-box {
   margin: 40px auto; }
 
-#post-subscribe-msg {
+.status-msg {
   text-align: left;
   padding: 0 0 0 10px;
   font-family: "Apres RE", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #888;
   line-height: 1.4em; }
-  #post-subscribe-msg.error {
+  .status-msg.error {
     color: #ce4d28; }
 
 /* notifications.html */
diff --git a/static/js/cityhallmonitor.js b/static/js/cityhallmonitor.js
index 6c83268..9ed57b7 100644
--- a/static/js/cityhallmonitor.js
+++ b/static/js/cityhallmonitor.js
@@ -1,6 +1,15 @@
 $ = jQuery;
 
 var handle_subscribe = function(event, url) {
+    var showMsg = function(msg, type, detail){
+      $('#post-subscribe-msg').text(msg + (detail ? detail : ''));
+      if ($('#post-subscribe-msg').hasClass('error') && type != 'error') {
+        $('#post-subscribe-msg').removeClass('error');
+      } else if (type == 'error'){
+        $('#post-subscribe-msg').addClass('error');
+      }
+      $('#post-subscribe-msg').show();
+    }
     var email = $('#search-subscribe-email').val().trim();
     if(!email) {
         $('#post-subscribe-msg').fadeIn('slow')
@@ -21,15 +30,13 @@ var handle_subscribe = function(event, url) {
         dataType: 'json',
         timeout: 20000,
         error: function(xhr, status, err) {
-            alert('Error making subscription: '+err);
+            showMsg('Error making subscription: ', 'error', err);
         },
         success: function(data) {
             if(data.error) {
-                $('#post-subscribe-msg').fadeIn('slow')
-                                        .text('Error making subscription: '+ data.error);
+                showMsg('Error making subscription: ', 'error', data.error);
             } else {
-                $('#post-subscribe-msg').fadeIn('slow')
-                                        .text('We sent you an email. Click the link in it to confirm your subscription.');
+                showMsg('We sent you an email. Click the link in it to confirm your subscription.', 'success');
             }
         }
     });
diff --git a/static/sass/cityhallmonitor.scss b/static/sass/cityhallmonitor.scss
index e496270..92ef8b4 100644
--- a/static/sass/cityhallmonitor.scss
+++ b/static/sass/cityhallmonitor.scss
@@ -118,7 +118,7 @@ body {
     margin: 40px auto;
 }
 
-#post-subscribe-msg {
+.status-msg {
     text-align: left;
     padding: 0 0 0 10px;
     font-family: $font-family-sans-serif;
@@ -130,6 +130,7 @@ body {
     }
 }
 
+
 /* notifications.html */
 #notifications-list {
     table.columns {
diff --git a/templates/notifications.html b/templates/notifications.html
index 3732ff6..9e32d84 100644
--- a/templates/notifications.html
+++ b/templates/notifications.html
@@ -65,7 +65,7 @@ <h2>Manage subscriptions</h2>
       var self = this;
       // Server-side code expects an array
       var sid = [$(this).attr("data-sid")];
-      // TODO: add visible state indication for loading and deleted searches
+      // TODO: add visible state indication for loading
       $.ajax({
           url: '{% url "unsubscribe" %}',
           type: 'GET',
diff --git a/templates/search.html b/templates/search.html
index 4ef74f4..af49598 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -44,7 +44,7 @@ <h5>We found <span class="num-of-results"><%= total %> results</span> matching <
                         <input type="submit" value="Subscribe" id="search-subscribe" class="button postfix small"/>
                     </div>
                     <div class="small-4 columns">
-                      <p id="post-subscribe-msg"></p>
+                      <p id="post-subscribe-msg" class="status-msg"></p>
                     </div>
                 </div>
             </form>
diff --git a/templates/subscriptions.html b/templates/subscriptions.html
index e01e323..a3b6e65 100644
--- a/templates/subscriptions.html
+++ b/templates/subscriptions.html
@@ -1,29 +1,21 @@
 {% extends "base.html" %}
 
 {% block content %}
-
-<div id="manage-alert" data-alert class="alert-box alert small-8 small-offset-2 columns" style="display: none;">
-  <span></span>
-  <a href="#" class="close">&times;</a>  
-</div>
-
-<div id="manage-alert-success" data-alert class="alert-box info small-8 small-offset-2 columns" style="display: none;">
-    <span>Your email has been sent!</span>
-    <a href="#" class="close">&times;</a>  
-</div>
-
 <div class="row">
     <div class="small-8 small-offset-2 columns">
         <h2>Manage subscriptions</h2>
         <p>Enter your email address below, and we'll send you a link to manage your subscriptions.</p>
         <form>
             <div class="row collapse">
-                <div class="small-10 columns">
+                <div class="small-6 columns">
                     <input type="text" id="manage-subs" placeholder="Email address you subscribed with">
                 </div>
-                <div class="small-2 columns end">
+                <div class="small-2 columns">
                     <input type="submit" value="Submit" id="manage-submit" class="button tiny postfix">
                 </div>
+                <div class="small-4 columns">
+                  <p id="manage-alert" class="status-msg"><span></span></p>
+                </div>
             </div>
         </form>
     </div>
@@ -33,25 +25,28 @@ <h2>Manage subscriptions</h2>
 
 {% block extra_scripts %}
 
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
-<script type="text/javascript" src="//cdn.knightlab.com/libs/purpleline/latest/js/foundation.alert.js"></script>
 <script type="text/javascript">
 
-function manage_alert(error, detail) {
-    $('#manage-alert > span').html(error + (detail ? ' ['+detail+']' : ''));
+function manage_alert(msg, detail, type) {
+    $('#manage-alert > span').html(msg + (detail ? detail : ''));
+    if ($('#manage-alert').hasClass('error') && type != 'error') {
+      $('#manage-alert').removeClass('error');
+    } else if (type == 'error'){
+      $('#manage-alert').addClass('error');
+    }
     $('#manage-alert').show();
 }
 
 $(function() {
     $(document).foundation();
 
-    $('#manage-submit').click(function(event) {  
-        $('#manage-alert, #manage-alert-success').hide();
-         
-        var email = $('#manage-subs').val().trim();       
+    $('#manage-submit').click(function(event) {
+        $('#manage-alert').hide();
+
+        var email = $('#manage-subs').val().trim();
         if(email) {
             $('#manage-submit').prop('disabled', true);
-            
+
             $.ajax({
                 url: '{% url "send_notifications_link" %}',
                 type: 'GET',
@@ -62,20 +57,20 @@ <h2>Manage subscriptions</h2>
                 dataType: 'json',
                 timeout: 20000,
                 error: function(xhr, status, err) {
-                    manage_alert('Error sending link', err);
+                    manage_alert('Error sending link', err, "error");
                 },
                 success: function(data) {
                     if(data.error) {
-                        manage_alert('Error sending link', data.error);
-                    } else {               
-                        $('#manage-alert-success').show();
+                        manage_alert('Error sending link: ', data.error, "error");
+                    } else {
+                        manage_alert('A link has been sent to ', email, "success");
                     }
                 },
                 complete: function() {
-                    $('#manage-submit').prop('disabled', false);                
+                    $('#manage-submit').prop('disabled', false);
                 }
-            });    
-        }    
+            });
+        }
     });
 });