Add per page selector and change all font-size values to rem

* update * use only one job * Use rem for font-size instead of px * Include max size note below image upload input * Allow per page change * Update 'can search for recipes in the form' test * Mobile CSS for pagination per page * Add /recetas navigation and pagination tests * Add should preserve state when navigating away and returning using browser buttons test and update code accordingly for it to pass
luz-ojeda · Jun 11, 2024 · 1abc89d · 1abc89d
1 parent b1ebfc8
commit 1abc89d
Show file tree

Hide file tree

Showing 27 changed files with 319 additions and 128 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,12 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against dev server",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -54,13 +54,13 @@
 	}
 
 	.small {
-		font-size: 16px;
+		font-size: 1rem;
 		height: 32px;
 		padding: 4px 12px;
 	}
 
 	.large {
-		font-size: 20px;
+		font-size: 1.25rem;
 		height: 48px;
 		padding: 8px 24px;
 		width: 100%;

diff --git a/src/lib/components/ChipTextInput.svelte b/src/lib/components/ChipTextInput.svelte
@@ -62,7 +62,7 @@
 		border-radius: 12px;
 		color: $grey300;
 		display: flex;
-		font-size: 14px;
+		font-size: 0.875rem;
 		font-weight: bold;
 		letter-spacing: 0.025rem;
 		padding: 4px 8px;

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -86,7 +86,7 @@
 		}
 
 		@media (max-width: $mobileBreakpoint) {
-			font-size: 16px;
+			font-size: 1rem;
 		}
 	}
 
@@ -148,7 +148,7 @@
 		}
 
 		input {
-			font-size: 18px;
+			font-size: 1.125rem;
 			padding-left: 38px;
 			height: 48px;
 			width: 250px;

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -50,7 +50,7 @@
 			overflow-y: auto;
 		}
 
