From 45a665c7c757f59fe5cbc2d0b7f58d54cbfdc53b Mon Sep 17 00:00:00 2001 From: marco Date: Mon, 29 Apr 2013 10:18:56 -0400 Subject: [PATCH 01/18] added mode bar up top --- cms/static/sass/views/_unit.scss | 13 +++++++++++++ cms/templates/component.html | 8 ++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 06849f851c..317247e886 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -423,6 +423,19 @@ body.course.unit { padding: 20px; border-radius: 2px 2px 0 0; + .component-edit-modes { + @include box-sizing(border-box); + list-style: none; + position: absolute; + width: 100%; + padding: 15px; + top: 0; + right: 0; + border-bottom: 1px solid $lightBluishGrey2; + background: $lightGrey; + + } + .metadata_edit { margin-bottom: 20px; font-size: 13px; diff --git a/cms/templates/component.html b/cms/templates/component.html index dad407ff7b..46a0880f35 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,11 +1,15 @@
+ + Editor + Settings +
${editor}
- Save - Cancel + Save + Cancel
From 94390e4314f88bf217032550b0039161288b2c48 Mon Sep 17 00:00:00 2001 From: marco Date: Mon, 29 Apr 2013 14:20:37 -0400 Subject: [PATCH 02/18] aria tabs v1 --- cms/templates/component.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/cms/templates/component.html b/cms/templates/component.html index 46a0880f35..c2b1f856f1 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,9 +1,15 @@
- - Editor - Settings - +
+ +
${editor}
From 30240ff01aa6bd8c363b1f2318f652e047ae6c81 Mon Sep 17 00:00:00 2001 From: marco Date: Mon, 29 Apr 2013 19:53:16 -0400 Subject: [PATCH 03/18] non revision --- cms/templates/component.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cms/templates/component.html b/cms/templates/component.html index c2b1f856f1..318e75c197 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -5,11 +5,12 @@ -
+
${editor}
From d55527b693564a0f126463615b3b0cdce13364ac Mon Sep 17 00:00:00 2001 From: marco Date: Wed, 1 May 2013 17:22:09 -0400 Subject: [PATCH 04/18] changes with aria --- cms/static/sass/views/_unit.scss | 60 +++++++++++++++++++++++++++++--- cms/templates/component.html | 56 +++++++++++++++++++---------- 2 files changed, 92 insertions(+), 24 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 317247e886..7a9cc42af3 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -13,6 +13,10 @@ body.course.unit { } //end problem selector reqs + + // Unit Page Main Column + // ==================== + .main-column { clear: both; float: left; @@ -31,6 +35,9 @@ body.course.unit { .unit-body { + // Unit Page Name + // ==================== + .unit-name-input { padding: 20px 40px; @@ -73,6 +80,10 @@ body.course.unit { letter-spacing: 1px; text-transform: uppercase; } + + // Component List Meta + // ==================== + // TODO: clean up organization of this page, to many levels/duplication .components { @@ -81,8 +92,6 @@ body.course.unit { z-index: 10; margin: 20px 40px; - - .title { margin: 0 0 15px 0; color: $mediumGrey; @@ -91,6 +100,9 @@ body.course.unit { } } + // New Components + // ==================== + &.new-component-item { margin: 20px 0px; border-top: 1px solid $mediumGrey; @@ -355,6 +367,9 @@ body.course.unit { } } + // Component Drag and Drop, Non-Edit Module Rendering, Styling + // ==================== + .component { border: 1px solid $lightBluishGrey2; border-radius: 3px; @@ -410,6 +425,9 @@ body.course.unit { } } + // Component Editing + // ==================== + .wrapper-component-editor { z-index: 9999; position: relative; @@ -423,9 +441,11 @@ body.course.unit { padding: 20px; border-radius: 2px 2px 0 0; - .component-edit-modes { + + // Edit Menu (Component Name, Mode-Editor, Mode-Settings) + + .component-edit-menu { @include box-sizing(border-box); - list-style: none; position: absolute; width: 100%; padding: 15px; @@ -434,8 +454,33 @@ body.course.unit { border-bottom: 1px solid $lightBluishGrey2; background: $lightGrey; + //Component Name + h3 { + //TO-DO ? + } + + //Nav-Edit Modes + .nav-edit-modes { + //TODO + + .tab { + display: inline; + } + } } + // Module Editors + .editor-wrapper{ + //TO-DO ? + } + + // Module Settings + .settings-wrapper{ + //TO-DO ? + } + + //OLD Meta-data Styling + //TO-DO port over old styling .metadata_edit { margin-bottom: 20px; font-size: 13px; @@ -469,6 +514,9 @@ body.course.unit { } } + // Unit Page Sidebar + // ==================== + .unit-settings { .window-contents { padding: 10px 20px; @@ -669,7 +717,9 @@ body.course.unit { } } -// editing units from courseware +// Editing Units from Courseware +// ==================== + body.unit { .component { diff --git a/cms/templates/component.html b/cms/templates/component.html index 318e75c197..1782c41b7c 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,24 +1,42 @@
-
- -
-
- ${editor} -
-
- Save - Cancel -
-
+
+

Name of Component

+ +
    + + +
+
+ +
+
+ ${editor} +
+ + + + + + + + + + + + + + + +
+ Save + Cancel +
+
From fbaed2e28b772cf82d45c2b5b032d8d346f5e5be Mon Sep 17 00:00:00 2001 From: marco Date: Fri, 3 May 2013 00:00:10 -0700 Subject: [PATCH 05/18] added shell of css and html organization --- cms/static/sass/views/_unit.scss | 58 +++++++++++++++++++++++++++----- cms/templates/component.html | 39 ++++++++++----------- 2 files changed, 70 insertions(+), 27 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 7a9cc42af3..ae45c29fb5 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -456,27 +456,69 @@ body.course.unit { //Component Name h3 { - //TO-DO ? + //TO-DO + //determine proper h-level } //Nav-Edit Modes .nav-edit-modes { - //TODO + list-style: none; + //move to the right, - .tab { - display: inline; + li { + //TO-DO + //inherit button styling + //no idea what it currently inherits... + + &:hover { + //TO-DO + //opacity change + } + + &.is-active { + //TO-DO + //inherit button styling + } } + } } - // Module Editors + // Editor Wrapper .editor-wrapper{ - //TO-DO ? + //TO-DO } - // Module Settings + // Settings Wrapper .settings-wrapper{ - //TO-DO ? + //TO-DO + + .settings-row { + // general row sizing stuff + width: 100%; + padding: 10px; + border-bottom: 1px solid $gray; + + //SettingsLabel + li > label { + //Text all aligned left + //this sets height of .settings-row to allow for long help strings. + } + + //SettingsInput + li > input { + width: 100px; + //TO-DO + + + } + + //SettingsHelp + li > span { + //Text all aligned left + } + + } } //OLD Meta-data Styling diff --git a/cms/templates/component.html b/cms/templates/component.html index 1782c41b7c..95e5d6915b 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,36 +1,37 @@
-

Name of Component

- -
    -
+
${editor} +
- -
Setting LabelSetting InputSetting Help
Example DropdownInput/Form stuff to be children here. Example Numerical Input
- - - - - - - - - - - - +
    + +
  • + + + ${helpstring} +
    • + +
  • + + + ${helpstring} +
    • ≈ +
Save From c842a5fc7c7b3e6fc6068e1462d83f2ecbcdfa5c Mon Sep 17 00:00:00 2001 From: marco Date: Fri, 3 May 2013 00:33:58 -0700 Subject: [PATCH 06/18] plugged in more pseudo code for various css class states necessary as well as examples for dropdown case and extra logic required there --- cms/static/sass/views/_unit.scss | 17 +++++++++++++++-- cms/templates/component.html | 25 ++++++++++++++++++++++--- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index ae45c29fb5..b4352f413d 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -502,15 +502,28 @@ body.course.unit { //SettingsLabel li > label { //Text all aligned left + display: inline-block; //this sets height of .settings-row to allow for long help strings. } //SettingsInput - li > input { + li > input, li > select { + @include placeholder($gray-l4); + @include font-size(16); + @include size(100%,100%); width: 100px; + height: auto; //TO-DO - + &:focus { + //TO-DO + } + } + + //SettingsClear + li > button { + border-radius: 20px; //maybe a % calc from input box height + margin-left: 15px; } //SettingsHelp diff --git a/cms/templates/component.html b/cms/templates/component.html index 95e5d6915b..b6c537e036 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -20,17 +20,36 @@
    -
  • + +
  • + + ${helpstring}
    • -
  • +
  • ${helpstring} -
    • ≈ + + +
  • + + + ${helpstring} +
    • +
From 036991dce8ca0018fa2ecdea15bf27f1181ce7e9 Mon Sep 17 00:00:00 2001 From: marco Date: Fri, 3 May 2013 08:10:37 -0700 Subject: [PATCH 07/18] moved bad variable name --- cms/templates/component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cms/templates/component.html b/cms/templates/component.html index b6c537e036..5a4fe11257 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -22,7 +22,7 @@
  • - +
    • -
    +
    ${editor}
    @@ -23,7 +23,7 @@
  • - + - ${helpstring} + helpstring
  • - ${helpstring} + helpstring
  • From d1595892fd82392e557c98a2ec1472b3bf2eba79 Mon Sep 17 00:00:00 2001 From: marco Date: Sat, 4 May 2013 12:23:40 -0700 Subject: [PATCH 11/18] starting settings --- cms/static/sass/views/_unit.scss | 51 +++++++++++++++++++------------- cms/templates/component.html | 20 ++++++------- 2 files changed, 40 insertions(+), 31 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index fea72f4573..204e9064eb 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -434,6 +434,10 @@ body.course.unit { background: $lightBluishGrey2; } + .component-edit-menu { + background-color: pink; + } + .component-editor { @include edit-box; @include box-shadow(none); @@ -445,8 +449,6 @@ body.course.unit { .component-edit-menu { @include box-sizing(border-box); - position: absolute; - width: 100%; //padding: 15px; top: 0; right: 0; @@ -494,40 +496,39 @@ body.course.unit { .settings-row { // general row sizing stuff - width: 100%; + background-color: $white; padding: 10px; - border-bottom: 1px solid $gray; + border-bottom: 1px solid $gray-l4; - //SettingsLabel - li > label { - //Text all aligned left - display: inline-block; - //this sets height of .settings-row to allow for long help strings. + .setting-label { + font-weight: normal; + display: inline; + position: relative; + left: 0; + width: 200px; } - //SettingsInput - li > input, li > select { + .setting-input { @include placeholder($gray-l4); @include font-size(16); @include size(100%,100%); - width: 100px; + width: 200px; height: auto; //TO-DO - &:focus { + //&:focus { //TO-DO - } } - //SettingsClear - li > button { - border-radius: 20px; //maybe a % calc from input box height + .setting-clear { + border-radius: 50%; margin-left: 15px; } //SettingsHelp - li > span { - //Text all aligned left + .setting-help { + @include font-size(14); + font-color: $gray-l6; } } @@ -561,9 +562,17 @@ body.course.unit { font-weight: 700; } - .save-button { - margin-top: 10px; + // Module Actions + // ==================== + + .module-actions { + padding: 0 0 10px 10px; + box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; + background-color: $gray-l4; + + .save-button { margin: 15px 8px 0 0; + } } } } diff --git a/cms/templates/component.html b/cms/templates/component.html index 72c7df2845..356766c412 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -22,24 +22,24 @@
  • - - + + - - helpstring + helpstring
  • - - - helpstring + + + helpstring
  • - - @@ -47,7 +47,7 @@ - helpstring + helpstring
    • From ad0909dfbd41f4c5b98e2f7dd4547d258fd54540 Mon Sep 17 00:00:00 2001 From: marco Date: Sat, 4 May 2013 23:19:49 -0700 Subject: [PATCH 12/18] style input boxes --- cms/static/sass/views/_unit.scss | 64 ++++++++++++++++++++++++++------ cms/templates/component.html | 18 ++++++--- 2 files changed, 65 insertions(+), 17 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 204e9064eb..9e4a102d69 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -453,7 +453,8 @@ body.course.unit { top: 0; right: 0; border-bottom: 1px solid $lightBluishGrey2; - background: $gray-l4; + box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; + background-color: $white; //Component Name h4 { @@ -492,43 +493,84 @@ body.course.unit { // Settings Wrapper .settings-wrapper{ - //TO-DO + //doverflow-y: scroll; .settings-row { // general row sizing stuff - background-color: $white; + background-color: $lightBluishGrey2; padding: 10px; - border-bottom: 1px solid $gray-l4; + border-bottom: 1px solid $gray-l2; + opacity: .8; + + &:hover { + opacity: 1; + } .setting-label { font-weight: normal; - display: inline; + display: inline-block; + padding-left: 15px; position: relative; left: 0; - width: 200px; + width: 100px; } .setting-input { @include placeholder($gray-l4); - @include font-size(16); - @include size(100%,100%); + border-radius: 2px; width: 200px; height: auto; - //TO-DO + border: 1px solid $gray-l2; //&:focus { //TO-DO } + select { + border: 1px solid $gray-l4; + background: none repeat scroll #F2F2F2; + padding: 5px; + + &:active { + background-color: #FFFCF1; + } + + option { + line-height: 16px; + + } + } + .setting-clear { + @include font-size(11); + color: $gray; + width: 25px; + height: 25px; + vertical-align: middle; + padding: 5px; border-radius: 50%; - margin-left: 15px; + margin-left: 10px; + box-shadow: none; + text-shadow: none; + border: 1px solid $gray-l4; + + &:hover { + background-color: $blue-s3; + color: $white; + } + + &.inactive { + visibility: hidden; + } } //SettingsHelp .setting-help { - @include font-size(14); + display: inline-block; + @include font-size(12); font-color: $gray-l6; + padding-left: 20px; + max-width: 50%; } } diff --git a/cms/templates/component.html b/cms/templates/component.html index 356766c412..6bb3b3eff9 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -4,10 +4,10 @@

    Viewing: Name of Component

    @@ -23,7 +23,7 @@
  • - + + helpstring helpstringhelpstringhelpstringhelpstringhel pstringhelpstringh elpstringhelpstrin sghelp stringhelp stringhelpstringhe lpstring helpstringhelpstringhelpstring
  • - + + helpstring
    • From 6b4ab20d02681d5c2c106e83477588c7abc871df Mon Sep 17 00:00:00 2001 From: marco Date: Sun, 5 May 2013 14:09:59 -0700 Subject: [PATCH 13/18] styled modes header, added inactive and active mode visibility as well as is-set mode styling. no js behavior in yet. adds overscoll fix for webkit --- cms/static/sass/views/_unit.scss | 86 ++++++++++++++++++++------------ cms/templates/component.html | 17 ++++--- 2 files changed, 64 insertions(+), 39 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 9e4a102d69..8ee048df24 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -434,10 +434,6 @@ body.course.unit { background: $lightBluishGrey2; } - .component-edit-menu { - background-color: pink; - } - .component-editor { @include edit-box; @include box-shadow(none); @@ -449,40 +445,50 @@ body.course.unit { .component-edit-menu { @include box-sizing(border-box); - //padding: 15px; + padding: 15px; top: 0; right: 0; - border-bottom: 1px solid $lightBluishGrey2; - box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; - background-color: $white; + border-bottom: 1px solid $gray-l2; + background-color: $lightBluishGrey2; + box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset; //Component Name - h4 { - //TO-DO - //determine proper h-level + .component-name { + width: 50%; + @include font-size(14); + + em { + font-weight: 700; + } } //Nav-Edit Modes .nav-edit-modes { list-style: none; + right: 0; + top: 0; + position: absolute; + padding: 10px; - li { - //TO-DO - //inherit button styling - float: right; - //no idea what it currently inherits... + .mode { + display: inline-block; - &:hover { - //TO-DO - //opacity change + .inactive-mode { + display: none; } - &.is-active { - //TO-DO - //inherit button styling + .active-mode { + @include white-button; + + &.is-set { + background-color: $lightBluishGrey2; + cursor: default; + linear-gradient: none; + @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .6) inset); + + } } } - } } @@ -493,25 +499,46 @@ body.course.unit { // Settings Wrapper .settings-wrapper{ - //doverflow-y: scroll; + overflow: auto; + max-height: 400px; + //TO-DO browser testing for scrollbar, especially styles below. + + &::-webkit-scrollbar { + -webkit-appearance: none; + width: 11px; + height: 11px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 8px; + border: 2px solid $lightBluishGrey2; + background-color: rgba(0, 0, 0, .5); + } .settings-row { // general row sizing stuff - background-color: $lightBluishGrey2; + background-color: $white; padding: 10px; border-bottom: 1px solid $gray-l2; - opacity: .8; + opacity: .6; &:hover { opacity: 1; } + &.is-set { + opacity: .9; + background-color: $white; + font-weight: 200; + } + .setting-label { font-weight: normal; display: inline-block; padding-left: 15px; position: relative; left: 0; + height: 50%; width: 100px; } @@ -534,11 +561,6 @@ body.course.unit { &:active { background-color: #FFFCF1; } - - option { - line-height: 16px; - - } } .setting-clear { @@ -570,7 +592,7 @@ body.course.unit { @include font-size(12); font-color: $gray-l6; padding-left: 20px; - max-width: 50%; + max-width: 40%; } } diff --git a/cms/templates/component.html b/cms/templates/component.html index 6bb3b3eff9..e4e733aacf 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,21 +1,24 @@
    -
    -

    Viewing: Name of Component

    +
    + Editing: Name of Component
    - ${editor} +
      @@ -37,7 +40,7 @@ - helpstring helpstringhelpstringhelpstringhelpstringhel pstringhelpstringh elpstringhelpstrin sghelp stringhelp stringhelpstringhe lpstring helpstringhelpstringhelpstring + This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.
    • From 38abc0167db13d17d9bfb8b5edbf53d145003384 Mon Sep 17 00:00:00 2001 From: marco Date: Mon, 6 May 2013 07:37:14 -0700 Subject: [PATCH 14/18] label on top of input field move --- cms/static/sass/views/_settings.scss | 2 +- cms/static/sass/views/_unit.scss | 22 ++++++++++++---------- cms/templates/component.html | 14 +++++++------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index d1ba706d56..def730071e 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -21,7 +21,7 @@ body.course.settings { font-size: 14px; } - .message-status { + .message-status { display: none; @include border-top-radius(2px); @include box-sizing(border-box); diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 8ee048df24..32b221d9c7 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -481,10 +481,10 @@ body.course.unit { @include white-button; &.is-set { - background-color: $lightBluishGrey2; + background-color: $white; cursor: default; linear-gradient: none; - @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .6) inset); + @include box-shadow(0 0 1px 1px rgba(240, 240, 240, .1) inset); } } @@ -518,24 +518,22 @@ body.course.unit { .settings-row { // general row sizing stuff background-color: $white; - padding: 10px; + padding: 10px 20px; border-bottom: 1px solid $gray-l2; - opacity: .6; + opacity: .8; &:hover { opacity: 1; } &.is-set { - opacity: .9; + opacity: 1; background-color: $white; font-weight: 200; } .setting-label { - font-weight: normal; - display: inline-block; - padding-left: 15px; + font-weight: 500; position: relative; left: 0; height: 50%; @@ -545,6 +543,7 @@ body.course.unit { .setting-input { @include placeholder($gray-l4); border-radius: 2px; + padding: 6px 8px 8px; width: 200px; height: auto; border: 1px solid $gray-l2; @@ -578,7 +577,9 @@ body.course.unit { &:hover { background-color: $blue-s3; + border: 1px solid $blue-s3; color: $white; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15)); } &.inactive { @@ -588,11 +589,12 @@ body.course.unit { //SettingsHelp .setting-help { + @include clearfix; display: inline-block; @include font-size(12); font-color: $gray-l6; padding-left: 20px; - max-width: 40%; + width: 65%; } } @@ -632,7 +634,7 @@ body.course.unit { .module-actions { padding: 0 0 10px 10px; box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; - background-color: $gray-l4; + background-color: $gray-l6; .save-button { margin: 15px 8px 0 0; diff --git a/cms/templates/component.html b/cms/templates/component.html index e4e733aacf..7cb93bdecc 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -25,8 +25,8 @@
    • - - + +
    • - - + + - This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary. +
      This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.
    • - - From d28c0b5f91733eb3252e89826339a25005dcb20d Mon Sep 17 00:00:00 2001 From: marco Date: Tue, 7 May 2013 08:59:28 -0400 Subject: [PATCH 15/18] cleaned up styling, synced up partially to existing standards for forms, fonts, colors, etc; currently open select box issue on chrome --- cms/static/sass/views/_unit.scss | 104 ++++++++++++++++++++++--------- cms/templates/component.html | 90 ++++++++++++++------------ 2 files changed, 123 insertions(+), 71 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 32b221d9c7..cc7042ebca 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -445,20 +445,23 @@ body.course.unit { .component-edit-menu { @include box-sizing(border-box); - padding: 15px; + padding: 15px 0 15px 20px; top: 0; right: 0; border-bottom: 1px solid $gray-l2; - background-color: $lightBluishGrey2; + 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%; - @include font-size(14); em { - font-weight: 700; + @extend .t-title-3; + color: $white; } } @@ -478,14 +481,18 @@ body.course.unit { } .active-mode { - @include white-button; + @include blue-button; + } - &.is-set { - background-color: $white; - cursor: default; - linear-gradient: none; - @include box-shadow(0 0 1px 1px rgba(240, 240, 240, .1) inset); + .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; } } } @@ -493,16 +500,18 @@ body.course.unit { } // Editor Wrapper - .editor-wrapper{ + .wrapper-component-editor { //TO-DO } + + // Settings Wrapper - .settings-wrapper{ + .wrapper-component-settings ul{ overflow: auto; max-height: 400px; - //TO-DO browser testing for scrollbar, especially styles below. + //chrome scrollbar visibility correction &::-webkit-scrollbar { -webkit-appearance: none; width: 11px; @@ -511,57 +520,92 @@ body.course.unit { &::-webkit-scrollbar-thumb { border-radius: 8px; - border: 2px solid $lightBluishGrey2; + border: 2px solid $gray-l2; background-color: rgba(0, 0, 0, .5); } .settings-row { - // general row sizing stuff + @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; - font-weight: 200; + + .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 { - font-weight: 500; + @extend .t-copy-sub2; + display: inline-block; position: relative; left: 0; height: 50%; - width: 100px; + 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: 200px; + 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; @@ -570,16 +614,17 @@ body.course.unit { vertical-align: middle; padding: 5px; border-radius: 50%; - margin-left: 10px; + 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; - @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15)); } &.inactive { @@ -587,14 +632,13 @@ body.course.unit { } } - //SettingsHelp + //Setting Tip .setting-help { - @include clearfix; - display: inline-block; @include font-size(12); + display: inline-block; font-color: $gray-l6; - padding-left: 20px; - width: 65%; + max-width: 50%; + vertical-align: top; } } @@ -632,9 +676,9 @@ body.course.unit { // ==================== .module-actions { + @include box-shadow(inset 0 1px 1px $shadow); padding: 0 0 10px 10px; - box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; - background-color: $gray-l6; + background-color: $gray-l4; .save-button { margin: 15px 8px 0 0; @@ -755,9 +799,9 @@ body.course.unit { .unit-location { .url { + @include box-shadow(none); width: 100%; margin-bottom: 10px; - @include box-shadow(none); } .draft-tag, @@ -771,6 +815,7 @@ body.course.unit { @include tree-view; .section-item { + @include box-sizing(border-box); display: inline-block; width: 100%; font-size: 11px; @@ -778,7 +823,6 @@ body.course.unit { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - @include box-sizing(border-box); } ol { diff --git a/cms/templates/component.html b/cms/templates/component.html index 7cb93bdecc..ffbd7b7cc8 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -17,49 +17,57 @@
    -
    - +
    +
    -
      - - -
    • - - - - - helpstring -
      • - -
    • - - - -
      This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.
      - - -
    • - - - - helpstring -
      • - -
    +
    +
      + + +
    • +
      + + + + +
      + helpstring +
      • + +
    • +
      + + + +
      + This is a longer sentence, repeated multiple times here just to test out the functionaltiy. +
      • + +
    • +
      + + + +
      + helpstring +
      • + +
    +
    Save From 977d0d76c24075a65d606f44b78ea490a3dc9758 Mon Sep 17 00:00:00 2001 From: marco Date: Tue, 7 May 2013 16:40:21 -0400 Subject: [PATCH 16/18] 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
    From 328424790501df948635c259a273e05c98880844 Mon Sep 17 00:00:00 2001 From: marco Date: Thu, 9 May 2013 09:35:31 -0400 Subject: [PATCH 17/18] restyling of the input fields, partway through adding in examples of all settings --- cms/static/sass/views/_unit.scss | 81 +++++++++++++--------------- cms/templates/component.html | 91 +++++++++++++++++++++++++++----- 2 files changed, 115 insertions(+), 57 deletions(-) diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss index 75b3224f45..c7cdce3cb1 100644 --- a/cms/static/sass/views/_unit.scss +++ b/cms/static/sass/views/_unit.scss @@ -452,6 +452,19 @@ body.course.unit { color: #fff; font-weight: 700; } + + // Module Actions + .module-actions { + @include box-shadow(inset 0 1px 1px $shadow); + padding: 0px 0 10px 10px; + background-color: $gray-l4; + + .save-button { + margin: 15px 8px 0 0; + } + } + + } } } @@ -501,12 +514,13 @@ body.course.unit { .is-set { @include linear-gradient($blue, $blue); - box-shadow: inset 0 0 2px $shadow; + box-shadow: inset 0 0 3px $shadow; background-color: $blue; + cursor: default; &:hover { - box-shadow: inset 0 0 2px $shadow; + box-shadow: inset 0 0 3px $shadow; background-color: $blue; } } @@ -531,7 +545,6 @@ body.course.unit { overflow: auto; max-height: 400px; - //chrome scrollbar visibility correction &::-webkit-scrollbar { -webkit-appearance: none; @@ -547,10 +560,9 @@ body.course.unit { //component-setting-entry .field.comp-setting-entry { - //margin: 0 0 $baseline 0; - + //margin: 0 0 $baseline 0; WILL BE REMOVED PRIOR TO PUSH background-color: $white; - padding: 20px 20px; + padding: 20px; border-bottom: 1px solid $gray-l2; opacity: .6; @@ -603,31 +615,32 @@ body.course.unit { } 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-sub1; + @include transition(color, 0.15s, ease-in-out); + //margin: 0 0 ($baseline/4) 0; WILL BE REMOVED PRIOR TO PUSH + font-weight: 400; - @extend .t-copy-sub2; display: inline-block; position: relative; left: 0; - height: 50%; - width: 120px; - text-overflow: ellipsis; + min-width: 100px; + width: 35%; - //&.is-focused { - // color: $blue; - //} + &.is-focused { + color: $blue; + } } input, select { - //@include placeholder($gray-l4); - //@include font-size(16); - //@include size(100%,100%); - //padding: ($baseline/2); + @include placeholder($gray-l4); + @include font-size(16); + @include size(100%,100%); + padding: ($baseline/2); + min-width: 100px; + width: 45%; //&.long { + // //} //&.short { @@ -638,23 +651,16 @@ body.course.unit { //} //&:focus { - // + .tip { // color: $gray; // } - - @extend .t-copy-sub3; - @include placeholder($gray-l4); - border-radius: 2px; - padding: 6px 8px 8px; - width: 180px; - height: auto; + border-radius: 3px; border: 1px solid $gray-l2; text-overflow: ellipsis; } select { - border: 1px solid $gray-l4; + //border: 1px solid $gray-l2; background: none repeat scroll #F2F2F2; padding: 5px; @@ -701,26 +707,13 @@ body.course.unit { @include font-size(12); display: inline-block; font-color: $gray-l6; - max-width: 50%; + //max-width: 50%; vertical-align: top; } } } } -// Module Actions -// ==================== - -.module-actions { - @include box-shadow(inset 0 1px 1px $shadow); - padding: 0 0 10px 10px; - background-color: $gray-l4; - - .save-button { - margin: 15px 8px 0 0; - } -} - // Editing Units from Courseware // ==================== diff --git a/cms/templates/component.html b/cms/templates/component.html index 496da8cd61..250609d43e 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -24,33 +24,97 @@
      + + +
    • +
      + + + +
      + If disabled, students cannot upload images to be graded with this problem. +
      • + +
    • +
      + + + +
      + If enabled, submissions with poor spelling, short length, or poor grammar won't be peer reviewed. +
      • + +
    • +
      + + + + +
      + This value specifies the discussion are where this . This name appears in the left pane of the discussion forum for your course (question) +
      • + + + + + +
    • +
      + + + + +
      + This value defines the name of this component, and is shown to students as a tooltip. +
      • + + + + +
    • - - + +
      - helpstring + This value defines the name of this component, and is shown to students as a tooltip.
      • - +
    • -
      - - +
      + +
      - This is a longer sentence, repeated multiple times here just to test out the functionaltiy. + When set, this limits the number of times a student can attempt this problem.
      • - +
    • -
      - +
      +
      - This value specifies the discussion are where this . This name appears in the left pane of the discussion forum for your course (question) -
      • - - - - - -
    • -
      - - - - -
      - This value defines the name of this component, and is shown to students as a tooltip. -
      • - - - - - -
    • -
      - - - - -
      - This value defines the name of this component, and is shown to students as a tooltip. + This value specifies the discussion are where this component lives, organized in the left pane of the discussion forum for your course.
    • - - + + + -
      - When set, this limits the number of times a student can attempt this problem. +
    + This value defines the name of this component, and is shown to students as a tooltip.
  • - - - - - - - + +
    - helpstring + If disabled, this problem will not be graded.
    • -
  • +
  • - - + + -
    - helpstring + This value ....needs helpstring....
    • + +
  • +
    + + + +
    + Choose from a few different ways to incorporate randomization into this problem. +
    • + +
  • +
    + + + +
    + Choose from a few different options to define whether students interact with the problem's answer. (info icon here) You can define this for every problem in a course. +
    • + +
  • +
    + + + + +
    + You can specify the order of discussion areas in the discussion dropdown menu. Their order is alphabetical, but uses the sort key value instead of their name. +
    • + +
  • +
    + + + + +
    + Specify a subcategory name for this discussion. This name appears in the left pane of the discussion forum for your course. +
    • + +
    Setting LabelSetting InputSetting Help
    Example DropdownInput/Form stuff to be children here. Example Numerical Input