Pārlūkot izejas kodu

Merge branch 'Gallery'

Iñigo Valentin 9 gadi atpakaļ
vecāks
revīzija
ea611d6f20
4 mainītis faili ar 194 papildinājumiem un 121 dzēšanām
  1. 63 40
      www/css/galeria.css
  2. 8 2
      www/css/m/galeria.css
  3. 16 14
      www/galeria/album.php
  4. 107 65
      www/galeria/load_photo.php

+ 63 - 40
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;
@@ -134,66 +133,86 @@ div#photo_viewer{
 
 /* /galeria/load_photo.php */
 
+div#photo_viewer div#viewer_container{
+	position:	absolute;
+	overflow-y:	auto;
+	top:			4.5em;
+	left:			0;
+	right:		0;
+	bottom:		1em;
+	margin:		-2em 0 0 0;
+	padding:	2em 0 0 0;
+}
+
+div#photo_viewer h3.section_title div#viewer_close_container{
+	height:			1.5em;
+	float:			right;
+	margin-top:		-0.3em;
+	margin-right:	-0.4em;
+}
+
+div#photo_viewer h3.section_title div#viewer_close_container img#viewer_close{
+	height:	100%;
+}
+
 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%; /*Viewer is 10%*/
-	left:	11%;
-	right:	40%;
+	padding:	0 1em 0.5em 1em;
 	
 }
 
-div#photo_viewer div#viewer_table div.viewer_row div#cell_details{
+div#photo_viewer div#viewer_table div.viewer_row div#cell_image td.arrow{
+	width:	5%;
+}
+
+div#photo_viewer div#viewer_table div.viewer_row div#cell_image td#image{
+    width:  90%;
+}
+
+
+div#photo_viewer div#viewer_table div.viewer_row div#cell_comments{
 	width:		40%;
 }
 
 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{
@@ -202,20 +221,32 @@ div#photo_viewer div#viewer_controls img{
 	transition:	all .3s ease-in-out;
 }
 
-div#photo_viewer div#viewer_controls img:hover{
-	-webkit-filter:	drop-shadow(0 0 0.3em #775599);
+div#photo_viewer img.viewer_arrow{
+	height:		3em;
+	width:		3em;
+	opacity:	0.4;
+}
+
+div#photo_viewer img.viewer_arrow:hover{
+    -webkit-filter:	drop-shadow(0 0 0.3em #775599);
     filter:			drop-shadow(0 0 0.3em #775599);
     -ms-filter:		"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#759')";
     filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#759')";
+	opacity:		0.8;
 }
 
-div#photo_viewer_details{
-	position:	fixed;
-	top:		11%;
-	bottom:		11%;
-	right:		12%;
-	left:		60%;
-	overflow-y:	auto;
+
+div#photo_viewer img#viewer_arrow_left{
+	left:	0%;
+}
+
+div#photo_viewer img#viewer_arrow_right{
+    right:	0%;
+}
+
+div#photo_data{
+	position:	relative;
+	height:		100%;
 }
 
 div#photo_data h4{
@@ -244,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;
@@ -303,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{

+ 8 - 2
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;
+}

+ 16 - 14
www/galeria/album.php

@@ -4,6 +4,7 @@
 	include("../functions.php");
 	$con = startdb();
 	$proto = getProtocol();
+	#server = "$proto$http_host";
 	
 	//Language
 	$lang = selectLanguage();
@@ -32,15 +33,15 @@
 		<link rel="shortcut icon" href="<?php echo "$proto$http_host/img/logo/favicon.ico";?>">
 		<!-- CSS files -->
 		<style>
-			<?php 
-				include("../css/ui.css"); 
+			<?php
+				include("../css/ui.css");
 				include("../css/galeria.css");
 			?>
 		</style>
 		<!-- CSS for mobile version -->
 		<style media="(max-width : 990px)">
-			<?php 
-				include("../css/m/ui.css"); 
+			<?php
+				include("../css/m/ui.css");
 				include("../css/m/galeria.css");
 			?>
 		</style>
@@ -59,7 +60,7 @@
 		<meta property="og:title" content="<?php echo $l['title'];?> - Gasteizko Margolariak"/>
 		<meta property="og:url" content="<?php echo "$proto$http_host/galeria/$perm"; ?>"/>
 		<meta property="og:description" content="<?php echo strip_tags($r['description']); ?>"/>
