From 71fcd4fe8d8371ac2b9fecb0ebee9e291ab8e8fc Mon Sep 17 00:00:00 2001
From: drusepth <drusepth@gmail.com>
Date: Tue, 6 Dec 2022 16:25:13 -0800
Subject: [PATCH] style thredded posts in threads

---
 .../stylesheets/thredded-overrides.scss       |  8 ++
 app/views/layouts/forum.html.erb              |  2 +-
 app/views/thredded/posts/_post.html.erb       | 63 ++++++++++++---
 .../thredded/posts_common/_header.html.erb    |  7 --
 .../thredded/redesigned/_breadcrumbs.html.erb |  2 +-
 app/views/thredded/topics/show.html.erb       | 77 +++++++++----------
 app/views/thredded/users/_badge.html.erb      | 12 +--
 7 files changed, 99 insertions(+), 72 deletions(-)

diff --git a/app/assets/stylesheets/thredded-overrides.scss b/app/assets/stylesheets/thredded-overrides.scss
index 6ae9f585..ce6e1365 100644
--- a/app/assets/stylesheets/thredded-overrides.scss
+++ b/app/assets/stylesheets/thredded-overrides.scss
@@ -20,4 +20,12 @@
         line-height: inherit !important;
     }
   }
+}
+
+.thredded--main-container {
+  max-width: 100%;
+}
+
+.thredded--post--content {
+  font-size: 12pt;
 }
\ No newline at end of file
diff --git a/app/views/layouts/forum.html.erb b/app/views/layouts/forum.html.erb
index 9766f9ad..0fc6c11d 100644
--- a/app/views/layouts/forum.html.erb
+++ b/app/views/layouts/forum.html.erb
@@ -273,7 +273,7 @@
     <ol role="list" class="max-w-screen-xl w-full mx-auto flex space-x-4 pl-40">
       <%= render('thredded/redesigned/breadcrumbs') %>
     </ol>
-    <ul class="divide-x">
+    <ul class="divide-x text-sm">
       <li><!-- Included to always force a left-border on whatever action is left-most --></li>
       <%= render 'thredded/shared/nav/moderation' %>
       <%= render 'thredded/shared/nav/notification_preferences' %>
diff --git a/app/views/thredded/posts/_post.html.erb b/app/views/thredded/posts/_post.html.erb
index 8db85805..48e3acc5 100644
--- a/app/views/thredded/posts/_post.html.erb
+++ b/app/views/thredded/posts/_post.html.erb
@@ -5,7 +5,7 @@
 
 <% unless blocked_post %>
   <%
-    common_post_classes  = 'p-4'
+    common_post_classes  = 'p-4 text-sm'
     unmuted_post_classes = 'bg-white rounded shadow' + ' ' + common_post_classes
     muted_post_classes   = '' + ' ' + common_post_classes
 
@@ -14,16 +14,55 @@
   %>
 
   <%= render 'thredded/posts_common/before_first_unread_post', post: post if post.first_unread_in_page? %>
