studio - alerts: basic layout and general alert styling WIP

2013-02-22 13:52:24 -05:00
parent de2b05bf66
commit d7bbfbc707
6 changed files with 314 additions and 64 deletions
--- a/cms/static/sass/_alerts.scss
+++ b/cms/static/sass/_alerts.scss
@@ -102,19 +102,19 @@

 // alerts
 .wrapper-alert {
-  @include clearfix();
  @include box-sizing(border-box);
-  @include transition (opacity 2.0s ease-in-out 5s);
-  @include box-shadow(0 1px 2px rgba(0,0,0,0.2));
+  @include transition (opacity 2.0s ease-in-out 5s, border 0.5s ease-in-out);
+  @include box-shadow(0 1px 1px $white, inset 0 2px 5px $shadow-d1);
  position: relative;
  top: -($baseline*1.5);
  z-index: 100;
  overflow: hidden;
  width: 100%;
  opacity: 0;
-  border-bottom: 2px solid $blue-d2;
+  border-bottom: 4px solid $gray-l1;
+  border-top: 1px solid $black;
  padding: $baseline ($baseline*2);
-  background: $blue;
+  background: $gray-d3;

  &.is-shown {
    bottom: 0;
@@ -122,27 +122,95 @@
  }

  &.wrapper-alert-warning {
-  	background: $orange-s1;
-    border-color: $orange-d1;
+    border-bottom-color: $orange;
+
+    .icon-warning {
+      color: $orange;
+    }
+
+
+    &:hover {
+      border-bottom-color: $orange-s2;
+
+      .icon-warning {
+        color: $orange-s2;
+      }
+    }
  }

  &.wrapper-alert-error {
-    border-color: shade($red, 50%);
-    color: $white;
+    border-bottom-color: $red;
+
+    .icon-error {
+      color: $red;
+    }
+
+
+    &:hover {
+      border-bottom-color: $red-s2;
+
+      .icon-error {
+        color: $red-s2;
+      }
+    }
  }

-  &.wrapper-alert-confirm {
-    border-color: shade($green, 30%);
+  &.wrapper-alert-confirmation {
+    border-bottom-color: $green;
+
+    .icon-confirmation {
+      color: $green;
+    }
+
+
+    &:hover {
+      border-bottom-color: $green-s2;
+
+      .icon-confirmation {
+        color: $green-s2;
+      }
+    }
  }

-  &.wrapper-alert-inform {
-    border-color: $blue-d1;
+  &.wrapper-alert-announcement {
+    border-bottom-color: $blue;
+
+    .icon-announcement {
+      color: $blue;
+    }
+
+
+    &:hover {
+      border-bottom-color: $blue-s2;
+
+      .icon-announcement {
+        color: $blue-s2;
+      }
+    }
+  }
+
+  &.wrapper-alert-step-required {
+    border-bottom-color: $pink;
+
+    .icon-step-required {
+      color: $pink;
+    }
+
+
+    &:hover {
+      border-bottom-color: $pink-s2;
+
+      .icon-announcement {
+        color: $pink-s2;
+      }
+    }
  }
 }

 .alert {
 	@include font-size(14);
  @include box-sizing(border-box);
+  @include clearfix();
  margin: 0 auto;
  width: flex-grid(12);
  max-width: $fg-max-width;
@@ -153,40 +221,47 @@
    font-weight: 700;
  }

+  .icon, .copy {
+    float: left;
+  }
+
+  .icon {
+    @include transition (color 0.5s ease-in-out);
+    @include font-size(28);
+    width: flex-grid(1, 12);
+    margin-right: flex-gutter();
+    text-align: right;
+  }
+
  .copy {
    @include font-size(14);
+    width: flex-grid(10, 12);
+    color: $gray-l2;

-    .icon {
-      @include font-size(24);
-      @include border-radius(50px);
-      display: inline-block;
-      vertical-align: top;
-      margin-right: ($baseline/2);
-      padding: ($baseline/4) ($baseline/2) ($baseline/10) ($baseline/2);
-    }
-
-    p {
-      width: flex-grid(8, 9);
-      display: inline-block;
-      vertical-align: top;
+    .title {
+      margin-bottom: 0;
+      color: $white;
    }
  }

  &.has-actions {
  	
+    .icon {
+      width: flex-grid(1, 12);
+    }
+
  	.copy {
-  		float: left;
  		width: flex-grid(8, 12);
  		margin-right: flex-gutter();
  	}

-  	.actions {
-  	  float: right;
-  	  width: flex-grid(4, 12);
-  	  margin-top: ($baseline/2);
+  	.nav-actions {
+  	  width: flex-grid(3, 12);
+      float: right;
+      margin-top: ($baseline/2);
  	  text-align: right;

-  	  li {
+  	  .nav-item {
  	    display: inline-block;
  	    vertical-align: middle;
  	    margin-right: ($baseline/2);
@@ -200,15 +275,23 @@

  // alert types
  &.warning {
-  	color: $gray-d2;
+  	
+  }

-  	.copy {
+  &.error {
+
+  }
+
+  &.confirmation {
+
+  }
+
+  &.announcement {
+
+  }
+
+  &.step-required {

-  		.icon {
-  			background: $gray-d2;
-  			color: $orange-s1;
-  		}
-  	}
  }
 }

--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -50,6 +50,51 @@ h1 {

 // ====================

+// typography - basic
+.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
+  font-weight: 600;
+  color: $gray-d3;
+  margin: 0;
+  padding: 0;
+}
+
+.title-1 {
+  @include font-size(32);
+  margin-bottom: ($baseline*1.5);
+}
+
+.title-2 {
+  @include font-size(24);
+  margin-bottom: $baseline;
+}
+
+.title-3 {
+  @include font-size(16);
+  margin-bottom: ($baseline/2);
+}
+
+.title-4 {
+  @include font-size(14);
+  margin-bottom: $baseline;
+  font-weight: 500
+}
+
+.title-5 {
+  @include font-size(14);
+  color: $gray-l1;
+  margin-bottom: $baseline;
+  font-weight: 500
+}
+
+.title-6 {
+  @include font-size(14);
+  color: $gray-l2;
+  margin-bottom: $baseline;
+  font-weight: 500
+}
+
+// ====================
+
 // layout - basic page header
 .wrapper-mast {
  margin: 0;
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -5,7 +5,7 @@
  margin: 0 0 ($baseline*1.5) 0;
  padding: $baseline;
  border-bottom: 1px solid $gray;
-  @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+  @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2));
  background: $white;
  height: 76px;
  position: relative;
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -63,6 +63,23 @@ $pink-u1: desaturate($pink,15%);
 $pink-u2: desaturate($pink,30%);
 $pink-u3: desaturate($pink,45%);

+$red: rgb(178, 6, 16);
+$red-l1: tint($red,20%);
+$red-l2: tint($red,40%);
+$red-l3: tint($red,60%);
+$red-l4: tint($red,80%);
+$red-l5: tint($red,90%);
+$red-d1: shade($red,20%);
+$red-d2: shade($red,40%);
+$red-d3: shade($red,60%);
+$red-d4: shade($red,80%);
+$red-s1: saturate($red,15%);
+$red-s2: saturate($red,30%);
+$red-s3: saturate($red,45%);
+$red-u1: desaturate($red,15%);
+$red-u2: desaturate($red,30%);
+$red-u3: desaturate($red,45%);
+
 $green: rgb(37, 184, 90);
 $green-l1: tint($green,20%);
 $green-l2: tint($green,40%);
@@ -123,7 +140,6 @@ $shadow-d1: rgba(0,0,0,0.4);
 $baseFontColor: #3c3c3c;
 $offBlack: #3c3c3c;
 $orange: #edbd3c;
-$red: #b20610;
 $green: #108614;
 $lightGrey: #edf1f5;
 $mediumGrey: #b0b6c2;
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -106,6 +106,135 @@
 </%block>

 <%block name="content">
+  <!-- alert: you're editing a draft -->
+  <div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
+    <div class="alert warning has-actions">
+      <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
+
+      <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>
+      </div>
+
+      <nav class="nav-actions">
+        <h3 class="sr">Alert Actions</h3>
+        <ul>
+          <li class="nav-item">
+            <a href="#" rel="external" class="button save-button">Save Draft</a>
+          </li>
+          <li class="nav-item">
+            <a href="#" rel="external" class="button cancel-button">Disgard Draft</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <!-- alert: save confirmed -->
+  <div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
+    <div class="alert confirmation">
+      <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
+
+      <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>
+      </div>
+    </div>
+  </div>
+
+  <!-- alert: delete confirmed -->
+  <div class="wrapper wrapper-alert wrapper-alert-confirmation is-shown">
+    <div class="alert confirmation">
+      <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
+
+      <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>
+      </div>
+    </div>
+  </div>
+
+  <!-- alert: system error -->
+  <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
+    <div class="alert error">
+      <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
+
+      <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>
+      </div>
+    </div>
+  </div>
+
+  <!-- alert: user error -->
+  <div class="wrapper wrapper-alert wrapper-alert-error is-shown">
+    <div class="alert error has-actions">
+      <i class="ss-icon ss-symbolicons-block icon icon-error">&#x26A0;</i>
+
+      <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>
+      </div>
+
+      <nav class="nav-actions">
+        <h3 class="sr">Alert Actions</h3>
+        <ul>
+          <li class="nav-item">
+            <a href="#" rel="external" class="button save-button">Replace with Draft</a>
+          </li>
+          <li class="nav-item">
+            <a href="#" rel="external" class="button cancel-button">Delete Draft</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <!-- alert: announcement w/ actions -->
+  <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
+    <div class="alert announcement has-actions">
+      <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
+
+      <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>
+      </div>
+
+      <nav class="nav-actions">
+        <h3 class="sr">Alert Actions</h3>
+        <ul>
+          <li class="nav-item">
+            <a href="#" rel="external">Contact edX Staff</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+
+  <!-- alert: announcement -->
+  <div class="wrapper wrapper-alert wrapper-alert-announcement is-shown">
+    <div class="alert announcement">
+      <i class="ss-icon ss-symbolicons-block icon icon-announcement">&#x1F4E2;</i>
+
+      <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>
+      </div>
+    </div>
+  </div>
+
+  <!-- alert: step required -->
+  <div class="wrapper wrapper-alert wrapper-alert-step-required is-shown">
+    <div class="alert step-required">
+      <i class="ss-icon ss-symbolicons-block icon icon-step-required">&#xE0D1;</i>
+
+      <div class="copy">
+        <h2 class="title title-3">Your Studio account has been created, but needs to be activated</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>
+      </div>
+    </div>
+  </div>
+
  <div class="edit-subsection-publish-settings">
    <div class="settings">
      <h3>Section Release Date</h3>
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -31,29 +31,6 @@

 </%block>
 <%block name="content">
-
-  <!-- alert: you're editing a draft -->
-  <div class="wrapper wrapper-alert wrapper-alert-warning is-shown">
-    <div class="alert warning has-actions">
-      <div class="copy">
-        <i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
-      </div>
-
-      <nav class="nav-actions">
-        <h3 class="sr">Alert Actions</h3>
-        <ul>
-          <li class="nav-item">
-            <a href="#" rel="external" class="button save-button">Replace with Draft</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" rel="external" class="button cancel-button">Delete Draft</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-
  <div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
    <div class="inner-wrapper">
      <div class="alert editing-draft-alert wip-box">