-		font-size: 24px;
+		font-size: 1.5rem;
 	}
 
 	.burger-button {

diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
@@ -1,91 +1,116 @@
 <script lang="ts">
 	export let currentPage: number;
-	export let totalPages: number;
 	export let onPageClick: (page: number) => void;
+	export let onPerPageChange: (perPage: number) => void;
+	export let perPage: number;
+	export let totalPages: number;
 
-	const PAGES_IN_BETWEEN = 3;
+	const PAGES_TO_DISPLAY_IN_BETWEEN = 3;
 	let pagesArray = Array.from({ length: totalPages }, (_, x) => x + 1);
-	let sliceIndex = 1;
+	let pagesSliceIndex = 1;
 
 	// Dynamically changing the starting index of a slice of the array with all pages lets us correctly display the middle pages
 	$: {
-		sliceIndex =
-			currentPage <= PAGES_IN_BETWEEN // Page is less than or equal to 3, we slice the array from 1 to 4
+		pagesSliceIndex =
+			currentPage <= PAGES_TO_DISPLAY_IN_BETWEEN // Page is less than or equal to 3, we slice the array from 1 to 4
 				? 1 // (1, 2, 3, 4, ... 9)
-				: totalPages < currentPage + PAGES_IN_BETWEEN // The total pages are less than the page + 3, we are near the end and will slice from totalPages - 3 - 1 (account for length)
-					? totalPages - PAGES_IN_BETWEEN - 1 // (1 ... 6, 7, 8, 9)
+				: totalPages < currentPage + PAGES_TO_DISPLAY_IN_BETWEEN // The total pages are less than the page + 3, we are near the end and will slice from totalPages - 3 - 1 (account for length)
+					? totalPages - PAGES_TO_DISPLAY_IN_BETWEEN - 1 // (1 ... 6, 7, 8, 9)
 					: currentPage - 2; // If neither or the two conditions are true, we are traversing the middle pages and show the current page and one to both sides of it (1 ... 3, 4, 5 ... 9)
 	}
 </script>
 
-<nav class="flex-center" style="height: 48px">
-	<!-- Previous page button -->
-	{#if currentPage !== 1 && totalPages >= 2}
-		<button on:click={() => onPageClick(currentPage - 1)} style="width: 96px;">Pág. anterior</button
+<nav>
+	<div class="per-page-container">
+		<label for="per-page">Resultados por página</label>
+		<select
+			name="per-page"
+			on:change={(e) => onPerPageChange(Number(e.currentTarget?.value))}
+			id="per-page"
 		>
-	{/if}
-
-	<!-- Page 1 button -->
-	<button
-		class={currentPage === 1 ? 'active-page' : ''}
-		disabled={currentPage === 1}
-		on:click={() => onPageClick(1)}>1</button
-	>
-
-	<!-- Rest of pages buttons -->
-	{#if totalPages > PAGES_IN_BETWEEN + 2}
-		{#if currentPage >= 1 + PAGES_IN_BETWEEN}
-			<span>...</span>
+			<option selected={perPage == 9} value="9">9</option>
+			<option selected={perPage == 18} value="18">18</option>
+			<option selected={perPage == 27} value="27">27</option>
+		</select>
+	</div>
+	<div class="flex-center">
+		<!-- Previous page button -->
+		{#if currentPage !== 1 && totalPages >= 2}
+			<button on:click={() => onPageClick(currentPage - 1)} style="width: 96px;"
+				>Pág. anterior</button
+			>
 		{/if}
 
-		{#each pagesArray.slice(sliceIndex, sliceIndex + 3) as i}
-			<button
-				class={currentPage === i ? 'active-page' : ''}
-				disabled={currentPage === i}
-				on:click={() => onPageClick(i)}>{i}</button
-			>
-		{/each}
+		<!-- Page 1 button -->
+		<button
+			class={currentPage === 1 ? 'active-page' : ''}
+			disabled={currentPage === 1}
+			on:click={() => onPageClick(1)}>1</button
+		>
+
+		<!-- Rest of pages buttons -->
+		{#if totalPages > PAGES_TO_DISPLAY_IN_BETWEEN + 2}
+			{#if currentPage >= 1 + PAGES_TO_DISPLAY_IN_BETWEEN}
+				<span>...</span>
+			{/if}
 
-		{#if currentPage <= totalPages - PAGES_IN_BETWEEN}
-			<span>...</span>
+			{#each pagesArray.slice(pagesSliceIndex, pagesSliceIndex + 3) as i}
+				<button
+					class={currentPage === i ? 'active-page' : ''}
+					disabled={currentPage === i}
+					on:click={() => onPageClick(i)}>{i}</button
+				>
+			{/each}
+
+			{#if currentPage <= totalPages - PAGES_TO_DISPLAY_IN_BETWEEN}
+				<span>...</span>
+			{/if}
+		{:else}
+			{#each Array.from(Array(totalPages - 2)).keys() as i}
+				<button
+					class={currentPage === i + 2 ? 'active-page' : ''}
+					disabled={currentPage === i + 2}
+					on:click={() => onPageClick(i + 2)}>{i + 2}</button
+				>
+			{/each}
 		{/if}
-	{:else}
-		{#each Array.from(Array(totalPages - 2)).keys() as i}
-			<button
-				class={currentPage === i + 2 ? 'active-page' : ''}
-				disabled={currentPage === i + 2}
-				on:click={() => onPageClick(i + 2)}>{i + 2}</button
-			>
-		{/each}
-	{/if}
-
-	<!-- Last page button -->
-	<button
-		class={currentPage === totalPages ? 'active-page' : ''}
-		disabled={currentPage === totalPages}
-		on:click={() => onPageClick(totalPages)}>{totalPages}</button
-	>
-
-	<!-- Next page button -->
-	{#if currentPage !== totalPages && totalPages > 2}
-		<button on:click={() => onPageClick(currentPage + 1)} style="width: 96px;"
-			>Pág. siguiente</button
+
+		<!-- Last page button -->
+		<button
+			class={currentPage === totalPages ? 'active-page' : ''}
+			disabled={currentPage === totalPages}
+			on:click={() => onPageClick(totalPages)}>{totalPages}</button
 		>
-	{/if}
+
+		<!-- Next page button -->
+		{#if currentPage !== totalPages && totalPages > 2}
+			<button on:click={() => onPageClick(currentPage + 1)} style="width: 96px;"
+				>Pág. siguiente</button
+			>
+		{/if}
+	</div>
 </nav>
 
 <style lang="scss">
 	@import '../../sass/colors.scss';
+	@import '../../sass/variables.scss';
 	nav {
-		*:not(:last-child) {
-			margin-right: 6px;
+		align-items: center;
+		display: flex;
+
+		@media (max-width: $tabletBreakpoint) {
+			flex-direction: column-reverse;
+
+			*:not(:last-child) {
+				margin-right: 0px;
+			}
 		}
 	}
 
 	button {
 		background-color: transparent;
 		border-radius: 8px;
-		font-size: 18px;
+		font-size: 1.125rem;
 		padding: 1px 0;
 		width: 32px;
 
@@ -98,4 +123,23 @@
 		background-color: $darkPrimaryColor;
 		color: $grey100;
 	}
+
+	.per-page-container {
+		margin-right: 24px;
+
+		@media (max-width: $tabletBreakpoint) {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+			margin-right: 0px;
+			margin-top: 24px;
+		}
+	}
+
+	select {
+		@media (max-width: $tabletBreakpoint) {
+			height: 48px;
+			width: 48px;
+		}
+	}
 </style>
diff --git a/src/lib/components/RecipeCard.svelte b/src/lib/components/RecipeCard.svelte
@@ -65,7 +65,7 @@
 	.title-container {
 		display: flex;
 		justify-content: space-between;
-		font-size: 16px;
+		font-size: 1rem;
 
 		@media (max-width: 720px) {
 			align-items: center;

diff --git a/src/lib/components/RecipeForm.svelte b/src/lib/components/RecipeForm.svelte
@@ -75,6 +75,7 @@
 		{/if}
 		<div>
 			<ImageUploadInput {files} validateImage={validateFile} recipeImage={values?.pictures[0]} />
+			<p class="max-size-note">Tamaño máximo: 500 KB</p>
 			{#if imageErrorMessage}
 				<p class="error">{imageErrorMessage}</p>
 			{/if}
@@ -267,7 +268,7 @@
 	}
 
 	.field-details {
-		font-size: 14px;
+		font-size: 0.875rem;
 	}
 
 	.button-container {
@@ -277,4 +278,10 @@
 			width: auto;
 		}
 	}
+
+	.max-size-note {
+		color: $grey800;
+		font-size: 0.875rem;
+		margin-top: 0;
+	}
 </style>
diff --git a/src/lib/components/RecipesSearchForm.svelte b/src/lib/components/RecipesSearchForm.svelte
@@ -123,7 +123,7 @@
 	@import '../../sass/variables.scss';
 
 	form {
-		font-size: 18px;
+		font-size: 1.125rem;
 
 		> *:not(:last-child) {
 			margin-bottom: 16px;

diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -45,7 +45,7 @@ import {
 	slugify
 } from './scripts/strings';
 import { scaleIngredients } from './scripts/recipe';
-import { buildRecipesApiUrl, buildRecipesBrowserUrl, updateURLSearchParam } from './scripts/urls';
+import { buildRecipesApiUrl, buildRecipesBrowserUrl } from './scripts/urls';
 
 export {
 	capitalizeFirstLetter,
@@ -55,7 +55,6 @@ export {
 	scaleIngredients,
 	buildRecipesApiUrl,
 	buildRecipesBrowserUrl,
-	updateURLSearchParam
 };
 
 // Images such as empty state, errors

diff --git a/src/lib/scripts/urls.ts b/src/lib/scripts/urls.ts
@@ -1,5 +1,3 @@
-import { browser } from '$app/environment';
-import { goto } from '$app/navigation';
 import type { RecipeParameters } from '$lib/types/Recipe';
 
 function buildRecipesApiUrl(apiUrl: string, url: URL) {
@@ -8,7 +6,7 @@ function buildRecipesApiUrl(apiUrl: string, url: URL) {
 	const page = url.searchParams.get('pagina');
 	urlWithParams += `page=${page ?? '1'}`;
 
-	const limit = url.searchParams.get('limit');
+	const limit = url.searchParams.get('por_pagina');
 	urlWithParams += `&limit=${limit ?? '9'}`;
 
 	if (url.searchParams.get('nombre')) {
@@ -51,7 +49,7 @@ function buildRecipesBrowserUrl({
 	difficulties,
 	onlyVegetarian,
 	page,
-	resultsPerPage,
+	perPage,
 	ids
 }: RecipeParameters) {
 	let browserUrl = `/recetas?`;
@@ -82,17 +80,9 @@ function buildRecipesBrowserUrl({
 		}
 	}
 
-	browserUrl += `pagina=${page ?? '1'}&limit=${resultsPerPage ?? '9'}`;
+	browserUrl += `pagina=${page ?? '1'}&por_pagina=${perPage ?? '9'}`;
 
 	return browserUrl;
 }
 
-function updateURLSearchParam(param: string, value: string) {
-	if (browser) {
-		const url = new URL(window.location.href);
-		url.searchParams.set(param, value);
-		goto(url);
-	}
-}
-
-export { buildRecipesApiUrl, buildRecipesBrowserUrl, updateURLSearchParam };
+export { buildRecipesApiUrl, buildRecipesBrowserUrl };
diff --git a/src/lib/types/Recipe.d.ts b/src/lib/types/Recipe.d.ts
@@ -4,7 +4,7 @@ type RecipeParameters = {
 	difficulties?: string[];
 	onlyVegetarian?: boolean;
 	page?: number;
-	resultsPerPage?: number;
+	perPage?: number;
 	ids?: string[];
 };
 

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+	<script lang="ts">
 	import { page } from '$app/stores';
 	import { ServerError } from '$lib';
 </script>