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

View #8

Merged
merged 14 commits into from
Nov 3, 2023
Merged

View #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b44e659
dinamic user list creation
tomasesquivelgc Nov 2, 2023
e671d92
divide code into partial
tomasesquivelgc Nov 2, 2023
6774664
reduce code
tomasesquivelgc Nov 2, 2023
aa482fe
convert show.html.erb into partials
tomasesquivelgc Nov 2, 2023
58fa786
turn user_bio into partial
tomasesquivelgc Nov 2, 2023
3369bf4
minimize app css
tomasesquivelgc Nov 2, 2023
9311be1
add link-to posts button
tomasesquivelgc Nov 3, 2023
462b78f
create posts index template
tomasesquivelgc Nov 3, 2023
0971ed7
create post index template
tomasesquivelgc Nov 3, 2023
5146eb6
add post_comments and link to post/:id
tomasesquivelgc Nov 3, 2023
9e52f72
add empty posts message, post/:post_id template, back to main page link
tomasesquivelgc Nov 3, 2023
57cbeee
fix linters
tomasesquivelgc Nov 3, 2023
0300462
fix typo
tomasesquivelgc Nov 3, 2023
8c42c22
fix recent_posts
tomasesquivelgc Nov 3, 2023
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
53 changes: 29 additions & 24 deletions app/assets/stylesheets/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.title {
text-align: center;
text-decoration: underline;
}

.user-card {
align-self: center;
justify-content: space-between;
Expand All @@ -27,53 +32,43 @@
padding: 20px;
display: flex;
justify-content: space-between;
text-decoration: none;
}

.card-name {
align-self: center;
}

.card-counter {
.counter {
align-self: end;
justify-self: end;
}

.user-bio {
align-self: center;
justify-content: center;
margin: 50px auto;
border: 2px solid #ccc;
max-width: 70%;
padding: 20px;
}

.user-post {
.info-card {
display: flex;
flex-direction: column;
align-self: center;
justify-content: center;
margin: 50px auto;
margin: 40px auto 0 auto;
border: 2px solid #ccc;
max-width: 70%;
min-width: 70%;
padding: 20px;
text-decoration: none;
color: black;
}

.user-posts-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: center;
}

.user-posts-title {
text-align: center;
text-decoration: underline;
}

.user-post-date {
text-align: right;
font-size: small;
}

.user-posts-button {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin: 10px 0;
padding: 10px;
Expand All @@ -82,5 +77,15 @@
background-color: #fff;
cursor: pointer;
width: 10%;
height: 50px;
height: 30px;
text-align: center;
text-decoration: none;
}

.comments-card {
margin-top: 0;
}

.comments-card :nth-child(odd) {
background-color: #ccc;
}
11 changes: 9 additions & 2 deletions app/controllers/posts_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
class PostsController < ApplicationController
def index; end
def index
@user = User.find(params[:user_id])
@user_posts = @user.recent_posts
end

def show; end
def show
@user = User.find(params[:user_id])
@post = @user.posts.find(params[:id])
@comments = @post.comments.all
end
end
9 changes: 7 additions & 2 deletions app/controllers/users_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
class UsersController < ApplicationController
def index; end
def index
@users = User.all
end

def show; end
def show
@user = User.find(params[:id])
@posts = @user.recent_posts
end
end
5 changes: 5 additions & 0 deletions app/views/partials/_post_comments.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="comments-card info-card">
<% post.recent_comments.reverse.each do |comment| %>
<p><%= comment.user.name %>: <%= comment.text %></p>
Comment on lines +1 to +3
Copy link

Choose a reason for hiding this comment

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

  • [Optional] Kindly ensure that all the comments (not recent_comments) are rendered in the post_show page.

<% end %>
</div>
7 changes: 7 additions & 0 deletions app/views/partials/_user_bio.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="info-card">
<h3 class="user-bio-title">Bio</h3>
</br>
<p class="user-bio-text">
<%= user.bio %>
</p>
</div>
7 changes: 7 additions & 0 deletions app/views/partials/_user_card.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="user-card">
<%= image_tag user.photo, class: "user-image" if user.photo.present? %>
<a href="<%= user_path(user) %>" class="card-info">
<h2 class="card-name"><%= user.name %></h2>
<p class="counter">Number of posts: <%= user.post_counter || 0 %></p>
</a>
</div>
6 changes: 6 additions & 0 deletions app/views/partials/_user_post.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<a href="<%= user_post_path(user, post) %>" class="info-card">
<h4 class="user-post-title"><%= post.title %></h4>
</br>
<p class="user-post-text"><%= post.text %></p>
Comment on lines +1 to +4
Copy link

Choose a reason for hiding this comment

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

  • [Optional] Kindly ensure that all the post (not recent_posts) are rendered in the post_index page.

<p class="counter">Comments: <%= post.comments_counter || 0 %>, Likes: <%= post.likes_counter || 0 %></p>
</a>
13 changes: 12 additions & 1 deletion app/views/posts/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
<h1>Hello posts</h1>
<%= link_to "back to main page", root_path %>
<%= render 'partials/user_card', user: @user %>

<div class="user-posts-list">
<% if @user_posts.empty? %>
<p class="no-posts">No posts yet</p>
<% end %>
<% @user_posts.each do |post| %>
<%= render 'partials/user_post', post: post, user: @user %>
<%= render 'partials/post_comments', post: post %>
<% end %>
</div>
4 changes: 3 additions & 1 deletion app/views/posts/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
<h1>Goodbye posts</h1>
<%= link_to "back to main page", root_path %>
<%= render 'partials/user_post', post: @post, user: @user %>
<%= render 'partials/post_comments', post: @post %>
54 changes: 4 additions & 50 deletions app/views/users/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,4 @@
<ul>
<li class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</li>

<li class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</li>

<li class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</li>

<li class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</li>

<li class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</li>

<li class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</li>

</ul>
<h1 class="title" >Users</h1>
<% @users.each do |user| %>
<%= render 'partials/user_card', user: user %>
<% end %>
48 changes: 11 additions & 37 deletions app/views/users/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,15 @@
<div class="user-card">
<img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="user-image" class="user-image" />
<div class="card-info">
<h2 class="card-name" >User Name</h2>
<p class="card-counter" >Number of posts: 0</p>
</div>
</div>
<%= link_to "back to main page", root_path %>
<%= render 'partials/user_card', user: @user %>

<div class="user-bio">
<h3 class="user-bio-title">Bio</h3>
</br>
<p class="user-bio-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<%= render 'partials/user_bio', user: @user %>

<h3 class="title">Posts</h3>
<div class="user-posts-list">
<h3 class="user-posts-title">Posts</h3>
<div class="user-post">
<h4 class="user-post-title">Post Title</h4>
</br>
<p class="user-post-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="user-post-date">Post Date</p>
</div>

<div class="user-post">
<h4 class="user-post-title">Post Title</h4>
</br>
<p class="user-post-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="user-post-date">Post Date</p>
</div>

<div class="user-post">
<h4 class="user-post-title">Post Title</h4>
</br>
<p class="user-post-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="user-post-date">Post Date</p>
</div>

<button class="user-posts-button">See all posts</button>
<% if @posts.empty? %>
<p class="no-posts">No posts yet</p>
<% end %>
<% @posts.each do |post| %>
<%= render 'partials/user_post', post: post, user: @user %>
<% end %>
<%= link_to "See all posts", user_posts_path(@user), class: "user-posts-button" %>
</div>
Loading