refinements

source/community.applications/usr/local/emhttp/plugins/community.applications/Apps.page

@@ -2083,26 +2083,7 @@ function showSidebarApp(apppath,appname) {
 				type:'image',
 				removalDelay: 300,
 				mainClass: 'mfp-fade',
-				zoom: {
+				gallery: true,
-					enabled: true, // By default it's false, so don't forget to enable it
-					duration: 500, // duration of the effect, in milliseconds
-					easing: 'ease-in-out'
-				},
-				callbacks: {
-					open: function() {
-						closeSidebar();
-					},
-					close: function() {
-						showSidebarApp(data.sidebarapppath,data.sidebarappname);
-					}
-				}
-			});
-			$('.video').magnificPopup({
-				closeMarkup: "<button type='button' class='mfp-close narrow'>"+tr("CLOSE")+"</button>",
-				closeOnContentClick: true,
-				type:'iframe',
-				removalDelay: 300,
-				mainClass: 'mfp-fade',
 				zoom: {
 					enabled: true, // By default it's false, so don't forget to enable it
 					duration: 500, // duration of the effect, in milliseconds

source/community.applications/usr/local/emhttp/plugins/community.applications/ca.md5

@@ -1,4 +1,4 @@
-13edf36fc53f119cf495bb6e872ceb46  ./Apps.page
+6ef1aeb2b3411eeefdb7849877c79eb7  ./Apps.page
 83b3f89cd42e8601c7c217d5b4889c81  ./CA_notices.page
 7ee0b23dbd92ed55f611360a983f9565  ./ca_settings.page
 1b49ec9797713ce869ea0c1066a109f2  ./default.cfg
@@ -20,6 +20,6 @@ b398273cf7daa62ab00d2de2336ca25f  ./README.md
 09b5297db02076376519d92e2ce76cc6  ./scripts/showStatistics.php
 4425f8fd4ef662a7dc65cee01de3e419  ./scripts/updatePLG.sh
 2bd671daecaf01549f8cc0202cb184b3  ./scripts/updatePluginSupport.php
-a211eb5dad4d252dcb9261e2ef42df4e  ./skins/Narrow/css.php
+7e117b8329e599baa925132bac72193d  ./skins/Narrow/css.php
 cfa1511913f794c8c5980460dfcdf049  ./skins/Narrow/skin.html
-f0ebd9dd7e14059f62e0e5858eae39b5  ./skins/Narrow/skin.php
+2cf83b67cf9453f0545370c40e25379c  ./skins/Narrow/skin.php

source/community.applications/usr/local/emhttp/plugins/community.applications/skins/Narrow/css.php

@@ -381,9 +381,9 @@ a.popup-donate:hover {color:<?=$donateText?>;background-color:<?=$unRaid66color?
 .repoLinkArea{margin-top:1.5rem;}
 .repoRight{text-align:right;}
 .rightTitle{font-size:2.5rem;margin-top:2rem;margin-bottom:2rem;}
-.screen{border:3px solid; border-radius: 5px 5px 5px 5px; border-color:<?=$unRaid66color?>; vertical-align:top; max-width:200px;max-height:200px;margin:10px;}
+.screen{border:3px solid; border-radius: 5px 5px 5px 5px; border-color:<?=$unRaid66color?>; vertical-align:top; max-width:10rem;height:10rem;margin:10px;}
 .screen:hover{opacity:50%}
-.vid{border:3px solid; border-radius: 5px 5px 5px 5px; border-color:<?=$unRaid66color?>; vertical-align:top; max-width:200px;max-height:200px;margin:10px;}
+.vid{border:3px solid; border-radius: 5px 5px 5px 5px; border-color:<?=$unRaid66color?>; vertical-align:top; max-width:10rem;height:10rem;margin:10px;}
 .vid:hover{opacity:50%}
 .screenshotText{font-size:2rem;}
 .searchArea {z-index:2;width:auto;position:static;}
@@ -468,7 +468,7 @@ table {background-color:transparent;}
 .mfp-content {position: relative;display: inline-block;vertical-align: middle;margin: 0 auto;text-align: left;z-index: 1045; }
 .mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content {width: 100%;cursor: auto; }
 .mfp-ajax-cur {cursor: progress; }
-.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor: -moz-zoom-out;cursor: -webkit-zoom-out;cursor: zoom-out; }
+.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor: -moz-zoom-out;cursor: -webkit-zoom-out;cursor: zoom-out; overflow:unset !important; }
 .mfp-zoom {cursor: pointer;cursor: -webkit-zoom-in;cursor: -moz-zoom-in;cursor: zoom-in; }
 .mfp-auto-cursor .mfp-content {cursor: auto; }
 .mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter {-webkit-user-select: none;-moz-user-select: none;user-select: none; }
@@ -537,7 +537,7 @@ img.mfp-img {width: auto;max-width: 100%;height: auto;display: block;line-height
 /* overlay at start */
 .mfp-fade.mfp-bg {opacity: 0;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
 /* overlay animate in */
-.mfp-fade.mfp-bg.mfp-ready {opacity: 0.8;}
+.mfp-fade.mfp-bg.mfp-ready {opacity: 0.8; overflow:unset !important;}
 /* overlay animate out */
 .mfp-fade.mfp-bg.mfp-removing {opacity: 0;}
 /* content at start */

source/community.applications/usr/local/emhttp/plugins/community.applications/skins/Narrow/skin.php

@@ -1240,7 +1240,25 @@ function displayPopup($template) {
 		</div>
 		</div>
 	";
-
+	if ( $Screenshot || $Photo || $Video) {
+		$ScreenshotTitle = $Screenshot ? tr("Screenshots") : tr("Photos");
+		$pictures = $Screenshot ? $Screenshot : $Photo;
+		if ( ! is_array($pictures) )
+			$pictures = [$pictures];
+		$card .= "<div><div class='screenshotText'>$ScreenshotTitle</div>";
+		foreach ($pictures as $shot) {
+			$card .= "<a class='screenshot mfp-image' href='".trim($shot)."'><img class='screen' src='".trim($shot)."'></img></a>";
+		}
+		if ( $Video ) {
+			if ( ! $Video[1] ) {
+				$Video = [$Video];
+			}
+			foreach ( $Video as $vid ) {
+				$card .= "<a class='screenshot mfp-iframe' href='".trim($vid['Link'])."'><img class='vid' src='".trim($vid['Still'])."'></img></a>";
+			}
+		}
+		$card .= "</div>";
+	}
 	if (is_array($trends) && (count($trends) > 1) ){
 		if ( $downloadtrend ) {
 			$card .= "
@@ -1254,26 +1272,8 @@ function displayPopup($template) {
 			";
 		}
 	}
-	if ( $Screenshot || $Photo || $Video) {
+
-		$ScreenshotTitle = $Screenshot ? tr("Screenshots") : tr("Photos");
+
-		$pictures = $Screenshot ? $Screenshot : $Photo;
-		if ( ! is_array($pictures) )
-			$pictures = [$pictures];
-		$card .= "<div><div class='screenshotText'>$ScreenshotTitle</div>";
-		foreach ($pictures as $shot) {
-			$card .= "<a class='screenshot' href='".trim($shot)."'><img class='screen' src='".trim($shot)."'></img></a>";
-		}
-		if ( $Video ) {
-			if ( ! $Video[1] ) {
-				$Video = [$Video];
-			}
-			foreach ( $Video as $vid ) {
-				$card .= "<a class='video' href='".trim($vid['Link'])."'><img class='vid' src='".trim($vid['Still'])."'></img></a>";
-			}
-		}
-		$card .= "</div>";
-	}
-	$card .= "</div>";
 	if ( $display_changes ) {
 		$card .= "
 			<div class='changelogTitle'>".tr("Change Log")."</div>