Changed article show and render_comment_tree so that it fits with new…

… application.html.erb.
vigetlabs · Jul 2, 2024 · 21e6238 · 21e6238
1 parent ada4617
commit 21e6238
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 34 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -70,6 +70,11 @@
     cursor: pointer;
     text-decoration: underline;
   }
+
+  .comment {
+    max-width: 1215px;
+    overflow-wrap: anywhere;
+}
 
 
 a:link    { color:#000000; text-decoration:none; }

diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb
@@ -1,5 +1,5 @@
 class CommentsController < ApplicationController
-  before_action :authorized, only: [:create]
+  before_action :authorized, only: [:create, :upvote, :downvote]
   helper_method :comment
 
   def show

diff --git a/app/helpers/comments_helper.rb b/app/helpers/comments_helper.rb
@@ -2,20 +2,20 @@ module CommentsHelper
   def render_comment_tree(comment)
     content_tag :li do
       concat content_tag(:p, comment.text)
-      concat content_tag(:div, style: "display: flex; align-items: center;") {
-        safe_concat "Posted by "
-        safe_concat link_to(comment.user.name, comment.user)
-        safe_concat "  on #{comment.created_at.strftime("%B %d, %Y at %I:%M %p")}"
-        safe_concat " - Score: "
-        safe_concat content_tag(:span, comment.score, id: "score-Comment-#{comment.id}")
-
-        safe_concat button_to("Upvote", upvote_article_comment_path(comment.article, comment), method: :post, class: "btn btn-sm upvote-button", data: {votable_type: "Comment", votable_id: comment.id, article_id: comment.article.id})
-        safe_concat button_to("Downvote", downvote_article_comment_path(comment.article, comment), method: :post, class: "btn btn-sm downvote-button", data: {votable_type: "Comment", votable_id: comment.id, article_id: comment.article.id})
-      }
-      concat content_tag(:p) {
-        safe_concat link_to("reply", article_comment_path(comment.article, comment))
-      }
+      concat content_tag(:div, class: "subtext", style: "display: flex; align-items: center;") {
+               safe_concat button_to("Upvote", upvote_article_comment_path(comment.article, comment), method: :post, class: "btn btn-sm upvote-button", data: {votable_type: "Comment", votable_id: comment.id, article_id: comment.article.id})
+               safe_concat button_to("Downvote", downvote_article_comment_path(comment.article, comment), method: :post, class: "btn btn-sm downvote-button", data: {votable_type: "Comment", votable_id: comment.id, article_id: comment.article.id})
 
+               safe_concat content_tag(:span, "#{comment.score} points", id: "score-Comment-#{comment.id}", class: "score")
+               concat raw("&nbsp;")
+               safe_concat "by"
+               concat raw("&nbsp;")
+               safe_concat link_to(comment.user.name, comment.user)
+               concat raw("&nbsp;")
+               safe_concat "on #{comment.created_at.strftime("%B %d, %Y at %I:%M %p")}"
+               safe_concat " | "
+               safe_concat link_to(" reply", article_comment_path(comment.article, comment))
+             }
       if comment.replies.any?
         concat(content_tag(:ul) do
           comment.replies.each do |reply|

diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb
@@ -1,18 +1,57 @@
-<h1><%= @article.title %></h1>
-<p><%= link_to @article.link, @article.link %></p>
-
-<%= form_with(model: [@article, @comment], local: true) do |form| %>
-  <div class="field">
-    <%= form.text_area :text %>
-  </div>
-  <div class="actions">
-    <%= form.submit %>
-  </div>
-<% end %>
-
-<h2>Comments</h2>
-<ul>
-  <% @comments.each do |comment| %>
-    <%= render_comment_tree(comment) %>
-  <% end %>
-</ul>
+<tr style="height:10px"></tr>
+<tr>
+  <td>
+    <table border="0" cellpadding="0" cellspacing="0">
+      <tbody>
+        <tr>
+          <td align="right">
+            <span class="rank">1.</span>
+          </td>
+          <td valign="top" class="votelinks">
+            <center>
+              <%= button_to upvote_article_path(@article), method: :post, class: "btn btn-sm upvote-button", data: { votable_type: 'Article', votable_id: @article.id } do %>
+                <i class="fas fa-arrow-up"></i>
+              <% end %>
+              <%= button_to downvote_article_path(@article), method: :post, class: "btn btn-sm downvote-button", data: { votable_type: 'Article', votable_id: @article.id } do %>
+                <i class="fas fa-arrow-down"></i>
+              <% end %>
+            </center>
+          </td>
+          <td class="title">
+            <%= link_to @article.title, @article.link, target: "_blank" %>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2"></td>
+          <td class="subtext">
+            <span id="score-Article-<%= @article.id %>" class="score"><%= @article.score %> points</span>
+            by <%= link_to @article.user.name, user_path(@article.user) %>
+            <span class="age"><%= time_ago_in_words(@article.created_at) %> ago</span>
+          </td>
+        </tr>
+        <tr style="height:10px"></tr>
+        <tr>
+          <td colspan="3">
+            <%= form_with(model: [@article, @comment], local: true) do |form| %>
+              <div class="field">
+                <%= form.text_area :text %>
+              </div>
+              <div class="actions">
+                <%= form.submit %>
+              </div>
+            <% end %>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3">
+            <ul style="list-style-type: none; padding-left: 0;">
+              <% @comments.each do |comment| %>
+                <%= render_comment_tree(comment) %>
+              <% end %>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </td>
+</tr>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
   <head>
     <title>Haxxor News</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= javascript_include_tag 'application' %>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   </head>
   <body>
     <center>