Make tools sticky on screen's left edge

So that the drawing canvas can expend full height
This commit is contained in:
Vince
2013-06-13 13:57:03 +02:00
parent f4de6acd2f
commit b89409f82e
3 changed files with 42 additions and 35 deletions

View File

@@ -17,6 +17,30 @@
</head>
<body>
<div id="menubar" class="sticky-section">
<div class="wrap">
<ul id="tools-container" class="tools-wrapper"></ul>
<div class="palette-wrapper">
<div class="tool-icon tool-color-picker">
<input id="color-picker" class="color {hash:true}" type="text" value="" />
<input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
</div>
<div class="tool-icon tool-palette">
<div id="palette" class="palette">
<span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
</div>
</div>
</div>
<!-- TODO: remove grid -->
<div style="display:none;" class="options-wrapper">
<div class="tool-grid">
<input id="show-grid" type="checkbox"/>
<label for="show-grid">Show grid</label>
</div>
</div>
</div>
</div>
<div class="column-wrapper">
<div class='left-column'>
@@ -27,27 +51,6 @@
</div>
<div class='main-column'>
<div id="menubar" class="top-section">
<ul id="tools-container" class="tools-wrapper"></ul>
<ul class="palette-wrapper">
<li class="tool-icon tool-palette">
<ul id="palette" class="palette">
<span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
</ul>
</li>
<li class="tool-icon tool-color-picker">
<input id="color-picker" class="color {hash:true}" type="text" value="" />
<input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
</li>
</ul>
<ul class="options-wrapper">
<li class="tool-grid">
<input id="show-grid" type="checkbox"/>
<label for="show-grid">Show grid</label>
</li>
</ul>
</div>
<!-- Drawing area: -->
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">