Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling #29

Merged
merged 13 commits into from
Jul 8, 2024
Merged

Styling #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
21e6238
Changed article show and render_comment_tree so that it fits with new…
paulmckissock Jul 2, 2024
08a0a5a
Made new article and comment pages work with application.html.erb
paulmckissock Jul 2, 2024
6a3dfea
Made User page work with application.html.
paulmckissock Jul 3, 2024
bdcd6b5
Fixed issue with indexing of article's
paulmckissock Jul 3, 2024
dbd87a1
Styled user articles pages.
paulmckissock Jul 3, 2024
1bfd5ad
Fixed voting buttons on comments page. Changed seeds.rb comment/artic…
paulmckissock Jul 3, 2024
674f33b
Standardrb
paulmckissock Jul 3, 2024
6bd11b4
Styling for login, signup, and reset password.
paulmckissock Jul 3, 2024
e673aa3
Styling for users comments page.
paulmckissock Jul 3, 2024
b9d3026
Added reply button to each comment on users comments page.
paulmckissock Jul 3, 2024
e15e983
Added article helper method, removed tbody block.
paulmckissock Jul 3, 2024
ddebe32
Styled edit email and edit password pages. Improved spacing on replie…
paulmckissock Jul 8, 2024
b1358f0
standardrb
paulmckissock Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,28 @@
cursor: pointer;
text-decoration: underline;
}

.comment {
max-width: 1215px;
overflow-wrap: anywhere;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be tabbed in.

.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 {
Comment on lines +74 to +92
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would put line breaks between all of these blocks to clean them up.

padding-top: 10px;
}


a:link { color:#000000; text-decoration:none; }
Expand Down
1 change: 1 addition & 0 deletions app/controllers/articles_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
class ArticlesController < ApplicationController
before_action :authorized, only: [:new, :create, :upvote, :downvote]
helper_method :article

def index
@articles = Article.order(created_at: :desc).page(params[:page]).per(20)
Expand Down
8 changes: 2 additions & 6 deletions app/controllers/comments_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
class CommentsController < ApplicationController
before_action :authorized, only: [:create]
before_action :authorized, only: [:create, :upvote, :downvote]
helper_method :comment

def show
Expand All @@ -26,11 +26,7 @@ def create
comment.user = current_user

if comment.save
if comment.parent_id.present?
redirect_to article_comment_path(article, comment.parent_id)
else
redirect_to article
end
redirect_to article
else
render "articles/show", status: :unprocessable_entity
end
Expand Down
4 changes: 2 additions & 2 deletions app/controllers/users_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ def show
end

def articles
@articles = user.articles.order(created_at: :desc)
@articles = user.articles.order(created_at: :desc).page(params[:page]).per(20)
end

def comments
@comments = user.comments.order(created_at: :desc)
@comments = user.comments.order(created_at: :desc).page(params[:page]).per(20)
end

def edit_email
Expand Down
49 changes: 33 additions & 16 deletions app/helpers/comments_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,40 @@
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})
content_tag :div do
concat content_tag(:table, border: "0", cellpadding: "0", cellspacing: "0") {
concat content_tag(:tbody) {
concat content_tag(:tr) {
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")
}
concat button_to(downvote_article_comment_path(comment), method: :post, class: "btn btn-sm downvote-button", data: {votable_type: "Comment", votable_id: comment.id, article_id: comment.article.id}) {
content_tag(:i, "", class: "fas fa-arrow-down")
}
}
}
concat content_tag(:td, comment.text)
}
concat content_tag(:tr) {
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("&nbsp;")
safe_concat "by"
concat raw("&nbsp;")
safe_concat link_to(comment.user.name, comment.user)
concat raw("&nbsp;")
safe_concat content_tag(:span, "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))
}
}
concat content_tag(:tr, "", class: "post-subtext")
}
}
concat content_tag(:p) {
safe_concat link_to("reply", article_comment_path(comment.article, comment))
}

