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 @@ ...@@ -11,7 +11,7 @@
.maf-adminDash__title { .maf-adminDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-adminDash__subtitle { .maf-adminDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
......
components/panel/audits/AuditsDashboard/audits-dashboard.css
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.maf-auditDash__title { .maf-auditDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-auditDash__subtitle { .maf-auditDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: grid; display: grid;
grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr; grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr;
gap: 10px; gap: 10px;
font-size: 0.75rem; font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900; font-weight: 900;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
background: rgba(255, 255, 255, 0.84); background: rgba(255, 255, 255, 0.84);
padding: 10px 10px; padding: 10px 10px;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.96rem);
} }
.maf-auditDash__cellTitle { .maf-auditDash__cellTitle {
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
border: 1px solid rgba(34, 197, 94, 0.24); border: 1px solid rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.1); background: rgba(34, 197, 94, 0.1);
color: rgba(21, 128, 61, 0.92); 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; font-weight: 900;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
......
components/panel/checklist/ChecklistDashboard/checklist-dashboard.css
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.maf-checkDash__title { .maf-checkDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-checkDash__subtitle { .maf-checkDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: grid; display: grid;
grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr; grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr;
gap: 10px; gap: 10px;
font-size: 0.75rem; font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900; font-weight: 900;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
background: rgba(255, 255, 255, 0.84); background: rgba(255, 255, 255, 0.84);
padding: 10px 10px; padding: 10px 10px;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.96rem);
} }
.maf-checkDash__cellTitle { .maf-checkDash__cellTitle {
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
border: 1px solid rgba(34, 197, 94, 0.24); border: 1px solid rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.1); background: rgba(34, 197, 94, 0.1);
color: rgba(21, 128, 61, 0.92); 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; font-weight: 900;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
......
components/panel/incidents/IncidentsDashboard/incidents-dashboard.css
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
.maf-modDash__title { .maf-modDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.maf-modDash__subtitle { .maf-modDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
......
components/panel/inspection/InspectionDashboard/inspection-dashboard.css
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.maf-inspDash__title { .maf-inspDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-inspDash__subtitle { .maf-inspDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: grid; display: grid;
grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr; grid-template-columns: 1.1fr 1fr 0.7fr 0.55fr;
gap: 10px; gap: 10px;
font-size: 0.75rem; font-size: clamp(0.68rem, 0.25vw + 0.66rem, 0.78rem);
font-weight: 900; font-weight: 900;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
background: rgba(255, 255, 255, 0.84); background: rgba(255, 255, 255, 0.84);
padding: 10px 10px; padding: 10px 10px;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.86rem, 0.35vw + 0.8rem, 0.96rem);
} }
.maf-inspDash__cellTitle { .maf-inspDash__cellTitle {
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
border: 1px solid rgba(34, 197, 94, 0.24); border: 1px solid rgba(34, 197, 94, 0.24);
background: rgba(34, 197, 94, 0.1); background: rgba(34, 197, 94, 0.1);
color: rgba(21, 128, 61, 0.92); 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; font-weight: 900;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
......
components/panel/modules/ModuleDashboardMenu/module-dashboard-menu.css
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
text-decoration: none; text-decoration: none;
border-radius: 999px; border-radius: 999px;
padding: 9px 12px; padding: 9px 12px;
font-size: 0.82rem; font-size: clamp(0.72rem, 0.35vw + 0.68rem, 0.82rem);
font-weight: 900; font-weight: 900;
letter-spacing: 0.06em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
border: 1px solid rgba(110, 90, 68, 0.14); border: 1px solid rgba(110, 90, 68, 0.14);
...@@ -61,5 +61,10 @@ ...@@ -61,5 +61,10 @@
.maf-modMenu { .maf-modMenu {
margin: 0.1rem 0.1rem 0.75rem; 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 @@ ...@@ -11,7 +11,7 @@
.maf-permitDash__title { .maf-permitDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-permitDash__subtitle { .maf-permitDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.88rem, 0.35vw + 0.82rem, 0.96rem);
} }
.maf-permitDash__queueRow strong { .maf-permitDash__queueRow strong {
......
components/panel/suggestion/SuggestionDashboard/suggestion-dashboard.css
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.maf-suggestDash__title { .maf-suggestDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-suggestDash__subtitle { .maf-suggestDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
...@@ -89,6 +89,7 @@ ...@@ -89,6 +89,7 @@
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.88rem, 0.35vw + 0.82rem, 0.96rem);
} }
.maf-suggestDash__focusRow strong { .maf-suggestDash__focusRow strong {
......
components/panel/tracking/TrackingDashboard/tracking-dashboard.css
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.maf-trackDash__title { .maf-trackDash__title {
margin: 0; margin: 0;
font-size: 1.35rem; font-size: clamp(1.12rem, 1.2vw + 0.92rem, 1.45rem);
font-weight: 920; font-weight: 920;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: rgba(46, 39, 32, 0.96); color: rgba(46, 39, 32, 0.96);
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.maf-trackDash__subtitle { .maf-trackDash__subtitle {
margin: 6px 0 0; margin: 6px 0 0;
font-size: 0.92rem; font-size: clamp(0.84rem, 0.55vw + 0.72rem, 0.96rem);
line-height: 1.35; line-height: 1.35;
color: rgba(110, 90, 68, 0.74); color: rgba(110, 90, 68, 0.74);
} }
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
color: rgba(110, 90, 68, 0.86); color: rgba(110, 90, 68, 0.86);
font-size: clamp(0.88rem, 0.35vw + 0.82rem, 0.96rem);
} }
.maf-trackDash__focusRow strong { .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