Skip to content
Snippets Groups Projects
Commit bcf47756 authored by Brian Talbot's avatar Brian Talbot
Browse files

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
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cms/static/js/views/settings/advanced_view.js
+ 5
− 3
View file @ bcf47756
......@@ -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
− 139
View file @ bcf47756
......@@ -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
+ 3
− 3
View file @ bcf47756
......@@ -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
+ 0
− 37
View file @ bcf47756
......@@ -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>
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