if comment.replies.any?
concat(content_tag(:ul) do
concat(content_tag(:ul, style: "padding-left: 20px;") do
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would replace this with a class instead of the inline styling.

comment.replies.each do |reply|
concat render_comment_tree(reply)
end
Expand Down
13 changes: 7 additions & 6 deletions app/views/articles/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +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"><%= 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>
Expand All @@ -32,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>
Expand Down
48 changes: 27 additions & 21 deletions app/views/articles/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
<h1>New Article</h1>
<tr class="header-space"></tr>
<tr>
<td>
<h1>New Article</h1>

<%= form_with model: @article do |form| %>
<div>
<div>
<%= form.label :title %>
</div>
<%= form.text_field :title %>
<% @article.errors.full_messages_for(:title).each do |message| %>
<div><%= message %></div>
<% end %>
</div>
<%= form_with model: @article do |form| %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you made article a helper method, I would use it here instead of @article.

<div>
<div>
<%= form.label :title %>
</div>
<%= form.text_field :title %>
<% @article.errors.full_messages_for(:title).each do |message| %>
<div><%= message %></div>
<% end %>
</div>

<div>
<div>
<%= form.label :link %>
<div>
<%= form.label :link %>
</div>
<div>
<%= form.text_area :link %>
</div>
<% @article.errors.full_messages_for(:link).each do |message| %>
<div><%= message %></div>
<% end %>
</div>

<div>
<%= form.text_area :link %>
<%= form.submit %>
</div>
<% @article.errors.full_messages_for(:link).each do |message| %>
<div><%= message %></div>
<% end %>
</div>
</td>
</tr>

<div>
<%= form.submit %>
</div>
<% end %>
72 changes: 54 additions & 18 deletions app/views/articles/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,54 @@
<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 class="header-space"></tr>
<tr>
<td>
<table class="page-table">
<tbody>
<tr>
<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>
<% 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="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 class="header-space"></tr>
<tr>
<td colspan="3">
<%= form_with(model: [@article, @comment], local: true) do |form| %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would also use the helper method here.

<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;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some more inline styling I would replace.

<% @comments.each do |comment| %>
<%= render_comment_tree(comment) %>
<% end %>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
72 changes: 45 additions & 27 deletions app/views/comments/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,45 @@
<h1>Comment by <%= link_to comment.user.name, comment.user %></h1>
<p><%= comment.text %></p>
<div style="display: flex; align-items: center;">
Posted on <%= comment.created_at.strftime("%B %d, %Y at %I:%M %p") %>
- Score: <span id="score-Comment-<%= comment.id %>"><%= comment.score %></span>
<% user_vote = @user_votes[comment.id] %>
<%= button_to "Upvote", 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 } %>
<%= button_to "Downvote", downvote_article_comment_path(comment), method: :post, method: :post, class: "btn btn-sm downvote-button", data: { votable_type: 'Comment', votable_id: comment.id, article_id: comment.article.id } %>
</div>
<h2>Replies</h2>
<ul>
<% comment.replies.each do |reply| %>
<%= render_comment_tree(reply) %>
<% end %>
</ul>

<h3>Write a Reply</h3>
<%= 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">
<%= form.submit "Reply" %>
</div>
<% end %>

<tr class="header-space"></tr>
<tr>
<td>
<table class="page-table">
<tbody>
<tr>
<td align="right">
<span ><%= 1 %>.</span>
</td>
<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>
<% end %>
<%= button_to downvote_article_comment_path(comment), method: :post, class: "btn btn-sm downvote-button", data: { votable_type: 'Comment', votable_id: comment.id, article_id: comment.article.id } do %>
<i class="fas fa-arrow-down"></i>
<% end %>
</center>
</td>
<td>
<%= comment.text %>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span id="score-Comment-<%= comment.id %>"><%= comment.score %> points</span>
by <%= link_to comment.user.name, user_path(comment.user) %>
<span class="age"><%= time_ago_in_words(comment.created_at) %> ago</span>
</td>
</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>
<%= form.submit "Reply" %>
</div>
<% end %>
</td>
</tr>
8 changes: 4 additions & 4 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<!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>
<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;">
Expand Down
Loading