-		<meta property="og:image" content="<?php  echo "$proto$http_host/img/logo/logo.png";?>"/> 
+		<meta property="og:image" content="<?php  echo "$proto$http_host/img/logo/logo.png";?>"/>
 		<meta property="og:site_name" content="Gasteizko Margolariak"/>
 		<meta property="og:type" content="website"/>
 		<meta property="og:locale" content="<?php echo $lang; ?>"/>
@@ -74,14 +75,15 @@
 		<?php include("../header.php"); ?>
 		<div id="content">
 			<div class="section" id="album" itemscope itemtype='https://schema.org/ImageGallery'>
-				<div class='hidden' itemprop='author creator' itemscope itemtype='http://schema.org/Organization'>\n");
-					<meta itemprop='legalName' content='Asociaci&oacute;n Cultural Recreativa Gasteizko Margolariak'/>\n");
-					<meta itemprop='name' content='Gasteizko Margolariak'/>\n");
-					<meta itemprop='logo' content='$proto$http_host/img/logo/logo.png'/>\n");
-					<meta itemprop='foundingDate' content='03-02-2013'/>\n");
-					<meta itemprop='telephone' content='+34637140371'/>\n");
-					<meta itemprop='url' content='<?php echo("$proto$http_host"); ?>'/>\n");
-				</div>\n");
+				<div class='hidden' itemprop='author creator' itemscope itemtype='http://schema.org/Organization'>
+					<meta itemprop='legalName' content='Asociaci&oacute;n Cultural Recreativa Gasteizko Margolariak'/>
+					<meta itemprop='name' content='Gasteizko Margolariak'/>
+					<meta itemprop='logo' content='$proto$http_host/img/logo/logo.png'/>
+					<meta itemprop='foundingDate' content='03-02-2013'/>
+					<meta itemprop='telephone' content='+34637140371'/>
+					<meta itemprop='url' content='<?=$server ?>'/>
+				</div>
+
 				<?php
 					//Header
 					echo("<h3 class='section_title' itemprop='name' id='album_title'>$r[title]</h3>\n");
@@ -90,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*/

+ 107 - 65
www/galeria/load_photo.php

@@ -3,6 +3,8 @@
 	include("../functions.php");
 	$con = startdb();
 	$proto = getProtocol();
+	$server = "$proto$http_host";
+
 	
 	//Language
 	$lang = selectLanguage();
