Fix header row text overlapping search #1834
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Splitting the row in 2 parts with the search field top right align and the heading title just below it left align.
modified the class for the row by using gutters instead of align-middle and using col-8 to restrict spacing of long titles
adamwoodnz
force-pushed
the
1808-text-overlapping
branch
from
a78e233
to
b3bd535
Compare
adamwoodnz
commented
Aug 31, 2023
| @@ -13,7 +13,7 @@ | |||
|
|
|||
| <main id="main" class="site-main"> | |||
|
|
|||
| <div class="row align-middle between section-heading section-heading--with-space"> | |||
There was a problem hiding this comment.
These classes aren't required on headings where there is no right element, and cause the title to be centered on small devices, which is not desirable.
adamwoodnz
commented
Aug 31, 2023
Comment on lines
+23
to
+28
| <div class="section-heading section-heading--with-space row align-middle between gutters"> | ||
| <?php the_archive_title( '<h1 class="section-heading_title h2 col-8">', '</h1>' ); ?> | ||
| <?php if ( is_user_logged_in() ) : ?> | ||
| <a class="section-heading_link" href="/my-courses/"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></a> | ||
| <div class="col-4 row section-heading_links"> | ||
| <a class="section-heading_link" href="/my-courses/"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></a> | ||
| </div> |
There was a problem hiding this comment.
This pattern ensures there is space (gutters) between the elements both on desktop and smaller devices, and keeps the title left aligned, and any right elements right aligned within their column.
It's used for all the templates in this PR where the header uses this split layout.
adamwoodnz
force-pushed
the
1808-text-overlapping
branch
from
b3bd535
to
39ac400
Compare
adamwoodnz
force-pushed
the
1808-text-overlapping
branch
from
39ac400
to
677c6ac
Compare
|
Thank you @adamwoodnz I'll make sure to do a more thorough review this time around. |
jonathanbossenger
approved these changes
Sep 13, 2023
There was a problem hiding this comment.
@adamwoodnz this all looks great in my testing. Thanks for wrangling this.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Extends #1829
Closes #1808, #1813
Props: @cynthianorman
Uses columns for heading section layouts where there is an element to the right of the title, to avoid wrapping when titles are long.
Removes CSS which negatively affects the alignment, and fixes the styling of the search input button.
Screenshots
Lesson Plan archive
Home
Testing
Ideally all of the pages with templates changed should be checked at various screen sizes, you may need to create these pages or content for them
Check that the search input button is fixed and there is no white appearing below or above it