Merge pull request #50 from WordPress/fix-mobile-layout

Fix the layout on mobile
WordPress · Jul 6, 2023 · b38c47c · b38c47c
2 parents 394b8a1 + 27163ac
commit b38c47c
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 30 deletions.
diff --git a/src/blocks/interactive/movie-tabs/render.php b/src/blocks/interactive/movie-tabs/render.php
@@ -3,8 +3,9 @@
 $wrapper_attributes = get_block_wrapper_attributes(
 	array( 'class' => 'wpmovies-tabs' )
 );
-$images             = get_post_meta( $post->ID, '_wpmovies_images', true );
-$videos             = get_post_meta( $post->ID, '_wpmovies_videos', true );
+
+$images = json_decode( get_post_meta( $post->ID, '_wpmovies_images', true ), true );
+$videos = json_decode( get_post_meta( $post->ID, '_wpmovies_videos', true ), true );
 
 wp_store(
 	array(
@@ -57,7 +58,7 @@ class="wpmovies-tab-button"
 	>
 		<div class="wpmovies-media-scroller wpmovies-images-tab">
 			<?php
-			foreach ( json_decode( $images, true ) as $image_id ) {
+			foreach ( $images as $image_id ) {
 				$image_url = wp_get_attachment_image_url( $image_id, '' );
 				?>
 				<img src="<?php echo $image_url; ?>">
@@ -75,7 +76,7 @@ class="wpmovies-tab-button"
 	>
 		<div class="wpmovies-media-scroller wpmovies-videos-tab">
 			<?php
-			foreach ( json_decode( $videos, true ) as $video ) {
+			foreach ( $videos as $video ) {
 				$video_id = substr( $video['url'], strpos( $video['url'], '?v=' ) + 3 );
 				?>
 				<div class="wpmovies-tabs-video-wrapper" data-wp-context='{ "videoId": "<?php echo $video_id; ?>" }'>

diff --git a/src/blocks/interactive/movie-tabs/style.css b/src/blocks/interactive/movie-tabs/style.css
@@ -77,4 +77,4 @@
 .wpmovies-tabs-title .wpmovies-tab-button.wpmovies-active-tab {
 	color: var(--wp--preset--color--white);
 	border-bottom: 4px solid;
-}
+}
diff --git a/src/blocks/interactive/video-player/style.css b/src/blocks/interactive/video-player/style.css
@@ -2,6 +2,14 @@
 	position: fixed;
 	bottom: 10px;
 	right: 10px;
+	z-index: 100;
+}
+
+@media screen and (max-width: 600px) {
+	.wpmovies-video-player {
+		bottom: 0;
+		right: 0;
+	}
 }
 
 .wpmovies-video-wrapper {
@@ -33,5 +41,7 @@
 }
 
 .wpmovies-video-wrapper iframe { 
+	display: block;
 	border: none;
+	max-width: 100vw;
 }
diff --git a/src/blocks/non-interactive/page-background/style.css b/src/blocks/non-interactive/page-background/style.css
@@ -6,6 +6,19 @@
 	z-index: -1;
 }
 
+
+@media screen and (max-width: 900px) {
+	.wpmovies-page-background {
+		top: 50px;
+	}
+}
+
+@media screen and (max-width: 600px) {
+	.wpmovies-page-background {
+		top: 100px;
+	}
+}
+
 .wpmovies-movie-background {
 	position: relative;
 }

diff --git a/wp-movies-theme/templates/index.html b/wp-movies-theme/templates/index.html
@@ -1,10 +1,10 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header","theme":"wp-movies-theme","tagName":"header"} /-->
 
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"},"blockGap":"0","margin":{"top":"78px","bottom":"0"}}},"layout":{"type":"default"}} -->
-<div class="wp-block-group alignwide" style="margin-top:78px;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"style":{"spacing":{"margin":{"top":"64px","bottom":"64px"}}},"layout":{"type":"constrained"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"0","bottom":"var:preset|spacing|60","left":"0"},"blockGap":"0","margin":{"top":"78px","bottom":"0"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide" style="margin-top:78px;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--60);padding-left:0"><!-- wp:group {"style":{"spacing":{"margin":{"top":"64px","bottom":"64px"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group" style="margin-top:64px;margin-bottom:64px"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide"} -->
-	<h1 class="wp-block-heading alignwide has-text-align-center">Interactivity API preview</h1>
-	<!-- /wp:heading -->
+<h1 class="wp-block-heading alignwide has-text-align-center">Interactivity API preview</h1>
+<!-- /wp:heading -->
 
 <!-- wp:group {"layout":{"type":"constrained","wideSize":"400px"}} -->
 <div class="wp-block-group"><!-- wp:paragraph {"align":"center"} -->
@@ -38,4 +38,4 @@ <h1 class="wp-block-heading alignwide has-text-align-center">Interactivity API p
 <!-- /wp:query --></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","theme":"wp-movies-theme","tagName":"footer"} /-->
diff --git a/wp-movies-theme/templates/search.html b/wp-movies-theme/templates/search.html
@@ -1,19 +1,19 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header","theme":"wp-movies-theme","tagName":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|50","top":"78px","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
-<div class="wp-block-group" style="padding-top:78px;padding-bottom:0;padding-left:var(--wp--preset--spacing--50)"><!-- wp:query {"queryId":25,"query":{"perPage":"5","pages":0,"offset":0,"postType":"movies","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]},"displayLayout":{"type":"flex","columns":4},"layout":{"type":"default"}} -->
-	<div class="wp-block-query"><!-- wp:post-template -->
-	<!-- wp:post-featured-image {"isLink":true} /-->
-	<!-- /wp:post-template -->
-	
-	<!-- wp:query-pagination -->
-	<!-- wp:query-pagination-previous /-->
-	
-	<!-- wp:query-pagination-numbers /-->
-	
-	<!-- wp:query-pagination-next /-->
-	<!-- /wp:query-pagination --></div>
-	<!-- /wp:query --></div>
-	<!-- /wp:group -->
-	
-	<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"left":"0","top":"78px","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<div class="wp-block-group" style="padding-top:78px;padding-bottom:0;padding-left:0"><!-- wp:query {"queryId":25,"query":{"perPage":"5","pages":0,"offset":0,"postType":"movies","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]},"displayLayout":{"type":"flex","columns":4},"layout":{"type":"default"}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+<!-- wp:post-featured-image {"isLink":true} /-->
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination --></div>
+<!-- /wp:query --></div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","theme":"wp-movies-theme","tagName":"footer"} /-->
diff --git a/wp-movies-theme/templates/single-movies.html b/wp-movies-theme/templates/single-movies.html
@@ -23,7 +23,7 @@
 <div class="wp-block-group"><!-- wp:post-title {"level":1} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"20px","padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"16px","bottom":"16px"}}},"textColor":"grey","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"20px","padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"16px","bottom":"16px"}}},"textColor":"grey","layout":{"type":"flex","flexWrap":"wrap"}} -->
 <div class="wp-block-group has-grey-color has-text-color" style="margin-top:16px;margin-bottom:16px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:wpmovies/movie-score /-->
 
 <!-- wp:wpmovies/movie-release-date /-->

diff --git a/wp-movies-theme/theme.json b/wp-movies-theme/theme.json
@@ -40,6 +40,7 @@
 			]
 		},
 		"typography": {
+			"fluid": true,
 			"fontFamilies": [
 				{
 					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
@@ -68,6 +69,12 @@
 		}
 	},
 	"styles": {
+		"spacing": {
+			"padding": {
+				"right": "25px",
+				"left": "25px"
+			}
+		},
 		"color": {
 			"background": "var:preset|color|light-black",
 			"text": "var:preset|color|light-grey"