From 1647ce4c073d38f09df591f77e2a8ba39c852dbf Mon Sep 17 00:00:00 2001 From: "soroush.asadi" Date: Wed, 3 Jun 2026 07:07:44 +0330 Subject: [PATCH] Fix responsive UI: mobile nav, fluid typography, pay-label & calendar overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mobile nav was display:none (no navigation on phones) → now a scrollable strip on a second header row - Fluid typography via clamp() for hero/page/section headings + spacing - Long pay/choice labels (… یا … به انتخاب شما) now wrap in card footers instead of overflowing - Calendar table scrolls horizontally on small screens (cal-wrap + min-width) - Filter sidebar non-sticky/full-width on mobile; tighter small-screen padding & buttons Co-Authored-By: Claude Opus 4.8 --- .../Pages/Calendar/Index.cshtml | 2 + src/JobsMedical.Web/wwwroot/css/site.css | 44 ++++++++++++++----- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/JobsMedical.Web/Pages/Calendar/Index.cshtml b/src/JobsMedical.Web/Pages/Calendar/Index.cshtml index 94b3715..9876bcc 100644 --- a/src/JobsMedical.Web/Pages/Calendar/Index.cshtml +++ b/src/JobsMedical.Web/Pages/Calendar/Index.cshtml @@ -34,6 +34,7 @@ asp-route-FacilityId="@Model.FacilityId" asp-route-WeekOffset="@(Model.WeekOffset + 1)">هفته بعد ← +
@@ -69,4 +70,5 @@
+
diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css index ffe3b3c..cffc059 100644 --- a/src/JobsMedical.Web/wwwroot/css/site.css +++ b/src/JobsMedical.Web/wwwroot/css/site.css @@ -82,10 +82,10 @@ a { color: inherit; text-decoration: none; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(135deg, #0e8f8a 0%, #0a6f6b 100%); - color: #fff; padding: 64px 0 80px; text-align: center; + color: #fff; padding: clamp(40px, 8vw, 64px) 0 clamp(48px, 9vw, 80px); text-align: center; } -.hero h1 { font-size: 34px; font-weight: 900; margin: 0 0 14px; line-height: 1.4; } -.hero p { font-size: 17px; opacity: .92; max-width: 620px; margin: 0 auto 30px; } +.hero h1 { font-size: clamp(23px, 5.5vw, 34px); font-weight: 900; margin: 0 0 14px; line-height: 1.45; } +.hero p { font-size: clamp(15px, 3.2vw, 17px); opacity: .92; max-width: 620px; margin: 0 auto 30px; } /* search box on hero */ .search-card { @@ -108,7 +108,7 @@ label { font-size: 13px; } /* ---------- Sections / grid ---------- */ .section { padding: 48px 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; } -.section-head h2 { font-size: 23px; font-weight: 800; margin: 0; } +.section-head h2 { font-size: clamp(19px, 4.2vw, 23px); font-weight: 800; margin: 0; } .section-head a { color: var(--primary); font-weight: 700; font-size: 14px; } .grid { display: grid; gap: 16px; } @@ -124,10 +124,11 @@ label { font-size: 13px; } .shift-card { display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s; } .shift-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } -.shift-card .facility { font-weight: 800; font-size: 16px; } -.shift-card .row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; } -.shift-card .pay { font-weight: 800; color: var(--primary-dark); font-size: 15px; } -.shift-card .foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; } +.shift-card .facility { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; } +.shift-card .row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--muted); font-size: 13.5px; } +.shift-card .pay { font-weight: 800; color: var(--primary-dark); font-size: 14px; overflow-wrap: anywhere; } +.shift-card .foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; } +.shift-card .foot .pay { flex: 1; min-width: 0; } /* ---------- Badges / chips ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } @@ -148,7 +149,8 @@ label { font-size: 13px; } .filter-group > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; } /* ---------- Calendar ---------- */ -.cal { width: 100%; border-collapse: separate; border-spacing: 8px; } +.cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } +.cal { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 8px; } .cal th { font-size: 13px; color: var(--muted); font-weight: 700; padding-bottom: 6px; } .cal td { vertical-align: top; background: var(--surface); border: 1px solid var(--line); @@ -168,8 +170,8 @@ label { font-size: 13px; } .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } /* ---------- Misc ---------- */ -.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 28px 0; } -.page-head h1 { margin: 0; font-size: 26px; } +.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(20px, 5vw, 28px) 0; } +.page-head h1 { margin: 0; font-size: clamp(20px, 4.6vw, 26px); line-height: 1.4; } .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } .info-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); } @@ -201,10 +203,28 @@ label { font-size: 13px; } .search-card { grid-template-columns: 1fr 1fr; } .layout-2 { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: 1fr; } - .main-nav { display: none; } + .filter-card { position: static; } + + /* Header wraps to two rows; nav becomes a scrollable strip (NOT hidden). */ + .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px 16px; } + .main-nav { + order: 3; flex: 1 0 100%; margin-inline-start: 0; gap: 18px; + overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; + } + .main-nav a { white-space: nowrap; font-size: 14px; } + .header-actions { margin-inline-start: auto; } + .header-actions a { font-size: 14px; } + .cal { border-spacing: 4px; } .cal td { height: auto; min-height: 80px; padding: 6px; } } @media (max-width: 520px) { + .container { padding: 0 14px; } .grid-3, .grid-4, .search-card { grid-template-columns: 1fr; } + .section { padding: 32px 0; } + .btn-lg { padding: 12px 20px; font-size: 15px; } + .stat-pill { padding: 10px 16px; } + .stat-pill .n { font-size: 20px; } + /* Tighten in-card action rows so buttons don't overflow */ + .rec-banner { padding: 16px; } }