Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - settings: revised markup and styling around disabled/readonly fields

Browse Source
This commit is contained in:
Brian Talbot
2013-03-11 12:24:43 -04:00
parent 603d11577f
commit 82a00104c2
4 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cms/static/client_templates/advanced_entry.html
View File

@@ -1,8 +1,7 @@
<li class="field-group course-advanced-policy-list-item">
<div class="field text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<div class="field is-not-editable text key" id="<%= (_.isEmpty(key) ? '__new_advanced_key__' : key) %>">
<label for="<%= keyUniqueId %>">Policy Key:</label>
<input disabled readonly title="This field is disabled: policy keys cannot be edited." type="text" class="short policy-key" id="<%= keyUniqueId %>" value="<%= key %>" />
<span class="tip tip-stacked">Keys are case sensitive and cannot contain spaces or start with a number</span>
<input readonly title="This field is disabled: policy keys cannot be edited." type="text" class="short policy-key" id="<%= keyUniqueId %>" value="<%= key %>" />
</div>
<div class="field text value">

10
cms/static/sass/_base.scss
View File

@@ -410,6 +410,16 @@ textarea.text {
border-color: $gray-l4;
color: $gray-l2;
}
&[readonly] {
border-color: $gray-l4;
color: $gray-l1;
&:focus {
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
outline: 0;
}
}
}
// forms - specific

11
cms/static/sass/_settings.scss
View File

@@ -239,9 +239,9 @@ body.course.settings {
// not editable fields
.field.is-not-editable {
label, .label {
color: $gray-l2;
& label.is-focused {
color: $gray-d2;
}
}
@@ -668,11 +668,6 @@ body.course.settings {
.key {
width: flex-grid(3, 9);
margin-right: flex-gutter();
// disabled/uneditable style
label {
color: $gray-l2;
}
}
.value {

6
cms/templates/settings.html
View File

@@ -70,17 +70,17 @@ from contentstore import utils
<ol class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
<label for="course-organization">Organization</label>
<input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-organization" value="[Course Organization]" disabled readonly />
<input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-organization" value="[Course Organization]" readonly />
</li>
<li class="field text is-not-editable" id="field-course-number">
<label for="course-number">Course Number</label>
<input title="This field is disabled: this information cannot be changed." type="text" class="short" id="course-number" value="[Course No.]" disabled readonly>
<input title="This field is disabled: this information cannot be changed." type="text" class="short" id="course-number" value="[Course No.]" readonly>
</li>
<li class="field text is-not-editable" id="field-course-name">
<label for="course-name">Course Name</label>
<input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" disabled readonly />
<input title="This field is disabled: this information cannot be changed." type="text" class="long" id="course-name" value="[Course Name]" readonly />
</li>
</ol>
<span class="tip tip-stacked">These are used in <a rel="external" href="${utils.get_lms_link_for_about_page(course_location)}" />your course URL</a>, and cannot be changed</span>