redesign outfits#index with thumbnails
This commit is contained in:
parent
bc4f172ae0
commit
f5cf9aa13b
5 changed files with 453 additions and 309 deletions
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
@import "partials/context_button"
|
@import "partials/context_button"
|
||||||
@import "partials/icon"
|
@import "partials/icon"
|
||||||
|
@import "partials/outfit"
|
||||||
@import star
|
@import star
|
||||||
|
|
||||||
$object-padding: 6px
|
$object-padding: 6px
|
||||||
|
@ -396,11 +397,11 @@ body.outfits-edit
|
||||||
$outfit-margin: 1px
|
$outfit-margin: 1px
|
||||||
$outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
|
$outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
|
||||||
> ul
|
> ul
|
||||||
|
+outfits-list
|
||||||
+sidebar-view-child
|
+sidebar-view-child
|
||||||
background: image-url("loading.gif") no-repeat center top
|
background: image-url("loading.gif") no-repeat center top
|
||||||
display: none
|
display: none
|
||||||
font-family: $main-font
|
font-family: $main-font
|
||||||
list-style: none
|
|
||||||
margin: 0 auto 1em
|
margin: 0 auto 1em
|
||||||
min-height: 16px
|
min-height: 16px
|
||||||
width: $outfit-outer-size * 3
|
width: $outfit-outer-size * 3
|
||||||
|
@ -409,13 +410,9 @@ body.outfits-edit
|
||||||
background: transparent
|
background: transparent
|
||||||
|
|
||||||
> li
|
> li
|
||||||
+inline-block
|
|
||||||
+outfit-star
|
|
||||||
height: $outfit-inner-size
|
height: $outfit-inner-size
|
||||||
margin: $outfit-margin
|
margin: $outfit-margin
|
||||||
width: $outfit-inner-size
|
width: $outfit-inner-size
|
||||||
overflow: hidden
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
$outfit-header-h-padding: 4px
|
$outfit-header-h-padding: 4px
|
||||||
$outfit-header-v-padding: 2px
|
$outfit-header-v-padding: 2px
|
||||||
|
@ -423,17 +420,9 @@ body.outfits-edit
|
||||||
$outfit-header-inner-height: 12px
|
$outfit-header-inner-height: 12px
|
||||||
$outfit-header-outer-height: $outfit-header-inner-height + (2 * $outfit-header-v-padding)
|
$outfit-header-outer-height: $outfit-header-inner-height + (2 * $outfit-header-v-padding)
|
||||||
header, footer, .outfit-delete-confirmation
|
header, footer, .outfit-delete-confirmation
|
||||||
color: white
|
|
||||||
font-size: $outfit-header-inner-height
|
font-size: $outfit-header-inner-height
|
||||||
left: 0
|
|
||||||
padding: $outfit-header-v-padding $outfit-header-h-padding
|
padding: $outfit-header-v-padding $outfit-header-h-padding
|
||||||
position: absolute
|
|
||||||
width: $outfit-header-inner-width
|
width: $outfit-header-inner-width
|
||||||
z-index: 2
|
|
||||||
|
|
||||||
header, footer
|
|
||||||
background: black
|
|
||||||
background: rgba(0, 0, 0, 0.75)
|
|
||||||
|
|
||||||
header
|
header
|
||||||
+opacity(0.75)
|
+opacity(0.75)
|
||||||
|
@ -442,11 +431,10 @@ body.outfits-edit
|
||||||
|
|
||||||
footer, .outfit-delete-confirmation
|
footer, .outfit-delete-confirmation
|
||||||
display: none
|
display: none
|
||||||
top: 0
|
|
||||||
|
|
||||||
.outfit-delete-confirmation
|
.outfit-delete-confirmation
|
||||||
background: red
|
+outfit-banner
|
||||||
background: rgba(255, 50, 50, 0.75)
|
+outfit-banner-background(rgb(255, 50, 50))
|
||||||
text-align: center
|
text-align: center
|
||||||
top: 0
|
top: 0
|
||||||
|
|
||||||
|
@ -458,12 +446,9 @@ body.outfits-edit
|
||||||
$outfit-thumbnail-v-offset: $outfit-thumbnail-h-offset - ($outfit-header-outer-height / 4)
|
$outfit-thumbnail-v-offset: $outfit-thumbnail-h-offset - ($outfit-header-outer-height / 4)
|
||||||
.outfit-thumbnail
|
.outfit-thumbnail
|
||||||
+opacity(.5)
|
+opacity(.5)
|
||||||
cursor: pointer
|
|
||||||
display: none
|
display: none
|
||||||
left: $outfit-thumbnail-h-offset
|
left: $outfit-thumbnail-h-offset
|
||||||
position: absolute
|
|
||||||
top: $outfit-thumbnail-v-offset
|
top: $outfit-thumbnail-v-offset
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
.outfit-star
|
.outfit-star
|
||||||
bottom: 0
|
bottom: 0
|
||||||
|
@ -490,9 +475,6 @@ body.outfits-edit
|
||||||
border: 1px solid white
|
border: 1px solid white
|
||||||
width: 6em
|
width: 6em
|
||||||
|
|
||||||
a
|
|
||||||
color: white
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
header
|
header
|
||||||
+opacity(1)
|
+opacity(1)
|
||||||
|
|
|
@ -1,27 +1,55 @@
|
||||||
|
@import "partials/outfit"
|
||||||
@import star
|
@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
|
body.outfits-index
|
||||||
#outfits
|
#outfits
|
||||||
list-style: none
|
+outfits-list
|
||||||
|
|
||||||
li
|
> li
|
||||||
+outfit-star
|
height: $outfit-inner-height
|
||||||
clear: left
|
margin: 2px
|
||||||
float: left
|
width: $outfit-inner-width
|
||||||
margin-bottom: .5em
|
|
||||||
|
|
||||||
h4
|
header, footer
|
||||||
float: left
|
padding: $outfit-banner-v-padding $outfit-banner-h-padding
|
||||||
width: 12em
|
width: $outfit-banner-inner-width
|
||||||
|
|
||||||
.outfit-edit-link, form
|
footer
|
||||||
float: left
|
display: none
|
||||||
font-size: 85%
|
|
||||||
margin-left: 1em
|
|
||||||
|
|
||||||
.outfit-edit-link
|
.outfit-edit-link
|
||||||
+awesome-button
|
float: left
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
form
|
||||||
|
float: right
|
||||||
|
|
||||||
.outfit-delete-button
|
.outfit-delete-button
|
||||||
margin: 0
|
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
|
||||||
|
+reset-awesome-button
|
||||||
|
|
42
app/stylesheets/partials/_outfit.sass
Normal file
42
app/stylesheets/partials/_outfit.sass
Normal 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)
|
|
@ -1,6 +1,14 @@
|
||||||
= outfit_li_for(outfit) do
|
= outfit_li_for(outfit) do
|
||||||
.outfit-star
|
- if outfit.image?
|
||||||
%h4= link_to outfit.name, outfit
|
= link_to image_tag(outfit.image.small.url), 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}?")
|
%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
Loading…
Reference in a new issue