Update thread-view styles to match new aesthetic

pfrazee · Apr 23, 2021 · f9c7184 · f9c7184
1 parent 32d3e34
commit f9c7184
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 60 deletions.
diff --git a/static/css/common.css b/static/css/common.css
@@ -24,6 +24,10 @@ textarea {
   border-color: rgb(37, 99, 235) !important;
 }
 
+.top-18 {
+  top: 4.5rem;
+}
+
 app-header .menu {
   display: none;
   position: fixed;

diff --git a/static/css/custom-html.css b/static/css/custom-html.css
@@ -18,7 +18,7 @@ app-custom-html table.sanitized,
 app-custom-html blockquote.sanitized,
 app-custom-html figcaption.sanitized,
 app-custom-html dl.sanitized {
-  margin-bottom: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 app-custom-html h1.sanitized {

diff --git a/static/js/com/comment-composer.js b/static/js/com/comment-composer.js
@@ -22,7 +22,7 @@ class CommentComposer extends LitElement {
     this.isProcessing = false
     this.autofocus = false
     this.draftText = ''
-    this.placeholder = 'Write your comment'
+    this.placeholder = 'Write your comment. Remember to always be kind!'
     this.subject = undefined
     this.parent = undefined
     this.modalMode = false
@@ -53,7 +53,7 @@ class CommentComposer extends LitElement {
             id="text"
             class="
               w-full box-border resize-none outline-none h-32 text-base
-              ${this.modalMode ? 'border border-gray-300 px-3 py-2 h-56 rounded' : 'h-32'}
+              ${this.modalMode ? 'border border-gray-300 px-3 py-2 h-56 rounded' : 'h-32 px-1.5'}
             "
             placeholder=${this.placeholder}
             @keyup=${this.onTextareaKeyup}
@@ -74,11 +74,6 @@ class CommentComposer extends LitElement {
             ?disabled=${!this.canPost}
           >${this.isProcessing ? html`<span class="spinner"></span>` : 'Post comment'}</button>
         </div>
-
-        <div class="bg-gray-100 font-medium mt-3 sm:mt-2 px-3 py-2 rounded text-center text-gray-700 text-sm">
-          <span class="fas fa-fw fa-info text-gray-600"></span>
-          Gentle reminder: always be kind and respectful of others!
-        </div>
       </form>
     `
   }

diff --git a/static/js/com/header.js b/static/js/com/header.js
@@ -67,7 +67,7 @@ export class Header extends LitElement {
     }
     let info = session.getSavedInfo()
     return html`
-      <div class="hidden lg:block white-glass sticky top-0 z-10 shadow">
+      <div class="hidden lg:block white-glass sticky top-0 z-20 shadow">
         <div class="flex items-center leading-none font-medium py-2 px-2">
           <a href="/" class=${this.getHeaderNavClass(undefined)} @click=${this.onClickLink}>
             CTZN <small>alpha</small>

diff --git a/static/js/com/subnav.js b/static/js/com/subnav.js
@@ -34,7 +34,7 @@ export class Subnav extends LitElement {
 
   getNavCls ({path, mobileOnly, rightAlign, thin}) {
     return `
-      text-center pt-2 pb-2.5 ${thin ? 'px-3 sm:px-4' : 'px-4 sm:px-7'} whitespace-nowrap font-semibold cursor-pointer
+      text-center pt-2 pb-2.5 sm:pt-4 sm:pb-4 ${thin ? 'px-3 sm:px-4' : 'px-4 sm:px-7'} whitespace-nowrap font-semibold cursor-pointer
       hov:hover:text-blue-600
       ${mobileOnly ? 'no-header-only' : 'block'}
       ${rightAlign ? 'ml-auto' : ''}

diff --git a/static/js/com/thread.js b/static/js/com/thread.js
@@ -109,7 +109,7 @@ export class Thread extends LitElement {
 
   render () {
     return html`
-      <div class="mb-1 bg-white sm:rounded-b">
+      <div class="mb-1 sm:mb-4 bg-white sm:rounded-b">
         ${this.post ? html`
           <ctzn-post-view
             mode="expanded"
@@ -120,9 +120,10 @@ export class Thread extends LitElement {
           <span class="spinner"></span>
         `}
       </div>
+      <hr class="mb-4 sm:ml-16">
       ${this.post ? this.renderCommentBox() : ''}
       ${this.thread?.length ? html`
-        <div class="bg-white sm:rounded px-1 py-2 sm:px-3 sm:py-3">
+        <div class="bg-white sm:rounded px-1 py-2 sm:px-3 sm:py-3 sm:pl-16">
           ${this.renderReplies(this.thread)}
         </div>
       ` : ''}
@@ -181,7 +182,7 @@ export class Thread extends LitElement {
     if (this.post?.value?.community) {
       if (!session.isInCommunity(this.post.value.community.userId)) {
         return html`
-          <div class="bg-white p-3 mb-1 sm:rounded">
+          <div class="bg-white p-3 mb-1 sm:rounded sm:pl-16">
             <div class="italic text-gray-500 text-sm">
               Join <a href="/${this.post.value.community.userId}" class="hov:hover:underline">${displayNames.render(this.post.value.community.userId)}</a> to reply.
             </div>
@@ -191,7 +192,7 @@ export class Thread extends LitElement {
     } else {
       if (!session.isFollowingMe(this.post?.author?.userId)) {
         return html`
-          <div class="bg-white p-3 mb-1 sm:rounded">
+          <div class="bg-white p-3 mb-1 sm:rounded sm:pl-16">
             <div class="italic text-gray-500 text-sm">
               Only people followed by <a href="/${this.post.author.userId}" class="hov:hover:underline">${this.post.author.displayName}</a> can reply.
             </div>
@@ -200,18 +201,19 @@ export class Thread extends LitElement {
       }
     }
     return html`
-      <div class="bg-white p-3 sm:p-4 mb-1 sm:rounded">
+      <div class="pl-3 mb-2 pr-1 sm:pl-16">
         ${this.isReplying ? html`
           <app-comment-composer
             autofocus
+            class="block border border-gray-200 rounded p-2"
             .community=${this.post.value.community}
             .subject=${{dbUrl: this.post.url, authorId: this.post.author.userId}}
-            placeholder="Write your comment"
+            placeholder="Write your comment. Remember to always be kind!"
             @publish=${this.onPublishReply}
             @cancel=${this.onCancelReply}
           ></app-comment-composer>
         ` : html`
-          <div class="cursor-text italic text-gray-500" @click=${this.onStartReply}>
+          <div class="cursor-text bg-gray-50 text-gray-600 px-4 py-2 rounded" @click=${this.onStartReply}>
             Write your comment
           </div>
         `}

diff --git a/static/js/com/user-list.js b/static/js/com/user-list.js
@@ -85,15 +85,15 @@ export class UserList extends LitElement {
           }
           const userId = (new URL(profile.url)).pathname.split('/')[1]
           return html`
-            <div class="rounded relative">
+            <div class="rounded relative border border-gray-200">
               <div
-                class="rounded"
+                class="rounded-t"
                 style="height: 80px; background: linear-gradient(0deg, #3c4af6, #2663eb);"
               >
                 <app-img-fallbacks>
                   <img
                     slot="img1"
-                    class="rounded"
+                    class="rounded-t"
                     style="display: block; object-fit: cover; width: 100%; height: 80px;"
                     src=${BLOB_URL(userId, 'profile-banner')}
                   >
@@ -109,7 +109,7 @@ export class UserList extends LitElement {
                   >
                 </a>
               </div>
-              <div class="pt-8 pb-2 px-2 bg-white rounded-lg mt-1">
+              <div class="pt-8 pb-2 px-4 bg-white rounded-lg mt-1">
                 <div class="text-center">
                   <div class="font-medium text-lg truncate leading-tight">
                     <a href="/${profile.userId}" title=${profile.value.displayName}>
@@ -121,7 +121,7 @@ export class UserList extends LitElement {
                       ${userId}
                     </a>
                   </div>
-                  <div class="text-sm text-gray-600 mb-4 break-words">${unsafeHTML(linkify(emojify(makeSafe(profile.value.description))))}</div>
+                  <div class="text-sm mb-4 break-words">${unsafeHTML(linkify(emojify(makeSafe(profile.value.description))))}</div>
                 </div>
                 ${this.renderProfileControls(profile)}
               </div>

diff --git a/static/js/ctzn-tags/comment-view.js b/static/js/ctzn-tags/comment-view.js
@@ -280,7 +280,7 @@ export class CommentView extends LitElement {
                 .community=${this.comment.value.community}
                 .subject=${this.comment.value.reply.root}
                 .parent=${{dbUrl: this.comment.url, authorId: this.comment.author.userId}}
-                placeholder="Write your reply"
+                placeholder="Write your reply. Remember to always be kind!"
                 @publish=${this.onPublishReply}
                 @cancel=${this.onCancelReply}
               ></app-comment-composer>

diff --git a/static/js/ctzn-tags/post-view.js b/static/js/ctzn-tags/post-view.js
@@ -195,43 +195,45 @@ export class PostView extends LitElement {
 
   renderExpanded () {
     return html`
-      <div
-        class="bg-white sm:rounded ${this.renderOpts.noclick ? '' : 'cursor-pointer'}"
-        @click=${this.onClickCard}
-        @mousedown=${this.onMousedownCard}
-        @mouseup=${this.onMouseupCard}
-        @mousemove=${this.onMousemoveCard}
-      >
-        <div class="flex items-center pt-2 px-3 sm:pt-3 sm:px-4">
-          <a class="inline-block w-10 h-10 mr-2" href="/${this.post.author.userId}" title=${this.post.author.displayName}>
-            <img
-              class="inline-block w-10 h-10 object-cover rounded"
-              src=${AVATAR_URL(this.post.author.userId)}
-            >
-          </a>
-          <div class="flex-1">
-            <div>
+    <div
+      class="grid grid-post px-1 py-0.5 bg-white sm:rounded ${this.renderOpts.noclick ? '' : 'cursor-pointer'} text-gray-600"
+      @click=${this.onClickCard}
+      @mousedown=${this.onMousedownCard}
+      @mouseup=${this.onMouseupCard}
+      @mousemove=${this.onMousemoveCard}
+    >
+      <div class="pl-2 pt-2">
+        <a class="block" href="/${this.post.author.userId}" title=${this.post.author.displayName}>
+          <img
+            class="block object-cover rounded-full mt-1 w-11 h-11"
+            src=${AVATAR_URL(this.post.author.userId)}
+          >
+        </a>
+      </div>
+      <div class="block bg-white min-w-0">
+        <div class="pl-2 pr-2 py-2 min-w-0">
+          <div class="pr-2.5 text-gray-600 truncate sm:mb-2">
+            <span class="sm:mr-1 whitespace-nowrap">
               <a class="hov:hover:underline" href="/${this.post.author.userId}" title=${this.post.author.displayName}>
-                <span class="text-black font-bold">${displayNames.render(this.post.author.userId)}</span>
+                <span class="text-gray-800 font-semibold">${displayNames.render(this.post.author.userId)}</span>
               </a>
-            </div>
-            <div class="text-sm">
-              <a class="text-gray-600 hov:hover:underline" href="${POST_URL(this.post)}" data-tooltip=${(new Date(this.post.value.createdAt)).toLocaleString()}>
+            </span>
+            <span class="mr-2 text-sm">
+              <a class="hov:hover:underline" href="${POST_URL(this.post)}" data-tooltip=${(new Date(this.post.value.createdAt)).toLocaleString()}>
                 ${relativeDate(this.post.value.createdAt)}
               </a>
               ${this.post.value.community ? html`
-                <span class="text-gray-700">
-                  in
-                  <a href="/${this.communityUserId}" class="whitespace-nowrap font-semibold hov:hover:underline">
-                    ${displayNames.render(this.communityUserId)}
-                  </a>
-                </span>
+                in
+                <a href="/${this.communityUserId}" class="whitespace-nowrap font-semibold text-gray-700 hov:hover:underline">
+                  ${displayNames.render(this.communityUserId)}
+                </a>
               ` : ''}
-            </div>
+            </span>
           </div>
-        </div>
-        <div class="px-3 py-3 sm:px-4 sm:py-4 min-w-0">
-          <div class="whitespace-pre-wrap break-words text-lg leading-tight font-medium text-black mb-1.5">${unsafeHTML(emojify(linkify(makeSafe(this.post.value.text))))}</div>
+          <div
+            class="whitespace-pre-wrap break-words text-black mb-4"
+            @click=${this.onClickText}
+          >${unsafeHTML(linkify(emojify(makeSafe(this.post.value.text))))}</div>
           ${this.renderMedia()}
           ${this.renderPostExtendedText()}
           ${this.noctrls ? '' : html`
@@ -241,7 +243,7 @@ export class PostView extends LitElement {
                 ${this.renderReactions()}
               </div>
             ` : ''}
-            <div class="flex items-center justify-around text-sm text-gray-600 px-1 pt-1 pr-8 sm:pr-80">
+            <div class="flex items-center justify-around text-sm text-gray-600 px-1 pt-1 pr-8 sm:pr-60">
               ${this.renderRepliesCtrl()}
               ${this.renderReactionsBtn()}
               ${this.renderGiftItemBtn()}
@@ -526,7 +528,7 @@ export class PostView extends LitElement {
     if (this.post.value.extendedTextMimeType === 'text/html') {
       return html`
         <app-custom-html
-          class="py-4 mt-4 mb-3"
+          class="py-4 mt-4 mb-3 text-black"
           context="post"
           .contextState=${{page: {userId: this.post.author.userId}}}
           .html=${this.post.value.extendedText}
@@ -536,7 +538,7 @@ export class PostView extends LitElement {
     }
     return html`
       <div
-        class="whitespace-pre-wrap break-words leading-snug text-gray-800 my-2"
+        class="whitespace-pre-wrap break-words leading-snug text-black my-2"
         @click=${this.onClickText}
       >${unsafeHTML(emojify(linkify(makeSafe(this.post.value.extendedText))))}</div>
     `

diff --git a/static/js/views/post.js b/static/js/views/post.js
@@ -99,7 +99,7 @@ class CtznPostView extends LitElement {
     ]
     return html`
       <app-subnav
-        nav-cls="mb-0.5 sm:mt-0.5"
+        nav-cls="mb-0.5 sm:mt-0.5 sm:relative sm:border-b sm:border-gray-200"
         .items=${SUBNAV_ITEMS}
         current-path=${location.pathname}
       ></app-subnav>
@@ -108,8 +108,12 @@ class CtznPostView extends LitElement {
 
   renderRightSidebar () {
     return html`
-      <nav class="pt-1.5 w-full">
-        <app-user-list cols="1" .ids=${[this.authorProfile.userId]}></app-user-list>
+      <nav class="pt-4">
+        <app-user-list
+          class="block sticky top-18"
+          cols="1"
+          .ids=${[this.authorProfile.userId]}
+        ></app-user-list>
       </nav>
     `
   }
@@ -150,7 +154,7 @@ class CtznPostView extends LitElement {
       <main class="col2 mb-32">
         <div>
           ${this.renderHeader()}
-          <div class="min-h-screen sm:bg-transparent">
+          <div class="min-h-screen sm:bg-transparent sm:py-2">
             ${this.subject ? html`
               <app-thread
                 .subject=${this.subject}