fix document styles layout

seed-hypermedia · Nov 1, 2024 · 29281bc · 29281bc
1 parent a3c7c9c
commit 29281bc
Show file tree

Hide file tree

Showing 7 changed files with 716 additions and 457 deletions.
diff --git a/frontend/apps/desktop/src/components/site-navigation.tsx b/frontend/apps/desktop/src/components/site-navigation.tsx
@@ -18,6 +18,7 @@ import {
   NodesOutline,
   UnpackedHypermediaId,
 } from '@shm/shared'
+import {SideNavigationPlaceholder} from '@shm/shared/src/site-navigation'
 import {
   FocusButton,
   getBlockNodeById,
@@ -65,7 +66,7 @@ export function SiteNavigation({}: {}) {
         className="document-aside"
       >
         <ScrollView>
-          <View flex={1} paddingHorizontal="$4">
+          <View flex={1} paddingLeft="$4" $gtLg={{paddingLeft: 0}}>
             {isTopLevel ? null : (
               <SmallListItem
                 key={parentId.id}
@@ -151,25 +152,7 @@ export function SiteNavigation({}: {}) {
       </YStack>
     )
   } else {
-    return (
-      <View
-        width={10}
-        margin="$4"
-        height="100%"
-        gap="$3"
-        bg="red"
-        marginTop={100}
-        zIndex="$zIndex.2"
-        top={0}
-        left={-8}
-        position="absolute"
-      >
-        <View height={2} bg="$color" />
-        <View height={2} bg="$color" />
-        <View height={2} bg="$color" />
-        <View height={2} bg="$color" />
-      </View>
-    )
+    return <SideNavigationPlaceholder />
   }
 }
 

diff --git a/frontend/apps/desktop/src/pages/document.tsx b/frontend/apps/desktop/src/pages/document.tsx
@@ -313,6 +313,7 @@ function DocPageHeader({
         paddingTop={!hasCover ? 60 : '$6'}
         bg="$background"
         borderRadius="$2"
+        $gtLg={{maxWidth: 1200}}
       >
         <YStack group="header" gap="$4">
           {hasIcon ? (

diff --git a/frontend/apps/web/app/document.tsx b/frontend/apps/web/app/document.tsx
@@ -9,11 +9,14 @@ import {
   HMDocument,
   hmId,
   HMMetadata,
+  HMQueryResult,
   NodeOutline,
   UnpackedHypermediaId,
 } from "@shm/shared";
 import {SiteRoutingProvider, useRouteLink} from "@shm/shared/src/routing";
+import {SideNavigationPlaceholder} from "@shm/shared/src/site-navigation";
 import "@shm/shared/src/styles/document.css";
+import {getRandomColor} from "@shm/ui/src/avatar";
 import {Container} from "@shm/ui/src/container";
 import {DirectoryItem} from "@shm/ui/src/directory";
 import {CommentGroup} from "@shm/ui/src/discussion";
@@ -25,15 +28,15 @@ import {
 import {HMIcon} from "@shm/ui/src/hm-icon";
 import {SmallListItem} from "@shm/ui/src/list-item";
 import {RadioButtons} from "@shm/ui/src/radio-buttons";
-import {Button, ButtonText} from "@tamagui/button";
+import {Button} from "@tamagui/button";
 import {GestureReponderEvent, Text, useMedia} from "@tamagui/core";
 import {X} from "@tamagui/lucide-icons";
 import {ScrollView} from "@tamagui/scroll-view";
 import {XStack, YStack} from "@tamagui/stacks";
 import {SizableText} from "@tamagui/text";
 import {useCallback, useEffect, useMemo, useState} from "react";
 import {getHref} from "./href";
-import type {HMQueryResult, SiteDocumentPayload} from "./loaders";
+import type {SiteDocumentPayload} from "./loaders";
 import {defaultSiteIcon} from "./meta";
 import {NewspaperPage} from "./newspaper";
 import {NotFoundPage} from "./not-found";
@@ -164,12 +167,36 @@ export function DocumentPage(props: SiteDocumentPayload) {
   );
 }
 
-function DocumentCover({cover}: {cover: HMMetadata["cover"]}) {
+function DocumentCover({
+  cover,
+  id,
+}: {
+  cover: HMMetadata["cover"];
+  id: UnpackedHypermediaId | null;
+}) {
+  const coverBg = useMemo(() => {
+    if (id?.id) {
+      return getRandomColor(id.id);
+    }
+
+    return "black";
+  }, [id]);
   if (!cover) return null;
 
   return (
-    <XStack bg="black" height="25vh" width="100%" position="relative">
-      <img src={getFileUrl(cover)} title={"cover image"} />
+    <XStack bg={coverBg} height="25vh" width="100%" position="relative">
+      <img
+        src={getFileUrl(cover)}
+        title={"cover image"}
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          objectFit: "cover",
+        }}
+      />
     </XStack>
   );
 }
@@ -476,6 +503,7 @@ function SiteNavigation({
   supportQueries?: HMQueryResult[];
   id: UnpackedHypermediaId;
 }) {
+  const media = useMedia();
   const outline = useMemo(() => {
     return getNodesOutline(document.content);
   }, [document.content]);
@@ -510,46 +538,49 @@ function SiteNavigation({
         idPath.length === doc.path.length - 1
     );
   const documentIndent = isTopLevel ? 0 : 1;
-
-  return (
-    <YStack gap="$2">
-      {isTopLevel || !parentListItem ? null : (
+  if (media.gtSm) {
+    return (
+      <YStack gap="$2" paddingLeft="$4">
+        {isTopLevel || !parentListItem ? null : (
+          <DocumentSmallListItem
+            metadata={parentListItem.metadata}
+            id={parentId}
+          />
+        )}
         <DocumentSmallListItem
-          metadata={parentListItem.metadata}
-          id={parentId}
-        />
-      )}
-      <DocumentSmallListItem
-        metadata={document.metadata}
-        id={id}
-        indented={documentIndent}
-      />
-      {outline.map((node) => (
-        <OutlineNode
-          node={node}
-          key={node.id}
-          onClose={onClose}
+          metadata={document.metadata}
+          id={id}
           indented={documentIndent}
         />
-      ))}
-      {childrenDocs?.map((doc) => (
-        <DocumentSmallListItem
-          key={doc.path.join("/")}
-          metadata={doc.metadata}
-          id={hmId("d", doc.account, {path: doc.path})}
-          indented={2}
-        />
-      ))}
-      {siblingDocs?.map((doc) => (
-        <DocumentSmallListItem
-          key={doc.path.join("/")}
-          metadata={doc.metadata}
-          id={hmId("d", doc.account, {path: doc.path})}
-          indented={1}
-        />
-      ))}
-    </YStack>
-  );
+        {outline.map((node) => (
+          <OutlineNode
+            node={node}
+            key={node.id}
+            onClose={onClose}
+            indented={documentIndent}
+          />
+        ))}
+        {childrenDocs?.map((doc) => (
+          <DocumentSmallListItem
+            key={doc.path.join("/")}
+            metadata={doc.metadata}
+            id={hmId("d", doc.account, {path: doc.path})}
+            indented={2}
+          />
+        ))}
+        {siblingDocs?.map((doc) => (
+          <DocumentSmallListItem
+            key={doc.path.join("/")}
+            metadata={doc.metadata}
+            id={hmId("d", doc.account, {path: doc.path})}
+            indented={1}
+          />
+        ))}
+      </YStack>
+    );
+  } else {
+    return <SideNavigationPlaceholder />;
+  }
 }
 
 function OutlineNode({
@@ -588,41 +619,6 @@ function OutlineNode({
         : null}
     </>
   );
-  return (
-    <>
-      <ButtonText
-        tag="a"
-        href={`#${node.id}`}
-        color="$color9"
-        textDecorationLine="none"
-        fontSize={14}
-        hoverStyle={{
-          textDecorationLine: "underline",
-        }}
-        onPress={(e: MouseEvent) => {
-          e.preventDefault();
-          const targetElement = document.querySelector(`#${node.id}`);
-
-          if (targetElement) {
-            const offset = 80; // header fixed height
-            const elementPosition = targetElement.getBoundingClientRect().top;
-            const offsetPosition = elementPosition + window.scrollY - offset;
-            window.scrollTo({top: offsetPosition, behavior: "smooth"});
-            onClose?.();
-          }
-        }}
-      >
-        {node.title}
-      </ButtonText>
-      {node.children?.length ? (
-        <YStack gap="$1" paddingLeft="$4">
-          {node.children.map((child) => (
-            <OutlineNode node={child} key={child.id} />
-          ))}
-        </YStack>
-      ) : null}
-    </>
-  );
 }
 
 function MobileOutline({

diff --git a/frontend/apps/web/app/page-header.tsx b/frontend/apps/web/app/page-header.tsx
@@ -56,6 +56,7 @@ export function PageHeader({
           marginTop: hasCover ? -40 : 0,
           paddingTop: !hasCover ? 60 : "$6",
         }}
+        $gtLg={{maxWidth: 1200}}
         backgroundColor="$background"
         borderRadius="$2"
       >

diff --git a/frontend/packages/shared/src/site-navigation.tsx b/frontend/packages/shared/src/site-navigation.tsx
@@ -0,0 +1,38 @@
+import {View} from '@tamagui/core'
+import {YStack} from '@tamagui/stacks'
+
+export function SideNavigationPlaceholder() {
+  return (
+    <View
+      group="item"
+      margin="$4"
+      height="calc(75vh - 140px - 12px)"
+      marginTop={156}
+      zIndex="$zIndex.2"
+      top={0}
+      left={-6}
+      position="absolute"
+    >
+      <YStack
+        width={16}
+        paddingVertical="$5"
+        paddingHorizontal={3}
+        backgroundColor="$backgroundTransparent"
+        gap="$2.5"
+        borderRadius="$4"
+        hoverStyle={{
+          backgroundColor: '$color5',
+        }}
+      >
+        {Array.from({length: 6}).map((_, i) => (
+          <View
+            key={i}
+            $group-item-hover={{backgroundColor: '$color9'}}
+            height={2}
+            bg="$color8"
+          />
+        ))}
+      </YStack>
+    </View>
+  )
+}
diff --git a/frontend/packages/shared/src/styles/document.css b/frontend/packages/shared/src/styles/document.css
@@ -20,9 +20,10 @@
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1280px) {
   .document-container {
-    grid-template-columns: 260px minmax(0, 1fr);
+    max-width: 1200px;
+    grid-template-columns: 280px minmax(0, 1fr);
     gap: 2rem;
   }
 }