controlPanel/web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch SuperAdmin UI to IRANSans and fix mobile overflow.

Browse Source 
Use iranSans woff2 globally and harden SMS/layout grids so page heads and stats stay inside the viewport on small screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-08-08 10:22:35 +03:30
co-authored by Cursor
parent 99c219e57e
commit ab4d9ef133
7 changed files with 195 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/PluginPanelPage.vue
+1 -1
View File
@@ -174,7 +174,7 @@ onMounted(loadTenants)
.tenant-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
gap: 10px;
}
src/pages/ServerPanelPage.vue
+1 -1
View File
@@ -199,7 +199,7 @@ onMounted(loadTenants)
.tenant-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
gap: 10px;
}
src/pages/SmsPanelPage.vue
+1 -1
View File
@@ -174,7 +174,7 @@ onMounted(loadTenants)
.tenant-group-head span { color: #8b95a8; font-size: 0.82rem; }
.tenant-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
gap: 8px;
}
.tenant-card {
src/pages/SmsTenantPage.vue
+148 -40
View File
@@ -436,11 +436,13 @@ onMounted(async () => {
<div class="page-head-text">
<h1 class="page-title">{{ tenant?.nameFa || 'پنل پیامک' }}</h1>
<p class="page-sub">مدیریت کیف پول، تعرفه و گزارش ارسال پیامک</p>
<div v-if="tenant" class="page-head-meta">
<a-tag :color="tenant.product === 'hamkar' ? 'cyan' : 'orange'">
{{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}
</a-tag>
<span class="domain">{{ tenant.domain }}</span>
</div>
</div>
<a-tag v-if="tenant" :color="tenant.product === 'hamkar' ? 'cyan' : 'orange'">
{{ tenant.product === 'hamkar' ? 'همکار' : 'خانگی' }}
</a-tag>
<span v-if="tenant" class="domain">{{ tenant.domain }}</span>
</div>
<a-spin :spinning="loading">
@@ -594,6 +596,7 @@ onMounted(async () => {
v-else-if="periodReport?.byProvider?.length"
size="small"
:pagination="false"
:scroll="{ x: true }"
:data-source="periodReport.byProvider"
:columns="providerReportColumns"
row-key="provider"
@@ -623,6 +626,7 @@ onMounted(async () => {
size="small"
:loading="chargeReportLoading"
:pagination="false"
:scroll="{ x: true }"
:data-source="chargeReport.items"
:columns="chargeReportColumns"
row-key="id"
@@ -654,6 +658,7 @@ onMounted(async () => {
:loading="logsLoading"
:columns="logColumns"
:data-source="logsRows"
:scroll="{ x: true }"
row-key="id"
:pagination="{
current: logsPage,
@@ -685,6 +690,7 @@ onMounted(async () => {
:loading="ledgerLoading"
:columns="ledgerColumns"
:data-source="ledgerRows"
:scroll="{ x: true }"
row-key="id"
:pagination="{
current: ledgerPage,
@@ -707,6 +713,32 @@ onMounted(async () => {
.sms-page {
display: grid;
gap: 14px;
width: 100%;
max-width: 100%;
min-width: 0;
}
.sms-page :deep(.ant-spin-nested-loading),
.sms-page :deep(.ant-spin-container) {
width: 100%;
max-width: 100%;
min-width: 0;
}
.sms-page :deep(.ant-table-wrapper) {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sms-page :deep(.ant-tabs) {
max-width: 100%;
min-width: 0;
}
.sms-page :deep(.ant-tabs-nav) {
margin-bottom: 12px;
}
.page-head {
@@ -715,33 +747,52 @@ onMounted(async () => {
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
width: 100%;
min-width: 0;
}
.page-head-text {
flex: 1;
min-width: 180px;
flex: 1 1 160px;
min-width: 0;
}
.page-head-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 8px;
min-width: 0;
}
.domain {
color: #8b95a8;
font-size: 0.85rem;
direction: ltr;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-all;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: 1fr;
gap: 12px;
width: 100%;
min-width: 0;
}
.stat-card {
background: #fff;
border: 1px solid #e8eef5;
border-radius: 16px;
padding: 16px;
padding: 14px;
display: grid;
gap: 8px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.stat-card span {
@@ -750,8 +801,9 @@ onMounted(async () => {
}
.stat-card strong {
font-size: 1.45rem;
font-size: 1.25rem;
color: #0f172a;
overflow-wrap: anywhere;
}
.stat-card small,
@@ -760,6 +812,7 @@ onMounted(async () => {
font-size: 0.82rem;
font-weight: 600;
color: #64748b;
overflow-wrap: anywhere;
}
.stat-label-row {
@@ -767,6 +820,8 @@ onMounted(async () => {
justify-content: space-between;
gap: 8px;
align-items: center;
flex-wrap: wrap;
min-width: 0;
}
.stat-card.healthy {
@@ -805,8 +860,12 @@ onMounted(async () => {
background: #fff;
border: 1px solid #e8eef5;
border-radius: 18px;
padding: 16px;
padding: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: clip;
}
.panel-card h2 {
@@ -818,7 +877,7 @@ onMounted(async () => {
.mgmt-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 12px;
}
@@ -829,6 +888,8 @@ onMounted(async () => {
padding: 14px;
display: grid;
gap: 12px;
min-width: 0;
max-width: 100%;
}
.subcard h3 {
@@ -856,26 +917,21 @@ onMounted(async () => {
.fields-2 {
display: grid;
gap: 10px;
}
.inline-actions {
grid-template-columns: 1fr auto;
align-items: center;
}
.charge-grid {
grid-template-columns: 1fr 1.2fr auto;
align-items: center;
width: 100%;
min-width: 0;
}
.filter-row {
grid-template-columns: 1fr 1fr auto auto;
align-items: center;
margin-bottom: 12px;
}
.fields-2 {
grid-template-columns: 1fr 1fr;
.inline-actions,
.charge-grid,
.filter-row,
.threshold-grid,
.fields-2,
.mgmt-row {
grid-template-columns: 1fr;
}
.block-row {
@@ -883,11 +939,18 @@ onMounted(async () => {
justify-content: space-between;
gap: 12px;
align-items: center;
flex-wrap: wrap;
border-radius: 14px;
border: 1px solid #bbf7d0;
background: #f0fdf4;
padding: 14px;
margin-bottom: 12px;
min-width: 0;
}
.block-row > div {
flex: 1 1 200px;
min-width: 0;
}
.block-row.blocked {
@@ -905,11 +968,6 @@ onMounted(async () => {
margin-bottom: 12px;
}
.threshold-grid {
grid-template-columns: 1fr 1fr auto;
align-items: end;
}
.tone-label {
display: inline-flex;
align-items: center;
@@ -930,7 +988,7 @@ onMounted(async () => {
.report-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 12px;
}
@@ -941,6 +999,7 @@ onMounted(async () => {
padding: 12px;
display: grid;
gap: 4px;
min-width: 0;
}
.report-summary span {
@@ -952,18 +1011,67 @@ onMounted(async () => {
font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
.stat-grid,
.mgmt-row,
.charge-grid,
.filter-row,
.threshold-grid,
.fields-2,
.money-input,
.filter-row :deep(.jalali-date-field),
.filter-row :deep(.ant-input),
.filter-row :deep(.ant-btn),
.inline-actions :deep(.ant-input),
.charge-grid :deep(.ant-input),
.charge-grid :deep(.ant-btn) {
width: 100%;
max-width: 100%;
min-width: 0;
}
@media (min-width: 640px) {
.stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.report-summary {
grid-template-columns: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fields-2 {
grid-template-columns: 1fr 1fr;
}
.stat-card strong {
font-size: 1.35rem;
}
}
@media (min-width: 900px) {
.mgmt-row {
grid-template-columns: 1fr 1fr;
}
.inline-actions {
grid-template-columns: 1fr;
grid-template-columns: 1fr auto;
align-items: center;
}
.charge-grid {
grid-template-columns: 1fr 1.2fr auto;
align-items: center;
}
.filter-row {
grid-template-columns: 1fr 1fr auto auto;
align-items: center;
}
.threshold-grid {
grid-template-columns: 1fr 1fr auto;
align-items: end;
}
}
@media (min-width: 1100px) {
.stat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-card {
padding: 16px;
}
.stat-card strong {
font-size: 1.45rem;
}
.panel-card {
padding: 16px;
}
}
</style>