Simpler skinning and card coding

This commit is contained in:
Squidly271 2021-12-24 13:45:33 -05:00
parent 1cab4cf730
commit 6ea7fb57df
6 changed files with 41 additions and 30 deletions

Binary file not shown.

View File

@ -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() {
var repository = $(this).data("repository");
showRepoPopup(repository);
});
$('body').on("click",".ca_appPopup,.cardDescription,.homespotlightIconArea",function() {
if ( $(this).hasClass("dockerCardBackground") || $(this).hasClass("noClick") )
return;
if ( $(".dropdown-menu").is(":visible") ) {
$(".dropdown-menu").hide();
$('body').on("click",".ca_holder",function(event) {
if (data.actions) {
data.actions = false;
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 appname = $(this).data("appname");
appname = stripTags(appname);
showSidebarApp(apppath,appname);
var apppath = $(this).data("apppath");
var appname = $(this).data("appname");
appname = stripTags(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({

View File

@ -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

View File

@ -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;}

View File

@ -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>

BIN
webImages/Untitled.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB