fix strategy PageHeading responsive/mobile formatting

- adjust layout of image on small screens - adjust font sizing and spacings on small screens - refactor to use optional props/slots
tradingstrategy-ai · Sep 27, 2023 · 001a299 · 001a299
1 parent 8c3e368
commit 001a299
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 61 deletions.
diff --git a/src/lib/components/PageHeading.svelte b/src/lib/components/PageHeading.svelte
@@ -1,79 +1,127 @@
 <script lang="ts">
-	export let level = 1;
+	export let title: MaybeString = undefined;
+	export let prefix: MaybeString = undefined;
+	export let description: MaybeString = undefined;
+
+	$: hasLogo = Boolean($$slots.logo);
+	$: hasPrefix = Boolean(prefix ?? $$slots.prefix);
 </script>
 
-<header class="page-heading level-{level}">
-	{#if $$slots.logo}
+<header class="page-heading" class:hasLogo class:hasPrefix>
+	{#if hasLogo}
 		<div class="logo">
 			<slot name="logo" />
 		</div>
 	{/if}
 	<div class="content">
-		<slot />
+		<h1>
+			{#if hasPrefix}
+				<span class="prefix">
+					<slot name="prefix">{prefix}</slot>
+				</span>
+			{/if}
+			<slot name="title">{title}</slot>
+		</h1>
+		{#if description}
+			<p>{description}</p>
+		{/if}
 	</div>
 </header>
 
 <style lang="postcss">
 	.page-heading {
-		padding-bottom: var(--space-xl);
+		--gap: 1rem 2rem;
+		--padding-bottom: 2rem;
+		--logo-size: 8rem;
+		--prefix-font: var(--f-heading-md-medium);
+		--prefix-spacing: var(--f-heading-md-spacing);
+		--title-font: var(--f-heading-xl-medium);
+		--title-spacing: var(--f-heading-xl-spacing);
+		--title-with-prefix-font: var(--f-heading-xxxl-medium);
+		--title-with-prefix-spacing: var(--f-heading-xxxl-spacing);
+		--desc-font: var(--f-ui-xl-roman);
+		--desc-spacing: var(--f-ui-xl-spacing);
+
+		@media (--viewport-md-down) {
+			--gap: 0.5rem 1.5rem;
+			--padding-bottom: 1.5rem;
+			--logo-size: 6rem;
+			--prefix-font: var(--f-heading-sm-medium);
+			--prefix-spacing: var(--f-heading-sm-spacing);
+			--title-font: var(--f-heading-lg-medium);
+			--title-spacing: var(--f-heading-lg-spacing);
+			--title-with-prefix-font: var(--f-heading-xl-medium);
+			--title-with-prefix-spacing: var(--f-heading-xl-spacing);
+			--desc-font: var(--f-ui-lg-roman);
+			--desc-spacing: var(--f-ui-lg-spacing);
+		}
+
+		@media (--viewport-xs) {
+			--content-display: contents;
+			--gap: 0.5rem 1rem;
+			--padding-bottom: 1rem;
+			--logo-size: 4.75rem;
+			--prefix-font: var(--f-heading-xs-medium);
+			--prefix-spacing: var(--f-heading-xs-spacing);
+			--title-font: var(--f-heading-md-medium);
+			--title-spacing: var(--f-heading-md-spacing);
+			--title-with-prefix-font: var(--f-heading-lg-medium);
+			--title-with-prefix-spacing: var(--f-heading-lg-spacing);
+			--desc-font: var(--f-ui-md-roman);
+			--desc-spacing: var(--f-ui-me-spacing);
+		}
+
+		display: grid;
+		grid-template-columns: auto;
+		gap: var(--gap);
 		align-items: center;
-		display: flex;
-		gap: 2rem;
+		padding-bottom: var(--padding-bottom);
+
+		&.hasLogo {
+			grid-template-columns: auto 1fr;
+		}
 	}
 
 	.logo {
 		background: hsla(var(--hsla-box-1));
-		border-radius: 10rem;
-		height: 8rem;
-		width: 8rem;
+		border-radius: var(--logo-size);
+		height: var(--logo-size);
+		width: var(--logo-size);
 		overflow: hidden;
 		text-align: center;
 	}
 
-	.level-1 :global {
-		h1 {
-			font: var(--f-heading-xl-medium);
-			letter-spacing: var(--f-heading-xl-spacing, normal);
-			margin-bottom: var(--space-md);
-		}
+	.content {
+		display: var(--content-display, grid);
+		gap: inherit;
+	}
 
-		p {
-			font: var(--f-ui-xl-roman);
-			letter-spacing: var(--f-ui-xl-spacing, normal);
+	h1 {
+		font: var(--title-font);
+		letter-spacing: var(--title-spacing, normal);
+		margin: 0;
+
+		.hasPrefix & {
+			font: var(--title-with-prefix-font);
+			letter-spacing: var(--title-with-prefix-spacing, normal);
 		}
-	}
 
-	.level-2 :global {
-		h1 {
+		.prefix {
+			display: block;
 			color: var(--c-text-ultra-light);
-			font: var(--f-heading-md-medium);
-			letter-spacing: var(--f-heading-md-spacing, normal);
+			font: var(--prefix-font);
+			letter-spacing: var(--prefix-spacing, normal);
 			margin-bottom: var(--space-ss);
 
-			@media (--viewport-sm-down) {
-				font: var(--f-heading-xs-medium);
-				letter-spacing: var(--f-heading-xs-spacing, normal);
-				margin: 0 0 var(--space-sl);
-			}
-
-			a {
-				font: inherit;
-
-				&:hover {
-					text-decoration: underline;
-				}
+			:global a:hover {
+				text-decoration: underline;
 			}
 		}
+	}
 
-		h2 {
-			font: var(--f-heading-xxxl-medium);
-			letter-spacing: var(--f-heading-xxxl-spacing, normal);
-			margin: 0;
-
-			@media (--viewport-sm-down) {
-				font: var(--f-heading-xl-medium);
-				letter-spacing: var(--f-heading-xl-spacing, normal);
-			}
-		}
+	p {
+		font: var(--desc-font);
+		letter-spacing: var(--desc-spacing, normal);
+		grid-column: 1/-1;
 	}
 </style>
diff --git a/src/routes/strategies/+page.svelte b/src/routes/strategies/+page.svelte
@@ -24,10 +24,7 @@
 </svelte:head>
 
 <main class="ds-container strategies-index-page">
-	<PageHeading>
-		<h1>Strategies</h1>
-		<p>Currently available strategies</p>
-	</PageHeading>
+	<PageHeading title="Strategies" description="Currently available strategies" />
 
 	{#if strategies.length}
 		<ul>

diff --git a/src/routes/strategies/[strategy]/(nav)/+layout.svelte b/src/routes/strategies/[strategy]/(nav)/+layout.svelte
@@ -14,10 +14,8 @@
 </script>
 
 <main class="strategy-layout ds-container">
-	<PageHeading>
+	<PageHeading title={summary.name} description={summary.long_description}>
 		<img slot="logo" src={summary.icon_url} alt={summary.name} />
-		<h1>{summary.name}</h1>
-		<p>{summary.long_description}</p>
 	</PageHeading>
 
 	{#if errorHtml}

diff --git a/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/+page.svelte b/src/routes/strategies/[strategy]/[status=positionStatus]-positions/[position]/+page.svelte
@@ -29,9 +29,8 @@
 </script>
 
 <main class="ds-container position-page">
-	<PageHeading level={2}>
-		<h1><a href="/strategies/{summary.id}">{summary.name}</a></h1>
-		<h2>Position #{position.position_id}</h2>
+	<PageHeading title="Position #{position.position_id}">
+		<a slot="prefix" href="/strategies/{summary.id}">{summary.name}</a>
 	</PageHeading>
 
 	<section>

diff --git a/...tegies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/+page.svelte b/...tegies/[strategy]/[status=positionStatus]-positions/[position]/trade-[trade]/+page.svelte
@@ -25,15 +25,14 @@
 </script>
 
 <main class="ds-container trade-page">
-	<PageHeading level={2}>
-		<h1>Trade #{trade.trade_id}</h1>
-		<h2>
+	<PageHeading prefix="Trade #{trade.trade_id}">
+		<span slot="title">
 			{tradeDirection(trade)}
 			{trade.pair.base.token_symbol}
 			{#if trade.trade_type === 'stop_loss'}
 				<PositionDataIndicator lg text="stop-loss" />
 			{/if}
-		</h2>
+		</span>
 	</PageHeading>
 
 	{#if tradeFailed}
@@ -164,7 +163,7 @@
 
 <style lang="postcss">
 	.trade-page {
-		h2 {
+		[slot='title'] {
 			display: flex;
 			align-items: center;
 			gap: var(--space-md);