Skip to content

E
edx-platform
Commit 32de5aa0 by Peter Fogg
Options

Fix up some SASS issues.

parent b539a4cb
Showing with 191 additions and 183 deletions
cms/static/js/views/settings/main_settings_view.js
...@@ -25,6 +25,14 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({ ...@@ -25,6 +25,14 @@ CMS.Views.Settings.Details = CMS.Views.ValidatingView.extend({
this.$el.find("#course-number").val(this.model.get('location').get('course')); this.$el.find("#course-number").val(this.model.get('location').get('course'));
this.$el.find('.set-date').datepicker({ 'dateFormat': 'm/d/yy' }); this.$el.find('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
// Avoid showing broken image on mistyped/nonexistent image
this.$el.find('img.course-image').error(function() {
$(this).hide();
});
this.$el.find('img.course-image').load(function() {
$(this).show();
});
var dateIntrospect = new Date(); var dateIntrospect = new Date();
this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")"); this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")");
......
cms/static/sass/base-style.scss
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
@import 'elements/system-help'; // help UI @import 'elements/system-help'; // help UI
@import 'elements/modal'; // interstitial UI, dialogs, modal windows @import 'elements/modal'; // interstitial UI, dialogs, modal windows
@import 'elements/vendor'; // overrides to vendor-provided styling @import 'elements/vendor'; // overrides to vendor-provided styling
@import 'elements/uploads';
// base - specific views // base - specific views
@import 'views/account'; @import 'views/account';
...@@ -59,7 +60,6 @@ ...@@ -59,7 +60,6 @@
@import 'views/users'; @import 'views/users';
@import 'views/checklists'; @import 'views/checklists';
@import 'views/textbooks'; @import 'views/textbooks';
@import 'views/uploads';
// temp - inherited // temp - inherited
@import 'assets/content-types'; @import 'assets/content-types';
......
cms/static/sass/views/_uploads.scss → cms/static/sass/elements/_uploads.scss
// studio - views - uploads // studio - elements - uploads
// ======================== // ========================
body.course.file-upload-dialog { body.course.feature-upload {
// dialog
.wrapper-dialog {
@extend .ui-depth5;
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
background: $black-t2;
width: 100%;
height: 100%;
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
// dialog .dialog {
.wrapper-dialog { @include box-sizing(border-box);
@extend .ui-depth5; box-shadow: 0px 0px 7px $shadow-d1;
@include transition(all 0.05s ease-in-out); border-radius: ($baseline/5);
position: fixed; background-color: $gray-l4;
top: 0; display: inline-block;
background: $black-t2; vertical-align: middle;
width: 100%; width: $baseline*23;
height: 100%; padding: 7px;
text-align: center; text-align: left;
&:before { .title {
content: ''; @extend .t-title5;
display: inline-block; margin-bottom: ($baseline/2);
height: 100%; font-weight: 600;
vertical-align: middle; color: $black;
margin-right: -0.25em; /* Adjusts for spacing */ }
.message {
@extend .t-copy-sub2;
color: $gray;
}
.error {
color: $white;
}
form {
padding: 0;
.form-content {
box-shadow: 0 0 3px $shadow-d1;
padding: ($baseline*1.5);
background-color: $white;
}
input[type="file"] {
@extend .t-copy-sub2;
} }
.dialog { .status-upload {
height: 30px;
margin-top: $baseline;
.wrapper-progress {
box-shadow: inset 0 0 3px $shadow-d1;
display: block;
border-radius: ($baseline*0.75);
background-color: $gray-l5;
padding: 1px 8px 2px 8px;
height: 25px;
progress {
display: inline-block;
vertical-align: middle;
width: 100%;
border: none;
border-radius: ($baseline*0.75);
background-color: $gray-l5;
&::-webkit-progress-bar {
background-color: transparent;
border-radius: ($baseline*0.75);
}
&::-webkit-progress-value {
background-color: $pink;
border-radius: ($baseline*0.75);
}
&::-moz-progress-bar {
background-color: $pink;
border-radius: ($baseline*0.75);
}
}
}
.message-status {
@include border-top-radius(2px);
@include box-sizing(border-box); @include box-sizing(border-box);
box-shadow: 0px 0px 7px $shadow-d1; @include font-size(14);
border-radius: ($baseline/5); display: none;
background-color: $gray-l4; border-bottom: 2px solid $yellow;
display: inline-block; margin: 0 0 20px 0;
vertical-align: middle; padding: 10px 20px;
width: $baseline*23; font-weight: 500;
padding: 7px; background: $paleYellow;
text-align: left;
.text {
.title { display: inline-block;
@extend .t-title5; }
margin-bottom: ($baseline/2);
font-weight: 600; &.error {
color: $black; border-color: $red-d2;
background: $red-l1;
color: $white;
} }
.message { &.confirm {
@extend .t-copy-sub2; border-color: $green-d2;
color: $gray; background: $green-l1;
color: $white;
} }
.error { &.is-shown {
color: $white; display: block;
} }
}
}
.actions {
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
form {
padding: 0;
.form-content {
box-shadow: 0 0 3px $shadow-d1;
padding: ($baseline*1.5);
background-color: $white;
}
input[type="file"] {
@extend .t-copy-sub2;
}
.status-upload {
height: 30px;
margin-top: $baseline;
.wrapper-progress {
box-shadow: inset 0 0 3px $shadow-d1;
display: block;
border-radius: ($baseline*0.75);
background-color: $gray-l5;
padding: 1px 8px 2px 8px;
height: 25px;
progress {
display: inline-block;
vertical-align: middle;
width: 100%;
border: none;
border-radius: ($baseline*0.75);
background-color: $gray-l5;
&::-webkit-progress-bar {
background-color: transparent;
border-radius: ($baseline*0.75);
}
&::-webkit-progress-value {
background-color: $pink;
border-radius: ($baseline*0.75);
}
&::-moz-progress-bar {
background-color: $pink;
border-radius: ($baseline*0.75);
}
}
}
.message-status {
@include border-top-radius(2px);
@include box-sizing(border-box);
@include font-size(14);
display: none;
border-bottom: 2px solid $yellow;
margin: 0 0 20px 0;
padding: 10px 20px;
font-weight: 500;
background: $paleYellow;
.text {
display: inline-block;
}
&.error {
border-color: $red-d2;
background: $red-l1;
color: $white;
}
&.confirm {
border-color: $green-d2;
background: $green-l1;
color: $white;
}
&.is-shown {
display: block;
}
}
}
.actions {
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
.action-item {
@extend .t-action4;
display: inline-block;
margin-right: ($baseline*0.75);
&:last-child {
margin-right: 0;
}
}
.action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d1;
color: $white;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
}
}
}
.action-item {
@extend .t-action4;
display: inline-block;
margin-right: ($baseline*0.75);
&:last-child {
margin-right: 0;
}
}
.action-primary {
@include blue-button();
@include font-size(12); // needed due to bad button mixins for now
border-color: $blue-d1;
color: $white;
}
a {
color: $blue;
&:hover {
color: $blue-s2;
} }
}
} }
}
} }
// ==================== }
// js enabled // ====================
.js {
// dialog set-up // js enabled
.wrapper-dialog { .js {
visibility: hidden;
pointer-events: none;
.dialog { // dialog set-up
opacity: 0; .wrapper-dialog {
} visibility: hidden;
} pointer-events: none;
// dialog showing/hiding .dialog {
&.dialog-is-shown { opacity: 0;
}
}
.wrapper-dialog { // dialog showing/hiding
-webkit-filter: blur(2px) grayscale(25%); &.dialog-is-shown {
filter: blur(2px) grayscale(25%);
}
.wrapper-dialog.is-shown { .wrapper-dialog {
visibility: visible; -webkit-filter: blur(2px) grayscale(25%);
pointer-events: auto; filter: blur(2px) grayscale(25%);
}
.dialog { .wrapper-dialog.is-shown {
opacity: 1.0; visibility: visible;
} pointer-events: auto;
}
}
.dialog {
opacity: 1.0;
}
}
} }
}
} }
cms/templates/settings.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="title">${_("Schedule &amp; Details Settings")}</%block> <%block name="title">${_("Schedule &amp; Details Settings")}</%block>
<%block name="bodyclass">is-signedin course schedule settings file-upload-dialog</%block> <%block name="bodyclass">is-signedin course schedule settings feature-upload</%block>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%! <%!
......
cms/templates/textbooks.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<%block name="title">${_("Textbooks")}</%block> <%block name="title">${_("Textbooks")}</%block>
<%block name="bodyclass">is-signedin course textbooks file-upload-dialog</%block> <%block name="bodyclass">is-signedin course textbooks feature-upload</%block>
<%block name="header_extras"> <%block name="header_extras">
% for template_name in ["edit-textbook", "show-textbook", "edit-chapter", "no-textbooks", "upload-dialog"]: % for template_name in ["edit-textbook", "show-textbook", "edit-chapter", "no-textbooks", "upload-dialog"]:
......
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