studio - alerts: removed banners as a design pattern (not using them) and corrected advanced setting links and smoothscrolling
This commit is contained in:
Brian Talbot
@@ -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");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
@@ -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">␡</i>
|
||||
<span class="label">close alert</span>
|
||||
</a>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user