From 3c3a6e7503cfa289f0d9f8ad740459798aa0142a Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Thu, 4 Apr 2013 16:46:38 -0400
Subject: [PATCH] studio - adding in view-based banners UI tweaks and removing
 global banner UI for now

---
 cms/static/sass/_cms_mixins.scss      |   6 +-
 cms/static/sass/elements/_alerts.scss | 168 +++++++++++++++++++++++++-
 cms/templates/base.html               |   5 +-
 cms/templates/overview.html           |  21 ++++
 cms/templates/ux-alerts.html          |  85 ++++++++++---
 5 files changed, 259 insertions(+), 26 deletions(-)

diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index 5bcbc11d95..73a566ccb3 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -185,14 +185,14 @@
 // button - grey dark
 @mixin dark-grey-button {
 	@include button;
-	border: 1px solid #1c1e20;
+	border: 1px solid $gray-d2;
 	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $extraDarkGrey;
+	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)) $gray-d1;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
 	color: $white;
 
 	&:hover {
-		background-color: #595f64;
+		background-color: $gray-d4;
 		color: $white;
 	}
 }
diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss
index 80b489a3e9..87af5a5915 100644
--- a/cms/static/sass/elements/_alerts.scss
+++ b/cms/static/sass/elements/_alerts.scss
@@ -2,13 +2,19 @@
 // ====================
 
 // shared
-.wrapper-notification, .wrapper-alert, .prompt {
+.wrapper-notification, .wrapper-alert, .prompt, .wrapper-banner {
   @include box-sizing(border-box);
+
+  .copy {
+    @include font-size(13);
+  }
+}
+
+.wrapper-notification, .wrapper-alert, .prompt {
   background: $gray-d3;
   border-top: 4px solid $gray-d4;
 
   .copy {
-    @include font-size(13);
     color: $gray-l2;
 
     .title {
@@ -24,7 +30,7 @@
   }
 }
 
-.alert, .notification, .prompt {
+.alert, .notification, .prompt, .banner {
 
   // types - confirm
   &.confirm {
@@ -226,6 +232,8 @@
   }
 }
 
+// ====================
+
 // notifications
 .wrapper-notification {
   @include clearfix();
@@ -595,6 +603,137 @@
   }
 }
 
+// ====================
+
+// 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-top: -($baseline*1.5);
+  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 {
 
@@ -608,7 +747,7 @@
     }
   }
 
-  // prompt showing
+  // prompt showing/hiding
   &.prompt-is-shown {
 
     .wrapper-view {
@@ -627,6 +766,7 @@
     }
   }
 
+  // alert showing/hiding
   .wrapper-alert {
     display: none;
 
@@ -635,6 +775,7 @@
     }
   }
 
+  // notification showing/hiding
   .wrapper-notification {
     bottom: -($notification-height);
 
@@ -651,8 +792,19 @@
       @include anim-notificationsSlideUpDown(2s);
     }
   }
+
+  // banner showing/hiding
+  .wrapper-banner {
+    display: none;
+
+    &.is-shown {
+      display: block;
+    }
+  }
 }
 
