Merge pull request #1 from uurcank/update_views

Update views

app/controllers/help_center/support_threads_controller.rb

@@ -67,6 +67,6 @@ def set_support_thread
  end
 
  def support_thread_params
- params.require(:support_thread).permit(:title, :content, :support_category_id, support_posts_attributes: [:body])
+ params.require(:support_thread).permit(:title, :content, :position, :support_category_id, support_posts_attributes: [:body])
  end
 end

app/views/help_center/support_posts/_form.html.erb

@@ -1,32 +1,47 @@
-<%= form_for [@support_thread, @support_post],
- url: (@support_post.persisted? ? help_center.support_thread_support_post_path(@support_thread, @support_post) : help_center.support_thread_support_posts_path(@support_thread)),
- html: { data: { behavior: "comment-form" } } do |f| %>
-
- <% if @support_post.errors.any? %>
+<%= form_for @support_thread,
+ url: (@support_thread.persisted? ? help_center.support_thread_path(@support_thread) : help_center.support_threads_path),
+ html: { data: {behavior: "comment-form"} } do |f| %>
+ <% if @support_thread.errors.any? %>
  <div id="error_explanation">
- <h2><%= pluralize(@support_post.errors.count, "error") %> prohibited this support_post from being saved:</h2>
-
+ <h2><%= pluralize(@support_thread.errors.count, "error") %> prohibited this support_thread from being saved:</h2>
  <ul>
-  <% @support_post.errors.full_messages.each do |message| %>
-  <li><%= message %></li>
-  <% end %>
+ <% @support_thread.errors.full_messages.each do |message| %>
+ <li><%= message %></li>
+ <% end %>
  </ul>
  </div>
  <% end %>
-
- <div class="form-group">
- <%= f.text_area :body, placeholder: t('add_a_comment'), rows: 8, class: "form-control simplemde", data: { behavior: "comment-body" } %>
+ <div class="mb-4">
+  <%= f.label :support_category_id, t('choose_a_category') %>
+ <%= f.collection_select :support_category_id, SupportCategory.sorted, :id, :name, {include_blank: t('pick_a_category')}, {autofocus: true, class: "form-control"} %>
  </div>
-
- <div class="text-right">
- <div class="pull-left">
- <small>
- <%# Describe text formatting options here with a link %>
- <%#= link_to "Parsed with Markdown", "https://guides.github.com/features/mastering-markdown/", target: "_blank" %>
- </small>
- </div>
-
- <%= f.button "#{f.object.new_record? ? t('comment') : t('update_comment') }", class: "btn btn-primary", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> #{t('saving_comment')}"} %>
+ <div class="mb-4">
+ <%= f.label t('title') %>
+ <%= f.text_field :title, placeholder: t('how_do_i'), class: "form-control" %>
+ </div>
+ <div class="mb-4">
+ <%= f.label t('position') %>
+ <%= f.text_field :position, class: "form-control" %>
+ </div>
+ <div class="mb-4">
+ <%= f.label t('content') %>
+ <%= f.rich_text_area :content %>
+ </div>
+ <% if local_assigns.fetch(:posts, true) %>
+ <% if !f.object.new_record? %>
+ <%= f.fields_for :support_posts do |p| %>
+ <div class="mb-4">
+ <%= p.label :body, t('what_help_needed') %>
+ <%= p.text_area :body, placeholder: t('add_a_comment'), rows: 10, class: "form-control simplemde", data: { behavior: "comment-body" } %>
+ </div>
+ <% end %>
+ <% end %>
+ <% end %>
+ <div class="mb-4 text-right">
+ <% if f.object.new_record? %>
+ <%= f.button t('add'), class: "btn btn-primary", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> #{t('saving')}"} %>
+ <% else %>
+ <%= f.button t('update'), class: "btn btn-primary", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> #{t('saving')}"} %>
+ <% end %>
  </div>
-
 <% end %>

app/views/help_center/support_posts/_support_post.html.erb

@@ -1,8 +1,6 @@
 <%# We don't currently cache the support posts because they have permissions to deal with %>
-
 <%= content_tag :div, id: dom_id(support_post), class: support_post_classes(support_post) do %>
- <div class="card-header">
-
+ <div class="py-3 px-6 mb-0 bg-grey-lighter border-b-1 border-grey-light text-grey-darkest">
  <% if is_moderator_or_owner?(support_post) %>
  <div class="float-right">
  <%= link_to icon("fas","edit"), simple_discussion.edit_support_thread_support_post_path(@support_thread, support_post),
@@ -19,10 +17,8 @@
  %>
  </div>
  <% end %>
-
  <div>
  <%= avatar_tag(support_post.user.email) %>
-
  <strong class="support-post-user">
  <%= support_post.user.name %> <%= support_user_badge(support_post.user) %>
  </strong>
@@ -32,26 +28,22 @@
  </small>
  </div>
  </div>
-
- <div class="card-body">
+ <div class="flex-auto p-6">
  <%= formatted_content support_post.body %>
  </div>
-
  <% if @support_thread.solved? && support_post.solved? %>
- <div class="card-footer">
+ <div class="py-3 px-6 bg-grey-lighter border-t-1 border-grey-light">
  <div class="pull-right">
- <strong class="text-success"><%= icon("fas","check") %> <%= t('solved') %></strong>
-
+ <strong class="text-green"><%= icon("fas","check") %> <%= t('solved') %></strong>
  <% if is_moderator_or_owner?(@support_thread) %>
  <small>
  <%= link_to t('undo'), simple_discussion.unsolved_support_thread_support_post_path(@support_thread, support_post), method: :put %>
  </small>
  <% end %>
  </div>
  </div>
-
  <% elsif is_moderator_or_owner?(@support_thread) %>
- <div class="card-footer">
+ <div class="py-3 px-6 bg-grey-lighter border-t-1 border-grey-light">
  <div class="pull-right">
  <small>
  <%= link_to simple_discussion.solved_support_thread_support_post_path(@support_thread, support_post), method: :put do %>

app/views/help_center/support_posts/edit.html.erb

@@ -1,17 +1,13 @@
 <p><small><%= link_to "← Back to the thread", help_center.support_thread_path(@support_thread) %></small></p>
-
 <h2><%= content_tag :span, "Pinned", class: "text-muted" if @support_thread.pinned? %> <%= @support_thread.title %></h2>
-
 <p class="thread-details">
  <strong><%= category_link(@support_thread.support_category) %></strong>
  • <%= t('asked_time_ago', time: time_ago_in_words(@support_thread.created_at), author: @support_thread.user.name) %>
 </p>
 </p>
-
 <br />
-
 <%= content_tag :div, id: dom_id(@support_post), class: support_post_classes(@support_post) do %>
- <div class="card-header">
+ <div class="py-3 px-6 mb-0 bg-grey-lighter border-b-1 border-grey-light text-grey-darkest">
  <div>
  <%= avatar_tag(@support_post.user.email) %>
  <strong class="support-post-user"><%= @support_post.user.name %></strong>
@@ -21,8 +17,7 @@
  </small>
  </div>
  </div>
-
- <div class="card-body">
+ <div class="flex-auto p-6">
  <%= render "form" %>
  </div>
 <% end %>

app/views/help_center/support_threads/_article.html.erb

@@ -0,0 +1,32 @@
+<div class="container mx-auto">
+<div class="flex flex-wrap mb-8">
+ <% if current_user && current_user.admin? %>
+ <div class="flex w-full pr-4 pl-4 justify-end">
+ <%= link_to icon("fas","pencil"), help_center.edit_support_thread_path(@support_thread),
+ class: "text-muted",
+ data: { toggle: "tooltip", placement: "left" },
+ title: t('edit_this_thread') %>
+ </div>
+ <% end %>
+ <div class="md:w-full pr-4 pl-41">
+ <small class="mb-2"><%= support_category_link(@support_thread.support_category) %> > <%= @support_thread.title %></small>
+ <h1><%= icon "fas", "thumb-tack", class: "text-muted" if @support_thread.pinned? %> <%= @support_thread.title %></h1>
+ </div>
+
+</div>
+<%= @support_thread.content %>
+<!--
+<div class="thread-reaction">
+ <p>Did this answer your question?</p>
+ <p class="thread-reaction-links">
+ <a>😞<a>
+ <a>😃<a>
+ </p>
+<div>
+-->
+<% if HelpCenter.enable_comments %>
+ <hr>
+ <%= render partial: "help_center/support_posts/support_post", collection: @support_thread.support_posts.includes(:user).sorted %>
+ <%= render partial: "help_center/support_posts/form" if user_signed_in? %>
+<% end %>
+</div>

