Improved photo viewer UI.

www/css/galeria.css

@@ -19,7 +19,6 @@ div.album_list{
 
 table.album_thumbnails td{
 	background-color:	#000000;
-/* 	display:			inline-block; */
 	width:				8em;
 	height:				8em;
 	text-align:			center;
@@ -121,10 +120,10 @@ div#screen_cover{
 div#photo_viewer{
 	position:			fixed;
 	display:			none;
-	top:				10%;
-	left:				10%;
-	right:				10%;
-	bottom:				10%;
+	top:					4em;
+	left:				4em;
+	right:				4em;
+	bottom:				4em;
 	opacity:			0;
 	transition:			all .6s ease-in-out;
 	z-index:			1001;
@@ -135,7 +134,12 @@ div#photo_viewer{
 /* /galeria/load_photo.php */
 
 div#photo_viewer div#viewer_container{
-	height:		100%;
+	position:	absolute;
+	overflow-y:	auto;
+	top:			4.5em;
+	left:			0;
+	right:		0;
+	bottom:		1em;
 	margin:		-2em 0 0 0;
 	padding:	2em 0 0 0;
 }
@@ -153,39 +157,31 @@ div#photo_viewer h3.section_title div#viewer_close_container img#viewer_close{
 
 div#photo_viewer div#viewer_table{
 	display:	table;
-	/*height:		100%;*/
 	width:		100%;
 }
 
 div#photo_viewer div#viewer_table div.viewer_row{
 	display:	table-row;
-	/*height:		100%;*/
 	width:		100%;
 }
 
 div#photo_viewer div#viewer_table div.viewer_row div.viewer_cell{
 	display:		table-cell;
-	/*max-height:		100%;*/
 	vertical-align:	top;
 }
 
 div#photo_viewer div#viewer_table div.viewer_row div#cell_image{
 	text-align:	center;
-	/*position:	fixed;
-	bottom:	10%;
-	top:	11%; 
-	left:	11%;
-	right:	40%;*/
-	padding:	0.5em 1em 0.5em 1em;
+	padding:	0 1em 0.5em 1em;
 	
 }
 
 div#photo_viewer div#viewer_table div.viewer_row div#cell_image td.arrow{
-	width:	10%;
+	width:	5%;
 }
 
 div#photo_viewer div#viewer_table div.viewer_row div#cell_image td#image{
-    width:  80%;
+    width:  90%;
 }
 
 
@@ -194,33 +190,29 @@ div#photo_viewer div#viewer_table div.viewer_row div#cell_comments{
 }
 
 div#photo_viewer_image_container{
-	/*height:				85%;*/
 	width:				100%;
 	position:			relative;
 	display:			inline-block;
 	max-width:			100%;
 	overflow:			hidden;
-	background-color:	#000000;
 	text-align:			center;
 	vertical-align:		center;
 }
 
 img#photo_viewer_image{
-	border:			0.3em solid #112244;
+	border-radius:	0.5em;
+	border:     0.3em solid #112244;
 	box-shadow:		0 0 0.5em #112244;
- 	max-width:		90%;
+ 	max-width:		95%;
+	top:			10%;
 	bottom:			10%;
-	max-height:		80%; /*The viewer is 85%*/
+	max-height:		80%;
 }
 
 div#photo_viewer div#viewer_controls{
-	/*height:		10%;*/
 	width:		100%;
 	text-align:	center;
 	bottom:		10%;
-	/*left:		0;*/
-	/*right:		0;*/
-	/*position:	fixed;*/
 }
 
 div#photo_viewer div#viewer_controls img{
@@ -230,11 +222,8 @@ div#photo_viewer div#viewer_controls img{
 }
 
 div#photo_viewer img.viewer_arrow{
-	/*position:	fixed;
-	top:		50%;*/
 	height:		3em;
 	width:		3em;
-	/*margin-top:	-1.5em;*/
 	opacity:	0.4;
 }
 
@@ -255,15 +244,6 @@ div#photo_viewer img#viewer_arrow_right{
     right:	0%;
 }
 
-div#photo_viewer_details{
-	/*position:	fixed;
-	top:		11%;
-	bottom:		11%;
-	right:		12%;
-	left:		60%;
-	overflow-y:	auto;*/
-}
-
 div#photo_data{
 	position:	relative;
 	height:		100%;
@@ -295,12 +275,6 @@ div#photo_data span#photo_user{
 	font-style:	italic;
 }
 
-
-div#photo_viewer_comments{
-	height:		100%;
-	overflow:	auto;
-}
-
 div.photo_viewer_comment{
 	border:		0.1em solid rgba(50, 50, 50, 0.2);
 	margin:		0;
@@ -354,8 +328,6 @@ div.form_photo{
 	text-align:		center;
 	margin:			1.5em;
 	padding:		1em;
-/* 	border:			0.1em solid #000010; */
-/* 	border-radius:	0.5em; */
 }
 
 div.form_photo img{

www/css/m/galeria.css

@@ -23,7 +23,7 @@ div#photo_viewer div#viewer_table div.viewer_row div#cell_image{
 	text-align:	center;
 	position:	initial;
 	bottom:		initial;
-	top:		initial; /*Viewer is 10%*/
+	top:		initial;
 	left:		initial;
 	right:		initial;
 	height:		50%;
@@ -38,10 +38,11 @@ div#photo_viewer div#viewer_table div.viewer_row div#cell_details{
 
 div#photo_viewer_image_container{
 	height:				100%;
+	padding-top:	0;
 }
 
 img#photo_viewer_image{
-	max-height:		95%; /*The viewer is 85%*/
+	max-height:		95%;
 }
 
 div#photo_viewer div#viewer_controls{
@@ -70,3 +71,8 @@ div#file_box span#select_mobile{
 	font-weight:	bold;
 	font-size:		130%;
 }
+
+div#cell_comments{
+	width:	initial !important;
+	margin: 0 1em 0.5em 1em;
+}

www/galeria/album.php

@@ -82,7 +82,7 @@
 					<meta itemprop='foundingDate' content='03-02-2013'/>
 					<meta itemprop='telephone' content='+34637140371'/>
 					<meta itemprop='url' content='<?=$server ?>'/>
-				</div>o
+				</div>
 
 				<?php
 					//Header
@@ -92,7 +92,7 @@
 						echo $r['description'];
 						echo "</div>\n";
 					}
-				
+
 					//Photos of the album
 					$q_photo = mysqli_query($con, "SELECT id, file, permalink, title_$lang AS title, description_$lang AS description, photo.dtime AS dtime, uploaded, width, height, size, user, username FROM photo, photo_album WHERE photo_album.photo = id AND album = $r[id] ORDER BY photo.dtime DESC;");
 					/* TODO AND approved = 1*/

www/galeria/load_photo.php

@@ -46,9 +46,9 @@
 									<td class='arrow'>
 										<img id='viewer_arrow_left' class='viewer_arrow pointer' alt=' ' src='<?=$server?>/img/misc/slid-left.png' onClick='scrollPhoto(-1);'/>
 									</td>
-									<td id='image' style='background-image:url(<?=$server?>/img/galeria/preview/<?=$r['file']?>);'>
-										<!-- <div id='photo_viewer_image_container' style='background-image:url(<?=$server?>/img/galeria/preview/<?=$r['file']?>);'> -->
-											<!-- <img id='photo_viewer_image' src='/img/galeria/preview/<?=$r['file']?>'/> -->
+									<td id='image'>
+										<div id='photo_viewer_image_container'>
+											<img id='photo_viewer_image' src='/img/galeria/preview/<?=$r['file']?>'/>
 										</div>
 									</td>
 									<td class='arrow'>