@@ -16,72 +18,112 @@
 	}
 	else{
 		$r = mysqli_fetch_array($q);
-		echo "<div id='viewer_table'><div class='viewer_row'><div class='viewer_cell' id='cell_image'>\n";
-		echo "<img id='photo_viewer_image' src='/img/galeria/preview/$r[file]'/>\n";
-		echo "</br>\n";
-		//Arrows
-		echo "<div id='viewer_controls'>\n";
-		echo "<img id='viewer_arrow_left' class='pointer' alt=' ' src='$proto$http_host/img/misc/slid-left.png' onClick='scrollPhoto(-1);'/>\n";
-		echo "<img id='viewer_arrow_right' class='pointer' alt=' ' src='$proto$http_host/img/misc/slid-right.png' onClick='scrollPhoto(1);'/>\n";
-		echo "<img id='viewer_close' class='pointer mobile' alt=' ' src='$proto$http_host/img/misc/close.png' onClick='closeViewer();'/>\n";
-		echo "</div>\n"; //viewer_controls
-		echo "</div>\n"; //cell
-		echo "<div class='viewer_cell' id='cell_details'>\n";
-		echo "<div id='photo_viewer_details'>\n";
-		echo "<div class='entry' id='photo_data'>\n";
-		if (strlen($r['title']) > 0){
-			echo "<h3 class='entry_title'>$r[title]</h3>\n";
-		}
-		if (strlen($r['description']) > 0){
-			echo "<span id='photo_description'>$r[description]</span>\n";
-		}
-		echo "<span id='photo_date'>" . formatDate($r['uploaded'], $lang) . "</span>\n";
-		if (strlen($r['username']) > 0){
-			echo "<span id='photo_user'>$lng[gallery_user]$r[username]</span>\n";
-		}
-		echo "</div>\n";
-		$q_comment = mysqli_query($con, "SELECT * FROM photo_comment WHERE photo = $r[id];");
-		$comment_count = mysqli_num_rows($q_comment);
-		echo "<div class='entry' id='comments_section'/>\n";
-		echo "<div id='photo_viewer_comment_counter'>\n";
-		switch ($comment_count){
-			case 0:
-				echo "<h3 class='entry_title'><meta itemprop='interactionCount' content='0'/>$lng[gallery_comment_count_0]</h3>\n";
-				break;
-			case 1:
-				echo "<h3 class='entry_title'><span itemprop='interactionCount'>1</span> $lng[gallery_comment_count_1]</h3>\n";
-				break;
-			default:
-				echo "<h3 class='entry_title'><span itemprop='interactionCount'>$comment_count</span> $lng[gallery_comment_count_several]</h3>\n";
-		}
-		echo "</div>\n";
-		echo "<div id='comment_list'>\n";
-		//WARNING: If changes are done here, do the same in comment.php
-		while ($r_comment = mysqli_fetch_array($q_comment)){
-			echo "<div itemprop='comment' itemscope itemtype='http://schema.org/UserComments' id='comment_$r_comment[id]' class='comment'>\n";
-			//When official users are implementes, see if there is user or username
-			echo "<span itemprop='creator' class='comment_user'>$r_comment[username]</span>\n";
-			echo "<span class='comment_date date'><meta itemprop='commentTime' content='$r_comment[isodate]'/>" . formatDate($r_comment['dtime'], $lang) . "</span>\n";
-			echo "<p itemprop='commentText' class='comment_text'>$r_comment[text]</p>";
-			echo "<hr class='comment_line'/>\n";
-			echo "</div>\n";
-		}
-		echo "</div>\n";
-		#Comment form
-		echo "<div class='comment' id='comment_new'>\n";
-		echo "<form id='comment_form' method='post' action='/' onsubmit='event.preventDefault();postComment($r[id], \"$lang\");'>\n";
-		echo "<textarea id='new_comment_text' name='text' maxlength='1800' onChange='defaultInputBorder(this);' onKeyDown='defaultInputBorder(this);' placeholder='$lng[blog_placeholder_text]'></textarea>\n";
-		//echo "<input type='hidden' name='id' value='$id'>\n";
-		echo "<div id='identification_form'>\n";
-		echo "<br><input id='new_comment_user' name='user' maxlength='50' type='text' placeholder='$lng[blog_placeholder_name]' onChange='defaultInputBorder(this);' onKeyDown='defaultInputBorder(this);'/>\n";
-		echo "<input type='submit' value='$lng[blog_send]'/>\n";
-		echo "</div>\n";
-		echo "</form>\n";
-		echo "</div>\n"; //New comment
-		echo "</div>\n"; //Comments
-		echo "</div>\n"; //Cell
+
+		// Get album name
+		$q_album = mysqli_query($con, "SELECT album.title_$lang AS title FROM album, photo_album WHERE album = album.id AND photo = $r[id]");
+		$r_album = mysqli_fetch_array($q_album);
+?>
+		<h3 class='section_title'>
+<?php
+			if (strlen($r['title']) > 0){
+				echo($r['title']);
+			}
+			else{
+				echo($r_album['title']);
+			}
+?>
+			<div id='viewer_close_container'>
+				<img id='viewer_close' class='pointer' alt=' ' src='<?=$server?>/img/misc/close.png' onClick='closeViewer();'/>
+			</div>
+		</h3>
+		<div id='viewer_container'>
+			<div id='viewer_table'>
+				<div class='viewer_row'>
+					<div class='viewer_cell' id='cell_image'>
+						<div class='entry' id='photo_data'>
+							<table>
+								<tr>
+									<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'>
+										<div id='photo_viewer_image_container'>
+											<img id='photo_viewer_image' src='/img/galeria/preview/<?=$r['file']?>'/>
+										</div>
+									</td>
+									<td class='arrow'>
+										<img id='viewer_arrow_right' class='viewer_arrow pointer' alt=' ' src='<?=$server?>/img/misc/slid-right.png' onClick='scrollPhoto(1);'/>
+									</td>
+								</tr>
+							</table>
+							<!-- Arrows -->
+							<!--<div id='viewer_controls'>
+								<img id='viewer_arrow_left' class='viewer_arrow pointer' alt=' ' src='<?=$server?>/img/misc/slid-left.png' onClick='scrollPhoto(-1);'/>
+								<img id='viewer_arrow_right' class='viewer_arrow pointer' alt=' ' src='<?=$server?>/img/misc/slid-right.png' onClick='scrollPhoto(1);'/>
+							</div>  #viewer_controls -->
+<?php
+							if (strlen($r['description']) > 0){
+								echo("<span id='photo_description'>$r[description]</span>\n");
+							}
+							echo("<span id='photo_date'>" . formatDate($r['uploaded'], $lang) . "</span>\n");
+							if (strlen($r['username']) > 0){
+								echo("<span id='photo_user'>$lng[gallery_user]$r[username]</span>\n");
+							}
+?>
+						</div> <!-- #photo_data -->
+					</div>  <!-- #cell_image -->
+					<div class='viewer_cell' id='cell_comments'>
+						<div id='photo_viewer_details'>
+<?php
+							$q_comment = mysqli_query($con, "SELECT * FROM photo_comment WHERE photo = $r[id];");
+							$comment_count = mysqli_num_rows($q_comment);
+?>
+							<div class='entry' id='comments_section'/>
+								<div id='photo_viewer_comment_counter'>
+<?php
+									switch ($comment_count){
+										case 0:
+											echo("<h3 class='entry_title'><meta itemprop='interactionCount' content='0'/>$lng[gallery_comment_count_0]</h3>\n");
+											break;
+										case 1:
+											echo("<h3 class='entry_title'><span itemprop='interactionCount'>1</span> $lng[gallery_comment_count_1]</h3>\n");
+											break;
+										default:
+											echo("<h3 class='entry_title'><span itemprop='interactionCount'>$comment_count</span> $lng[gallery_comment_count_several]</h3>\n");
+									}
+?>
+								</div> <!-- #photo_viewer_comment_counter -->
+								<div id='comment_list'>
+<?php
+									//WARNING: If changes are done here, do the same in comment.php
+									while ($r_comment = mysqli_fetch_array($q_comment)){
+?>
+										<div itemprop='comment' itemscope itemtype='http://schema.org/UserComments' id='comment_<?=$r_comment['id']?>' class='comment'>
+											<span itemprop='creator' class='comment_user'><?=$r_comment['username']?></span>
+											<span class='comment_date date'><meta itemprop='commentTime' content='<?=$r_comment['isodate']?>'/><?=formatDate($r_comment['dtime'], $lang)?></span>
+											<p itemprop='commentText' class='comment_text'><?=$r_comment['text']?></p>
+											<hr class='comment_line'/>
+										</div>
+<?php
+									}
+?>
+								</div> <!-- #comment_list -->
+								<!-- Comment form -->
+								<div class='comment' id='comment_new'>
+									<form id='comment_form' method='post' action='/' onsubmit='event.preventDefault();postComment(<?=$r['id']?>, "<?=$lang?>");'>
+										<textarea id='new_comment_text' name='text' maxlength='1800' onChange='defaultInputBorder(this);' onKeyDown='defaultInputBorder(this);' placeholder='<?=$lng[blog_placeholder_text]?>'></textarea>
+										<div id='identification_form'>
+											<br/>
+											<input id='new_comment_user' name='user' maxlength='50' type='text' placeholder='<?=$lng['blog_placeholder_name']?>' onChange='defaultInputBorder(this);' onKeyDown='defaultInputBorder(this);'/>
+											<input type='submit' value='<?=$lng['blog_send']?>'/>
+										</div> <!-- #identification_form -->
+									</form>
+								</div> <!-- #comment_new -->
+							</div> <!-- #comments_section -->
+						<!-- </div>  #cell_details -->
+<?php
 		echo "</div>\n"; //Row
-		echo "</div>\n"; //Table
+		echo "</div></div>\n"; //Container
 		
 		stats(-1, 0, "photo", "$r[id]");
 	}