Skip to content

Commit f6d1cec

Browse files
Shrinks99Shrinks99
committed
Card CSS refactor
1 parent cc2392e commit f6d1cec

1 file changed

Lines changed: 111 additions & 101 deletions

File tree

‎src/onboarding.ts‎

Lines changed: 111 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -24,76 +24,74 @@ export class OnboardingView extends LitElement {
2424
position: relative;
2525
display: flex;
2626
flex-direction: column;
27+
overflow: hidden; /* Changed from scroll to hidden */
2728
width: 100vw;
2829
height: 100vh;
29-
overflow: hidden;
3030
background: url(${unsafeCSS(forestImg)}) center/cover no-repeat;
3131
}
3232
33-
.slides {
34-
position: relative;
33+
.slides-container {
3534
flex: 1;
35+
overflow: hidden;
36+
position: relative;
37+
}
38+
39+
.slides {
3640
display: flex;
3741
align-items: center;
38-
justify-content: center;
39-
overflow: hidden;
42+
justify-content: flex-start; /* Changed from center */
43+
height: 100%;
44+
transition: transform 300ms ease-in-out;
45+
padding: 2rem;
46+
gap: 2rem;
47+
box-sizing: border-box;
48+
}
49+
50+
/* Transform classes for the slides container */
51+
.slides.step-0 {
52+
transform: translateX(0);
53+
}
54+
55+
.slides.step-1 {
56+
transform: translateX(calc(-100vw + 2rem));
57+
}
58+
59+
.slides.step-2 {
60+
transform: translateX(calc(-200vw + 4rem));
61+
}
62+
63+
.slides.step-3 {
64+
transform: translateX(calc(-300vw + 6rem));
4065
}
4166
4267
.slide {
43-
position: absolute;
44-
width: 90%;
45-
max-width: 400px;
46-
height: 97%;
47-
max-height: 650px;
68+
width: calc(100vw - 4rem);
69+
height: 100%;
4870
box-sizing: border-box;
4971
padding: 2rem;
5072
background: var(--md-sys-color-surface);
51-
border-radius: 32px;
73+
border-radius: 0.5rem;
5274
box-shadow: var(--md-sys-elevation-level2);
5375
display: flex;
5476
flex-direction: column;
55-
transform: translateX(calc(50vw + 250px));
56-
transition:
57-
transform 300ms ease-in-out,
58-
opacity 300ms ease-in-out;
59-
opacity: 1; /* Changed from 0 to 1 */
60-
margin-top: -50px;
61-
}
62-
63-
/* Active slide */
64-
.slide[active] {
65-
transform: translateX(0);
66-
opacity: 1;
77+
flex-shrink: 0; /* Prevent slides from shrinking */
6778
}
6879
69-
/* Previous slides (to the left) */
70-
.slide[prev] {
71-
transform: translateX(calc(-50vw - 250px));
72-
opacity: 1; /* Keep visible during transition */
80+
.slide.hidden {
81+
opacity: 0;
7382
}
7483
75-
/* Next slides (to the right) */
76-
.slide[next] {
77-
transform: translateX(calc(50vw + 250px));
78-
opacity: 1; /* Keep visible during transition */
79-
}
80-
81-
/* First slide - full screen, no card */
82-
.slide[first] {
83-
position: absolute;
84-
width: 100%;
85-
height: 100%;
86-
max-width: none;
87-
max-height: none;
84+
/* First slide - full screen, no card styling */
85+
.slide.first {
8886
background: transparent;
8987
box-shadow: none;
9088
border-radius: 0;
9189
padding: 0;
90+
height: 100%;
9291
}
9392
9493
/* First slide content */
9594
.first-content {
96-
width: 100%;
9795
height: 100%;
9896
display: flex;
9997
flex-direction: column;
@@ -116,13 +114,24 @@ export class OnboardingView extends LitElement {
116114
align-items: center;
117115
text-align: center;
118116
gap: 1rem;
117+
max-height: 100%;
118+
}
119+
120+
.card-content-imgcontainer {
121+
width: 100%;
122+
flex-shrink: 1;
123+
flex-grow: 1;
124+
display: flex;
125+
align-items: center;
126+
justify-content: center;
127+
overflow: hidden;
119128
}
120129
121130
.card-content img {
122131
width: 100%;
123-
height: auto;
124-
object-fit: contain;
125-
margin-bottom: 1.5rem;
132+
height: 100%;
133+
object-fit: contain; /* or 'cover', depending on your goal */
134+
display: block;
126135
}
127136
128137
.card-content md-divider {
@@ -135,8 +144,6 @@ export class OnboardingView extends LitElement {
135144
display: flex;
136145
justify-content: center;
137146
gap: 0.5rem;
138-
margin-top: auto;
139-
padding-bottom: 1rem;
140147
}
141148
142149
.dot {
@@ -153,10 +160,6 @@ export class OnboardingView extends LitElement {
153160
154161
/* Bottom navigation panel */
155162
.bottom-panel {
156-
position: absolute;
157-
bottom: 0;
158-
left: 0;
159-
right: 0;
160163
background: var(--md-sys-color-surface);
161164
box-shadow: var(--md-sys-elevation-level2);
162165
}
@@ -228,59 +231,66 @@ export class OnboardingView extends LitElement {
228231

229232
render() {
230233
return html`
231-
<div class="slides">
232-
${this.content.map(
233-
(slide, i) => html`
234-
<div
235-
class="slide"
236-
?active=${i === this.step}
237-
?prev=${i < this.step}
238-
?next=${i > this.step}
239-
?first=${i === 0}
240-
>
241-
${i === 0
242-
? html`
243-
<div class="first-content">
244-
<span class="logo" role="img" aria-label="Packrat by OPFN logo">${unsafeSVG(packratLogo)}</span>
245-
<md-filled-button @click=${this._next}>
246-
Get Started
247-
</md-filled-button>
248-
</div>
249-
`
250-
: html`
251-
<div class="card-content">
252-
<img src="${slide.img}" alt="" />
253-
<div
254-
class="md-typescale-body-medium"
255-
style="--md-sys-typescale-body-medium-weight: 700"
256-
>
257-
${slide.title}
234+
<div class="slides-container">
235+
<div class="slides step-${this.step}">
236+
${this.content.map(
237+
(slide, i) => html`
238+
<div
239+
class="slide ${i === 0 ? "first" : ""} ${i !== this.step
240+
? "hidden"
241+
: ""}"
242+
>
243+
${i === 0
244+
? html`
245+
<div class="first-content">
246+
<span
247+
class="logo"
248+
role="img"
249+
aria-label="Packrat by OPFN logo"
250+
>${unsafeSVG(packratLogo)}</span
251+
>
252+
<md-filled-button @click=${this._next}>
253+
Get Started
254+
</md-filled-button>
258255
</div>
259-
<md-divider></md-divider>
260-
<div
261-
class="md-typescale-body-small"
262-
style="color: gray; max-width: 90%; line-height: 1.5;"
263-
>
264-
${slide.body}
256+
`
257+
: html`
258+
<div class="card-content">
259+
<div class="card-content-imgcontainer">
260+
<img src="${slide.img}" alt="" />
261+
</div>
262+
<div
263+
style="display: flex; justify-content: center; align-items: center; flex-direction: column;"
264+
>
265+
<div class="md-typescale-body-medium">
266+
${slide.title}
267+
</div>
268+
<md-divider></md-divider>
269+
<div
270+
class="md-typescale-body-small"
271+
style="color: gray; max-width: 90%; line-height: 1.5;"
272+
>
273+
${slide.body}
274+
</div>
275+
</div>
276+
<div class="dots">
277+
${this.content
278+
.slice(1)
279+
.map(
280+
(_, j) => html`
281+
<div
282+
class="dot"
283+
?active=${j + 1 === this.step}
284+
></div>
285+
`,
286+
)}
287+
</div>
265288
</div>
266-
</div>
267-
268-
<div class="dots">
269-
${this.content
270-
.slice(1)
271-
.map(
272-
(_, j) => html`
273-
<div
274-
class="dot"
275-
?active=${j + 1 === this.step}
276-
></div>
277-
`,
278-
)}
279-
</div>
280-
`}
281-
</div>
282-
`,
283-
)}
289+
`}
290+
</div>
291+
`,
292+
)}
293+
</div>
284294
</div>
285295
286296
<div class="bottom-panel" ?hidden=${this.step === 0}>

0 commit comments

Comments
 (0)