css tela login + assests adicionados ao repo

app/assets/stylesheets/application.scss

@@ -13,3 +13,5 @@
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";
+@import "main";
+@import "login";

app/assets/stylesheets/login.scss

@@ -0,0 +1,52 @@
+.login-background {
+	background-image: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url(image_path("4090.jpg"));
+	// background-attachment:fixed;
+	height: 70vh;
+	background-size: cover;
+	background-position: center;
+}
+
+.login-form {
+	position: absolute;
+	width: 500px;
+	background : white;
+	top: 40%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	h1,h2,h3 {
+		margin: 0;
+		padding: 25px;
+		color: #555;
+		border-bottom: 1px solid #ccc;
+		background: #fdfdfd;
+	}
+
+	.campos {
+		padding: 15px;
+		label {
+			margin: 10px 8px 5px;
+			color: #aaa;
+		}
+
+		input[type=email], input[type=password] {
+			border: 1px solid #bbb;
+			border-radius: 10px;
+			width: 100%;
+			min-height: 35px;
+			padding: 0 15px;
+		}
+
+		.action-submit {
+			margin-top: 25px;
+			text-align: center;
+		}
+	}
+
+	.btn-submit {
+		background: #349886;
+		color: white;
+		width: 100%;
+	}
+
+}

app/assets/stylesheets/main.scss

@@ -0,0 +1,139 @@
+.clear-fix {
+	zoom: 1;
+}
+
+.clear-fix:after {
+	content: '.';
+	clear: both;
+	display: block;
+	height: 0;
+	visibility: hidden;
+}
+
+.row{
+	max-width: 1280px;
+	margin: 0 auto;
+}
+
+
+section {
+	padding: 80px 0;
+}
+
+.box{
+	padding: 1%;
+}
+
+
+/* Icons */
+.icon-big{
+	font-size: 3.5em;
+	display: block;
+	color:#e67e22;
+	margin-bottom: 10px;
+	text-align: center;
+}
+
+.icon-small {
+	display: inline-block;
+	width: 30px;
+	text-align: center;
+	height: auto;
+	color:#e67e22;
+	font-size: 1.3em;
+	margin-right: 10px;
+	/* how to align text and icon */
+	line-height: 130%;
+	vertical-align: middle;
+	margin-top: -5px;
+}
+
+/* headings */
+
+h1,
+h2,
+h3{
+	font-weight: 300;
+	letter-spacing:1px;
+}
+
+/* paragraphs */
+.long-copy{
+	line-height: 145%;
+	width: 70%;
+	margin: 0 auto;
+}
+
+.box p{
+	font-size: .9em;
+	line-height: 145%;
+}
+
+.box img{
+	width: 100%;
+	height: auto;
+}
+
+/**** MAIN SECTION  */
+
+.main-section {
+	@extend .clear-fix !optional;
+	width: 100%;
+	max-width: 1280px;
+	padding: 5px 0;
+	margin: 5px auto;
+
+}
+
+/****  HEADER  ****/
+
+.serie-header {
+	@extend .clear-fix !optional;
+	background: white;
+	width: 100%;
+	border: 1px solid #ccc;
+
+	nav {
+		@extend .clear-fix !optional;
+		diplay: block;
+		margin: 0 115px;
+	}
+}
+
+.logo{
+	height: 50px;
+	width: auto;
+	float: left;
+	margin-top: 5px;
+}
+
+
+.main-nav{
+	float: right;
+	list-style: none;
+	margin-top: 20px;
+}
+
+.main-nav li{
+	display: inline-block;
+	margin-left: 40px;
+}
+
+.main-nav li a:link,
+.main-nav li a:visited{
+	color: grey;
+	text-decoration: none;
+	font-size: 1.1em;
+	transition: .35s;
+	padding: 8px 0;
+}
+
+.main-nav li a:hover,
+.main-nav li a:focus,
+.main-nav li a:active{
+	/* color: white; */
+	/* text-decoration: none; */
+	/* text-transform:uppercase; */
+	/* font-size: .9em; */
+}
+

app/controllers/series_controller.rb

@@ -2,6 +2,10 @@ class SeriesController < ApplicationController
   skip_before_action :authenticate_user!, only: [:index, :show]
 
   def index
-    @series = Serie.all
+    if params[:filtro]
+      @series = Serie.where('title like (?)', ["%#{params[:filtro]}%"])
+    else
+      @series = Serie.all
+    end
   end
 end

