diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index 86b92fd..71878ab 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -4,14 +4,13 @@ export class CanvasHandler { constructor(currentImageDiv: HTMLElement) { this.currentImageDiv = currentImageDiv; + } + + public Load() { this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage); this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage); } - // public Load() { - // this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage); - // } - private hoverOverImage() { console.log('hovering over image'); } diff --git a/dist/assets/stylesheets/main.css b/dist/assets/stylesheets/main.css index 272dcb9..16e55df 100644 --- a/dist/assets/stylesheets/main.css +++ b/dist/assets/stylesheets/main.css @@ -1,30 +1,32 @@ div { display: block; - color: blue; + color: #101e24; font-family: "Arial", Helvetica, sans-serif; } #instructions { + font-size: 12px; margin: auto; width: 50%; - border: 1px solid blue; - padding: 16px; + border: 2px solid #6b7578; + padding: 1px; + text-align: center; } .instruction { display: block; - color: blue; + color: #101e24; font-family: "Arial", Helvetica, sans-serif; } .warning { display: block; - color: red; + color: #520012; font-family: "Arial", Helvetica, sans-serif; } -main { - width: 500px; +body { + background-color: #818485; } #dropZone { @@ -33,11 +35,23 @@ main { } #currentImage { - width: 400px; - height: 400px; + width: 50%; + height: 50%; + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; } #currentImage img { - max-width: 100%; - height: auto; + object-position: center top; + width: 256; + height: 256; + min-width: 256; + min-height: 256; + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */ + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ } diff --git a/dist/index.html b/dist/index.html index a3d092c..4c31331 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,6 +9,9 @@
+
+

Drag images onto the page to upload them. Advance frames with arrow keys

+
@@ -19,9 +22,6 @@
-
-

Drag images onto the page to upload them. Advance frames with arrow keys

-