[#15] Initial styling of the app

app/assets/stylesheets/friends.scss

@@ -1,68 +1,191 @@
-$color-1: #333;
-$color-2: #F4F4F4;
-$color-3: #F27D31; // orange
-$color-4: #fff;
-$color-5: #999;
-$color-6: #000;
+$color-1: #444;
+$color-2: #eee;
+$color-3: #B32216; // red
+$color-4: #999;
+$color-5: white;
+
+// Mixins
+// ----------------------------------------
+
+@mixin prefixer ($property, $value,
+                 $webkit: true,
+                    $moz: true,
+                     $ms: true,
+                      $o: true,
+                   $spec: true) {
+  @if $webkit { -webkit-#{$property}: $value; }
+  @if $moz    {    -moz-#{$property}: $value; }
+  @if $ms     {     -ms-#{$property}: $value; }
+  @if $o      {      -o-#{$property}: $value; }
+  @if $spec   {         #{$property}: $value; }
+}
 
 // Base Styles
 // ----------------------------------------
 
 div#main-wrap {
   margin: 0 auto;
   width: 1000px;
+
+  h2 {
+    margin-bottom: 50px;
+  }
 }
 
 header {
-  margin: 20px 0;
+  background: transparent url(logo.png) no-repeat 40px center;
+  margin: 20px auto 50px;
+  padding: 0 40px;
+  width: 1040px;
+
+  div.header-wrap {
+    border-bottom: 1px solid $color-2;
+    padding: 20px;
+
+    h1 {
+      padding-left: 80px;
+
+      a {
+        color: $color-1;
+      }
+    }
+  }
 }
 
 a.new-friend {
   background-color: $color-3;
-  color: $color-4;
+  color: $color-5;
+  font-weight: bold;
   padding: .3em .6em;
-  text-decoration: none;
+
+  &:hover {
+    background-color: lighten($color-3, 5%);
+  }
 }
 
 // Friend
 // ----------------------------------------
 
+
+section#friends {
+  font-size: 0;
+}
+
 div.friend {
   display: inline-block;
+  font-size: 12px;
   position: relative;
+  height: 200px;
+  width: 200px;
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+
+  a {
+    color: $color-1;
+  }
+
+  & > div {
+    left: 0;
+    position: absolute;
+    top: 0;
+    @include prefixer(transition, all .6s ease-in-out);
+
+    -webkit-transform-style: preserve-3d;
+    -webkit-backface-visibility: hidden;
+
+    -moz-transform-style: preserve-3d;
+    -moz-backface-visibility: hidden;
+  }
 
   &:hover {
-    a.destroy {
-      display: block;
+    div.front {
+      -webkit-transform: rotateY(180deg);
+    }
+
+    div.back {
+      z-index: 1000;
+      -webkit-transform: rotateY(0deg);
     }
   }
 
-  a.destroy {
-    background: $color-3;
-    border-radius: 10px;
-    color: $color-2;
-    display: none;
-    height: 20px;
+  div.front {
+    z-index: 900;
+    -webkit-transform: rotateX(0deg) rotateY(0deg);
+    -moz-transform: rotateX(0deg) rotateY(0deg);
+
+  }
+
+  div.back {
+    background: $color-2;
+    @include prefixer(box-sizing, border-box);
+    padding: 20px;
+    height: 200px;
+    width: 200px;
+
     position: absolute;
-    right: -5px;
-    text-align: center;
-    text-decoration: none;
-    top: -5px;
-    width: 20px;
-    z-index: 100;
+    top: 0;
+    left: 0;
+
+    @include prefixer(transform, rotateY(-180deg));
+    z-index: 800;
   }
 
-  a.pic-link {
-    display: block;
+  span.friend-name {
+    font-size: 16px;
   }
+}
+
+div.actions {
+  margin: 12px 0 0 0;
 
-  img {
-    border: 1px solid $color-2;
-    padding: 5px;
+  a {
+    @extend a.new-friend;
+    color: $color-5;
   }
+}
 
-  a.friend-name {
-    color: $color-1;
-    text-decoration: none;
+// Forms
+// ----------------------------------------
+
+input {
+  font-size: 16px;
+  padding: 5px 0;
+}
+
+input[type=text] {
+  border: 1px solid $color-4;
+  outline: none;
+  padding: 5px;
+
+  &:focus {
+    @include prefixer(box-shadow, inset 0 0 5px #ddd);
   }
 }
+
+label {
+  display: inline-block;
+  width: 100px;
+}
+
+.field {
+  margin-bottom: 1.3em;
+}
+
+form {
+  .actions {
+    margin-left: 100px;
+
+    input[type=submit], a.button {
+      @extend a.new-friend;
+      border: none;
+    }
+  }
+}
+// Other
+// ----------------------------------------
+
+aside {
+  color: $color-4;
+  font-size: 10px;
+  margin-top: 16px;
+}

app/models/friend.rb

@@ -4,6 +4,7 @@ class Friend < ActiveRecord::Base
 
   has_attached_file :avatar, styles: {
     thumb: '100x100>',
+    square: '200x200#',
     medium: '300x300>'
   }
 end

app/views/friends/_form.html.erb

@@ -12,14 +12,15 @@
   <% end %>
 
   <div class="field">
-    <%= f.label :name %><br />
+    <%= f.label :name %>
     <%= f.text_field :name %>
   </div>
   <div class="field">
-    <%= f.label :avatar %><br />
+    <%= f.label :avatar %>
     <%= f.file_field :avatar %>
   </div>
   <div class="actions">
-    <%= f.submit %>
+    <%= f.submit 'Make a friend' %>
+    <%= link_to 'Nevermind', friends_path, class: 'button' %>
   </div>
 <% end %>

app/views/friends/edit.html.erb

@@ -1,6 +1,5 @@
-<h1>Editing friend</h1>
+<h1>Change your friend*</h1>
 
 <%= render 'form' %>
 
-<%= link_to 'Show', @friend %> |
-<%= link_to 'Back', friends_path %>
+<aside>* Do not try in real life</aside>

app/views/friends/index.html.erb

@@ -3,11 +3,19 @@
 <section id="friends">
   <% @friends.each do |friend| %>
     <div class="friend" id="<%= friend.id %>">
-      <%= link_to 'x', friend, confirm: 'Are you sure you want to lose a friend?', method: :delete, class: 'destroy' %>
-      <%= link_to friend, class: 'pic-link' do %>
-        <%= image_tag friend.avatar.url(:thumb) %>
-      <% end %>
-      <span><%= link_to friend.name, friend, class: 'friend-name' %></span>
+      <div class="front">
+        <%= link_to friend, class: 'pic-link' do %>
+          <%= image_tag friend.avatar.url(:square) %>
+        <% end %>
+      </div>
+      <div class="back">
+        <span class="friend-name"><%= friend.name %></span>
+        <div class="actions">
+          <%= link_to 'Show', friend %>
+          <%= link_to 'Edit', edit_friend_path(friend) %>
+          <%= link_to 'Delete', friend, confirm: 'Are you sure you want to lose a friend?', method: :delete, class: 'destroy' %>
+        </div>
+      </div>
     </div>
   <% end %>
 </section>

app/views/friends/new.html.erb

@@ -1,5 +1,3 @@
-<h1>New friend</h1>
+<h1>Make a new friend</h1>
 
 <%= render 'form' %>
-
-<%= link_to 'Back', friends_path %>

app/views/friends/show.html.erb

@@ -1,11 +1,10 @@
 <p id="notice"><%= notice %></p>
 
-<p>
-  <%= image_tag @friend.avatar.url(:medium) %><br />
-  <b>Name:</b>
-  <%= @friend.name %>
-</p>
+<h2><%= @friend.name %></h2>
+  <%= image_tag @friend.avatar.url(:medium) %>
 
-
-<%= link_to 'Edit', edit_friend_path(@friend) %> |
-<%= link_to 'Back', friends_path %>
+<div class="show actions">
+  <%= link_to 'Edit', edit_friend_path(@friend) %>
+  <%= link_to 'Remove', @friend, confirm: 'Are you sure you want to lose a friend?', method: :delete, class: 'destroy' %>
+  <%= link_to 'Back to all my friends', friends_path %>
+</div>

app/views/layouts/application.html.erb

@@ -8,8 +8,9 @@
 </head>
 <body>
   <header>
-    <%= image_tag("logo.png") %>
-    <h1>Paperclip on Heroku Demo</h1>
+    <div class="header-wrap">
+      <h1><%= link_to 'Paperclip on Heroku Demo', root_path %></h1>
+    </div>
   </header>
 
 <div id="main-wrap">

app/assets/stylesheets/reset.css → vendor/assets/stylesheets/reset.css

@@ -98,6 +98,10 @@ body {
    Links
    ========================================================================== */
 
+ a {
+   text-decoration: none;
+ }
+
 /*
  * Addresses `outline` inconsistency between Chrome and other browsers.
  */