From 977d0d76c24075a65d606f44b78ea490a3dc9758 Mon Sep 17 00:00:00 2001 From: marco Date: Tue, 7 May 2013 16:40:21 -0400 Subject: [PATCH] cleaning up styles to use list-input, field, group, label, input, tip, etc standards. also opted to try out initial pass at hierarchy splitting of css classes on items that repeat (li, for example) --- cms/static/sass/elements/_forms.scss | 1 - cms/static/sass/views/_unit.scss | 836 ++++++++++++++------------- cms/templates/component.html | 49 +- 3 files changed, 473 insertions(+), 413 deletions(-) diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 1faf4a883e..70d959fdea 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -124,7 +124,6 @@ code { .CodeMirror { font-size: 13px; - border: 1px solid $darkGrey; background: #fff; } diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index cc7042ebca..75b3224f45 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -431,7 +431,7 @@ body.course.unit { .wrapper-component-editor { z-index: 9999; position: relative; - background: $lightBluishGrey2; + background: $white; } .component-editor { @@ -441,225 +441,6 @@ body.course.unit { padding: 0; border-radius: 2px 2px 0 0; - // Edit Menu (Component Name, Mode-Editor, Mode-Settings) - - .component-edit-menu { - @include box-sizing(border-box); - padding: 15px 0 15px 20px; - top: 0; - right: 0; - border-bottom: 1px solid $gray-l2; - background-color: $blue; - color: $white; - box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset; - - //Component Name - .component-name { - @extend .t-copy-sub1; - color: $white; - width: 50%; - - em { - @extend .t-title-3; - color: $white; - } - } - - //Nav-Edit Modes - .nav-edit-modes { - list-style: none; - right: 0; - top: 0; - position: absolute; - padding: 10px; - - .mode { - display: inline-block; - - .inactive-mode { - display: none; - } - - .active-mode { - @include blue-button; - } - - .is-set { - @include linear-gradient($blue, $blue); - box-shadow: inset 0 0 2px $shadow; - background-color: $blue; - cursor: default; - - &:hover { - box-shadow: inset 0 0 2px $shadow; - background-color: $blue; - } - } - } - } - } - - // Editor Wrapper - .wrapper-component-editor { - //TO-DO - } - - - - // Settings Wrapper - .wrapper-component-settings ul{ - 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); - } - - .settings-row { - @extend .field-group; // TO-DO ??? - background-color: $white; - padding: 10px 20px; - border-bottom: 1px solid $gray-l2; - opacity: .8; - - &:hover { - @include transition(opacity 0.25s ease-in-out); - opacity: 1; - } - - //Styles for component settings which are set - &.is-set { - opacity: 1; - background-color: $white; - - .setting-label { - color: $blue-l1; - } - - .setting-input { - color: $blue-l1; - } - - .setting-clear { - //... - } - } - - .wrapper-setting-actions { - @extend .field; - display: inline-block; - width: 360px; - top: 0; - vertical-align: top; - } - - //Setting Label - also basic 'label' - .setting-label { - @extend .t-copy-sub2; - display: inline-block; - position: relative; - left: 0; - height: 50%; - width: 120px; - text-overflow: ellipsis; - } - - //Setting Input - also basic 'field' - .setting-input { - @extend .t-copy-sub3; - @include placeholder($gray-l4); - border-radius: 2px; - padding: 6px 8px 8px; - width: 180px; - height: auto; - border: 1px solid $gray-l2; - text-overflow: ellipsis; - - //&:focus { - //TO-DO - } - - //custom styling of selectbox to look more like input boxes. - select { - border: 1px solid $gray-l4; - background: none repeat scroll #F2F2F2; - padding: 5px; - - &:focus { - @include box-shadow(0 1px 1px $shadow); - @include transition(opacity 0.25s ease-in-out); - background-color: #FFFCF1; - } - - &:active { - background-color: #FFFCF1; - } - } - - //Setting Clear Button - .setting-clear { - @include font-size(11); - color: $gray; - width: 25px; - height: 25px; - vertical-align: middle; - padding: 5px; - border-radius: 50%; - margin: 0 10px; - box-shadow: none; - text-shadow: none; - border: 1px solid $gray-l4; - - &:hover { - @include box-shadow(0 1px 1px $shadow); - @include transition(opacity 0.25s ease-in-out); - background-color: $blue-s3; - border: 1px solid $blue-s3; - color: $white; - } - - &.inactive { - visibility: hidden; - } - } - - //Setting Tip - .setting-help { - @include font-size(12); - display: inline-block; - font-color: $gray-l6; - max-width: 50%; - vertical-align: top; - } - - } - } - - //OLD Meta-data Styling - //TO-DO port over old styling - .metadata_edit { - margin-bottom: 20px; - font-size: 13px; - - li { - margin-bottom: 10px; - } - - label { - display: inline-block; - margin-right: 10px; - } - } - h3 { margin-bottom: 10px; font-size: 18px; @@ -671,222 +452,272 @@ body.course.unit { color: #fff; font-weight: 700; } + } + } +} - // Module Actions - // ==================== +// Edit Header (Component Name, Mode-Editor, Mode-Settings) - .module-actions { - @include box-shadow(inset 0 1px 1px $shadow); - padding: 0 0 10px 10px; - background-color: $gray-l4; +.component-edit-header { + @include box-sizing(border-box); + padding: 15px 0 15px 20px; + top: 0; + right: 0; + border-bottom: 1px solid $gray-l2; + background-color: $blue; + color: $white; + box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset; - .save-button { - margin: 15px 8px 0 0; - } - } + //Component Name + .component-name { + @extend .t-copy-sub1; + color: $white; + width: 50%; + + em { + font-weight: 600; + color: $white; } } - // Unit Page Sidebar - // ==================== + //Nav-Edit Modes + .nav-edit-modes { + list-style: none; + right: 0; + top: 0; + position: absolute; + padding: 10px; - .unit-settings { - .window-contents { - padding: 10px 20px; - } - - .unit-actions { - border-bottom: none; - padding-bottom: 0; - } - - .published-alert { - display: none; - padding: 10px; - border: 1px solid #edbd3c; - border-radius: 3px; - background: #fbf6e1; - font-size: 14px; - line-height: 1.4; - - div { - margin-top: 15px; - } - } - - input[type="radio"] { - margin-right: 7px; - } - - .status { - font-size: 12px; - - strong { - font-weight: 700; - } - } - - .preview-button, .view-button { - @include white-button; - margin-bottom: 10px; - } - - .publish-button { - @include orange-button; - } - - .delete-button { - @include blue-button; - } - - .delete-draft { + .mode { display: inline-block; - } - .delete-button, - .preview-button, - .publish-button, - .view-button { - font-size: 11px; - margin-top: 10px; - padding: 6px 15px 8px; - } - } - - .unit-history { - &.collapsed { - h4 { - border-bottom: none; - border-radius: 3px; - } - - .window-contents { + .inactive-mode { display: none; } - } - ol { - border: 1px solid #ced2db; + .active-mode { + @include blue-button; + } - li { - display: block; - padding: 6px 8px 8px 10px; - background: #edf1f5; - font-size: 12px; + .is-set { + @include linear-gradient($blue, $blue); + box-shadow: inset 0 0 2px $shadow; + background-color: $blue; + cursor: default; &:hover { - background: #fffcf1; - - .item-actions { - display: block; - } - } - - &.checked { - background: #d1dae3; - } - - .item-actions { - display: none; - } - - input[type="radio"] { - margin-right: 7px; + box-shadow: inset 0 0 2px $shadow; + background-color: $blue; } } } } +} - .unit-location { - .url { - @include box-shadow(none); - width: 100%; - margin-bottom: 10px; +// Editor Wrapper +.wrapper-comp-editor { + //TO-DO +} + +// Settings Wrapper +.wrapper-comp-settings { + + //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; } - .draft-tag, - .hidden-tag, - .private-tag, - .has-new-draft-tag { - font-size: 8px; + &::-webkit-scrollbar-thumb { + border-radius: 8px; + border: 2px solid $gray-l2; + background-color: rgba(0, 0, 0, .5); } - .window-contents > ol { - @include tree-view; + //component-setting-entry + .field.comp-setting-entry { + //margin: 0 0 $baseline 0; - .section-item { - @include box-sizing(border-box); + background-color: $white; + padding: 20px 20px; + border-bottom: 1px solid $gray-l2; + opacity: .6; + + &:last-child { + //margin-bottom: 0; + } + + //no required component settings currently + &.required { + label { + //font-weight: 600; + } + label:after { + //margin-left: ($baseline/4); + //content: "*"; + } + } + + &:hover { + //TO-DO review existing patterns for hover on field + @include transition(opacity 0.25s ease-in-out); + opacity: 1; + } + + &.is-set { + opacity: 1; + background-color: $white; + + //setting-label + .setting-label { + //color: $blue-l1; + } + + //setting-input + .setting-input { + color: $blue-l1; + } + + //setting-clear + .setting-clear { + //... + } + } + + .wrapper-comp-setting{ display: inline-block; - width: 100%; - font-size: 11px; - padding: 2px 8px 4px; + width: 360px; + top: 0; + vertical-align: top; + } + + label.setting-label { + //@extend .t-copy-sub1; + //@include transition(color, 0.15s, ease-in-out); + //margin: 0 0 ($baseline/4) 0; + //font-weight: 400; + + @extend .t-copy-sub2; + display: inline-block; + position: relative; + left: 0; + height: 50%; + width: 120px; text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + + //&.is-focused { + // color: $blue; + //} } - ol { - .section-item { - padding-left: 20px; + input, select { + //@include placeholder($gray-l4); + //@include font-size(16); + //@include size(100%,100%); + //padding: ($baseline/2); + + //&.long { + //} + + //&.short { + //} + + //&.error { + // border-color: $red; + //} + + //&:focus { + + // + .tip { + // color: $gray; + // } + + @extend .t-copy-sub3; + @include placeholder($gray-l4); + border-radius: 2px; + padding: 6px 8px 8px; + width: 180px; + height: auto; + border: 1px solid $gray-l2; + text-overflow: ellipsis; + } + + select { + border: 1px solid $gray-l4; + background: none repeat scroll #F2F2F2; + padding: 5px; + + &:focus { + @include box-shadow(0 1px 1px $shadow); + @include transition(opacity 0.25s ease-in-out); + background-color: #FFFCF1; } - .new-unit-item { - margin-left: 20px; + &:active { + background-color: #FFFCF1; } } - ol ol { - .section-item { - padding-left: 34px; + //input[type=others] + + .action.setting-clear { + @include font-size(11); + color: $gray; + width: 25px; + height: 25px; + vertical-align: middle; + padding: 5px; + border-radius: 50%; + margin: 0 10px; + box-shadow: none; + text-shadow: none; + border: 1px solid $gray-l4; + + &:hover { + @include box-shadow(0 1px 1px $shadow); + @include transition(opacity 0.25s ease-in-out); + background-color: $blue-s3; + border: 1px solid $blue-s3; + color: $white; } - .new-unit-item { - margin: 0 0 10px 41px; + &.inactive { + visibility: hidden; } } + + tip.setting-help { + @include font-size(12); + display: inline-block; + font-color: $gray-l6; + max-width: 50%; + vertical-align: top; + } } } +} - .edit-state-draft { - .visibility, +// Module Actions +// ==================== - .edit-draft-message, - .view-button { - display: none; - } +.module-actions { + @include box-shadow(inset 0 1px 1px $shadow); + padding: 0 0 10px 10px; + background-color: $gray-l4; - .published-alert { - display: block; - } - } - - .edit-state-public { - .delete-draft, - .component-actions, - .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; - } + .save-button { + margin: 15px 8px 0 0; } } @@ -914,3 +745,222 @@ body.unit { } } } + +// Unit Page Sidebar +// ==================== + +.unit-settings { + .window-contents { + padding: 10px 20px; + } + + .unit-actions { + border-bottom: none; + padding-bottom: 0; + } + + .published-alert { + display: none; + padding: 10px; + border: 1px solid #edbd3c; + border-radius: 3px; + background: #fbf6e1; + font-size: 14px; + line-height: 1.4; + + div { + margin-top: 15px; + } + } + + input[type="radio"] { + margin-right: 7px; + } + + .status { + font-size: 12px; + + strong { + font-weight: 700; + } + } + + .preview-button, .view-button { + @include white-button; + margin-bottom: 10px; + } + + .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: 10px; + 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 10px; + 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 { + .url { + @include box-shadow(none); + width: 100%; + margin-bottom: 10px; + } + + .draft-tag, + .hidden-tag, + .private-tag, + .has-new-draft-tag { + font-size: 8px; + } + + .window-contents > ol { + @include tree-view; + + .section-item { + @include box-sizing(border-box); + display: inline-block; + width: 100%; + font-size: 11px; + padding: 2px 8px 4px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + ol { + .section-item { + padding-left: 20px; + } + + .new-unit-item { + margin-left: 20px; + } + } + + ol ol { + .section-item { + padding-left: 34px; + } + + .new-unit-item { + margin: 0 0 10px 41px; + } + } + } +} + +.edit-state-draft { + .visibility, + + .edit-draft-message, + .view-button { + display: none; + } + + .published-alert { + display: block; + } +} + +.edit-state-public { + .delete-draft, + .component-actions, + .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; + } +} + + +//OLD Meta-data Styling +//TO-DO port over old styling +.metadata_edit { + margin-bottom: 20px; + font-size: 13px; + + li { + margin-bottom: 10px; + } + + label { + display: inline-block; + margin-right: 10px; + } +} \ No newline at end of file diff --git a/cms/templates/component.html b/cms/templates/component.html index ffbd7b7cc8..496da8cd61 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,6 +1,6 @@
-
+
Editing: Name of Component
    @@ -17,41 +17,41 @@
-
+
-
+
    -
  • -
    - - +
  • +
    + + -
    - helpstring + helpstring
    • -
  • +
  • - - -
    - This is a longer sentence, repeated multiple times here just to test out the functionaltiy. + This is a longer sentence, repeated multiple times here just to test out the functionaltiy.
    • -
  • +
  • - - @@ -59,11 +59,22 @@ -
    - helpstring + helpstring +
    • +
  • +
    + + + + +
    + helpstring