Commit f82acbb9 authored by simon's avatar simon
Browse files

Add comments to posts

parent 11a4fb3e
......@@ -53,6 +53,11 @@
padding: 0.3rem 1.5rem;
}
&.extra-small {
font-size: $size-heading-small;
padding: 0.1rem 1.3rem;
}
&:focus {
border: solid 0.25rem $highlight;
background-color: $background-sexy;
......
@import 'variables';
@import "variables";
////////////////////////////
// //
// New Post //
// //
////////////////////////////
section.container{
section.container {
width: 75%;
height: 90%;
margin: auto;
......@@ -17,10 +17,10 @@ section.container{
align-items: center;
grid-template-columns: 100%;
grid-template-rows: 10% 90%;
grid-template-areas:
"create"
"content";
h2{
grid-template-areas:
"create"
"content";
h2 {
grid-area: create;
color: $background-sexy;
background-color: $secondary;
......@@ -33,7 +33,7 @@ section.container{
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.inner-container{
.inner-container {
width: 90%;
height: 90%;
margin: auto;
......@@ -41,24 +41,24 @@ section.container{
background-color: $background-dark;
border-radius: 0.5rem;
filter: drop-shadow(0 0.5rem 1rem $background-dark);
form{
form {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 35% 32.5% 32.5%;
grid-template-rows: 20% 40% 15% 10%;
grid-row-gap: 5%;
grid-template-areas:
"post-title post-image post-file"
"post-content-text post-content-text post-content-text"
"post-tags post-tags post-tags"
"post-submit post-submit post-submit";
grid-template-areas:
"post-title post-image post-file"
"post-content-text post-content-text post-content-text"
"post-tags post-tags post-tags"
"post-submit post-submit post-submit";
label{
label {
color: $background-sexy;
font-size: 1.3rem;
}
.field_title{
.field_title {
align-self: center;
display: flex;
flex-flow: column nowrap;
......@@ -68,8 +68,8 @@ section.container{
height: 100%;
width: 75%;
justify-content: center;
#post_title{
#post_title {
background-color: $background-light;
border: solid 0.25rem $background-light;
border-radius: 0.25rem;
......@@ -79,7 +79,7 @@ section.container{
filter: drop-shadow(0 0.25rem 0.25em $background-sexy);
}
}
.field_content_text{
.field_content_text {
grid-area: post-content-text;
display: flex;
flex-flow: column nowrap;
......@@ -87,8 +87,8 @@ section.container{
height: 100%;
width: 85%;
justify-content: center;
#post_content_text{
#post_content_text {
background-color: $background-light;
border: solid 0.25rem $background-light;
border-radius: 0.25rem;
......@@ -98,38 +98,38 @@ section.container{
filter: drop-shadow(0 0.25rem 0.25rem $background-sexy);
}
}
.field_content_image{
.field_content_image {
grid-area: post-image;
display: flex;
flex-flow: column nowrap;
margin-left: 6rem;
justify-content: center;
input{
input {
cursor: pointer;
margin-top: 0.25rem;
filter: drop-shadow(0 0.25rem 0.25rem $background-sexy);
}
}
.field_content_file{
.field_content_file {
grid-area: post-file;
display: flex;
flex-flow: column nowrap;
//margin-left: 6rem;
justify-content: center;
input{
input {
cursor: pointer;
margin-top: 0.25rem;
filter: drop-shadow(0 0.25rem 0.25rem $background-sexy);
}
}
.actions{
.actions {
grid-area: post-submit;
margin: auto;
}
}
}
}
}
////////////////////////////
......@@ -138,8 +138,7 @@ section.container{
// //
////////////////////////////
.show-container{
.show-container {
width: 100%;
height: 100%;
display: grid;
......@@ -148,25 +147,25 @@ section.container{
grid-template-rows: 60% 35%;
row-gap: 5%;
background-color: transparent;
grid-template-areas:
"show-content show-content"
"comments upvotes";
grid-template-areas:
"show-content show-content"
"comments upvotes";
.show-content{
.show-content {
grid-area: show-content;
background-color: $background-light;
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 10% 35% 45%;
row-gap: 5%;
grid-template-areas:
"heading tags"
"description image"
"description image";
grid-template-areas:
"heading tags"
"description image"
"description image";
color: $background-sexy;
border-radius: 1rem;
.heading{
.heading {
height: 100%;
grid-area: heading;
background-color: $secondary;
......@@ -176,16 +175,16 @@ section.container{
align-items: center;
padding-left: 1rem;
border-top-left-radius: 1rem;
.edit{
.edit {
width: 2rem;
margin-right: 1.5rem;
}
}
.tags{
.tags {
grid-area: tags;
background-color: $secondary;
border-top-right-radius: 1rem;
ul{
ul {
height: 100%;
list-style: none;
display: flex;
......@@ -194,7 +193,7 @@ section.container{
margin: 0;
}
}
.description{
.description {
width: 75%;
grid-area: description;
font-family: $text;
......@@ -206,7 +205,7 @@ section.container{
display: none;
}
}
.image{
.image {
grid-area: image;
padding: 1rem;
display: flex;
......@@ -219,7 +218,7 @@ section.container{
display: none;
}
img{
img {
display: flex;
border-radius: 1rem;
margin: 0 1rem 1rem 1rem;
......@@ -227,8 +226,8 @@ section.container{
height: auto;
transition: all 0.5s ease-in-out;
cursor: pointer;
&:focus{
&:focus {
position: absolute;
width: 50%;
height: 50%;
......@@ -239,12 +238,90 @@ section.container{
}
}
}
.show-comment{
.show-comments {
grid-area: comments;
background-color: $background-light;
border-radius: 1rem;
color: black;
display: grid;
grid-template-rows: 80% 20%;
.comments-wrapper-inverse {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column-reverse;
width: 100%;
overflow-y: scroll;
}
.comments-wrapper {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
.single-comment {
height: auto;
background-color: $background-dark;
width: 60%;
margin: 10px;
border: 2px solid black;
display: grid;
grid-template-rows: 40% 70%;
border-radius: 10px;
.comment-top {
border-radius: 10px 10px 0 0;
display: flex;
padding: 10px 10px;
justify-content: space-between;
align-items: center;
background-color: $secondary;
span {
font-family: $heading;
}
}
.comment-content {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 10px;
word-break: break-word;
font-size: $size-heading-small;
}
}
}
form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: $secondary;
border-radius: 0 0 10px 10px;
.field {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
textarea {
border-radius: 10px;
width: 100%;
height: 80%;
padding: 5px;
}
margin-right: 20px;
}
.actions {
width: auto;
}
}
}
.upvotes{
.upvotes {
grid-area: upvotes;
background-color: $background-light;
border-radius: 1rem;
......@@ -252,43 +329,43 @@ section.container{
display: flex;
flex-flow: row nowrap;
width: 100%;
.user{
.user {
background-color: $background-dark;
width: 45rem;
padding: 1rem;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
p{
p {
font-size: $size-heading;
color: $background-sexy;
}
h3{
font-size: $size-heading-big;
h3 {
font-size: $size-heading;
color: $background-sexy;
}
}
.votes{
.votes {
width: 100%;
height: 100%;
background-color: $background-light;
border-radius: 1rem;
div{
div {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
height: 100%;
width: 100%;
h2{
h2 {
font-family: $heading;
font-size: $size-heading-big;
color: $background-sexy;
margin: 0 0.5rem 0 0.5rem;
}
a{
a {
width: 100%;
height: auto;
img{
img {
width: 75%;
margin: auto;
}
......@@ -303,16 +380,15 @@ section.container{
// //
////////////////////////////
.posts-container{
.posts-container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: row wrap;
.container{
.container {
background-color: $background-light;
border: solid 0.5rem $secondary;
width: 40%;
......@@ -325,12 +401,12 @@ section.container{
grid-template-rows: 15% 55% 20%;
row-gap: 5%;
margin: 2rem;
grid-template-areas:
"heading heading"
"content content"
"footer footer";
grid-template-areas:
"heading heading"
"content content"
"footer footer";
.heading{
.heading {
grid-area: heading;
background-color: $secondary;
height: 100%;
......@@ -339,10 +415,10 @@ section.container{
justify-content: space-between;
align-items: center;
flex-flow: row nowrap;
h2{
h2 {
padding: 1rem;
}
ul{
ul {
list-style: none;
display: flex;
justify-content: right;
......@@ -358,7 +434,7 @@ section.container{
}
}
}
.inner-container{
.inner-container {
align-self: flex-start;
grid-area: content;
color: $background-sexy;
......@@ -370,57 +446,55 @@ section.container{
display: none;
}
}
.footer{
.footer {
grid-area: footer;
display: flex;
justify-content: space-between;
background-color: $secondary;
width: 100%;
height: 100%;
.comments{
.comments {
width: 30%;
height: auto;
display: flex;
justify-content: center;
align-self: center;
padding: 0 0.25rem;
.holder{
.holder {
display: flex;
h2{
h2 {
padding: 0 0.5rem;
color: $background-sexy
color: $background-sexy;
}
img{
img {
width: 2rem;
}
}
}
.button{
.button {
display: flex;
align-items: center;
}
.submit{
.submit {
padding: 0 0.25rem;
font-size: $size-heading-small;
}
.upvotes{
.upvotes {
width: 30%;
height: auto;
display: flex;
justify-content: center;
align-self: center;
padding: 0 0.25rem;
h2{
h2 {
padding: 0 1rem;
color: $background-sexy;
}
img{
img {
width: 2rem;
}
}
}
}
}
\ No newline at end of file
......@@ -6,9 +6,7 @@ class CommentsController < ApplicationController
# GET /comments
# GET /comments.json
def index
@comments = Comment.all
end
def index; end
# GET /comments/1
# GET /comments/1.json
......@@ -30,11 +28,10 @@ class CommentsController < ApplicationController
respond_to do |format|
if @comment.save
# TODO
format.html { redirect_to @comment, notice: 'Comment was successfully created.' }
format.html { redirect_to post_path(comment_params[:post_id]), notice: 'Comment was successfully created.' }
format.json { render :show, status: :created, location: @comment }
else
format.html { render :new, status: :unprocessable_entity }
format.html { redirect_to post_path(comment_params[:post_id]), notice: 'Comment was NOT created.' }
format.json { render json: @comment.errors, status: :unprocessable_entity }
end
end
......
......@@ -14,7 +14,10 @@ class PostsController < ApplicationController
# GET /posts/1
# GET /posts/1.json
def show; end
def show
@comments = @post.comments
@comment = Comment.new(post_id: @post.id)
end
# GET /posts/new
def new
......@@ -99,5 +102,4 @@ class PostsController < ApplicationController
def initialize_all_tags
@all_tags = ActsAsTaggableOn::Tag.all
end
end
......@@ -13,7 +13,7 @@ class Post < ApplicationRecord
has_many_attached :content_image, dependent: :destroy
has_many_attached :content_file, dependent: :destroy
has_many :comments, dependent: :destroy
has_many :comments, -> { order(created_at: :asc) }, dependent: :destroy
# can be voted on
acts_as_votable
......
<% if comment.errors.any? %>
<div id="error_explanation"> <%# TODO Style div for errors %>
<h2><%= pluralize(comments.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% comment.errors.full_messages.each do |message| %>
<li>
<%= message %>
</li>
<% end %>
</ul>
</div>
<% end %>
<%= form_for(comment, url: comments_path, method: "post") do |form| %>
<div class="field">
<%= form.text_area :content %>
</div>
<%= form.hidden_field :post_id, value: post.id %>
<div class="actions">
<%= form.submit 'Comment', :class => 'submit extra-small' %>
</div>
<% end %>
<% @comments.each do |comment| %>
<div class="single-comment">
<div class="comment-top">
<span><%= comment.user.username %></span>
<span><%= utc_to_readable(comment.created_at) %></span>
</div>
<div class="comment-content">
<span><%= comment.content %></span>
</div>
</div>
<% end %>
<% comments.each do |comment| %>
<div class="single-comment">
<div class="comment-top">