Nemcio/CyberPanel
1
0
Fork 0
mirror of https://github.com/usmannasir/cyberpanel.git synced 2025-11-11 07:46:10 +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 03:24:27 +05:00
parent c7f7532786
commit 0091b0ef60
1 changed files with 288 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -241,9 +241,10 @@
.n8n-container { .n8n-container {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-left: 4px solid #2ecc71; border-left: 4px solid #2ecc71;
padding: 15px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} }
.n8n-metrics { .n8n-metrics {
@@ -277,6 +278,7 @@
gap: 10px; gap: 10px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 20px; margin-bottom: 20px;
flex-wrap: wrap;
} }
.quick-action-btn { .quick-action-btn {
@@ -313,6 +315,121 @@
background: #fff1f0; background: #fff1f0;
color: #f5222d; color: #f5222d;
} }
/* Additional n8n styling for better layouts */
.n8n-dashboard-section {
background: white;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
padding: 20px;
margin-bottom: 20px;
}
.n8n-section-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.n8n-section-header h4 {
margin: 0;
font-weight: 600;
color: #333;
}
.n8n-container .row {
margin-left: -15px;
margin-right: -15px;
display: flex;
flex-wrap: wrap;
}
.n8n-container .col-md-6 {
padding-left: 15px;
padding-right: 15px;
flex: 0 0 50%;
max-width: 50%;
}
.n8n-empty-state {
text-align: center;
padding: 30px;
background: #f9f9f9;
border-radius: 4px;
}
.n8n-empty-state i {
font-size: 48px;
color: #ccc;
display: block;
margin-bottom: 15px;
}
.n8n-empty-state p {
color: #888;
margin-bottom: 15px;
}
/* Fix for status messages */
.no-data-message {
text-align: center;
padding: 20px;
background: #f9f9f9;
border-radius: 4px;
margin: 15px 0;
}
/* Design fixes for card layouts */
.n8n-card {
background: white;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
margin-bottom: 15px;
}
.n8n-card-header {
padding: 12px 15px;
border-bottom: 1px solid #eee;
background: #f5f7fa;
border-radius: 6px 6px 0 0;
}
.n8n-card-header h5 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.n8n-card-body {
padding: 15px;
}
/* Fix version management styles */
.version-badge {
display: inline-block;
padding: 5px 10px;
border-radius: 50px;
background: #e8f4fd;
color: #1976d2;
font-weight: 600;
}
.up-to-date-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background: #e8f7e8;
border-radius: 4px;
margin: 15px 0;
}
.up-to-date-badge i {
color: #388e3c;
}
</style> </style>
<script> <script>
@@ -598,13 +715,14 @@
</div> </div>
<!-- Workflow Management Dashboard --> <!-- Workflow Management Dashboard -->
<div class="info-box shadow-sm mt-4"> <div class="n8n-dashboard-section mt-4">
<h4 class="border-bottom pb-2 mb-3"> <div class="n8n-section-header">
<i class="fa fa-sitemap"></i> Workflow Management <h4><i class="fa fa-sitemap"></i> Workflow Management</h4>
<button class="btn btn-sm btn-primary float-end" ng-click="refreshWorkflows(web)"> <button class="btn btn-sm btn-primary" ng-click="refreshWorkflows(web)">
<i class="fa fa-refresh"></i> Refresh <i class="fa fa-refresh"></i> Refresh
</button> </button>
</h4> </div>
<div ng-if="web.workflows && web.workflows.length > 0"> <div ng-if="web.workflows && web.workflows.length > 0">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
@@ -661,9 +779,9 @@
</table> </table>
</div> </div>
</div> </div>
<div ng-if="!web.workflows || web.workflows.length === 0" class="text-center py-5"> <div ng-if="!web.workflows || web.workflows.length === 0" class="n8n-empty-state">
<i class="fa fa-info-circle fa-3x text-muted mb-3"></i> <i class="fa fa-info-circle"></i>
<p class="text-muted">No workflows found or container is not running</p> <p>No workflows found or container is not running</p>
<a ng-if="web.status === 'running'" class="btn btn-primary" <a ng-if="web.status === 'running'" class="btn btn-primary"
href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}/workflow/new" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}/workflow/new"
target="_blank"> target="_blank">
@@ -672,23 +790,18 @@
</div> </div>
</div> </div>
<div class="container-fluid p-0 mt-4">
<!-- Backup & Restore Section --> <!-- Backup & Restore Section -->
<div class="row g-4 mb-4"> <div class="n8n-dashboard-section">
<div class="col-md-12"> <div class="n8n-section-header">
<div class="info-box shadow-sm"> <h4><i class="fa fa-cloud-download"></i> Backup & Restore</h4>
<h4 class="border-bottom pb-2 mb-3"> </div>
<i class="fa fa-cloud-download"></i> Backup & Restore
</h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="n8n-card">
<div class="card-header bg-light"> <div class="n8n-card-header">
<h5 class="mb-0"> <h5><i class="fa fa-download"></i> Backup</h5>
<i class="fa fa-download"></i> Backup
</h5>
</div> </div>
<div class="card-body"> <div class="n8n-card-body">
<p>Create a backup of all workflows, credentials, and settings.</p> <p>Create a backup of all workflows, credentials, and settings.</p>
<div class="form-group mb-3"> <div class="form-group mb-3">
<div class="checkbox"> <div class="checkbox">
@@ -709,13 +822,11 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card"> <div class="n8n-card">
<div class="card-header bg-light"> <div class="n8n-card-header">
<h5 class="mb-0"> <h5><i class="fa fa-upload"></i> Restore</h5>
<i class="fa fa-upload"></i> Restore
</h5>
</div> </div>
<div class="card-body"> <div class="n8n-card-body">
<p>Restore from a previous backup.</p> <p>Restore from a previous backup.</p>
<div class="form-group"> <div class="form-group">
<label class="control-label">Select backup file</label> <label class="control-label">Select backup file</label>
@@ -732,20 +843,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row g-4"> </div>
<div class="row">
<!-- Version Management Section --> <!-- Version Management Section -->
<div class="col-md-6"> <div class="col-md-6">
<div class="info-box shadow-sm"> <div class="n8n-dashboard-section">
<h4 class="border-bottom pb-2 mb-3"> <div class="n8n-section-header">
<i class="fa fa-code-fork"></i> Version Management <h4><i class="fa fa-code-fork"></i> Version Management</h4>
</h4> </div>
<div class="version-info mb-4"> <div class="version-info mb-4">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div> <div>
<h5 class="mb-1">Current Version</h5> <h5 class="mb-1">Current Version</h5>
<p class="mb-0 lead"> <div class="version-badge">
<span class="label label-info">{$ web.n8nVersion || 'Unknown' $}</span> {$ web.n8nVersion || 'Unknown' $}
</p> </div>
</div> </div>
<div> <div>
<button class="btn btn-sm btn-info" ng-click="checkForUpdates(web)"> <button class="btn btn-sm btn-info" ng-click="checkForUpdates(web)">
@@ -770,10 +883,8 @@
</div> </div>
</div> </div>
<div ng-if="!web.updateAvailable && web.n8nVersion" class="up-to-date-info mb-4"> <div ng-if="!web.updateAvailable && web.n8nVersion" class="up-to-date-badge">
<div class="alert alert-success">
<i class="fa fa-check-circle"></i> You are running the latest version. <i class="fa fa-check-circle"></i> You are running the latest version.
</div>
</div> </div>
<div class="version-history"> <div class="version-history">
@@ -806,27 +917,33 @@
<!-- Credential Security Dashboard --> <!-- Credential Security Dashboard -->
<div class="col-md-6"> <div class="col-md-6">
<div class="info-box shadow-sm"> <div class="n8n-dashboard-section">
<h4 class="border-bottom pb-2 mb-3"> <div class="n8n-section-header">
<i class="fa fa-lock"></i> Credential Management <h4><i class="fa fa-lock"></i> Credential Management</h4>
<button class="btn btn-sm btn-primary float-end" ng-click="refreshCredentials(web)"> <button class="btn btn-sm btn-primary" ng-click="refreshCredentials(web)">
<i class="fa fa-refresh"></i> Refresh <i class="fa fa-refresh"></i> Refresh
</button> </button>
</h4> </div>
<div ng-if="web.credentials && web.credentials.length > 0"> <div ng-if="web.credentials && web.credentials.length > 0">
<div class="credential-stats d-flex justify-content-around mb-4"> <div class="row text-center mb-4">
<div class="text-center"> <div class="col-md-4">
<h5>{$ web.credentials.length $}</h5> <div class="metric-card">
<p class="text-muted mb-0">Total Credentials</p> <h5>Total Credentials</h5>
<div class="value">{$ web.credentials.length $}</div>
</div> </div>
<div class="text-center">
<h5>{$ web.unusedCredentials.length $}</h5>
<p class="text-muted mb-0">Unused Credentials</p>
</div> </div>
<div class="text-center"> <div class="col-md-4">
<h5>{$ web.insecureCredentials.length $}</h5> <div class="metric-card">
<p class="text-muted mb-0">Insecure Credentials</p> <h5>Unused</h5>
<div class="value">{$ web.unusedCredentials.length $}</div>
</div>
</div>
<div class="col-md-4">
<div class="metric-card">
<h5>Insecure</h5>
<div class="value">{$ web.insecureCredentials.length $}</div>
</div>
</div> </div>
</div> </div>
@@ -880,7 +997,7 @@
</table> </table>
</div> </div>
<div class="credential-actions text-right mt-3"> <div class="text-right mt-3">
<a class="btn btn-success" <a class="btn btn-success"
href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}/credentials/new" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}/credentials/new"
target="_blank"> target="_blank">
@@ -893,9 +1010,9 @@
</div> </div>
</div> </div>
<div ng-if="!web.credentials || web.credentials.length === 0" class="text-center py-5"> <div ng-if="!web.credentials || web.credentials.length === 0" class="n8n-empty-state">
<i class="fa fa-lock fa-3x text-muted mb-3"></i> <i class="fa fa-lock"></i>
<p class="text-muted">No credentials found or container is not running</p> <p>No credentials found or container is not running</p>
<a ng-if="web.status === 'running'" class="btn btn-primary" <a ng-if="web.status === 'running'" class="btn btn-primary"
href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}/credentials/new" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}/credentials/new"
target="_blank"> target="_blank">