How to Build a Forum with Ruby on Rails

Image for post
Image for post
Image for post
Image for post

Table of Contents

cd Documents
cd Projects
rails new forum
Image for post
Image for post
cd forum
rails s
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
git init
git status
Image for post
Image for post
git add .
git status
Image for post
Image for post
git commit -m "first commit"
git remote add origin https://github.com/deallen7/forum.git
git push -u origin master
rails g model post title:string content:text
Image for post
Image for post
rake db:migrate
rails g controller posts
Image for post
Image for post
class PostsController < ApplicationController
def index
end
end
Image for post
Image for post
Rails.application.routes.draw do
resources :posts
root 'posts#index'

end
Image for post
Image for post
Image for post
Image for post
rails s
Image for post
Image for post
gem 'haml', '~> 5.0', '>= 5.0.4'
gem 'simple_form', '~> 4.0', '>= 4.0.1'
gem 'devise', '~> 4.4', '>= 4.4.3'
gem 'devise', '~> 4.4', '>= 4.4.3'
gem 'simple_form', '~> 4.0', '>= 4.0.1'
gem 'haml', '~> 5.0', '>= 5.0.4'
bundle install
Image for post
Image for post
rails s
Image for post
Image for post
class PostsController < ApplicationController def index
end
def new
@post = Post.new
end
def create
@post = Post.new(post_params)
end
private def post_params
params.require(:post).permit(:title, :content)
end
end
rails s 
Image for post
Image for post
Image for post
Image for post
rails s
Image for post
Image for post
Image for post
Image for post
_form.html.haml
Image for post
Image for post
= simple_form_for @post do |f|
= f.input :title
= f.input :content
= f.submit
= render 'form'
Image for post
Image for post
Image for post
Image for post
def create
@post = Post.new(post_params)
if @post.save
redirect_to @post
else
render 'new'
end
end
def show
@post = Post.find(params[:id])
end
show.html.haml
%h1= @post.title
%p= @post.content
Image for post
Image for post
Image for post
Image for post
def edit
end
def update
end
def destroy
end
def find_post
@post = Post.find(params[:id])
end
before_action :find_post, only: [:show, :edit, :update, :destroy]
def show
end
def edit
end
def update
if @post.update
redirect_to @post
else
render 'edit'
end
end
def destroy
@post.destroy
redirect_to root_path
end
%h1= @post.title
%p= @post.content
= link_to "Edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure you want to do this ?" }
= link_to "Home", root_path
Image for post
Image for post
Image for post
Image for post
rails s
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
def update
if @post.update(post_params)
redirect_to @post
else
render 'edit'
end
end
Image for post
Image for post
git status
git add .
git commit -m "added post actions and views; new, create, update, destroy"
git push
def index
@posts = Post.all.order("created_at DESC")
end
%h1 Hi there! This is the Index Page.- @posts.each do |post|
%h2= post.title
%p
Published at
= time_ago_in_words(post.created_at)
= link_to "New Post", new_post_path
Image for post
Image for post
%h1 Hi there! This is the Index Page.- @posts.each do |post|
%h2= link_to post.title, post
%p
Published at
= time_ago_in_words(post.created_at)
= link_to "New Post", new_post_path
git status
git add .
git commit -m "added loop to publish all posts to index page"
git push
rails generate devise:install
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
rails generate devise user 
Image for post
Image for post
rake db:migrate 
Image for post
Image for post
rails s
Image for post
Image for post
Image for post
Image for post
git add .
git commit -m "set up devise"
git push
def new
@post = current_user.posts.build
end
def create
@post = current_user.posts.build(post_params)
if @post.save
redirect_to @post
else
render 'new'
end
end
class Post < ApplicationRecord
belongs_to :user
end
class User < ApplicationRecord
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable and :omniauthable
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable
has_many :posts
end
rails g migration add_user_id_to_posts user_id:integer
rake db:migrate
rails c
@posts = Post.first
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
@post = Post.first
@post.user_id = 1
@post.save
@post = Post.all
@post = Post.find(3)
@post.user_id = 1
@post.save
%h1 Hi there! This is the Index Page.- @posts.each do |post|
%h2= link_to post.title, post
%p
Published at
= time_ago_in_words(post.created_at)
= post.user.email
= link_to "New Post", new_post_path
git add .
git commit -m "added association between post and user"
git push
!!!
%html
%head
%title Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
= csrf_meta_tags
%body
%p.notice= notice
%p.alert= alert
= yield
!!!
%html
%head
%title Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
= csrf_meta_tags
%body
%nav
#logo
%p David's Rails Forum
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
Image for post
Image for post
.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
%h1 Hi there! This is the Index Page.- @posts.each do |post|
%h2= link_to post.title, post
%p
Published at
= time_ago_in_words(post.created_at)
= post.user.email
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header
#logo
%p David's Rails Forum
#buttons
= link_to "New Post", new_post_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
Image for post
Image for post
Image for post
Image for post
body {
font-family: 'Lato', sans-serif;
}
.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.main_header {
width: 80%;
max-width: 1140px;
margin: 0 auto;
}
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
%link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Lato", type: "text/css" }
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header.main_header
#logo
%p David's Rails Forum
#buttons
= link_to "New Post", new_post_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
body {
font-family: 'Lato', sans-serif;
}

.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main_header {
width: 80%;
max-width: 1140px;
margin: 0 auto;
#logo {
float: left;
p {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
}
}
#buttons {
float: right;
}
}
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
%link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Lato", type: "text/css" }
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header.main_header.clearfix
#logo
%p David's Rails Forum
#buttons
= link_to "New Post", new_post_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
Image for post
Image for post
body {
font-family: 'Lato', sans-serif;
background: #EDEFF0;
}
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
%link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Lato", type: "text/css" }
%link{ rel: "stylesheet", href: "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" }
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header.main_header.clearfix
.wrapper
#logo
%p David's Rails Forum
#buttons
= link_to "New Post", new_post_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
body {
font-family: 'Lato', sans-serif;
background: #EDEFF0;
}

.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main_header {
width: 100%;
margin: 0 auto;
background: white;
#logo {
float: left;
p {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
}
}
#buttons {
float: right;
}
}
#posts
- @posts.each do |post|
.post
%h2.title= link_to post.title, post
%p.date
Published at
= time_ago_in_words(post.created_at)
= post.user.email
#posts {
background: white;
padding: 2em 5%;
border-radius: .5em;
.post {
margin: 1em 0;
padding: 1em 0;
border-bottom: 1px solid #D1d1d1;
.title {
margin: 0;
a {
color: #397CAC;
text-decoration: none;
font-weight: 100;
font-size: 1.25rem;
}
}
.date {
margin-top: .25rem;
font-size: 0.9rem;
color: #B2BAC2;
}
}
}
Image for post
Image for post
#buttons {
float: right;
a {
line-height: 60px;
background: #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
color: white;
text-decoration: none;
font-weight: 100;
}
}
Image for post
Image for post
#post_content 
%h1= @post.title
%p= @post.content
= link_to "Edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure you want to do this ?" }
= link_to "Home", root_path
Image for post
Image for post
#post_content {
background: white;
padding: 2em 5%;
border-radius: .5em;
h1 {
font-weight: 100;
font-size: 2em;
color: #397CAC;
margin-top: 0;
}
p {
color: #B2BAC2;
font-size: 0.9em;
line-height: 1.5;
font-size: 100;
}
}
Image for post
Image for post
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
%link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Lato", type: "text/css" }
%link{ rel: "stylesheet", href: "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" }
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header.main_header.clearfix
.wrapper
#logo
%p= link_to "David's Rails Forum", root_path
#buttons
= link_to "New Post", new_post_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
%p= link_to "David's Rails Forum", root_path
.main_header {
width: 100%;
margin: 0 auto;
background: white;
#logo {
float: left;
a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
text-decoration: none;
color: #397CAC;
}
}
#buttons {
float: right;
a {
line-height: 60px;
background: #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
color: white;
text-decoration: none;
font-weight: 100;
}
}
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
body {
font-family: 'Lato', sans-serif;
background: #EDEFF0;
}

