From 2ead3f5aaa73d3766a63128331d849782ae70a14 Mon Sep 17 00:00:00 2001
From: dennisdebel <dennisdebel@gmail.com>
Date: Tue, 19 May 2015 22:27:23 +0200
Subject: [PATCH] added more  buttons, need more styling

---
 web/index.html | 12 ++++++------
 web/style.css  | 33 ++++++---------------------------
 2 files changed, 12 insertions(+), 33 deletions(-)
diff --git a/web/index.html b/web/index.html
index 70c8072..f6017c4 100755
--- a/web/index.html
+++ b/web/index.html
@@ -12,7 +12,7 @@
   </head>
   <body>
   <div id="message-page">
-    <button id="message-back">Back</button>
+    <button id="message-back" class="back-button">Back</button><br><br>
     <form id="message-form" action="" accept-charset="utf-8">
       <textarea id="name" rows="1" placeholder="Your Name"></textarea>
       <textarea id="message" rows="2"  placeholder="Your Message"></textarea>
@@ -21,8 +21,8 @@
     </form>
   </div>
 
-  <div id="photo-page" class="photoBox">
-    <button id="photo-back">Back</button>
+  <div id="photo-page" class="photo-page">
+    <button id="photo-back" class="back-button">Back</button><br>
     <input id="fileInput" accept="image/*" capture="camera" type="file">
     <br>
     <p>
@@ -40,11 +40,11 @@
     <canvas id="canvas3" width="400" height="400"></canvas>
     <br>
 
-    <button id="rotLeft">Rotate left</button>
-    <button id="rotRight">Rotate right</button>
+    <button id="rot-left" class="back-button">Rotate left</button>
+    <button id="rot-right" class="back-button">Rotate right</button>
 
     <button id="submit-photo" class="photo-buttons">submit</button>
-    <button id="cancel-photo" class="photo-buttons">cancel</button>
+    
 
   </div>
 
diff --git a/web/style.css b/web/style.css
index a314852..dbbf416 100755
--- a/web/style.css
+++ b/web/style.css
@@ -81,10 +81,10 @@ margin:10px;
   box-shadow:0 0 23px #bbb;
 }
 
-#back-button{
+.back-button{
   display:inline;
   float:left;
-  width:30%;
+  width:100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   outline: none;
@@ -229,37 +229,16 @@ hr{
 }
 
 .photoBox {
+  width: 98%;
+  margin: 0 auto;
+  line-height: 40px;
   display: none;
   position: absolute;
-  top: 25%;
-  left: 25%;
-  width: 50%;
-  height: 50%;
-  padding: 16px;
   background-color:#fff;
   z-index:1002;
   overflow: auto;
-
-
-
-  padding:30px;
-  
+  width: 100%;
   overflow: visible;
-  -moz-box-shadow:0 0 23px #bbb;
-  -webkit-box-shadow:0 0 23px #bbb;
-  box-shadow:0 0 23px #bbb;
-  -webkit-border-top-left-radius:123px;
-  -webkit-border-top-right-radius:123px;
-  -webkit-border-bottom-right-radius:123px;
-  -webkit-border-bottom-left-radius:123px;
-  -moz-border-radius-bottomright:123px;
-  -moz-border-radius-bottomleft:123px;
-  -moz-border-top-left-radius:123px;
-  -moz-border-top-right-radius:123px;
-  border-top-left-radius:123px;
-  border-top-right-radius:123px;
-  border-bottom-right-radius:123px;
-  border-bottom-left-radius:123px;
   background:#fff;
 }
 
