make switch actually look good and work correctly

diff --git a/index.html b/index.html
index f8cb2933876bdd3eb7415825f2160c320018e63f..5f4979be10665c3d658a4965694c9a93035add92 100644 (file)
--- a/index.html
+++ b/index.html
@@ -124,9 +124,9 @@ a better device.
 <tr><td>Distance:</td><td id="envDistance" class="envVal">...</td></tr>
 </table>
 <div id="envFlashAvail" style="display:none">
 <tr><td>Distance:</td><td id="envDistance" class="envVal">...</td></tr>
 </table>
 <div id="envFlashAvail" style="display:none">

-Flashlight:
+Flashlight<br>

 <button id="envFlashOn" class="envButton">On</button><button
 <button id="envFlashOn" class="envButton">On</button><button

-        id="envFlashOff" class="envButton" disabled="true">Off</button>
+        id="envFlashOff" class="envButton">Off</button>

 </div>
 <div id="envFlashUnavail">
 <!-- No camera with flash available -->
 </div>
 <div id="envFlashUnavail">
 <!-- No camera with flash available -->

diff --git a/js/tricorder.js b/js/tricorder.js
index f8bc28f18a108b8f680a7aba921a02fbb11ac04d..92885dae4b231310554f4ee36c8795553ba6ac6c 100644 (file)
--- a/js/tricorder.js
+++ b/js/tricorder.js
@@ -376,8 +376,8 @@ var gModEnv = {
   switchFlashlight: function(aEnabled) {
     if (this.flashCamera) {
       this.flashCamera.flashMode = aEnabled ? 'torch' : 'off';
   switchFlashlight: function(aEnabled) {
     if (this.flashCamera) {
       this.flashCamera.flashMode = aEnabled ? 'torch' : 'off';

-      document.getElementById("envFlashOn").disabled == aEnabled;
-      document.getElementById("envFlashOff").disabled == !aEnabled;
+      document.getElementById("envFlashOn").disabled = aEnabled;
+      document.getElementById("envFlashOff").disabled = !aEnabled;

     }
   }
 }
     }
   }
 }

diff --git a/style/tricorder.css b/style/tricorder.css
index cc79adee420a936bb60e25ae4fc79f2fa45762ac..d60e7aa7c8da09f99984633578cb6b30dde02f33 100644 (file)
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -248,10 +248,9 @@ button {
   color: #000000;
   background-color: #C09070;
   border-radius: 3000px;
   color: #000000;
   background-color: #C09070;
   border-radius: 3000px;

-  margin: 0 .25em;

 }
 
 }
 

-button.disabled {
+button:disabled {

   background-color: #402858;
 }
 
   background-color: #402858;
 }
 


@@ -276,19 +275,28 @@ button.disabled {
 }
 
 #envFlashAvail {
 }
 
 #envFlashAvail {

-  padding: 1em 3px 0;
+  margin-top: .5em;
+  padding: .5em 3px 0;
+  border-top: 2px solid #A09090;
+}
+
+.envButton {
+  font-size: 200%;
+  margin-top: .25em;

 }
 
 #envFlashOn {
 }
 
 #envFlashOn {

-  margin-right: 0;
+  margin-right: 3px;

   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;

+  padding-left: .5em;

 }
 
 #envFlashOff {
   margin-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 #envFlashOff {
   margin-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

+  padding-right: .5em;

 }
 
 @media screen and (min-width: 500px) {
 }
 
 @media screen and (min-width: 500px) {