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

improve icon placements

Browse Source
This commit is contained in:
usmannasir
2025-04-12 16:01:12 +05:00
parent 4ef261d6f4
commit f08f7aabb6
1 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -805,6 +805,54 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* Simple, direct icon spacing fix */
i.fa {
margin-right: 10px;
}
/* Remove all the complex icon positioning that might be causing conflicts */
.fa {
position: static;
top: auto;
vertical-align: baseline;
display: inline-block;
}
/* Simple button styling */
.btn i.fa {
margin-right: 8px;
}
/* Container status fix */
.workflow-status {
display: inline-flex;
align-items: center;
margin-left: 10px;
}
.workflow-status i.fa {
margin-right: 5px;
}
/* Container header fix */
.container-header h3 {
display: flex;
align-items: center;
}
.container-header h3 > i.fa {
margin-right: 10px;
}
/* Remove any complex flexbox or positioning that might interfere */
.btn {
display: inline-block;
}
.btn span {
display: inline-block;
}
</style> </style>
<script> <script>
@@ -1036,33 +1084,28 @@
<div ng-if="web.environment && (web.environment | filter:'n8n').length > 0" class="container-card"> <div ng-if="web.environment && (web.environment | filter:'n8n').length > 0" class="container-card">
<div class="container-header"> <div class="container-header">
<h3> <h3>
<i class="fa fa-cube" aria-hidden="true"></i> <i class="fa fa-cube"></i>
<span>n8n Container: {$ web.name $}</span> n8n Container: {$ web.name $}
<span class="workflow-status" ng-class="{'active': web.status === 'running', 'error': web.status !== 'running'}"> <span class="workflow-status" ng-class="{'active': web.status === 'running', 'error': web.status !== 'running'}">
<i class="fa" ng-class="{'fa-check-circle fa-running': web.status === 'running', 'fa-times-circle fa-stopped': web.status !== 'running'}" aria-hidden="true"></i> <i class="fa" ng-class="{'fa-check-circle': web.status === 'running', 'fa-times-circle': web.status !== 'running'}"></i>
<span>{$ web.status $}</span> {$ web.status $}
</span> </span>
</h3> </h3>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-success" ng-click="handleAction('start', web)" ng-if="web.status !== 'running'"> <button class="btn btn-success" ng-click="handleAction('start', web)" ng-if="web.status !== 'running'">
<i class="fa fa-play" aria-hidden="true"></i> <i class="fa fa-play"></i>Start
<span>Start</span>
</button> </button>
<button class="btn btn-warning" ng-click="handleAction('restart', web)" ng-if="web.status === 'running'"> <button class="btn btn-warning" ng-click="handleAction('restart', web)" ng-if="web.status === 'running'">
<i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-refresh"></i>Restart
<span>Restart</span>
</button> </button>
<button class="btn btn-danger" ng-click="handleAction('stop', web)" ng-if="web.status === 'running'"> <button class="btn btn-danger" ng-click="handleAction('stop', web)" ng-if="web.status === 'running'">
<i class="fa fa-stop" aria-hidden="true"></i> <i class="fa fa-stop"></i>Stop
<span>Stop</span>
</button> </button>
<button class="btn btn-primary" ng-click="openSettings(web)"> <button class="btn btn-primary" ng-click="openSettings(web)">
<i class="fa fa-cog" aria-hidden="true"></i> <i class="fa fa-cog"></i>Settings
<span>Settings</span>
</button> </button>
<a class="btn btn-info" href="http://{$ location.hostname $}:{$ web.ports['5678/tcp'][0].HostPort $}" target="_blank" ng-if="web.status === 'running'"> <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" aria-hidden="true"></i> <i class="fa fa-external-link"></i>Open n8n
<span>Open n8n</span>
</a> </a>
</div> </div>
</div> </div>