layout users monopoly stijl

app/assets/stylesheets/application.css.scss

@@ -74,18 +74,23 @@ footer ul li {
   width: 50%;
   float: left;
   border-radius: 0px;
+  margin-bottom: 0px;
+  border: 0px;
 
   .btn{
-    margin-top: -10px;
+    margin-top: -55px;
     width: 100%;
     border-color: #444;
   }
 
   .dagschotel{
     float:left;
+    position: absolute;
   }
 
-  .user_img{
+  .avatar{
+    height: 190px;
+    width: 190px;
   }
 }
 

app/assets/stylesheets/users.css.scss

@@ -3,6 +3,45 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 
+.users .thumbnail {
+  padding: 0px;
+  min-height: 280px;
+  border: 3px solid #333;
+  .header{
+    border-bottom: 3px solid #333;
+    text-align: center;
+    color: #fff;
+    padding-bottom: 10px;
+    padding-top: 15px;
+    margin: 0px;
+
+  }
+  .caption{
+    .avatar{
+      float: right;
+      height: 70px;
+      width: 70px;
+    }
+  }
+  .footer{
+    width:80%;
+    border-top: 1px dashed #333;
+    margin:10%;
+    margin-bottom: 5px;
+    .btn{
+      width:100%;
+      margin-top:10px;
+      margin-bottom:0px;
+    }
+  }
+  background-color:  #f5f5dc;
+}
+
+
+
+
+
+
 /* sidebar */
 
 aside {
@@ -30,7 +69,3 @@ aside {
     }
   }
 }
-
-.users .thumbnail {
-  min-height: 330px;
-}

app/helpers/application_helper.rb

@@ -2,11 +2,11 @@ require 'digest/md5'
 module ApplicationHelper
 
   def get_color(user)
-    @color = Digest::MD5.hexdigest(user.nickname)[0..5]
+    Digest::MD5.hexdigest(user.nickname)[0..5]
   end
 
   def get_color_style(user)
-    @style = "background-color: #"+ get_color(user) +";"
+    "background-color: \#"+ get_color(user) +";"
   end
 
   def euro(f)

app/views/orders/_user_list.html.erb

@@ -1,18 +1,13 @@
-<div class="col-md-6">
+<% users.each do |user| %>
-  <h3 class="center" >sort by name</h3>
+    <div class="thumbnail overview">
+      <%= link_to image_tag("http://placekitten.com/g/50/50", class: "img-circle dagschotel"), user %>
+      <% if user.avatar.exists? %>
+        <%= link_to image_tag(user.avatar , class: "img-circle avatar"), new_user_order_path(user) %>
+      <% else %>
+        <%= link_to image_tag("http://babeholder.pixoil.com/img/190/190", class: "img-circle user_img"), new_user_order_path(user) %>
+      <% end %>
 
-  <% users.each do |user| %>
+    <%= link_to user.name , new_user_order_path(user), class: "btn btn-info",
-      <div class="thumbnail overview">
+      style: get_color_style(user) %>
-        <%= link_to image_tag("http://placekitten.com/g/50/50", class: "img-circle dagschotel"), user %>
+  </div>
-        <% if user.avatar.exists? %>
+<% end %>
-          <%= link_to image_tag(user.avatar), new_user_order_path(user) %>
-        <% else %>
-          <%= link_to image_tag("http://babeholder.pixoil.com/img/100/100", class: "img-circle user_img"), new_user_order_path(user) %>
-        <% end %>
-
-      <%= link_to user.name , new_user_order_path(user), class: "btn btn-info",
-        style: get_color_style(user) %>
-    </div>
-  <% end %>
-
-</div>

app/views/orders/index.html.erb

@@ -1,4 +1,11 @@
 <%= render partial: 'flash' %>
 
-<%= render 'orders/user_list', users: @users_by_name %>
+<div class="col-md-6">
-<%= render 'orders/user_list', users: @users_by_order %>
+  <h3 class="center" >sort by name</h3>
+  <%= render 'orders/user_list', users: @users_by_name %>
+</div>
+
+<div class="col-md-6">
+  <h3 class="center" >sort by order</h3>
+  <%= render 'orders/user_list', users: @users_by_order %>
+</div>

app/views/users/_user.html.erb

@@ -1,15 +1,22 @@
 <div class="col-md-3">
-  <div class="thumbnail">
+  <div class="thumbnail monopoly">
-    <%= image_tag user.avatar if user.avatar.exists? %>
+    <h3 class="header" style="background-color: #<%=get_color(user)%>;" ><%= user.full_name %></h3>
     <div class="caption">
-      <h3><%= user.full_name %></h3>
+      <% if user.avatar.exists? %>
+        <%= link_to image_tag(user.avatar , class: "img-circle avatar"), new_user_order_path(user) %>
+      <% else %>
+        <%= link_to image_tag("http://babeholder.pixoil.com/img/70/70", class: "img-circle avatar"), new_user_order_path(user) %>
+      <% end %>
       <p><strong>Name:</strong> <%= user.name %></p>
       <p><strong>Last name:</strong> <%= user.last_name %></p>
       <p><strong>Nickname:</strong> <%= user.nickname %></p>
       <p><strong>Balance:</strong> <%= user.balance %></p>
+    </div>
+    <div class="footer">
       <p>
         <%= link_to "Delete", user_path(user), method: :delete, class: "btn btn-danger", data: {confirm: 'Are you sure?'} %>
       </p>
+
     </div>
   </div>
 </div>

db/seeds.rb

@@ -9,12 +9,13 @@
 User.create! name:  "Mats",
              nickname: "Basho",
              last_name: "Myncke",
+             admin: true,
              password:              "banaan12",
              password_confirmation: "banaan12"
 
 99.times do |n|
   name  = Faker::Name.first_name
-  nickname = Faker::Name.title
+  nickname = Faker::Name.first_name
   last_name = Faker::Name.last_name
   password = "password"