mirror of
https://github.com/sehugg/8bitworkshop.git
synced 2024-12-22 12:30:01 +00:00
if you work hard and follow your dreams, you too can center <div>s vertically
This commit is contained in:
parent
e964bd26be
commit
0b67f94187
26
pixels.html
26
pixels.html
@ -7,7 +7,22 @@ body {
|
|||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
.thumb {
|
.thumbdiv {
|
||||||
|
}
|
||||||
|
.fcontainer
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.fitem
|
||||||
|
{
|
||||||
|
background-color: #f3f2ef;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="css/ui.css">
|
<link rel="stylesheet" href="css/ui.css">
|
||||||
@ -24,10 +39,13 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="notebook">
|
<div id="notebook">
|
||||||
<!-- TODO: doesn't work properly when screen isn't exactly centered -->
|
<div style="width:60%;height:100%;position:absolute;left:0">
|
||||||
<div id="thumbnaildiv" style="float:right;margin-top:20%;transform:scale(2);margin-right:10%">
|
<div id="maineditor" class="fcontainer">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="maineditor" style="margin-left:10%;margin-top:5%;height:100%">
|
<div style="width:40%;height:100%;position:absolute;right:0">
|
||||||
|
<div id="thumbnaildiv" class="fcontainer">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -39,13 +39,8 @@ export function PixelEditor(parentDiv:HTMLElement, fmt, palette, initialData, th
|
|||||||
this.getImageData = function() { return pixints.slice(0); }
|
this.getImageData = function() { return pixints.slice(0); }
|
||||||
|
|
||||||
function fitCanvas() {
|
function fitCanvas() {
|
||||||
var w = $(parentDiv).width();
|
pixcanvas.style.height = '50%'; // TODO?
|
||||||
var h = $(parentDiv).height();
|
return;
|
||||||
if (h > w)
|
|
||||||
pixcanvas.style.height = Math.floor(h)+"px";
|
|
||||||
else
|
|
||||||
pixcanvas.style.height = Math.floor(h/2)+"px";
|
|
||||||
// TODO
|
|
||||||
}
|
}
|
||||||
this.resize = fitCanvas;
|
this.resize = fitCanvas;
|
||||||
|
|
||||||
@ -56,6 +51,7 @@ export function PixelEditor(parentDiv:HTMLElement, fmt, palette, initialData, th
|
|||||||
for (var i=0; i<pixints.length; i++) {
|
for (var i=0; i<pixints.length; i++) {
|
||||||
pixints[i] = initialData ? palette[initialData[i]] : palette[0];
|
pixints[i] = initialData ? palette[initialData[i]] : palette[0];
|
||||||
}
|
}
|
||||||
|
this.canvas = pixcanvas;
|
||||||
|
|
||||||
updateImage();
|
updateImage();
|
||||||
|
|
||||||
@ -458,7 +454,7 @@ function pixelEditorCreateThumbnails(e) {
|
|||||||
allthumbs = [];
|
allthumbs = [];
|
||||||
for (var i=0; i<count; i++) {
|
for (var i=0; i<count; i++) {
|
||||||
if ((i & 15) == 0) {
|
if ((i & 15) == 0) {
|
||||||
parentdiv = $("#thumbnaildiv").append("<div>");
|
parentdiv = $('<div class="thumbdiv">').appendTo("#thumbnaildiv");
|
||||||
}
|
}
|
||||||
allthumbs.push(createThumbnailForImage(parentdiv, i));
|
allthumbs.push(createThumbnailForImage(parentdiv, i));
|
||||||
}
|
}
|
||||||
@ -474,6 +470,9 @@ function pixelEditorReceiveMessage(e) {
|
|||||||
function createThumbnailForImage(parentdiv, i) {
|
function createThumbnailForImage(parentdiv, i) {
|
||||||
var span = $('<span class="thumb">');
|
var span = $('<span class="thumb">');
|
||||||
var thumb = new PixelEditor(span[0], currentFormat, palette, allimages[i]);
|
var thumb = new PixelEditor(span[0], currentFormat, palette, allimages[i]);
|
||||||
|
// double size of canvas thumbnail
|
||||||
|
thumb.canvas.style.height = currentFormat.h*2+"px";
|
||||||
|
thumb.canvas.style.width = currentFormat.w*2+"px";
|
||||||
parentdiv.append(span);
|
parentdiv.append(span);
|
||||||
span.click(function() { createEditorForImage(i) });
|
span.click(function() { createEditorForImage(i) });
|
||||||
return thumb;
|
return thumb;
|
||||||
|
Loading…
Reference in New Issue
Block a user