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 {
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
......
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,9 +441,24 @@ body.course.unit {
padding: 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);
padding: 15px 0 15px 20px;
top: 0;
......@@ -460,7 +475,7 @@ body.course.unit {
width: 50%;
em {
@extend .t-title-3;
font-weight: 600;
color: $white;
}
}
......@@ -497,20 +512,26 @@ body.course.unit {
}
}
}
}
}
// Editor Wrapper
.wrapper-component-editor {
// 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
.wrapper-component-settings ul{
overflow: auto;
max-height: 400px;
//chrome scrollbar visibility correction
&::-webkit-scrollbar {
-webkit-appearance: none;
......@@ -524,46 +545,69 @@ body.course.unit {
background-color: rgba(0, 0, 0, .5);
}
.settings-row {
@extend .field-group; // TO-DO ???
//component-setting-entry
.field.comp-setting-entry {
//margin: 0 0 $baseline 0;
background-color: $white;
padding: 10px 20px;
padding: 20px 20px;
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 {
//TO-DO review existing patterns for hover on field
@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
.setting-label {
color: $blue-l1;
//color: $blue-l1;
}
//setting-input
.setting-input {
color: $blue-l1;
}
//setting-clear
.setting-clear {
//...
}
}
.wrapper-setting-actions {
@extend .field;
.wrapper-comp-setting{
display: inline-block;
width: 360px;
top: 0;
vertical-align: top;
}
//Setting Label - also basic 'label'
.setting-label {
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;
......@@ -571,10 +615,34 @@ body.course.unit {
height: 50%;
width: 120px;
text-overflow: ellipsis;
//&.is-focused {
// color: $blue;
//}
}
//Setting Input - also basic 'field'
.setting-input {
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;
......@@ -583,12 +651,8 @@ body.course.unit {
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;
......@@ -605,8 +669,9 @@ body.course.unit {
}
}
//Setting Clear Button
.setting-clear {
//input[type=others]
.action.setting-clear {
@include font-size(11);
color: $gray;
width: 25px;
......@@ -632,50 +697,21 @@ body.course.unit {
}
}
//Setting Tip
.setting-help {
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;
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);
padding: 0 0 10px 10px;
background-color: $gray-l4;
......@@ -683,14 +719,37 @@ body.course.unit {
.save-button {
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 {
padding: 10px 20px;
}
......@@ -751,9 +810,9 @@ body.course.unit {
margin-top: 10px;
padding: 6px 15px 8px;
}
}
}
.unit-history {
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
......@@ -795,9 +854,9 @@ body.course.unit {
}
}
}
}
}
.unit-location {
.unit-location {
.url {
@include box-shadow(none);
width: 100%;
......@@ -845,9 +904,9 @@ body.course.unit {
}
}
}
}
}
.edit-state-draft {
.edit-state-draft {
.visibility,
.edit-draft-message,
......@@ -858,9 +917,9 @@ body.course.unit {
.published-alert {
display: block;
}
}
}
.edit-state-public {
.edit-state-public {
.delete-draft,
.component-actions,
.new-component-item,
......@@ -877,9 +936,9 @@ body.course.unit {
.drag-handle {
display: none !important;
}
}
}
.edit-state-private {
.edit-state-private {
.delete-draft,
.publish-draft,
.editing-draft-alert,
......@@ -887,30 +946,21 @@ body.course.unit {
.view-button {
display: none;
}
}
}
// Editing Units from Courseware
// ====================
body.unit {
.component {
padding-top: 30px;
//OLD Meta-data Styling
//TO-DO port over old styling
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
li {
margin-bottom: 10px;
}
&.editing {
padding-top: 0;
}
label {
display: inline-block;
margin-right: 10px;
}
}
\ No newline at end of file
cms/templates/component.html
<div class="wrapper wrapper-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>
<!--should this be a menubar/menu/tabbar instead of list? -->
<ul class="nav-edit-modes">
......@@ -17,41 +17,41 @@
</div> <!-- Editor Header -->
<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}-->
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
</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">
<!--% for type in sorted(something.keys()):-->
<!--is-set class applied when user sets value-->
<li class="settings-row is-set">
<div class="wrapper-setting-actions">
<label class="setting-label" for="setting-id-1">Display Name</label>
<input class="setting-input" type="text" id="setting-id-1" value="Name of Component"/>
<li class="field comp-setting-entry is-set">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-id-1">Display Name</label>
<input class="input setting-input" type="text" id="setting-id-1" value="Name of Component"/>
<!--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>
</button>
</div>
<span class="setting-help">helpstring</span>
<span class="tip setting-help">helpstring</span>
</li>
<!--% 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">
<label class="setting-label" for="setting-id-2">Setting 2</label>
<input class="setting-input" type="text" id="setting-id-2"/>
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<label class="label setting-label" for="setting-id-2">Setting 2</label>
<input class="input setting-input" type="text" id="setting-id-2"/>
<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="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>
<!--% showing dropdown example -->
<li class="settings-row">
<li class="field comp-setting-entry">
<div class="wrapper-setting-actions">
<label class="setting-label" for="setting-displayName">Display Name</label>
<select class="setting-input" id="setting-displayName" name="type">
<label class="label setting-label" for="setting-displayName">Display Name</label>
<select class="input setting-input" id="setting-displayName" name="type">
<!--% for all in available options -->
<option value="displayName-closed" selected>Closed</option>
<!--in case value already defaulted -->
......@@ -59,11 +59,22 @@
<option value="displayName-open">Open</option>
<option value="displayName-available">Available</option>
</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>
</button>
</div>
<span class="setting-help">helpstring</span>
<span class="tip setting-help">helpstring</span>
</li>
</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