@revenuecat/purchases-ui-js 4.10.0 → 4.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -155,8 +155,9 @@
|
|
|
155
155
|
|
|
156
156
|
<style>
|
|
157
157
|
.backdrop {
|
|
158
|
-
position:
|
|
158
|
+
position: fixed;
|
|
159
159
|
inset: 0 0 0 0;
|
|
160
|
+
z-index: 1000;
|
|
160
161
|
width: 100%;
|
|
161
162
|
height: 100%;
|
|
162
163
|
background-color: #0000003f;
|
|
@@ -172,18 +173,18 @@
|
|
|
172
173
|
transition-duration: 225ms;
|
|
173
174
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
174
175
|
transform: translateY(100%);
|
|
176
|
+
}
|
|
175
177
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
178
|
+
.sheet::before {
|
|
179
|
+
content: "";
|
|
180
|
+
position: absolute;
|
|
181
|
+
inset: 0;
|
|
182
|
+
background: var(--overlay);
|
|
183
|
+
pointer-events: none;
|
|
184
|
+
}
|
|
183
185
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}
|
|
186
|
+
.sheet.visible {
|
|
187
|
+
transform: translateY(0);
|
|
187
188
|
}
|
|
188
189
|
|
|
189
190
|
.sheet.rc-sheet-video-bg::before {
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
import type { ComponentProps } from "svelte";
|
|
4
4
|
|
|
5
5
|
import Screen from "./Screen.svelte";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
paywallData,
|
|
8
|
+
paywallWithHeader,
|
|
9
|
+
uiConfigData,
|
|
10
|
+
} from "../../stories/fixtures";
|
|
7
11
|
import type { WorkflowScreen } from "../../types/workflow";
|
|
8
12
|
|
|
9
13
|
const defaultScreen: WorkflowScreen = {
|
|
@@ -18,6 +22,25 @@
|
|
|
18
22
|
template_name: "stack",
|
|
19
23
|
};
|
|
20
24
|
|
|
25
|
+
// `paywallData` (image, three packages, sticky footer) is taller than a
|
|
26
|
+
// desktop viewport; borrow the header from `paywallWithHeader`.
|
|
27
|
+
const tallScreenWithHeader: WorkflowScreen = {
|
|
28
|
+
...defaultScreen,
|
|
29
|
+
components_config: {
|
|
30
|
+
...paywallData.components_config,
|
|
31
|
+
base: {
|
|
32
|
+
...paywallData.components_config.base,
|
|
33
|
+
header: paywallWithHeader.components_config.base.header,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
components_localizations: {
|
|
37
|
+
en_US: {
|
|
38
|
+
...paywallWithHeader.components_localizations.en_US,
|
|
39
|
+
...paywallData.components_localizations.en_US,
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
21
44
|
const { Story } = defineMeta({
|
|
22
45
|
title: "Components/Screen",
|
|
23
46
|
component: Screen,
|
|
@@ -38,8 +61,31 @@
|
|
|
38
61
|
</div>
|
|
39
62
|
{/snippet}
|
|
40
63
|
|
|
64
|
+
<!--
|
|
65
|
+
Mirrors the root purchases-js creates in `presentPaywall` when
|
|
66
|
+
`body.offsetWidth > 968`: fixed, `overflow: auto`, and flex-centered on both
|
|
67
|
+
axes. The Screen is mounted bare, so it has to size itself; if it grows to
|
|
68
|
+
its content height instead, the flex centering pushes the header into
|
|
69
|
+
unscrollable overflow above the viewport.
|
|
70
|
+
-->
|
|
71
|
+
{#snippet embeddedTemplate(props: ComponentProps<typeof Screen>)}
|
|
72
|
+
<div class="rcb-ui-pw-root">
|
|
73
|
+
<Screen {...props} />
|
|
74
|
+
</div>
|
|
75
|
+
{/snippet}
|
|
76
|
+
|
|
41
77
|
<Story name="Default" />
|
|
42
78
|
|
|
79
|
+
<Story
|
|
80
|
+
name="Embedded in purchases-js root (desktop)"
|
|
81
|
+
template={embeddedTemplate}
|
|
82
|
+
args={{
|
|
83
|
+
paywallComponents: tallScreenWithHeader,
|
|
84
|
+
containerId: "embedded-screen-container",
|
|
85
|
+
}}
|
|
86
|
+
parameters={{ layout: "fullscreen" }}
|
|
87
|
+
/>
|
|
88
|
+
|
|
43
89
|
<style>
|
|
44
90
|
.viewport-frame {
|
|
45
91
|
position: fixed;
|
|
@@ -60,11 +106,16 @@
|
|
|
60
106
|
overflow: hidden;
|
|
61
107
|
}
|
|
62
108
|
|
|
63
|
-
|
|
109
|
+
.rcb-ui-pw-root {
|
|
110
|
+
position: fixed;
|
|
111
|
+
top: 0;
|
|
112
|
+
left: 0;
|
|
113
|
+
width: 100%;
|
|
114
|
+
height: 100%;
|
|
115
|
+
overflow: auto;
|
|
116
|
+
background-color: var(--rc-purchases-ui-bg-color, Canvas);
|
|
64
117
|
display: flex;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
min-height: 0;
|
|
68
|
-
overflow: hidden;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
align-items: center;
|
|
69
120
|
}
|
|
70
121
|
</style>
|
|
@@ -155,3 +155,18 @@
|
|
|
155
155
|
</div>
|
|
156
156
|
{/if}
|
|
157
157
|
</div>
|
|
158
|
+
|
|
159
|
+
<style>
|
|
160
|
+
/* Size the container so the paywall's `height: 100%` resolves and the
|
|
161
|
+
content column scrolls internally. Without it the paywall grows to its
|
|
162
|
+
content height, and a flex-centered host (purchases-js on desktop)
|
|
163
|
+
pushes the top of it into unscrollable overflow. Percentages against an
|
|
164
|
+
auto-height host still collapse to auto, so content-sized embeds are
|
|
165
|
+
unchanged. */
|
|
166
|
+
.paywall-container {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
height: 100%;
|
|
170
|
+
min-height: 0;
|
|
171
|
+
}
|
|
172
|
+
</style>
|