Skip to content

Commit 6af4c6f

Browse files
AbstractFruitFactoryAbstractFruitFactory
committed
style: rework recipe page mobile layout
1 parent 91da80d commit 6af4c6f

9 files changed

Lines changed: 252 additions & 171 deletions

File tree

‎src/lib/components/cooking-mode/CookingMode.svelte‎

Lines changed: 56 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,23 @@
55
import ChevronLeft from 'lucide-svelte/icons/chevron-left'
66
import ChevronRight from 'lucide-svelte/icons/chevron-right'
77
import Hint from '$lib/components/hint/Hint.svelte'
8+
import IngredientsList from '$lib/components/ingredients-list/IngredientsList.svelte'
9+
import type { UnitSystem } from '$lib/state/unitPreference.svelte'
810
911
let {
1012
instructions,
11-
isOpen = $bindable(false)
13+
isOpen = $bindable(false),
14+
inline = false,
15+
servings = 1,
16+
originalServings = 1,
17+
unitSystem = 'imperial'
1218
}: {
1319
instructions: Instruction[]
1420
isOpen: boolean
21+
inline?: boolean
22+
servings?: number
23+
originalServings?: number
24+
unitSystem?: UnitSystem
1525
} = $props()
1626
1727
let currentStep = $state(0)
@@ -76,8 +86,32 @@
7686
}
7787
</script>
7888

