refactoring the ui...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/TODO.otl

@@ -76,7 +76,7 @@ Priority work
 			[_] 0% layout
 				[_] 0% tablet
 					[_] stretch to full screen
-					| NOTE: viewer % sizes may break things...
+					| NOTE: viewer 0% sizes may break things...
 					[_] restrict to horizontal / do a different vertical layout
 					[_] make buttons semi-transparent and same color as bg in all modes
 					| just like single image mode...
@@ -102,6 +102,7 @@ Priority work
 		[_] 0% native client
 			[_] android
 	[_] 8% Preview II (optional features)
+		[_] option to disable processor intensive features
 		[_] 80% drag/move action...
 			[X] basic infrastructure
 			[X] action: center current image

ui/gallery.css

@@ -61,6 +61,7 @@
 
 
 .viewer {
+	position: relative;
 	width: 900px;
 	height: 500px;
 	border: solid blue 5px;
@@ -69,25 +70,39 @@
 
 
 .controller {
+	position: absolute;
+
 	height: 500px;
 	width: 50px;
-	float: left;
-	background: silver;
+
+	/* keep these on top of the normal elements but below the high 
+	 * visibility 9000+ crowd...
+	 */
+	z-index: 5000;
 
 	-webkit-transition: all 0.2s ease;
 	-moz-transition: all 0.2s ease;
 	-o-transition: all 0.2s ease;
 	-ms-transition: all 0.2s ease;	
 	transition: all 0.2s ease;
+
+	opacity: 0.5;
+}
+
+.controller.left {
+	left: 0px;
+}
+.controller.right {
+	right: 0px;
 }
 
 
 .screen-button {
 	text-align: center;
 	width: 100%;
-	height: 125px; 
+	height: 25%; 
 
-	color: white;
+	color: black;
 
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -102,17 +117,17 @@
 
 
 .toggle-single, .zoom-in {
-	border-top: solid white 1px;
-	height: 50px;
+	border-top: solid gray 1px;
+	height: 10%;
 }
 
 .toggle-single, .fit-three, .zoom-in, .zoom-out {
-	height: 50px;
+	height: 10%;
 }
 
 
 .settings, .toggle-wide {
-	height: 25px;
+	height: 5%;
 }
 
 .promote {
@@ -154,8 +169,12 @@
 	overflow: hidden;
 
 	float: left;
+	width: 100%;
+	height: 100%;
+	/*
 	width: 800px;
 	height: 500px;
+	*/
 
 	-webkit-transition: all 0.2s ease;
 	-moz-transition: all 0.2s ease;

ui/gallery.html

@@ -62,7 +62,7 @@ $(document).ready(setup);
 </style>
 
 <div class="viewer no-single-image-transitions">
-	<div class="controller">
+	<div class="controller left">
 		<div class="screen-button demote">^</div>
 		<div class="screen-button prev-image">&lt;</div>
 		<div class="screen-button promote">v</div>
@@ -81,7 +81,8 @@ $(document).ready(setup);
 		<div class="h-marker"></div>
 		<div class="v-marker"></div>
 	</div>
-	<div class="controller">
+	<!-- need to keep these after -->
+	<div class="controller right">
 		<div class="screen-button demote">^</div>
 		<div class="screen-button next-image">&gt;</div>
 		<div class="screen-button promote">v</div>

ui/single-image-mode.css

@@ -6,12 +6,11 @@
 
 
 .single-image-mode .controller {
-	opacity: 0.5;
-	background: black;
 }
 
 
 .single-image-mode .screen-button {
+	color: white;
 }
 
 
@@ -49,7 +48,7 @@
 
 
 .single-image-mode.single-image-white-bg .screen-button {
-	color: gray;
+	color: black;
 }
 
 
@@ -59,7 +58,7 @@
 
 
 .single-image-mode.single-image-white-bg .toggle-single, .single-image-mode.single-image-white-bg .zoom-in {
-	border-top: solid gray 1px;
+	border-top: solid black 1px;
 }