intermediary progress
This commit is contained in:
Adriaan Wormgoor
parent
bd83fc42f8
commit
066eb182f0
|
|
@ -43,12 +43,13 @@ body {
|
|||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
height: 100%;
|
||||
max-width: 1024px;
|
||||
max-height: 768px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
/* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */
|
||||
#landscape:after {
|
||||
#landscape:before {
|
||||
content:' ';
|
||||
display:block;
|
||||
position:absolute;
|
||||
|
|
@ -93,15 +94,75 @@ body {
|
|||
left: 50%;
|
||||
/*margin: -225px 0 0 -325px;*/
|
||||
background-color: #fff;
|
||||
width: 75%;
|
||||
width: 65%;
|
||||
min-width: 150px;
|
||||
max-width: 650px;
|
||||
height: 70%;
|
||||
height: 60%;
|
||||
min-height: 150px;
|
||||
max-height: 450px;
|
||||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#canvasContainers {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/*height: 100%;*/
|
||||
background-color: #0e0;
|
||||
}
|
||||
|
||||
#mycanvas, #preview {
|
||||
/*border: 1px solid #08c;*/
|
||||
/*float:left;*/
|
||||
}
|
||||
|
||||
#mycanvasContainer {
|
||||
display: table-cell;
|
||||
float:left;
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#mycanvas {
|
||||
/*width: 500px;*/
|
||||
/*height: 450px;*/
|
||||
/*border: 0px solid #333;*/
|
||||
border-right: 2px solid #333;
|
||||
/*background-color: #f0f;*/
|
||||
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*bottom: 0;*/
|
||||
/*left: 0;*/
|
||||
/*right: 0;*/
|
||||
/*width: 80%;*/
|
||||
/*float:left;*/
|
||||
/*width: 100%;*/
|
||||
/*height: 100%;*/
|
||||
background: #808;
|
||||
}
|
||||
|
||||
#preview {
|
||||
/*border: 1px solid #f8c;*/
|
||||
/*position: absolute;*/
|
||||
/*right: 0px;*/
|
||||
/*top: 0px;*/
|
||||
|
||||
float:right;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
background: #f44;
|
||||
|
||||
/*width: 150px;*/
|
||||
/*height: 450px;*/
|
||||
}
|
||||
|
||||
#preview_tmp {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
@ -111,41 +172,6 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#mycanvas, #preview {
|
||||
/*border: 1px solid #08c;*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
#mycanvas {
|
||||
/*width: 500px;*/
|
||||
/*height: 450px;*/
|
||||
/*border: 0px solid #333;*/
|
||||
/*border-right: 2px solid #333;*/
|
||||
/*background-color: #f0f;*/
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
background: #808;
|
||||
}
|
||||
|
||||
#preview {
|
||||
/*border: 1px solid #f8c;*/
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
/*width: 150px;*/
|
||||
/*height: 450px;*/
|
||||
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
|
|
@ -245,7 +271,6 @@ body {
|
|||
|
||||
|
||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
||||
/*
|
||||
@media screen and (max-height: 675px) {
|
||||
.bgMiddle {
|
||||
display: none;
|
||||
|
|
@ -284,10 +309,10 @@ body {
|
|||
-moz-transform: scale(.94);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 128px;
|
||||
height: 350px;
|
||||
}
|
||||
/*#drawAreaContainer {*/
|
||||
/*top: 128px;*/
|
||||
/*height: 350px;*/
|
||||
/*}*/
|
||||
}
|
||||
|
||||
@media screen and (max-height: 560px) {
|
||||
|
|
@ -331,12 +356,11 @@ body {
|
|||
-moz-transform: translate(-5px,-10px);
|
||||
}
|
||||
|
||||
#drawAreaContainer {
|
||||
top: 110px;
|
||||
height: 350px;
|
||||
}
|
||||
/*#drawAreaContainer {*/
|
||||
/*top: 110px;*/
|
||||
/*height: 350px;*/
|
||||
/*}*/
|
||||
}
|
||||
//*/
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
10
index.html
10
index.html
|
|
@ -55,8 +55,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="drawAreaContainer">
|
||||
<canvas id="mycanvas"></canvas>
|
||||
<canvas id="preview"></canvas>
|
||||
<div id="canvasContainers">
|
||||
<div id="mycanvasContainer">
|
||||
<canvas id="mycanvas"></canvas>
|
||||
</div>
|
||||
<div id="previewContainer">
|
||||
<canvas id="preview"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="preview_tmp"></canvas>
|
||||
<div class="manipulationBtns cf">
|
||||
<div id="btnsUpDown">
|
||||
|
|
|
|||
|
|
@ -115,18 +115,21 @@ function doOnResize() {
|
|||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
doodleCanvas.width = doodleCanvas.clientWidth;
|
||||
doodleCanvas.height = doodleCanvas.clientHeight;
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
||||
preview.width = parseInt($preview.css("width"), 10);
|
||||
preview.height = parseInt($preview.css("height"), 10);
|
||||
// preview.width = parseInt($preview.css("width"), 10);
|
||||
// preview.height = parseInt($preview.css("height"), 10);
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
//return;
|
||||
redrawDoodle();
|
||||
redrawPreview();
|
||||
|
||||
return;
|
||||
|
||||
// doClientAndOrientationStuff() // <-- is this necessary in this method?
|
||||
|
||||
|
|
@ -164,16 +167,25 @@ function initLayouting() {
|
|||
<!--canvas mycanvas 500, 450-->
|
||||
<!--canvas preview 150, 450-->
|
||||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
$drawAreaContainer = $("#drawAreaContainer");
|
||||
// $doodleCanvas = $("#mycanvas");
|
||||
// doodleCanvas = $("#mycanvas")[0];
|
||||
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
||||
|
||||
$drawAreaContainer.css("margin", 0);
|
||||
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
doodleCanvas.width = doodleCanvas.clientWidth;
|
||||
doodleCanvas.height = doodleCanvas.clientHeight;
|
||||
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
|
||||
// code from new layouting approach... //TODO give this a more logical spot
|
||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
||||
preview.width = parseInt($preview.css("width"), 10);
|
||||
preview.height = parseInt($preview.css("height"), 10);
|
||||
// preview.width = parseInt($preview.css("width"), 10);
|
||||
// preview.height = parseInt($preview.css("height"), 10);
|
||||
canvasWidth = canvas.width;
|
||||
canvasHeight = canvas.height;
|
||||
|
||||
|
|
@ -184,7 +196,8 @@ function initLayouting() {
|
|||
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
||||
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
|
||||
imgDims = [1024, 768];
|
||||
// imgDims = [1024, 768];
|
||||
|
||||
/*
|
||||
if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
|
||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
||||
|
|
|
|||
13
js/main.js
13
js/main.js
|
|
@ -14,18 +14,7 @@ $(function() {
|
|||
console.log("ready");
|
||||
|
||||
|
||||
//TODO give more logical place in code
|
||||
$drawAreaContainer = $("#drawAreaContainer");
|
||||
$doodleCanvas = $("#mycanvas");
|
||||
doodleCanvas = $("#mycanvas")[0];
|
||||
doodleCanvasContext = doodleCanvas.getContext('2d');
|
||||
|
||||
$drawAreaContainer.css("margin", 0);
|
||||
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
||||
|
||||
doodleCanvas.width = doodleCanvas.clientWidth;
|
||||
doodleCanvas.height = doodleCanvas.clientWidth;
|
||||
//TODO give this a more logical place in code
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue