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>