fix: optimize comments for mobile

YanDao0313 · Jun 10, 2023 · 2c422b1 · 2c422b1
1 parent b232b2c
commit 2c422b1
Show file tree

Hide file tree

Showing 4 changed files with 253 additions and 250 deletions.
diff --git a/components/Commentable.tsx b/components/Commentable.tsx
@@ -204,7 +204,7 @@ function Root({ className, blockId }: CommentableProps) {
  <motion.button
  type="button"
  className={clsxm(
- 'absolute right-[calc(100%+1.65rem)] top-[4px] flex w-16 origin-top-right appearance-none items-center justify-end -space-x-1.5',
+ 'absolute -right-2 top-[4px] flex origin-top-right appearance-none flex-col items-center justify-end -space-y-1 md:right-[calc(100%+1.65rem)] md:w-16 md:flex-row md:-space-x-1.5 md:space-y-0',
  className
  )}
  initial={{ opacity: 0, scale: 0.95 }}
@@ -230,12 +230,12 @@ function Root({ className, blockId }: CommentableProps) {
  <button
  type="button"
  className={clsxm(
- 'absolute right-[calc(100%+6px)] top-[5px] flex h-full origin-top-right translate-x-1.5 scale-95 transform-gpu appearance-none items-start opacity-0 transition-all group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100',
+ 'absolute -right-1 top-[5px] flex h-full origin-top-right translate-x-1.5 scale-95 transform-gpu appearance-none items-start opacity-0 transition-all group-hover:translate-x-0 group-hover:scale-100 group-hover:opacity-100 md:right-[calc(100%+6px)]',
  className
  )}
  onClick={handleToggleCommenting}
  >
- <NewCommentIcon className="pointer-events-none h-5 w-5 select-none text-zinc-800 dark:text-zinc-300" />
+ <NewCommentIcon className="pointer-events-none h-5 w-5 select-none rounded-xl text-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 md:rounded-none md:bg-transparent" />
  </button>
  </HoverCard.Trigger>
  <AnimatePresence>
@@ -260,12 +260,12 @@ function Root({ className, blockId }: CommentableProps) {
  >
  <XIcon className="h-6 w-6 rounded-full border border-zinc-400/20 bg-white/95 p-1 text-zinc-500 backdrop-blur transition-all group-hover:w-12 group-hover:text-zinc-700 dark:border-zinc-500/30 dark:bg-zinc-800/95 dark:text-zinc-400 dark:group-hover:text-zinc-200" />
  </button>
- <main className="flex w-[clamp(200px,40vmax,320px)] flex-col">
+ <main className="flex w-[clamp(140px,75vw,300px)] flex-col">
  {currentComments.length > 0 && (
  <header className="-mx-4 -mt-4 rounded-t-xl border-b border-zinc-400/20 bg-zinc-100/50 dark:border-zinc-300/10 dark:bg-black/20">
  <ul
  ref={commentsRef}
- className="flex max-h-[70vh] w-full flex-col space-y-0.5 overflow-x-hidden overflow-y-scroll p-4 [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_28px,black_100%)]"
+ className="flex max-h-[50vh] w-full flex-col space-y-0.5 overflow-x-hidden overflow-y-scroll p-4 [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_28px,black_100%)]"
  >
  {currentComments.map((c) => (
  <CommentItem key={c.id} {...c} isMe={isMe} />

diff --git a/components/portable-text/PortableTextBlocks.tsx b/components/portable-text/PortableTextBlocks.tsx
@@ -18,7 +18,7 @@ export function PortableTextBlocksNormal({
  return (
  <p
  data-blockid={isEmpty ? undefined : value._key}
- className="group relative"
+ className="group relative pr-3 md:pr-0"
  >
  {!isEmpty && (
  <ClientOnly>
@@ -35,7 +35,7 @@ export function PortableTextBlocksH1({
  children,
 }: PortableTextComponentProps<any>) {
  return (
- <h1 data-blockid={value._key} className="group relative">
+ <h1 data-blockid={value._key} className="group relative pr-3 md:pr-0">
  <ClientOnly>
  <Commentable blockId={value._key} />
  </ClientOnly>
@@ -49,7 +49,7 @@ export function PortableTextBlocksH2({
  children,
 }: PortableTextComponentProps<any>) {
  return (
- <h2 data-blockid={value._key} className="group relative">
+ <h2 data-blockid={value._key} className="group relative pr-3 md:pr-0">
  <ClientOnly>
  <Commentable blockId={value._key} />
  </ClientOnly>
@@ -63,7 +63,7 @@ export function PortableTextBlocksH3({
  children,
 }: PortableTextComponentProps<any>) {
  return (
- <h3 data-blockid={value._key} className="group relative">
+ <h3 data-blockid={value._key} className="group relative pr-3 md:pr-0">
  <ClientOnly>
  <Commentable blockId={value._key} />
  </ClientOnly>
@@ -77,7 +77,7 @@ export function PortableTextBlocksH4({
  children,
 }: PortableTextComponentProps<any>) {
  return (
- <h4 data-blockid={value._key} className="group relative">
+ <h4 data-blockid={value._key} className="group relative pr-3 md:pr-0">
  <ClientOnly>
  <Commentable blockId={value._key} />
  </ClientOnly>
@@ -91,7 +91,10 @@ export function PortableTextBlocksBlockquote({
  children,
 }: PortableTextComponentProps<any>) {
  return (
- <blockquote data-blockid={value._key} className="group relative">
+ <blockquote
+ data-blockid={value._key}
+ className="group relative pr-3 md:pr-0"
+ >
  <ClientOnly>
  <Commentable blockId={value._key} />
  </ClientOnly>
@@ -105,7 +108,7 @@ export function PortableTextBlocksListItem({
  children,
 }: PortableTextComponentProps<any>) {
  return (
- <li data-blockid={value._key} className="group relative">
+ <li data-blockid={value._key} className="group relative pr-3 md:pr-0">
  <ClientOnly>
  <Commentable className="mr-5" blockId={value._key} />
  </ClientOnly>

diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
  "@types/eslint": "^8.40.1",
  "@types/node": "^18.16.15",
  "@types/prettier": "^2.7.3",
- "@types/react": "^18.2.10",
+ "@types/react": "18.2.7",
  "@types/react-dom": "^18.2.4",
  "@types/react-syntax-highlighter": "^15.5.7",
  "@types/rss": "^0.0.30",