app/views/devise/sessions/new.html.erb

@@ -1,26 +1,30 @@
-<h2>Log in</h2>
+<section class="login-background">
 
-<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true %>
-  </div>
+	<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "login-form"}) do |f| %>
+		<h2>Entrar</h2>
+		<div class="campos">
+			<div class="field">
+				<%= f.label :email %><br />
+				<%= f.email_field :email, autofocus: true %>
+			</div>
+
+			<div class="field">
+				<%= f.label :password, "Senha" %><br />
+				<%= f.password_field :password, autocomplete: "off" %>
+			</div>
+
+			<%# <% if devise_mapping.rememberable? %1> %>
+				<%#   <div class="field"> %>
+					<%#     <%= f.check_box :remember_me %1> %>
+					<%#     <%= f.label :remember_me %1> %>
+					<%#   </div> %>
+				<%# <% end %1> %>
+
+			<div class="action-submit">
+				<%= f.submit "Entrar in", class:"btn btn-submit" %>
+			</div>
+		</div>
+	<% end %>
+</section>
 
-  <div class="field">
-    <%= f.label :password %><br />
-    <%= f.password_field :password, autocomplete: "off" %>
-  </div>
-
-  <% if devise_mapping.rememberable? -%>
-    <div class="field">
-      <%= f.check_box :remember_me %>
-      <%= f.label :remember_me %>
-    </div>
-  <% end -%>
-
-  <div class="actions">
-    <%= f.submit "Log in" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+<%# <%= render "devise/shared/links" %1> %>

app/views/layouts/_header.html.erb

@@ -0,0 +1,21 @@
+<header class="serie-header">
+	<nav>
+		<%= image_tag "serieflix-logo.png", alt: "serieFlix logo", class: "logo"%>
+		<% if user_signed_in? %>
+			<%= link_to_unless_current "Séries" %>
+			<a href="#"> Minhas Séries </a>
+			<a href=""></a>
+			<%= link_to "Logout", destroy_user_session_path %>
+		<% else %>
+
+			<ul class="main-nav">
+				<li>
+					<%= link_to "Entrar", new_user_session_path %>
+				</li>
+				<li>
+					<%= link_to "Cadastrar", new_user_registration_path %>
+				</li>
+			</ul>
+		<% end %>
+	</nav>
+</header>

app/views/layouts/application.html.erb

@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>ES022017</title>
-    <%= csrf_meta_tags %>
+	<head>
+		<title>ES022017</title>
+		<%= csrf_meta_tags %>
 
-    <%= stylesheet_link_tag    'application', media: 'all' %>
-  </head>
-
-  <body>
-    <header class="serie-header">
-    </header>
-    <% if notice %>
-      <p class="alert alert-success"><%= notice %></p>
-    <% end %>
-    <% if alert %>
-      <p class="alert alert-danger"><%= alert %></p>
-    <% end %>
-    <%= yield %>
-  </body>
+		<%= stylesheet_link_tag    'application', media: 'all' %>
+	</head>
+	<body>
+		<section class="main-section">
+			<%= render "layouts/header" %>
+			<% if notice %>
+				<p class="alert alert-success"><%= notice %></p>
+			<% end %>
+			<% if alert %>
+				<p class="alert alert-danger"><%= alert %></p>
+			<% end %>
+			<%= yield %>
+		</section>
+	</body>
 </html>

app/views/series/index.html.erb

@@ -1,21 +1,8 @@
 <section id="serie">
-	<nav>
-		<span class="logo"> SerieFlix </span>
-		<%= link_to_unless_current "Séries" %>
-		<a href="#"> Minhas Séries </a>
-		<a href=""></a>
-
-		<% if user_signed_in? %>
-			<%= link_to "Logout", destroy_user_session_path %>
-		<% else %>
-			<%= link_to "Sign Up", new_user_registration_path %>
-			<%= link_to "Sign In", new_user_session_path %>
-		<% end %>
-	</nav>
 
 	<div class="filtro">
 		<h3>séries</h3>
-		<%= form_tag series_index_path do%>
+		<%= form_tag series_index_path, method: :get do%>
 			<%= text_field_tag :filtro, nil, placeholder: "Pesquisa por nome" %>
 		<% end %>
 	</div>