Fix alignment of section header rows

WordPress · Aug 31, 2023 · 39ac400 · 39ac400
1 parent 49c9824
commit 39ac400
Show file tree

Hide file tree

Showing 14 changed files with 48 additions and 47 deletions.
diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-course.php b/wp-content/themes/pub/wporg-learn-2020/archive-course.php
@@ -20,10 +20,12 @@
 
 <main id="main" class="site-main">
 	<section>
-		<div class="section-heading section-heading--with-space row align-middle between">
-			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
+		<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>
 			<?php endif; ?>
 		</div>
 

diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-lesson-plan.php b/wp-content/themes/pub/wporg-learn-2020/archive-lesson-plan.php
@@ -19,11 +19,13 @@
 if ( '' === get_query_var( 'search' ) && empty( $_GET ) && is_post_type_archive() ) :
 	?>
 	<section>
-		<div class="row align-middle between section-heading section-heading--with-space">
-			<h1 class="section-heading_title h2"><?php esc_html_e( 'Lesson Plans', 'wporg-learn' ); ?></h1>
-			<a href="<?php echo esc_url( get_post_type_archive_link( 'lesson-plan' ) . '?_view=all' ); ?>" class="button button-xlarge button-secondary">
-				<?php esc_html_e( 'Browse all lesson plans', 'wporg-learn' ); ?>
-			</a>
+		<div class="row align-middle between section-heading section-heading--with-space gutters">
+			<h1 class="section-heading_title h2 col-8"><?php esc_html_e( 'Lesson Plans', 'wporg-learn' ); ?></h1>
+			<div class="col-4 row section-heading_links">
+				<a href="<?php echo esc_url( get_post_type_archive_link( 'lesson-plan' ) . '?_view=all' ); ?>" class="button button-xlarge button-secondary">
+					<?php esc_html_e( 'Browse all lesson plans', 'wporg-learn' ); ?>
+				</a>
+			</div>
 		</div>
 
 		<hr>

diff --git a/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php b/wp-content/themes/pub/wporg-learn-2020/archive-wporg_workshop.php
@@ -23,7 +23,7 @@
 <main id="main" class="site-main">
 
 	<section>
-		<div class="section-heading section-heading--with-space row align-middle between">
+		<div class="section-heading section-heading--with-space">
 			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 			<?php if ( is_tax( 'wporg_workshop_series' ) && have_posts() ) :
 				$series_term = wporg_learn_series_get_term( $post );

