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

plugged in more pseudo code for various css class states necessary as well as examples for dropdown case and extra logic required there

Browse Source
This commit is contained in:
marco
2013-05-03 00:33:58 -07:00
parent fbaed2e28b
commit c842a5fc7c
2 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
cms/static/sass/views/_unit.scss
View File

@@ -502,15 +502,28 @@ body.course.unit {
//SettingsLabel
li > label {
//Text all aligned left
display: inline-block;
//this sets height of .settings-row to allow for long help strings.
}
//SettingsInput
li > input {
li > input, li > select {
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
width: 100px;
height: auto;
//TO-DO
&:focus {
//TO-DO
}
}
//SettingsClear
li > button {
border-radius: 20px; //maybe a % calc from input box height
margin-left: 15px;
}
//SettingsHelp

25
cms/templates/component.html
View File

@@ -20,17 +20,36 @@
</div> <!-- Editor Wrapper-->
<ul class="settings-wrapper" id="settings-tab">
<!--% for type in sorted(something.keys()):-->
<li class="settings-row">
<!--is-set class applied when user sets value-->
<li class="settings-row is-set">
<label for="<%= ...settingLabel... %>">Setting Display Name Goes Here</label>
<input type="${type}" id="firstname"/>
<!--button clickable if is-set -->
<button type="button" name="setting-clear" value="Clear" class="setting-clear " data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
<span class="settings-help">${helpstring}</span>
</li>
<!--% showing second example mostly to see is-set style difference -->
<li class="settings-row is-set">
<li class="settings-row">
<label for="setting-name-as-id">Setting Display Name Goes Here</label>
<input type="${type}" id="firstname"/>
<span class="settings-help">${helpstring}</span>
</li>≈
<!--% showing dropdown example -->
<li class="settings-row">
<label for="setting-name-as-id">Setting Display Name Goes Here</label>
<select name="${type}">
<!--% for all in available options -->
<option value="displayName1" selected>Closed</option>
<!--in case value already defaulted -->
<option value="displayName2">NotClosed</option>
<option value="displayName3">Open</option>
<option value="displayName4">Available</option>
</select>
<span class="settings-help">${helpstring}</span>
</li>
</ul> <!-- Settings Wrapper-->
</div>
<div class="row module-actions">