Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2025-11-10 15:26:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix issue with design on n8n page

Browse Source
This commit is contained in:
usmannasir
2025-04-12 15:34:00 +05:00
parent dd0715e9ec
commit c4cd6e3658
1 changed files with 187 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
websiteFunctions/templates/websiteFunctions/DockerSiteHome.html
View File

@@ -7,6 +7,9 @@
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->
<!-- Ensure Font Awesome is loaded -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
:root {
--primary-color: #3498db;
@@ -375,10 +378,11 @@
/* Icon fixes */
.fa {
font-family: 'FontAwesome' !important;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -599,6 +603,86 @@
.fa-times:before {
content: "\f00d"; /* fa-times */
}
/* Ensure proper icon rendering */
.fa-play:before { content: "\f04b"; }
.fa-refresh:before { content: "\f021"; }
.fa-stop:before { content: "\f04d"; }
.fa-cog:before { content: "\f013"; }
.fa-external-link:before { content: "\f08e"; }
.fa-cube:before { content: "\f1b2"; }
.fa-spinner:before { content: "\f110"; }
.fa-plus-circle:before { content: "\f055"; }
.fa-bar-chart-o:before { content: "\f080"; }
.fa-exchange:before { content: "\f0ec"; }
.fa-hdd-o:before { content: "\f0a0"; }
.fa-list:before { content: "\f03a"; }
.fa-file-text-o:before { content: "\f15c"; }
.fa-info-circle:before { content: "\f05a"; }
.fa-warning:before { content: "\f071"; }
.fa-times:before { content: "\f00d"; }
.fa-save:before { content: "\f0c7"; }
.fa-plus:before { content: "\f067"; }
.fa-trash:before { content: "\f1f8"; }
.fa-file:before { content: "\f15b"; }
.fa-user:before { content: "\f007"; }
.fa-question-circle:before { content: "\f059"; }
/* Add proper styling for icon containers */
button i.fa,
a i.fa,
h3 i.fa,
h4 i.fa {
margin-right: 5px;
}
/* Status indicators with explicit styling */
.status-running {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
background-color: #2ecc71 !important;
}
.status-stopped {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
background-color: #e74c3c !important;
}
/* Ensure proper rendering of button icons */
.btn i.fa {
position: relative;
margin-right: 5px;
top: 0;
}
/* Action buttons with consistent styling */
.btn-group .btn {
margin: 0 2px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Fix for icon in title */
.page-title h2 i.fa {
margin-right: 10px;
}
/* Improve container header styling */
.container-header h3 {
margin: 0;
display: flex;
align-items: center;
}
/* Remove redundant icon declarations */
</style>
<script>
@@ -615,7 +699,7 @@
if (!button.hasClass('loading') && !button.hasClass('no-loading')) {
button.addClass('loading');
button.html('<i class="fa fa-spinner fa-spin"></i> Loading...');
button.html('<i class="fa fa-spinner fa-spin"></i> <span>Loading...</span>');
// Reset button after a timeout (for demo purposes)
setTimeout(function() {
@@ -624,6 +708,81 @@
}, 1000);
}
});
// Fix for icon display
function fixFontAwesomeIcons() {
// Check if FontAwesome is properly loaded
if (typeof FontAwesome === 'undefined' || !$('.fa').length) {
// Try to load FontAwesome if missing
if ($('link[href*="font-awesome"]').length === 0) {
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
}
// Apply icon classes explicitly where needed
$('.fa').each(function() {
var classList = $(this).attr('class').split(/\s+/);
var iconClass = '';
$.each(classList, function(index, item) {
if (item.startsWith('fa-')) {
iconClass = item;
return false;
}
});
if (iconClass) {
// Make sure the element has proper styling
$(this).css({
'display': 'inline-block',
'font': 'normal normal normal 14px/1 FontAwesome',
'font-size': 'inherit',
'text-rendering': 'auto',
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale'
});
}
});
}
}
// Run icon fix on document ready and after AJAX calls
fixFontAwesomeIcons();
$(document).ajaxComplete(fixFontAwesomeIcons);
// Angular extension for container action handling
angular.module('WebsitesApp').run(['$rootScope', function($rootScope) {
// Add custom icon rendering for container actions
$rootScope.renderIcon = function(iconName) {
return '<i class="fa fa-' + iconName + '"></i>';
};
// Inject handle action function if needed
if (typeof $rootScope.handleAction === 'undefined') {
$rootScope.handleAction = function(action, container) {
var controller = angular.element(document.querySelector('[ng-controller="ListDockersitecontainer"]')).scope();
if (controller) {
switch(action) {
case 'start':
if (typeof controller.startContainer === 'function') {
controller.startContainer(container.id, container.name);
}
break;
case 'stop':
if (typeof controller.stopContainer === 'function') {
controller.stopContainer(container.id, container.name);
}
break;
case 'restart':
if (typeof controller.restartContainer === 'function') {
controller.restartContainer(container.id, container.name);
}
break;
}
}
};
}
}]);
});
</script>
@@ -792,7 +951,7 @@
<div ng-if="web.environment && (web.environment | filter:'n8n').length > 0" class="container-card">
<div class="container-header">
<h3>
<i class="fa fa-cube"></i> n8n Container: {$ web.name $}
<i class="fa fa-cube"></i> <span>n8n Container: {$ web.name $}</span>
<span class="workflow-status" ng-class="{'active': web.status === 'running', 'error': web.status !== 'running'}">
<span ng-if="web.status === 'running'" class="status-running"></span>
<span ng-if="web.status !== 'running'" class="status-stopped"></span>
@@ -801,19 +960,19 @@
</h3>
<div class="btn-group">
<button class="btn btn-success" ng-click="handleAction('start', web)" ng-if="web.status !== 'running'">
<i class="fa fa-play"></i> Start
<i class="fa fa-play"></i><span> Start</span>
</button>
<button class="btn btn-warning" ng-click="handleAction('restart', web)" ng-if="web.status === 'running'">
<i class="fa fa-refresh"></i> Restart
<i class="fa fa-refresh"></i><span> Restart</span>
</button>
<button class="btn btn-danger" ng-click="handleAction('stop', web)" ng-if="web.status === 'running'">
<i class="fa fa-stop"></i> Stop
<i class="fa fa-stop"></i><span> Stop</span>
</button>
<button class="btn btn-primary" ng-click="openSettings(web)">
<i class="fa fa-cog"></i> Settings
<i class="fa fa-cog"></i><span> Settings</span>
</button>
<a class="btn btn-info" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank" ng-if="web.status === 'running'">
<i class="fa fa-external-link"></i> Open n8n
<i class="fa fa-external-link"></i><span> Open n8n</span>
</a>
</div>
</div>
@@ -822,7 +981,7 @@
<div class="row">
<div class="col-md-6">
<div class="info-box">
<h4><i class="fa fa-bar-chart-o"></i> Resource Usage</h4>
<h4><i class="fa fa-bar-chart-o"></i> <span>Resource Usage</span></h4>
<div class="metrics-grid">
<div class="metric-card">
<h5>Memory Usage</h5>
@@ -856,7 +1015,7 @@
</div>
<div class="info-box">
<h4><i class="fa fa-exchange"></i> Network & Ports</h4>
<h4><i class="fa fa-exchange"></i> <span>Network & Ports</span></h4>
<div ng-if="web.ports" class="table-responsive">
<table class="table table-hover">
<thead>
@@ -885,7 +1044,7 @@
<div class="col-md-6">
<div class="info-box">
<h4><i class="fa fa-hdd-o"></i> Volumes</h4>
<h4><i class="fa fa-hdd-o"></i> <span>Volumes</span></h4>
<div ng-if="web.volumes && web.volumes.length > 0" class="table-responsive">
<table class="table table-hover">
<thead>
@@ -908,7 +1067,7 @@
</div>
<div class="info-box">
<h4><i class="fa fa-list"></i> Environment Variables</h4>
<h4><i class="fa fa-list"></i> <span>Environment Variables</span></h4>
<div ng-if="web.environment && web.environment.length > 0" class="table-responsive">
<table class="table table-hover">
<thead>
@@ -934,9 +1093,9 @@
<div class="info-box">
<h4>
<i class="fa fa-file-text-o"></i> {% trans "Logs" %}
<i class="fa fa-file-text-o"></i> <span>{% trans "Logs" %}</span>
<button class="btn btn-sm btn-primary pull-right" ng-click="getcontainerlog(web.id)">
<i class="fa fa-refresh"></i> Refresh
<i class="fa fa-refresh"></i> <span>Refresh</span>
</button>
</h4>
<textarea class="logs" readonly>{$ web.logs $}</textarea>
@@ -948,7 +1107,7 @@
<div ng-if="!web.environment || (web.environment | filter:'n8n').length === 0" class="container-card">
<div class="container-header">
<h3>
<i class="fa fa-cube"></i> {% trans "Container: " %} {$ web.name $}
<i class="fa fa-cube"></i> <span>{% trans "Container: " %} {$ web.name $}</span>
<span class="workflow-status" ng-class="{'active': web.status === 'running', 'error': web.status !== 'running'}">
<span ng-if="web.status === 'running'" class="status-running"></span>
<span ng-if="web.status !== 'running'" class="status-stopped"></span>
@@ -957,16 +1116,16 @@
</h3>
<div class="btn-group">
<button class="btn btn-success" ng-click="handleAction('start', web)" ng-if="web.status !== 'running'">
<i class="fa fa-play"></i> Start
<i class="fa fa-play"></i><span> Start</span>
</button>
<button class="btn btn-warning" ng-click="handleAction('restart', web)" ng-if="web.status === 'running'">
<i class="fa fa-refresh"></i> Restart
<i class="fa fa-refresh"></i><span> Restart</span>
</button>
<button class="btn btn-danger" ng-click="handleAction('stop', web)" ng-if="web.status === 'running'">
<i class="fa fa-stop"></i> Stop
<i class="fa fa-stop"></i><span> Stop</span>
</button>
<button class="btn btn-primary" ng-click="openSettings(web)">
<i class="fa fa-cog"></i> Settings
<i class="fa fa-cog"></i><span> Settings</span>
</button>
</div>
</div>
@@ -975,7 +1134,7 @@
<div class="row">
<div class="col-md-6">
<div class="info-box">
<h4><i class="fa fa-info-circle"></i> Basic Information</h4>
<h4><i class="fa fa-info-circle"></i> <span>Basic Information</span></h4>
<table class="table">
<tbody>
<tr>
@@ -995,7 +1154,7 @@
</div>
<div class="info-box">
<h4><i class="fa fa-bar-chart-o"></i> Resource Usage</h4>
<h4><i class="fa fa-bar-chart-o"></i> <span>Resource Usage</span></h4>
<div class="mb-3">
<label class="mb-2">Memory Usage: {$ web.memoryUsage $}</label>
<div class="progress">
@@ -1023,7 +1182,7 @@
<div class="col-md-6">
<div class="info-box">
<h4><i class="fa fa-exchange"></i> Network & Ports</h4>
<h4><i class="fa fa-exchange"></i> <span>Network & Ports</span></h4>
<div ng-if="web.ports" class="table-responsive">
<table class="table table-hover">
<thead>
@@ -1050,7 +1209,7 @@
</div>
<div class="info-box">
<h4><i class="fa fa-hdd-o"></i> Volumes</h4>
<h4><i class="fa fa-hdd-o"></i> <span>Volumes</span></h4>
<div ng-if="web.volumes && web.volumes.length > 0" class="table-responsive">
<table class="table table-hover">
<thead>
@@ -1077,7 +1236,7 @@
<div class="row">
<div class="col-md-12">
<div class="info-box">
<h4><i class="fa fa-list"></i> Environment Variables</h4>
<h4><i class="fa fa-list"></i> <span>Environment Variables</span></h4>
<div ng-if="web.environment && web.environment.length > 0" class="table-responsive">
<table class="table table-hover">
<thead>
@@ -1103,9 +1262,9 @@
<div class="info-box">
<h4>
<i class="fa fa-file-text-o"></i> {% trans "Logs" %}
<i class="fa fa-file-text-o"></i> <span>{% trans "Logs" %}</span>
<button class="btn btn-sm btn-primary pull-right" ng-click="getcontainerlog(web.id)">
<i class="fa fa-refresh"></i> Refresh
<i class="fa fa-refresh"></i> <span>Refresh</span>
</button>
</h4>
<textarea class="logs" readonly>{$ web.logs $}</textarea>