app/views/help_center/support_threads/_form.html.erb

@@ -1,56 +1,47 @@
 <%= form_for @support_thread,
  url: (@support_thread.persisted? ? help_center.support_thread_path(@support_thread) : help_center.support_threads_path),
  html: { data: {behavior: "comment-form"} } do |f| %>
-
  <% if @support_thread.errors.any? %>
  <div id="error_explanation">
  <h2><%= pluralize(@support_thread.errors.count, "error") %> prohibited this support_thread from being saved:</h2>
-
  <ul>
  <% @support_thread.errors.full_messages.each do |message| %>
  <li><%= message %></li>
  <% end %>
  </ul>
  </div>
  <% end %>
-
- <div class="form-group">
+ <div class="mb-4">
  <%= f.label :support_category_id, t('choose_a_category') %>
  <%= f.collection_select :support_category_id, SupportCategory.sorted, :id, :name, {include_blank: t('pick_a_category')}, {autofocus: true, class: "form-control"} %>
  </div>
-
- <div class="form-group">
+ <div class="mb-4">
  <%= f.label t('title') %>
  <%= f.text_field :title, placeholder: t('how_do_i'), class: "form-control" %>
  </div>
-
- <div class="form-group">
+ <div class="mb-4">
  <%= f.label t('position') %>
  <%= f.text_field :position, class: "form-control" %>
  </div>
-
- <div class="form-group">
+ <div class="mb-4">
  <%= f.label t('content') %>
  <%= f.rich_text_area :content %>
  </div>
-
  <% if local_assigns.fetch(:posts, true) %>
  <% if !f.object.new_record? %>
  <%= f.fields_for :support_posts do |p| %>
- <div class="form-group">
+ <div class="mb-4">
  <%= p.label :body, t('what_help_needed') %>
  <%= p.text_area :body, placeholder: t('add_a_comment'), rows: 10, class: "form-control simplemde", data: { behavior: "comment-body" } %>
  </div>
  <% end %>
  <% end %>
  <% end %>
-
- <div class="form-group text-right">
+ <div class="mb-4 text-right">
  <% if f.object.new_record? %>
  <%= f.button t('add'), class: "btn btn-primary", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> #{t('saving')}"} %>
  <% else %>
  <%= f.button t('update'), class: "btn btn-primary", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> #{t('saving')}"} %>
  <% end %>
  </div>
-
 <% end %>

app/views/help_center/support_threads/_support_thread.html.erb

@@ -1,30 +1,25 @@
 <%= cache support_thread do %>
  <div class="support-thread">
- <div class="row">
-
- <div class="col">
+ <div class="flex flex-wrap">
+ <div class="flex-grow mb-2">
  <%= link_to help_center.support_thread_path(support_thread) do %>
  <h4>
  <%= support_thread.title %>
  </h4>
-
- <p class="text-muted"><%= truncate(support_thread.content.to_plain_text, length: 200) %></p>
-
- <div class="thread-details">
+ <p class="text-gray-500 hover:text-gray-700"><%= truncate(support_thread.content.to_plain_text, length: 200) %></p>
+ <div class="thread-details mt-2">
  <%= t('content_updated_at', update_time: time_ago_in_words(support_thread.created_at)) %>
  </div>
  <% end %>
  </div>
-
  <% if HelpCenter.enable_comments %>
- <div class="col-sm-1 text-center">
+ <div class="sm:w-1/6 pr-4 pl-4 text-center">
  <%= link_to help_center.support_thread_path(support_thread), class: "thread-posts-count" do %>
  <span class="count"><%= support_thread.support_posts_count %></span>
  <small><%= t("post", count: support_thread.support_posts_count) %></small>
  <% end %>
  </div>
  <% end %>
