mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Make tools sticky on screen's left edge

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/style.css
View File

@ -12,10 +12,10 @@ body {
text-align: center;
font-size: 0;
position: absolute;
left: 0;
top: 104px;
left: 104px;
top: 10px;
right: 0;
bottom: 0;
bottom: 10px;
}
.left-column {
@ -35,19 +35,27 @@ body {
font-size: 0;
}
.top-section {
position: absolute;
bottom: 100%;
min-width: 400px;
margin-bottom: 5px;
}
.right-column {
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
.sticky-section {
display: table;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 140px;
}
.sticky-section .wrap {
display: table-cell;
vertical-align: middle;
}
/**
* Canvases layout

4
css/tools.css
View File

@ -5,10 +5,6 @@
float: left;
}
.tools-wrapper {
width: 70%;
}
.tool-icon {
float: left;
cursor : pointer;

45
index.html
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">