Develop (#50)

* Close burgermenu after search * Set instructions white/space paragraph to pre-line to preserve newline characters * Sett the x-api-key header on the api calls * Update security headers sent in hooks.server.ts and update Dockerfile with api key * Correct X-Content-Type-Options header value * Slugify recipe name in RecipeCard * Use replaceAll * Layout adjustments * Set header opacity to 0.95 * Add header bottom border when burgermenu is open * Deslugify recipe name when not found * Add see more recipes button in home * Set navbar max height to 100vh in mobile to fix not being able to submit button on smaller heights * Use pnpm instead of npm * Update height of images * Squashed commit of the following: commit 5c8a416 Author: Luz <luzojeda@proton.me> Date: Fri Apr 5 15:57:58 2024 -0300 Add space after Preparación in individual recipe page commit 923799c Author: Luz <luzojeda@proton.me> Date: Fri Apr 5 15:47:54 2024 -0300 Change laptop grid to 4 commit adf8c38 Author: Luz Ojeda <luzojeda@proton.me> Date: Fri Apr 5 15:28:36 2024 -0300 Develop (#39) * Close burgermenu after search * Set instructions white/space paragraph to pre-line to preserve newline characters * Sett the x-api-key header on the api calls * Update security headers sent in hooks.server.ts and update Dockerfile with api key * Correct X-Content-Type-Options header value * Slugify recipe name in RecipeCard * Use replaceAll * Layout adjustments * Set header opacity to 0.95 commit af71728 Author: Luz Ojeda <luzojeda@proton.me> Date: Wed Apr 3 18:33:44 2024 -0300 Develop (#35) * Close burgermenu after search * Set instructions white/space paragraph to pre-line to preserve newline characters * Sett the x-api-key header on the api calls * Update security headers sent in hooks.server.ts and update Dockerfile with api key * Correct X-Content-Type-Options header value * Slugify recipe name in RecipeCard * Use replaceAll * Layout adjustments * Format * Squashed commit of the following: commit 5c8a416 Author: Luz <luzojeda@proton.me> Date: Fri Apr 5 15:57:58 2024 -0300 Add space after Preparación in individual recipe page commit 923799c Author: Luz <luzojeda@proton.me> Date: Fri Apr 5 15:47:54 2024 -0300 Change laptop grid to 4 commit adf8c38 Author: Luz Ojeda <luzojeda@proton.me> Date: Fri Apr 5 15:28:36 2024 -0300 Develop (#39) * Close burgermenu after search * Set instructions white/space paragraph to pre-line to preserve newline characters * Sett the x-api-key header on the api calls * Update security headers sent in hooks.server.ts and update Dockerfile with api key * Correct X-Content-Type-Options header value * Slugify recipe name in RecipeCard * Use replaceAll * Layout adjustments * Set header opacity to 0.95 commit af71728 Author: Luz Ojeda <luzojeda@proton.me> Date: Wed Apr 3 18:33:44 2024 -0300 Develop (#35) * Close burgermenu after search * Set instructions white/space paragraph to pre-line to preserve newline characters * Sett the x-api-key header on the api calls * Update security headers sent in hooks.server.ts and update Dockerfile with api key * Correct X-Content-Type-Options header value * Slugify recipe name in RecipeCard * Use replaceAll * Layout adjustments * Set navbar overflow-y to auto * Add fly.yml * Set package version to 1.0.0, change recipe page layout
luz-ojeda · Apr 7, 2024 · dc27fa1 · dc27fa1
1 parent 8c1da2e
commit dc27fa1
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "cook-web",
-	"version": "0.0.1",
+	"version": "1.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

diff --git a/src/routes/recetas/[name]/+page.svelte b/src/routes/recetas/[name]/+page.svelte
@@ -32,11 +32,11 @@
 	<title>{data.name}</title>
 </svelte:head>
 
-<div class="spacing">
-	<div class="title-image-container flex">
+<div class="recipe-container spacing">
+	<div class="recipe-first-content">
 		<img
 			alt={`Photo of the recipe ${data.name}`}
-			class="rounded-img recipe-image"
+			class="image-container rounded-img recipe-image"
 			crossorigin="anonymous"
 			src={data.pictures[0] ? `${data.pictures[0]}?${PUBLIC_AZURE_STORAGE_SAS_TOKEN}` : placeholder}
 		/>
@@ -93,39 +93,40 @@
 				{/if}
 			</div>
 		</div>
-	</div>
 
-	<div class="actions">
-		<!-- TODO: Handle copy for firefox for Android where clipboard API is not supported -->
-		<div>
-			<CopyRecipeButton recipe={{ ...data, ingredients, servings }} />
-		</div>
-		<div>
-			<SaveRecipeButton --color="#2f2622" label iconWidth="18" recipeId={data.id} />
-		</div>
-		<div>
-			<DownloadRecipeButton recipe={{ ...data, ingredients, servings }} />
+		<div class="actions">
+			<!-- TODO: Handle copy for firefox for Android where clipboard API is not supported -->
+			<div>
+				<CopyRecipeButton recipe={{ ...data, ingredients, servings }} />
+			</div>
+			<div>
+				<SaveRecipeButton --color="#2f2622" label iconWidth="18" recipeId={data.id} />
+			</div>
+			<div>
+				<DownloadRecipeButton recipe={{ ...data, ingredients, servings }} />
+			</div>
 		</div>
 	</div>
-
-	<div class="ingredients">
-		<div class="flex-center">
-			<Icon class="icon-margin-right" name="fridge" width="24" height="24" />
-			<h2>Ingredientes:</h2>
+	<div>
+		<div class="ingredients">
+			<div class="flex-center">
+				<Icon class="icon-margin-right" name="fridge" width="24" height="24" />
+				<h2>Ingredientes:</h2>
+			</div>
+			<ul>
+				{#each ingredients as ingredient}
+					<li>{capitalizeFirstLetter(ingredient)}</li>
+				{/each}
+			</ul>
 		</div>
-		<ul>
-			{#each ingredients as ingredient}
-				<li>{capitalizeFirstLetter(ingredient)}</li>
-			{/each}
-		</ul>
-	</div>
 
-	<div>
-		<div class="flex-center">
-			<Icon class="icon-margin-right" name="axe" width="24" height="24" />
-			<h2>Instrucciones:</h2>
+		<div>
+			<div class="flex-center">
+				<Icon class="icon-margin-right" name="axe" width="24" height="24" />
+				<h2>Instrucciones:</h2>
+			</div>
+			<p class="instructions-paragraph">{data.instructions}</p>
 		</div>
-		<p class="instructions-paragraph">{data.instructions}</p>
 	</div>
 
 	<!-- TODO: Display all images in gallery -->
@@ -139,6 +140,10 @@
 		margin-bottom: 16px;
 		margin-top: 0;
 
+		@media (max-width: $laptopBreakpoint) {
+			font-size: 40px;
+		}
+
 		@media (max-width: $tabletBreakpoint) {
 			font-size: 32px;
 		}
@@ -148,11 +153,34 @@
 		margin: 0;
 	}
 
+	.recipe-container {
+		display: flex;
+
+		@media (max-width: $tabletBreakpoint) {
+			display: block;
+		}
+	}
+
+	.recipe-first-content {
+		height: fit-content;
+		margin-right: 24px;
+		position: sticky;
+		top: 120px;
+		width: 50%;
+
+		@media (max-width: $tabletBreakpoint) {
+			margin-right: 0;
+			position: static;
+			top: 0;
+			width: auto;
+		}
+	}
+
 	.recipe-image {
 		max-height: 374px;
 		margin-right: 20px;
 		object-fit: cover;
-		min-width: 65%;
+		width: 100%;
 
 		@media (max-width: $tabletBreakpoint) {
 			margin-bottom: 16px;
@@ -166,16 +194,13 @@
 		}
 	}
 
-	.title-image-container {
+	.image-container {
 		margin-bottom: 16px;
-
-		@media (max-width: $tabletBreakpoint) {
-			flex-direction: column;
-		}
 	}
 
 	.recipe-summary {
 		font-size: 18px;
+		margin-bottom: 16px;
 
 		div:not(:last-of-type) {
 			margin-bottom: 12px;
@@ -187,6 +212,7 @@
 
 		@media (max-width: $tabletBreakpoint) {
 			font-size: 16px;
+			margin-bottom: 0;
 		}
 	}
 
@@ -200,12 +226,16 @@
 
 		@media (max-width: $tabletBreakpoint) {
 			margin: 16px 0;
-			justify-content: space-between;
+			justify-content: space-evenly;
 
 			div:not(:last-child) {
 				margin-right: 8px;
 			}
 		}
+
+		@media (max-width: $mobileBreakpoint) {
+			justify-content: space-between;
+		}
 	}
 
 	.ingredients {

diff --git a/src/sass/recipe-page.scss b/src/sass/recipe-page.scss
@@ -3,7 +3,7 @@
 .action-label {
 	font-size: 18px;
 
-	@media (max-width: $tabletBreakpoint) {
+	@media (max-width: $mobileBreakpoint) {
 		font-size: 12px;
 	}
 }