Building a Reddit Clone Pt.3

To avoid users from deleting links allthough not logged in, we need some authentication in the controller.

We need a before filter , means before the controller starts actual work it launches starting parameters to, in this case, authenticate the user.

class LinksController < ApplicationController

before_filter :authenticate_user!, except: [:index, :show]

we dont need users to be signed in to show them the homepage nor do we want them to be excluded from viewing other users links, so we add exceptions to it.

 

We also dont want users to delete links from other users. By adding a conditional statement in our index.html.erb file, we just avoid that:

<% if link.user == current_user %>

if the link is from the original creator it only shows to him the edit and destroy links.

 

Adding style to our app with bootstrap

Installing bootstrap:

  1. install the latest gem via gemfile
  2. rename application.css => application.css.scss
  3. adding: @import “bootstrap-sprockets”; @import “bootstrap”; to the same file
  4. in our application.js file, paste: //= require bootstrap-sprockets into the requirements list.
  5. deleting the old css file that came with devise

 

 

I dont want to go too deep into styling so i pretty much copy&pasted what he was having in his repository:

 

<!DOCTYPE html>
<html>
<head>
<title>Raddit</title>
<%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’ => true %>
<%= javascript_include_tag ‘application’, ‘data-turbolinks-track’ => true %>
<%= csrf_meta_tags %>
</head>
<body>
<header class=”navbar navbar-default” role=”navigation”>
<div class=”navbar-inner”>
<div class=”container”>
<div id=”logo” class=”navbar-brand”><%= link_to “Raddit”, root_path %></div>
<nav class=”collapse navbar-collapse navbar-ex1-collapse”>
<% if user_signed_in? -%>
<ul class=”nav navbar-nav navbar-right”>
<li><%= link_to ‘Submit link’, new_link_path %></li>
<li><%= link_to ‘Account’, edit_user_registration_path %></li>
<li><%= link_to ‘Sign out’, destroy_user_session_path, :method => :delete %></li>
</ul>
<% else -%>
<ul class=”nav navbar-nav pull-right”>
<li><%= link_to ‘Sign up’, new_user_registration_path %></li>
<li><%= link_to ‘Sign in’, new_user_session_path %></li>
</ul>
<% end -%>
</nav>
</div>
</div>
</header>

<div id=”main_content” class=”container”>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: “alert alert-info”) %>
<% end %>

<div id=”content” class=”col-md-9 center-block”>
<%= yield %>
</div>
</div>
</div>
</body>
</html>

 

it gave us a bit of structure to the site by adding a navigation bar on top of the page

and the following css, adds a little more style to it:

#logo {
font-size: 26px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -1px;
padding: 15px 0;
a {
color: #2F363E;
}
}

#main_content {
#content {
float: none;
}
padding-bottom: 100px;
.link {
padding: 2em 1em;
border-bottom: 1px solid #e9e9e9;
.title {

a {
color: #FF4500;
}
}
}
.comments_title {
margin-top: 2em;
}
#comments {
.comment {
padding: 1em 0;
border-top: 1px solid #E9E9E9;
.lead {
margin-bottom: 0;
}
}
}
}

 

i skip the rest of the styling part, because i want to focus mainly on how the app works and not how it looks like.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s