austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

chore: improve tariff admin layout

Browse Source
This commit is contained in:
3252a8
2026-06-01 11:55:41 +03:00
parent 63ec3a6152
commit 5bb1400917
4 changed files with 507 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/admin.css
+205 -69
View File
@@ -3125,6 +3125,169 @@
}
}
.admin-tariff-management {
display: grid;
gap: 14px;
}
.admin-tariff-overview-grid {
display: grid;
gap: 14px;
}
.admin-tariff-overview-grid > .admin-card {
min-width: 0;
}
@media (min-width: 980px) {
.admin-tariff-overview-grid {
grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.6fr);
align-items: stretch;
}
}
.admin-tariff-panel-head > div,
.admin-tariff-list-head > div {
min-width: 0;
}
.admin-tariff-panel-head small,
.admin-tariff-list-head small {
max-width: 72ch;
}
.admin-tariff-path {
display: block;
width: fit-content;
max-width: 100%;
margin-top: 6px;
overflow: hidden;
color: var(--admin-dim);
font-family: var(--font-mono);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-tariff-currency-body {
display: grid;
align-content: start;
gap: 14px;
}
.admin-tariff-currency-current {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
padding: 12px;
border: 1px solid var(--admin-border);
border-radius: 8px;
background: var(--admin-surface-2);
}
.admin-tariff-currency-current span {
color: var(--admin-muted);
font-size: 12px;
font-weight: 600;
}
.admin-tariff-currency-current strong {
color: var(--admin-text);
font-family: var(--font-mono);
font-size: 18px;
letter-spacing: 0;
}
.admin-tariff-catalog-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 10px;
}
.admin-tariff-currency-field {
display: grid;
min-width: 0;
gap: 8px;
}
.admin-tariff-currency-field > span {
color: var(--admin-text);
font-size: 13px;
font-weight: 500;
}
.admin-currency-input {
width: 100%;
max-width: 160px;
text-transform: uppercase;
}
.admin-provider-summary {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.admin-provider-currency-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.admin-provider-currency {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--admin-border);
border-radius: 8px;
background: var(--admin-surface-2);
}
.admin-provider-currency.is-supported {
border-color: color-mix(in srgb, var(--success-border) 70%, var(--admin-border));
}
.admin-provider-currency.is-unavailable {
opacity: 0.74;
}
.admin-provider-currency-main {
display: grid;
gap: 3px;
min-width: 0;
}
.admin-provider-currency-main strong,
.admin-provider-currency-main small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-provider-currency-main strong {
color: var(--admin-text);
font-size: 13px;
font-weight: 700;
}
.admin-provider-currency-main small {
color: var(--admin-muted);
font-size: 11px;
}
.admin-provider-currency > .admin-badge {
flex: 0 0 auto;
}
.admin-tariff-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
@@ -3145,6 +3308,7 @@
.admin-tariff-card {
display: grid;
align-content: start;
gap: 12px;
min-width: 0;
border: 1px solid var(--admin-border);
@@ -3168,6 +3332,11 @@
.admin-tariff-top {
justify-content: space-between;
min-width: 0;
}
.admin-tariff-top > div {
min-width: 0;
}
.admin-tariff-title {
@@ -3204,79 +3373,13 @@
.admin-tariff-facts span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: anywhere;
}
.admin-tariff-actions {
flex-wrap: wrap;
}
.admin-tariff-catalog-bar {
display: flex;
align-items: end;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.admin-currency-input {
width: 120px;
text-transform: uppercase;
}
.admin-provider-currency-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.admin-provider-currency {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--admin-border);
border-radius: 8px;
background: var(--admin-surface-2);
}
.admin-provider-currency.is-supported {
border-color: color-mix(in srgb, var(--success-border) 70%, var(--admin-border));
}
.admin-provider-currency.is-unavailable {
opacity: 0.72;
}
.admin-provider-currency div {
display: grid;
gap: 2px;
min-width: 0;
}
.admin-provider-currency strong,
.admin-provider-currency small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-provider-currency strong {
color: var(--admin-text);
font-size: 12px;
font-weight: 700;
}
.admin-provider-currency small {
color: var(--admin-muted);
font-size: 11px;
}
.admin-tariff-settings-card {
margin-top: 14px;
}
@@ -3614,6 +3717,33 @@
padding: 14px;
}
.admin-tariff-panel-head,
.admin-tariff-list-head {
gap: 10px;
}
.admin-provider-summary {
justify-content: flex-start;
}
.admin-tariff-catalog-bar {
grid-template-columns: minmax(0, 1fr);
}
.admin-currency-input {
max-width: none;
}
.admin-provider-currency {
align-items: flex-start;
flex-direction: column;
}
.admin-provider-currency-main strong,
.admin-provider-currency-main small {
white-space: normal;
}
.admin-tariff-card {
padding: 12px;
}
@@ -3626,12 +3756,18 @@
display: none;
}
.admin-tariff-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-tariff-actions .admin-btn {
flex: 1 1 calc(50% - 4px);
width: 100%;
min-width: 0;
}
.admin-tariff-actions .admin-btn[aria-label] {
flex: 0 0 auto;
width: 100%;
}
/* (legacy three-row user-row layout removed in favour of the compact