6502/8bitworkshop
1
0
Fork 0
mirror of https://github.com/sehugg/8bitworkshop.git synced 2024-06-01 20:41:36 +00:00
Code Issues Projects Releases Wiki Activity

if you work hard and follow your dreams, you too can center <div>s vertically

Browse Source
This commit is contained in:
Steven Hugg 2018-08-21 09:27:14 -04:00
parent e964bd26be
commit 0b67f94187
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
pixels.html
View File

@ -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>

15
src/pixed/pixeleditor.ts
View File

@ -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;