Fix drill icons on marker medias

inc/media.php

@@ -42,7 +42,7 @@ class Media extends PhpObject {
 				));
 				
 				foreach($asMedias as &$asMedia) {
-					$asMedia['pic_path'] = self::getMediaPath($asMedia['filename']);
+					$asMedia['media_path'] = self::getMediaPath($asMedia['filename']);
 					$asMedia['thumb_path'] = $this->getMediaThumbnail($asMedia['filename']);
 				}
 				$this->asMedias = $asMedias;

masks/project.html

@@ -130,7 +130,7 @@ function initProject(sProjectCodeName){
 	self.tmp('proj_tz_notice', bSameTZ?'':' ('+self.vars(['project', 'timezone_desc'])+')');
 	
 	$.when(
-		//Markers: Spot Messages & Pictures
+		//Markers: Spot Messages & Medias
 		self.get(
 			'markers', 
 			function(){},
@@ -391,15 +391,16 @@ function initSpotMessages(aoMessages, aoTracks) {
 				.addIcon('fa-coords', false)
 				.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
 		
-		//Tooltip pictures
+		//Tooltip medias
 		if(oMsg.medias) {
-			var $Pics = $('<div>', {'class':'pics'});
+			var $Medias = $('<div>', {'class':'medias'});
 			$.each(oMsg.medias, function(iKey, asMedia) {
 				var bVideo = (asMedia.subtype == 'video');
-				$Pics
+				$Medias
 					.append($('<a>', {
-						href: asMedia.pic_path,
+						'class': 'drill '+(bVideo?'video':'picture'),
-						'data-lightbox': 'marker-pictures',
+						href: asMedia.media_path,
+						'data-lightbox': 'marker-medias',
 						'data-video': (bVideo?'true':'false'),
 						'data-title': (bVideo?'Vidéo':'Photo')+' prise le '+asMedia.formatted_time+self.tmp('site_tz_notice'),
 						'data-orientation': asMedia.rotate})
@@ -407,7 +408,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 			});
 			$Tooltip
 				.append($('<p>').addIcon('fa-picture').append('Photos'))
-				.append($Pics);
+				.append($Medias);
 		}
 		
 		oMarker.bindPopup($Tooltip[0], {
@@ -418,7 +419,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 		});
 		
 		//Open tooltip on latest message in mobile mode
-		if(iKey === 0 && self.vars(['project', 'mode']) == self.consts.modes.blog && (!oMsg.pics || oMsg.pics.length < 3) && self.tmp('mobile')) oMarker.openPopup();
+		if(iKey === 0 && self.vars(['project', 'mode']) == self.consts.modes.blog && (!oMsg.medias || oMsg.medias.length < 3) && self.tmp('mobile')) oMarker.openPopup();
 		
 		oSpot.tmp(['markers', oMsg.id_message], oMarker);
 	});
@@ -514,9 +515,9 @@ function getPost(asPost) {
 			var $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
 			$Body = $('<a>', {
 				'class': 'drill '+(bVideo?'video':'picture'),
-				href: asPost.pic_path,
+				href: asPost.media_path,
 				'data-video': (bVideo?'true':'false'),
-				'data-lightbox': 'post-pictures',
+				'data-lightbox': 'post-medias',
 				'data-title': (bVideo?'Vidéo':'Photo')+' ajoutée le '+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
 			}).append($Image);
 			break;

style/_mask_project.scss

@@ -195,6 +195,24 @@ $legend-color: #222;
 			@extend .fa-post;
 		}
 	}
+
+	a.drill {
+		position: relative;
+		@extend .fa;
+		overflow: hidden;
+		text-decoration: none;
+			
+		&:before {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%,-50%);
+			font-size: 3em;
+			color: transparent;
+			transition: all 0.3s;
+			cursor: pointer;
+		}
+	}
 	
 	#feed {
 		position: absolute;
@@ -226,7 +244,7 @@ $legend-color: #222;
 				color: $post-color;			
 			}
 		}
-		
+	
 		#posts {
 			position: absolute;
 			transition: all 0.5s;
@@ -299,21 +317,6 @@ $legend-color: #222;
 						width: 100%;
 						line-height: 0;
 						margin: 0;
-						position: relative;
-						@extend .fa;
-						overflow: hidden;
-						text-decoration: none;
-							
-						&:before {
-							position: absolute;
-							top: 50%;
-							left: 50%;
-							transform: translate(-50%,-50%);
-							font-size: 3em;
-							color: transparent;
-							transition: all 0.3s;
-							cursor: pointer;
-						}
 					}
 				}
 				&.headerless {
@@ -331,12 +334,12 @@ $legend-color: #222;
 					a.drill {
 						&.video {
 							@extend .fa-drill-video;
-							&:hover:before {
-								color: rgba($media-bg, 0.75);
-							}
 							&:before {
 								color: rgba(255, 255, 255, 0.5);
 							}
+							&:hover:before {
+								color: rgba($media-bg, 0.75);
+							}
 						}
 					
 						&.picture {
@@ -390,50 +393,69 @@ $legend-color: #222;
 			}
 		}
 	}
-}
 
-#elems {
+	/* Info Window */
-	display: none;
-}
 
-/* Info Window */
+	.info-window {
-
+		h1 {
-.info-window {
+			font-size: 1.2em;
-	h1 {
+			margin: 1em 0;
-		font-size: 1.2em;
+		}
-		margin: 1em 0;
-	}
-	
-	p {
-		font-size: 1.0em;
-		margin: 0.5em 0 0 0;
-	}
-	
-	i {
-		padding-right: 0.5em;
-		font-size: 1.33333333em;
-		line-height: 0.75em;
-		vertical-align: -15%;
-	}
-
-	.pics {
-		margin-top: 0.5em;
 		
-		a {
+		p {
-			display: inline-block;
+			font-size: 1.0em;
-			margin-right: 15px;
+			margin: 0.5em 0 0 0;
+		}
+		
+		i {
+			padding-right: 0.5em;
+			font-size: 1.33333333em;
+			line-height: 0.75em;
+			vertical-align: -15%;
+		}
+	
+		.medias {
+			margin-top: 0.5em;
 			
-			img {
+			a {
-				max-width: 200px;
+				display: inline-block;
-				max-height: 100px;
+				margin-right: 15px;
-				border-radius: 3px;
+	
-				image-orientation: from-image;
+				&.drill {
-				transition: All 0.2s;
+					&.video {
+						@extend .fa-drill-video;
+						&:before {
+							color: rgba(255, 255, 255, 0.5);
+						}
+						&:hover:before {
+							color: rgba(255, 255, 255, 0.75);
+						}
+						
+					}
 				
-				&:hover {
+					&.picture {
-					box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
+						@extend .fa-drill-picture;
+						&:before {
+							color: transparent;
+						}
+						&:hover:before {
+							color: rgba(255, 255, 255, 0.75);
+						}
+					}
+				}
+				
+				img {
+					max-width: 200px;
+					max-height: 100px;
+					border-radius: 3px;
+					image-orientation: from-image;
+					transition: All 0.2s;
 				}
 			}
 		}
 	}
+}
+
+#elems {
+	display: none;
 }