From bcf47756102c000964e31d7bef0b12f0c900cc2c Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 8 Apr 2013 13:47:01 -0400
Subject: [PATCH] studio - alerts: removed banners as a design pattern (not
 using them) and corrected advanced setting links and smoothscrolling

---
 cms/static/js/views/settings/advanced_view.js |   8 +-
 cms/static/sass/elements/_alerts.scss         | 141 +-----------------
 cms/templates/settings_advanced.html          |   6 +-
 cms/templates/ux-alerts.html                  |  37 -----
 4 files changed, 10 insertions(+), 182 deletions(-)

diff --git a/cms/static/js/views/settings/advanced_view.js b/cms/static/js/views/settings/advanced_view.js
index 5963545f54..536f23004e 100644
--- a/cms/static/js/views/settings/advanced_view.js
+++ b/cms/static/js/views/settings/advanced_view.js
@@ -32,7 +32,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
 
         var listEle$ = this.$el.find('.course-advanced-policy-list');
         listEle$.empty();
-        
+
         // b/c we've deleted all old fields, clear the map and repopulate
         this.fieldToSelectorMap = {};
         this.selectorToField = {};
@@ -130,6 +130,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         }
     },
     saveView : function(event) {
+        smoothScrollTop(event);
         // TODO one last verification scan:
         //    call validateKey on each to ensure proper format
         //    check for dupes
@@ -148,6 +149,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         });
     },
     revertView : function(event) {
+        event.preventDefault();
         var self = event.data;
         self.model.deleteKeys = [];
         self.model.clear({silent : true});
@@ -160,7 +162,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
         var newKeyId = _.uniqueId('policy_key_'),
         newEle = this.template({ key : key, value : JSON.stringify(value, null, 4),
             keyUniqueId: newKeyId, valueUniqueId: _.uniqueId('policy_value_')});
-        
+
         this.fieldToSelectorMap[key] = newKeyId;
         this.selectorToField[newKeyId] = key;
         return newEle;
@@ -171,4 +173,4 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
     blurInput : function(event) {
         $(event.target).prev().removeClass("is-focused");
     }
-});
\ No newline at end of file
+});
diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss
index 3e0dc65849..2ce20e1a0a 100644
--- a/cms/static/sass/elements/_alerts.scss
+++ b/cms/static/sass/elements/_alerts.scss
@@ -2,7 +2,7 @@
 // ====================
 
 // shared
