Stylizacja Formularzy Devise z Twitter Bootstrap

Przez:, Z dnia:

Ten tutorial zakłada, że już ukończyłeś:

  1. Adding custom fields to Devise

Nasza konfiguracja powoli nabiera fajnych cech. Dodaliśmy już trochę własnych pól do Devise i sprawiliśmy, że działają. Nasze formularze wciąż wyglądają źle i prymitywnie. Na szczęście dodaliśmy Twitter Bootstrap 3 do naszej aplikacji. Możemy go wykorzystać do podrasowania naszych formularzy.

Krok 1: Zmodyfikuj formularz rejestracji

Przejdź do strony Twitter Bootstrap i poprzeglądaj formularze. Wciąż używamy klasy "form-horizontal" tak, aby wyglądały one lepiej:

app/views/users/registrations/new.html.erb

<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {class: 'form-horizontal'}) do |f| %>
<%= devise_error_messages! %>

<div class="form-group">
    <%= f.label :name, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.text_field :name, class: "form-control",autofocus: true %>
    </div>
</div>

<div class="form-group">
    <%= f.label :email, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.email_field :email, class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
    </div>
</div>

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

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= f.submit "Sign up", class: "btn btn-primary" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

Przetestuj to, sprobuj się zarejestrować i zobacz, że wygląda ładniej.

Krok 2: Zmodyfikuj formularz logowania

Teraz naprawmy inne strony:

app/views/users/registrations/edit.html.erb

<h2>Edit <%= resource_name.to_s.humanize %></h2>

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

<div class="form-group">
    <%= f.label :name, class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.text_field :name, autofocus: true, class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :is_female, "Gender", class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.radio_button :is_female, true %> <%= f.label :is_female, "Female" %>
        <%= f.radio_button :is_female, false %> <%= f.label :is_female, "Male" %>
    </div>
</div>


<div class="form-group">
    <%= f.label :date_of_birth, class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.date_select :date_of_birth, start_year: 1920, end_year: 2000, class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :email, class: 'col-sm-2 control-label'  %>
    <div class="col-sm-6">
        <%= f.email_field :email, class: 'form-control'  %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password, class: 'col-sm-2 control-label'  %> <i>(leave blank if you don't want to change it)</i>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: 'form-control'  %>
    </div>
</div>


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

<div class="form-group">
    <%= f.label :current_password, class: 'col-sm-2 control-label' %> <i>(we need your current password to confirm your changes)</i>
    <div class="col-sm-6">
        <%= f.password_field :current_password, autocomplete: "off", class: 'form-control' %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= f.submit "Update", class: "btn btn-primary" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

<h5>Cancel my account</h5>

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

<%= link_to "Back", :back %>

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

<h2>Sign in</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: 'form-horizontal'}) do |f| %>
<div class="form-group">
    <%= f.label :email, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.email_field :email, autofocus: true , class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password, class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<% if devise_mapping.rememberable? -%>
<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.check_box :remember_me %> <%= f.label :remember_me %>
    </div>
</div>
<% end -%>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.submit "Sign in", class: 'btn btn-primary' %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= render "users/shared/links" %>
    </div>
</div>

<% end %>

Krok 3: Zmodyfikuj formularze hasła

app/views/users/passwords/new.html.erb

<h2>Forgot your password?</h2>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'form-horizontal' }) do |f| %>
<%= devise_error_messages! %>

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

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

app/views/users/passwords/edit.html.erb

<h2>Change your password</h2>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: 'form-horizontal' }) do |f| %>
<%= devise_error_messages! %>
<%= f.hidden_field :reset_password_token %>

<div class="form-group">
    <%= f.label :password, "New password", class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <%= f.label :password_confirmation, "Confirm new password", class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
        <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= f.submit "Change my password", class: "btn btn-primary" %>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-6 col-sm-offset-2">
        <%= render "users/shared/links" %>
    </div>
</div>
<% end %>

Jest jeszcze więcej formularzy pod app/views/users, niektóre z nich nie zostały jeszcze przez nasz użyte. Śmiało, poćwicz na nich stylizację.

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Dodaj komentarz

Możesz się zalogować by skomentować