open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Editor: de-tablify options, support for responsive layout

Browse Source
This commit is contained in:
tophf 2015-03-20 12:28:00 +03:00
parent e0650fde71
commit da52ff7ee0
1 changed files with 84 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
edit.html
View File

@ -79,6 +79,13 @@
#header label {
width: 60px;
}
#options .aligned {
display: table-row;
}
#options .aligned > * {
display: table-cell;
margin: 0.5ex 0 0 0;
}
.code {
height: 10em;
width: 40em;
@ -154,24 +161,68 @@
width: auto;
border-right: none;
padding-left: 8px;
padding-top: 8px;
}
#header section {
display: inline-block;
margin-bottom: 0.5em;
}
#header label {
width: auto;
vertical-align: baseline;
margin-right: .5em;
}
#header input[type="checkbox"] {
vertical-align: middle;
}
#name {
font-weight: bold;
}
h1, h2 {
display: none;
}
#basic-info > div {
display: inline-block;
margin-right: 1em;
}
#actions br {
display: none;
}
#actions img {
position: relative;
top: .2em;
margin-left: .2em;
}
#actions > * + button, #actions a {
margin-left: 1em;
}
#options {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
#options .option, #options .option > * {
flex: auto;
height: 1.8em;
margin: 0;
display: inline-block;
white-space: nowrap;
}
#options .option {
margin-right: 1em;
}
#sections {
padding-left: 0;
}
#sections > div {
padding: 0;
}
#sections-heading {
padding-left: 8px;
}
body > section > *:not(h2) {
padding-left: 8px;
}
}
/* editor options */
@ -196,40 +247,35 @@
<div><label for="name" id="name-label"></label><input id="name" class="style-contributor"></div>
<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled" class="style-contributor"></div>
</section>
<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
<button id="save-button" title="Ctrl-S"></button>
<a href="manage.html"><button id="cancel-button"></button></a>
<form id="options">
<section id="actions">
<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
<button id="from-mozilla">From Mozilla format</button><img id="from-mozilla-help" src="help.png"><br><br>
<button id="save-button" title="Ctrl-S"></button>
<a href="manage.html"><button id="cancel-button"></button></a>
</section>
<section id="options">
<h2 id="options-heading"></h2>
<table cols="2">
<tr>
<td colspan="2">
<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
<label id="lineWrapping-label" for="editor.lineWrapping"></label>
</td>
</tr>
<tr>
<td colspan="2">
<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
<label id="smartIndent-label" for="editor.smartIndent"></label>
</td>
</tr>
<tr>
<td colspan="2">
<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
</td>
</tr>
<tr>
<td><label id="tabSize-label" for="editor.tabSize"></label></td>
<td><input data-option="tabSize" id="editor.tabSize" type="number" min="0"></td>
</tr>
<tr>
<td><label id="keyMap-label" for="editor.keyMap"></label></td>
<td><select data-option="keyMap" id="editor.keyMap"></select></td>
</tr>
</table>
</form>
<div class="option">
<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
<label id="lineWrapping-label" for="editor.lineWrapping"></label>
</div>
<div class="option">
<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
<label id="smartIndent-label" for="editor.smartIndent"></label>
</div>
<div class="option">
<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
</div>
<div class="option aligned">
<label id="tabSize-label" for="editor.tabSize"></label>
<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
</div>
<div class="option aligned">
<label id="keyMap-label" for="editor.keyMap"></label>
<select data-option="keyMap" id="editor.keyMap"></select>
</div>
</section>
</div>
<section id="sections">
<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>