Skip to content

M
maf-gateway-revamp
Commit 275a55d5 by krds-arun
Options

fix(panel): improve module dashboard typography on mobile/tablet 

Use clamp() font sizing for titles/subtitles and tighten table/menu text for better readability across small screens.

Made-with: Cursor
parent 30587791
Showing with 35 additions and 24 deletions
components/panel/admin/AdminDashboard/admin-dashboard.css
......@@ -11,7 +11,7 @@
.maf-adminDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-adminDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......
components/panel/audits/AuditsDashboard/audits-dashboard.css
......@@ -11,7 +11,7 @@
.maf-auditDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-auditDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......@@ -49,7 +49,7 @@
display: grid;
grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr;
gap: 10px;
font-size: 0.75rem;
font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
......@@ -65,6 +65,7 @@
background: rgba(255, 255, 255, 0.84);
padding: 10px 10px;
color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.96rem);
}
.maf-auditDash__cellTitle {
......@@ -81,7 +82,7 @@
border: 1px solid rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.1);
color: rgba(21, 128, 61, 0.92);
font-size: 0.75rem;
font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900;
letter-spacing: 0.04em;
}
......
components/panel/checklist/ChecklistDashboard/checklist-dashboard.css
......@@ -11,7 +11,7 @@
.maf-checkDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-checkDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......@@ -49,7 +49,7 @@
display: grid;
grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr;
gap: 10px;
font-size: 0.75rem;
font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
......@@ -65,6 +65,7 @@
background: rgba(255, 255, 255, 0.84);
padding: 10px 10px;
color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.96rem);
}
.maf-checkDash__cellTitle {
......@@ -81,7 +82,7 @@
border: 1px solid rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.1);
color: rgba(21, 128, 61, 0.92);
font-size: 0.75rem;
font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900;
letter-spacing: 0.04em;
}
......
components/panel/incidents/IncidentsDashboard/incidents-dashboard.css
......@@ -15,7 +15,7 @@
.maf-modDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -23,7 +23,7 @@
.maf-modDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......
components/panel/inspection/InspectionDashboard/inspection-dashboard.css
......@@ -11,7 +11,7 @@
.maf-inspDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-inspDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......@@ -49,7 +49,7 @@
display: grid;
grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr;
gap: 10px;
font-size: 0.75rem;
font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
......@@ -65,6 +65,7 @@
background: rgba(255, 255, 255, 0.84);
padding: 10px 10px;
color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.96rem);
}
.maf-inspDash__cellTitle {
......@@ -81,7 +82,7 @@
border: 1px solid rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.1);
color: rgba(21, 128, 61, 0.92);
font-size: 0.75rem;
font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900;
letter-spacing: 0.04em;
}
......
components/panel/modules/ModuleDashboardMenu/module-dashboard-menu.css
......@@ -26,9 +26,9 @@
text-decoration: none;
border-radius: 999px;
padding: 9px 12px;
font-size: 0.82rem;
font-size: clamp(0.72rem, 0.35vw + 0.68rem, 0.82rem);
font-weight: 900;
letter-spacing: 0.06em;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(110, 90, 68, 0.86);
border: 1px solid rgba(110, 90, 68, 0.14);
......@@ -61,5 +61,10 @@
.maf-modMenu {
margin: 0.1rem 0.1rem 0.75rem;
}
.maf-modMenu__item {
padding: 8px 10px;
letter-spacing: 0.04em;
}
}
components/panel/permit/PermitDashboard/permit-dashboard.css
......@@ -11,7 +11,7 @@
.maf-permitDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-permitDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......@@ -85,6 +85,7 @@
justify-content: space-between;
gap: 12px;
color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.88rem, 0.35vw + 0.82rem, 0.96rem);
}
.maf-permitDash__queueRow strong {
......
components/panel/suggestion/SuggestionDashboard/suggestion-dashboard.css
......@@ -11,7 +11,7 @@
.maf-suggestDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-suggestDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......@@ -89,6 +89,7 @@
justify-content: space-between;
gap: 12px;
color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.88rem, 0.35vw + 0.82rem, 0.96rem);
}
.maf-suggestDash__focusRow strong {
......
components/panel/tracking/TrackingDashboard/tracking-dashboard.css
......@@ -11,7 +11,7 @@
.maf-trackDash__title {
margin: 0;
font-size: 1.35rem;
font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920;
letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96);
......@@ -19,7 +19,7 @@
.maf-trackDash__subtitle {
margin: 6px 0 0;
font-size: 0.92rem;
font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35;
color: rgba(110, 90, 68, 0.74);
}
......@@ -85,6 +85,7 @@
justify-content: space-between;
gap: 12px;
color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.88rem, 0.35vw + 0.82rem, 0.96rem);
}
.maf-trackDash__focusRow strong {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment