Skip to content

E
edx-platform
Commit bcf47756 by Brian Talbot
Options

studio - alerts: removed banners as a design pattern (not using them) and… 

studio - alerts: removed banners as a design pattern (not using them) and corrected advanced setting links and smoothscrolling
parent c8cceb71
Showing with 10 additions and 183 deletions
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
});
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;
}
}
}
// ====================
......
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>
......
cms/templates/ux-alerts.html
......@@ -104,22 +104,6 @@
<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>
<span class="tip">persistant, static messages to the user</span>
</header>
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment