Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - adding in view-based banners UI tweaks and removing global banner UI for now

Browse Source
This commit is contained in:
Brian Talbot
2013-04-04 16:46:38 -04:00
parent ea1387a5f9
commit 3c3a6e7503
5 changed files with 259 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cms/static/sass/_cms_mixins.scss
View File

@@ -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;
}
}

168
cms/static/sass/elements/_alerts.scss
View File

@@ -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 {

5
cms/templates/base.html
View File

@@ -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>

21
cms/templates/overview.html
View File

@@ -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>

85
cms/templates/ux-alerts.html
View File

@@ -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>