Skip to content

E
edx-platform
Commit 32842479 by marco
Options

restyling of the input fields, partway through adding in examples of all settings

parent 977d0d76
Showing with 115 additions and 57 deletions
cms/static/sass/views/_unit.scss
...@@ -452,6 +452,19 @@ body.course.unit { ...@@ -452,6 +452,19 @@ body.course.unit {
color: #fff; color: #fff;
font-weight: 700; 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 { ...@@ -501,12 +514,13 @@ body.course.unit {
.is-set { .is-set {
@include linear-gradient($blue, $blue); @include linear-gradient($blue, $blue);
box-shadow: inset 0 0 2px $shadow; box-shadow: inset 0 0 3px $shadow;
background-color: $blue; background-color: $blue;
cursor: default; cursor: default;
&:hover { &:hover {
box-shadow: inset 0 0 2px $shadow; box-shadow: inset 0 0 3px $shadow;
background-color: $blue; background-color: $blue;
} }
} }
...@@ -531,7 +545,6 @@ body.course.unit { ...@@ -531,7 +545,6 @@ body.course.unit {
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;
...@@ -547,10 +560,9 @@ body.course.unit { ...@@ -547,10 +560,9 @@ body.course.unit {
//component-setting-entry //component-setting-entry
.field.comp-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; background-color: $white;
padding: 20px 20px; padding: 20px;
border-bottom: 1px solid $gray-l2; border-bottom: 1px solid $gray-l2;
opacity: .6; opacity: .6;
...@@ -603,31 +615,32 @@ body.course.unit { ...@@ -603,31 +615,32 @@ body.course.unit {
} }
label.setting-label { label.setting-label {
//@extend .t-copy-sub1; @extend .t-copy-sub1;
//@include transition(color, 0.15s, ease-in-out); @include transition(color, 0.15s, ease-in-out);
//margin: 0 0 ($baseline/4) 0; //margin: 0 0 ($baseline/4) 0; WILL BE REMOVED PRIOR TO PUSH
//font-weight: 400; font-weight: 400;
@extend .t-copy-sub2;
display: inline-block; display: inline-block;
position: relative; position: relative;
left: 0; left: 0;
height: 50%; min-width: 100px;
width: 120px; width: 35%;
text-overflow: ellipsis;
//&.is-focused { &.is-focused {
// color: $blue; color: $blue;
//} }
} }
input, select { input, select {
//@include placeholder($gray-l4); @include placeholder($gray-l4);
//@include font-size(16); @include font-size(16);
//@include size(100%,100%); @include size(100%,100%);
//padding: ($baseline/2); padding: ($baseline/2);
min-width: 100px;
width: 45%;
//&.long { //&.long {
//
//} //}
//&.short { //&.short {
...@@ -638,23 +651,16 @@ body.course.unit { ...@@ -638,23 +651,16 @@ body.course.unit {
//} //}
//&:focus { //&:focus {
// + .tip { // + .tip {
// color: $gray; // color: $gray;
// } // }
border-radius: 3px;
@extend .t-copy-sub3;
@include placeholder($gray-l4);
border-radius: 2px;
padding: 6px 8px 8px;
width: 180px;
height: auto;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
select { select {
border: 1px solid $gray-l4; //border: 1px solid $gray-l2;
background: none repeat scroll #F2F2F2; background: none repeat scroll #F2F2F2;
padding: 5px; padding: 5px;
...@@ -701,26 +707,13 @@ body.course.unit { ...@@ -701,26 +707,13 @@ body.course.unit {
@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;
} }
} }
} }
} }
// 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 // Editing Units from Courseware
// ==================== // ====================
......
cms/templates/component.html
...@@ -24,33 +24,97 @@ ...@@ -24,33 +24,97 @@
<div class="wrapper-comp-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="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-accept_file_upload">Accept File Upload</label>
<select class="input setting-input" id="setting-accept_file_upload" name="Accept File Upload">
<!--% for all in available options -->
<option value="True">True</option>
<option value="False" selected>False</option>
</select>
<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">If disabled, students cannot upload images to be graded with this problem.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-skip_spelling_checks">Basic Quality Filter</label>
<select class="input setting-input" id="setting-skip_spelling_checks" name="Basic Quality Filter">
<!--% for all in available options -->
<option value="True" selected>True</option>
<option value="False">False</option>
</select>
<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">If enabled, submissions with poor spelling, short length, or poor grammar won't be peer reviewed.</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-displayName">Discussion Area</label>
<input class="input setting-input" type="text" id="setting-accept_file_upload" value="False"/>
<!--button clickable if is-set -->
<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">This value specifies the discussion are where this . This name appears in the left pane of the discussion forum for your course (question)</span>
</li>
<li class="field comp-setting-entry">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-displayName">Accept Fle Upload</label>
<input class="input setting-input" type="text" id="setting-accept_file_upload" value="False"/>
<!--button clickable if is-set -->
<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">This value defines the name of this component, and is shown to students as a tooltip.</span>
</li>
<li class="field comp-setting-entry is-set"> <li class="field comp-setting-entry is-set">
<div class="wrapper-comp-setting"> <div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-id-1">Display Name</label> <label class="label setting-label" for="setting-displayName">Display Name</label>
<input class="input setting-input" type="text" id="setting-id-1" value="Name of Component"/> <input class="input setting-input" type="text" id="setting-displayName" value="closed"/>
<!--button clickable if is-set --> <!--button clickable if is-set -->
<button class="action 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="tip setting-help">helpstring</span> <span class="tip setting-help">This value defines the name of this component, and is shown to students as a tooltip.</span>
</li> </li>
<!--% showing second example mostly to see is-set style difference -->
<li class="field comp-setting-entry"> <li class="field comp-setting-entry">
<div class="wrapper-setting-actions"> <div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-id-2">Setting 2</label> <label class="label setting-label" for="setting-displayName">Maximum Attempts</label>
<input class="input setting-input" type="text" id="setting-id-2"/> <input class="input setting-input" type="number" placeholder="None Set" id="setting-displayName"/>
<button class="action 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="tip setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span> <span class="tip setting-help">When set, this limits the number of times a student can attempt this problem.</span>
</li> </li>
<!--% showing dropdown example -->
<li class="field comp-setting-entry"> <li class="field comp-setting-entry">
<div class="wrapper-setting-actions"> <div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-displayName">Display Name</label> <label class="label setting-label" for="setting-displayName">Randomization</label>
<select class="input 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>
...@@ -65,9 +129,10 @@ ...@@ -65,9 +129,10 @@
</div> </div>
<span class="tip setting-help">helpstring</span> <span class="tip setting-help">helpstring</span>
</li> </li>
<li class="field comp-setting-entry is-set"> <li class="field comp-setting-entry is-set">
<div class="wrapper-setting-actions"> <div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-id-4">Display Name</label> <label class="label setting-label" for="setting-id-4">Show Answer</label>
<input class="input setting-input" type="text" id="setting-id-4" value="Name of Component"/> <input class="input setting-input" type="text" id="setting-id-4" value="Name of Component"/>
<!--button clickable if is-set --> <!--button clickable if is-set -->
<button class="action 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">
......
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