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 {
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
// ====================
......
cms/templates/component.html
......@@ -24,33 +24,97 @@
<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="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">
<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"/>
<label class="label setting-label" for="setting-displayName">Display Name</label>
<input class="input setting-input" type="text" id="setting-displayName" value="closed"/>
<!--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>
<span class="tip setting-help">This value defines the name of this component, and is shown to students as a tooltip.</span>
</li>
<!--% showing second example mostly to see is-set style difference -->
<li class="field comp-setting-entry">
<div class="wrapper-setting-actions">
<label class="label setting-label" for="setting-id-2">Setting 2</label>
<input class="input setting-input" type="text" id="setting-id-2"/>
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-displayName">Maximum Attempts</label>
<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">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</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>
<!--% showing dropdown example -->
<li class="field comp-setting-entry">
<div class="wrapper-setting-actions">
<label class="label setting-label" for="setting-displayName">Display Name</label>
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-displayName">Randomization</label>
<select class="input setting-input" id="setting-displayName" name="type">
<!--% for all in available options -->
<option value="displayName-closed" selected>Closed</option>
......@@ -65,9 +129,10 @@
</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>
<div class="wrapper-comp-setting">
<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"/>
<!--button clickable if is-set -->
<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