79-
<Popup bind:isOpen onClose={() => (isOpen = false)} width="800px">
89+
{#snippet navigation()}
90+
<div class="cooking-navigation">
91+
<Button color="secondary" onclick={prevStep} disabled={currentStep === 0}>
92+
<ChevronLeft color="black" />
93+
</Button>
94+
95+
<div class="cooking-step-text">
96+
Step {currentStep + 1} of {instructions.length}
97+
</div>
98+
99+
<Button color="secondary" onclick={nextStep}>
100+
{#if currentStep < instructions.length - 1}
101+
<ChevronRight color="black" />
102+
{:else}
103+
Done
104+
{/if}
105+
</Button>
106+
</div>
107+
{/snippet}
108+
109+
{#snippet content()}
80110
<div class="cooking-mode">
111+
{#if inline}
112+
{@render navigation()}
113+
{/if}
114+
81115
<div
82116
class="cooking-content"
83117
ontouchstart={handleCookingTouchStart}
@@ -123,23 +157,14 @@
123157
{#if instructions[currentStep]}
124158
{@const step = instructions[currentStep]}
125159
<div>
126-
<h3>Step {currentStep + 1}</h3>
127160
{#if step.ingredients && step.ingredients.length > 0}
128161
<div class="step-ingredients">
129-
<h4>Ingredients needed:</h4>
130-
<ul class="ingredients-list">
131-
{#each step.ingredients as ingredient}
132-
<li class="ingredient-item">
133-
<span class="ingredient-quantity">
134-
{ingredient.quantity?.text}
135-
{ingredient.measurement}
136-
</span>
137-
<span class="ingredient-name">
138-
{ingredient.displayName}
139-
</span>
140-
</li>
141-
{/each}
142-
</ul>
162+
<IngredientsList
163+
ingredients={step.ingredients}
164+
servings={servings}
165+
originalServings={originalServings}
166+
{unitSystem}
167+
/>
143168
</div>
144169
{/if}
145170

@@ -152,25 +177,19 @@
152177
{/if}
153178
</div>
154179

155-
<div class="cooking-navigation">
156-
<Button color="primary" onclick={prevStep} disabled={currentStep === 0}>
157-
<ChevronLeft color="black" />
158-
</Button>
159-
160-
<div class="cooking-step-text">
161-
Step {currentStep + 1} of {instructions.length}
162-
</div>
163-
164-
<Button color="primary" onclick={nextStep}>
165-
{#if currentStep < instructions.length - 1}
166-
<ChevronRight color="black" />
167-
{:else}
168-
Done
169-
{/if}
170-
</Button>
171-
</div>
180+
{#if !inline}
181+
{@render navigation()}
182+
{/if}
172183
</div>
173-
</Popup>
184+
{/snippet}
185+
186+
{#if inline}
187+
{@render content()}
188+
{:else}
189+
<Popup bind:isOpen onClose={() => (isOpen = false)} width="800px" height="80dvh">
190+
{@render content()}
191+
</Popup>
192+
{/if}
174193

175194
<style lang="scss">
176195
@use '$lib/styles/tokens' as *;
@@ -180,6 +199,7 @@
180199
flex-direction: column;
181200
background: var(--color-background);
182201
min-height: 0;
202+
height: 100%;
183203
184204
@include mobile {
185205
justify-content: space-between;
@@ -248,7 +268,7 @@
248268
249269
.cooking-step-text {
250270
font-size: var(--font-size-sm);
251-
color: var(--color-neutral-light);
271+
color: var(--color-text-on-surface);
252272
font-weight: var(--font-weight-medium);
253273
}
254274
@@ -288,9 +308,6 @@
288308
}
289309
290310
.step-ingredients {
291-
padding: var(--spacing-lg);
292-
background: var(--color-background-dark);
293-
border-radius: var(--border-radius-2xl);
294311
margin-bottom: var(--spacing-lg);
295312
}
296313
@@ -301,31 +318,7 @@
301318
color: var(--color-text-on-surface);
302319
}
303320
304-
.ingredients-list {
305-
list-style: none;
306-
padding: 0;
307-
margin: 0;
308-
display: flex;
309-
flex-direction: column;
310-
gap: var(--spacing-xs);
311-
}
312-
313321
.step-hint {
314322
margin: var(--spacing-md) 0;
315323
}
316-
317-
.ingredient-item {
318-
display: flex;
319-
align-items: center;
320-
gap: var(--spacing-sm);
321-
padding: var(--spacing-xs) 0;
322-
}
323-
324-
.ingredient-quantity {
325-
font-weight: var(--font-weight-semibold);
326-
}
327-
328-
.ingredient-name {
329-
color: var(--color-text-on-surface);
330-
}
331324
</style>

‎src/lib/components/info-footer/InfoFooter.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,10 @@
113113
position: fixed;
114114
bottom: var(--spacing-lg);
115115
right: var(--spacing-lg);
116-
117-
@include mobile {
118-
bottom: 65px;
119-
}
120116
}
121117
122118
.info-button {
123-
background: var(--color-primary-light);
119+
background: var(--color-secondary);
124120
border: none;
125121
border-radius: 50%;
126122
aspect-ratio: 1/1;
@@ -144,6 +140,10 @@
144140
&:active {
145141
transform: scale(0.95);
146142
}
143+
144+
@include mobile {
145+
width: 50px;
146+
}
147147
}
148148
149149
.info-panel {

‎src/lib/components/layout/Layout.svelte‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@
3434
{@render header()}
3535
</header>
3636

37+
<div class="mobile-top-bar">
38+
{@render bottomNavBar()}
39+
</div>
40+
3741
<main class="main" class:homepage bind:this={mainElement}>
3842
<div class="main-page-header-background"></div>
3943
{#if homepage}
@@ -51,18 +55,14 @@
5155
</div>
5256
</div>
5357
</main>
54-
55-
<div class="mobile-bottom-bar">
56-
{@render bottomNavBar()}
57-
</div>
5858
</div>
5959

6060
<style lang="scss">
6161
@use '$lib/styles/tokens' as *;
6262
6363
$content-max-width: 1200px;
6464
$header-height: 5rem;
65-
$bottom-bar-height: 50px;
65+
$top-bar-height: 50px;
6666
6767
.layout {
6868
display: flex;
@@ -82,7 +82,6 @@
8282
8383
@include mobile {
8484
padding-top: 0;
85-
padding-bottom: $bottom-bar-height;
8685
}
8786
}
8887
@@ -145,17 +144,12 @@
145144
margin-left: calc(-50vw + 50%);
146145
}
147146
148-
.mobile-bottom-bar {
147+
.mobile-top-bar {
149148
display: none;
149+
height: $top-bar-height;
150150
151151
@include mobile {
152152
display: block;
153-
position: fixed;
154-
bottom: 0;
155-
left: 0;
156-
right: 0;
157-
height: $bottom-bar-height;
158-
z-index: var(--z-sticky);
159153
}
160154
}
161155
@@ -171,6 +165,7 @@
171165
@include mobile {
172166
padding: 0;
173167
margin-left: 0 !important;
168+
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
174169
}
175170
}
176171
@@ -224,7 +219,7 @@
224219
225220
@include mobile {
226221
padding-top: var(--spacing-md);
227-
min-height: calc(100dvh - $bottom-bar-height);
222+
min-height: calc(100dvh - $top-bar-height);
228223
229224
&.homepage {
230225
padding-top: 0;

src/lib/components/navigation/BottomNav.svelte renamed to src/lib/components/navigation/MobileNav.svelte

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}>()
2020
</script>
2121

22-
<nav class="bottom-nav">
22+
<nav class="top-nav">
2323
<a href={homeHref} class="nav-item">
2424
<Home size={20} color="black" />
2525
</a>
@@ -36,20 +36,13 @@
3636
</nav>
3737

3838
<style lang="scss">
39-
.bottom-nav {
40-
position: fixed;
41-
bottom: 0;
42-
left: 0;
43-
right: 0;
44-
background: var(--color-background);
45-
border-top: 1px solid var(--color-neutral-light);
39+
.top-nav {
40+
background: var(--color-secondary);
4641
display: flex;
4742
justify-content: space-between;
48-
align-items: flex-end;
49-
z-index: 100;
43+
align-items: center;
5044
height: 50px;
51-
padding: 0;
52-
overflow: visible;
45+
overflow: hidden;
5346
}
5447
5548
.nav-item {

‎src/lib/components/popup/Popup.svelte‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
showCloseButton = true,
1111
closeOnClickOutside = true,
1212
width = '400px',
13+
height = 'auto',
1314
onClose,
1415
children,
1516
headerActions,
@@ -20,6 +21,7 @@
2021
showCloseButton?: boolean
2122
closeOnClickOutside?: boolean
2223
width?: string
24+
height?: string
2325
onClose?: () => void
2426
children?: Snippet
2527
headerActions?: Snippet
@@ -42,7 +44,7 @@
4244
4345
let popupContainer = $state<HTMLDivElement>()
4446
let popupContent = $state<HTMLDivElement>()
45-
47+
4648
const handleOpen = async () => {
4749
if (animateFrom) {
4850
const flip = (await import('gsap/Flip')).Flip
@@ -148,7 +150,11 @@
148150
onclick={handleClickOutside}
149151
>
150152
{#snippet container()}
151-
<div bind:this={popupContainer} class="popup-container" style="width: {width};">
153+
<div
154+
bind:this={popupContainer}
155+
class="popup-container"
156+
style="width: {width}; height: {height};"
157+
>
152158
{#if title || showCloseButton}
153159
<div class="popup-header">
154160
<div>
@@ -232,6 +238,10 @@
232238
align-items: center;
233239
justify-content: space-between;
234240
padding: var(--spacing-lg);
241+
242+
@include mobile {
243+
padding: var(--spacing-md);
244+
}
235245
}
236246
237247
.popup-actions {
@@ -268,12 +278,14 @@
268278
269279
.popup-content {
270280
padding: var(--spacing-lg) var(--spacing-2xl);
281+
padding-top: 0;
271282
overflow-y: scroll;
272283
height: 100%;
273284
scrollbar-width: thin;
274285
275286
@include mobile {
276287
padding: var(--spacing-md);
288+
padding-top: 0;
277289
}
278290
}
279291
</style>

0 commit comments

Comments
 (0)