Merges accounts show with registrations edit

app/assets/stylesheets/debates.scss

@@ -15,6 +15,7 @@
 //   08.2. Sign Up
 // 09. Forms
 // 10. Alerts
+// 11. User account
 //
 
 // 01. Variables
@@ -187,7 +188,6 @@ header {
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6);
     position: relative;
-    //when active => color: $votes-like;
 
     &:hover {
       background: $votes-like;
@@ -210,7 +210,6 @@ header {
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6);
     position: relative;
-    //when active => color: $votes-unlike;
 
     &:hover {
       background: $votes-unlike;
@@ -236,10 +235,40 @@ header {
       padding-left: rem-calc(8);
       vertical-align: top;
     }
+
+    &.voted {
+
+      .icon-like {
+        background: $votes-like;
+        color: white;
+      }
+    }
+
+    &.no-voted {
+
+      .icon-like {
+        opacity: .5;
+      }
+    }
   }
 
   .unlike {
     @extend .like;
+
+    &.voted {
+
+      .icon-unlike {
+        background: $votes-unlike;
+        color: white;
+      }
+    }
+
+    &.no-voted {
+
+      .icon-unlike {
+        opacity: .5;
+      }
+    }
   }
 
   .total-votes {
@@ -318,7 +347,6 @@ header {
     }
 
     .debate-description {
-      color: $text-color;
       font-size: rem-calc(13);
       height: $line-height*6.5;
       line-height: $line-height;
@@ -326,6 +354,10 @@ header {
       margin-top: $line-height;
       overflow: hidden;
       position: relative;
+
+      a {
+        color: $text-color;
+      }
     }
 
     .truncate {
@@ -556,9 +588,6 @@ header {
   }
 }
 
-
-
-
 // 06. Comments
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -785,3 +814,60 @@ form {
     color: $alert-color;
   }
 }
+
+// 11. User account
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.account {
+  background: white;
+  padding-top: $line-height;
+
+
+  input[type="checkbox"], .checkbox {
+    margin-top: -(rem-calc(12));
+  }
+
+  .back {
+    @include back;
+  }
+
+  h1 {
+    clear: both;
+    font-size: rem-calc(36);
+    font-weight: bold;
+    line-height: $line-height*2;
+    margin-bottom: $line-height;
+  }
+
+  .icon-comment-quotes {
+    color: $debates;
+    font-size: rem-calc(60);
+    line-height: $line-height;
+    opacity: .5;
+  }
+
+  h2 {
+    clear: both;
+    font-size: rem-calc(20);
+    font-weight: bold;
+    line-height: $line-height;
+    margin: 0;
+  }
+
+  .recommendations {
+    list-style-type: none;
+    margin-left: 0;
+    margin-top: $line-height;
+
+    li {
+      font-size: rem-calc(12);
+      margin: rem-calc(12) 0;
+
+      &:before {
+        color: $debates;
+        content: "l ";
+        font-family: "icons" !important;
+      }
+    }
+  }
+}

app/views/account/show.html.erb

@@ -1,22 +1,71 @@
-<h1><%= t("account.show.title") %></h1>
-
-<%= form_for @account, as: :account, url: account_path do |f| %>
+<div class="row account">
+  <div class="small-12 medium-9 column">
+    <h1><%= t("account.show.title") %></h1>
 
+    <%= form_for @account, as: :account, url: account_path do |f| %>
+      <div class="row">
+        <div class="small-12 medium-6 column">
           <%= f.label :first_name, t("account.show.first_name_label") %>
-  <%= f.text_field :first_name %>
+          <%= f.text_field :first_name, placeholder: t("account.show.first_name_label") %>
+        </div>
+        <div class="small-12 medium-6 column">
           <%= f.label :last_name, t("account.show.last_name_label") %>
-  <%= f.text_field :last_name %>
-
-  <div>
-  <%= f.check_box :use_nickname %>
-  <%= t("account.show.use_nickname_label") %>
+          <%= f.text_field :last_name, placeholder:  t("account.show.last_name_label") %>
         </div>
 
+        <div class="small-12 medium-6 column">
           <%= f.label :nickname, t("account.show.nickname_label") %>
-  <%= f.text_field :nickname %>
+          <%= f.text_field :nickname, placeholder: t("account.show.nickname_label") %>
+          <%= f.label :use_nickname do %>
+            <%= f.check_box :use_nickname %>
+            <span class="checkbox"><%= t("account.show.use_nickname_label") %></span>
+          <% end %>
+        </div>
 
+        <div class="small-12 column">
           <%= f.submit t("account.show.save_changes_submit"), class: "button radius" %>
-<% end %>
-
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
 <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path %>
 
+<h2><%= t("devise_views.registrations.edit.edit") %> user</h2>
+
+<%= form_for(@account, as: "user", url: registration_path(@account), html: { method: :put }) do |f| %>
+
+  <div class="field">
+    <%= f.label :email, t("devise_views.registrations.edit.email_label") %><br />
+    <%= f.email_field :email, autofocus: true %>
+  </div>
+
+  <% if devise_mapping.confirmable? && @resource.pending_reconfirmation? %>
+    <div><%= t("devise_views.registrations.edit.waiting_for") %> <%= @resource.unconfirmed_email %></div>
+  <% end %>
+
+  <div class="field">
+    <%= f.label :password, t("devise_views.registrations.edit.password_label") %> <i><%= t("devise_views.registrations.edit.leave_blank") %></i><br />
+    <%= f.password_field :password, autocomplete: "off" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "off" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %> <i><%= t("devise_views.registrations.edit.need_current") %></i><br />
+    <%= f.password_field :current_password, autocomplete: "off" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit t("devise_views.registrations.edit.update_submit") %>
+  </div>
+<% end %>
+
+<h3><%= t("devise_views.registrations.edit.cancel_title") %></h3>
+
+<p><%= t("devise_views.registrations.edit.cancel_text") %> <%= button_to t("devise_views.registrations.edit.cancel_link"), registration_path(user), data: { confirm: t("devise_views.registrations.edit.cancel_confirm") }, method: :delete %></p>
+
+<%= link_to t("devise_views.registrations.edit.back_link"), :back %>