-  <%= content_tag :article, id: dom_id(post), class: "thredded--post thredded--#{post.read_state}--post #{muted_post ? muted_post_classes : unmuted_post_classes}" do %>
-    <%= render 'thredded/posts_common/actions', post: post, actions: local_assigns[:actions] %>
-    <%= render 'thredded/posts_common/header', post: post %>
-    <%= ForumReplacementService.replace_for(content, current_user) || render('thredded/posts/content', post: post) %>
-    <% if post.pending_moderation? && !Thredded.content_visible_while_pending_moderation %>
-      <p class="thredded--alert thredded--alert-warning"><%= t 'thredded.posts.pending_moderation_notice' %></p>
-    <% elsif post.blocked? && post.can_moderate? %>
-      <p class="thredded--alert thredded--alert-danger">
-        <%= render 'thredded/shared/content_moderation_blocked_state', moderation_record: post.last_moderation_record %>
-      </p>
-    <% end %>
+  <%= content_tag :article, id: dom_id(post), class: "thredded--post thredded--#{post.read_state}--post" do %>
+    <div class="flex space-x-4">
+      <div>
+        <span class="inline-block relative">
+          <%= image_tag post.user.image_url(120), class: 'h-16 w-16 rounded-full border border-gray-200' %>
+          <% if post.user.favorite_page_type? %>
+            <span class="absolute bottom-2 right-2 transform translate-y-1/2 translate-x-1/2 block border-2 border-white rounded-full">
+              <span class="block h-6 w-6 rounded-full text-center <%= content_class_from_name(post.user.favorite_page_type).color %>">
+                <i class="material-icons text-sm text-white"><%= content_class_from_name(post.user.favorite_page_type).icon %></i>
+              </span>
+            </span>
+          <% end %>
+        </span>
+      </div>
+      <div class="bg-white flex-1 border border-gray-200 rounded divide-y">
+        <div class="px-2 py-1 bg-gray-50 rounded-t flex">
+          <div class="flex-1">
+            <h2 class="thredded--post--user text-sm">
+              <%= user_link post.user %>
+            </h2>
+
+            <% if post.user.forum_moderator? %>
+              <i class="material-icons float-left text-notebook-blue mr-1">
+                health_and_safety
+              </i>
+            <% end %>
+          </div>
+          <div class="h-6">
+            <span class="relative -top-0.5">
+              <a href="<%= post.permalink_path %>" rel="nofollow" class="thredded--link thredded--post--created-at text-xs">
+                <%= time_ago post.created_at %>
+              </a>
+            </span>
+            <span class="relative top-0.5">
+              <%= render 'thredded/posts_common/actions', post: post, actions: local_assigns[:actions] %>
+            </span>
+          </div>
+        </div>
+        <div class="p-4">
+          <%= ForumReplacementService.replace_for(content, current_user) || render('thredded/posts/content', post: post) %>
+        </div>
+        <% if post.pending_moderation? && !Thredded.content_visible_while_pending_moderation %>
+          <p class="thredded--alert thredded--alert-warning"><%= t 'thredded.posts.pending_moderation_notice' %></p>
+        <% elsif post.blocked? && post.can_moderate? %>
+          <p class="thredded--alert thredded--alert-danger">
+            <%= render 'thredded/shared/content_moderation_blocked_state', moderation_record: post.last_moderation_record %>
+          </p>
+        <% end %>
+      </div>
+    </div>
   <% end %>
 <% end %>
diff --git a/app/views/thredded/posts_common/_header.html.erb b/app/views/thredded/posts_common/_header.html.erb
index b68f1736..65f84fd5 100644
--- a/app/views/thredded/posts_common/_header.html.erb
+++ b/app/views/thredded/posts_common/_header.html.erb
@@ -1,13 +1,6 @@
 <header>
   <div>
     <%= image_tag post.avatar_url, class: 'thredded--post--avatar mt-8' if post.user %>
-    
-    <%# TODO add moderator badge to avatar instead of next to name %>
-    <% if false && post.user.forum_moderator? %>
-      <i class="material-icons float-left text-notebook-blue">
-        health_and_safety
-      </i>
-    <% end %>
   </div>
 
   <h2 class="thredded--post--user"><%= user_link post.user %></h2>
diff --git a/app/views/thredded/redesigned/_breadcrumbs.html.erb b/app/views/thredded/redesigned/_breadcrumbs.html.erb
index 3a7ad666..fbfa388e 100644
--- a/app/views/thredded/redesigned/_breadcrumbs.html.erb
+++ b/app/views/thredded/redesigned/_breadcrumbs.html.erb
@@ -1,7 +1,7 @@
 <li class="flex">
   <div class="flex items-center">
     <%= link_to main_app.thredded_path, class: 'text-gray-400 hover:text-blue-500' do %>
-      <i class="material-icons flex-shrink-0 relative top-2">forum</i>
+      <i class="material-icons flex-shrink-0 relative top-1">forum</i>
       <span class="sr-only">Home</span>
     <% end %>
   </div>
diff --git a/app/views/thredded/topics/show.html.erb b/app/views/thredded/topics/show.html.erb
index 9d6fbea7..467af7bf 100644
--- a/app/views/thredded/topics/show.html.erb
+++ b/app/views/thredded/topics/show.html.erb
@@ -2,8 +2,8 @@
 <% content_for :thredded_page_title, topic.title %>
 <% content_for :thredded_page_id, 'thredded--topic-show' %>
 
-<div class="flex-1 relative z-0 flex" :class="{ 'ml-56': showSidebar }">
-  <aside class="hidden relative xl:flex xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 overflow-y-auto">
+<div class="flex-1 relative z-0 flex">
+  <aside class="bg-gray-50 hidden relative xl:flex xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 overflow-y-auto">
     <!-- side panel (hidden on small screens; todo: probably just stack it) -->
     <div class="py-6 px-4 sm:px-6 lg:px-8">
       <%= content_tag :section,
@@ -12,48 +12,45 @@
       <% end %>
     </div>
   </aside>
-  <main class="flex-1 relative z-0 focus:outline-none">
+  <main class="flex-1 relative z-0 mt-10 focus:outline-none">
     <!-- main panel-->
