위젯 페이지 위아래 그라데이션 추가 (#1504)

penxle · Nov 22, 2024 · 2e9a0d6 · 2e9a0d6
1 parent b577891
commit 2e9a0d6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/apps/usersite/src/routes/_/render/[id]/+page.svelte b/apps/usersite/src/routes/_/render/[id]/+page.svelte
@@ -37,6 +37,6 @@
 </script>
 
 <div style:--usersite-theme-color={$query.publicSite.themeColor} class={css({ display: 'contents' })}>
-  <h1 class={css({ textStyle: '34b', marginBottom: '32px' })}>{$query.publicPageById.title}</h1>
-  <TiptapRenderer content={$query.publicPageById.content.content} />
+  <h1 class={css({ textStyle: '34b', marginTop: '28px', marginBottom: '32px' })}>{$query.publicPageById.title}</h1>
+  <TiptapRenderer style={css.raw({ marginBottom: '28px' })} content={$query.publicPageById.content.content} />
 </div>
diff --git a/sdks/browser-sdk/src/components/PageContent.svelte b/sdks/browser-sdk/src/components/PageContent.svelte
@@ -10,6 +10,30 @@
   let { siteUrl, pageId }: Props = $props();
 </script>
 
-<div class={flex({ flexGrow: '1', paddingX: '20px', paddingY: '28px' })}>
+<div class={flex({ flexGrow: '1', position: 'relative', paddingX: '20px' })}>
+  <div
+    class={css({
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: 'full',
+      height: '32px',
+      bgGradient: 'to-b',
+      gradientFrom: 'white',
+      gradientTo: 'white/0',
+    })}
+  ></div>
   <iframe class={css({ flexGrow: '1', width: 'full' })} src={`${siteUrl}/_/render/${pageId}`} title=""></iframe>
+  <div
+    class={css({
+      position: 'absolute',
+      bottom: '0',
+      left: '0',
+      width: 'full',
+      height: '32px',
+      bgGradient: 'to-t',
+      gradientFrom: 'white',
+      gradientTo: 'white/0',
+    })}
+  ></div>
 </div>