Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add header mobile patterns #255

Merged
merged 13 commits into from
Jul 18, 2024
Merged

feat: add header mobile patterns #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2760b33
feat: add drawer menu pattern; reorganise overlays
thomasguillot Jul 9, 2024
e69917c
Merge trunk into add/drawer-pattern
thomasguillot Jul 9, 2024
0f3836d
Merge trunk into add/drawer-pattern
thomasguillot Jul 10, 2024
cfa57f2
feat: add class to control the overlay's width
thomasguillot Jul 10, 2024
44a7d86
Merge trunk into add/drawer-pattern
thomasguillot Jul 10, 2024
8f2e297
Merge trunk into add/drawer-pattern
thomasguillot Jul 12, 2024
6ee1701
feat: add header desktop patterns
thomasguillot Jul 12, 2024
130d802
feat: add header mobile patterns
thomasguillot Jul 13, 2024
e9a0a7c
Merge trunk into add/mobile-header-patterns
thomasguillot Jul 14, 2024
f57b077
Merge trunk into add/mobile-header-patterns
thomasguillot Jul 15, 2024
933308f
Merge branch 'trunk' into add/mobile-header-patterns
thomasguillot Jul 17, 2024
29496bc
Merge trunk into add/mobile-header-patterns
thomasguillot Jul 17, 2024
6f1c94d
feat(patterns): update buttons; reduce spacing; reduce size
thomasguillot Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 1 addition & 17 deletions parts/header-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1 @@
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"Header"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->

<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /--></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"has-small-size","fontSize":"x-small"} -->
<div class="wp-block-button has-custom-font-size has-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button">Donate</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"newspack-block-theme/header-mobile-style-1"} /-->
41 changes: 41 additions & 0 deletions patterns/header-mobile-style-1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<?php
/**
* Title: Header (Mobile) - Style 1
* Slug: newspack-block-theme/header-mobile-style-1
* Viewport Width: 632
* Inserter: no
* Block Types: core/template-part/header
*
* @package Newspack_Block_Theme
*/

?>
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">

<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->

<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Donate', 'newspack-block-theme' ); ?></a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
27 changes: 27 additions & 0 deletions patterns/header-mobile-style-2.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<?php
/**
* Title: Header (Mobile) - Style 2
* Slug: newspack-block-theme/header-mobile-style-2
* Viewport Width: 632
* Inserter: no
* Block Types: core/template-part/header
*
* @package Newspack_Block_Theme
*/

?>
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">

<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide">
<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->

<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->

<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
37 changes: 37 additions & 0 deletions patterns/header-mobile-style-3.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?php
/**
* Title: Header (Mobile) - Style 3
* Slug: newspack-block-theme/header-mobile-style-3
* Viewport Width: 632
* Inserter: no
* Block Types: core/template-part/header
*
* @package Newspack_Block_Theme
*/

?>
<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">

<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide">
<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-buttons">
<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Donate', 'newspack-block-theme' ); ?></a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->
4 changes: 3 additions & 1 deletion src/scss/overlays/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@
.search-menu__contents {
left: 50%;
margin: 0;
max-width: var(--wp--style--global--content-size);
max-width: calc( var(--wp--preset--spacing--30) + var(--wp--style--global--content-size) + var(--wp--preset--spacing--30) );
opacity: 0;
overflow: visible;
padding-left: var(--wp--preset--spacing--30);
padding-right: var(--wp--preset--spacing--30);
position: fixed !important; // !important to override some styles in the editor.
top: -100%;
transform: translateX(-50%);
Expand Down