From 3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2 Mon Sep 17 00:00:00 2001
From: Martin Ashby <martin@ashbysoft.com>
Date: Tue, 3 Jul 2018 12:38:22 +0100
Subject: Better layout with CSS. Changed favicon & title.

---
 src/PaintArea.js | 31 +++++++------------------------
 1 file changed, 7 insertions(+), 24 deletions(-)

(limited to 'src/PaintArea.js')

diff --git a/src/PaintArea.js b/src/PaintArea.js
index ac7ce96..e42ec9e 100644
--- a/src/PaintArea.js
+++ b/src/PaintArea.js
@@ -47,44 +47,27 @@ export default class PaintArea extends Component {
   render() {
     let data = this.props.data
     let height = data[0] ? data[0].length : 0
-    let rows = []
+    let cells = []
     for (var y=height-1; y>=0; y--) {
-      let cells = []
       for (var x=0; x<data.length; x++) {
         let {r, g, b} = rgb(getPixel(x, y, data))
         let ix = x
         let iy = y
-        cells.push(<td
+        cells.push(<div
+          className="paintAreaCell"
           onMouseMove={() => this.handleMouseMove(ix, iy)}
           onClick={() => this.props.onTool(ix, iy)}
           style={{
-            background: `rgb(${r},${g},${b})`,
-            ...styles.paintAreaCell
+            background: `rgb(${r},${g},${b})`
           }}
           key={(ix * 100000) + iy}/>)
       }
-      rows.push(<tr key={y}>{cells}</tr>)
     }
     
     return (
-      <table 
-        draggable={false}>
-        <tbody>
-          {rows}
-        </tbody>
-      </table>
+      <div className="paint">
+          {cells}
+      </div>
     )
   }
 }
-
-const styles = {
-  paintAreaCell: {
-    width: "20px",
-    height: "20px",
-    minWidth: "20px",
-    minHeight: "20px",
-    maxWidth: "20px",
-    maxHeight: "20px",
-    border: "1px solid grey",
-  }
-}
\ No newline at end of file
-- 
cgit v1.2.3-ZIG