.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main_header {
width: 100%;
margin: 0 auto;
background: white;
#logo {
float: left;
a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
text-decoration: none;
color: #397CAC;
}
}
#buttons {
float: right;
a {
line-height: 60px;
background: #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
color: white;
text-decoration: none;
font-weight: 100;
}
}
}
#posts {
background: white;
padding: 2em 5%;
border-radius: .5em;
.post {
margin: 1em 0;
padding: 1em 0;
border-bottom: 1px solid #D1d1d1;
.title {
margin: 0;
a {
color: #397CAC;
text-decoration: none;
font-weight: 100;
font-size: 1.25rem;
}
}
.date {
margin-top: .25rem;
font-size: 0.9rem;
color: #B2BAC2;
}
}
}
#post_content {
background: white;
padding: 2em 5%;
border-radius: .5em;
h1 {
font-weight: 100;
font-size: 2em;
color: #397CAC;
margin-top: 0;
}
p {
color: #B2BAC2;
font-size: 0.9em;
line-height: 1.5;
font-size: 100;
}
}
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
%link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Lato", type: "text/css" }
%link{ rel: "stylesheet", href: "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" }
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header.main_header.clearfix
.wrapper
#logo
%p= link_to "David's Rails Forum", root_path
#buttons
= link_to "New Post", new_post_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
#posts
- @posts.each do |post|
.post
%h2.title= link_to post.title, post
%p.date
Published at
= time_ago_in_words(post.created_at)
= post.user.email
#post_content 
%h1= @post.title
%p= @post.content
= link_to "Edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure you want to do this ?" }
= link_to "Home", root_path
link_to "name of link", link_path
rake routes
Image for post
Image for post
link_to "Sign up", new_user_registration_path
!!!
%html
%head
%title David's Rails Forum
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
%link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Lato", type: "text/css" }
%link{ rel: "stylesheet", href: "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" }
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%header.main_header.clearfix
.wrapper
#logo
%p= link_to "David's Rails Forum", root_path
#buttons
- if user_signed_in?
= link_to "New Post", new_post_path
- else
= link_to "Sign Up", new_user_registration_path
= link_to "Sign In", new_user_session_path
.wrapper
%p.notice= notice
%p.alert= alert
.wrapper
= yield
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
class PostsController < ApplicationController
before_action :find_post, only: [:show, :edit, :update, :destroy]
before_action :authenticate_user!, except: [:index, :show]
Image for post
Image for post
rails g model Comment comment:text post:references user:references 
Image for post
Image for post
rake db:migrate
Image for post
Image for post
class Post < ApplicationRecord
belongs_to :user
has_many :comments
end
class User < ApplicationRecord
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable and :omniauthable
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable
has_many :posts
has_many :comments
end
Rails.application.routes.draw do
devise_for :users
resources :posts do
resources :comments
end
root 'posts#index'

end
Image for post
Image for post
rails g controller Comments
Image for post
Image for post
class CommentsController < ApplicationController
def create
@post = Post.find(params[:post_id])
@comment = @post.comments.create(params[:comment].permit(:comment))
if @comment.save
redirect_to post_path(@post)
else
render 'new'
end
end
end
_form.html.haml_comment.html.haml
Image for post
Image for post
.comment
%p= comment.comment
= simple_form_for([@post, @post.comments.build]) do |f|
= f.input :comment
= f.submit
#post_content 
%h1= @post.title
%p= @post.content
#comments
%h2= @post.comments.count
= render @post.comments
%h3 Reply to thread
= render "comments/form"
= link_to "Edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure you want to do this ?" }
= link_to "Home", root_path
Image for post
Image for post
class CommentsController < ApplicationController
def create
@post = Post.find(params[:post_id])
@comment = @post.comments.create(params[:comment].permit(:comment))
@comment.user_id = current_user.id if current_user
@comment.save
if @comment.save
redirect_to post_path(@post)
else
render 'new'
end
end
end
.comment
%p= comment.comment
%p= comment.user.email
Image for post
Image for post
def destroy
@post = Post.find(params[:post_id])
@comment = @post.comments.find(params[:id])
@comment.destroy
redirect_to post_path(@post)
end
.comment
%p= comment.comment
%p= comment.user.email
= link_to "Delete Reply", [comment.post, comment], method: :delete, data: { confirm: "Are you sure?" }
Image for post
Image for post
.comment
%p= comment.comment
%p= comment.user.email
= link_to "Edit", edit_post_comment_path(comment.post, comment)
= link_to "Delete Reply", [comment.post, comment], method: :delete, data: { confirm: "Are you sure?" }
def edit
@post = Post.find(params[:post_id])
@comment = @post.comments.find(params[:id])
end
def update
@post = Post.find(params[:post_id])
@comment = @post.comments.find(params[:id])
if @comment.update(params[:comment].permit(:comment))
redirect_to post_path(@post)
else
render 'edit'
end
end
Image for post
Image for post
Image for post
Image for post
%h1 Edit Reply= simple_form_for([@post, @comment]) do |f| 
= f.input :comment
= f.submit
Image for post
Image for post
.comment
%p= comment.comment
%p= comment.user.email
= link_to "Edit", edit_post_comment_path(comment.post, comment)
= link_to "Delete", [comment.post, comment], method: :delete, data: { confirm: "Are you sure?" }
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
body {
font-family: 'Lato', sans-serif;
background: #EDEFF0;
}

