diff --git a/cms/static/js/views/settings/main_settings_view.js b/cms/static/js/views/settings/main_settings_view.js index 3ef5235d043a..89abff0371b9 100644 --- a/cms/static/js/views/settings/main_settings_view.js +++ b/cms/static/js/views/settings/main_settings_view.js @@ -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('.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(); this.$el.find('#timezone').html("(" + dateIntrospect.getTimezone() + ")"); diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index 757ffe02bd42..fedef0676e2e 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -42,6 +42,7 @@ @import 'elements/system-help'; // help UI @import 'elements/modal'; // interstitial UI, dialogs, modal windows @import 'elements/vendor'; // overrides to vendor-provided styling +@import 'elements/uploads'; // base - specific views @import 'views/account'; @@ -59,7 +60,6 @@ @import 'views/users'; @import 'views/checklists'; @import 'views/textbooks'; -@import 'views/uploads'; // temp - inherited @import 'assets/content-types'; diff --git a/cms/static/sass/elements/_uploads.scss b/cms/static/sass/elements/_uploads.scss new file mode 100644 index 000000000000..a94a9e52ee1a --- /dev/null +++ b/cms/static/sass/elements/_uploads.scss @@ -0,0 +1,209 @@ +// studio - elements - uploads +// ======================== + +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 { + @include box-sizing(border-box); + box-shadow: 0px 0px 7px $shadow-d1; + border-radius: ($baseline/5); + background-color: $gray-l4; + display: inline-block; + vertical-align: middle; + width: $baseline*23; + padding: 7px; + text-align: left; + + .title { + @extend .t-title5; + margin-bottom: ($baseline/2); + font-weight: 600; + color: $black; + } + + .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; + } + + .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; + } + } + + } + + } + + } + + } + + // ==================== + + // js enabled + .js { + + // dialog set-up + .wrapper-dialog { + visibility: hidden; + pointer-events: none; + + .dialog { + opacity: 0; + } + } + + // dialog showing/hiding + &.dialog-is-shown { + + .wrapper-dialog { + -webkit-filter: blur(2px) grayscale(25%); + filter: blur(2px) grayscale(25%); + } + + .wrapper-dialog.is-shown { + visibility: visible; + pointer-events: auto; + + .dialog { + opacity: 1.0; + } + } + } + + } +} diff --git a/cms/static/sass/views/_uploads.scss b/cms/static/sass/views/_uploads.scss deleted file mode 100644 index f564ac1c1309..000000000000 --- a/cms/static/sass/views/_uploads.scss +++ /dev/null @@ -1,209 +0,0 @@ -// studio - views - uploads -// ======================== - -body.course.file-upload-dialog { - - // 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 { - @include box-sizing(border-box); - box-shadow: 0px 0px 7px $shadow-d1; - border-radius: ($baseline/5); - background-color: $gray-l4; - display: inline-block; - vertical-align: middle; - width: $baseline*23; - padding: 7px; - text-align: left; - - .title { - @extend .t-title5; - margin-bottom: ($baseline/2); - font-weight: 600; - color: $black; - } - - .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; - } - - .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; - } - } - - } - - } - - } - - } - - // ==================== - - // js enabled - .js { - - // dialog set-up - .wrapper-dialog { - visibility: hidden; - pointer-events: none; - - .dialog { - opacity: 0; - } - } - - // dialog showing/hiding - &.dialog-is-shown { - - .wrapper-dialog { - -webkit-filter: blur(2px) grayscale(25%); - filter: blur(2px) grayscale(25%); - } - - .wrapper-dialog.is-shown { - visibility: visible; - pointer-events: auto; - - .dialog { - opacity: 1.0; - } - } - } - - } -} diff --git a/cms/templates/settings.html b/cms/templates/settings.html index 666843dc86a0..4b7cdd0a56b2 100644 --- a/cms/templates/settings.html +++ b/cms/templates/settings.html @@ -2,7 +2,7 @@ <%inherit file="base.html" /> <%block name="title">${_("Schedule & Details Settings")} -<%block name="bodyclass">is-signedin course schedule settings file-upload-dialog +<%block name="bodyclass">is-signedin course schedule settings feature-upload <%namespace name='static' file='static_content.html'/> <%! diff --git a/cms/templates/textbooks.html b/cms/templates/textbooks.html index 5b79b7f2655f..d55e27185821 100644 --- a/cms/templates/textbooks.html +++ b/cms/templates/textbooks.html @@ -4,7 +4,7 @@ <%! from django.utils.translation import ugettext as _ %> <%block name="title">${_("Textbooks")} -<%block name="bodyclass">is-signedin course textbooks file-upload-dialog +<%block name="bodyclass">is-signedin course textbooks feature-upload <%block name="header_extras"> % for template_name in ["edit-textbook", "show-textbook", "edit-chapter", "no-textbooks", "upload-dialog"]: