Skip to content

Commit

Permalink
Improve views with Bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@germanescobar
germanescobar committed Aug 20, 2017
1 parent e366ac4 commit b36d61f
Show file tree
Hide file tree
Showing 11 changed files with 337 additions and 100 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.scss
View file
@@ -1,2 +1,3 @@
@import "theme";
@import "bootstrap";
@import "books";
45 changes: 42 additions & 3 deletions app/assets/stylesheets/books.scss
View file
@@ -1,3 +1,42 @@
// Place all the styles related to the books controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.books-page {
.book {
border:none;

.card-title small {
display: block;
color: #999;
margin-top: 5px;
}

img {
padding: 10px;
@include media-breakpoint-down(xs) { max-height: 250px; }
@include media-breakpoint-up(sm) { width: 160px; }
}
}
}

.book-page {
margin-top: 30px;

header.main {
margin: 30px 0 30px;

.author {
font-size: 1.2rem;
color: #999;
margin-top: -3px;
}
}

.book {
border: none;

img {
@include media-breakpoint-down(xs) { max-height: 250px; }
@include media-breakpoint-up(sm) { width: 160px; }
}

.book-details { padding: 0 20px 0 40px; }
}
}
70 changes: 40 additions & 30 deletions app/views/books/edit.html.erb
View file
@@ -1,31 +1,41 @@
<h1>Editar Libro</h1>
<%= form_for @book do |f| %>
<div>
<%= f.label :title %>
<%= f.text_field :title %>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="card mt-5">
<div class="card-header font-weight-bold">Editar Libro</div>
<%= form_for @book do |f| %>
<div class="card-body">
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :author %>
<%= f.text_field :author, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.text_area :description, rows: 4, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :image_url %>
<%= f.url_field :image_url, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :publication_date %>
<%= f.date_field :publication_date, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :price %>
<%= f.number_field :price, class: "form-control", step: :any %>
</div>
</div>
<div class="card-footer text-right">
<%= link_to "Cancelar", @book, class: "btn btn-default" %>
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
<div>
<%= f.label :author %>
<%= f.text_field :author %>
</div>
<div>
<%= f.label :description %>
<%= f.text_area :description %>
</div>
<div>
<%= f.label :image_url %>
<%= f.text_field :image_url %>
</div>
<div>
<%= f.label :publication_date %>
<%= f.date_field :publication_date %>
</div>
<div>
<%= f.label :price %>
<%= f.number_field :price, step: :any %>
</div>

<div>
<%= f.submit %>
</div>
<% end %>
</div>
43 changes: 19 additions & 24 deletions app/views/books/index.html.erb
View file
@@ -1,28 +1,23 @@
<h1>Libros</h1>
<%= link_to "Nuevo Libro", new_book_path %>
<table border="1">
<thead>
<tr>
<th>Título</th>
<th>Descripción</th>
<th>Fecha de Publicación</th>
<th></th>
</tr>
</thead>
<tbody>
<div class="books-page">
<div class="container">
<div class="text-right"><%= link_to "Agregar Libro", new_book_path, class: "btn btn-primary rounded-0" %></div>

<% @books.each do |book| %>
<tr>
<td><%= book.title %></td>
<td><%= book.description %></td>
<td><%= book.publication_date %></td>
<td>
<%= link_to "Mostrar", book %>
<div class="book card flex-sm-row align-items-center align-items-sm-start mt-5">
<img src="<%= book.image_url %>" alt="<%= book.title %>">
<div class="card-body">
<h5 class="card-title">
<%= book.title %>
<small><%= book.author %></small>
</h5>
<p class="card-text"><%= book.description %></p>
<%= link_to "Detalles", book, class: "btn btn-primary" %>
<% if signed_in? %>
<%= link_to "Editar", edit_book_path(book) %>
<%= link_to "Eliminar", book, method: :delete, data: { confirm: "¿Estás seguro de eliminar este libro?" } %>
<%= link_to "Editar", edit_book_path(book), class: "btn btn-link" %>
<%= link_to "Eliminar", book, class: "btn btn-link text-danger", method: :delete, data: { confirm: "¿Estás seguro de eliminar este libro?" } %>
<% end %>
</td>
</tr>
</div>
</div>
<% end %>
</tbody>
</table>
</div>
</div>
69 changes: 40 additions & 29 deletions app/views/books/new.html.erb
View file
@@ -1,31 +1,42 @@
<h1>Nuevo Libro</h1>
<%= form_for @book do |f| %>
<div>
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div>
<%= f.label :author %>
<%= f.text_field :author %>
</div>
<div>
<%= f.label :description %>
<%= f.text_area :description %>
</div>
<div>
<%= f.label :image_url %>
<%= f.text_field :image_url %>
</div>
<div>
<%= f.label :publication_date %>
<%= f.date_field :publication_date %>
</div>
<div>
<%= f.label :price %>
<%= f.number_field :price, step: :any %>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="card mt-5">
<div class="card-header font-weight-bold">Agregar Libro</div>
<%= form_for @book do |f| %>
<div class="card-body">
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, class: "form-control", autofocus: true %>
</div>
<div class="form-group">
<%= f.label :author %>
<%= f.text_field :author, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.text_area :description, rows: 4, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :image_url %>
<%= f.url_field :image_url, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :publication_date %>
<%= f.date_field :publication_date, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :price %>
<%= f.number_field :price, class: "form-control", step: :any %>
</div>

<div>
<%= f.submit %>
</div>
<div class="card-footer text-right">
<%= link_to "Cancelar", books_path, class: "btn btn-default" %>
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
35 changes: 29 additions & 6 deletions app/views/books/show.html.erb
View file
@@ -1,6 +1,29 @@
<h1>Detalles del Libro</h1>
<div>Nombre: <%= @book.title %></div>
<div>Autor: <%= @book.author %></div>
<div>Descripción: <%= @book.description %></div>
<div>Fecha de publicación: <%= @book.publication_date %></div>
<div>Precio: <%= @book.price %></div>
<div class="book-page">
<div class="container">
<%= link_to "&larr; Volver".html_safe, books_path, class: "btn btn-link" %>

<header class="main">
<h2><%= @book.title %></h2>
<div class="author"><%= @book.author %></div>
</header>

<div class="book d-flex flex-sm-row align-items-center align-items-sm-start">
<img src="<%= @book.image_url %>" alt="<%= @book.title %>">
<div class="book-details">
<p><%= @book.description %></p>
<dl>
<dt>Fecha de publicación</dt>
<dd><%= @book.publication_date %></dd>
<dt>Precio</dt>
<dd><%= @book.price %></dd>
</dl>
<div class="text-right">
<% if signed_in? %>
<%= link_to "Editar", edit_book_path(@book), class: "btn btn-link" %>
<%= link_to "Eliminar", @book, class: "btn btn-link text-danger", method: :delete, data: { confirm: "¿Estás seguro de eliminar este libro?" } %>
<% end %>
</div>
</div>
</div>
</div>
</div>
43 changes: 43 additions & 0 deletions app/views/devise/registrations/edit.html.erb
View file
@@ -0,0 +1,43 @@
<h2>Edit <%= resource_name.to_s.humanize %></h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>

<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>

<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>

<div class="field">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, autocomplete: "off" %>
<% if @minimum_password_length %>
<br />
<em><%= @minimum_password_length %> characters minimum</em>
<% end %>
</div>

<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>

<div class="field">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password, autocomplete: "off" %>
</div>

<div class="actions">
<%= f.submit "Update" %>
</div>
<% end %>

<h3>Cancel my account</h3>

<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

<%= link_to "Back", :back %>
41 changes: 41 additions & 0 deletions app/views/devise/registrations/new.html.erb
View file
@@ -0,0 +1,41 @@
<div class="devise-page">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-5">
<div class="card mt-5 mb-2">
<div class="card-header">Sign up</div>
<div class="card-body">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, class: "form-control", autofocus: true %>
</div>

<div class="form-group">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %>
<%= f.password_field :password, class: "form-control", autocomplete: "off" %>
</div>

<div class="form-group">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: "form-control", autocomplete: "off" %>
</div>

<div class="text-right">
<%= f.submit "Sign up", class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>

<%= render "devise/shared/links" %>

</div>
</div>
</div>
</div>

0 comments on commit b36d61f

Please sign in to comment.