Issue #213 - New comments design

ui/src/components/Comments/index.tsx

@@ -39,28 +39,40 @@ class Comment extends React.PureComponent<ICommentProps> {
 
     render(): React.ReactNode {
         return (
-        <div className='comment'>
-            { !this.props.comment.commentError && 
-            <div>
-                {this.props.comment.attributedTo.iconUrl && <img className='comment-author-picture' src={this.props.comment.attributedTo.iconUrl}></img>}
-                <p><a target="_blank" href={this.props.comment.attributedTo.url}>{this.props.comment.attributedTo.name} ({this.props.comment.attributedTo.account})</a></p>
-                <p><a target="_blank" href={this.props.comment.url}>Open external source</a></p>
-                <div dangerouslySetInnerHTML={{__html: this.props.comment.content}}></div>
-            </div>
+        <details open>
+            {!this.props.comment.commentError &&
+                <summary>
+                    <a className='profile' href={this.props.comment.attributedTo.url}>
+                        <img className='profile-img' src={this.props.comment.attributedTo.iconUrl || '/images/brand-icon.svg'} />
+                        <strong>{this.props.comment.attributedTo.name}</strong>
+                        <span>{this.props.comment.attributedTo.account}</span>
+                    </a>
+                    <span aria-hidden="true">·</span>
+                    <a href={this.props.comment.url} className='permalink'>
+                        <time>{this.props.comment.publishedAt.toLocaleString()}</time>
+                    </a>
+                </summary>
+            }
+            {
+                // content can be empty when there are attachments
+                !this.props.comment.commentError && this.props.comment.content &&
+                <div className="contents" dangerouslySetInnerHTML={{__html: this.props.comment.content}}/>
             }
             {this.props.comment.commentError && 
-            <div>
-                <p><a target="_blank" href={this.props.comment.url}>Open external source</a></p>
-                <p>Error fetching this comment.</p>
-            </div>}
-            {this.props.comment.replies && <div className='replies'>
+                <summary>
+                    <a className='profile' href={this.props.comment.url}>
+                        <img className='profile-img' src='/images/brand-icon.svg' />
+                        <strong>Error loading this comment</strong>
+                    </a>
+                </summary>
+            }
+            {!this.props.comment.repliesError && this.props.comment.replies && <div>
                 {this.props.comment.replies.map((reply) => <Comment comment={reply}/>)}
             </div>}
-            {this.props.comment.repliesError && 
-            <div>
-                <p>Error fetching replies for this comment</p>
-            </div>}
-        </div>
+            {
+                this.props.comment.repliesError && <div className='contents'>Error loading replies for this comment</div>
+            }
+        </details>
         )
     }
 }

ui/src/components/Comments/styles.scss

@@ -1,13 +1,115 @@
-.comment {
-    border: 1px solid #d6d6d6;
-    border-radius: 6px;
-    margin: 10px 0px;
-    height: auto;
-    padding: 10px;
+:root {
+    --thread: clamp(1rem, 8vw, 2rem);
+  }
+
+  details {
+    margin: .5rem 0;
+    position: relative;
+  }
+
+  details details {
+    margin-left: calc(var(--thread) + .5rem);
+  }
+
+  details.content-warning {
+    margin-left: 0;
+  }
+
+  summary {
+    list-style: none;
+    display: flex;
+    gap: .25rem;
+    place-items: center;
+    font-size: .75rem;
+    line-height: 1rem;
+  }
+
+  details > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  details:not([open]) > summary::before {
+    content: "";
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E") center no-repeat;
+    width: 1rem;
+    height: 1rem;
+    opacity: .4;
+  }
+
+  details[open]:not(.content-warning) > summary::before {
+    content: "";
+    position: absolute;
+    top: calc(var(--thread) + .5rem);
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--thread);
+    display: block;
+    color: rgba(0,0,0,.4);
+    background: linear-gradient(
+      to right,
+      transparent calc(var(--thread) / 2 - 1px),
+      currentColor calc(var(--thread) / 2 - 1px),
+      currentColor calc(var(--thread) / 2 + 1px),
+      transparent calc(var(--thread) / 2 + 1px)
+    );
+  }
+
+  .profile {
+    display: flex;
+    gap: .5rem;
+    place-items: center;
+    text-decoration: none;
+    color: #000;
+  }
+
+  .profile-img {
+    width: var(--thread);
+    height: var(--thread);
+    border-radius: var(--thread);
+    object-fit: cover;
+  }
+
+  .permalink {
+    text-align: right;
+    text-decoration: none;
+    color: rgba(0,0,0,.6);
+  }
+
+  .contents {
+    padding-left: calc(var(--thread) + .5rem);
+    font-size: 0.875rem;
+  }
+
+  details.content-warning > summary {
+    font-size: 0.875rem;
+  }
+
+  details.content-warning > summary::before {
+    display: none;
+  }
+
+  details.content-warning > summary::after {
+    content: "Show More";
+    display: inline-block;
+    background: rgba(0,0,0,.1);
+    border-radius: .75rem;
+    padding: .25rem .5rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+
+  details.content-warning[open] > summary::after {
+    content: "Show Less";
+  }
+
+  * {
     box-sizing: border-box;
-}
-
-.comment-author-picture {
-    height: 80px;
-    width: 80px;
-}
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    line-height: 1.4;
+    margin: 0;
+    padding: 0 .5rem;
+  }