Simpler skinning and card coding

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

@@ -226,7 +226,9 @@ $(function(){
 	$(".sidebarClose").on("click",function(e) {
 		closeSidebar();
 	});
-
+	$(".mainArea").on("click",".actionsButtonContext,.actionsButton,.supportButton,.supportButtonCardContext",function() {
+		data.actions = true;
+	});
 	$("#searchBox").keydown(function(e) {
 		if (e.which === 13) {
 			searchBoxAwesomplete.close();
@@ -346,25 +348,29 @@ $(function(){
 		}
 	});
 
-	$("body").on("click",".repoPopup,.ca_repoinfo,.ca_reporeadmore,.ca_repoFromPopUp,.cardDescriptionRepo", function() {
+	$('body').on("click",".ca_holder",function(event) {
-		var repository = $(this).data("repository");
+		if (data.actions) {
-		showRepoPopup(repository);
+			data.actions = false;
-	});
-
-
-	$('body').on("click",".ca_appPopup,.cardDescription,.homespotlightIconArea",function() {
-		if ( $(this).hasClass("dockerCardBackground") || $(this).hasClass("noClick") )
-			return;
-		if ( $(".dropdown-menu").is(":visible") ) {
-			$(".dropdown-menu").hide();
 			return;
 		}
+		data.actions = false;
+		event.stopPropagation();
+		if ( $(this).hasClass("ca_repoPopup") ) {
+			var repository = $(this).data("repository");
+			showRepoPopup(repository);
+		} else {
+			if ( $(this).hasClass("dockerCardBackground") || $(this).hasClass("noClick") )
+				return;
+			if ( $(".dropdown-menu").is(":visible") ) {
+				$(".dropdown-menu").hide();
+				return;
+			}
 
-		var apppath = $(this).data("apppath");
+			var apppath = $(this).data("apppath");
-		var appname = $(this).data("appname");
+			var appname = $(this).data("appname");
-		appname = stripTags(appname);
+			appname = stripTags(appname);
-
+			showSidebarApp(apppath,appname);
-		showSidebarApp(apppath,appname);
+		}
 	});
 
 	$('body').on("click",".dockerPopup", function() {
@@ -1210,6 +1216,7 @@ function pinnedApps() {
 }
 
 function displayTags(leadTemplate,rename=false) {
+	event.stopPropagation();
 	closeSidebar();
 	post({action:'displayTags',leadTemplate:leadTemplate,noSpinner:true,rename:rename},function(result) {
 		disableSearch();
@@ -1898,6 +1905,7 @@ function setFavourite(button) {
 }
 
 function popupInstallXML(xml,type,comment="") {
+	event.stopPropagation();
 	saveState();
 	if ( $.trim(comment) ) {
 		swal({

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

@@ -1,4 +1,4 @@
-e6dbe2dee5da25c4acd83fb6619c46c2  ./Apps.page
+8ec96e4413a11691820a9ccc725857ae  ./Apps.page
 83b3f89cd42e8601c7c217d5b4889c81  ./CA_notices.page
 18ded5848ac35ffae0e8e0fc8ed3c512  ./ca_settings.page
 ed2883d6c44c19304c431079596a1731  ./default.cfg
@@ -20,6 +20,6 @@ c0b2c395a14863960438e4622f20f6ff  ./scripts/notices.php
 e3dc9ed23036a09d69d5cd5c3111751e  ./scripts/showStatistics.php
 4425f8fd4ef662a7dc65cee01de3e419  ./scripts/updatePLG.sh
 2bd671daecaf01549f8cc0202cb184b3  ./scripts/updatePluginSupport.php
-b15e910eb0b7d38d5253a99bf0ab7ba8  ./skins/Narrow/css.php
+e847d17faa1276c97ce3702f57ac56ea  ./skins/Narrow/css.php
 cfa1511913f794c8c5980460dfcdf049  ./skins/Narrow/skin.html
-44912f026b88f862384922c49b0b0f0c  ./skins/Narrow/skin.php
+1612dbb7b05d8d48e61b43c24e506659  ./skins/Narrow/skin.php

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

@@ -193,8 +193,10 @@ a.ca_fa-delete{text-decoration:none;margin-left:1rem;font-size:2rem;margin-top:-
 .ca_favouriteRepo{margin-right:1rem;margin-bottom:1rem;font-size:1.5rem;line-height:2rem;cursor:pointer;display:inline-block;color:<?=$supportPopupText?>!important;background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.4) 100%),-webkit-linear-gradient(left, lighten(<?=$donateBackground?>, 15%) 0%, <?=$donateBackground?> 50%, lighten(<?=$donateBackground?>, 15%) 100%);  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%),linear-gradient(to right, lighten(#E68321, 15%) 0%, #E68321 50%, lighten(#E68321, 15%) 100%);  background-position: 0 0;  background-size: 100% 100%;  border-radius: 15px;  color: #fff;  padding: 1px 10px 1px 10px;}
 .ca_favouriteRepo:hover{text-decoration:none;background-color:<?=$unRaid66color?>;}
 .ca_forum::before{content:"\f1cd";font-family:fontAwesome;}
-.ca_holder{background-color:<?=$templateBackground?>;display:inline-block;float:left;height:20rem;min-width:24rem;max-width:24rem;overflow:hidden;padding:20px;margin-top:0px;margin-bottom:1rem;margin-right:1rem;border:1px solid;border-color:<?=$borderColor?>;}
+.ca_holder{background-color:<?=$templateBackground?>;display:inline-block;float:left;height:20rem;min-width:24rem;max-width:24rem;overflow:hidden;padding:20px;margin-top:0px;margin-bottom:1rem;margin-right:1rem;border:1px solid;border-color:<?=$borderColor?>;cursor:pointer;}
 .ca_holder:hover{background-color:<?=$templateHoverBackground?>;}
+.dockerHubHolder {background-color:<?=$templateBackground?>;display:inline-block;float:left;height:20rem;min-width:24rem;max-width:24rem;overflow:hidden;padding:20px;margin-top:0px;margin-bottom:1rem;margin-right:1rem;border:1px solid;border-color:<?=$borderColor?>;cursor:pointer;}
+.dockerHubHolder:hover{background-color:<?=$templateHoverBackground?>;}
 .ca_holderFav{background-color:<?=$templateFavourite?> !important;}
 .ca_homeTemplates{display:flex;flex-wrap:wrap;height:24.5rem;overflow:hidden;}
 .ca_homeTemplatesHeader{font-size:2rem;margin-top:1rem;margin-bottom:0.5rem;}

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

@@ -935,6 +935,7 @@ function displayCard($template) {
 			$supportContext[] = array("icon"=>"ca_fa-support","link"=>$Support,"text"=> $SupportLanguage ?: tr("Support Forum"));
 
 	} else {
+		$holderClass='repositoryCard';
 		$cardClass = "ca_repoinfo";
 		$ID = str_replace(" ","",$RepoName);
 		$supportContext = array();
@@ -962,15 +963,15 @@ function displayCard($template) {
 	if ( $DockerHub ) {
 		$backgroundClickable = "dockerCardBackground";
 		$card .= "
-			<div class='ca_holder $class'>
+			<div class='dockerHubHolder $class $popupType'>
 			<div class='ca_bottomLine $bottomClass'>
 			<div class='infoButton_docker dockerPopup' data-dockerHub='$DockerHub'>".tr("Docker Hub")."</div>";
 	} else {
 		$backgroundClickable = "ca_backgroundClickable";
 		$card .= "
-			<div class='ca_holder $class'>
+			<div class='ca_holder $class $popupType $holderClass' data-apppath='$Path' data-appname='$Name' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'>
 			<div class='ca_bottomLine $bottomClass'>
-			<div class='infoButton $cardClass' data-apppath='$Path' data-appname='$Name' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'>".tr("Info")."</div>
+			<div class='infoButton $cardClass'>".tr("Info")."</div>
 		";
 	}
 	if ( count($supportContext) == 1)
@@ -990,9 +991,9 @@ function displayCard($template) {
 	$card .= "<span class='$appType' title='".htmlentities($typeTitle)."'></span>";
 	if ( $ca_fav ) {
 		$favText = $RepositoryTemplate ? tr("This is your favourite repository") : tr("This application is from your favourite repository");
-		$card .= "<span class='favCardBackground' title='".htmlentities($favText)."' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'></span>";
+		$card .= "<span class='favCardBackground' title='".htmlentities($favText)."'></span>";
 	}	else
-		$card .= "<span class='favCardBackground' title='".htmlentities($favText)."' style='display:none;' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'></span>";
+		$card .= "<span class='favCardBackground' title='".htmlentities($favText)."' style='display:none;'></span>";
 	if ( ! $Pinned )
 		$pinStyle = "display:none;";
 
@@ -1005,7 +1006,7 @@ function displayCard($template) {
 		$card .= "<input class='ca_multiselect ca_tooltip' title='".tr("Check off to select multiple reinstalls")."' type='checkbox' data-name='$previousAppName' data-humanName='$Name' data-type='$type' data-deletepath='$InstallPath' $checked>";
 	}
 	$card .= "</div>";
-	$card .= "<div class='$cardClass $backgroundClickable' data-apppath='$Path' data-appname='$Name' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'>";
+	$card .= "<div class='$cardClass $backgroundClickable'>";
 	$card .= "<div class='ca_iconArea'>";
 	if ( $DockerHub )
 		$imageNoClick = "noClick";
@@ -1017,7 +1018,7 @@ function displayCard($template) {
 	else {
 		$displayIcon = $template['IconFA'] ?: $template['Icon'];
 		$displayIconClass = startsWith($displayIcon,"icon-") ? $displayIcon : "fa fa-$displayIcon";
-		$card  .= "<i class='ca_appPopup $displayIconClass displayIcon $imageNoClick' data-apppath='$Path' data-appname='$Name'></i>";
+		$card  .= "<i class='ca_appPopup $displayIconClass displayIcon $imageNoClick'></i>";
 	}
 	$card .= "</div>";
 
@@ -1067,10 +1068,10 @@ function displayCard($template) {
 	$ovr = str_replace("\n","<br>",$ovr);
 	$Overview = str_replace("<br>"," ",$ovr);
 	$descClass= $RepositoryTemplate ? "cardDescriptionRepo" : "cardDescription";
-	$card .= "<div class='$descClass $backgroundClickable' data-apppath='$Path' data-appname='$Name' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'><div class='cardDesc'>$Overview</div></div>";
+	$card .= "<div class='$descClass $backgroundClickable'><div class='cardDesc'>$Overview</div></div>";
 	if ( $RecommendedDate ) {
 		$card .= "
-			<div class='homespotlightIconArea ca_center' data-apppath='$Path' data-appname='$Name' data-repository='".htmlentities($RepoName,ENT_QUOTES)."'>
+			<div class='homespotlightIconArea ca_center''>
 	<div><img class='spotlightIcon' src='{$caPaths['SpotlightIcon']}'></img></div>
 				<div class='spotlightDate'>".tr(date("M Y",$RecommendedDate),0)."</div>
 			</div>