From b89384ffb5ea17dbb83a38f7c5a73f51ac8833e4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 28 Aug 2025 18:26:35 +0000 Subject: [PATCH] Implement responsive mobile/desktop UI layout Co-authored-by: clayschaad <11883505+clayschaad@users.noreply.github.com> --- Client/Pages/Index.razor | 128 +++++++--- Client/Pages/Index.razor.cs | 30 +++ Client/Pages/Index.razor.css | 89 ++++++- Client/wwwroot/demo.html | 460 +++++++++++++++++++++++++++++++++++ 4 files changed, 667 insertions(+), 40 deletions(-) create mode 100644 Client/wwwroot/demo.html diff --git a/Client/Pages/Index.razor b/Client/Pages/Index.razor index 4f98e59..3988e3e 100644 --- a/Client/Pages/Index.razor +++ b/Client/Pages/Index.razor @@ -44,51 +44,105 @@ else { -
- @foreach (var day in SelectedDate.DaysInMonth()) - { -
-
- @day.ToString("dd.MM.yyyy") (@day.ToString("dddd")) -
-
- @foreach (var shift in Shifts) - { -
- + @shift.Name +
+ } +
+ @if (SelectedSchedule.ContainsKey(day)) + { +
+ @GetShiftTimes(day) +
+
+ @GetTransportSummary(day) +
+ } +
+ } + } +
+ + +
+ @foreach (var day in SelectedDate.DaysInMonth()) + { +
+
+ @day.ToString("dd.MM.yyyy") (@day.ToString("dddd")) +
+
+ @foreach (var shift in Shifts) + { +
+ - @shift.Name + + @shift.Name +
+ } +
+ @if (SelectedSchedule.ContainsKey(day)) + { +
+ @GetShiftTimes(day) +
+
+ @GetTransportSummary(day)
}
- @if (SelectedSchedule.ContainsKey(day)) - { -
- @GetShiftTimes(day) -
-
- @GetTransportSummary(day) -
- } -
- } + } + } diff --git a/Client/Pages/Index.razor.cs b/Client/Pages/Index.razor.cs index df89fad..c0c09ee 100644 --- a/Client/Pages/Index.razor.cs +++ b/Client/Pages/Index.razor.cs @@ -320,5 +320,35 @@ namespace ShiftScheduler.Client.Pages Shifts = await HttpClient.GetFromJsonAsync>("api/shift/shifts") ?? new(); StateHasChanged(); } + + // Helper method to group days by week for desktop calendar view + // Each week starts with Monday and ends with Sunday (max 7 days per row) + private List> GetWeeksInMonth() + { + var days = SelectedDate.DaysInMonth(); + var weeks = new List>(); + var currentWeek = new List(); + + foreach (var day in days) + { + // Add the day to current week + currentWeek.Add(day); + + // If it's Sunday or we have 7 days, end the week + if (day.DayOfWeek == DayOfWeek.Sunday || currentWeek.Count == 7) + { + weeks.Add(currentWeek); + currentWeek = new List(); + } + } + + // Add any remaining days as the last week + if (currentWeek.Count > 0) + { + weeks.Add(currentWeek); + } + + return weeks; + } } } diff --git a/Client/Pages/Index.razor.css b/Client/Pages/Index.razor.css index 9a7d49d..09147ad 100644 --- a/Client/Pages/Index.razor.css +++ b/Client/Pages/Index.razor.css @@ -6,6 +6,26 @@ margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; + /* Make buttons scrollable instead of fixed */ + position: static; + overflow: visible; +} + +/* Mobile top navigation - stack vertically */ +@media (max-width: 768px) { + .top-nav-buttons { + flex-direction: column; + align-items: stretch; + gap: 0.5rem; + } + + .month-selection { + justify-content: center; + } + + .action-buttons { + justify-content: center; + } } /* Month selection buttons */ @@ -75,11 +95,43 @@ } /* Calendar container */ +.calendar-container { + margin-top: 1rem; +} + .calendar-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; - margin-top: 1rem; +} + +/* Desktop calendar grid - week-based layout with 7 columns max */ +.desktop-calendar { + grid-template-columns: repeat(7, 1fr); +} + +/* Mobile calendar grid - single column */ +.mobile-calendar { + grid-template-columns: 1fr; +} + +/* Show desktop calendar only on larger screens */ +@media (min-width: 769px) { + .desktop-calendar { + display: grid; + } + .mobile-calendar { + display: none; + } +} + +/* Show mobile calendar only on smaller screens */ +@media (max-width: 768px) { + .desktop-calendar { + display: none; + } + .mobile-calendar { + display: grid; + } } /* Each day cell */ @@ -91,6 +143,14 @@ box-shadow: 0 2px 4px rgba(0,0,0,0.1); } +/* Mobile day cell adjustments */ +@media (max-width: 768px) { + .day-cell { + padding: 0.75rem; + margin-bottom: 0.5rem; + } +} + /* Day number */ .day-header { font-weight: bold; @@ -102,11 +162,25 @@ /* Shift buttons container */ .shifts { display: grid; - grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; } +/* Desktop shift buttons - 3 columns */ +@media (min-width: 769px) { + .shifts { + grid-template-columns: repeat(3, 1fr); + } +} + +/* Mobile shift buttons - single row */ +@media (max-width: 768px) { + .shifts { + grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); + gap: 0.25rem; + } +} + /* Individual shift buttons */ .shift-button { border: 2px solid #ddd; @@ -123,6 +197,15 @@ justify-content: center; } +/* Mobile shift button adjustments */ +@media (max-width: 768px) { + .shift-button { + min-height: 2rem; + font-size: 1rem; + padding: 0.4rem; + } +} + .shift-button:hover { background-color: #f8f9fa; border-color: #007bff; diff --git a/Client/wwwroot/demo.html b/Client/wwwroot/demo.html new file mode 100644 index 0000000..a40b015 --- /dev/null +++ b/Client/wwwroot/demo.html @@ -0,0 +1,460 @@ + + + + + + Shift Scheduler - Mobile UI Demo + + + +
+ Demo Note: This is a responsive layout demo. Resize your browser window to see mobile vs desktop layouts. +
Desktop (>768px): Week-based grid with max 7 columns, 3-column shift buttons +
Mobile (≤768px): Single column layout, single-row shift buttons +
+ +

Shift Scheduler - November 2024

+ +
+
+ + +
+
+ + + + +
+
+ +
+ +
+ +
+
01.11.2024 (Friday)
+
+ + + + + + +
+
+
+
02.11.2024 (Saturday)
+
+ + + + + + +
+
+
+
03.11.2024 (Sunday)
+
+ + + + + + +
+
+ +
+
04.11.2024 (Monday)
+
+ + + + + + +
+
+
+
05.11.2024 (Tuesday)
+
+ + + + + + +
+
+
+
06.11.2024 (Wednesday)
+
+ + + + + + +
+
+
+
07.11.2024 (Thursday)
+
+ + + + + + +
+
+
+ + +
+
+
01.11.2024 (Friday)
+
+ + + + + + +
+
+
+
02.11.2024 (Saturday)
+
+ + + + + + +
+
+
+
03.11.2024 (Sunday)
+
+ + + + + + +
+
+
+
04.11.2024 (Monday)
+
+ + + + + + +
+
+
+
05.11.2024 (Tuesday)
+
+ + + + + + +
+
+
+
06.11.2024 (Wednesday)
+
+ + + + + + +
+
+
+
07.11.2024 (Thursday)
+
+ + + + + + +
+
+
+
+ + \ No newline at end of file