.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main_header {
width: 100%;
margin: 0 auto;
background: white;
#logo {
float: left;
a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
text-decoration: none;
color: #397CAC;
}
}
#buttons {
float: right;
a {
line-height: 60px;
background: #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
color: white;
text-decoration: none;
font-weight: 100;
}
}
}
#posts {
background: white;
padding: 2em 5%;
border-radius: .5em;
.post {
margin: 1em 0;
padding: 1em 0;
border-bottom: 1px solid #D1d1d1;
.title {
margin: 0;
a {
color: #397CAC;
text-decoration: none;
font-weight: 100;
font-size: 1.25rem;
}
}
.date {
margin-top: .25rem;
font-size: 0.9rem;
color: #B2BAC2;
}
}
}
#post_content {
background: white;
padding: 2em 5%;
border-radius: .5em;
h1 {
font-weight: 100;
font-size: 2em;
color: #397CAC;
margin-top: 0;
}
p {
color: #B2BAC2;
font-size: 0.9em;
line-height: 1.5;
font-size: 100;
}
#comments {
.comment {
border-bottom: 1px solid #d1d1d1;
padding-bottom: 1em;
margin-bottom: 1em;
.comment_content {
margin: 0;
padding: 0;
}
.comment_author {
color: #397CAC;
margin-top: 0.5rem;
font-size: 0.6rem;
font-weight: 700;
}
}
}
}
.comment
%p.comment_content= comment.comment
%p.comment_author= comment.user.email
= link_to "Edit", edit_post_comment_path(comment.post, comment)
= link_to "Delete", [comment.post, comment], method: :delete, data: { confirm: "Are you sure?" }
Image for post
Image for post
Image for post
Image for post
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
body {
font-family: 'Lato', sans-serif;
background: #EDEFF0;
}

.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main_header {
width: 100%;
margin: 0 auto;
background: white;
#logo {
float: left;
a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
text-decoration: none;
color: #397CAC;
}
}
#buttons {
float: right;
a {
line-height: 60px;
background: #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
color: white;
text-decoration: none;
font-weight: 100;
}
}
}
#posts {
background: white;
padding: 2em 5%;
border-radius: .5em;
.post {
margin: 1em 0;
padding: 1em 0;
border-bottom: 1px solid #D1d1d1;
.title {
margin: 0;
a {
color: #397CAC;
text-decoration: none;
font-weight: 100;
font-size: 1.25rem;
}
}
.date {
margin-top: .25rem;
font-size: 0.9rem;
color: #B2BAC2;
}
}
}
#post_content {
background: white;
padding: 2em 5%;
border-radius: .5em;
h1 {
font-weight: 100;
font-size: 2em;
color: #397CAC;
margin-top: 0;
}
p {
color: #B2BAC2;
font-size: 0.9em;
line-height: 1.5;
font-size: 100;
}
#comments {
.comment {
border-bottom: 1px solid #d1d1d1;
padding-bottom: 1em;
margin-bottom: 1em;
.content {
width: 75%;
float: left;
}
.buttons {
width: 25%;
float: left;
font-size: 0.8em;
text-align: right;
padding-top: 1.5em;
a {
color: #397CAC;
border: 1px solid #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
text-decoration: none;
margin-right: 2%;
}
}
.comment_content {
margin: 0;
padding: 0;
}
.comment_author {
color: #397CAC;
margin-top: 0.5rem;
font-size: 0.6rem;
font-weight: 700;
}
}
}
}
.comment.clearfix
.content
%p.comment_content= comment.comment
%p.comment_author= comment.user.email
.buttons
= link_to "Edit", edit_post_comment_path(comment.post, comment)
= link_to "Delete", [comment.post, comment], method: :delete, data: { confirm: "Are you sure?" }
Image for post
Image for post
#post_content 
%h1= @post.title
%p= @post.content
#comments
%h2
= @post.comments.count
Comments
= render @post.comments
%h3 Reply to thread
= render "comments/form"
= link_to "Edit", edit_post_path(@post)
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure you want to do this ?" }
= link_to "Home", root_path
Image for post
Image for post
#post_content 
%h1= @post.title
%p= @post.content
#comments
%h2
= @post.comments.count
Comments
= render @post.comments
%h3 Reply to thread
= render "comments/form"
%br/
%hr/
%br/
= link_to "Edit", edit_post_path(@post), class: "button"
= link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure you want to do this ?" }, class: "button"
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
body {
font-family: 'Lato', sans-serif;
background: #EDEFF0;
}

.wrapper {
width: 60%;
max-width: 1140px;
margin: 0 auto;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main_header {
width: 100%;
margin: 0 auto;
background: white;
#logo {
float: left;
a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: -1px;
font-size: 1.2rem;
text-decoration: none;
color: #397CAC;
}
}
#buttons {
float: right;
a {
line-height: 60px;
background: #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
color: white;
text-decoration: none;
font-weight: 100;
}
}
}
#posts {
background: white;
padding: 2em 5%;
border-radius: .5em;
.post {
margin: 1em 0;
padding: 1em 0;
border-bottom: 1px solid #D1d1d1;
.title {
margin: 0;
a {
color: #397CAC;
text-decoration: none;
font-weight: 100;
font-size: 1.25rem;
}
}
.date {
margin-top: .25rem;
font-size: 0.9rem;
color: #B2BAC2;
}
}
}
.button {
color: #397CAC;
border: 1px solid #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
text-decoration: none;
margin-right: 2%;
}
#post_content {
background: white;
padding: 2em 5%;
border-radius: .5em;
h1 {
font-weight: 100;
font-size: 2em;
color: #397CAC;
margin-top: 0;
}
p {
color: #B2BAC2;
font-size: 0.9em;
line-height: 1.5;
font-size: 100;
}
#comments {
.comment {
border-bottom: 1px solid #d1d1d1;
padding-bottom: 1em;
margin-bottom: 1em;
.content {
width: 75%;
float: left;
}
.buttons {
width: 25%;
float: left;
font-size: 0.8em;
text-align: right;
padding-top: 1.5em;
a {
color: #397CAC;
border: 1px solid #397CAC;
padding: .5em 1em;
border-radius: 0.2em;
text-decoration: none;
margin-right: 2%;
}
}
.comment_content {
margin: 0;
padding: 0;
}
.comment_author {
color: #397CAC;
margin-top: 0.5rem;
font-size: 0.6rem;
font-weight: 700;
}
}
input[type="submit"] {
background: #397CAC;
border: none;
color: white;
font-weight: 100;
padding: .5em 1em;
border-radius: .2em;
}
textarea {
width: 100%;
min-height: 200px;
border: 1px solid #d1d1d1;
border-radius: .2em;
margin: 1em 0;
}
}
}
Image for post
Image for post
Image for post
Image for post

Written by

Documentation and tutorials on Python, Programming, and Data Analysis. FPL Addict. Occasionally writing about biohacking, PMing, and food.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store