redesign outfits#index with thumbnails

This commit is contained in:
Emi Matchu 2012-07-29 15:43:28 -04:00
parent bc4f172ae0
commit f5cf9aa13b
5 changed files with 453 additions and 309 deletions

View file

@ -3,6 +3,7 @@
@import "partials/context_button"
@import "partials/icon"
@import "partials/outfit"
@import star
$object-padding: 6px
@ -396,11 +397,11 @@ body.outfits-edit
$outfit-margin: 1px
$outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
> ul
+outfits-list
+sidebar-view-child
background: image-url("loading.gif") no-repeat center top
display: none
font-family: $main-font
list-style: none
margin: 0 auto 1em
min-height: 16px
width: $outfit-outer-size * 3
@ -409,13 +410,9 @@ body.outfits-edit
background: transparent
> li
+inline-block
+outfit-star
height: $outfit-inner-size
margin: $outfit-margin
width: $outfit-inner-size
overflow: hidden
position: relative
$outfit-header-h-padding: 4px
$outfit-header-v-padding: 2px
@ -423,17 +420,9 @@ body.outfits-edit
$outfit-header-inner-height: 12px
$outfit-header-outer-height: $outfit-header-inner-height + (2 * $outfit-header-v-padding)
header, footer, .outfit-delete-confirmation
color: white
font-size: $outfit-header-inner-height
left: 0
padding: $outfit-header-v-padding $outfit-header-h-padding
position: absolute
width: $outfit-header-inner-width
z-index: 2
header, footer
background: black
background: rgba(0, 0, 0, 0.75)
header
+opacity(0.75)
@ -442,11 +431,10 @@ body.outfits-edit
footer, .outfit-delete-confirmation
display: none
top: 0
.outfit-delete-confirmation
background: red
background: rgba(255, 50, 50, 0.75)
+outfit-banner
+outfit-banner-background(rgb(255, 50, 50))
text-align: center
top: 0
@ -458,12 +446,9 @@ body.outfits-edit
$outfit-thumbnail-v-offset: $outfit-thumbnail-h-offset - ($outfit-header-outer-height / 4)
.outfit-thumbnail
+opacity(.5)
cursor: pointer
display: none
left: $outfit-thumbnail-h-offset
position: absolute
top: $outfit-thumbnail-v-offset
z-index: 1
.outfit-star
bottom: 0
@ -490,9 +475,6 @@ body.outfits-edit
border: 1px solid white
width: 6em
a
color: white
&:hover
header
+opacity(1)

View file

@ -1,27 +1,55 @@
@import "partials/outfit"
@import star
$outfit-inner-height: 150px
$outfit-inner-width: 150px
$outfit-banner-h-padding: 4px
$outfit-banner-v-padding: 2px
$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)
body.outfits-index
#outfits
list-style: none
+outfits-list
li
+outfit-star
clear: left
float: left
margin-bottom: .5em
> li
height: $outfit-inner-height
margin: 2px
width: $outfit-inner-width
h4
float: left
width: 12em
header, footer
padding: $outfit-banner-v-padding $outfit-banner-h-padding
width: $outfit-banner-inner-width
.outfit-edit-link, form
float: left
font-size: 85%
margin-left: 1em
footer
display: none
.outfit-edit-link
+awesome-button
.outfit-edit-link
float: left
text-decoration: none
form
float: right
.outfit-delete-button
margin: 0
padding: 0
.outfit-edit-link, .outfit-delete-button
&:hover
text-decoration: underline
.outfit-star
cursor: auto
.outfit-name
text-decoration: none
&:hover
text-decoration: underline
&:hover
footer
display: block
.outfit-delete-button
margin: 0
+reset-awesome-button

View file

@ -0,0 +1,42 @@
=outfit
+inline-block
+outfit-star
overflow: hidden
position: relative
header, footer
+outfit-banner
+outfit-banner-background(black)
header
bottom: 0
footer
top: 0
.outfit-thumbnail
cursor: pointer
position: absolute
z-index: 1
a
color: white
=outfits-list
// remove whitespace between inline-block elements
font-size: 0
list-style: none
> li
+outfit
font-size: 14px
=outfit-banner
color: white
left: 0
position: absolute
z-index: 2
=outfit-banner-background($color)
background: $color
background: rgba($color, 0.75)

View file

@ -1,6 +1,14 @@
= outfit_li_for(outfit) do
.outfit-star
%h4= link_to outfit.name, outfit
= link_to_edit_outfit 'Edit', outfit, :class => 'outfit-edit-link'
= button_to('Delete', outfit, :method => 'delete', :class => 'outfit-delete-button', :confirm => "Are you sure you want to delete the outfit #{outfit.name}?")
- if outfit.image?
= link_to image_tag(outfit.image.small.url), outfit
%header
.outfit-star
= link_to outfit.name, outfit, :class => 'outfit-name'
%footer
= link_to_edit_outfit 'edit', outfit, :class => 'outfit-edit-link'
= button_to 'delete', outfit, :method => 'delete', :class => 'outfit-delete-button', :confirm => "Are you sure you want to delete the outfit #{outfit.name}?"

File diff suppressed because it is too large Load diff