mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
style thredded posts in threads
This commit is contained in:
drusepth
parent
bb6825878b
commit
71fcd4fe8d
@ -20,4 +20,12 @@
|
||||
line-height: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thredded--main-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.thredded--post--content {
|
||||
font-size: 12pt;
|
||||
}
|
||||
@ -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' %>
|
||||
|
||||
@ -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 %>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user