added more buttons, need more styling

9 years ago · 2ead3f5aaa
2 changed files with 12 additions and 33 deletions
--- 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>

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