layout users monopoly stijl
This commit is contained in:
ohsab
parent
0b80a17940
commit
addf41999a
7 changed files with 81 additions and 31 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
<div class="col-md-6">
|
||||
<h3 class="center" >sort by name</h3>
|
||||
<% users.each do |user| %>
|
||||
<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| %>
|
||||
<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), 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>
|
||||
<%= link_to user.name , new_user_order_path(user), class: "btn btn-info",
|
||||
style: get_color_style(user) %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
<%= render partial: 'flash' %>
|
||||
|
||||
<%= render 'orders/user_list', users: @users_by_name %>
|
||||
<%= render 'orders/user_list', users: @users_by_order %>
|
||||
<div class="col-md-6">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,22 @@
|
|||
<div class="col-md-3">
|
||||
<div class="thumbnail">
|
||||
<%= image_tag user.avatar if user.avatar.exists? %>
|
||||
<div class="thumbnail monopoly">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue