Issue #213: New design for comments

See: - #218 (comment) - #218 (comment) - #218 (comment)
Podcastindex-org · Feb 9, 2023 · d33af68 · d33af68
1 parent 5282362
commit d33af68
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/ui/src/components/Comments/index.tsx b/ui/src/components/Comments/index.tsx
@@ -46,8 +46,10 @@ class Comment extends React.PureComponent<ICommentProps> {
                 <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>
+                        <div className='user'>
+                            <strong>{this.props.comment.attributedTo.name}</strong>
+                            <span className='handle'>{this.props.comment.attributedTo.account}</span>
+                        </div>
                     </a>
                     <span aria-hidden="true">·</span>
                     <a href={this.props.comment.url} className='permalink'>
@@ -204,7 +206,7 @@ export default class Comments extends React.PureComponent<IProps, IState> {
 
     render() {
         return (
-        <div>
+        <div className='comments-container'>
             {!this.state.showComments && <button disabled={this.state.loadingComments} onClick={() => this.onClickShowComments()}>Show comments</button>}
             {this.state.showComments && <button onClick={() => this.onClickHideComments()}>Hide comments</button>}
             {this.state.loadingComments && <p>Loading comments...</p>}

diff --git a/ui/src/components/Comments/styles.scss b/ui/src/components/Comments/styles.scss
@@ -22,6 +22,9 @@
     place-items: center;
     font-size: .75rem;
     line-height: 1rem;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   details > summary::-webkit-details-marker {
@@ -70,6 +73,15 @@
     object-fit: cover;
   }
 
+  .user {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .handle {
+    display: none;
+  }
+
   .permalink {
     text-align: right;
     text-decoration: none;
@@ -81,6 +93,19 @@
     font-size: 0.875rem;
   }
 
+  .ellipsis::after {
+    content: "…";
+  }
+
+  .invisible {
+    position: absolute;
+    font-size: 0;
+    line-height: 0;
+    display: inline-block;
+    width: 0;
+    height: 0;
+  }
+
   details.content-warning > summary {
     font-size: 0.875rem;
   }
@@ -97,19 +122,31 @@
     padding: .25rem .5rem;
     font-size: 0.75rem;
     cursor: pointer;
+    white-space: nowrap;
   }
 
   details.content-warning[open] > summary::after {
     content: "Show Less";
   }
 
+  @media screen and (min-width: 25rem) {
+    .handle {
+      display: block;
+    }
+
+    .profile {
+      flex: 1;
+    }
+
+    .profile + span {
+      display: none;
+    }
+  }
+
   * {
     box-sizing: border-box;
   }
-
-  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;
+
+  .comments-container {
+    width: 100%;
   }