-.wrapper-notification, .wrapper-alert, .prompt, .wrapper-banner {
+.wrapper-notification, .wrapper-alert, .prompt {
   @include box-sizing(border-box);
 
   .copy {
@@ -29,7 +29,7 @@
   }
 }
 
-.alert, .notification, .prompt, .banner {
+.alert, .notification, .prompt {
 
   // types - confirm
   &.confirm {
@@ -601,134 +601,6 @@
 
 // ====================
 
-// banners
-.wrapper-banner {
-  width: 100%;
-  padding: $baseline;
-
-  .banner {
-    @include box-sizing(border-box);
-    @include clearfix();
-    margin: 0 auto;
-    width: flex-grid(12);
-    max-width: $fg-max-width;
-    min-width: $fg-min-width;
-
-    .icon, .copy {
-      float: left;
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .icon {
-      @include transition (color 0.5s ease-in-out);
-      @include font-size(18);
-      width: flex-grid(1, 12);
-      margin-right: flex-gutter();
-      text-align: right;
-    }
-
-    .copy {
-      @include font-size(13);
-      width: flex-grid(10, 12);
-
-
-      .title {
-        margin-bottom: 0;
-      }
-    }
-
-    // with actions
-    &.has-actions {
-
-      .copy {
-        width: flex-grid(8, 12);
-        margin-right: flex-gutter();
-      }
-
-      .nav-actions {
-        width: flex-grid(4, 12);
-        float: right;
-        margin-top: ($baseline/2);
-        text-align: right;
-
-        .nav-item {
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: ($baseline/2);
-
-          &:last-child {
-            margin-right: 0;
-          }
-
-          .action-primary {
-
-          }
-
-          .action-secondary {
-            @include font-size(13);
-          }
-        }
-      }
-    }
-
-    // has hidden actions
-    &.actions-are-hidden {
-
-      .nav-actions {
-        @include transition(opacity 0.25s ease-in-out);
-        opacity: 0.0;
-      }
-
-      &:hover {
-
-        .nav-actions {
-          opacity: 1.0;
-        }
-      }
-    }
-  }
-}
-
-// view banner
-.wrapper-banner-view {
-  @include linear-gradient($gray-l2 0%, $gray-l4 2%, $gray-l4 98%, $gray-l2 100%);
-  margin-bottom: $baseline;
-
-  .banner {
-
-    .copy {
-      margin-top: ($baseline/4);
-      color: $gray-d2;
-    }
-
-    &.has-actions {
-
-      .nav-actions {
-        margin-top: 0;
-
-        .action-primary {
-          @include dark-grey-button();
-          @include font-size(12);
-        }
-      }
-    }
-  }
-}
-
-// view banner - course note
-.banner.coursenote {
-
-  .copy {
-
-    .link-course {
-      margin-left: ($baseline/4);
-    }
-  }
-}
-
-// ====================
-
 // js enabled
 .js {
 
@@ -787,15 +659,6 @@
       @include anim-notificationsSlideUpDown(2s);
     }
   }
-
-  // banner showing/hiding
-  .wrapper-banner {
-    display: none;
-
-    &.is-shown {
-      display: block;
-    }
-  }
 }
 
 // ====================
diff --git a/cms/templates/settings_advanced.html b/cms/templates/settings_advanced.html
index f40b7e15a9..4cd1a4acd9 100644
--- a/cms/templates/settings_advanced.html
+++ b/cms/templates/settings_advanced.html
@@ -121,10 +121,10 @@ editor.render();
       <h3 class="sr">Notification Actions</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="action-primary save-button">Save Changes</a>
+          <a href="" class="action-primary save-button">Save Changes</a>
         </li>
         <li class="nav-item">
-          <a href="#" class="action-secondary cancel-button">Cancel</a>
+          <a href="" class="action-secondary cancel-button">Cancel</a>
         </li>
       </ul>
     </nav>
@@ -143,7 +143,7 @@ editor.render();
       <p>Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.</p>
     </div>
 
-    <a href="#" rel="view" class="action action-alert-close">
+    <a href="" rel="view" class="action action-alert-close">
       <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
       <span class="label">close alert</span>
     </a>
diff --git a/cms/templates/ux-alerts.html b/cms/templates/ux-alerts.html
index 8eb2080967..bc4f135f63 100644
--- a/cms/templates/ux-alerts.html
+++ b/cms/templates/ux-alerts.html
@@ -102,22 +102,6 @@
 <div class="wrapper-content wrapper">
   <section class="content">
     <article class="content-primary" role="main">
-      <section>
-        <header>
-          <h2 class="title-2">Banners</h2>
-          <span class="tip">app/global-level or view specific information</span>
-        </header>
-
-        <p>In Studio, banners are meant to communicate larger app and system-level status messages as well as static view specific information</p>
-
-        <h3 class="title-3">Different Static Examples of Banners</h3>
-        <p>Note: banners will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
-
-        <ul>
-          <li><a href="#banner-view" class="show-banner">Show View-level Banner</a></li>
-        </ul>
-      </section>
-
       <section>
         <header>
           <h2 class="title-2">Alerts</h2>
@@ -568,24 +552,3 @@
   </div>
 </div>
 </%block>
-
-<%block name="view_banners">
-<!-- banner - view - coursenote -->
-<div class="wrapper wrapper-banner wrapper-banner-view wrapper-banner-view-coursenote" id="banner-view">
-  <div class="banner coursenote has-actions actions-are-hidden">
-    <div class="copy">
-      <h2 class="title title-3 sr">Share Your Course</h2>
-      <p class="message">Students can enroll in $COURSENAME at: <a href="" rel="lms" class="link-course">http://edge.edx.org/org/courseno/coursename</a></p>
-    </div>
-
-    <nav class="nav-actions">
-      <h3 class="sr">Banner Actions</h3>
-      <ul>
-        <li class="nav-item">
-          <a href="#" class="action-primary">Send an invitation</a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-</%block>