+// ====================
+
 // temporary
 body.uxdesign.alerts {
 
@@ -667,6 +819,14 @@ body.uxdesign.alerts {
     margin-right: flex-gutter();
     padding: $baseline ($baseline*1.5);
 
+    > section {
+      margin-bottom: ($baseline*2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
     ul {
 
       li {
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 74f68a79ee..3efd630a75 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -53,14 +53,17 @@
     </script>
 
     <!-- view -->
-    <div class="wrapper wrapper-view">    
+    <div class="wrapper wrapper-view">
       <%include file="widgets/header.html" />
 
       <%block name="view_alerts"></%block>
+      <%block name="view_banners"></%block>
 
       <%block name="content"></%block>
+      
       <%include file="widgets/footer.html" />
       <%include file="widgets/tender.html" />
+      
       <%block name="view_notifications"></%block>
     </div>
 
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index 744add76e3..212e386d71 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -217,3 +217,24 @@
   </div>
   <footer></footer>
 </%block>
+
+<%block name="view_banners">
+<!-- banner - view - coursenote -->
+<div class="wrapper wrapper-banner wrapper-banner-view wrapper-banner-view-coursenote is-shown" id="banner-coursenote">
+  <div class="banner coursenote has-actions actions-are-hidden">
+    <div class="copy">
+      <h2 class="title title-3 sr">Share Your Course</h2>
+      <p>Students can enroll in ${context_course.display_name_with_default} at: <a href="http://edge.edx.org/org/courseno/coursename" 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>
\ No newline at end of file
diff --git a/cms/templates/ux-alerts.html b/cms/templates/ux-alerts.html
index f462b90ef9..e1454db596 100644
--- a/cms/templates/ux-alerts.html
+++ b/cms/templates/ux-alerts.html
@@ -25,6 +25,18 @@
         $(this.hash).addClass('is-fleeting');
     });
 
+    $('.hide-banner').click(function(e) {
+        (e).preventDefault();          
+        $('.wrapper-banner').removeClass('is-hiding');
+        $(this.hash).addClass('is-hiding');
+    });
+
+    $('.show-banner').click(function(e) {
+        (e).preventDefault();          
+        $('.wrapper-banner').removeClass('is-shown');
+        $(this.hash).addClass('is-shown');
+    });
+
     $('.hide-alert').click(function(e) {
         (e).preventDefault();          
         $('.wrapper-alert').removeClass('is-hiding');
@@ -57,7 +69,7 @@
   <header class="mast has-actions has-subtitle">
     <div class="title">
       <span class="title-sub">UX Design</span>
-      <h1 class="title-1">Alerts &amp; Notifications</h1>
+      <h1 class="title-1">System Notifications</h1>
     </div>
   </header>
 </div>
@@ -65,6 +77,22 @@
 <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>
@@ -162,7 +190,7 @@
 
     <div class="copy">
       <h2 class="title title-3">You are editing a draft</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -186,7 +214,7 @@
 
     <div class="copy">
       <h2 class="title title-3">A Newer Version of This Exists</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -210,7 +238,7 @@
 
     <div class="copy">
       <h2 class="title title-3">Your changes have been saved</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
     </div>
   </div>
 </div>
@@ -222,7 +250,7 @@
 
     <div class="copy">
       <h2 class="title title-3">Your changes have been saved</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
     </div>
 
     <a href="#" rel="view" class="action action-alert-close">
@@ -239,7 +267,7 @@
 
     <div class="copy">
       <h2 class="title title-3">X Has been removed</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
   </div>
 </div>
@@ -251,7 +279,7 @@
 
     <div class="copy">
       <h2 class="title title-3">We're sorry, there was a error with Studio</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
   </div>
 </div>
@@ -263,7 +291,7 @@
 
     <div class="copy">
       <h2 class="title title-3">There was an error in your submission</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
     </div>
 
     <nav class="nav-actions">
@@ -284,7 +312,7 @@
 
     <div class="copy">
       <h2 class="title title-3">Studio will be unavailable this weekend</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -308,7 +336,7 @@
 
     <div class="copy">
       <h2 class="title title-3">Studio will be unavailable this weekend</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
   </div>
 </div>
@@ -320,7 +348,7 @@
 
     <div class="copy">
       <h2 class="title title-3">Your Studio account has been created, but needs to be activated</h2>
-      <p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
+      <p class="message">Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>
     </div>
 
     <nav class="nav-actions">
@@ -346,7 +374,7 @@
     
     <div class="copy">
       <h2 class="title title-3">You've Made Some Changes</h2>
-      <p>Your changes will not take effect until you <strong>save your progress</strong>.</p>
+      <p class="message">Your changes will not take effect until you <strong>save your progress</strong>.</p>
     </div>
 
     <nav class="nav-actions">
@@ -370,7 +398,7 @@
     
     <div class="copy">
       <h2 class="title title-3">A Newer Version of This Exists</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -394,7 +422,7 @@
     
     <div class="copy">
       <h2 class="title title-3">Are You Sure You Want to Edit That?</h2>
-      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+      <p class="message">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
     </div>
 
     <nav class="nav-actions">
@@ -440,7 +468,7 @@
     
     <div class="copy">
       <h2 class="title title-3">Fun Fact:</h2>
-      <p>Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
+      <p class="message">Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
     </div>
 
     <a href="#" rel="view" class="action action-notification-close">
@@ -457,7 +485,7 @@
   <div class="prompt confirm">
     <div class="copy">
       <h2 class="title title-3">Delete "Introduction &amp; Overview"?</h2>
-      <p>Deleting a section cannot be undone and its contents cannot be recovered.</p>
+      <p class="message">Deleting a section cannot be undone and its contents cannot be recovered.</p>
     </div>
 
     <nav class="nav-actions">
@@ -479,7 +507,7 @@
   <div class="prompt warning">
     <div class="copy">
       <h2 class="title title-3">Use Advanced Problem Editor?</h2>
-      <p>If you proceed, you cannot edit this problem using the simple problem editor.</p>
+      <p class="message">If you proceed, you cannot edit this problem using the simple problem editor.</p>
     </div>
 
     <nav class="nav-actions">
@@ -501,7 +529,7 @@
   <div class="prompt error">
     <div class="copy">
       <h2 class="title title-3">There Were Errors in Your Submission</h2>
-      <p>Please correct the errors noted on the page and try again.</p>
+      <p class="message">Please correct the errors noted on the page and try again.</p>
     </div>
 
     <nav class="nav-actions">
@@ -514,4 +542,25 @@
     </nav>
   </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>
\ No newline at end of file