From fd7142bcde3895877f98c7766bfba1aa911e3101 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 9 Apr 2014 13:35:01 -0400 Subject: [PATCH] dnd container page styling --- cms/static/js/views/container.js | 7 ++- cms/static/sass/_base.scss | 2 +- cms/static/sass/elements/_controls.scss | 12 +++- cms/static/sass/elements/_xblocks.scss | 5 +- cms/static/sass/views/_container.scss | 55 ++++++++++++++++++- cms/templates/studio_xblock_wrapper.html | 3 + .../sass/course/courseware/_courseware.scss | 2 +- lms/templates/vert_module.html | 3 +- 8 files changed, 77 insertions(+), 12 deletions(-) diff --git a/cms/static/js/views/container.js b/cms/static/js/views/container.js index 4dd192d9d8..151d89f527 100644 --- a/cms/static/js/views/container.js +++ b/cms/static/js/views/container.js @@ -66,13 +66,14 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", oldParent = parent; } }, - helper: "clone", + helper: "original", opacity: '0.5', placeholder: 'component-placeholder', forcePlaceholderSize: true, axis: 'y', items: '> .vertical-element', - connectWith: ".vertical-container" + connectWith: ".vertical-container", + tolerance: "pointer" }); }, @@ -114,4 +115,4 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", }); return ContainerView; - }); // end define(); \ No newline at end of file + }); // end define(); diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 2385ab7d77..831c306f97 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -4,7 +4,7 @@ // basic setup html { font-size: 62.5%; - overflow-y: scroll; + height: 102%; // force scrollbar to prevent jump when scroll appears, cannot use overflow because it breaks drag } body { diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index cf8c114e49..3e2a423a78 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -227,11 +227,12 @@ .action-item { display: inline-block; + vertical-align: middle; .action-button { + display: block; border-radius: 3px; padding: ($baseline/4) ($baseline/2); - height: ($baseline*1.5); color: $gray-l1; &:hover { @@ -248,6 +249,15 @@ background-color: $gray-l1; } } + + .drag-handle { + display: block; + float: none; + height: ($baseline*1.2); + width: ($baseline); + margin: 0; + background: transparent url("../img/drag-handles.png") no-repeat right center; + } } } diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss index 38157c8aa0..43c49f753a 100644 --- a/cms/static/sass/elements/_xblocks.scss +++ b/cms/static/sass/elements/_xblocks.scss @@ -19,6 +19,7 @@ @include box-sizing(border-box); @include ui-flexbox(); @extend %ui-align-center-flex; + justify-content: space-between; border-bottom: 1px solid $gray-l4; border-radius: ($baseline/5) ($baseline/5) 0 0; min-height: ($baseline*2.5); @@ -30,14 +31,14 @@ @extend %ui-justify-left-flex; @include ui-flexbox(); width: flex-grid(6,12); - vertical-align: top; + vertical-align: middle; } .header-actions { @include ui-flexbox(); @extend %ui-justify-right-flex; width: flex-grid(6,12); - vertical-align: top; + vertical-align: middle; } } } diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss index a6a9147b87..cc2ca92a11 100644 --- a/cms/static/sass/views/_container.scss +++ b/cms/static/sass/views/_container.scss @@ -7,7 +7,7 @@ // ==================== // UI: container page view -body.view-container { +.view-container { .mast { border-bottom: none; @@ -97,7 +97,58 @@ body.view-container { } // UI: xblock rendering -body.view-container .content-primary { +body.view-container .content-primary { + + // dragging bits + .ui-sortable-helper { + + article { + display: none; + } + } + + .component-placeholder { + height: ($baseline*2.5); + opacity: .5; + margin: $baseline; + background-color: $gray-l5; + border-radius: ($baseline/2); + border: 2px dashed $gray-l2; + } + + .vert-mod { + + // min-height to allow drop when empty + .vertical-container { + min-height: ($baseline*2.5); + } + + .vert { + position: relative; + + .drag-handle { + display: none; // only show when vert is draggable + position: absolute; + top: 0; + right: ($baseline/2); // equal to margin on component + width: ($baseline*1.5); + height: ($baseline*2.5); + margin: 0; + background: transparent url("../img/drag-handles.png") no-repeat scroll center center; + } + } + + .is-draggable { + + .xblock-header { + padding-right: ($baseline*1.5); // make room for drag handle + } + + .drag-handle { + display: block; + } + } + } .wrapper-xblock { @extend %wrap-xblock; diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html index f656006856..bc636190d3 100644 --- a/cms/templates/studio_xblock_wrapper.html +++ b/cms/templates/studio_xblock_wrapper.html @@ -36,6 +36,9 @@ % endif +
  • + +
    • diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 051b98f088..2b590f92d8 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -14,7 +14,7 @@ html.video-fullscreen{ .wrap-instructor-info { margin: ($baseline/2) ($baseline/4) 0 0; overflow: hidden; - + &.studio-view { position: relative; top: -($baseline/2); diff --git a/lms/templates/vert_module.html b/lms/templates/vert_module.html index 51e12c0e60..549ae4e032 100644 --- a/lms/templates/vert_module.html +++ b/lms/templates/vert_module.html @@ -4,9 +4,8 @@ from django.utils.translation import ugettext as _
      % for idx, item in enumerate(items): -
    1. +
    2. - ${item['content']}