diff --git a/cms/djangoapps/contentstore/views/component.py b/cms/djangoapps/contentstore/views/component.py index f1aa917955..8c1bcb7a9d 100644 --- a/cms/djangoapps/contentstore/views/component.py +++ b/cms/djangoapps/contentstore/views/component.py @@ -35,7 +35,6 @@ __all__ = ['OPEN_ENDED_COMPONENT_TYPES', 'ADVANCED_COMPONENT_POLICY_KEY', 'subsection_handler', 'unit_handler', - 'container_handler', 'component_handler' ] @@ -305,159 +304,6 @@ def unit_handler(request, tag=None, package_id=None, branch=None, version_guid=N return HttpResponseBadRequest("Only supports html requests") -@require_http_methods(["GET"]) -@login_required -def container_handler(request, tag=None, package_id=None, branch=None, version_guid=None, block=None): - """ - The restful handler for unit-specific requests. - - GET - html: return html page for editing a unit - json: not currently supported - """ - if 'text/html' in request.META.get('HTTP_ACCEPT', 'text/html'): - locator = BlockUsageLocator(package_id=package_id, branch=branch, version_guid=version_guid, block_id=block) - try: - old_location, course, item, lms_link = _get_item_in_course(request, locator) - except ItemNotFoundError: - return HttpResponseBadRequest() - - component_templates = defaultdict(list) - for category in COMPONENT_TYPES: - component_class = _load_mixed_class(category) - # add the default template - # TODO: Once mixins are defined per-application, rather than per-runtime, - # this should use a cms mixed-in class. (cpennington) - if hasattr(component_class, 'display_name'): - display_name = component_class.display_name.default or 'Blank' - else: - display_name = 'Blank' - component_templates[category].append(( - display_name, - category, - False, # No defaults have markdown (hardcoded current default) - None # no boilerplate for overrides - )) - # add boilerplates - if hasattr(component_class, 'templates'): - for template in component_class.templates(): - filter_templates = getattr(component_class, 'filter_templates', None) - if not filter_templates or filter_templates(template, course): - component_templates[category].append(( - template['metadata'].get('display_name'), - category, - template['metadata'].get('markdown') is not None, - template.get('template_id') - )) - - # Check if there are any advanced modules specified in the course policy. - # These modules should be specified as a list of strings, where the strings - # are the names of the modules in ADVANCED_COMPONENT_TYPES that should be - # enabled for the course. - course_advanced_keys = course.advanced_modules - - # Set component types according to course policy file - if isinstance(course_advanced_keys, list): - for category in course_advanced_keys: - if category in ADVANCED_COMPONENT_TYPES: - # Do I need to allow for boilerplates or just defaults on the - # class? i.e., can an advanced have more than one entry in the - # menu? one for default and others for prefilled boilerplates? - try: - component_class = _load_mixed_class(category) - - component_templates['advanced'].append( - ( - component_class.display_name.default or category, - category, - False, - None # don't override default data - ) - ) - except PluginMissingError: - # dhm: I got this once but it can happen any time the - # course author configures an advanced component which does - # not exist on the server. This code here merely - # prevents any authors from trying to instantiate the - # non-existent component type by not showing it in the menu - pass - else: - log.error( - "Improper format for course advanced keys! %s", - course_advanced_keys - ) - - components = [ - loc_mapper().translate_location( - course.location.course_id, component.location, False, True - ) - for component - in item.get_children() - ] - - # TODO (cpennington): If we share units between courses, - # this will need to change to check permissions correctly so as - # to pick the correct parent subsection - - containing_subsection_locs = modulestore().get_parent_locations(old_location, None) - containing_subsection = modulestore().get_item(containing_subsection_locs[0]) - containing_section_locs = modulestore().get_parent_locations( - containing_subsection.location, None - ) - containing_section = modulestore().get_item(containing_section_locs[0]) - - # cdodge hack. We're having trouble previewing drafts via jump_to redirect - # so let's generate the link url here - - # need to figure out where this item is in the list of children as the - # preview will need this - index = 1 - for child in containing_subsection.get_children(): - if child.location == item.location: - break - index = index + 1 - - preview_lms_base = settings.FEATURES.get('PREVIEW_LMS_BASE') - - preview_lms_link = ( - '//{preview_lms_base}/courses/{org}/{course}/' - '{course_name}/courseware/{section}/{subsection}/{index}' - ).format( - preview_lms_base=preview_lms_base, - lms_base=settings.LMS_BASE, - org=course.location.org, - course=course.location.course, - course_name=course.location.name, - section=containing_section.location.name, - subsection=containing_subsection.location.name, - index=index - ) - - return render_to_response('container.html', { - 'context_course': course, - 'unit': item, - 'unit_locator': locator, - 'components': components, - 'component_templates': component_templates, - 'draft_preview_link': preview_lms_link, - 'published_preview_link': lms_link, - 'subsection': containing_subsection, - 'release_date': ( - get_default_time_display(containing_subsection.start) - if containing_subsection.start is not None else None - ), - 'section': containing_section, - 'new_unit_category': 'vertical', - 'unit_state': compute_unit_state(item), - 'published_date': ( - get_default_time_display(item.published_date) - if item.published_date is not None else None - ), - }) - else: - return HttpResponseBadRequest("Only supports html requests") - - @login_required def _get_item_in_course(request, locator): """ diff --git a/cms/static/js/base.js b/cms/static/js/base.js index ad0a2761bf..bc33afc44f 100644 --- a/cms/static/js/base.js +++ b/cms/static/js/base.js @@ -66,9 +66,6 @@ domReady(function() { } }); - // container navigation links - tooltips on overflow - $('a.navigation-link').bind('mouseenter', overflowTooltip); - // general link management - new window/tab $('a[rel="external"]').attr('title', gettext('This link will open in a new browser window/tab')).bind('click', linkNewWindow); @@ -120,12 +117,6 @@ domReady(function() { IframeUtils.iframeBinding(); }); -function overflowTooltip(e) { - (e).preventDefault(); - if ($(this).offsetWidth < this.scrollWidth && !this.attr('data-tooltip')) - $this.attr('data-tooltip', $this.text()); -} - function smoothScrollLink(e) { (e).preventDefault(); diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index a7aa370adc..f921e2c6a7 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -56,7 +56,7 @@ h1 { font-weight: 600; color: $gray-d3; - .navigation, .navigation-divider, .subtitle { + .navigation, .subtitle { @extend %t-title7; position: relative; top: ($baseline/4); @@ -324,38 +324,41 @@ p, ul, ol, dl { } } - // layout with actions + // layout with navigation &.has-navigation { + .nav-actions { + bottom: -($baseline*1.5); + } + .navigation-link { + @extend %cont-truncated; display: inline-block; - overflow: hidden; max-width: 150px; - color: inherit; - text-overflow: ellipsis; - white-space: nowrap; - &:hover { - color: $blue-s1; + &.navigation-current { + @extend %ui-disabled; + color: $gray; - &:after { - color: $gray-l2; + &:before { + color: $gray; } } } - .navigation-link:after { - content: "/"; - margin: 0px $baseline/4; - color: inherit; + .navigation-link:before { + content: " / "; + margin: ($baseline/4); + color: $gray; - &:hover { - color: inherit; - } + &:hover { + color: $gray; } + } - .nav-actions { - bottom: -($baseline*1.5); + .navigation .navigation-link:first-child:before { + content: ""; + margin: 0; } } } diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index ecb63e1b85..ce29dc96dc 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -42,6 +42,7 @@ $gray-l3: tint($gray,60%); $gray-l4: tint($gray,80%); $gray-l5: tint($gray,90%); $gray-l6: tint($gray,95%); +$gray-l7: tint($gray,99%); $gray-d1: shade($gray,20%); $gray-d2: shade($gray,40%); $gray-d3: shade($gray,60%); diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss index 8b66032e68..4726776d39 100644 --- a/cms/static/sass/assets/_anims.scss +++ b/cms/static/sass/assets/_anims.scss @@ -246,4 +246,4 @@ // canned animation - use if you want out of the box/non-customized anim %anim-flashDouble { @include animation(flashDouble $tmg-f1 ease-in-out 1); -} \ No newline at end of file +} diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 30a3a8561b..b76eee7d94 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -203,6 +203,66 @@ // ==================== +// UI: element actions list +%actions-header { + .actions-list { + display: inline-block; + margin-bottom: 0; + } + + .action-item { + display: inline-block; + + .action-button { + @include transition(all $tmg-f2 ease-in-out 0s); + border-radius: 3px; + padding: ($baseline/4) ($baseline/2); + height: ($baseline*1.5); + color: $gray-l1; + + &:hover { + background-color: $blue; + color: $gray-l6; + } + + .action-button-text { + padding-left: 1px; + text-transform: uppercase; + } + + &.delete-button:hover { + background-color: $gray-l1; + } + } + } +} + +// UI: elem is collapsible +%expand-collapse { + @include transition(all $tmg-f2 linear 0s); + display: inline-block; + color: $gray-l2; + vertical-align: top; + + &:hover { + color: $blue; + } + + .ui-toggle-expansion { + @include transition(all $tmg-f2 ease-in-out 0s); + @include font-size(18); + display: inline-block; + margin-right: ($baseline/4); + color: $gray-l3; + vertical-align: middle; + } + + &.expand .ui-toggle-expansion { + @include transform(rotate(-90deg)); + @include transform-origin(50% 50%); + } +} + // UI: drag handles .drag-handle { diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss new file mode 100644 index 0000000000..df863ebc6c --- /dev/null +++ b/cms/static/sass/elements/_xblocks.scss @@ -0,0 +1,77 @@ +// studio - elements - xblock rendering +// ========================== + +// extends - UI archetypes - xblock rendering +%wrap-xblock { + margin: ($baseline/2); + border: 1px solid $gray-l4; + border-radius: ($baseline/5); + background: $white; + box-shadow: 0px 1px 1px $shadow-l1; + + + &:hover { + box-shadow: 0 0 1px $shadow; + } + + // UI: xblock header + .xblock-header { + @include box-sizing(border-box); + @include ui-flexbox(); + @extend %ui-align-center-flex; + border-bottom: 1px solid $gray-l4; + border-radius: ($baseline/5) ($baseline/5) 0 0; + min-height: ($baseline*2.5); + background-color: $gray-l6; + + .header-details { + @extend %cont-truncated; + @extend %ui-justify-left-flex; + @include ui-flexbox(); + padding-left: flex-gutter(); + width: flex-grid(6,12); + vertical-align: top; + } + + .header-actions { + @include ui-flexbox(); + @extend %ui-justify-right-flex; + width: flex-grid(6,12); + vertical-align: top; + } + } + + // UI: xblock render + .xblock-render { + @extend %anim-fadeIn; + } +} + +// ==================== + +// UI: xblocks - calls-to-action +.wrapper-xblock .header-actions { + @extend %actions-header; +} + +// UI: xblock is collapsible +.wrapper-xblock.is-collapsible { + + .expand-collapse { + @extend %expand-collapse; + margin: 0 ($baseline/4); + } + + &.collapsed .xblock-render { + display: none; + } + + .action-view { + + .action-button-text { + padding-right: ($baseline/5); + padding-left: 0; + } + } +} + diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss index 87c022df6c..ac60914b72 100644 --- a/cms/static/sass/style-app-extend1.scss +++ b/cms/static/sass/style-app-extend1.scss @@ -27,6 +27,7 @@ @import 'elements/typography'; @import 'elements/icons'; // references to icons used @import 'elements/controls'; // buttons, link styles, sliders, etc. +@import 'elements/xblocks'; // studio rendering chrome for xblocks // base - specific views @import 'views/account'; diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss index c52b193786..830254d02c 100644 --- a/cms/static/sass/views/_assets.scss +++ b/cms/static/sass/views/_assets.scss @@ -325,24 +325,27 @@ } } - // uses similar styling as unit.scss, static-pages.scss - .action-item { - display: inline-block; - margin: ($baseline/4) 0 ($baseline/4) ($baseline/4); + // UI: assets - calls-to-action + .actions-list { + @extend %actions-header; - .action-button { - @include transition(all $tmg-f2 ease-in-out 0s); - display: block; - height: ($baseline*1.5); - width: ($baseline*1.5); - border-radius: 3px; - color: $gray-l3; + .action-item { + display: inline-block; + margin: ($baseline/4) 0 ($baseline/4) ($baseline/4); - &:hover { - background-color: $blue; - color: $gray-l6; + .action-button { + padding: 0; + display: block; + width: ($baseline*1.5); + height: ($baseline*1.5); + color: $gray-l3; + } } - } + } + + // UI: assets - specific action styling + // TODO: this uses similar styling as unit.scss, static-pages.scss + .action-item { [class^="icon-"] { display: inline-block; diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index bfba5712d3..d3eeb08514 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -1,1262 +1,105 @@ // studio - views - container // ========================== +// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level. -body.course.container,.view-container { +// For containers rendered at the element level, the container is rendered in a way that allows the user to navigate to a separate container page for that container making its children populate the nesting and element levels. - .main-wrapper { - margin-top: ($baseline*2); - } +// UI: container page view +body.view-container { - //Problem Selector tab menu requirements - .js .tabs .tab { - display: none; - } - //end problem selector reqs - - - .unit-body.published { - .components > li { - border: none; - - .rendered-component { - padding: 0 $baseline; - } - } - } - - .content-primary { - clear: both; - float: left; - width: 70%; - - .unit-name-input { - padding: $baseline 2*$baseline; - - label { - display: block; - } - - input { - width: 100%; - font-size: 20px; - } - } - - .breadcrumbs { - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #cbd1db; - @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%); - background-color: #edf1f5; - box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; - @include clearfix; - - li { - float: left; - } - - a, - .current-page { - display: block; - padding: 15px 35px 15px 30px; - font-size: 14px; - background: url(../img/breadcrumb-arrow.png) no-repeat right center; - } - } - - h2 { - margin: 30px 40px 30px 0; - color: #646464; - font-size: 19px; - font-weight: 300; - letter-spacing: 1px; - text-transform: uppercase; - } - // ==================== - - // Component List Meta - .components { - - > li { - position: relative; - z-index: 10; - margin: $baseline 2*$baseline; - - .title { - margin: 0 0 15px 0; - color: $mediumGrey; - - .value { - } - } - - // ==================== - - // New Components - &.new-component-item { - margin: $baseline 0px; - border-top: 1px solid $mediumGrey; - box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; - background-color: $lightGrey; - margin-bottom: 0px; - padding-bottom: $baseline; - - .new-component-button { - display: block; - padding: $baseline; - text-align: center; - color: #edf1f5; - } - - h5 { - margin: $baseline 0px; - color: #fff; - font-weight: 600; - font-size: 18px; - } - - .rendered-component { - display: none; - background: #fff; - border-radius: 3px 3px 0 0; - } - - .new-component-type { - - a, - li { - display: inline-block; - } - - a { - border: 1px solid $mediumGrey; - width: 100px; - height: 100px; - color: #fff; - margin-right: 15px; - margin-bottom: $baseline; - border-radius: 8px; - font-size: 15px; - line-height: 14px; - text-align: center; - box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset; - - .name { - position: absolute; - bottom: 5px; - left: 0; - width: 100%; - padding: $baseline/2; - @include box-sizing(border-box); - color: #fff; - } - } - } - - .new-component-templates { - display: none; - margin: $baseline 2*$baseline; - border-radius: 3px; - border: 1px solid $mediumGrey; - background-color: #fff; - box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset; - @include clearfix; - - .cancel-button { - margin: $baseline 0px $baseline/2 $baseline/2; - @include white-button; - } - - .problem-type-tabs { - display: none; - } - - // specific menu types - &.new-component-problem { - padding-bottom: $baseline/2; - - [class^="icon-"], .editor-indicator { - display: inline-block; - } - - .problem-type-tabs { - display: inline-block; - } - } - } - - .new-component-type, - .new-component-template { - @include clearfix; - - a { - position: relative; - border: 1px solid $darkGreen; - background: tint($green,20%); - color: #fff; - - &:hover { - background: $brightGreen; - } - } - } - - .problem-type-tabs { - list-style-type: none; - border-radius: 0; - width: 100%; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: $lightBluishGrey; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset; - - li:first-child { - margin-left: $baseline; - } - - li { - float:left; - display:inline-block; - text-align:center; - width: auto; - @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); - background-color: tint($lightBluishGrey, 10%); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset; - opacity: 0.8; - - &:hover { - opacity: 0.9; - background-color: tint($lightBluishGrey, 20%); - } - - &.ui-state-active { - border: 0px; - @include active; - opacity: 1.0; - } - } - - a { - display: block; - padding: 15px 25px; - font-size: 15px; - line-height: 16px; - text-align: center; - color: #3c3c3c; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); - } - } - - .new-component-template { - - a { - @include transition(none); - background: #fff; - border: 0px; - color: #3c3c3c; - - &:hover { - @include transition(background-color $tmg-f2 linear 0s); - background: tint($green,30%); - color: #fff; - } - } - - li { - border:none; - border-bottom: 1px dashed $lightGrey; - color: #fff; - } - - li:first-child { - a { - border-top: 0px; - } - } - - li:nth-child(2) { - a { - border-radius: 0px; - } - } - - a { - @include clearfix(); - display: block; - padding: 7px $baseline; - border-bottom: none; - font-weight: 500; - - .name { - float: left; - - [class^="icon-"] { - @include transition(opacity $tmg-f2 linear 0s); - display: inline-block; - top: 1px; - margin-right: 5px; - opacity: 0.5; - width: 17; - height: 21px; - vertical-align: middle; - } - } - - .editor-indicator { - @include transition(opacity $tmg-f2 linear 0s); - float: right; - position: relative; - top: 3px; - font-size: 12px; - opacity: 0.3; - } - - [class^="icon-"], .editor-indicator { - display: none; - } - - &:hover { - color: #fff; - - [class^="icon-"] { - opacity: 1.0; - } - - .editor-indicator { - opacity: 1.0; - } - } - } - - // specific editor types - .empty { - - a { - line-height: 1.4; - font-weight: 400; - background: #fff; - color: #3c3c3c; - - - &:hover { - background: tint($green,30%); - color: #fff; - } - } - } - } - - .new-component { - text-align: center; - - h5 { - color: $darkGreen; - } - - } - } - - .wrapper-alert-error { - margin-top: ($baseline*1.25); - box-shadow: none; - border-top: 5px solid $red-l1; - - .copy, - .title { - color: $white; - } - - } - - - } - } - - // ==================== - - // Component Drag and Drop, Non-Edit Module Rendering, Styling - .component { - border: 1px solid $lightBluishGrey2; - border-radius: 3px; - background: #fff; - @include transition(none); - - &:hover { - border-color: #6696d7; - - .drag-handle { - background-color: $blue; - border-color: $blue; - } - } - - &.editing { - border: 1px solid $lightBluishGrey2; - z-index: auto; - - .drag-handle, - .component-actions { - display: none; - } - } - - &.component-placeholder { - border-color: #6696d7; - } - - .drag-handle { - position: absolute; - display: block; - top: -1px; - right: -16px; - z-index: 10; - width: 15px; - height: 100%; - border-radius: 0 3px 3px 0; - border: 1px solid $lightBluishGrey2; - background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2; - cursor: move; - @include transition(none); - } - } - - .xmodule_display { - padding: 2*$baseline $baseline $baseline; - overflow-x: auto; - - h1 { - float: none; - margin-left: 0; - } - } - - // UI: DnD - specific elems/cases - unit - .courseware-unit { - - // STATE: was dropped - &.was-dropped { - - > .section-item { - background-color: $ui-update-color !important; // nasty, but needed for specificity - } - } - } - - // ==================== - - // Component Editing - .wrapper-component-editor { - z-index: 9999; - position: relative; - background: $white; - } - - .component-editor { - @include edit-box; - box-shadow: none; - display: none; - padding: 0; - border-radius: 2px 2px 0 0; - - h3 { - margin-bottom: $baseline/2; - font-size: 18px; - font-weight: 700; - } - - h5 { - margin-bottom: 8px; - color: #fff; - font-weight: 700; - } - - .row { - margin-bottom: 0px; - } - - // Module Actions, also used for Static Pages - .module-actions { - box-shadow: inset 0 1px 2px $shadow; - border-top: 1px solid $gray-l1; - padding: ($baseline*0.75) $baseline; - background: $gray-l6; - - .action { - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - - &:last-child { - margin-right: 0; - } - } - - .action-primary { - @include blue-button; - @extend %t-action2; - @include transition(all .15s); - display: inline-block; - padding: ($baseline/5) $baseline; - font-weight: 600; - text-transform: uppercase; - } - - .action-secondary { - @include grey-button; - @extend %t-action2; - @include transition(all .15s); - display: inline-block; - padding: ($baseline/5) $baseline; - font-weight: 600; - text-transform: uppercase; - } - } - } - } -} - -// Edit Header (Component Name, Mode-Editor, Mode-Settings) -.component-edit-header { - @include box-sizing(border-box); - padding: 18px 0 18px $baseline; - top: 0; - right: 0; - background-color: $blue; - border-bottom: 1px solid $blue-d2; - color: $white; - - //Component Name - .component-name { - @extend %t-copy-sub1; - width: 50%; - color: $white; - font-weight: 600; - - em { - display: inline-block; - margin-right: ($baseline/4); - font-weight: 400; - color: $white; - } - } - - //Nav-Edit Modes - .nav-edit-modes { - list-style: none; - right: 0; - top: 0; - position: absolute; - padding: 12px ($baseline*0.75); - - .mode { - display: inline-block; - margin-left: 8px; - - &.inactive-mode{ - display: none; - } - - &.active-mode a { - - @include blue-button; - - &.is-set { - @include linear-gradient($blue, $blue); - color: $blue-d1; - box-shadow: inset 0 1px 2px 1px $shadow-l1; - background-color: $blue-d4; - cursor: default; - - &:hover { - box-shadow: inset 0 1px 2px 1px $shadow; - } - } - } - } - } -} - -// Editor Wrapper -.wrapper-comp-editor { - display: block; - - // Because the editor may be a CodeMirror editor (which must be visible at the time it is created - // in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active". - &.is-inactive { - display: none; - } -} - -// Settings Wrapper -.wrapper-comp-settings { - display: none; - - &.is-active { - display: block; - } - - //settings-list - .list-input.settings-list { - margin: 0; - padding: 0; - list-style: none; - - overflow: auto; - max-height: 400px; - - //chrome scrollbar visibility correction - &::-webkit-scrollbar { - -webkit-appearance: none; - width: 11px; - height: 11px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 8px; - border: 2px solid $gray-l2; - background-color: rgba(0, 0, 0, .5); - } - - //component-setting-entry - .field.comp-setting-entry { - background-color: $white; - padding: $baseline; - border-bottom: 1px solid $gray-l2; - opacity: 0.7; - - &:last-child { - //margin-bottom: 0; - } - - //no required component settings currently - &.required { - label { - //font-weight: 600; - } - label:after { - //margin-left: ($baseline/4); - //content: "*"; - } - } - - &:hover { - @include transition(opacity $tmg-f2 ease-in-out 0s); - opacity: 1.0; - } - - &.is-set { - opacity: 1.0; - background-color: $white; - - .setting-input { - color: $blue-l1; - } - } - - .wrapper-comp-setting { - display: inline-block; - min-width: 300px; - width: 55%; - top: 0; - vertical-align: top; - margin-bottom:5px; - position: relative; - } - - .setting-label { - @extend %t-copy-sub1; - @include transition(color $tmg-f2 ease-in-out 0s); - vertical-align: middle; - display: inline-block; - position: relative; - left: 0; - width: 33%; - min-width: 100px; - margin-right: ($baseline/2); - font-weight: 600; - - &.is-focused { - color: $blue; - } - } - - input, select, input[type="number"] { - @include placeholder($gray-l4); - @include font-size(16); - @include size(100%,100%); - padding: ($baseline/2); - min-width: 100px; - width: 45%; - - //&.long { - // - //} - - //&.short { - //} - - //&.error { - // border-color: $red; - //} - - //&:focus { - // + .tip { - // color: $gray; - // } - border-radius: 3px; - border: 1px solid $gray-l2; - text-overflow: ellipsis; - } - - //Allows users to copy full value of disabled inputs. - input.is-disabled{ - text-overflow: clip; - opacity: .5; - } - - input[type="number"] { - - width: 38.5%; - box-shadow: 0 1px 2px $shadow-l1 inset; - //For webkit browsers which render number fields differently, make input wider. - -moz-column-width: { - width: 32%; - } - - &:active { - background-color: #FFFCF1; - } - } - - select { - //box-shadow: 0 1px 2px $shadow-l1 inset; - - &:focus { - box-shadow: 0 0 1px $shadow; - @include transition(opacity $tmg-f2 ease-in-out 0s); - background-color: $yellow; - } - - &:active { - background-color: $yellow; - } - } - - .action.setting-clear { - @include font-size(11); - color: $gray; - width: 25px; - height: 25px; - vertical-align: middle; - padding: 5px; - border-radius: 50%; - margin: 0 $baseline/2; - box-shadow: none; - text-shadow: none; - border: 1px solid $gray-l1; - background-color: $gray-l4; - - &:hover { - box-shadow: 0 1px 1px $shadow; - @include transition(opacity $tmg-f2 ease-in-out 0s); - background-color: $blue-s3; - border: 1px solid $blue-s3; - color: $white; - } - - &.inactive { - visibility: hidden; - } - } - - .setting-help { - @include font-size(12); - display: inline-block; - font-color: $gray-l6; - min-width: ($baseline*10); - width: 35%; - vertical-align: top; - } - - - - // TYPE: enumerated lists of metadata sets - .metadata-list-enum { - - * { - @include box-sizing(border-box); - } - - // label - .setting-label { - vertical-align: top; - margin-top: ($baseline/2); - } - - // inputs and labels - .wrapper-list-settings { - @include size(45%,100%); - display: inline-block; - min-width: ($baseline*5); - - // enumerated fields - .list-settings { - margin: 0; - - .list-settings-item { - margin-bottom: ($baseline/2); - } - - // inputs - .input { - width: 80%; - margin-right: ($baseline/2); - vertical-align: middle; - } - } - } - - // actions - .create-action, .remove-action, .setting-clear { - - } - - .setting-clear { - vertical-align: top; - margin-top: ($baseline/4); - } - - .create-setting { - @extend %ui-btn-flat-outline; - @extend %t-action3; - display: block; - width: 100%; - padding: ($baseline/2); - font-weight: 600; - - *[class^="icon-"] { - margin-right: ($baseline/4); - } - - // STATE: disabled - &.is-disabled { - - } - } - - .remove-setting { - @include transition(color 0.25s ease-in-out); - @include font-size(20); - display: inline-block; - background: transparent; - color: $blue-l3; - - &:hover { - color: $blue; - } - - // STATE: disabled - &.is-disabled { - - } - } - } - } - } -} -// ==================== - -// Editing Units from Courseware -//uses similar styling as static-pages.scss -body.unit { - - .component { - padding-top: 30px; - - - .wrapper-component-action-header { - @include box-sizing(border-box); - position: absolute; - width: 100%; - padding: $baseline/4 $baseline/2; - top: 0; - left: 0; - border-bottom: 1px solid $gray-l4; - background: $gray-l5; - } - - .component-header { - display: inline-block; - width: 50%; - vertical-align: middle; - } - - .component-actions { - display: inline-block; - float: right; - vertical-align: middle; - text-align: center; - } - - &.editing { - padding-top: 0; - } - - .drag-handle { - display: none; - } - } -} - -// ==================== - -// Component Header Actions -// uses similar styling as assets.scss, static-pages.scss - -body.unit { - - .component-actions { - - .action-item { - display: inline-block; - margin: ($baseline/4) 0 ($baseline/4) ($baseline/4); - - .action-button { - @include transition(all $tmg-f2 ease-in-out 0s); - display: block; - padding: 0 $baseline/2; - width: auto; - height: ($baseline*1.5); - border-radius: 3px; - color: $gray-l1; - - &:hover { - background-color: $blue; - color: $gray-l6; - } - - .action-button-text { - padding-left: 1px; - vertical-align: bottom; - line-height: 17px; - } - - &.delete-button:hover { - background-color: $gray-l1; - } - } - - [class^="icon-"] { - display: inline-block; - vertical-align: bottom; - } - } - } -} - -// ==================== - -// Unit Page Sidebar - -.content-supplementary { - - label { - @extend %t-title8; - } -} - -.unit-settings { - - .window-contents { - padding: $baseline/2 $baseline; - } - - .unit-actions { + .mast { border-bottom: none; padding-bottom: 0; } - .published-alert { - display: none; - padding: $baseline/2; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - font-size: 14px; - line-height: 1.4; - - div { - margin-top: 15px; - } + .content-primary, .content-supplementary { + @include box-sizing(border-box); + float: left; } - - - input[type="radio"] { - margin-right: 7px; + .content-primary { + margin-right: flex-gutter(); + width: flex-grid(9,12); } - .status { - @extend %t-copy-sub2; + .content-supplementary { + width: flex-grid(3,12); - strong { - font-weight: 700; - } - } - - .preview-button, .view-button { - @include white-button; - margin-bottom: $baseline/2; - } - - .publish-button { - @include orange-button; - } - - .delete-button { - @include blue-button; - } - - .delete-draft { - display: inline-block; - } - - .delete-button, - .preview-button, - .publish-button, - .view-button { - font-size: 11px; - margin-top: $baseline/2; - padding: 6px 15px 8px; - } -} - -.unit-history { - &.collapsed { - h4 { - border-bottom: none; - border-radius: 3px; - } - - .window-contents { - display: none; - } - } - - ol { - border: 1px solid #ced2db; - - li { - display: block; - padding: 6px 8px 8px $baseline/2; - background: #edf1f5; - font-size: 12px; - - &:hover { - background: #fffcf1; - - .item-actions { - display: block; - } - } - - &.checked { - background: #d1dae3; - } - - .item-actions { - display: none; - } - - input[type="radio"] { - margin-right: 7px; - } - } - } -} - -.unit-location { - - // unit id - .wrapper-unit-id { - - .unit-id { - - .label { - @extend %t-title7; - margin-bottom: ($baseline/4); - color: $gray-d1; - } - - .value { - margin-bottom: 0; - } - } - } - - .url { - box-shadow: none; - width: 100%; - margin-bottom: $baseline/2; - } - - .draft-tag, - .hidden-tag, - .private-tag, - .has-new-draft-tag { - font-size: 8px; - } - - .unit-tree-location { - - .section-name { + label { @extend %t-title8; } + } +} +// UI: xblock rendering +body.view-container .content-primary{ - .subsection, - .courseware-unit { - margin: ($baseline/4) 0 0 ($baseline); + .wrapper-xblock { + @extend %wrap-xblock; + + // CASE: page level xblock rendering + &.level-page { + margin: 0; + + .xblock-header { + display: none; + } } - .courseware-unit .section-item { - background-color: transparent; - } - - .section-item { - @include transition(background $tmg-avg ease-in-out 0); - @include box-sizing(border-box); - @extend %t-copy-sub2; - display: inline-block; - width: 100%; - background: $gray-l5; - padding: 6px 8px 8px 16px; - vertical-align: top; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - color: $gray; + // CASE: nesting level xblock rendering + &.level-nesting { + border: none; + padding-bottom: $baseline; + box-shadow: none; &:hover { - background: $blue-l5; - color: $blue; + @include transition(all $tmg-f2 linear 0s); + background-color: $gray-l7; + box-shadow: 0 0 1px $shadow-d2 inset; } - &.editing { - background-color: $orange-l3; - } - - .public-item { - color: $black; - } - - .private-item { - color: $gray-l1; - } - - .draft-item { - color: $yellow-d1; - } - - .public-item:hover, - .private-item:hover, - .draft-item:hover { - color: $blue; - } - - .draft-item:after, - .public-item:after, - .private-item:after { - @include font-size(9); - margin-left: 3px; - font-weight: 600; - text-transform: uppercase; - } - - .draft-item:after { - content: "- draft"; - } - - .private-item:after { - content: "- private"; + .xblock-header { + @include ui-flexbox(); + margin-bottom: ($baseline/2); + border-bottom: none; + background: none; } } - .new-unit-item { - @extend %ui-btn-flat-outline; - @extend %t-action4; - width: 90%; - margin: 0 0 ($baseline/2) ($baseline/4); - border: 1px solid transparent; - padding: ($baseline/4) ($baseline/2); - font-weight: normal; - color: $gray-l2; - text-align: left; + // CASE: element level xblock rendering + &.level-element { + margin: 0 ($baseline*2) $baseline ($baseline*2); + box-shadow: none; &:hover { - box-shadow: none; - background-image: none; + @include transition(all $tmg-f2 linear 0s); + border-color: $blue; + } + + .xblock-header { + margin-bottom: 0; + border-bottom: 1px solid $gray-l4; + background-color: $gray-l6; + font-weight: 300; + } + + .xblock-render { + margin: $baseline; + } + + // STATE: xBlock containers styled as rows. + &.xblock-type-container { + + .xblock-header { + margin-bottom: 0; + border-bottom: 0; + border-radius: ($baseline/5); + } + + .xblock-render { + display: none; + } } } } } - -.edit-state-draft { - .visibility, - - .edit-draft-message, - .view-button { - display: none; - } - - .published-alert { - display: block; - } -} - -.edit-state-public { - .delete-draft, - .wrapper-component-action-header, - .new-component-item, - .editing-draft-alert, - .publish-draft-message, - .preview-button { - display: none; - } - - .published-alert { - display: block; - } - - .drag-handle { - display: none !important; - } -} - -.edit-state-private { - .delete-draft, - .publish-draft, - .editing-draft-alert, - .create-draft, - .view-button { - display: none; - } -} -// ==================== - -// Latex Compiler -.launch-latex-compiler { - background-color: $white; - padding: $baseline/2 0 $baseline/2 $baseline; - border-bottom: 1px solid $gray-l2; - opacity: 0.8; - - - &:hover { - @include transition(opacity $tmg-f2 ease-in-out 0s); - opacity: 1.0s; - } -} - -// hides latex compiler button if settings mode is-active -div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{ - display: none; -} diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index 50bc5bfec7..d7188437a0 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -105,34 +105,15 @@ } - // general action list styles (section and subsection) + // UI: general action list styles (section and subsection) + .expand-collapse { - @include transition(all $tmg-f2 linear 0s); - display: inline-block; - vertical-align: top; + @extend %expand-collapse; margin: 0 ($baseline/4); - color: $gray-l2; - - &:hover { - color: $blue; - } - - .ui-toggle-expansion { - @include transition(all $tmg-f2 ease-in-out 0s); - @include font-size(18); - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - color: $gray-l3; - } - - &.expand .ui-toggle-expansion { - @include transform(rotate(-90deg)); - @include transform-origin(50% 50%); - } - } + // UI: element actions list + // TODO: outline page can be updated to reflect styling from %actions-header extend in _controls.scss .actions-list { display: inline-block; margin-bottom: 0; @@ -141,7 +122,7 @@ .actions-item { @include font-size(13); display: inline-block; - padding: 0 4px; + padding: 0 ($baseline/5); vertical-align: middle; .action { diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss index dd2a897d2f..a52f9226c0 100644 --- a/cms/static/sass/views/_static-pages.scss +++ b/cms/static/sass/views/_static-pages.scss @@ -132,7 +132,7 @@ .component-actions { display: inline-block; - float: right; + float: right; margin-right: $baseline*2; padding: 8px 0px; vertical-align: middle; diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 839c301022..d90a619a18 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -420,6 +420,19 @@ body.course.unit,.view-unit { } } + // Special xBlock and xModule styling + .xblock-type-container { + + .xblock-header-elementlevel { + line-height: $baseline*2; + min-height: $baseline*2; + } + + .xblock-render-elementlevel { + display: none; + } + } + .xblock-student_view { padding: 2*$baseline $baseline $baseline; overflow-x: auto; @@ -1331,3 +1344,32 @@ body.unit { div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{ display: none; } + +// ==================== + +// xblock - unit page container + +body.unit .xblock-type-container { + @extend %wrap-xblock; + margin: 0; + + &:hover { + @include transition(all $tmg-f2 linear 0s); + border-color: $blue; + box-shadow: 0 0 1px $shadow-d1; + } + + .xblock-header { + margin-bottom: 0; + border-bottom: 0; + border-radius: ($baseline/5); + + .xblock-details { + font-size: .9em; + } + } + + .xblock-render { + display: none; + } +} diff --git a/cms/templates/container.html b/cms/templates/container.html deleted file mode 100644 index b5964e4c8f..0000000000 --- a/cms/templates/container.html +++ /dev/null @@ -1,113 +0,0 @@ -<%inherit file="base.html" /> -<%! -from django.core.urlresolvers import reverse -from django.utils.translation import ugettext as _ -%> -<%block name="title">${_("Container")} -<%block name="bodyclass">is-signedin course uploads view-container - -<%namespace name='static' file='static_content.html'/> -<%namespace name="units" file="widgets/units.html" /> - -<%block name="header_extras"> -% for template_name in [ ]: - -% endfor - - -<%block name="jsextra"> - - - - -<%block name="content"> - - -
-
-

- - ${_("Parent of Unit Page")} - ${_("Unit Page Super Long Title Name Goes Here Yeah Whats Up Parent")} - - > - ${_("Container")} -

- - -
-
- -
-
-
-

-
    - % for locator in components: -
  1. - % endfor -
-
- - -
-
- - - -<%block name="view_alerts"> - -
-
- - -
-

${_('Your file has been deleted.')}

-
- - - - ${_('close alert')} - -
-
- diff --git a/cms/templates/js/asset.underscore b/cms/templates/js/asset.underscore index 73f815f9e1..938ec10471 100644 --- a/cms/templates/js/asset.underscore +++ b/cms/templates/js/asset.underscore @@ -17,7 +17,7 @@ -