Skip to content

Commit

Permalink
Query Filters: Filters should scroll horizontally on very small screens
Browse files Browse the repository at this point in the history
  • Loading branch information
ryelle committed Sep 18, 2023
1 parent 1421289 commit 7c9ffa6
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
</div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
<div class="wp-block-group wporg-query-filters">
<!-- wp:wporg/query-filter {"key":"post_tag"} /-->
<!-- wp:wporg/query-filter {"key":"flavor"} /-->
<!-- wp:wporg/query-filter {"key":"category"} /-->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<div class="wp-block-group alignwide">
<!-- wp:search {"showLabel":false,"placeholder":"<?php esc_html_e( 'Search sites…', 'wporg' ); ?>","width":100,"widthUnit":"%","buttonText":"<?php esc_html_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group">
<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
<div class="wp-block-group wporg-query-filters">
<!-- wp:wporg/query-filter {"key":"post_tag"} /-->
<!-- wp:wporg/query-filter {"key":"flavor"} /-->
<!-- wp:wporg/query-filter {"key":"category"} /-->
Expand Down
10 changes: 10 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ a:where(:not(.wp-element-button)):focus-visible {
.wp-block-query .is-layout-grid {
.wp-block-post-title {
flex-shrink: 0;
max-width: 100%;
}

.wp-block-post-terms {
Expand Down Expand Up @@ -92,6 +93,15 @@ a:where(:not(.wp-element-button)):focus-visible {
}
}

.wp-block-search {
max-width: 100%;
}

.wporg-query-filters {
overflow-y: scroll;
max-width: 100%;
}

/* Page footer */
@media (max-width: 781px) {
.wp-block-columns.is-page-footer > .wp-block-column:first-child {
Expand Down

0 comments on commit 7c9ffa6

Please sign in to comment.