Refactors page styles into separate CSS files
Extracts inline styles from Razor pages into modular CSS files Adds new CSS files for components and specific page styles Improves code organization and maintainability by separating styling concerns Updates layout to include new CSS files and optional style sections
This commit is contained in:
Janus C. H. Knudsen
parent
77d35ff965
commit
08f8150064
12 changed files with 577 additions and 555 deletions
|
|
@ -4,6 +4,10 @@
|
|||
ViewData["Title"] = "Forgejo Actions";
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="~/css/pages/forgejo.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">CI/CD Actions</h1>
|
||||
<p class="page-subtitle">Workflow runs og statistik</p>
|
||||
|
|
@ -201,74 +205,6 @@ else
|
|||
</div>
|
||||
}
|
||||
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dashboard-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
@@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.running-card {
|
||||
border-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.running-card .card-header {
|
||||
background: linear-gradient(90deg, rgba(240, 165, 0, 0.1), transparent);
|
||||
}
|
||||
|
||||
.rate-bar {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 6px;
|
||||
background: var(--border-color);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rate-fill {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.rate-fill.good { background: var(--success-color); }
|
||||
.rate-fill.warn { background: var(--warning-color); }
|
||||
.rate-fill.bad { background: var(--danger-color); }
|
||||
|
||||
.rate-text {
|
||||
font-size: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.failed-row {
|
||||
background: rgba(220, 53, 69, 0.05);
|
||||
}
|
||||
|
||||
.success { color: var(--success-color); }
|
||||
.warning { color: var(--warning-color); }
|
||||
|
||||
@@media (max-width: 1400px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@functions {
|
||||
string FormatDuration(TimeSpan? duration)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
ViewData["Title"] = "Forgejo Oversigt";
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="~/css/pages/forgejo.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Forgejo Oversigt</h1>
|
||||
<p class="page-subtitle">Git repositories og CI/CD status</p>
|
||||
|
|
@ -285,163 +289,6 @@ else
|
|||
</div>
|
||||
}
|
||||
|
||||
<style>
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dashboard-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-detail {
|
||||
font-size: 10px;
|
||||
color: var(--muted-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
@@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.running-card {
|
||||
border-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.running-card .card-header {
|
||||
background: linear-gradient(90deg, rgba(240, 165, 0, 0.1), transparent);
|
||||
}
|
||||
|
||||
.error-card {
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.error-card .card-header {
|
||||
background: linear-gradient(90deg, rgba(220, 53, 69, 0.1), transparent);
|
||||
}
|
||||
|
||||
.stat-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-bar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-bar-label {
|
||||
width: 70px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.stat-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--border-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stat-bar-value {
|
||||
width: 30px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ci-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ci-stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ci-stat-value.success { color: var(--success-color); }
|
||||
.ci-stat-value.danger { color: var(--danger-color); }
|
||||
|
||||
.ci-stat-label {
|
||||
font-size: 10px;
|
||||
color: var(--muted-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ci-rate-bar {
|
||||
height: 8px;
|
||||
background: var(--danger-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ci-rate-success {
|
||||
height: 100%;
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.ci-rate-label {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: var(--muted-color);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.compact-list {
|
||||
padding: 8px 16px !important;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
font-size: 10px;
|
||||
color: var(--muted-color);
|
||||
margin-top: 4px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.success { color: var(--success-color); }
|
||||
.danger { color: var(--danger-color); }
|
||||
|
||||
@@media (max-width: 1200px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@functions {
|
||||
string FormatSize(long bytes)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
ViewData["Title"] = "Forgejo Repositories";
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="~/css/pages/forgejo.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">Repositories</h1>
|
||||
<p class="page-subtitle">Alle repositories med backup status</p>
|
||||
|
|
@ -144,74 +148,6 @@ else
|
|||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.filter-tab:hover {
|
||||
background: var(--hover-bg);
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color);
|
||||
border-color: var(--text-color);
|
||||
}
|
||||
|
||||
.repo-desc {
|
||||
font-size: 10px;
|
||||
color: var(--muted-color);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.backup-detail {
|
||||
font-size: 10px;
|
||||
color: var(--muted-color);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.warning-card {
|
||||
border-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.warning-card .card-header {
|
||||
background: linear-gradient(90deg, rgba(240, 165, 0, 0.1), transparent);
|
||||
}
|
||||
|
||||
.missing-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.missing-repo {
|
||||
background: rgba(240, 165, 0, 0.1);
|
||||
border: 1px solid var(--warning-color);
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.repo-row.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.success { color: var(--success-color); }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function filterRepos(filter) {
|
||||
// Update active tab
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue