styles in post, post list · sybers.fr/leaflet@47adb65

-11

app/lish/[handle]/[publication]/DraftList.tsx

··· 52 52 )} 53 53 <div className="text-secondary italic">{props.description}</div> 54 54 </Link> 55 - <DraftOptionsMenu /> 56 55 </div> 57 56 ); 58 57 } 59 - 60 - const DraftOptionsMenu = () => { 61 - return ( 62 - <Menu trigger={<MoreOptionsVerticalTiny />}> 63 - <MenuItem onSelect={() => {}}> 64 - <DeleteSmall /> Delete Draft 65 - </MenuItem> 66 - </Menu> 67 - ); 68 - };

+15 -8

app/lish/[handle]/[publication]/[rkey]/page.tsx

··· 61 61 return ( 62 62 <div className="postPage w-full h-screen bg-bg-leaflet flex items-stretch"> 63 63 <div className="pubWrapper flex flex-col w-full "> 64 - <div className="pubContent flex flex-col px-4 py-6 mx-auto max-w-prose h-full w-full overflow-auto"> 65 - <Link 66 - className="font-bold hover:no-underline text-accent-contrast -mb-2 sm:-mb-3" 67 - href={`/lish/${(await props.params).handle}/${(await props.params).publication}`} 68 - > 69 - {decodeURIComponent((await props.params).publication)} 70 - </Link> 71 - <h1>{record.title}</h1> 64 + <div className="pubContent flex flex-col px-3 sm:px-4 py-3 sm:py-9 mx-auto max-w-prose h-full w-full overflow-auto"> 65 + <div className="flex flex-col pb-8"> 66 + <Link 67 + className="font-bold hover:no-underline text-accent-contrast" 68 + href={`/lish/${(await props.params).handle}/${(await props.params).publication}`} 69 + > 70 + {decodeURIComponent((await props.params).publication)} 71 + </Link> 72 + <h2 className="">{record.title}</h2> 73 + <p className="italic text-secondary"> 74 + This is a placeholder description and I want it to be longer so it 75 + spans two lines. 76 + </p> 77 + <p className="text-sm text-tertiary pt-3">Published 06/02/2025</p> 78 + </div> 72 79 {blocks.map((b, index) => { 73 80 switch (true) { 74 81 case PubLeafletBlocksImage.isMain(b.block): {

+9 -17

app/lish/[handle]/[publication]/page.tsx

··· 8 8 import { Footer } from "components/ActionBar/Footer"; 9 9 import { PublicationDashboard } from "./PublicationDashboard"; 10 10 import { DraftList } from "./DraftList"; 11 - import { NewDraftSecondaryButton } from "./NewDraftButton"; 12 11 import { getIdentityData } from "actions/getIdentityData"; 13 12 import { ThemeProvider } from "components/ThemeManager/ThemeProvider"; 14 13 import { Actions } from "./Actions"; ··· 16 15 import { AtUri } from "@atproto/syntax"; 17 16 import { PubLeafletDocument } from "lexicons/api"; 18 17 import React from "react"; 19 - import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; 20 - import { Menu, MenuItem } from "components/Layout"; 18 + import { EditTiny } from "components/Icons/EditTiny"; 21 19 22 20 const idResolver = new IdResolver(); 23 21 ··· 76 74 </Sidebar> 77 75 </div> 78 76 <div 79 - className={`h-full overflow-y-scroll pt-4 px-3 sm:pl-5 sm:pt-9 w-full`} 77 + className={`h-full overflow-y-scroll pt-4 sm:pl-5 sm:pt-9 w-full`} 80 78 > 81 79 <PublicationDashboard 82 80 name={publication.name} ··· 105 103 let record = doc.documents 106 104 .data as PubLeafletDocument.Record; 107 105 108 - console.log(record); 109 - 110 106 return ( 111 107 <React.Fragment key={doc.documents?.uri}> 112 108 <div className="flex w-full "> 113 109 <Link 114 110 href={`/lish/${params.handle}/${params.publication}/${uri.rkey}`} 115 - className="publishedPost grow flex flex-col gap-0 hover:!no-underline" 111 + className="publishedPost grow flex flex-col gap-2 hover:!no-underline" 116 112 > 117 113 <h3 className="text-primary">{record.title}</h3> 118 114 <p className="italic text-secondary"> ··· 123 119 </p> 124 120 </Link> 125 121 {leaflet && ( 126 - <Link href={`/${leaflet.leaflet}`}>edit</Link> 122 + <Link 123 + className="pt-[6px]" 124 + href={`/${leaflet.leaflet}`} 125 + > 126 + <EditTiny /> 127 + </Link> 127 128 )} 128 - <MoreOptionsVerticalTiny /> 129 - {/* <Menu trigger={<MoreOptionsVerticalTiny />}> 130 - <MenuItem onSelect={() => {}}> 131 - Edit Post 132 - </MenuItem> 133 - <MenuItem onSelect={() => {}}> 134 - Delete Post 135 - </MenuItem> 136 - </Menu> */} 137 129 </div> 138 130 <hr className="last:hidden border-border-light" /> 139 131 </React.Fragment>

+18

components/Icons/EditTiny.tsx

··· 1 + import { Props } from "./Props"; 2 + 3 + export const EditTiny = (props: Props) => { 4 + return ( 5 + <svg 6 + width="16" 7 + height="16" 8 + viewBox="0 0 16 16" 9 + fill="none" 10 + xmlns="http://www.w3.org/2000/svg" 11 + > 12 + <path 13 + d="M10.1056 1.68769L12.1633 2.08905L12.2336 2.10858C12.3024 2.13294 12.3657 2.17212 12.4181 2.22382L13.8303 3.61933C13.9072 3.69532 13.9578 3.79462 13.9738 3.90155L14.2668 5.8664C14.2902 6.02306 14.2381 6.18207 14.1262 6.29413L7.04803 13.3723C6.99391 13.4263 6.92837 13.4678 6.85662 13.4924L6.78338 13.5109L2.31756 14.3137C2.1587 14.3422 1.99469 14.2925 1.87908 14.1799C1.76354 14.0671 1.70901 13.9049 1.73358 13.7453L2.43768 9.17987L2.45623 9.10272C2.48044 9.02777 2.5221 8.95878 2.5783 8.90253L9.65643 1.8244L9.7033 1.78339C9.8165 1.6953 9.96291 1.6599 10.1056 1.68769ZM3.40155 9.49335L3.10858 11.3879C3.47498 11.4495 3.97079 11.6089 4.1867 11.8312C4.58807 12.2451 4.57767 12.6117 4.5783 12.8908L6.45233 12.5539L13.2404 5.76581L13.1154 4.93085L11.8312 6.21601C11.6361 6.41112 11.3195 6.41084 11.1242 6.21601C10.9289 6.02074 10.9289 5.70424 11.1242 5.50897L12.7111 3.92011L12.05 3.26679L6.89862 8.33808C6.7018 8.53176 6.38528 8.52903 6.19158 8.33222C5.99798 8.13539 6.00066 7.81885 6.19744 7.62519L11.0148 2.88397L10.175 2.71991L3.40155 9.49335ZM10.1213 6.45722C10.3143 6.32736 10.5789 6.34638 10.7512 6.51581C10.9235 6.68535 10.9472 6.94959 10.8205 7.14472L10.757 7.22284L6.67694 11.3693C6.48327 11.5661 6.16674 11.5688 5.9699 11.3752C5.77307 11.1815 5.77037 10.865 5.96405 10.6682L10.0441 6.52167L10.1213 6.45722ZM5.06854 8.71698C5.26259 8.58889 5.5266 8.61065 5.69744 8.78144C5.86828 8.95227 5.88998 9.21627 5.7619 9.41034L5.69744 9.48847L5.35662 9.82929C5.16136 10.0245 4.84485 10.0245 4.64959 9.82929C4.45439 9.63402 4.45435 9.3175 4.64959 9.12226L4.99041 8.78144L5.06854 8.71698Z" 14 + fill="currentColor" 15 + /> 16 + </svg> 17 + ); 18 + };

+22 -10

components/Pages/PublicationMetadata.tsx

··· 7 7 import { useReplicache } from "src/replicache"; 8 8 import { useIdentityData } from "components/IdentityProvider"; 9 9 import { AutosizeTextarea } from "components/utils/AutosizeTextarea"; 10 + import { Separator } from "components/Layout"; 10 11 export const PublicationMetadata = ({ 11 12 cardBorderHidden, 12 13 }: { ··· 43 44 44 45 return ( 45 46 <div 46 - className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-4 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-3 pt-2"}`} 47 + className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-5 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-3 pt-2"}`} 47 48 > 48 - <Link 49 - href={`/lish/${identity?.resolved_did?.alsoKnownAs?.[0].slice(5)}/${pub.publications.name}`} 50 - className="text-accent-contrast font-bold hover:no-underline" 51 - > 52 - {pub.publications?.name} 53 - </Link> 49 + <div className="flex gap-2"> 50 + <Link 51 + href={`/lish/${identity?.resolved_did?.alsoKnownAs?.[0].slice(5)}/${pub.publications.name}`} 52 + className="text-accent-contrast font-bold hover:no-underline" 53 + > 54 + {pub.publications?.name} 55 + </Link> 56 + <div className="font-bold text-tertiary px-1 bg-border-light rounded-md "> 57 + Editor 58 + </div> 59 + </div> 54 60 <Input 55 61 className="text-xl font-bold outline-none bg-transparent" 56 62 value={titleState} ··· 61 67 /> 62 68 <AutosizeTextarea 63 69 placeholder="add an optional description..." 64 - className="italic text-secondary outline-none bg-transparent pt-1" 70 + className="italic text-secondary outline-none bg-transparent" 65 71 value={descriptionState} 66 72 onChange={(e) => { 67 73 setDescriptionState(e.currentTarget.value); 68 74 }} 69 75 /> 70 76 {pub.doc ? ( 71 - <p>Published</p> 77 + <div className="flex flex-row items-center gap-2 pt-3"> 78 + <p className="text-sm text-tertiary">Published XX/XX/XXX</p> 79 + <Separator classname="h-4" /> 80 + <Link className="text-sm" href="/"> 81 + View Post 82 + </Link> 83 + </div> 72 84 ) : ( 73 - <p className="text-sm text-tertiary pt-1">Draft</p> 85 + <p className="text-sm text-tertiary pt-2">Draft</p> 74 86 )} 75 87 </div> 76 88 );

Configure Feed

Configure Feed