-
  </div>
  </div>
 <% end %>

app/views/help_center/support_threads/index.html.erb

@@ -1,23 +1,19 @@
 <% if @support_threads.none? %>
-
  <div><%= t('search_not_found') %>. <%= t('check_out') %> <%= link_to t('latest_questions'), help_center.support_threads_path %> <%= t('instead') %> </div>
-
 <% else %>
-<div class="container">
+<div class="container mx-auto">
  <% if request.url.include?('category') %>
  <%# If category, list all articles %>
- <div class="col-12 text-left p-0">
+ <div class="w-1/62 text-left p-0">
  <h3> <%= @support_threads.first.support_category.name %></h3>
  </div>
+ <hr>
  <%= render partial: "help_center/support_threads/support_thread", collection: @support_threads, spacer_template: "shared/spacer" %>
-
  <div class="support-threads-nav text-center">
  <%= will_paginate @support_threads, url_builder: help_center, renderer: HelpCenter::BootstrapLinkRenderer %>
  </div>
-
  <% else %>
  <%# Set default index here %>
-
  <% end %>
 </div>
 <% end %>

app/views/help_center/support_threads/show.html.erb

@@ -1,39 +1 @@
-<div class="container">
-<div class="row">
- <div class="col-md-11">
- <small class="mb-2"><%= support_category_link(@support_thread.support_category) %> > <%= @support_thread.title %></small>
- <h1><%= icon "fas", "thumb-tack", class: "text-muted" if @support_thread.pinned? %> <%= @support_thread.title %></h1>
- </div>
-
- <% if is_moderator_or_owner?(@support_thread) %>
- <div class="col-md-1">
- <%= link_to icon("fas","pencil"), help_center.edit_support_thread_path(@support_thread),
- class: "text-muted",
- data: { toggle: "tooltip", placement: "left" },
- title: t('edit_this_thread') %>
- </div>
- <% end %>
-
-</div>
-
-<p class="thread-details d-flex">
- <%= t('written_by_author', author: @support_thread.user.name) %>
- <small><%= t('content_updated_at', update_time: time_ago_in_words(@support_thread.updated_at)) %></small>
-</p>
-
-<%= @support_thread.content %>
-
-<div class="thread-reaction">
- <p>Did this answer your question?</p>
- <p class="thread-reaction-links">
- <a>😞<a>
- <a>😃<a>
- </p>
-<div>
-
-<% if HelpCenter.enable_comments %>
- <hr>
- <%= render partial: "help_center/support_posts/support_post", collection: @support_thread.support_posts.includes(:user).sorted %>
- <%= render partial: "help_center/support_posts/form" if user_signed_in? %>
-<% end %>
-</div>
+<%= render "article" %>

app/views/help_center/user_mailer/new_post.html.erb

@@ -1,12 +1,9 @@
 <div style="position: relative">
  <%= gravatar_image_tag @support_post.user.email, style: "float: left" %>
-
  <div style="margin-left:60px">
  <p><strong><%= @support_post.user.name %></strong> <small>commented:</small></p>
  <%= formatted_content @support_post.body %>
  </div>
 </div>
-
 <br />
-
 <p><%= link_to "Reply to this comment", support_thread_url(@support_post.support_thread, anchor: "support_post_#{@support_post.id}"), style: "background:#be2126; color:#fff; text-decoration:none; padding: 10px 20px" %></p>

app/views/help_center/user_mailer/new_thread.html.erb

@@ -1,12 +1,9 @@
 <div style="position: relative">
  <%= gravatar_image_tag @support_post.user.email, style: "float: left" %>
-
  <div style="margin-left:60px">
  <p><strong><%= @support_post.user.name %></strong> <small>commented:</small></p>
  <%= formatted_content @support_post.body %>
  </div>
 </div>
-
 <br />
-
 <p><%= link_to "Reply to this comment", support_thread_url(@support_post.support_thread, anchor: "support_post_#{@support_post.id}"), style: "background:#be2126; color:#fff; text-decoration:none; padding: 10px 20px" %></p>