Skip to content

E
edx-platform
Commit 977d0d76 by marco
Options

cleaning up styles to use list-input, field, group, label, input, tip, etc… 

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)
parent d28c0b5f
Showing with 446 additions and 385 deletions
cms/static/sass/elements/_forms.scss
...@@ -124,7 +124,6 @@ code { ...@@ -124,7 +124,6 @@ code {
.CodeMirror { .CodeMirror {
font-size: 13px; font-size: 13px;
border: 1px solid $darkGrey;
background: #fff; background: #fff;
} }
......
cms/static/sass/views/_unit.scss
...@@ -431,7 +431,7 @@ body.course.unit { ...@@ -431,7 +431,7 @@ body.course.unit {
.wrapper-component-editor { .wrapper-component-editor {
z-index: 9999; z-index: 9999;
position: relative; position: relative;
background: $lightBluishGrey2; background: $white;
} }
.component-editor { .component-editor {
...@@ -441,476 +441,526 @@ body.course.unit { ...@@ -441,476 +441,526 @@ body.course.unit {
padding: 0; padding: 0;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
// Edit Menu (Component Name, Mode-Editor, Mode-Settings) h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
}
.component-edit-menu { h5 {
@include box-sizing(border-box); margin-bottom: 8px;
padding: 15px 0 15px 20px; color: #fff;
top: 0; font-weight: 700;
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 // Edit Header (Component Name, Mode-Editor, Mode-Settings)
.component-name {
@extend .t-copy-sub1;
color: $white;
width: 50%;
em { .component-edit-header {
@extend .t-title-3; @include box-sizing(border-box);
color: $white; 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;
//Nav-Edit Modes //Component Name
.nav-edit-modes { .component-name {
list-style: none; @extend .t-copy-sub1;
right: 0; color: $white;
top: 0; width: 50%;
position: absolute;
padding: 10px;
.mode { em {
display: inline-block; font-weight: 600;
color: $white;
}
}
.inactive-mode { //Nav-Edit Modes
display: none; .nav-edit-modes {
} list-style: none;
right: 0;
top: 0;
position: absolute;
padding: 10px;
.active-mode { .mode {
@include blue-button; display: inline-block;
}
.is-set { .inactive-mode {
@include linear-gradient($blue, $blue); display: none;
box-shadow: inset 0 0 2px $shadow; }
background-color: $blue;
cursor: default;
&:hover { .active-mode {
box-shadow: inset 0 0 2px $shadow; @include blue-button;
background-color: $blue;
}
}
}
}
} }
// Editor Wrapper .is-set {
.wrapper-component-editor { @include linear-gradient($blue, $blue);
//TO-DO 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-comp-editor {
//TO-DO
}
// Settings Wrapper
.wrapper-comp-settings {
//settings-list
.list-input.settings-list {
margin: 0;
padding: 0;
list-style: none;
// Settings Wrapper overflow: auto;
.wrapper-component-settings ul{ max-height: 400px;
overflow: auto;
max-height: 400px;
//chrome scrollbar visibility correction
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
}
&::-webkit-scrollbar-thumb { //chrome scrollbar visibility correction
border-radius: 8px; &::-webkit-scrollbar {
border: 2px solid $gray-l2; -webkit-appearance: none;
background-color: rgba(0, 0, 0, .5); 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 {
//margin: 0 0 $baseline 0;
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: "*";
} }
}
.settings-row { &:hover {
@extend .field-group; // TO-DO ??? //TO-DO review existing patterns for hover on field
background-color: $white; @include transition(opacity 0.25s ease-in-out);
padding: 10px 20px; opacity: 1;
border-bottom: 1px solid $gray-l2; }
opacity: .8;
&:hover { &.is-set {
@include transition(opacity 0.25s ease-in-out); opacity: 1;
opacity: 1; background-color: $white;
}
//Styles for component settings which are set //setting-label
&.is-set { .setting-label {
opacity: 1; //color: $blue-l1;
background-color: $white; }
.setting-label { //setting-input
color: $blue-l1; .setting-input {
} color: $blue-l1;
}
//setting-clear
.setting-clear {
//...
}
}
.setting-input { .wrapper-comp-setting{
color: $blue-l1; display: inline-block;
} width: 360px;
top: 0;
.setting-clear { vertical-align: top;
//... }
}
}
.wrapper-setting-actions { label.setting-label {
@extend .field; //@extend .t-copy-sub1;
display: inline-block; //@include transition(color, 0.15s, ease-in-out);
width: 360px; //margin: 0 0 ($baseline/4) 0;
top: 0; //font-weight: 400;
vertical-align: top;
}
//Setting Label - also basic 'label' @extend .t-copy-sub2;
.setting-label { display: inline-block;
@extend .t-copy-sub2; position: relative;
display: inline-block; left: 0;
position: relative; height: 50%;
left: 0; width: 120px;
height: 50%; text-overflow: ellipsis;
width: 120px;
text-overflow: ellipsis;
}
//Setting Input - also basic 'field' //&.is-focused {
.setting-input { // color: $blue;
@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. input, select {
select { //@include placeholder($gray-l4);
border: 1px solid $gray-l4; //@include font-size(16);
background: none repeat scroll #F2F2F2; //@include size(100%,100%);
padding: 5px; //padding: ($baseline/2);
&:focus { //&.long {
@include box-shadow(0 1px 1px $shadow); //}
@include transition(opacity 0.25s ease-in-out);
background-color: #FFFCF1;
}
&:active { //&.short {
background-color: #FFFCF1; //}
}
}
//Setting Clear Button //&.error {
.setting-clear { // border-color: $red;
@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 { //&:focus {
visibility: hidden;
}
}
//Setting Tip // + .tip {
.setting-help { // color: $gray;
@include font-size(12); // }
display: inline-block;
font-color: $gray-l6;
max-width: 50%;
vertical-align: top;
}
} @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;
} }
//OLD Meta-data Styling select {
//TO-DO port over old styling border: 1px solid $gray-l4;
.metadata_edit { background: none repeat scroll #F2F2F2;
margin-bottom: 20px; padding: 5px;
font-size: 13px;
li { &:focus {
margin-bottom: 10px; @include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: #FFFCF1;
} }
label { &:active {
display: inline-block; background-color: #FFFCF1;
margin-right: 10px;
} }
} }
h3 { //input[type=others]
margin-bottom: 10px;
font-size: 18px; .action.setting-clear {
font-weight: 700; @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;
}
} }
h5 { tip.setting-help {
margin-bottom: 8px; @include font-size(12);
color: #fff; display: inline-block;
font-weight: 700; font-color: $gray-l6;
max-width: 50%;
vertical-align: top;
} }
}
}
}
// Module Actions // Module Actions
// ==================== // ====================
.module-actions { .module-actions {
@include box-shadow(inset 0 1px 1px $shadow); @include box-shadow(inset 0 1px 1px $shadow);
padding: 0 0 10px 10px; padding: 0 0 10px 10px;
background-color: $gray-l4; background-color: $gray-l4;
.save-button { .save-button {
margin: 15px 8px 0 0; margin: 15px 8px 0 0;
}
}
}
} }
}
// Unit Page Sidebar // Editing Units from Courseware
// ==================== // ====================
.unit-settings { body.unit {
.window-contents {
padding: 10px 20px; .component {
padding-top: 30px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
} }
.unit-actions { &.editing {
border-bottom: none; padding-top: 0;
padding-bottom: 0;
} }
}
}
.published-alert { // Unit Page Sidebar
display: none; // ====================
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
div { .unit-settings {
margin-top: 15px; .window-contents {
} padding: 10px 20px;
} }
input[type="radio"] { .unit-actions {
margin-right: 7px; border-bottom: none;
} padding-bottom: 0;
}
.status { .published-alert {
font-size: 12px; display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
strong { div {
font-weight: 700; margin-top: 15px;
}
} }
}
.preview-button, .view-button { input[type="radio"] {
@include white-button; margin-right: 7px;
margin-bottom: 10px; }
}
.publish-button { .status {
@include orange-button; font-size: 12px;
}
.delete-button { strong {
@include blue-button; font-weight: 700;
} }
}
.delete-draft { .preview-button, .view-button {
display: inline-block; @include white-button;
} margin-bottom: 10px;
}
.delete-button, .publish-button {
.preview-button, @include orange-button;
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
}
} }
.unit-history { .delete-button {
&.collapsed { @include blue-button;
h4 { }
border-bottom: none;
border-radius: 3px;
}
.window-contents { .delete-draft {
display: none; display: inline-block;
} }
}
ol { .delete-button,
border: 1px solid #ced2db; .preview-button,
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
}
}
li { .unit-history {
display: block; &.collapsed {
padding: 6px 8px 8px 10px; h4 {
background: #edf1f5; border-bottom: none;
font-size: 12px; border-radius: 3px;
}
&:hover { .window-contents {
background: #fffcf1; display: none;
}
}
.item-actions { ol {
display: block; border: 1px solid #ced2db;
}
}
&.checked { li {
background: #d1dae3; display: block;
} padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
background: #fffcf1;
.item-actions { .item-actions {
display: none; display: block;
} }
}
input[type="radio"] { &.checked {
margin-right: 7px; background: #d1dae3;
} }
.item-actions {
display: none;
}
input[type="radio"] {
margin-right: 7px;
} }
} }
} }
}
.unit-location { .unit-location {
.url { .url {
@include box-shadow(none); @include box-shadow(none);
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
.draft-tag, .draft-tag,
.hidden-tag, .hidden-tag,
.private-tag, .private-tag,
.has-new-draft-tag { .has-new-draft-tag {
font-size: 8px; font-size: 8px;
} }
.window-contents > ol { .window-contents > ol {
@include tree-view; @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 { .section-item {
@include box-sizing(border-box); padding-left: 20px;
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
ol { .new-unit-item {
.section-item { margin-left: 20px;
padding-left: 20px;
}
.new-unit-item {
margin-left: 20px;
}
} }
}
ol ol { ol ol {
.section-item { .section-item {
padding-left: 34px; padding-left: 34px;
} }
.new-unit-item { .new-unit-item {
margin: 0 0 10px 41px; margin: 0 0 10px 41px;
}
} }
} }
} }
}
.edit-state-draft { .edit-state-draft {
.visibility, .visibility,
.edit-draft-message,
.view-button {
display: none;
}
.published-alert { .edit-draft-message,
display: block; .view-button {
} display: none;
} }
.edit-state-public { .published-alert {
.delete-draft, display: block;
.component-actions, }
.new-component-item, }
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.published-alert { .edit-state-public {
display: block; .delete-draft,
} .component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.drag-handle { .published-alert {
display: none !important; display: block;
}
} }
.edit-state-private { .drag-handle {
.delete-draft, display: none !important;
.publish-draft,
.editing-draft-alert,
.create-draft,
.view-button {
display: none;
}
} }
} }
// Editing Units from Courseware .edit-state-private {
// ==================== .delete-draft,
.publish-draft,
.editing-draft-alert,
.create-draft,
.view-button {
display: none;
}
}
body.unit {
.component { //OLD Meta-data Styling
padding-top: 30px; //TO-DO port over old styling
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
.component-actions { li {
@include box-sizing(border-box); margin-bottom: 10px;
position: absolute; }
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
}
&.editing { label {
padding-top: 0; display: inline-block;
} margin-right: 10px;
} }
} }
\ No newline at end of file
cms/templates/component.html
<div class="wrapper wrapper-component-editor"> <div class="wrapper wrapper-component-editor">
<div class="component-editor"> <div class="component-editor">
<div class="component-edit-menu"> <div class="component-edit-header">
<span class="component-name"><em>Editing:</em> Name of Component</span> <span class="component-name"><em>Editing:</em> Name of Component</span>
<!--should this be a menubar/menu/tabbar instead of list? --> <!--should this be a menubar/menu/tabbar instead of list? -->
<ul class="nav-edit-modes"> <ul class="nav-edit-modes">
...@@ -17,41 +17,41 @@ ...@@ -17,41 +17,41 @@
</div> <!-- Editor Header --> </div> <!-- Editor Header -->
<div class="component-edit-modes"> <div class="component-edit-modes">
<div class="module-editor wrapper-component-editor" id="editor-tab"> <div class="module-editor wrapper-comp-editor" id="editor-tab">
<!--${editor}--> <!--${editor}-->
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? --> <!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
</div> <!-- Editor Wrapper--> </div> <!-- Editor Wrapper-->
<div class="wrapper-component-settings" id="settings-tab"> <div class="wrapper-comp-settings" id="settings-tab">
<ul class="list-input settings-list"> <ul class="list-input settings-list">
<!--% for type in sorted(something.keys()):--> <!--% for type in sorted(something.keys()):-->
<!--is-set class applied when user sets value--> <!--is-set class applied when user sets value-->
<li class="settings-row is-set"> <li class="field comp-setting-entry is-set">
<div class="wrapper-setting-actions"> <div class="wrapper-comp-setting">
<label class="setting-label" for="setting-id-1">Display Name</label> <label class="label setting-label" for="setting-id-1">Display Name</label>
<input class="setting-input" type="text" id="setting-id-1" value="Name of Component"/> <input class="input setting-input" type="text" id="setting-id-1" value="Name of Component"/>
<!--button clickable if is-set --> <!--button clickable if is-set -->
<button class="setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear"> <button class="action setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i> <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button> </button>
</div> </div>
<span class="setting-help">helpstring</span> <span class="tip setting-help">helpstring</span>
</li> </li>
<!--% showing second example mostly to see is-set style difference --> <!--% showing second example mostly to see is-set style difference -->
<li class="settings-row"> <li class="field comp-setting-entry">
<div class="wrapper-setting-actions"> <div class="wrapper-setting-actions">
<label class="setting-label" for="setting-id-2">Setting 2</label> <label class="label setting-label" for="setting-id-2">Setting 2</label>
<input class="setting-input" type="text" id="setting-id-2"/> <input class="input setting-input" type="text" id="setting-id-2"/>
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear"> <button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i> <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button> </button>
</div> </div>
<span class="setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span> <span class="tip setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span>
</li> </li>
<!--% showing dropdown example --> <!--% showing dropdown example -->
<li class="settings-row"> <li class="field comp-setting-entry">
<div class="wrapper-setting-actions"> <div class="wrapper-setting-actions">
<label class="setting-label" for="setting-displayName">Display Name</label> <label class="label setting-label" for="setting-displayName">Display Name</label>
<select class="setting-input" id="setting-displayName" name="type"> <select class="input setting-input" id="setting-displayName" name="type">
<!--% for all in available options --> <!--% for all in available options -->
<option value="displayName-closed" selected>Closed</option> <option value="displayName-closed" selected>Closed</option>
<!--in case value already defaulted --> <!--in case value already defaulted -->
...@@ -59,11 +59,22 @@ ...@@ -59,11 +59,22 @@
<option value="displayName-open">Open</option> <option value="displayName-open">Open</option>
<option value="displayName-available">Available</option> <option value="displayName-available">Available</option>
</select> </select>
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear"> <button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i> <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button> </button>
</div> </div>
<span class="setting-help">helpstring</span> <span class="tip setting-help">helpstring</span>
</li>
<li class="field comp-setting-entry is-set">
<div class="wrapper-setting-actions">
<label class="label setting-label" for="setting-id-4">Display Name</label>
<input class="input setting-input" type="text" id="setting-id-4" value="Name of Component"/>
<!--button clickable if is-set -->
<button class="action setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">helpstring</span>
</li> </li>
</ul> </ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment