Styled edit email and edit password pages. Improved spacing on replie…

…s to comments. Replaced many reoccuring inline styles with css classes.

app/assets/stylesheets/application.css

@@ -75,6 +75,23 @@
     max-width: 1215px;
     overflow-wrap: anywhere;
 }
+  .post-subtext {
+    height:5px;
+  }
+  .header-space {
+    height:10px
+  }
+  .page-table {
+    border:0;
+    border-collapse: collapse;
+  }
+  .page-table td,
+  .page-table th {
+    padding: 0;
+  }
+  .paginate-spacing {
+    padding-top: 10px;
+  }
 
 
 a:link    { color:#000000; text-decoration:none; }

app/helpers/comments_helper.rb

@@ -4,7 +4,7 @@ def render_comment_tree(comment)
       concat content_tag(:table, border: "0", cellpadding: "0", cellspacing: "0") {
         concat content_tag(:tbody) {
           concat content_tag(:tr) {
-            concat content_tag(:td, valign: "top", class: "votelinks") {
+            concat content_tag(:td, valign: "top") {
               content_tag(:center) {
                 concat button_to(upvote_article_comment_path(comment), method: :post, class: "btn btn-sm upvote-button", data: {votable_type: "Comment", votable_id: comment.id, article_id: comment.article.id}) {
                   content_tag(:i, "", class: "fas fa-arrow-up")
@@ -14,10 +14,10 @@ def render_comment_tree(comment)
                 }
               }
             }
-            concat content_tag(:td, comment.text, valign: "top", style: "padding-left: 10px;")
+            concat content_tag(:td, comment.text)
           }
           concat content_tag(:tr) {
-            concat content_tag(:td, "", colspan: "2")
+            concat content_tag(:td, "", colspan: "1")
             concat content_tag(:td, class: "subtext") {
               safe_concat content_tag(:span, "#{comment.score} points", id: "score-Comment-#{comment.id}", class: "score")
               concat raw(" ")
@@ -30,11 +30,11 @@ def render_comment_tree(comment)
               safe_concat link_to(" reply", article_comment_path(comment.article, comment))
             }
           }
-          concat content_tag(:tr, "", style: "height:5px")
+          concat content_tag(:tr, "", class:"post-subtext")
         }
       }
       if comment.replies.any?
-        concat(content_tag(:ul, style: "list-style-type: none; padding-left: 20px;") do
+        concat(content_tag(:ul, style: "padding-left: 20px;") do
           comment.replies.each do |reply|
             concat render_comment_tree(reply)
           end

app/views/articles/index.html.erb

@@ -1,15 +1,15 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
-    <table border="0" cellpadding="0" cellspacing="0">
+    <table class="page-table">
       <tbody>
         <% current_page = params[:page].present? ? params[:page].to_i : 1 %>
         <% @articles.each_with_index do |article, index| %>
           <tr>
             <td align="right">
-              <span class="rank"><%= (current_page-1) * 20 + index + 1 %>.</span>
+              <span><%= (current_page-1) * 20 + index + 1 %>.</span>
             </td>
-            <td valign="top" class="votelinks">
+            <td>
               <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>
@@ -33,15 +33,15 @@
               <span class="comments-count"><%= link_to "#{article.comments.count} comments", article %></span>
             </td>
           </tr>
-          <tr style="height:5px"></tr>
+          <tr class="post-subtext"></tr>
         <% end %>
       </tbody>
     </table>
   </td>
 </tr>
 <tr>
   <td>
-    <div style="padding-top: 10px;">
+    <div class="paginate-spacing">
       <%= paginate @articles %>
     </div>
   </td>

app/views/articles/new.html.erb

@@ -1,4 +1,4 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
     <h1>New Article</h1>

app/views/articles/show.html.erb

@@ -1,13 +1,10 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
-    <table border="0" cellpadding="0" cellspacing="0">
+    <table class="page-table">
       <tbody>
         <tr>
-          <td align="right">
-            <span class="rank">1.</span>
-          </td>
-          <td valign="top" class="votelinks">
+          <td>
             <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>
@@ -22,14 +19,14 @@
           </td>
         </tr>
         <tr>
-          <td colspan="2"></td>
+          <td colspan="1"></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 class="header-space"></tr>
         <tr>
           <td colspan="3">
             <%= form_with(model: [@article, @comment], local: true) do |form| %>

app/views/comments/show.html.erb

@@ -1,13 +1,13 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
-    <table border="0" cellpadding="0" cellspacing="0">
+    <table class="page-table">
       <tbody>
         <tr>  
           <td align="right">
-            <span class="rank"><%= 1 %>.</span>
+            <span ><%= 1 %>.</span>
           </td>  
-          <td valign="top" class="votelinks">
+          <td valign="top">
             <center>
               <%= button_to upvote_article_comment_path(comment), method: :post, class: "btn btn-sm upvote-button", data: { votable_type: 'Comment', votable_id: comment.id, article_id: comment.article.id } do %>
                 <i class="fas fa-arrow-up"></i>
@@ -17,7 +17,7 @@
               <% end %>
             </center>
           </td>
-          <td valign="top">
+          <td>
             <%= comment.text %>
           </td>
         </tr>
@@ -29,15 +29,15 @@
             <span class="age"><%= time_ago_in_words(comment.created_at) %> ago</span>
           </td>
         </tr>
-        <tr style="height:5px"></tr>
+        <tr class="post-subtext"></tr>
       </tbody>
     </table>
     <%= form_with(model: [comment.article, @reply], local: true) do |form| %>
       <div class="field">
         <%= form.text_area :text %>
       </div>
       <%= form.hidden_field :parent_id, value: comment.id %>
-      <div class="actions">
+      <div>
         <%= form.submit "Reply" %>
       </div>
     <% end %>

app/views/layouts/application.html.erb

@@ -12,11 +12,11 @@
   </head>
   <body>
     <center>
-      <table border="0" cellpadding="0" cellspacing="0" width="85%" style="padding:2px" bgcolor="#f6f6ef">
+      <table class="page-table" width="85%" style="padding:2px" bgcolor="#f6f6ef">
         <tbody>
           <tr>
             <td bgcolor="#ff6600">
-              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:2px">
+              <table class="page-table" width="100%" style="padding:2px">
                 <tbody>
                   <tr>
                     <td style="line-height:12pt; height:10px;">

app/views/password_resets/edit.html.erb

@@ -1,9 +1,14 @@
-<h1>Reset your password?</h1>
+<tr class="header-space"></tr>
+<tr>
+    <td>
+        <h1>Reset your password?</h1>
 
-<%= form_with model: @user, url: password_reset_edit_path(token: params[:token]), method: :patch do |form| %>
-    <%= form.label :password %>
-    <%= form.password_field :password, placeholder: "Password" %>
-    <%= form.label :password_confirmation %>
-    <%= form.password_field :password_confirmation, placeholder: "Confirm Password" %>
-    <%= form.submit "Reset Password", class: "btn btn-primary" %>
-<% end %>
+        <%= form_with model: @user, url: password_reset_edit_path(token: params[:token]), method: :patch do |form| %>
+            <%= form.label :password %>
+            <%= form.password_field :password, placeholder: "Password" %>
+            <%= form.label :password_confirmation %>
+            <%= form.password_field :password_confirmation, placeholder: "Confirm Password" %>
+            <%= form.submit "Reset Password", class: "btn btn-primary" %>
+        <% end %>
+    </td>
+</tr>

app/views/password_resets/new.html.erb

@@ -1,10 +1,10 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
     <h1>Forgot your password?</h1>
     <p>Password reset functionality does not work on the deployed version</p>
     <%= form_with url: password_reset_path do |form| %>
-      <table border="0" cellpadding="0" cellspacing="0" width="100%">
+      <table class="page-table" width="100%">
         <tbody>
           <tr>
             <td>

app/views/sessions/new.html.erb

@@ -1,8 +1,8 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
     <%= form_tag login_path do %>
-      <table border="0" cellpadding="0" cellspacing="0" width="100%">
+      <table class="page-table" width="100%">
         <tbody>
           <tr>
             <td>

app/views/users/articles.html.erb

@@ -1,15 +1,15 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
-    <table border="0" cellpadding="0" cellspacing="0">
+    <table class="page-table">
       <tbody>
         <% current_page = params[:page].present? ? params[:page].to_i : 1 %>
         <% @articles.each_with_index do |article, index| %>
           <tr>
             <td align="right">
-              <span class="rank"><%= (current_page-1) * 20 + index + 1 %>.</span>
+              <span ><%= (current_page-1) * 20 + index + 1 %>.</span>
             </td>
-            <td valign="top" class="votelinks">
+            <td valign="top">
               <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>
@@ -33,15 +33,15 @@
               <span class="comments-count"><%= link_to "#{article.comments.count} comments", article %></span>
             </td>
           </tr>
-          <tr style="height:5px"></tr>
+          <tr class="post-subtext"></tr>
         <% end %>
       </tbody>
     </table>
   </td>
 </tr>
 <tr>
   <td>
-    <div style="padding-top: 10px;">
+    <div class="paginate-spacing">
       <%= paginate @articles %>
     </div>
   </td>

app/views/users/comments.html.erb

@@ -1,15 +1,15 @@
-<tr style="height:10px"></tr>
+<tr class="header-space"></tr>
 <tr>
   <td>
-    <table border="0" cellpadding="0" cellspacing="0">
+    <table class="page-table">
       <tbody>
         <% current_page = params[:page].present? ? params[:page].to_i : 1 %>
         <% @comments.each_with_index do |comment, index| %>
           <tr>  
             <td align="right">
-              <span class="rank"><%= (current_page-1) * 20 + index + 1 %>.</span>
+              <span ><%= (current_page-1) * 20 + index + 1 %>.</span>
             </td>  
-            <td valign="top" class="votelinks">
+            <td>
               <center>
                 <%= button_to upvote_article_comment_path(comment), method: :post, class: "btn btn-sm upvote-button", data: { votable_type: 'Comment', votable_id: comment.id, article_id: comment.article.id } do %>
                   <i class="fas fa-arrow-up"></i>
@@ -19,7 +19,7 @@
                 <% end %>
               </center>
             </td>
-            <td valign="top">
+            <td>
               <%= comment.text %>
             </td>
           </tr>
@@ -33,7 +33,7 @@
               <%= link_to(" reply", article_comment_path(comment.article, comment))%>
             </td>
           </tr>
-          <tr style="height:5px"></tr>
+          <tr class="post-subtext"></tr>
 
         <% end %>
       </tbody>
@@ -42,7 +42,7 @@
 </tr>
 <tr>
   <td>
-    <div style="padding-top: 10px;">
+    <div class="paginate-spacing">
       <%= paginate @comments %>
     </div>
   </td>

app/views/users/edit_email.html.erb

@@ -1,13 +1,18 @@
-<h1>Edit Email</h1>
+<tr class="header-space"></tr>
+<tr>
+  <td>
+    <h1>Edit Email</h1>
 
-<%= form_with(model: user, url: update_email_user_path(user), method: :patch) do |form| %>
-  <div>
-    <%= form.label :email %><br>
-    <%= form.email_field :email %>
-  </div>
+    <%= form_with(model: user, url: update_email_user_path(user), method: :patch) do |form| %>
+      <div>
+        <%= form.label :email %><br>
+        <%= form.email_field :email %>
+      </div>
 
-  <div>
-    <%= form.submit "Update Email" %>
-  </div>
-<% end %>
+      <div>
+        <%= form.submit "Update Email" %>
+      </div>
+    <% end %>
+  </td>
+</tr>
 

app/views/users/edit_password.html.erb

@@ -1,17 +1,22 @@
-<h1>Edit Password</h1>
+<tr class="header-space"></tr>
+<tr>
+  <td>
+    <h1>Edit Password</h1>
 
-<%= form_for user, url: update_password_user_path(user), method: :patch do |f| %>
-  <div class="field">
-    <div>
-        <%= f.label :password %>
-    </div>
-    <%= f.password_field :password %>
-  </div>
-  <div class="field">
-    <%= f.label :password_confirmation %><br>
-    <%= f.password_field :password_confirmation %>
-  </div>
-  <div class="actions">
-    <%= f.submit "Update Password" %>
-  </div>
-<% end %>
+    <%= form_for user, url: update_password_user_path(user), method: :patch do |f| %>
+      <div class="field">
+        <div>
+            <%= f.label :password %>
+        </div>
+        <%= f.password_field :password %>
+      </div>
+      <div class="field">
+        <%= f.label :password_confirmation %><br>
+        <%= f.password_field :password_confirmation %>
+      </div>
+      <div>
+        <%= f.submit "Update Password" %>
+      </div>
+    <% end %>
+  </td>
+</tr>