-    <div class="py-6 px-4 sm:px-6 lg:px-1">
-      <%= thredded_page do %>
-        <%= content_tag :section,
-                        id: dom_id(topic),
-                        class: ['thredded--main-section', 'thredded--topic', *topic_css_classes(topic)] do %>
-          <%= view_hooks.posts_common.pagination_top.render(self, posts: @posts) do %>
-            <footer class="thredded--pagination-top"><%= paginate @posts %></footer>
-          <% end %>
+    <%= thredded_page do %>
+      <%= content_tag :section,
+                      id: dom_id(topic),
+                      class: ['thredded--main-section', 'thredded--topic', *topic_css_classes(topic)] do %>
+        <%= view_hooks.posts_common.pagination_top.render(self, posts: @posts) do %>
+          <footer class="thredded--pagination-top"><%= paginate @posts %></footer>
+        <% end %>
 
-          <%= render_posts @posts,
-                          partial: 'thredded/posts/post',
-                          content_partial: 'thredded/posts/content',
-                          locals: { actions: { quote: true } } %>
+        <%= render_posts @posts,
+                        partial: 'thredded/posts/post',
+                        content_partial: 'thredded/posts/content',
+                        locals: { actions: { quote: true } } %>
 
-          <%= view_hooks.posts_common.pagination_bottom.render(self, posts: @posts) do %>
-            <footer class="thredded--pagination-bottom"><%= paginate @posts %></footer>
-          <% end %>
-          <% if topic.locked? %>
-            <p class="thredded--topic--locked-notice"><%= t 'thredded.topics.locked.message'%></p>
-          <% end %>
-          <% if policy(@new_post.post).create? %>
-            <div class="thredded--post-form--wrapper">
-              <h3 class="thredded--post-form--title"><%= t('thredded.posts.form.title_label') %></h3>
-              <%= render 'thredded/posts/form',
-                        post:        @new_post,
-                        button_text: t('thredded.posts.form.create_btn'),
-                        button_submitting_text: t('thredded.posts.form.create_btn_submitting') %>
-            </div>
-          <% end %>
-          <% if topic.can_destroy? %>
-            <div class="thredded--topic-delete--wrapper">
-              <%= button_to t('thredded.topics.delete_topic'), topic.destroy_path, method: :delete,
-                            form_class: 'thredded--topic-delete-form',
-                            class: 'thredded--button bg-red-500',
-                            'data-confirm' => t('thredded.topics.delete_confirm') %>
-            </div>
-          <% end %>
+        <%= view_hooks.posts_common.pagination_bottom.render(self, posts: @posts) do %>
+          <footer class="thredded--pagination-bottom"><%= paginate @posts %></footer>
+        <% end %>
+        <% if topic.locked? %>
+          <p class="thredded--topic--locked-notice"><%= t 'thredded.topics.locked.message'%></p>
+        <% end %>
+        <% if policy(@new_post.post).create? %>
+          <div class="thredded--post-form--wrapper">
+            <h3 class="thredded--post-form--title"><%= t('thredded.posts.form.title_label') %></h3>
+            <%= render 'thredded/posts/form',
+                      post:        @new_post,
+                      button_text: t('thredded.posts.form.create_btn'),
+                      button_submitting_text: t('thredded.posts.form.create_btn_submitting') %>
+          </div>
+        <% end %>
+        <% if topic.can_destroy? %>
+          <div class="thredded--topic-delete--wrapper">
+            <%= button_to t('thredded.topics.delete_topic'), topic.destroy_path, method: :delete,
+                          form_class: 'thredded--topic-delete-form',
+                          class: 'thredded--button bg-red-500',
+                          'data-confirm' => t('thredded.topics.delete_confirm') %>
+          </div>
         <% end %>
       <% end %>
-
-    </div>
+    <% end %>
   </main>
 </div>
diff --git a/app/views/thredded/users/_badge.html.erb b/app/views/thredded/users/_badge.html.erb
index fb265595..b0811fd8 100644
--- a/app/views/thredded/users/_badge.html.erb
+++ b/app/views/thredded/users/_badge.html.erb
@@ -1,16 +1,6 @@
 <%
-  badge_classes = 'text-xs'
+  badge_classes = 'text-xs ml-1 py-0.5 px-2 rounded-lg'
   badge_text    = user.forums_badge_text
-
-  if user.favorite_page_type?
-    favorite_link = link_to main_app.send("#{user.favorite_page_type.downcase.pluralize}_user_path", { id: user.id }) do
-      content_tag(:i, class: "material-icons text-sm mr-1 #{content_class_from_name(user.favorite_page_type).try(:text_color)}") do
-        "#{content_class_from_name(user.favorite_page_type).try(:icon)}"
-      end
-    end
-
-    badge_text = favorite_link + badge_text
-  end
 %>
 
 <% if user.respond_to?(:selected_billing_plan_id) %>