admin-panel: fix CSS bugs and dedupe scoped grid utilities

Approved departure from the port's byte-faithful rule (docs/ADMIN-PORT-PLAN.md
bug rows 4-6), fixed and logged rather than silently changed:
- farsi.less: bold/700 @font-face blocks now load iran-yekan-700.woff2
  instead of the 400 file, so bold text actually renders bold. No source
  file exists for weight 300, so that face is dropped rather than faked.
- format("woff") corrected to format("woff2") on all faces.
- Removed 'font-weight: inherit' from the body,* reset, which was flattening
  every heading's weight.

Also deduped 24 view files that each redeclared .grid-2/.grid-3/.grid-4 in
a scoped <style> block with drifted minmax values, though utilities.less
already defines all three globally. Removed the scoped copies; kept
PromotionForm's genuinely different 0.5rem gap as a small .grid-4--tight
modifier instead of a full redeclaration.

Verified: pnpm build passes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
s.esmaeili
2026-09-14 15:09:11 +03:30
co-authored by Claude Sonnet 5
parent 7e30701570
commit f0de478940
26 changed files with 51 additions and 166 deletions
@@ -126,16 +126,7 @@ onMounted(async () => {
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1rem;
}
/* .grid-2/.grid-3 now come from the global utilities.less (dedup) */
.mt-4 {
margin-top: 1rem;
}
@@ -176,10 +176,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-2 now comes from the global utilities.less (dedup: was a drifted 260px copy) -->
@@ -258,16 +258,8 @@ onMounted(async () => {
</script>
<style scoped>
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
/* .grid-2/.grid-4 now come from the global utilities.less (dedup) */
/* Legacy put the avatar in the first grid cell spanning two rows
(md:row-span-2), with the uploader centred inside it. */
.avatar-cell {
@@ -266,15 +266,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-2/.grid-4 now come from the global utilities.less (dedup) -->
@@ -132,6 +132,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
</style>
<!-- .grid-3 now comes from the global utilities.less (dedup) -->
@@ -352,11 +352,7 @@ onMounted(async () => {
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
/* .grid-3 now comes from the global utilities.less (dedup) */
.grid-1 {
display: grid;
grid-template-columns: 1fr;
@@ -132,10 +132,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-3 now comes from the global utilities.less (dedup) -->
@@ -113,10 +113,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-2 now comes from the global utilities.less (dedup) -->
@@ -47,6 +47,4 @@ async function handleSubmit() {
}
</script>
<style scoped>
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
</style>
<!-- .grid-2 now comes from the global utilities.less (dedup) -->
@@ -228,10 +228,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-3 now comes from the global utilities.less (dedup) -->
@@ -181,11 +181,7 @@ onMounted(async () => {
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
/* .grid-3 now comes from the global utilities.less (dedup) */
.mt-4 {
margin-top: 1rem;
}
+1 -5
View File
@@ -146,11 +146,7 @@ onMounted(async () => {
</script>
<style scoped>
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
/* .grid-2 now comes from the global utilities.less (dedup) */
.mb-4 {
margin-bottom: 1rem;
}
+1 -3
View File
@@ -56,6 +56,4 @@ async function handleSubmit() {
}
</script>
<style scoped>
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
</style>
<!-- .grid-2 now comes from the global utilities.less (dedup) -->
@@ -211,11 +211,7 @@ onMounted(getData);
</script>
<style scoped>
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* .grid-4 now comes from the global utilities.less (dedup) */
.items-end {
align-items: end;
}
@@ -11,7 +11,7 @@
<a-spin :spinning="loading">
<a-form layout="vertical" @submit.prevent="handleSubmit">
<a-card :title="title" class="mb-base">
<div class="grid-4">
<div class="grid-4 grid-4--tight">
<a-form-item label="نوع تخفیف">
<!-- legacy disables the type selector while editing -->
<a-select v-model:value="form.type" :disabled="Boolean(id)" @change="changeType">
@@ -265,9 +265,10 @@ onMounted(async () => {
</script>
<style scoped>
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
/* .grid-4 base now comes from the global utilities.less (dedup); this form's
tighter 0.5rem gap (a real, deliberate visual difference, not a drift) is
kept as a small modifier instead of redeclaring the whole class. */
.grid-4--tight {
gap: 0.5rem;
}
</style>
@@ -75,10 +75,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-3 now comes from the global utilities.less (dedup) -->
+1 -5
View File
@@ -116,9 +116,5 @@ async function handleSubmit() {
width: 100%;
max-width: 900px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
/* .grid-3 now comes from the global utilities.less (dedup) */
</style>
@@ -87,11 +87,7 @@ onMounted(load);
</script>
<style scoped>
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* .grid-4 now comes from the global utilities.less (dedup) */
.summary {
display: flex;
gap: 0.5rem;
@@ -71,11 +71,7 @@ onMounted(load);
</script>
<style scoped>
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* .grid-4 now comes from the global utilities.less (dedup) */
.summary {
display: flex;
gap: 0.5rem;
+1 -1
View File
@@ -109,6 +109,6 @@ async function handleSubmit() {
</script>
<style scoped>
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
/* .grid-2 now comes from the global utilities.less (dedup) */
.mt-4 { margin-top: 1rem; }
</style>
+1 -3
View File
@@ -87,6 +87,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
</style>
<!-- .grid-2 now comes from the global utilities.less (dedup) -->
@@ -207,11 +207,7 @@ onMounted(async () => {
</style>
<style scoped>
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
/* .grid-2 now comes from the global utilities.less (dedup) */
.tree-item {
grid-column: 1 / -1;
}
@@ -158,11 +158,7 @@ onMounted(async () => {
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
/* .grid-3 now comes from the global utilities.less (dedup) */
.hint {
color: #888;
font-size: 12px;
@@ -116,10 +116,4 @@ onMounted(async () => {
});
</script>
<style scoped>
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
</style>
<!-- .grid-3 now comes from the global utilities.less (dedup) -->