#49549 closed defect (bug) (fixed)
Bundled Themes: Update calendar widget styles for 5.4 markup
Reported by: | ianbelanger | Owned by: | SergeyBiryukov |
---|---|---|---|
Milestone: | 5.4 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | has-patch commit dev-reviewed |
Focuses: | css | Cc: |
Description
As pointed out in #49546 by @sabernhardt for Twenty Thirteen.
Since the previous month and next month links are no longer inside table cells in version 5.4, display:block stretches each of those links the full width of the calendar container.
Though I like how the month links are larger and further away from the calendar date links, the change would be quite unexpected for other people.
(markup was changed for ticket:39763)
It appears that all other Bundled Themes are also affected by the markup changes to the calendar widget in 5.4.
Attachments (4)
Change History (16)
#2
@
5 years ago
- Keywords has-patch needs-testing added; needs-patch removed
Borders and background colors are left out of the first patch (child themes may have overridden color choices and then would need to be revised). The second patch includes them, in case that's preferable.
In both patches, all themes:
- Use
display:table
on thenav
element anddisplay:table-cell
on thespan
elements inside it - Set the width to 100% (except for Twenty Eleven at 95%)
Theme-specific changes include:
Twenty Twenty
- Adjusts
font-size
to 1.8rem on navigation element - Uses same styles for calendar's table cells on the navigation
span
elements (font-size, font-weight, line-height, padding, text-align) - Removes bottom margin from calendar table
- Removes underline from the links, as specified before
- Aligns month links to the outside edges
- Second patch adds side and bottom borders (setting
border-color
in functions.php)
Twenty Nineteen
Note: these stylesheets were edited separately from the SCSS file, not compiled, if that makes a difference.
- Moves the bottom margin from the calendar table to the
nav
element - Adds the heading font to navigation links, and uses the non-Latin font fallbacks for 31 languages
- Adds 0.5em padding to the
span
tags so they match the cells
Twenty Seventeen
- Moves the bottom margin from the calendar table to the
nav
element - Centers the navigation links
- Sets a width (15%) to the center ".pad"
span
- Adds 0.4em top and bottom padding to the
nav
element - Second patch adds bottom border
Twenty Sixteen
- Matches calendar table cells' line-height, centering and lack of padding, then adjusts line-height with the cells at
(min-width: 56.875em)
- Sets a width (15%) to the center ".pad"
span
- Second patch adds side and bottom borders
Twenty Fifteen
- Sets a width (15%) to the center ".pad"
span
- Matches calendar table cells' line-height, centering and lack of padding, then adjusts line-height with the cells at the five larger breakpoints
- Moves the bottom margin from the calendar table to the
nav
element at(min-width: 46.25em)
- Second patch adds side and bottom borders
Twenty Fourteen
- Adjusts navigation line-height to 2
- Aligns text for previous and next months to outside edges
- Second patch adds side and bottom borders, with box-sizing adjustment
Twenty Twelve
- Gives the same styles to
.wp-calendar-nav
as were assigned to the#wp-calendar
table (margin, width, font-size, line-height, color) - Adds side padding to the next link container
span
(.wp-calendar-nav-next
) to match the formertfoot
cell
Twenty Eleven
- Centers the navigation links
- Second patch adds background color plus top and bottom borders
Twenty Ten
- Assigns fonts to
.calendar_wrap
container, to match#wp-calendar
- Aligns text for next month links to the outside edges
.
#3
@
5 years ago
- Status changed from assigned to reviewing
Thanks for your patches @sabernhardt! I am going to review both for commit. I'll most likely commit the first one, but thanks for the options.
#5
@
5 years ago
- Keywords fixed-major added
- Milestone changed from 5.4 to 5.3.3
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for backport.
#7
@
5 years ago
- Keywords fixed-major removed
- Milestone changed from 5.3.3 to 5.4
- Resolution set to fixed
- Status changed from reopened to closed
Sorry, you are correct. I'm still new to committing.
#8
@
5 years ago
- Resolution fixed deleted
- Status changed from closed to reopened
@ianbelanger I'm reopening this ticket because I had failed to test how the table/table-cell layout works with only one month link. In that case, which again is most noticeable with Twenty Thirteen, the link takes up about 80% of the table width (about 6 columns).
It seems the spans should have a specific (percentage) width for the themes where that element has centered text. 49549.2.patch sets the previous and next spans to 40% in those six themes. Those container elements had been three-sevenths (42.86%) as table footer cells, and I rounded down for a better chance of even pixel values.
Simply setting previous and next links' width at 40%:
- Twenty Eleven
- Twenty Thirteen
- Twenty Nineteen
Setting previous and next width at 40% instead of the 15% .pad
width I used earlier:
- Twenty Fifteen
- Twenty Sixteen
- Twenty Seventeen
I've tested 49549.2.patch:
- with each bundled theme,
- in 4 PC browsers (Chrome, Firefox, IE11, and Edge),
- in English and Hebrew (LTR and RTL languages), and
- with each link set (previous month only, next month only, and both).
Side note: Twenty Twenty can lose some table border lines in Internet Explorer and Edge, but it already did that in 5.3 (so I'm not addressing that here).
If the width issue is minor enough, this edit could be punted to 5.5 (or possibly even ignored).
@
5 years ago
Calendar with only the next-month link, in Twenty Thirteen side widget area, with focus outline to show its size
#9
@
5 years ago
- Keywords needs-dev-review added; needs-testing removed
- Owner changed from ianbelanger to SergeyBiryukov
- Status changed from reopened to reviewing
Patch looks good to me @sabernhardt, I will commit, just need a dev-review
from another committer because we are in the RC stage. @SergeyBiryukov would mind reviewing this one? Thanks
#10
@
5 years ago
- Keywords commit dev-reviewed added; needs-dev-review removed
49549.2.patch looks good to me.
Here are screenshots for each of the bundled themes:
https://flic.kr/s/aHsmLF43dM
The screenshots include Twenty Thirteen, which already has a patch committed. (Thanks!)