fix(schedule): correct schedule style icons on mobile and table. Fix … - #1635
fix(schedule): correct schedule style icons on mobile and table. Fix …#1635asiimhusain wants to merge 2 commits into
Conversation
1f2f5c0 to
ed59406
Compare
ed59406 to
789172a
Compare
|
Related to bug #1600 |
yes it is. |
There was a problem hiding this comment.
Pull request overview
This PR updates the schedule toolbar’s “schedule style” icons so they remain available on tablet-sized viewports and so the first (“Standard/table”) icon better reflects the mobile compact schedule view when rendered on phones.
Changes:
- Make the “Standard” schedule style icon/tooltip switch to the condensed/compact (“table-week”) representation on mobile phones (non-tablets).
- Adjust Bootstrap display helper classes so the Wide and Condensed Week icons are not hidden below the
mdbreakpoint.
Suppressed comments (1)
tpl/Schedule/schedule.tpl:118
- Same as the Wide icon:
d-none d-sm-inline-flexwill show the Condensed Week icon on landscape phones at thesmbreakpoint, but CondensedWeek style isn’t actually rendered on mobile phones ($IsMobile && !$IsTablet), so the control can be misleading.
<a href="#"
class="schedule-style d-none d-sm-inline-flex align-items-center{if $ScheduleStyle == ScheduleStyle::CondensedWeek->value} active{/if}"
id="schedule_week" schedule-display="{ScheduleStyle::CondensedWeek->value}"
| <a href="#" | ||
| class="schedule-style d-none d-md-inline-flex me-2 align-items-center{if $ScheduleStyle == ScheduleStyle::Wide->value} active{/if}" | ||
| class="schedule-style d-none d-sm-inline-flex me-2 align-items-center{if $ScheduleStyle == ScheduleStyle::Wide->value} active{/if}" | ||
| id="schedule_wide" schedule-display="{ScheduleStyle::Wide->value}" |
|
I have tested, it's definitely an improvement. For phone on vertical, it works perfectly. Tablet desktop view too. For me the view that doesn't work is on tablet with mobile browser (large enough for 4 buttons). But I usually use my browser in desktop mode on mobile. If you turn your phone, you get the same if you want to test. |
labmecanicatec
left a comment
labmecanicatec
left a comment
There was a problem hiding this comment.
For phones in landscape mode, the Condensed Week Schedule view is repeated in the first and fourth icons.
|
Hey, Please check it now. The issue has been resolved. If you notice anything else or the issue occurs again, just leave a comment here. I’m actively available to look into it and resolve it. |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
Suppressed comments (1)
tpl/Schedule/schedule.tpl:100
- On mobile phones, the “Standard” style link still sets
schedule-displaytoScheduleStyle::Standard, but the title/alt text is changed toCondensedWeekScheduleDisplay. This makes the tooltip and screen-reader text misleading and inconsistent with the actual action being taken (it’s still selecting the Standard style cookie). Consider keeping the label as Standard and only swapping the icon image if desired.
title="{if $IsMobile && !$IsTablet}{translate key='CondensedWeekScheduleDisplay'}{else}{translate key='StandardScheduleDisplay'}{/if}">
<img class="schedule_icon shadow-sm" src="{if $IsMobile && !$IsTablet}img/table-week.png{else}img/table.png{/if}"
alt="{if $IsMobile && !$IsTablet}{translate key='CondensedWeekScheduleDisplay'}{else}{translate key='StandardScheduleDisplay'}{/if}" />
What does this PR do? This PR fixes a bug where the schedule view icons in the toolbar behaved incorrectly or disappeared on mobile devices and tablets:
On Tablets: The Wide and Condensed Week schedule icons were completely missing because they were hidden by the CSS helper classes (d-none d-md-inline-flex) for viewports smaller than 768px (which includes portrait tablets). We changed these to d-none d-sm-inline-flex so that all 4 icons are visible and usable on tablets.
On Mobile Phones: Clicking the "Standard" layout icon (the table icon) correctly loads the mobile compact template layout, but the icon itself looked like the desktop standard grid. We made the icon and tooltip dynamically switch to display the Condensed/Compact icon on mobile phones to align the visual design with the actual view that gets rendered.
How was it tested?
Verified that on desktops and tablets, all 4 icons display and reload the schedule style correctly.
Verified that on mobile phones, the 2 icons display correctly with the first one using the compact layout icon.