Skip to content

E
edx-platform
Commit 3a178bab by Arthur Barrett
Options

Merge branch 'master' into feature/abarrett/lms-notes-app

parents 0e7573a2 abc67b5e
Showing with 812 additions and 648 deletions
cms/djangoapps/contentstore/features/checklists.py
......@@ -2,7 +2,7 @@
#pylint: disable=W0621
from lettuce import world, step
from nose.tools import assert_true, assert_equal
from nose.tools import assert_true, assert_equal, assert_in
from terrain.steps import reload_the_page
from selenium.common.exceptions import StaleElementReferenceException
......@@ -63,7 +63,7 @@ def i_select_a_link_to_the_course_outline(step):
@step('I am brought to the course outline page$')
def i_am_brought_to_course_outline(step):
assert_equal('Course Outline', world.css_find('.outline .title-1')[0].text)
assert_in('Course Outline', world.css_find('.outline .page-header')[0].text)
assert_equal(1, len(world.browser.windows))
......
cms/static/js/views/checklists_view.js
......@@ -22,6 +22,7 @@ CMS.Views.Checklists = Backbone.View.extend({
}
);
},
reset: true,
error: CMS.ServerError
}
);
......
cms/static/js/views/course_info_edit.js
......@@ -160,9 +160,15 @@ CMS.Views.ClassInfoUpdateView = Backbone.View.extend({
var targetModel = this.eventModel(event);
this.modelDom(event).remove();
var cacheThis = this;
targetModel.destroy({success : function (model, response) {
cacheThis.collection.fetch({success : function() {cacheThis.render();},
error : CMS.ServerError});
targetModel.destroy({
success: function (model, response) {
cacheThis.collection.fetch({
success: function() {
cacheThis.render();
},
reset: true,
error: CMS.ServerError
});
},
error : CMS.ServerError
});
......@@ -238,8 +244,7 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
initialize: function() {
var self = this;
this.model.fetch(
{
this.model.fetch({
complete: function() {
window.templateLoader.loadRemoteTemplate("course_info_handouts",
"/static/client_templates/course_info_handouts.html",
......@@ -249,9 +254,9 @@ CMS.Views.ClassInfoHandoutsView = Backbone.View.extend({
}
);
},
error : CMS.ServerError
}
);
reset: true,
error: CMS.ServerError
});
},
render: function () {
......
cms/static/js/views/settings/advanced_view.js
......@@ -155,6 +155,7 @@ CMS.Views.Settings.Advanced = CMS.Views.ValidatingView.extend({
self.model.clear({silent : true});
self.model.fetch({
success : function() { self.render(); },
reset: true,
error : CMS.ServerError
});
},
......
cms/static/sass/_base.scss
......@@ -8,11 +8,10 @@ html {
}
body {
@include font-size(16);
@extend .t-copy-base;
min-width: $fg-min-width;
background: $gray-l5;
line-height: 1.6;
color: $baseFontColor;
color: $gray-d2;
}
body, input {
......@@ -30,7 +29,7 @@ a {
}
h1 {
@include font-size(28);
@extend .t-title4;
font-weight: 300;
}
......@@ -51,43 +50,183 @@ h1 {
// ====================
// typography - basic
.page-header {
@extend .t-title3;
display: block;
font-weight: 600;
color: $gray-d3;
.subtitle {
@extend .t-title7;
position: relative;
top: ($baseline/4);
display: block;
color: $gray-l2;
font-weight: 400;
}
}
.section-header {
@extend .t-title4;
font-weight: 600;
.subtitle {
@extend .t-title7;
}
}
.area-header {
@extend .t-title6;
font-weight: 600;
.subtitle {
@extend .t-title8;
}
}
.area-subheader {
@extend .t-title7;
font-weight: 600;
.subtitle {
@extend .t-title9;
}
}
// ====================
// typography - primary content
.content-primary {
.section-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.area-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.area-subheader {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
}
// typography - primary content
.content-secondary {
.section-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
}
// ====================
// typography - loose headings (BT: needs to be removed once html is clean)
.title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
font-weight: 600;
}
// typography - primary content
.content-secondary {
.section-header {
color: $gray-d3;
margin: 0;
padding: 0;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
.content-header {
color: $gray-d3;
.subtitle {
color: $gray-l2;
}
}
}
// ====================
// typography - loose headings (BT: needs to be removed once html is clean)
.title-1 {
@include font-size(32);
@extend .t-title3;
margin-bottom: ($baseline*1.5);
}
.title-2 {
@include font-size(24);
@extend .t-title4;
margin-bottom: $baseline;
}
.title-3 {
@include font-size(18);
@extend .t-title5;
margin-bottom: ($baseline/2);
}
.title-4 {
@include font-size(14);
@extend .t-title7;
margin-bottom: $baseline;
font-weight: 500
}
.title-5 {
@include font-size(14);
@extend .t-title7;
color: $gray-l1;
margin-bottom: $baseline;
font-weight: 500
}
.title-6 {
@include font-size(14);
@extend .t-title7;
color: $gray-l2;
margin-bottom: $baseline;
font-weight: 500
......@@ -118,7 +257,6 @@ p, ul, ol, dl {
.mast, .metadata {
@include clearfix();
@include font-size(16);
position: relative;
max-width: $fg-max-width;
min-width: $fg-min-width;
......@@ -131,53 +269,8 @@ p, ul, ol, dl {
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
.title-sub {
@include font-size(14);
position: relative;
top: ($baseline/4);
display: block;
margin: 0;
color: $gray-l2;
font-weight: 400;
}
.title, .title-1 {
@include font-size(32);
margin: 0;
padding: 0;
font-weight: 600;
color: $gray-d3;
}
.nav-hierarchy {
@include font-size(14);
display: block;
margin: 0;
color: $gray-l2;
font-weight: 400;
.nav-item {
display: inline;
vertical-align: middle;
margin-right: ($baseline/4);
&:after {
content: ">>";
margin-left: ($baseline/4);
}
&:last-child {
margin-right: 0;
&:after {
content: none;
}
}
}
}
// layout with actions
.title {
.page-header {
width: flex-grid(12);
}
......@@ -185,7 +278,7 @@ p, ul, ol, dl {
&.has-actions {
@include clearfix();
.title {
.page-header {
float: left;
width: flex-grid(6,12);
margin-right: flex-gutter();
......@@ -210,22 +303,20 @@ p, ul, ol, dl {
// buttons
.button {
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2) !important;
font-weight: 400 !important;
padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
}
.new-button {
font-weight: 700 !important;
}
.view-button {
font-weight: 700 !important;
}
.upload-button .icon-create {
@include font-size(18);
margin-top: ($baseline/4);
@extend .t-action2;
line-height: 0 !important;
}
}
}
......@@ -254,7 +345,7 @@ p, ul, ol, dl {
.content {
@include clearfix();
@include font-size(16);
@extend .t-copy-base;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......@@ -268,14 +359,14 @@ p, ul, ol, dl {
padding-bottom: ($baseline/2);
.title-sub {
@include font-size(14);
@extend .t-copy-sub1;
display: block;
margin: 0;
color: $gray-l2;
}
.title-1 {
@include font-size(32);
@extend .t-title3;
margin: 0;
padding: 0;
font-weight: 600;
......@@ -285,7 +376,7 @@ p, ul, ol, dl {
.introduction {
@include box-sizing(border-box);
@include font-size(14);
@extend .t-copy-sub1;
width: flex-grid(12);
margin: 0 0 $baseline 0;
......@@ -303,14 +394,14 @@ p, ul, ol, dl {
}
.nav-introduction-supplementary {
@include font-size(13);
@extend .t-copy-sub2;
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
.icon {
@include font-size(14);
@extend .t-action3;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
......@@ -327,21 +418,17 @@ p, ul, ol, dl {
// layout - primary content
.content-primary {
.title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
color: $gray-d3;
}
.title-1 {
@extend .t-title-1;
@extend .t-title3;
}
.title-2 {
@extend .t-title-2;
@extend .t-title4;
margin: 0 0 ($baseline/2) 0;
}
.title-3 {
@extend .t-title-3;
@extend .t-title6;
margin: 0 0 ($baseline/2) 0;
}
......@@ -355,7 +442,7 @@ p, ul, ol, dl {
}
.tip {
@include font-size(13);
@extend .t-copy-sub2;
width: flex-grid(7, 12);
float: right;
margin-top: ($baseline/2);
......@@ -373,7 +460,7 @@ p, ul, ol, dl {
}
.bit {
@include font-size(13);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
......@@ -386,7 +473,7 @@ p, ul, ol, dl {
}
h3 {
@include font-size(14);
@extend .t-title7;
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
......@@ -494,7 +581,7 @@ p, ul, ol, dl {
// misc
hr.divide {
@include text-sr();
@extend .text-sr;
}
.item-details {
......@@ -655,7 +742,7 @@ hr.divide {
.new-button {
@include green-button;
@include font-size(13);
@extend .t-action4;
padding: 8px 20px 10px;
text-align: center;
......@@ -674,7 +761,7 @@ hr.divide {
.view-button {
@include blue-button;
@include font-size(13);
@extend .t-copy-base;
text-align: center;
&.big {
......@@ -693,7 +780,7 @@ hr.divide {
.edit-button.standard,
.delete-button.standard {
@include font-size(12);
@extend .t-action4;
@include white-button;
float: left;
padding: 3px 10px 4px;
......@@ -714,6 +801,7 @@ hr.divide {
}
.tooltip {
@extend .t-copy-sub2;
position: absolute;
top: 0;
left: 0;
......@@ -721,7 +809,6 @@ hr.divide {
padding: 0 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.85);
font-size: 11px;
font-weight: normal;
line-height: 26px;
color: #fff;
......@@ -745,7 +832,7 @@ hr.divide {
// basic utility
.sr {
@include text-sr();
@extend .text-sr;
}
.fake-link {
......@@ -798,7 +885,7 @@ body.js {
text-align: center;
.label {
@include text-sr();
@extend .text-sr;
}
.ss-icon {
......@@ -821,14 +908,14 @@ body.js {
}
.title {
@include font-size(18);
@extend .t-title5;
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
color: $gray-d3;
}
.description {
@include font-size(13);
@extend .t-copy-sub2;
margin-top: ($baseline/2);
color: $gray-l1;
}
......
cms/static/sass/_reset.scss
......@@ -6,6 +6,11 @@
// @include box-sizing(border-box);
// }
// better text rendering/kerning through SVG
* {
text-rendering: optimizeLegibility;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
......
cms/static/sass/_shame.scss 0 → 100644
// studio - shame
// // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
// ====================
cms/static/sass/_variables.scss
......@@ -12,9 +12,15 @@ $fg-max-columns: 12;
$fg-max-width: 1280px;
$fg-min-width: 900px;
// type
$sans-serif: 'Open Sans', $verdana;
$body-line-height: golden-ratio(.875em, 1);
// ====================
// fonts
$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-decorative: '';
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// ====================
// colors - new for re-org
$black: rgb(0,0,0);
......@@ -152,11 +158,14 @@ $shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
// specific UI
$notification-height: ($baseline*10);
// colors - inherited
// ====================
// inherited
$baseFontColor: $gray-d2;
$offBlack: #3c3c3c;
$green: #108614;
......@@ -173,3 +182,8 @@ $darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
$error-red: rgb(253, 87, 87);
// type
$sans-serif: $f-serif;
$body-line-height: golden-ratio(.875em, 1);
cms/static/sass/assets/_fonts.scss
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
// studio - assets - fonts
// ====================
// import from google fonts - Open Sans
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
// import from google fonts - Bree
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
cms/static/sass/base-style.scss
// studio - css architecture
// ====================
// bourbon libs and resets
@import 'bourbon/bourbon';
@import 'bourbon/addons/button';
@import "variables";
// libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon
@import 'bourbon/addons/button'; // lib bourbon - button add-on
// VENDOR + REBASE *referenced/used vendor presentation and reset*
// ====================
@import 'vendor/normalize';
@import 'reset';
// utilities
// BASE *default edX offerings*
// ====================
// base - utilities
@import 'variables';
@import 'mixins';
@import 'cms_mixins';
@import 'mixins-inherited';
// assets
// base - assets
@import 'assets/fonts';
@import 'assets/graphics';
@import 'assets/keyframes';
@import 'assets/graphics'; // sprites, basic img/figure/svg styling
@import 'assets/anims'; // animations
// base
// base - starter
@import 'base';
// elements
// base - elements
@import 'elements/typography';
@import 'elements/icons';
@import 'elements/controls';
@import 'elements/navigation';
@import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/navigation'; // all archetypes of navigation
@import 'elements/forms';
@import 'elements/header';
@import 'elements/footer';
@import 'elements/sock';
@import 'elements/forms';
@import 'elements/modal';
@import 'elements/alerts';
@import 'elements/vendor';
@import 'elements/tender-widget';
@import 'elements/system-feedback'; // alerts, notifications, states
@import 'elements/system-help'; // help UI
@import 'elements/modal'; // interstitial UI, dialogs, modal windows
@import 'elements/vendor'; // overrides to vendor-provided styling
// specific views
// base - specific views
@import 'views/account';
@import 'views/assets';
@import 'views/updates';
......@@ -51,8 +58,12 @@
@import 'views/users';
@import 'views/checklists';
// temp - inherited
@import 'assets/content-types';
// xblock-related
// xmodule
@import 'xmodule/modules/css/module-styles.scss';
@import 'xmodule/descriptors/css/module-styles.scss';
@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
cms/static/sass/elements/_controls.scss
......@@ -141,3 +141,9 @@
// calls-to-action
// ====================
// specific buttons - view live
.view-live-button {
@extend .t-action4;
}
cms/static/sass/elements/_footer.scss
......@@ -8,8 +8,8 @@
padding: $baseline;
footer.primary {
@extend .t-copy-sub2;
@include clearfix();
@include font-size(13);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......
cms/static/sass/elements/_header.scss
......@@ -2,6 +2,7 @@
// ====================
.wrapper-header {
@extend .depth3;
margin: 0;
padding: $baseline;
border-bottom: 1px solid $gray;
......@@ -10,7 +11,6 @@
height: 76px;
position: relative;
width: 100%;
z-index: 1000;
a {
color: $baseFontColor;
......@@ -67,7 +67,7 @@
padding-right: ($baseline*0.75);
a {
@include text-hide();
@extend .text-hide;
display: block;
width: 164px;
height: 32px;
......@@ -146,7 +146,7 @@
.title {
display: block;
padding: 5px;
padding: 0 ($baseline/4);
text-transform: uppercase;
font-weight: 600;
color: $gray-d3;
......
cms/static/sass/elements/_navigation.scss
......@@ -2,6 +2,19 @@
// ====================
// common
nav {
ol, ul {
@extend .no-list;
}
.nav-item {
a {
}
}
}
// ====================
......
cms/static/sass/elements/_sock.scss
......@@ -28,13 +28,13 @@
.cta-show-sock {
@extend .btn-pill;
@extend .t-action3;
@extend .t-action4;
background: $gray-l5;
padding: ($baseline/2) $baseline;
color: $gray;
.icon {
@include font-size(16);
@include font-size(14);
}
&:hover {
......@@ -59,7 +59,7 @@
header {
.title {
@extend .t-title-2;
@extend .t-title4;
}
.ss-icon {
......@@ -73,12 +73,13 @@
@include box-sizing(border-box);
.title {
@extend .t-title-3;
@extend .t-title6;
color: $white;
margin-bottom: ($baseline/2);
}
.copy {
@extend .t-copy-sub2;
margin: 0 0 $baseline 0;
}
......@@ -94,6 +95,7 @@
}
.action {
@extend .t-action4;
display: block;
.icon {
......
cms/static/sass/elements/_alerts.scss → cms/static/sass/elements/_system-feedback.scss
// studio alerts, prompts and notifications
// studio - elements - system feedback
// alerts, notifications, prompts, and status communication
// ====================
// shared
......@@ -6,7 +7,7 @@
@include box-sizing(border-box);
.copy {
@extend .t-copy-sub2;
@extend .t-copy-sub1;
}
}
......@@ -36,6 +37,7 @@
.nav-actions .action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d2;
}
......@@ -53,6 +55,7 @@
.nav-actions .action-primary {
@include orange-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $orange-d2;
color: $gray-d4;
}
......@@ -71,6 +74,7 @@
.nav-actions .action-primary {
@include red-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $red-d2;
}
......@@ -88,6 +92,7 @@
.nav-actions .action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d2;
}
......@@ -105,6 +110,7 @@
.nav-actions .action-primary {
@include green-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $green-d2;
}
......@@ -121,8 +127,9 @@
&.step-required {
.nav-actions .action-primary {
border-color: $pink-d2;
@include pink-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $pink-d2;
}
a {
......@@ -137,6 +144,7 @@
// prompts
.wrapper-prompt {
@extend .depth4;
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
......@@ -144,7 +152,6 @@
width: 100%;
height: 100%;
text-align: center;
z-index: 10000;
&:before {
content: '';
......@@ -184,12 +191,12 @@
}
.action-primary {
@extend .t-action3;
@extend .t-action4;
font-weight: 600;
}
.action-secondary {
@extend .t-action3;
@extend .t-action4;
}
}
}
......@@ -235,11 +242,11 @@
// notifications
.wrapper-notification {
@extend .depth3;
@include clearfix();
@include box-shadow(0 -1px 3px $shadow, inset 0 3px 1px $blue);
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
padding: $baseline ($baseline*2);
......@@ -361,18 +368,19 @@
@include font-size(22);
width: flex-grid(1, 12);
height: ($baseline*1.25);
margin-top: ($baseline/4);
margin-right: flex-gutter();
text-align: right;
color: $white;
}
.copy {
@extend .t-copy-sub2;
@extend .t-copy-sub1;
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@extend .t-title-4;
@extend .t-title7;
margin-bottom: 0;
color: $white;
}
......@@ -409,13 +417,13 @@
.action-primary {
@include blue-button();
@extend .t-action3;
border-color: $blue-d2;
font-weight: 600;
}
.action-secondary {
@extend .t-action3;
@extend .t-action4;
}
}
......@@ -434,7 +442,7 @@
}
.copy p {
@include text-sr();
@extend .text-sr;
}
}
}
......@@ -443,10 +451,10 @@
// alerts
.wrapper-alert {
@extend .depth2;
@include box-sizing(border-box);
@include box-shadow(0 1px 1px $white, inset 0 2px 2px $shadow-d1, inset 0 -4px 1px $blue);
position: relative;
z-index: 100;
overflow: hidden;
width: 100%;
border-top: 1px solid $black;
......@@ -504,7 +512,6 @@
// adopted alerts
.alert {
@extend .t-copy-sub2;
@include box-sizing(border-box);
@include clearfix();
margin: 0 auto;
......@@ -530,11 +537,11 @@
}
.copy {
@extend .t-copy-sub2;
width: flex-grid(10, 12);
color: $gray-l2;
.title {
@extend .t-title7;
margin-bottom: 0;
color: $white;
}
......@@ -568,12 +575,12 @@
}
.action-primary {
@extend .t-action3;
@extend .t-action4;
font-weight: 600;
}
.action-secondary {
@extend .t-action3;
@extend .t-action4;
}
}
}
......@@ -590,7 +597,7 @@
text-align: center;
.label {
@include text-sr();
@extend .text-sr;
}
.icon {
......@@ -730,7 +737,7 @@ body.uxdesign.alerts {
border-radius: 3px;
background: #fbf6e1;
// background: #edbd3c;
@extend .t-copy-sub1;
font-size: 14px;
@include clearfix;
.alert-message {
......
cms/static/sass/elements/_system-help.scss 0 → 100644
// studio - elements - system help
// ====================
cms/static/sass/elements/_typography.scss
// studio - elements - typography
// ====================
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// headings/titles
.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5 {
color: $gray-d3;
.t-title {
font-family: $f-sans-serif;
}
.t-title1 {
@extend .t-title;
@include font-size(60);
@include lh(60);
}
.t-title-1 {
.t-title2 {
@extend .t-title;
@include font-size(48);
@include lh(48);
}
.t-title3 {
@include font-size(36);
@include lh(36);
}
.t-title-2 {
.t-title4 {
@extend .t-title;
@include font-size(24);
font-weight: 600;
@include lh(24);
}
.t-title5 {
@extend .t-title;
@include font-size(18);
@include lh(18);
}
.t-title-3 {
.t-title6 {
@extend .t-title;
@include font-size(16);
font-weight: 600;
@include lh(16);
}
.t-title-4 {
.t-title7 {
@extend .t-title;
@include font-size(14);
@include lh(14);
}
.t-title-5 {
.t-title8 {
@extend .t-title;
@include font-size(12);
@include lh(12);
}
.t-title9 {
@extend .t-title;
@include font-size(11);
@include lh(11);
}
// ====================
// copy
.t-copy {
font-family: $f-sans-serif;
}
.t-copy-base {
@extend .t-copy;
@include font-size(16);
@include lh(16);
}
.t-copy-lead1 {
@extend .t-copy;
@include font-size(18);
@include lh(18);
}
.t-copy-lead2 {
@include font-size(20);
@extend .t-copy;
@include font-size(24);
@include lh(24);
}
.t-copy-sub1 {
@extend .t-copy;
@include font-size(14);
@include lh(14);
}
.t-copy-sub2 {
@include font-size(13);
}
.t-copy-sub3 {
@extend .t-copy;
@include font-size(12);
@include lh(12);
}
// ====================
// actions/labels
.t-action1 {
@include font-size(14);
font-weight: 600;
@include font-size(18);
@include lh(18);
}
.t-action2 {
@include font-size(13);
font-weight: 600;
text-transform: uppercase;
@include font-size(16);
@include lh(16);
}
.t-action3 {
@include font-size(13);
@include font-size(14);
@include lh(14);
}
.t-action4 {
@include font-size(12);
@include lh(12);
}
// ====================
// code
.t-code {
font-family: $f-monospace;
}
// ====================
......
cms/static/sass/elements/_vendor.scss
......@@ -6,7 +6,7 @@
border-color: $darkGrey;
border-radius: 2px;
background: #fff;
font-family: $sans-serif;
font-family: $f-sans-serif;
font-size: 12px;
@include box-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
z-index: 100000 !important;
......
cms/static/sass/views/_account.scss
......@@ -12,7 +12,7 @@ body.signup, body.signin {
.content {
@include clearfix();
@include font-size(16);
@extend .t-copy-base;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......@@ -26,14 +26,14 @@ body.signup, body.signin {
padding-bottom: ($baseline/2);
h1 {
@include font-size(32);
@extend .t-title3;
margin: 0;
padding: 0;
font-weight: 600;
}
.action {
@include font-size(13);
@extend .t-action3;
position: absolute;
right: 0;
top: 40%;
......@@ -41,7 +41,7 @@ body.signup, body.signin {
}
.introduction {
@include font-size(14);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
}
}
......@@ -69,8 +69,8 @@ body.signup, body.signin {
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all .15s);
@include font-size(15);
display: block;
width: 100%;
padding: ($baseline*0.75) ($baseline/2);
......@@ -108,7 +108,7 @@ body.signup, body.signin {
}
label {
@include font-size(14);
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
......@@ -118,7 +118,7 @@ body.signup, body.signin {
}
input, textarea {
@include font-size(16);
@extend .t-copy-base;
height: 100%;
width: 100%;
padding: ($baseline/2);
......@@ -171,8 +171,8 @@ body.signup, body.signin {
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
......@@ -212,7 +212,7 @@ body.signup, body.signin {
width: flex-grid(4, 12);
.bit {
@include font-size(13);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
......@@ -225,7 +225,7 @@ body.signup, body.signin {
}
h3 {
@include font-size(14);
@extend .t-title7;
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
......@@ -245,7 +245,7 @@ body.signup, body.signin {
position: relative;
.action-forgotpassword {
@include font-size(13);
@extend .t-action3;
position: absolute;
top: 0;
right: 0;
......@@ -257,7 +257,7 @@ body.signup, body.signin {
// messages
.message {
@include font-size(14);
@extend .t-copy-sub1;
display: block;
}
......
cms/static/sass/views/_checklists.scss
......@@ -23,7 +23,7 @@ body.course.checklists {
// visual status
.viz-checklist-status {
@include text-hide();
@extend .text-hide;
@include size(100%,($baseline/4));
position: relative;
display: block;
......@@ -40,7 +40,7 @@ body.course.checklists {
background: $green;
.int {
@include text-sr();
@extend .text-sr;
}
}
}
......@@ -83,7 +83,7 @@ body.course.checklists {
}
.checklist-status {
@include font-size(13);
@extend .t-copy-sub1;
width: flex-grid(3, 9);
float: right;
margin-top: ($baseline/2);
......@@ -100,7 +100,7 @@ body.course.checklists {
}
.status-count {
@include font-size(16);
@extend .t-copy-base;
margin-left: ($baseline/4);
margin-right: ($baseline/4);
color: $gray-d3;
......@@ -108,7 +108,7 @@ body.course.checklists {
}
.status-amount {
@include font-size(16);
@extend .t-copy-base;
margin-left: ($baseline/4);
color: $gray-d3;
font-weight: 600;
......@@ -138,8 +138,8 @@ body.course.checklists {
}
.action-secondary {
@include font-size(14);
@include grey-button();
@extend .t-action3;
font-weight: 400;
float: right;
......@@ -247,14 +247,14 @@ body.course.checklists {
}
.task-description {
@extend .t-copy-sub1;
@include transition(color .15s .25s ease-in-out);
@include font-size(14);
color: $gray-l2;
}
.task-support {
@extend .t-copy-sub2;
@include transition(opacity .15s .25s ease-in-out);
@include font-size(12);
opacity: 0;
pointer-events: none;
}
......@@ -274,14 +274,14 @@ body.course.checklists {
.action-primary {
@include blue-button;
@extend .t-action4;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
}
.action-secondary {
@include font-size(13);
@extend .t-action4;
margin-top: ($baseline/2);
}
}
......@@ -322,7 +322,7 @@ body.course.checklists {
.action-primary {
@include grey-button;
@include font-size(12);
@extend .t-action4;
font-weight: 600;
text-align: center;
}
......
cms/static/sass/views/_index.scss
......@@ -18,8 +18,8 @@ body.index {
}
.content {
@extend .t-copy-base;
@include clearfix();
@include font-size(16);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
......@@ -62,7 +62,7 @@ body.index {
color: $white;
h1 {
@include font-size(52);
@extend .t-title2;
float: none;
margin: 0 0 ($baseline/2) 0;
border-bottom: 1px solid $blue-l1;
......@@ -72,7 +72,7 @@ body.index {
}
.logo {
@include text-hide();
@extend .text-hide;
position: relative;
top: 3px;
display: inline-block;
......@@ -83,7 +83,7 @@ body.index {
}
.tagline {
@include font-size(24);
@extend .t-title4;
margin: 0;
color: $blue-l3;
}
......@@ -198,13 +198,13 @@ body.index {
margin-top: -($baseline/4);
h3 {
@extend .t-title4;
margin: 0 0 ($baseline/2) 0;
@include font-size(24);
font-weight: 600;
}
> p {
@include font-size(18);
@extend .t-copy-lead1;
color: $gray-d1;
}
......@@ -214,8 +214,8 @@ body.index {
}
.list-proofpoints {
@extend .t-copy-sub1;
@include clearfix();
@include font-size(14);
width: flex-grid(9, 9);
margin: ($baseline*1.5) 0 0 0;
......@@ -233,7 +233,7 @@ body.index {
color: $gray-l1;
.title {
@include font-size(16);
@extend .t-copy-base;
margin: 0 0 ($baseline/4) 0;
font-weight: 500;
color: $gray-d3;
......@@ -322,23 +322,23 @@ body.index {
display: block;
width: 100%;
text-align: center;
}
.action-primary {
&.action-primary {
@extend .t-action1;
@include blue-button;
@include transition(all .15s);
@include font-size(18);
padding: ($baseline*0.75) ($baseline/2);
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.action-secondary {
@include font-size(14);
&.action-secondary {
@extend .t-action3;
margin-top: ($baseline/2);
}
}
}
}
}
}
cms/static/sass/views/_outline.scss
......@@ -29,6 +29,7 @@ body.course.outline {
width: 100px;
.status-label {
@include font-size(12);
position: absolute;
top: 2px;
right: -5px;
......@@ -38,7 +39,6 @@ body.course.outline {
@include border-radius(3px);
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
......@@ -57,6 +57,10 @@ body.course.outline {
}
.menu {
@include font-size(12);
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
z-index: 1;
display: none;
opacity: 0.0;
......@@ -67,10 +71,6 @@ body.course.outline {
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
li {
......@@ -167,7 +167,7 @@ body.course.outline {
text-align: right;
.published-status {
font-size: 12px;
@include font-size(12);
margin-right: 15px;
strong {
......@@ -185,19 +185,19 @@ body.course.outline {
.schedule-button,
.edit-button {
font-size: 11px;
@include font-size(11);
padding: 3px 15px 5px;
}
}
.datepair .date,
.datepair .time {
@include font-size(13);
@include box-shadow(none);
padding-left: 0;
padding-right: 0;
border: none;
background: none;
@include box-shadow(none);
font-size: 13px;
font-weight: bold;
color: $blue;
cursor: pointer;
......@@ -231,10 +231,10 @@ body.course.outline {
@include clearfix();
.section-name {
@include font-size(19);
float: left;
margin-right: 10px;
width: 350px;
font-size: 19px;
font-weight: bold;
color: $blue;
}
......@@ -254,7 +254,7 @@ body.course.outline {
background: $white;
input {
font-size: 16px;
@include font-size(16);
}
.save-button {
......@@ -275,7 +275,7 @@ body.course.outline {
background: $lightGrey;
.published-status {
font-size: 12px;
@include font-size(12);
margin-right: 15px;
strong {
......@@ -293,9 +293,8 @@ body.course.outline {
.schedule-button,
.edit-button {
font-size: 11px;
padding: 3px 15px 5px;
@include font-size(11);
padding: 0 15px 2px 15px;
}
}
......@@ -306,17 +305,17 @@ body.course.outline {
width: 145px;
.status-label {
@include font-size(12);
@include border-radius(3px);
position: absolute;
top: 0;
right: 2px;
display: none;
width: 100px;
padding: 10px 35px 10px 10px;
@include border-radius(3px);
background: $lightGrey;
color: $lightGrey;
text-align: right;
font-size: 12px;
font-weight: bold;
line-height: 16px;
}
......@@ -335,6 +334,11 @@ body.course.outline {
}
.menu {
@include font-size(12);
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
@include transition(display .15s);
z-index: 1;
display: none;
opacity: 0.0;
......@@ -345,11 +349,7 @@ body.course.outline {
padding: 8px 12px;
background: $white;
border: 1px solid $mediumGrey;
font-size: 12px;
@include border-radius(4px);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
@include transition(opacity .15s);
@include transition(display .15s);
li {
......@@ -422,7 +422,7 @@ body.course.outline {
.expand-collapse-icon {
float: left;
margin: 29px 6px 16px 16px;
margin: 25px 6px 16px 16px;
@include transition(none);
&.expand {
......@@ -440,7 +440,7 @@ body.course.outline {
}
h3 {
font-size: 19px;
@include font-size(19);
font-weight: 700;
color: $blue;
}
......@@ -460,7 +460,7 @@ body.course.outline {
.section-name-edit {
input {
font-size: 16px;
@include font-size(16);
}
.save-button {
......@@ -476,7 +476,7 @@ body.course.outline {
}
h4 {
font-size: 12px;
@include font-size(12);
color: #878e9d;
strong {
......@@ -502,8 +502,8 @@ body.course.outline {
&.new-section {
header {
height: auto;
@include clearfix();
height: auto;
}
.expand-collapse-icon {
......@@ -522,12 +522,11 @@ body.course.outline {
}
.toggle-button-sections {
@include font-size(12);
display: none;
position: relative;
float: right;
margin-top: 10px;
font-size: 13px;
margin-top: ($baseline/4);
color: $darkGrey;
&.is-shown {
......@@ -535,13 +534,13 @@ body.course.outline {
}
.ss-icon {
@include font-size(11);
@include border-radius(20px);
position: relative;
top: -1px;
display: inline-block;
margin-right: 2px;
line-height: 5px;
font-size: 11px;
}
.label {
......@@ -599,7 +598,7 @@ body.course.outline {
}
h3 {
font-size: 34px;
@include font-size(34);
font-weight: 300;
}
......@@ -625,16 +624,16 @@ body.course.outline {
}
label {
@include font-size(14);
@extend .t-copy-sub1;
margin-bottom: ($baseline/4);
}
}
}
.description {
@include font-size(14);
float: left;
margin-top: 30px;
font-size: 14px;
line-height: 20px;
width: 100%;
}
......@@ -645,7 +644,7 @@ body.course.outline {
.start-date,
.start-time {
font-size: 19px;
@include font-size(19);
}
.save-button {
......@@ -659,14 +658,14 @@ body.course.outline {
.save-button,
.cancel-button {
font-size: 16px;
@include font-size(16);
}
}
.collapse-all-button {
@include font-size(13);
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
}
......
cms/static/sass/views/_settings.scss
......@@ -66,7 +66,7 @@ body.course.settings {
}
.tip {
@include font-size(13);
@extend .t-copy-sub2;
width: flex-grid(5, 9);
float: right;
margin-top: ($baseline/2);
......@@ -86,20 +86,20 @@ body.course.settings {
// in form -UI hints/tips/messages
.instructions {
@include font-size(14);
@extend .t-copy-sub1;
margin: 0 0 $baseline 0;
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
.message-error {
@include font-size(13);
@extend .t-copy-sub1;
display: block;
margin-top: ($baseline/4);
margin-bottom: ($baseline/2);
......@@ -109,12 +109,13 @@ body.course.settings {
// buttons
.remove-item {
@include white-button;
@include font-size(13);
@extend .t-action-3;
font-weight: 400;
}
.new-button {
@include font-size(13);
// @extend .t-action-3; - bad buttons won't render this properly
@include font-size(14);
}
// form basics
......@@ -158,8 +159,8 @@ body.course.settings {
}
input, textarea {
@extend .t-copy-base;
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
padding: ($baseline/2);
......@@ -324,7 +325,7 @@ body.course.settings {
.action-primary {
@include blue-button();
@include font-size(13);
@extend .t-action-3;
font-weight: 600;
.icon {
......@@ -747,7 +748,7 @@ body.course.settings {
// specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
.CodeMirror {
@include font-size(16);
@extend .t-copy-base;
@include box-sizing(border-box);
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
......
cms/static/sass/views/_static-pages.scss
......@@ -123,7 +123,7 @@ body.course.static-pages {
.component-actions {
position: absolute;
top: 26px;
top: 20px;
right: 44px;
}
}
......
cms/templates/asset_index.html
......@@ -35,10 +35,10 @@
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Files &amp; Uploads</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Files &amp; Uploads
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......
cms/templates/checklists.html
......@@ -30,10 +30,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Checklists</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Tools</small>
<span class="sr">&gt; </span>Course Checklists
</h1>
</header>
</div>
......
cms/templates/course_info.html
......@@ -21,7 +21,7 @@
$(document).ready(function(){
var course_updates = new CMS.Models.CourseUpdateCollection();
course_updates.urlbase = '${url_base}';
course_updates.fetch();
course_updates.fetch({reset: true});
var course_handouts = new CMS.Models.ModuleInfo({
id: '${handouts_location}'
......@@ -44,10 +44,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Updates</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Course Updates
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......
cms/templates/edit-tabs.html
......@@ -18,10 +18,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Static Pages</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Static Pages
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......
cms/templates/edit_subsection.html
......@@ -85,6 +85,7 @@
</div>
</div>
</div>
</div>
</%block>
<%block name="jsextra">
......
cms/templates/export.html
......@@ -8,10 +8,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Export</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Tools</small>
<span class="sr">&gt; </span>Course Export
</h1>
</header>
</div>
......
cms/templates/import.html
......@@ -8,10 +8,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Import</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Tools</small>
<span class="sr">&gt; </span>Course Import
</h1>
</header>
</div>
......
cms/templates/index.html
......@@ -37,9 +37,7 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<h1 class="title-1">${_("My Courses")}</h1>
</div>
<h1 class="page-header">${_("My Courses")}</h1>
% if user.is_active:
<nav class="nav-actions">
......
cms/templates/manage_users.html
......@@ -6,10 +6,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Settings</span>
<h1 class="title-1">Course Team</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Settings</small>
<span class="sr">&gt; </span>Course Team
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......
cms/templates/overview.html
......@@ -106,10 +106,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Outline</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Course Content</small>
<span class="sr">&gt; </span>Course Outline
</h1>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
......
cms/templates/settings.html
......@@ -32,15 +32,15 @@ from contentstore import utils
});
var model = new CMS.Models.Settings.CourseDetails();
model.urlRoot = '${details_url}';
model.fetch({success :
function(model) {
model.fetch({
success: function(model) {
var editor = new CMS.Views.Settings.Details({
el: $('.settings-details'),
model: model
});
editor.render();
}
},
reset: true
});
});
......@@ -50,10 +50,10 @@ from contentstore import utils
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Schedule &amp; Details</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Settings</small>
<span class="sr">&gt; </span>Schedule &amp; Details
</h1>
</header>
</div>
......
cms/templates/settings_advanced.html
......@@ -44,10 +44,10 @@ editor.render();
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Advanced Settings</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Settings</small>
<span class="sr">&gt; </span>Advanced Settings
</h1>
</header>
</div>
......
cms/templates/settings_graders.html
......@@ -41,10 +41,10 @@ from contentstore import utils
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-subtitle">
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Grading</h1>
</div>
<h1 class="page-header">
<small class="subtitle">Settings</small>
<span class="sr">&gt; </span>Grading
</h1>
</header>
</div>
......
cms/templates/ux-alerts.html
......@@ -82,10 +82,10 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<div class="title">
<span class="title-sub">UX Design</span>
<h1 class="title-1">System Notifications</h1>
</div>
<h1 class="page-header">
<small class="subtitle">UX Design</small>
<span class="sr">&gt; </span>System Notifications
</h1>
</header>
</div>
......@@ -134,10 +134,6 @@
<a href="#notification-changesMade" class="hide-notification">Hide Changes Made (used in Advanced Settings)</a>
</li>
<li>
<a href="#notification-change" class="show-notification">Show Change Warning</a>
<a href="#notification-change" class="hide-notification">Hide Change Warning</a>
</li>
<li>
<a href="#notification-version" class="show-notification">Show New Version Warning</a>
<a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
</li>
......@@ -156,10 +152,6 @@
<a href="#notification-help" class="show-notification">Show Help</a>
<a href="#notification-help" class="hide-notification">Hide Help</a>
</li>
<li>
<a href="#notification-threeActions" class="show-notification">Show Notification with three actions</a>
<a href="#notification-threeActions" class="hide-notification">Hide Notification with three actions</a>
</li>
</ul>
</section>
......@@ -403,57 +395,6 @@
<%block name="view_notifications">
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-change" aria-hidden="true" role="dialog" aria-labelledby="notification-change-title" aria-describedby="notification-change-description" id="notification-change">
<div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
<div class="copy">
<h2 class="title title-3" id="notification-change-title">You've Made Some Changes</h2>
<p class="message" id="notification-change-description">Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Save Changes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Don't Save</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: three actions example -->
<div class="wrapper wrapper-notification wrapper-notification-change" aria-hidden="true" role="dialog" aria-labelledby="notification-threeActions-title" aria-describedby="notification-threeActions-description" id="notification-threeActions">
<div class="notification change has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-change">&#x1F4DD;</i>
<div class="copy">
<h2 class="title title-3" id="notification-threeActions-title">You've Made Some Changes</h2>
<p class="message" id="notification-threeActions-description">Your changes will not take effect until you <strong>save your progress</strong>.</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Notification Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="action-primary">Save Changes</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Don't Save</a>
</li>
<li class="nav-item">
<a href="#" class="action-secondary">Do something else</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- notification: change has been made and a save is needed -->
<div class="wrapper wrapper-notification wrapper-notification-warning" aria-hidden="true" role="dialog" aria-labelledby="notification-changesMade-title" aria-describedby="notification-changesMade-description" id="notification-changesMade">
<div class="notification warning has-actions">
<i class="ss-icon ss-symbolicons-block icon icon-warning">&#x26A0;</i>
......
common/lib/capa/capa/responsetypes.py
......@@ -36,7 +36,7 @@ from datetime import datetime
from .util import *
from lxml import etree
from lxml.html.soupparser import fromstring as fromstring_bs # uses Beautiful Soup!!! FIXME?
import capa.xqueue_interface
import capa.xqueue_interface as xqueue_interface
log = logging.getLogger(__name__)
......
common/lib/xmodule/xmodule/word_cloud_module.py
......@@ -11,6 +11,7 @@ import logging
from pkg_resources import resource_string
from xmodule.raw_module import RawDescriptor
from xmodule.editing_module import MetadataOnlyEditingDescriptor
from xmodule.x_module import XModule
from xblock.core import Scope, String, Object, Boolean, List, Integer
......@@ -19,8 +20,13 @@ log = logging.getLogger(__name__)
def pretty_bool(value):
BOOL_DICT = [True, "True", "true", "T", "t", "1"]
return value in BOOL_DICT
"""Check value for possible `True` value.
Using this function we can manage different type of Boolean value
in xml files.
"""
bool_dict = [True, "True", "true", "T", "t", "1"]
return value in bool_dict
class WordCloudFields(object):
......@@ -227,9 +233,8 @@ class WordCloudModule(WordCloudFields, XModule):
return self.content
class WordCloudDescriptor(WordCloudFields, RawDescriptor):
class WordCloudDescriptor(MetadataOnlyEditingDescriptor, RawDescriptor, WordCloudFields):
"""Descriptor for WordCloud Xmodule."""
module_class = WordCloudModule
template_dir_name = 'word_cloud'
stores_state = True
mako_template = "widgets/raw-edit.html"
common/static/sass/_mixins.scss
// studio - utilities - mixins and extends
// ====================
// font-sizing
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
}
// ====================
// line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
// ====================
// image-replacement hidden text
@mixin text-hide() {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// hidden elems - screenreaders
@mixin text-sr() {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// ====================
// vertical and horizontal centering
@mixin vertically-and-horizontally-centered ($height, $width) {
left: 50%;
margin-left: -$width / 2;
//margin-top: -$height / 2;
min-height: $height;
min-width: $width;
position: absolute;
top: 150px;
// mixins - line height
@mixin lh($fontSize: auto){
line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
}
// ====================
// sizing
// mixins - sizing
@mixin size($width: $baseline, $height: $baseline) {
height: $height;
width: $width;
}
// mixins - sizing
@mixin square($size: $baseline) {
@include size($size);
}
// ====================
// placeholder styling
// mixins - placeholder styling
@mixin placeholder($color) {
:-moz-placeholder {
color: $color;
......@@ -81,102 +44,148 @@
// ====================
// extends - visual
.faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
// extends - layout
// used for page/view-level wrappers (for centering/grids)
.wrapper {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
}
.faded-hr-divider-medium {
@include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
rgba(240,240,240, 1) 50%,
rgba(240,240,240, 0)));
height: 1px;
width: 100%;
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
.no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li {
margin: 0;
padding: 0;
}
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px;
width: 100%;
// extends - image-replacement hidden text
.text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 100%;
// extends - hidden elems - screenreaders
.text-sr {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
height: 100%;
width: 1px;
// extends - wrapping
.text-wrap {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
.vertical-divider {
@extend .faded-vertical-divider;
position: relative;
// extends - visual link
.fake-link {
cursor: pointer;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
left: 1px;
}
// extends - functional disable
.disabled {
pointer-events: none;
outline: none;
}
.horizontal-divider {
border: none;
@extend .faded-hr-divider;
position: relative;
// extends - depth levels
.depth0 { z-index: 0; }
.depth1 { z-index: 10; }
.depth2 { z-index: 100; }
.depth3 { z-index: 1000; }
.depth4 { z-index: 10000; }
.depth5 { z-index: 100000; }
// ====================
// extends - buttons
.btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, border-color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
display: inline-block;
cursor: pointer;
&:hover, &:active {
&::after {
@extend .faded-hr-divider-light;
content: "";
display: block;
position: absolute;
top: 1px;
}
}
.fade-right-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1)));
border: none;
&.disabled, &[disabled] {
cursor: default;
pointer-events: none;
opacity: 0.5;
}
.icon-inline {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
.fade-left-hr-divider {
@include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
rgba(200,200,200, 0)));
border: none;
// pill button
.btn-pill {
@include border-radius($baseline/5);
}
// extends - ui
.window {
@include clearfix();
@include border-radius(3px);
@include box-shadow(0 1px 1px $shadow-l1);
margin-bottom: $baseline;
border: 1px solid $gray-l2;
background: $white;
.btn-rounded {
@include border-radius($baseline/2);
}
.elem-d1 {
@include clearfix();
@include box-sizing(border-box);
// primary button
.btn-primary {
@extend .btn;
@extend .btn-pill;
padding:($baseline/2) $baseline;
border-width: 1px;
border-style: solid;
line-height: 1.5em;
text-align: center;
&:hover, &:active {
@include box-shadow(0 2px 1px $shadow-l1);
}
&.current, &.active {
@include box-shadow(inset 1px 1px 2px $shadow-d1);
&:hover, &:active {
@include box-shadow(inset 1px 1px 1px $shadow-d1);
}
}
}
.elem-d2 {
@include clearfix();
@include box-sizing(border-box);
// secondary button
.btn-secondary {
@extend .btn;
@extend .btn-pill;
border-width: 1px;
border-style: solid;
padding:($baseline/2) $baseline;
background: transparent;
line-height: 1.5em;
text-align: center;
&:hover, &:active {
}
&.current, &.active {
}
}
doc/public/course_data_formats/word_cloud/word_cloud.rst
......@@ -18,12 +18,23 @@ The following attributes can be specified for this tag::
[display_name| AUTOGENERATE] – Display name of xmodule. When this attribute is not defined - display name autogenerate with some hash.
[num_inputs| 5] – Number of inputs.
[num_top_words| 250] – Number of max words, which will be displayed.
[display_student_percents| True] – Display usage percents for each word.
[display_student_percents| True] – Display usage percents for each word on the same line together with words.
.. note::
Percent is shown always when mouse over the word in cloud.
.. note::
Possible answer for boolean type attributes:
True – "True", "true", "T", "t", "1"
False – "False", "false", "F", "f", "0"
.. note::
If you want to use the same word cloud (the same storage of words), you must use the same display_name value.
Code Example
============
......
lms/lib/comment_client/utils.py
from dogapi import dog_stats_api
import json
import logging
import requests
......@@ -30,8 +31,14 @@ def merge_dict(dic1, dic2):
def perform_request(method, url, data_or_params=None, *args, **kwargs):
if data_or_params is None:
data_or_params = {}
tags = [
"{k}:{v}".format(k=k, v=v)
for (k, v) in data_or_params.items() + [("method", method), ("url", url)]
if k != 'api_key'
]
data_or_params['api_key'] = settings.API_KEY
try:
with dog_stats_api.timer('comment_client.request.time', tags=tags):
if method in ['post', 'put', 'patch']:
response = requests.request(method, url, data=data_or_params, timeout=5)
else:
......
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