feat: serve content without header and footer for mobile app (#11245)

This PR is for better display of content pages in the mobile app. It removes the header or the footer if: - the user agent contains "Smoothie" (can also be faked by passing the ?user_agent=smoothie) - we have a ?content_only=1 parameter --------- Co-authored-by: Open Food Facts Bot <[email protected]>
openfoodfacts · Jan 17, 2025 · 662a96b · 662a96b
1 parent b88f43e
commit 662a96b
Show file tree

Hide file tree

Showing 59 changed files with 9,428 additions and 55 deletions.
diff --git a/lib/ProductOpener/Display.pm b/lib/ProductOpener/Display.pm
@@ -7619,6 +7619,10 @@ sub display_page ($request_ref) {
 	$template_data_ref->{request} = $request_ref;
 
 	my $html;
+	# ?content_only=1 -> only the content, no header, footer, etc.
+	if (($user_agent =~ /smoothie/) or (single_param('content_only'))) {
+		$template_data_ref->{content_only} = 1;
+	}
 	process_template('web/common/site_layout.tt.html', $template_data_ref, \$html, $request_ref)
 		|| ($html = "template error: " . $tt->error());
 

diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html
@@ -31,9 +31,12 @@
 
 	[% analytics %]
 
+	[% IF ! content_only %]
 	<div class="skip"><a href="#content" tabindex="0">[% lang('skip_to_content') %]</a></div>
+	[% END %]
 
 	<div id="page">
+		[% IF ! content_only %]
 		<div class="upper-nav contain-to-grid"  id="upNav">
 			<nav class="top-bar " data-topbar role="navigation">
 
@@ -159,9 +162,11 @@
 				</section>
 			</nav>
 		</div>
+		[% END %]
 
 		<div id="main_container" style="position:relative" class="block_latte">
-
+
+		[% IF ! content_only %]
 		<div class="topbarsticky">
 			<div class="contain-to-grid " id="offNav" >
 				<nav class="top-bar" data-topbar role="navigation" >
@@ -243,11 +248,14 @@
 				</form>
 			</div>
 		</nav>
+		[% END %]
 
 		<div id="content" class="off-canvas-wrap block_latte" data-offcanvas>
 			<div class="inner-wrap">
 
 				<a class="exit-off-canvas"></a>
+
+				[% IF ! content_only %]
 
 				<!-- full width banner on mobile -->
 
@@ -273,8 +281,12 @@
 					</a>
 				[% END %]
 
+				[% END %]
+
 				<div class="main block_light">
 					<div id="main_column">
+
+						[% IF ! content_only %]
 						[% IF ! server_options_producers_platform %]
 							[%# for now, display the packagings banner in all cases %]
 							[% IF 1 == 0 %]
@@ -292,6 +304,7 @@
 								[% banner_main %]
 							[% END %]
 						[% END %]
+						[% END %]
 
 						[% IF page_format == "banner" %]
 							<!-- banner pages such as product, product edit form and landing pages have their own h1 title -->
@@ -329,6 +342,7 @@ <h1 class="if-empty-dnone">[% title %]</h1>
 		</div>
 		</div>
 
+		[% IF ! content_only %]
 		<footer>
 			<div class="block_light bg-white" id="install_the_app_block">
 				<div class="row">
@@ -423,6 +437,7 @@ <h3 class="title-5 text-medium">[% lang('footer_discover_the_project') %]</h3>
 				</div>
 			</div>
 		</footer>
+		[% END %]
 
 	</div>
 

diff --git a/tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html b/tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html
@@ -62,9 +62,12 @@
 
 
 
+
 	<div class="skip"><a href="#content" tabindex="0">Skip to Content</a></div>
+
 
 	<div id="page">
+
 		<div class="upper-nav contain-to-grid"  id="upNav">
 			<nav class="top-bar " data-topbar role="navigation">
 
@@ -137,9 +140,11 @@
 				</section>
 			</nav>
 		</div>
+
 
 		<div id="main_container" style="position:relative" class="block_latte">
-
+
+
 		<div class="topbarsticky">
 			<div class="contain-to-grid " id="offNav" >
 				<nav class="top-bar" data-topbar role="navigation" >
@@ -217,18 +222,25 @@
 				</form>
 			</div>
 		</nav>
+
 
 		<div id="content" class="off-canvas-wrap block_latte" data-offcanvas>
 			<div class="inner-wrap">
 
 				<a class="exit-off-canvas"></a>
+
+
 
 				<!-- full width banner on mobile -->
 
 
 
+
+
 				<div class="main block_light">
 					<div id="main_column">
+
+
 
 
 
@@ -343,6 +355,7 @@ <h3 class="donation-banner__main-title">Please give to our 2024 Fundraiser</h3>
 
 
 
+
 
 
 							<div class="row">
@@ -358,6 +371,7 @@ <h1 class="if-empty-dnone">Error</h1>
 		</div>
 		</div>
 
+
 		<footer>
 			<div class="block_light bg-white" id="install_the_app_block">
 				<div class="row">
@@ -512,6 +526,7 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 				</div>
 			</div>
 		</footer>
+
 
 	</div>
 

diff --git a/...ation/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html b/...ation/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html
@@ -62,9 +62,12 @@
 
 
 
+
 	<div class="skip"><a href="#content" tabindex="0">Aller au contenu</a></div>
+
 
 	<div id="page">
+
 		<div class="upper-nav contain-to-grid"  id="upNav">
 			<nav class="top-bar " data-topbar role="navigation">
 
@@ -137,9 +140,11 @@
 				</section>
 			</nav>
 		</div>
+
 
 		<div id="main_container" style="position:relative" class="block_latte">
-
+
+
 		<div class="topbarsticky">
 			<div class="contain-to-grid " id="offNav" >
 				<nav class="top-bar" data-topbar role="navigation" >
@@ -217,18 +222,25 @@
 				</form>
 			</div>
 		</nav>
+
 
 		<div id="content" class="off-canvas-wrap block_latte" data-offcanvas>
 			<div class="inner-wrap">
 
 				<a class="exit-off-canvas"></a>
+
+
 
 				<!-- full width banner on mobile -->
 
 
 
+
+
 				<div class="main block_light">
 					<div id="main_column">
+
+
 
 
 
@@ -343,6 +355,7 @@ <h3 class="donation-banner__main-title">Merci de contribuer à notre collecte de
 
 
 
+
 
 
 							<div class="row">
@@ -358,6 +371,7 @@ <h1 class="if-empty-dnone">Erreur</h1>
 		</div>
 		</div>
 
+
 		<footer>
 			<div class="block_light bg-white" id="install_the_app_block">
 				<div class="row">
@@ -512,6 +526,7 @@ <h3 class="title-5 text-medium">Découvrez le projet</h3>
 				</div>
 			</div>
 		</footer>
+
 
 	</div>
 

diff --git a/tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html b/tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html
@@ -64,9 +64,12 @@
 
 
 
+
 	<div class="skip"><a href="#content" tabindex="0">Skip to Content</a></div>
+
 
 	<div id="page">
+
 		<div class="upper-nav contain-to-grid"  id="upNav">
 			<nav class="top-bar " data-topbar role="navigation">
 
@@ -139,9 +142,11 @@
 				</section>
 			</nav>
 		</div>
+
 
 		<div id="main_container" style="position:relative" class="block_latte">
-
+
+
 		<div class="topbarsticky">
 			<div class="contain-to-grid " id="offNav" >
 				<nav class="top-bar" data-topbar role="navigation" >
@@ -219,18 +224,25 @@
 				</form>
 			</div>
 		</nav>
+
 
 		<div id="content" class="off-canvas-wrap block_latte" data-offcanvas>
 			<div class="inner-wrap">
 
 				<a class="exit-off-canvas"></a>
+
+
 
 				<!-- full width banner on mobile -->
 
 
 
+
+
 				<div class="main block_light">
 					<div id="main_column">
+
+
 
 
 
@@ -345,6 +357,7 @@ <h3 class="donation-banner__main-title">Please give to our 2024 Fundraiser</h3>
 
 
 
+
 
 
 
@@ -510,6 +523,7 @@ <h1 itemprop="name">Hazelnut spreads</h1>
 		</div>
 		</div>
 
+
 		<footer>
 			<div class="block_light bg-white" id="install_the_app_block">
 				<div class="row">
@@ -664,6 +678,7 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 				</div>
 			</div>
 		</footer>
+
 
 	</div>
 

diff --git a/tests/integration/expected_test_results/page_crawler/crawler-access-product-page.html b/tests/integration/expected_test_results/page_crawler/crawler-access-product-page.html
@@ -75,9 +75,12 @@
 
 
 
+
 	<div class="skip"><a href="#content" tabindex="0">Skip to Content</a></div>
+
 
 	<div id="page">
+
 		<div class="upper-nav contain-to-grid"  id="upNav">
 			<nav class="top-bar " data-topbar role="navigation">
 
@@ -150,9 +153,11 @@
 				</section>
 			</nav>
 		</div>
+
 
 		<div id="main_container" style="position:relative" class="block_latte">
-
+
+
 		<div class="topbarsticky">
 			<div class="contain-to-grid " id="offNav" >
 				<nav class="top-bar" data-topbar role="navigation" >
@@ -230,18 +235,25 @@
 				</form>
 			</div>
 		</nav>
+
 
 		<div id="content" class="off-canvas-wrap block_latte" data-offcanvas>
 			<div class="inner-wrap">
 
 				<a class="exit-off-canvas"></a>
+
+
 
 				<!-- full width banner on mobile -->
 
 
 
+
+
 				<div class="main block_light">
 					<div id="main_column">
+
+
 
 
 
@@ -356,6 +368,7 @@ <h3 class="donation-banner__main-title">Please give to our 2024 Fundraiser</h3>
 
 
 
+
 
 
 							<!-- banner pages such as product, product edit form and landing pages have their own h1 title -->
@@ -3703,6 +3716,7 @@ <h2 id="data_sources" class="text-medium">Data sources</h2>
 		</div>
 		</div>
 
+
 		<footer>
 			<div class="block_light bg-white" id="install_the_app_block">
 				<div class="row">
@@ -3857,6 +3871,7 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 				</div>
 			</div>
 		</footer>
+
 
 	</div>