Commit fbaed2e2 by marco

added shell of css and html organization

parent d55527b6
......@@ -456,27 +456,69 @@ body.course.unit {
//Component Name
h3 {
//TO-DO ?
//TO-DO
//determine proper h-level
}
//Nav-Edit Modes
.nav-edit-modes {
//TODO
list-style: none;
//move to the right,
.tab {
display: inline;
li {
//TO-DO
//inherit button styling
//no idea what it currently inherits...
&:hover {
//TO-DO
//opacity change
}
&.is-active {
//TO-DO
//inherit button styling
}
}
}
}
// Module Editors
// Editor Wrapper
.editor-wrapper{
//TO-DO ?
//TO-DO
}
// Module Settings
// Settings Wrapper
.settings-wrapper{
//TO-DO ?
//TO-DO
.settings-row {
// general row sizing stuff
width: 100%;
padding: 10px;
border-bottom: 1px solid $gray;
//SettingsLabel
li > label {
//Text all aligned left
//this sets height of .settings-row to allow for long help strings.
}
//SettingsInput
li > input {
width: 100px;
//TO-DO
}
//SettingsHelp
li > span {
//Text all aligned left
}
}
}
//OLD Meta-data Styling
......
<div class="wrapper wrapper-component-editor">
<div class="component-editor">
<div id="component-edit-menu">
<h3 class="component-name">Name of Component</h3>
<!--should this be a menu instead of OL -->
<ol class="nav-edit-modes">
<li id="editor-mode" class="tab" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
<h3 class="component-name">Viewing: Name of Component</h3>
<!--should this be a menubar/menu/tabbar instead of list? -->
<ul class="nav-edit-modes">
<li id="editor-mode" class="tab is-active" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
<a href="#" class="button cancel-button">Editor</a>
</li>
<li id="settings-mode" class="tab" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
<a href="#" class="button cancel-button">Settings </a>
</li>
</ol>
</ul>
</div> <!-- Editor Header -->
<div class="component-edit-modes">
<div class="editor-wrapper" id="editor-tab">
${editor}
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
</div> <!-- Editor Wrapper-->
<table class="settings-wrapper" id="settings-tab">
<!-- eventually, import settings from separate file -->
<tr class="settings-row settings-header">
<th class="settings-label">Setting Label</th>
<th class="settings-input">Setting Input</th>
<th class="settings-help">Setting Help</th>
</tr>
<tr class="settings-row settings-header">
<td class="settings-label">Example Dropdown</td>
<td class="settings-input">Input/Form stuff to be children here. </td>
<td class="settings-help">Example Numerical Input</td>
</tr>
</div> <!-- Settings Wrapper-->
<ul class="settings-wrapper" id="settings-tab">
<!--% for type in sorted(something.keys()):-->
<li class="settings-row">
<label for="<%= ...settingLabel... %>">Setting Display Name Goes Here</label>
<input type="${type}" id="firstname"/>
<span class="settings-help">${helpstring}</span>
</li>
<!--% showing second example mostly to see is-set style difference -->
<li class="settings-row is-set">
<label for="setting-name-as-id">Setting Display Name Goes Here</label>
<input type="${type}" id="firstname"/>
<span class="settings-help">${helpstring}</span>
</li>
</ul> <!-- Settings Wrapper-->
</div>
<div class="row module-actions">
<a href="#" class="save-button">Save</a>
......
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