diff --git a/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss b/wp-content/themes/pub/wporg-learn-2020/css/components/_search-form.scss
@@ -30,18 +30,16 @@
 .search-form {
 	&--is-inline {
 		.search-form {
+			$label-position: 2rem;
+
 			display: flex;
 			justify-content: space-between;
-			margin-top: 0.5rem;
+			margin-top: $label-position;
 			background: #fff;
 
-			@media only screen and (max-width: $breakpoint-tablet) {
-				margin-top: 2rem;
-			}
-
 			> label {
 				position: absolute;
-				transform: translateY(-2rem);
+				transform: translateY(-1 * $label-position);
 			}
 
 			input {

diff --git a/wp-content/themes/pub/wporg-learn-2020/css/components/_section.scss b/wp-content/themes/pub/wporg-learn-2020/css/components/_section.scss
@@ -1,15 +1,4 @@
 .section-heading {
-	&.row {
-
-		@media only screen and (min-width: $breakpoint-tablet) {
-			align-items: baseline;
-		}
-
-		.button {
-			align-self: center;
-		}
-	}
-
 	&_title,
 	&_link {
 
@@ -35,6 +24,10 @@
 	&_links {
 		gap: 1rem;
 		flex-direction: row;
+
+		@media only screen and (min-width: 769px) {
+			justify-content: flex-end;
+		}
 	}
 
 	&_link {

diff --git a/wp-content/themes/pub/wporg-learn-2020/front-page.php b/wp-content/themes/pub/wporg-learn-2020/front-page.php
@@ -33,9 +33,9 @@
 		</section>
 
 		<section>
-			<div class="section-heading row align-middle between">
-				<h2 class="h4 section-heading_title"><?php esc_html_e( 'Recent Courses', 'wporg-learn' ); ?></h2>
-				<div class="section-heading_links row">
+			<div class="section-heading row align-middle between gutters">
+				<h2 class="h4 section-heading_title col-8"><?php esc_html_e( 'Recent Courses', 'wporg-learn' ); ?></h2>
+				<div class="section-heading_links col-4 row">
 					<?php if ( is_user_logged_in() ) : ?>
 						<a class="section-heading_link" href="/my-courses/"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></a>
 					<?php endif; ?>
@@ -69,11 +69,15 @@
 		<hr>
 
 		<section>
-			<div class="section-heading row align-middle between">
-				<h2 class="h4 section-heading_title"><?php esc_html_e( 'Recent Tutorials', 'wporg-learn' ); ?></h2>
-				<a class="section-heading_link" href="/tutorials/">
-					<?php esc_html_e( 'View All Tutorials', 'wporg-learn' ); ?>
-				</a>
+			<div class="section-heading row align-middle between gutters">
+				<h2 class="h4 section-heading_title col-8">
+					<?php esc_html_e( 'Recent Tutorials', 'wporg-learn' ); ?>
+				</h2>
+				<div class="section-heading_links col-4 row">
+					<a class="section-heading_link" href="/tutorials/">
+						<?php esc_html_e( 'View All Tutorials', 'wporg-learn' ); ?>
+					</a>
+				</div>
 				<p class="section-heading_description">
 					<em><?php esc_html_e( 'Instructional videos for all skillsets to help you level up your WordPress expertise.', 'wporg-learn' ); ?></em>
 				</p>
@@ -96,13 +100,15 @@
 		<?php $discussion_events = \WPOrg_Learn\Events\get_discussion_events(); ?>
 		<?php if ( ! empty( $discussion_events ) ) : ?>
 			<section class="wporg-learn-workshop-discussion-events">
-				<div class="section-heading row align-middle between">
-					<h2 class="h4 section-heading_title">
+				<div class="section-heading row align-middle between gutters">
+					<h2 class="h4 section-heading_title col-8">
 						<?php esc_html_e( 'Upcoming Online Workshops', 'wporg-learn' ); ?>
 					</h2>
-					<a class="section-heading_link" href="/online-workshops/">
-						<?php esc_html_e( 'View All Online Workshops', 'wporg-learn' ); ?>
-					</a>
+					<div class="section-heading_links col-4 row">
+						<a class="section-heading_link" href="/online-workshops/">
+							<?php esc_html_e( 'View All Online Workshops', 'wporg-learn' ); ?>
+						</a>
+					</div>
 					<p class="section-heading_description">
 						<em><?php esc_html_e( 'Live sessions where you can learn alongside other WordPress enthusiasts from around the world.', 'wporg-learn' ); ?></em>
 					</p>

diff --git a/wp-content/themes/pub/wporg-learn-2020/page-content-calendar.php b/wp-content/themes/pub/wporg-learn-2020/page-content-calendar.php
@@ -13,7 +13,7 @@
 
 	<main id="main" class="site-main">
 
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<?php the_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 		</div>
 		<hr>

diff --git a/wp-content/themes/pub/wporg-learn-2020/page-online-workshops.php b/wp-content/themes/pub/wporg-learn-2020/page-online-workshops.php
@@ -12,7 +12,7 @@
 <main id="main" class="site-main page-full-width">
 
 	<section>
-		<div class="section-heading section-heading--with-space row align-middle between">
+		<div class="section-heading section-heading--with-space">
 			<?php the_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 		</div>
 

diff --git a/wp-content/themes/pub/wporg-learn-2020/page.php b/wp-content/themes/pub/wporg-learn-2020/page.php
@@ -20,7 +20,7 @@
 
 	<main id="main" class="site-main">
 
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<?php the_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 		</div>
 		<hr>

diff --git a/wp-content/themes/pub/wporg-learn-2020/search.php b/wp-content/themes/pub/wporg-learn-2020/search.php
@@ -22,7 +22,7 @@
 	<main id="main" class="site-main type-page">
 
 		<section>
-			<div class="row align-middle between section-heading section-heading--with-space">
+			<div class="section-heading section-heading--with-space">
 				<h1 class="section-heading_title h2"><?php echo esc_html( $search_query ); ?></h1>
 			</div>
 			<hr>

diff --git a/wp-content/themes/pub/wporg-learn-2020/taxonomy-wporg_lesson_plan_series.php b/wp-content/themes/pub/wporg-learn-2020/taxonomy-wporg_lesson_plan_series.php
@@ -13,7 +13,7 @@
 
 	<main id="main" class="site-main type-page">
 		<section>
-			<div class="row align-middle between section-heading section-heading--with-space">
+			<div class="section-heading section-heading--with-space">
 				<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
 			</div>
 

diff --git a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-single.php b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-single.php
@@ -12,7 +12,7 @@
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
 	<section>
-		<header class="row align-middle between section-heading section-heading--with-space">
+		<header class="section-heading section-heading--with-space">
 			<h1 class="section-heading_title h2"><?php the_title(); ?></h1>
 		</header>
 

diff --git a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single-hardcoded.php b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single-hardcoded.php
@@ -22,7 +22,7 @@ function( $other_contributor ) {
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<section>
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<h1 class="section-heading_title h2"><?php the_title(); ?></h1>
 		</div>
 		<hr>

diff --git a/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php b/wp-content/themes/pub/wporg-learn-2020/template-parts/content-workshop-single.php
@@ -20,7 +20,7 @@ function( $other_contributor ) {
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<section>
-		<div class="row align-middle between section-heading section-heading--with-space">
+		<div class="section-heading section-heading--with-space">
 			<h1 class="section-heading_title h2"><?php the_title(); ?></h1>
 		</div>