Merge pull request #42 from cloudflare/mobile

make layout mobile-responsive
cloudflare · Jan 9, 2023 · 97b6a3f · 97b6a3f
2 parents 6f2e6d0 + 5a01f19
commit 97b6a3f
Show file tree

Hide file tree

Showing 18 changed files with 109 additions and 85 deletions.
diff --git a/frontend/src/components/MastodonLogo.tsx b/frontend/src/components/MastodonLogo.tsx
@@ -9,6 +9,9 @@ type Props = {
 	size: keyof typeof heightsMap
 }
 
+// TODO: the mastodonLogo is likely no longer needed
+//       we're keeping it around just in case but before
+//       launch this should be removed
 export const MastodonLogo = component$<Props>(({ size }) => {
 	return (
 		<svg
@@ -52,8 +55,12 @@ export const MastodonLogo = component$<Props>(({ size }) => {
 })
 
 export const WildebeestLogo = component$<Props>(({ size }) => {
+	const linearGradientId = `wildebeest_linear_gradient_${Math.round(Math.random() * 9999)}`
 	return (
 		<svg
+			// TO FIX: the height should be computed as heightsMap[size]
+			//         (we need to fix it/adapt the map and make sure
+			//          that the logo keeps looking ok)
 			style={{ width: 'auto', height: '50px' }}
 			viewBox="100 60 260 260"
 			fill="none"
@@ -63,7 +70,7 @@ export const WildebeestLogo = component$<Props>(({ size }) => {
 				fill-rule="evenodd"
 				clip-rule="evenodd"
 				d="M168.516 134.818H168.516C160.459 134.56 153.943 134.35 152.125 135.142C84.0848 164.777 140.745 295.097 146.927 308.796C149.961 302.444 152.155 295.691 153.452 288.809C151.634 287.646 149.721 286.595 147.722 285.664C149.735 285.449 151.781 285.339 153.855 285.339C159.503 285.339 164.951 286.157 170.075 287.678C166.405 296.982 160.02 305.018 151.841 310.908C158.675 312.194 171.94 313.898 180.169 309.835C185.18 297.224 185.87 283.663 182.212 271.538C182.959 270.383 184.055 269.942 185.932 270.255C188.391 274.944 190.163 279.909 191.243 284.997L222.363 278.483C223.856 271.071 223.691 263.548 221.86 256.529C222.88 255.832 223.921 255.178 224.981 254.567C228.478 261.538 230.224 269.188 230.19 276.845L234.201 276.005C238.391 265.691 239.185 254.607 236.562 244.555C237.583 243.858 238.624 243.204 239.684 242.593C244.57 252.332 246.036 263.396 244.011 273.952L265.228 269.511C273.567 267.765 279.54 260.412 279.54 251.892V145.399C279.54 126.45 259.01 113.92 241.408 120.936C229.684 125.608 216.336 130.261 202.984 133.531C194.342 135.647 179.892 135.183 168.516 134.818ZM250.269 156.806C244.328 155.807 238.137 155.676 231.854 156.53C212.93 159.101 197.206 170.06 187.922 185.148C195.435 177.061 205.688 171.427 217.479 169.825C222.554 169.136 227.554 169.242 232.352 170.048C229.372 183.079 221.189 194.382 209.823 201.301C230.337 194.527 245.558 177.41 250.269 156.806Z"
-				fill="url(#paint0_linear_338_1767)"
+				fill={`url(#${linearGradientId})`}
 			/>
 			<ellipse
 				cx="167.742"
@@ -79,7 +86,7 @@ export const WildebeestLogo = component$<Props>(({ size }) => {
 			/>
 			<defs>
 				<linearGradient
-					id="paint0_linear_338_1767"
+					id={linearGradientId}
 					x1="223.159"
 					y1="269.638"
 					x2="228.686"

diff --git a/frontend/src/components/StickyHeader/StickyHeader.scss b/frontend/src/components/StickyHeader/StickyHeader.scss
diff --git a/frontend/src/components/StickyHeader/StickyHeader.tsx b/frontend/src/components/StickyHeader/StickyHeader.tsx
@@ -1,12 +1,8 @@
 import { component$, Slot } from '@builder.io/qwik'
-import { useStylesScoped$ } from '@builder.io/qwik'
-import styles from './StickyHeader.scss?inline'
 
 export default component$(() => {
-	useStylesScoped$(styles)
-
 	return (
-		<header class="bg-slate-900">
+		<header class="bg-slate-900 sticky top-[4.5rem] xl:top-0 xl:pt-[10px] z-10">
 			<Slot />
 		</header>
 	)

diff --git a/frontend/src/components/layout/LeftColumn/LeftColumn.tsx b/frontend/src/components/layout/LeftColumn/LeftColumn.tsx
@@ -7,7 +7,7 @@ export default component$(() => {
 	const config = useContext(InstanceConfigContext)
 
 	return (
-		<div class="text-sm">
+		<div class="hidden xl:block text-sm">
 			<p class="text-slate-400">
 				<span class="text-semi">{domain}</span> is part of the decentralized social network powered by{' '}
 				<a href="https://github.com/cloudflare/wildebeest">Wildebeest</a>.

diff --git a/frontend/src/components/layout/RightColumn/RightColumn.scss b/frontend/src/components/layout/RightColumn/RightColumn.scss
@@ -1,3 +1,11 @@
+@use '../../../tailwind-values.scss' as tailwind;
+
 .right-column-wrapper {
   height: calc(100vh - 20px);
-}
+}
+
+@media (max-width: tailwind.$xl-breakpoint) {
+  .right-column-wrapper {
+    height: calc(100vh - 4.5rem);
+  }
+}
diff --git a/frontend/src/components/layout/RightColumn/RightColumn.tsx b/frontend/src/components/layout/RightColumn/RightColumn.tsx
@@ -25,8 +25,8 @@ export default component$(() => {
 
 		return (
 			<Link href={linkTarget} class={classList}>
-				<i class={`fa ${iconName} fa-fw mr-3`} />
-				{linkText}
+				<i class={`fa ${iconName} fa-fw md:mr-3`} />
+				<span class="hidden md:inline">{linkText}</span>
 			</Link>
 		)
 	}
@@ -37,17 +37,25 @@ export default component$(() => {
 		{ iconName: 'fa-globe', linkText: 'Federated', linkTarget: '/public', linkActiveRegex: /^\/public\/?$/ },
 	]
 
+	const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
+
 	return (
-		<div class="flex flex-col justify-between right-column-wrapper text-slate-400">
+		<div class="bg-slate-800 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-slate-400">
 			<div>
-				<div class="p-4">
-					<a class="no-underline flex items-center" href="https://mastodon.social">
+				<div class="xl:p-4">
+					<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
 						<WildebeestLogo size="small" />
-						<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
+						{/* TODO: We need to move the text inside the logo component for better reusability
+				(because we are adding the text every time we use the logo anyways) */}
+						<span class="text-white font-bold xl:text-xl xl:ml-[-27px] xl:mt-[-27px]">ildebeest</span>
 					</a>
 				</div>
-				<hr class="border-t border-slate-700 my-3" />
+				<hr class="hidden xl:block border-t border-slate-700 my-3" />
 				{links.map((link) => renderNavLink(link))}
+				<div class="xl:hidden">
+					<hr class="border-t border-slate-700 my-3" />
+					{renderNavLink(aboutLink)}
+				</div>
 			</div>
 		</div>
 	)

diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
 				<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
 				<RouterHead />
 			</head>
-			<body lang="en" class="bg-slate-900 text-white">
+			<body lang="en" class="bg-slate-900 text-white min-w-min">
 				<RouterOutlet />
 				<ServiceWorkerRegister />
 			</body>

diff --git a/frontend/src/routes/[accountId]/[statusId]/index.tsx b/frontend/src/routes/[accountId]/[statusId]/index.tsx
@@ -25,7 +25,7 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="flex justify-between items-center rounded-t header bg-slate-700">
+				<div class="flex justify-between items-center xl:rounded-t header bg-slate-700">
 					<Link class="text-semi no-underline text-indigo-400 bg-transparent p-4" href="/explore">
 						<i class="fa fa-chevron-left mr-2" />
 						<span class="hover:underline">Back</span>

diff --git a/frontend/src/routes/explore/layout.scss b/frontend/src/routes/explore/layout.scss
@@ -1,17 +1,17 @@
+@use '../../tailwind-values.scss' as tailwind;
 
 .explore-wrapper {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
   min-height: calc(100vh - 20px);
 }
 
-.explore-content-wrapper {
-  flex: 1 1 auto;
+@media (max-width: tailwind.$xl-breakpoint) {
+  .explore-wrapper {
+    min-height: calc(100vh - 4.5rem);
+  }
 }
 
 .active {
-  color: #dbeafe;
+  color: #dcebfe;
   position: relative;
 
   &::before,

diff --git a/frontend/src/routes/explore/layout.tsx b/frontend/src/routes/explore/layout.tsx
@@ -40,15 +40,15 @@ export default component$(() => {
 	]
 
 	return (
-		<div class="explore-wrapper">
+		<div class="explore-wrapper flex flex-col">
 			<StickyHeader>
-				<h2 class="text-reg text-md m-0 p-4 bg-slate-700 rounded-t">
+				<h2 class="text-reg text-md m-0 p-4 bg-slate-700 xl:rounded-t">
 					<i class="fa fa-hashtag fa-fw mr-3" />
 					<span>Explore</span>
 				</h2>
 			</StickyHeader>
 			<div class="bg-slate-900 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
-			<div class="explore-content-wrapper">
+			<div class="flex-auto">
 				<Slot />
 			</div>
 		</div>

diff --git a/frontend/src/routes/first-login/index.tsx b/frontend/src/routes/first-login/index.tsx
@@ -1,14 +1,17 @@
 import { component$ } from '@builder.io/qwik'
-import { MastodonLogo } from '~/components/MastodonLogo'
+import { MastodonLogo, WildebeestLogo } from '~/components/MastodonLogo'
 import { useDomain } from '~/utils/useDomain'
 
 export default component$(() => {
 	const domain = useDomain()
 
 	return (
 		<div class="flex flex-col p-5 items-center">
-			<h1 class="text-center mt-7 mb-9">
-				<MastodonLogo size="medium" />
+			<h1 class="text-center mt-7 mb-9 flex items-center">
+				<WildebeestLogo size="medium" />
+				{/* TODO: We need to move the text inside the logo component for better reusability
+				(because we are adding the text every time we use the logo anyways) */}
+				<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
 			</h1>
 			<form method="post" class="flex flex-col w-full max-w-md">
 				<div class="flex flex-col mb-6">

diff --git a/frontend/src/routes/layout.scss b/frontend/src/routes/layout.scss
diff --git a/frontend/src/routes/layout.tsx b/frontend/src/routes/layout.tsx
@@ -1,15 +1,15 @@
-import { component$, useStylesScoped$, Slot, useContextProvider } from '@builder.io/qwik'
+import { component$, Slot, useContextProvider } from '@builder.io/qwik'
 import { DocumentHead, useLocation, loader$ } from '@builder.io/qwik-city'
 import * as instance from 'wildebeest/functions/api/v1/instance'
 import type { InstanceConfig } from 'wildebeest/backend/src/types/configs'
 import LeftColumn from '../components/layout/LeftColumn/LeftColumn'
 import RightColumn from '../components/layout/RightColumn/RightColumn'
-import styles from './layout.scss?inline'
 import { InstanceConfigContext } from '~/utils/instanceConfig'
+import { WildebeestLogo } from '~/components/MastodonLogo'
 
 const pathsWithoutColumns = ['/first-login', '/start-instance']
 
-export const useShowColumns = () => {
+export const useShowHeaderAndColumns = () => {
 	const location = useLocation()
 	const pathname = new URL(location.href).pathname
 	return !pathsWithoutColumns.includes(pathname)
@@ -25,34 +25,44 @@ export const instanceLoader = loader$<{ DATABASE: D1Database; domain: string },
 )
 
 export default component$(() => {
-	useStylesScoped$(styles)
-
-	const showColumns = useShowColumns()
+	const showHeaderAndColumns = useShowHeaderAndColumns()
 
 	useContextProvider(InstanceConfigContext, instanceLoader.use().value)
 
 	return (
-		<main class="main-wrapper">
-			{showColumns && (
-				<div class="side-column">
-					<div class="sticky">
-						<LeftColumn />
-					</div>
-				</div>
+		<>
+			{showHeaderAndColumns && (
+				<header class="h-[4.5rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
+					<a class="no-underline flex items-center w-max" href="https://mastodon.social">
+						<WildebeestLogo size="small" />
+						{/* TODO: We need to move the text inside the logo component for better reusability
+						(because we are adding the text every time we use the logo anyways) */}
+						<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
+					</a>
+				</header>
 			)}
-			<div class={`w-full ${showColumns ? 'max-w-lg' : ''}`}>
-				<div class={`bg-slate-800 ${showColumns ? 'rounded ' : 'min-h-screen'}`}>
-					<Slot />
-				</div>
-			</div>
-			{showColumns && (
-				<div class="side-column">
-					<div class="sticky">
-						<RightColumn />
+			<main class="h-full flex justify-center main-wrapper sticky top-[4.5rem]">
+				{showHeaderAndColumns && (
+					<div class="w-fit md:w-72 hidden xl:block mx-[10px]">
+						<div class="sticky top-[10px]">
+							<LeftColumn />
+						</div>
+					</div>
+				)}
+				<div class={`w-full ${showHeaderAndColumns ? 'xl:max-w-xl' : ''}`}>
+					<div class={`bg-slate-800 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
+						<Slot />
 					</div>
 				</div>
-			)}
-		</main>
+				{showHeaderAndColumns && (
+					<div class="w-fit md:w-72 border-l xl:border-l-0 border-slate-700 xl:mx-[10px]">
+						<div class="sticky top-[4.5rem] xl:top-[10px]">
+							<RightColumn />
+						</div>
+					</div>
+				)}
+			</main>
+		</>
 	)
 })
 

diff --git a/frontend/src/routes/public/index.tsx b/frontend/src/routes/public/index.tsx
@@ -21,7 +21,7 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="rounded-t bg-slate-700 p-4 flex items-center">
+				<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
 					<i class="fa fa-globe fa-fw mr-3 text-slate-100" />
 					<span>Federated timeline</span>
 				</div>

diff --git a/frontend/src/routes/public/local/index.tsx b/frontend/src/routes/public/local/index.tsx
@@ -20,7 +20,7 @@ export default component$(() => {
 	return (
 		<>
 			<StickyHeader>
-				<div class="rounded-t bg-slate-700 p-4 flex items-center">
+				<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
 					<i class="fa fa-users fa-fw mr-3 text-slate-100" />
 					<span>Local timeline</span>
 				</div>

diff --git a/frontend/src/routes/start-instance/index.tsx b/frontend/src/routes/start-instance/index.tsx
@@ -1,5 +1,5 @@
 import { $, component$, useStore, useClientEffect$, useSignal } from '@builder.io/qwik'
-import { MastodonLogo } from '~/components/MastodonLogo'
+import { WildebeestLogo } from '~/components/MastodonLogo'
 import { useDomain } from '~/utils/useDomain'
 import Step1 from './step-1'
 import { type InstanceConfig, testInstance } from './utils'
@@ -41,15 +41,23 @@ export default component$(() => {
 
 	return (
 		<div class="flex flex-col p-5 items-center max-w-lg mx-auto">
-			<h1 class="text-center mt-7 mb-9">
-				<MastodonLogo size="medium" />
+			<h1 class="text-center mt-7 mb-9 flex items-center">
+				<WildebeestLogo size="medium" />
+				{/* TODO: We need to move the text inside the logo component for better reusability
+				(because we are adding the text every time we use the logo anyways) */}
+				<span class="text-white font-bold text-xl ml-[-27px] mt-[-27px]">ildebeest</span>
 			</h1>
-			{stepToShow.startsWith('step-') && <p>Welcome to Wildebeest... Your instance hasn't been configured yet.</p>}
+			{stepToShow.startsWith('step-') && (
+				<div class="text-center">
+					<p class="mb-1">Welcome to Wildebeest...</p>
+					<p class="mb-5"> Your instance hasn't been configured yet.</p>
+				</div>
+			)}
 			{stepToShow === 'loading' && <p>Loading...</p>}
 			{stepToShow === 'step-1' && (
 				<Step1 instanceConfig={instanceConfig} setLoading={setLoading} setInstanceConfigured={setInstanceConfigured} />
 			)}
-			{stepToShow === 'all-good' && <p>All good, your instance is ready.</p>}
+			{stepToShow === 'all-good' && <p class="text-center">All good, your instance is ready.</p>}
 		</div>
 	)
 })
diff --git a/frontend/src/routes/start-instance/step-1.tsx b/frontend/src/routes/start-instance/step-1.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfigured }) => {
 	return (
 		<>
-			<h2>Configure your instance</h2>
+			<h2 class="mb-5">Configure your instance</h2>
 
 			<div class="flex flex-col mb-6 w-full max-w-md">
 				<label class="mb-2 max-w-max text-semi text-sm" for="start-instance-title">

diff --git a/frontend/src/tailwind-values.scss b/frontend/src/tailwind-values.scss
@@ -0,0 +1,7 @@
+/*
+    This file contains variables matching tailwind values
+    to be used when we need to match those values in manual styling
+*/
+
+$md-breakpoint: 768px;
+$xl-breakpoint: 1280px;