Add button icons on all drill downs

masks/project.html

@@ -481,14 +481,14 @@ function getPost(asPost) {
 				.data('id', asPost.id_message)
 				.append($('<p>').addIcon('fa-coords', true).append(asPost.lat_dms+' '+asPost.lon_dms))
 				.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
-				.append(
-					$('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)})
-						.click(function(){
-							var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
-							self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
-							if(!oMarker.isPopupOpen()) oMarker.openPopup();
-							if(self.tmp('mobile')) toggleFeedPanel(false);
-						})
+				.append($('<a>', {'class':'drill'})
+					.append($('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)}))
+					.click(function(){
+						var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
+						self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
+						if(!oMarker.isPopupOpen()) oMarker.openPopup();
+						if(self.tmp('mobile')) toggleFeedPanel(false);
+					})
 				)
 				.hover(
 					function(){
@@ -505,9 +505,8 @@ function getPost(asPost) {
 			var bVideo = (asPost.subtype == 'video');
 			var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':' et prise le '+asPost.taken_on_formatted+self.tmp('site_tz_notice');
 			var $Image = $('<img>', {'src': asPost.thumb_path, title: bVideo?'Click pour voir la vidéo':'Click pour zoomer'});
-			
 			$Body = $('<a>', {
-				'class': (bVideo?'video':'picture'),
+				'class': 'drill '+(bVideo?'video':'picture'),
 				href: asPost.pic_path,
 				'data-video': (bVideo?'true':'false'),
 				'data-lightbox': 'post-pictures',

style/_fa.scss

@@ -48,7 +48,9 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
 .#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
-.#{$fa-css-prefix}-play:before { content: fa-content($fa-var-play-circle); }
+.#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
+.#{$fa-css-prefix}-drill-picture:before { content: fa-content($fa-var-search); }
+.#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
 
 /* Feed - Poster */
 .#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }

style/_mask_project.scss

@@ -293,6 +293,28 @@ $legend-color: #222;
 				.body {
 					clear: both;
 					padding: 0em 1em 0.5em;
+					
+					a.drill {
+						display: inline-block;
+						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 {
 					.header {
@@ -306,31 +328,21 @@ $legend-color: #222;
 					background: $media-bg;
 					color: $media-color;
 					
-					a {
-						display: inline-block;
-						width: 100%;
-						line-height: 0;
-						margin: 0;
-						position: relative;
-						
+					a.drill {
 						&.video {
-							@extend .fa;
-							@extend .fa-play;
-							overflow: hidden;
-							
-							&:hover::before {
-								color: white;
+							@extend .fa-drill-video;
+							&:hover:before {
+								color: rgba($media-bg, 0.75);
 							}
+							&:before {
+								color: rgba(255, 255, 255, 0.5);
+							}
+						}
 					
-							&::before {
-								position: absolute;
-								top: 50%;
-								transform: translate(-50%,-50%);
-								color: #CCC;
-								left: 50%;
-								text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
-								font-size: 3em;
-								text-decoration: none;
+						&.picture {
+							@extend .fa-drill-picture;
+							&:hover:before {
+								color: rgba($media-bg, 0.75);
 							}
 						}
 					}
@@ -351,6 +363,13 @@ $legend-color: #222;
 						margin: 0.5em 0;
 					}
 				
+					a.drill {
+						@extend .fa-drill-message;
+						&:hover:before {
+							color: rgba($message-bg, 0.75);
+						}
+					}
+					
 					.staticmap {
 						width: 100%;
 						border-radius: 3px;