Selaa lähdekoodia

some more work on header grid areas

Maggie Cabrera 4 vuotta sitten
vanhempi
commit
777fa705af

+ 31 - 13
spearhead/assets/sass/_header.scss

@@ -41,6 +41,13 @@ $site-branding-height: 68px;
 		grid-area: branding;
 		padding: var(--global--spacing-horizontal);
 		text-align: left;
+		justify-self: flex-start;
+		align-self: center;
+
+		.site-logo {
+			margin-left: 0;
+			margin-top: 0;
+		}
 
 		.site-title {
 			margin-bottom: 4px;
@@ -50,13 +57,11 @@ $site-branding-height: 68px;
 				text-shadow: none;
 			}
 		}
+	}
 
-		.site-logo {
-			grid-area: site-logo;
-			margin-left: 0;
-			margin-top: 0;
-			text-align: left;
-		}
+	.site-logo {
+		grid-area: site-logo;
+		margin: 0;
 	}
 
 	.primary-navigation-wrapper {
@@ -160,8 +165,15 @@ $site-branding-height: 68px;
 	}
 }
 
-.has-title-and-tagline .site-logo {
-	margin: 0;
+.has-title-and-tagline {
+	.site-logo {
+		padding-top: var(--global--spacing-horizontal);
+		margin: 0;
+	}
+	.site-branding {
+		padding: calc( var(--global--spacing-horizontal) / 2 ) var(--global--spacing-horizontal);
+		align-self: flex-start;
+	}
 }
 
 .primary-navigation-open .has-title-and-tagline .site-logo {
@@ -170,11 +182,13 @@ $site-branding-height: 68px;
 
 
 .site-header div.menu-button-container {
+	.menu-button-container {
+		padding: calc( var(--global--spacing-horizontal) / 2 );
+	}
+
 	button#primary-open-menu {
 		margin-top: 0;
 		margin-right: 0;
-		padding: var(--global--spacing-horizontal);
-
 		&:before {
 			margin: 0;
 		}
@@ -193,9 +207,13 @@ $site-branding-height: 68px;
 	display: grid;
 	grid-template-areas:
 		"site-logo site-logo site-logo"
-		"branding branding primary-navigation"
-		"branding branding cart";
+		"branding branding primary-navigation";
 	grid-template-columns: 0.5fr 1fr 0.5fr;
-	grid-template-rows: auto;
+	grid-template-rows: minmax(min-content, max-content);
 	grid-column-gap: 16px;
 }
+
+.navigation-wrapper {
+	grid-area: primary-navigation;
+	margin: 0;
+}

+ 0 - 6
spearhead/assets/sass/navigation.scss

@@ -11,7 +11,6 @@ $navigation-max-break-point: 'laptop-only';
 
 .primary-navigation,
 .woo-navigation {
-	grid-area: navigation;
 
 	// Top-level Menu Item
 	.primary-menu-container > ul > .menu-item {
@@ -89,7 +88,6 @@ div.extra-navigation-wrapper {
 }
 
 .menu-button-container {
-	grid-area: primary-navigation;
 	position: relative;
 	left: unset;
 	top: unset;
@@ -97,10 +95,6 @@ div.extra-navigation-wrapper {
 	.admin-bar:not(.primary-navigation-open) & {
 		top: unset;
 	}
-
-	&.is-cart {
-		grid-area: cart;
-	}
 }
 
 /*.has-logo.has-title-and-tagline .menu-button-container {

+ 0 - 10
spearhead/navigation-rtl.css

@@ -524,11 +524,6 @@
 	}
 }
 
-.primary-navigation,
-.woo-navigation {
-	grid-area: navigation;
-}
-
 .primary-navigation .primary-menu-container > ul > .menu-item,
 .woo-navigation .primary-menu-container > ul > .menu-item {
 	padding: 0;
@@ -600,7 +595,6 @@
 }
 
 .menu-button-container {
-	grid-area: primary-navigation;
 	position: relative;
 	right: unset;
 	top: unset;
@@ -610,10 +604,6 @@
 	top: unset;
 }
 
-.menu-button-container.is-cart {
-	grid-area: cart;
-}
-
 /*.has-logo.has-title-and-tagline .menu-button-container {
 	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
 

+ 0 - 10
spearhead/navigation.css

@@ -524,11 +524,6 @@
 	}
 }
 
-.primary-navigation,
-.woo-navigation {
-	grid-area: navigation;
-}
-
 .primary-navigation .primary-menu-container > ul > .menu-item,
 .woo-navigation .primary-menu-container > ul > .menu-item {
 	padding: 0;
@@ -600,7 +595,6 @@
 }
 
 .menu-button-container {
-	grid-area: primary-navigation;
 	position: relative;
 	left: unset;
 	top: unset;
@@ -610,10 +604,6 @@
 	top: unset;
 }
 
-.menu-button-container.is-cart {
-	grid-area: cart;
-}
-
 /*.has-logo.has-title-and-tagline .menu-button-container {
 	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
 

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
spearhead/navigation.css.map


+ 26 - 7
spearhead/style-rtl.css

@@ -255,6 +255,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	grid-area: branding;
 	padding: var(--global--spacing-horizontal);
 	text-align: right;
+	justify-self: flex-start;
+	align-self: center;
+}
+
+.site-header .site-branding .site-logo {
+	margin-right: 0;
+	margin-top: 0;
 }
 
 .site-header .site-branding .site-title {
@@ -266,11 +273,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-shadow: none;
 }
 
-.site-header .site-branding .site-logo {
+.site-header .site-logo {
 	grid-area: site-logo;
-	margin-right: 0;
-	margin-top: 0;
-	text-align: right;
+	margin: 0;
 }
 
 .site-header .primary-navigation-wrapper {
@@ -370,17 +375,26 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-title-and-tagline .site-logo {
+	padding-top: var(--global--spacing-horizontal);
 	margin: 0;
 }
 
+.has-title-and-tagline .site-branding {
+	padding: calc( var(--global--spacing-horizontal) / 2) var(--global--spacing-horizontal);
+	align-self: flex-start;
+}
+
 .primary-navigation-open .has-title-and-tagline .site-logo {
 	display: none;
 }
 
+.site-header div.menu-button-container .menu-button-container {
+	padding: calc( var(--global--spacing-horizontal) / 2);
+}
+
 .site-header div.menu-button-container button#primary-open-menu {
 	margin-top: 0;
 	margin-left: 0;
-	padding: var(--global--spacing-horizontal);
 }
 
 .site-header div.menu-button-container button#primary-open-menu:before {
@@ -397,12 +411,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header {
 	display: grid;
-	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation" "branding branding cart";
+	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation";
 	grid-template-columns: 0.5fr 1fr 0.5fr;
-	grid-template-rows: auto;
+	grid-template-rows: minmax(min-content, max-content);
 	grid-column-gap: 16px;
 }
 
+.navigation-wrapper {
+	grid-area: primary-navigation;
+	margin: 0;
+}
+
 .site-footer > .site-info {
 	font-family: var(--global--font-secondary);
 }

+ 26 - 7
spearhead/style.css

@@ -255,6 +255,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	grid-area: branding;
 	padding: var(--global--spacing-horizontal);
 	text-align: left;
+	justify-self: flex-start;
+	align-self: center;
+}
+
+.site-header .site-branding .site-logo {
+	margin-left: 0;
+	margin-top: 0;
 }
 
 .site-header .site-branding .site-title {
@@ -266,11 +273,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-shadow: none;
 }
 
-.site-header .site-branding .site-logo {
+.site-header .site-logo {
 	grid-area: site-logo;
-	margin-left: 0;
-	margin-top: 0;
-	text-align: left;
+	margin: 0;
 }
 
 .site-header .primary-navigation-wrapper {
@@ -370,17 +375,26 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-title-and-tagline .site-logo {
+	padding-top: var(--global--spacing-horizontal);
 	margin: 0;
 }
 
+.has-title-and-tagline .site-branding {
+	padding: calc( var(--global--spacing-horizontal) / 2) var(--global--spacing-horizontal);
+	align-self: flex-start;
+}
+
 .primary-navigation-open .has-title-and-tagline .site-logo {
 	display: none;
 }
 
+.site-header div.menu-button-container .menu-button-container {
+	padding: calc( var(--global--spacing-horizontal) / 2);
+}
+
 .site-header div.menu-button-container button#primary-open-menu {
 	margin-top: 0;
 	margin-right: 0;
-	padding: var(--global--spacing-horizontal);
 }
 
 .site-header div.menu-button-container button#primary-open-menu:before {
@@ -397,12 +411,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header {
 	display: grid;
-	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation" "branding branding cart";
+	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation";
 	grid-template-columns: 0.5fr 1fr 0.5fr;
-	grid-template-rows: auto;
+	grid-template-rows: minmax(min-content, max-content);
 	grid-column-gap: 16px;
 }
 
+.navigation-wrapper {
+	grid-area: primary-navigation;
+	margin: 0;
+}
+
 .site-footer > .site-info {
 	font-family: var(--global--font-secondary);
 }

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
spearhead/style.css.map


+ 84 - 82
spearhead/template-parts/header/navigation.php

@@ -1,89 +1,91 @@
-<?php $has_primary_nav = has_nav_menu( 'primary' );
-if ( $has_primary_nav || has_nav_menu( 'social' ) ) : ?>
-	<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'spearhead' ); ?>">
-		<button id="primary-close-menu" class="button close">
-			<span class="dropdown-icon close"><?php _e( 'Close', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
-			<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'spearhead' ); ?></span>
-		</button>
-		<div class="extra-navigation-wrapper">
-			<?php
-			if ( $has_primary_nav ) :
-				// Get menu slug
-				$location_name = 'primary';
-				$locations     = get_nav_menu_locations();
-				$menu_id       = $locations[ $location_name ];
-				$menu_obj      = wp_get_nav_menu_object( $menu_id );
-
-				wp_nav_menu(
-					array(
-						'theme_location'  => 'primary',
-						'menu_class'      => 'menu-wrapper',
-						'container_class' => 'primary-menu-container',
-						'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
-					)
-				);
-			endif;
-			if ( has_nav_menu( 'social' ) ) :
-				wp_nav_menu(
-					array(
-						'theme_location'  => 'social',
-						'link_before'     => '<span class="screen-reader-text">',
-						'link_after'      => '</span>' . seedlet_get_icon_svg( 'link' ),
-						'container_class' => 'social-navigation',
-						'depth'           => 1,
-					)
-				);
-			endif;
-			?>
-		</div><!-- .extra-navigation-wrapper -->
-	</nav><!-- #site-navigation -->
-<?php endif; ?>
+<div class="navigation-wrapper">
+	<?php $has_primary_nav = has_nav_menu( 'primary' );
+	if ( $has_primary_nav || has_nav_menu( 'social' ) ) : ?>
+		<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'spearhead' ); ?>">
+			<button id="primary-close-menu" class="button close">
+				<span class="dropdown-icon close"><?php _e( 'Close', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
+				<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'spearhead' ); ?></span>
+			</button>
+			<div class="extra-navigation-wrapper">
+				<?php
+				if ( $has_primary_nav ) :
+					// Get menu slug
+					$location_name = 'primary';
+					$locations     = get_nav_menu_locations();
+					$menu_id       = $locations[ $location_name ];
+					$menu_obj      = wp_get_nav_menu_object( $menu_id );
 
-<div class="menu-button-container">
-	<?php if ( $has_primary_nav ) : ?>
-		<button id="primary-open-menu" class="button open">
-			<span class="dropdown-icon open"><?php _e( 'Menu', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
-			<span class="hide-visually expanded-text"><?php _e( 'expanded', 'spearhead' ); ?></span>
-		</button>
+					wp_nav_menu(
+						array(
+							'theme_location'  => 'primary',
+							'menu_class'      => 'menu-wrapper',
+							'container_class' => 'primary-menu-container',
+							'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+						)
+					);
+				endif;
+				if ( has_nav_menu( 'social' ) ) :
+					wp_nav_menu(
+						array(
+							'theme_location'  => 'social',
+							'link_before'     => '<span class="screen-reader-text">',
+							'link_after'      => '</span>' . seedlet_get_icon_svg( 'link' ),
+							'container_class' => 'social-navigation',
+							'depth'           => 1,
+						)
+					);
+				endif;
+				?>
+			</div><!-- .extra-navigation-wrapper -->
+		</nav><!-- #site-navigation -->
 	<?php endif; ?>
-</div>
 
-<?php if ( class_exists( 'WooCommerce' ) ) : ?>
-	<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'spearhead' ); ?>">
-		<?php
-		echo( sprintf(
-			'<button id="woo-close-menu" class="button close">
-				<span class="dropdown-icon close">%1$s %2$s</span>
-				<span class="hide-visually collapsed-text">%3$s</span>
+	<div class="menu-button-container">
+		<?php if ( $has_primary_nav ) : ?>
+			<button id="primary-open-menu" class="button open">
+				<span class="dropdown-icon open"><?php _e( 'Menu', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
+				<span class="hide-visually expanded-text"><?php _e( 'expanded', 'spearhead' ); ?></span>
 			</button>
-			<div class="woocommerce-menu-container">
-				<ul id="woocommerce-menu" class="menu-wrapper"">
-				<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
-					%6$s
-					<ul class="sub-menu">
-						<li class="woocommerce-cart-widget" title="%7$s">
-							%8$s
-						</li>
-					</ul>
-				</li>',
-			esc_html__( 'Close', 'spearhead' ),
-			seedlet_get_icon_svg( 'close' ),
-			esc_html__( 'collapsed', 'spearhead' ),
-			is_cart() ? 'current-menu-item' : '',
-			esc_attr__( 'View your shopping cart', 'spearhead' ),
-			seedlet_cart_link(),
-			esc_attr__( 'View your shopping list', 'spearhead' ),
-			seedlet_cart_widget()
-		) );
-		?>
-	</nav><!-- .woo-navigation -->
-<?php endif; ?>
+		<?php endif; ?>
+	</div>
 
-<div class="menu-button-container is-cart">
 	<?php if ( class_exists( 'WooCommerce' ) ) : ?>
-		<button id="woo-open-menu" class="button open">
-			<span class="dropdown-icon open"><?php _e( 'Cart', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?></span>
-			<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'spearhead' ); ?></span>
-		</button>
+		<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'spearhead' ); ?>">
+			<?php
+			echo( sprintf(
+				'<button id="woo-close-menu" class="button close">
+					<span class="dropdown-icon close">%1$s %2$s</span>
+					<span class="hide-visually collapsed-text">%3$s</span>
+				</button>
+				<div class="woocommerce-menu-container">
+					<ul id="woocommerce-menu" class="menu-wrapper"">
+					<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
+						%6$s
+						<ul class="sub-menu">
+							<li class="woocommerce-cart-widget" title="%7$s">
+								%8$s
+							</li>
+						</ul>
+					</li>',
+				esc_html__( 'Close', 'spearhead' ),
+				seedlet_get_icon_svg( 'close' ),
+				esc_html__( 'collapsed', 'spearhead' ),
+				is_cart() ? 'current-menu-item' : '',
+				esc_attr__( 'View your shopping cart', 'spearhead' ),
+				seedlet_cart_link(),
+				esc_attr__( 'View your shopping list', 'spearhead' ),
+				seedlet_cart_widget()
+			) );
+			?>
+		</nav><!-- .woo-navigation -->
 	<?php endif; ?>
-</div>
+
+	<div class="menu-button-container is-cart">
+		<?php if ( class_exists( 'WooCommerce' ) ) : ?>
+			<button id="woo-open-menu" class="button open">
+				<span class="dropdown-icon open"><?php _e( 'Cart', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?></span>
+				<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'spearhead' ); ?></span>
+			</button>
+		<?php endif; ?>
+	</div>
+</div>

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä