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 175 additions and 114 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,9 +441,24 @@ body.course.unit { ...@@ -441,9 +441,24 @@ 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;
}
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
}
}
}
.component-edit-menu { // Edit Header (Component Name, Mode-Editor, Mode-Settings)
.component-edit-header {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 15px 0 15px 20px; padding: 15px 0 15px 20px;
top: 0; top: 0;
...@@ -460,7 +475,7 @@ body.course.unit { ...@@ -460,7 +475,7 @@ body.course.unit {
width: 50%; width: 50%;
em { em {
@extend .t-title-3; font-weight: 600;
color: $white; color: $white;
} }
} }
...@@ -497,20 +512,26 @@ body.course.unit { ...@@ -497,20 +512,26 @@ body.course.unit {
} }
} }
} }
} }
// Editor Wrapper // Editor Wrapper
.wrapper-component-editor { .wrapper-comp-editor {
//TO-DO //TO-DO
} }
// Settings Wrapper
.wrapper-comp-settings {
//settings-list
.list-input.settings-list {
margin: 0;
padding: 0;
list-style: none;
// Settings Wrapper
.wrapper-component-settings ul{
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
//chrome scrollbar visibility correction //chrome scrollbar visibility correction
&::-webkit-scrollbar { &::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
...@@ -524,46 +545,69 @@ body.course.unit { ...@@ -524,46 +545,69 @@ body.course.unit {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
} }
.settings-row { //component-setting-entry
@extend .field-group; // TO-DO ??? .field.comp-setting-entry {
//margin: 0 0 $baseline 0;
background-color: $white; background-color: $white;
padding: 10px 20px; padding: 20px 20px;
border-bottom: 1px solid $gray-l2; border-bottom: 1px solid $gray-l2;
opacity: .8; 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 { &:hover {
//TO-DO review existing patterns for hover on field
@include transition(opacity 0.25s ease-in-out); @include transition(opacity 0.25s ease-in-out);
opacity: 1; opacity: 1;
} }
//Styles for component settings which are set
&.is-set { &.is-set {
opacity: 1; opacity: 1;
background-color: $white; background-color: $white;
//setting-label
.setting-label { .setting-label {
color: $blue-l1; //color: $blue-l1;
} }
//setting-input
.setting-input { .setting-input {
color: $blue-l1; color: $blue-l1;
} }
//setting-clear
.setting-clear { .setting-clear {
//... //...
} }
} }
.wrapper-setting-actions { .wrapper-comp-setting{
@extend .field;
display: inline-block; display: inline-block;
width: 360px; width: 360px;
top: 0; top: 0;
vertical-align: top; vertical-align: top;
} }
//Setting Label - also basic 'label' label.setting-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; @extend .t-copy-sub2;
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -571,10 +615,34 @@ body.course.unit { ...@@ -571,10 +615,34 @@ body.course.unit {
height: 50%; height: 50%;
width: 120px; width: 120px;
text-overflow: ellipsis; text-overflow: ellipsis;
//&.is-focused {
// color: $blue;
//}
} }
//Setting Input - also basic 'field' input, select {
.setting-input { //@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; @extend .t-copy-sub3;
@include placeholder($gray-l4); @include placeholder($gray-l4);
border-radius: 2px; border-radius: 2px;
...@@ -583,12 +651,8 @@ body.course.unit { ...@@ -583,12 +651,8 @@ body.course.unit {
height: auto; height: auto;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
text-overflow: ellipsis; text-overflow: ellipsis;
//&:focus {
//TO-DO
} }
//custom styling of selectbox to look more like input boxes.
select { select {
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
background: none repeat scroll #F2F2F2; background: none repeat scroll #F2F2F2;
...@@ -605,8 +669,9 @@ body.course.unit { ...@@ -605,8 +669,9 @@ body.course.unit {
} }
} }
//Setting Clear Button //input[type=others]
.setting-clear {
.action.setting-clear {
@include font-size(11); @include font-size(11);
color: $gray; color: $gray;
width: 25px; width: 25px;
...@@ -632,50 +697,21 @@ body.course.unit { ...@@ -632,50 +697,21 @@ body.course.unit {
} }
} }
//Setting Tip tip.setting-help {
.setting-help {
@include font-size(12); @include font-size(12);
display: inline-block; display: inline-block;
font-color: $gray-l6; font-color: $gray-l6;
max-width: 50%; max-width: 50%;
vertical-align: top; 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;
font-weight: 700;
} }
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
} }
}
// 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;
...@@ -683,14 +719,37 @@ body.course.unit { ...@@ -683,14 +719,37 @@ body.course.unit {
.save-button { .save-button {
margin: 15px 8px 0 0; margin: 15px 8px 0 0;
} }
}
// Editing Units from Courseware
// ====================
body.unit {
.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;
} }
&.editing {
padding-top: 0;
} }
} }
}
// Unit Page Sidebar // Unit Page Sidebar
// ==================== // ====================
.unit-settings { .unit-settings {
.window-contents { .window-contents {
padding: 10px 20px; padding: 10px 20px;
} }
...@@ -751,9 +810,9 @@ body.course.unit { ...@@ -751,9 +810,9 @@ body.course.unit {
margin-top: 10px; margin-top: 10px;
padding: 6px 15px 8px; padding: 6px 15px 8px;
} }
} }
.unit-history { .unit-history {
&.collapsed { &.collapsed {
h4 { h4 {
border-bottom: none; border-bottom: none;
...@@ -795,9 +854,9 @@ body.course.unit { ...@@ -795,9 +854,9 @@ body.course.unit {
} }
} }
} }
} }
.unit-location { .unit-location {
.url { .url {
@include box-shadow(none); @include box-shadow(none);
width: 100%; width: 100%;
...@@ -845,9 +904,9 @@ body.course.unit { ...@@ -845,9 +904,9 @@ body.course.unit {
} }
} }
} }
} }
.edit-state-draft { .edit-state-draft {
.visibility, .visibility,
.edit-draft-message, .edit-draft-message,
...@@ -858,9 +917,9 @@ body.course.unit { ...@@ -858,9 +917,9 @@ body.course.unit {
.published-alert { .published-alert {
display: block; display: block;
} }
} }
.edit-state-public { .edit-state-public {
.delete-draft, .delete-draft,
.component-actions, .component-actions,
.new-component-item, .new-component-item,
...@@ -877,9 +936,9 @@ body.course.unit { ...@@ -877,9 +936,9 @@ body.course.unit {
.drag-handle { .drag-handle {
display: none !important; display: none !important;
} }
} }
.edit-state-private { .edit-state-private {
.delete-draft, .delete-draft,
.publish-draft, .publish-draft,
.editing-draft-alert, .editing-draft-alert,
...@@ -887,30 +946,21 @@ body.course.unit { ...@@ -887,30 +946,21 @@ body.course.unit {
.view-button { .view-button {
display: none; display: none;
} }
}
} }
// Editing Units from Courseware
// ====================
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>
</button>
</div>
<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> <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>
</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