studio - advanced settings - added in several more static states and firmed up key/value pair styling specifically
This commit is contained in:
Brian Talbot
@@ -562,6 +562,14 @@
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
// existing fields
|
||||
&.existing {
|
||||
|
||||
input, textarea {
|
||||
color: $mediumGrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.key {
|
||||
@@ -589,6 +597,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-error {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix();
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid $lightGrey;
|
||||
padding-top: 15px;
|
||||
|
||||
.save-button {
|
||||
float: left;
|
||||
@include blue-button;
|
||||
margin-right: 10px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
float: left;
|
||||
@include white-button;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.new-button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -619,10 +656,14 @@
|
||||
// }
|
||||
// }
|
||||
|
||||
input.error, textarea.error {
|
||||
input.error, textarea.error, .error input, .error textarea {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
.error label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.message-error {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
|
||||
@@ -729,69 +729,108 @@ from contentstore import utils
|
||||
|
||||
<section class="settings-advanced-policies">
|
||||
<header>
|
||||
<h3>Additional Policy Definition</h3>
|
||||
<span class="detail">Manually Edit Course Policy Values</span>
|
||||
<h3>Manual Policy Definition</h3>
|
||||
<span class="detail">Manually Edit Course Policy Values (JSON Key and Pair values)</span>
|
||||
</header>
|
||||
|
||||
<p class="instructions"><strong>Warning</strong>: Add only manual policy data that you are familiar with.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="field enum">
|
||||
|
||||
<!-- basic empty & initial empty field (if user had no values yet) -->
|
||||
<ul class="input-list course-advanced-policy-list">
|
||||
<li class="input multi course-advanced-policy-list-item">
|
||||
|
||||
<div class="row">
|
||||
<div class="key">
|
||||
<label for="course-advanced-policy-1-key" class="">Policy Key:</label>
|
||||
<label for="course-advanced-policy-1-key">Policy Key:</label>
|
||||
<div class="field">
|
||||
<input type="text" class="short" id="course-advanced-policy-1-key" value="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="value">
|
||||
<label for="course-advanced-policy-1-value" class="">Policy Value:</label>
|
||||
<label for="course-advanced-policy-1-value">Policy Value:</label>
|
||||
<div class="field">
|
||||
<textarea class="ace text" id="course-advanced-policy-1-value" value=""></textarea>
|
||||
<textarea class="ace text" id="course-advanced-policy-1-value"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
|
||||
</li>
|
||||
|
||||
<!-- error existing key pair example -->
|
||||
<li class="input multi course-advanced-policy-list-item">
|
||||
|
||||
<span class="message-error">This policy key, $KEYNAME, already exists.</span>
|
||||
<div class="row">
|
||||
<div class="key">
|
||||
<label for="course-advanced-policy-1-key" class="">Policy Key:</label>
|
||||
<label for="course-advanced-policy-2-key">Policy Key:</label>
|
||||
<div class="field">
|
||||
<input type="text" class="short" id="course-advanced-policy-1-key" value="" />
|
||||
<input type="text" class="short" id="course-advanced-policy-2-key" value="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="value">
|
||||
<label for="course-advanced-policy-1-value" class="">Policy Value:</label>
|
||||
<label for="course-advanced-policy-2-value">Policy Value:</label>
|
||||
<div class="field">
|
||||
<textarea class="ace text" id="course-advanced-policy-1-value" value=""></textarea>
|
||||
<textarea class="ace text" id="course-advanced-policy-2-value"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
|
||||
</li>
|
||||
|
||||
<!-- error on key left empty example -->
|
||||
<li class="input multi course-advanced-policy-list-item">
|
||||
|
||||
<span class="message-error">You cannot leave the key value for this pair blank.</span>
|
||||
<div class="row">
|
||||
<div class="key">
|
||||
<label for="course-advanced-policy-1-key" class="">Policy Key:</label>
|
||||
<div class="key error">
|
||||
<label for="course-advanced-policy-3-key">Policy Key:</label>
|
||||
<div class="field">
|
||||
<input type="text" class="short" id="course-advanced-policy-1-key" value="" />
|
||||
<input type="text" class="short" id="course-advanced-policy-3-key" value="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="value">
|
||||
<label for="course-advanced-policy-1-value" class="">Policy Value:</label>
|
||||
<div class="value error">
|
||||
<label for="course-advanced-policy-3-value">Policy Value:</label>
|
||||
<div class="field">
|
||||
<textarea class="ace text" id="course-advanced-policy-1-value" value=""></textarea>
|
||||
<textarea class="ace text" id="course-advanced-policy-3-value"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
|
||||
</li>
|
||||
|
||||
<!-- error with value formatting example -->
|
||||
<li class="input multi course-advanced-policy-list-item">
|
||||
<span class="message-error">The JSON value for $KEYNAME is invalid.</span>
|
||||
<div class="row">
|
||||
<div class="key error">
|
||||
<label for="course-advanced-policy-4-key">Policy Key:</label>
|
||||
<div class="field">
|
||||
<input type="text" class="short" id="course-advanced-policy-4-key" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="value error">
|
||||
<label for="course-advanced-policy-4-value">Policy Value:</label>
|
||||
<div class="field">
|
||||
<textarea class="ace text" id="course-advanced-policy-4-value" value=""></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="delete-button standard remove-item advanced-policy-data"><span class="delete-icon"></span>Delete</a>
|
||||
</li>
|
||||
|
||||
<!-- existing pair (upon page load) - we'll need to toggle/remove the .existing class for the normal text color to appear (on blur/save?) -->
|
||||
<li class="input multi course-advanced-policy-list-item">
|
||||
<div class="row">
|
||||
<div class="key existing">
|
||||
<label for="course-advanced-policy-5-key">Policy Key:</label>
|
||||
<div class="field">
|
||||
<input type="text" class="short" id="course-advanced-policy-5-key" value="christina" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="value existing">
|
||||
<label for="course-advanced-policy-5-value">Policy Value:</label>
|
||||
<div class="field">
|
||||
<textarea class="ace text" id="course-advanced-policy-5-value">is awesome!</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -799,9 +838,23 @@ from contentstore import utils
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
|
||||
<span class="plus-icon white"></span>New Manual Policy
|
||||
</a>
|
||||
<!-- advanced policy actions -->
|
||||
<div class="actions actions-advanced-policies">
|
||||
<a href="#" class="save-button">Save</a>
|
||||
<a href="#" class="cancel-button">Cancel</a>
|
||||
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
|
||||
<span class="plus-icon white"></span>New Manual Policy
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- advanced policy actions (with disabled save state) -->
|
||||
<div class="actions actions-advanced-policies">
|
||||
<a href="#" class="save-button disabled">Save</a>
|
||||
<a href="#" class="cancel-button">Cancel</a>
|
||||
<a href="#" class="new-button new-advanced-policy-item add-policy-data">
|
||||
<span class="plus-icon white"></span>New Manual Policy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- .settings-advanced-policies -->
|
||||
|
||||
Reference in New Issue
Block a user