From 1fd98fb191886fb9d8ad0e09d858677ec78553f8 Mon Sep 17 00:00:00 2001 From: Matchu Date: Mon, 8 Nov 2010 20:40:03 -0500 Subject: [PATCH] basic interaction with fake outfits --- app/controllers/outfits_controller.rb | 4 - app/helpers/application_helper.rb | 9 +- app/stylesheets/_layout.sass | 1 + app/stylesheets/outfits/_edit.sass | 362 +++++++++ app/stylesheets/partials/_jquery.jgrowl.sass | 98 +++ .../partials/clean/_constants.sass | 1 + app/stylesheets/partials/clean/_mixins.sass | 20 + app/stylesheets/screen.sass | 1 + app/views/outfits/edit.html.haml | 251 +++--- config/assets.yml | 1 + public/images/star.png | Bin 0 -> 670 bytes public/images/unstarred.png | Bin 0 -> 596 bytes public/javascripts/jquery.jgrowl.js | 120 +++ public/javascripts/outfits/edit.js | 41 +- public/stylesheets/compiled/screen.css | 735 ++++++++++++++++-- 15 files changed, 1478 insertions(+), 166 deletions(-) create mode 100644 app/stylesheets/outfits/_edit.sass create mode 100644 app/stylesheets/partials/_jquery.jgrowl.sass create mode 100644 public/images/star.png create mode 100644 public/images/unstarred.png create mode 100644 public/javascripts/jquery.jgrowl.js diff --git a/app/controllers/outfits_controller.rb b/app/controllers/outfits_controller.rb index ebc8022b..7f0aaddd 100644 --- a/app/controllers/outfits_controller.rb +++ b/app/controllers/outfits_controller.rb @@ -1,8 +1,4 @@ class OutfitsController < ApplicationController - def edit - render :layout => false - end - def new @colors = Color.all @species = Species.all diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 248b1313..b5836516 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,4 +1,9 @@ module ApplicationHelper + def add_body_class(class_name) + @body_class ||= '' + @body_class << " #{class_name}" + end + def auth_server_icon_url # TODO: if auth servers expand, don't hardcode path URI::HTTP.build( @@ -8,7 +13,9 @@ module ApplicationHelper end def body_class - "#{params[:controller]} #{params[:controller]}-#{params[:action]}" + "#{params[:controller]} #{params[:controller]}-#{params[:action]}".tap do |output| + output << @body_class if @body_class + end end def flashes diff --git a/app/stylesheets/_layout.sass b/app/stylesheets/_layout.sass index b56a8aea..d3652195 100644 --- a/app/stylesheets/_layout.sass +++ b/app/stylesheets/_layout.sass @@ -19,6 +19,7 @@ html, body height: 100% body + background: $background-color color: $text-color font: family: $main-font diff --git a/app/stylesheets/outfits/_edit.sass b/app/stylesheets/outfits/_edit.sass new file mode 100644 index 00000000..fed633f4 --- /dev/null +++ b/app/stylesheets/outfits/_edit.sass @@ -0,0 +1,362 @@ +@import ../shared/jquery.jgrowl + +$object-padding: 6px +$nc-icon-size: 16px + +$preview-dimension: 400px +$sidebar-margin: 20px +$sidebar-width: 400px +$sidebar-unit-horizontal-padding: 24px +$sidebar-unit-inner-width: $sidebar-width - $sidebar-unit-horizontal-padding * 2 + +body.outfits-edit + #preview-toolbar + margin-bottom: .5em + text-align: left + form + display: inline + margin-right: 2em + #pet-info form + display: inline + #pet-state-form + ul + list-style: none + &, li + display: inline + input + display: none + label + +awesome-button + margin: 0 .25em + li.selected label + +awesome-button-color($marked_button_color) + #sharing + float: right + position: relative + #short-url-response + font-size: 87.5% + display: none + position: absolute + right: 0 + top: -2em + width: 20em + #share-button-wrapper + display: inline + #share-button + img + margin: + bottom: -0.25em + right: .25em + height: 16px + width: 16px + &:active + top: 1px + #preview + clear: both + #preview-swf + float: left + height: $preview-dimension + margin-bottom: 1em + position: relative + width: $preview-dimension + #preview-swf-overlay + +opacity(0) + background: black + height: 100% + left: 0 + position: absolute + top: 0 + width: 100% + #preview-sidebar + float: left + height: $preview-dimension + margin-left: $sidebar-margin + margin-bottom: 1em + width: $container_width - $preview-dimension - $sidebar-margin + &.viewing-outfits + #preview-closet + display: none + #preview-outfits + display: block + #preview-closet + h2 + margin: 0 + .object + background: $module-bg-color + img + +opacity(0.5) + &.worn + background: transparent + img + +opacity(1) + &.no-assets + background: $error-bg-color + color: $error-color + padding-bottom: 1.25em + .no-assets-message + display: block + .no-assets-message + background: $error-bg-color - #080808 + bottom: 0 + color: $error-color - #080808 + cursor: pointer + display: none + font-size: 75% + left: 0 + position: absolute + width: 100% + #no-assets-full-message + +border-radius(5px) + background: $error-bg-color + #111111 + border: 1px solid $error-border-color + #111111 + color: $error-color + #111111 + font-size: 75% + left: -9999px + padding: .25em + position: absolute + top: -9999px + width: 30em + #preview-search-form + clear: both + text-align: left + h2 + +inline-block + margin: 0 1em 0 0 + input + +inline-block + #preview-search-form-pagination + +inline-block + margin-left: 2em + a, span + margin: 0 .25em + .current + font-weight: bold + #preview-search-form-clear + display: none + font-size: 87.5% + margin-left: 2em + #preview-search-form-loading + display: none + font: + size: 75% + style: italic + margin-left: 2em + #preview-search-form-no-results + display: none + #preview-search-form-help + font-size: 87.5% + margin-left: 2em + .search-helper + font-family: inherit + .possible-error + @extend .error + display: none + #fullscreen-copyright + display: none + &.fullscreen + $fullscreen-search-border: 1px 1px 0 + height: 100% + #container + +box-sizing(border-box) + height: 100% + margin: 0 auto + min-width: 800px + padding-top: 2.5em + position: relative + width: 80% + h1 + display: none + #short-url-response + position: static + #preview + width: 100% + #preview-sidebar + +border-radius(10px) + border: 1px solid $soft-border-color + float: right + height: 100% + margin: 0 + overflow: auto + position: relative + width: $sidebar-width + > div + padding: + left: $sidebar-unit-horizontal-padding + right: $sidebar-unit-horizontal-padding + #preview-search-form + bottom: 1em + left: 0 + overflow: auto + padding: .5em 1em + position: absolute + width: 100% + #preview-search-form-help + div + +inline-block + width: 48% + #footer + bottom: 0 + left: 0 + position: absolute + width: 100% + ul, p, li + display: inline + ul + margin-right: 2em + + .object + padding: $object-padding + position: relative + ul + display: none + left: 0 + list-style: none + position: absolute + top: 0 + li + margin-bottom: .25em + a + +awesome-button + +awesome-button-color(#aaaaaa) + +opacity(0.9) + font-size: 80% + &:hover + ul, .object-info + display: block + + // the difference between the horizontal edge of the object element and the + // image edge + $object-img-diff: ($object-width - $object-img-size) / 2 + $object-padding + + .nc-icon + background: url(/assets/images/nc.png) no-repeat + height: $nc-icon-size + position: absolute + right: $object-img-diff + text-indent: -9999px + top: $object-img-size - $nc-icon-size + width: $nc-icon-size + &:hover + +opacity(0.5) + + .object-info + +border-radius(12px) + +opacity(0.75) + background: #aaa + color: #fff + display: none + height: 16px + position: absolute + right: $object-img-diff / 2 + top: 0 + width: 16px + span + font: + family: $text-font + weight: bold + position: relative + top: -2px + &:hover + +opacity(1) + + $outfit-thumbnail-size: 50px + $outfit-thumbnail-original-size: 100px + $outfit-thumbnail-margin: 12px + $outfit-header-padding: 24px + $outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px + $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding + + #preview-outfits + display: none + text-align: left + h2 + margin-bottom: .25em + h3 + margin-bottom: .5em + > ul + display: block + font-family: $main-font + list-style: none + margin-bottom: 1em + > li + +clearfix + font-size: 75% + margin-bottom: .5em + .outfit-thumbnail + float: left + height: $outfit-thumbnail-size + margin-right: $outfit-thumbnail-margin + overflow: hidden + position: relative + width: $outfit-thumbnail-size + img + height: $outfit-thumbnail-original-size + left: -$outfit-thumbnail-original-size / 4 + position: absolute + top: -$outfit-thumbnail-original-size / 4 + width: $outfit-thumbnail-original-size + > div + float: left + width: $outfit-content-width + button + +reset-awesome-button + +opacity(.5) + font-size: 150% + float: right + line-height: 1 + margin-top: -.125em + padding: .125em .25em + &:hover + +opacity(1) + background: $module-bg-color + header + display: block + padding-left: $outfit-header-padding + .outfit-star + background: + image: url(/images/unstarred.png) + position: left top + repeat: no-repeat + bottom: -2px + /* margin-bottom doesn't work here + cursor: pointer + display: block + float: left + height: 16px + margin-left: -24px + /* makes it not take up inline space + position: relative + width: 16px + h4 + cursor: pointer + font-size: 150% + &:hover + text-decoration: underline + input + +opacity(.5) + border-color: $background-color + width: $outfit-content-inner-width + &:hover + +opacity(1) + border-color: $input-border-color + .outfit-delete-confirmation + display: none + span + color: red + a + margin: 0 .25em + &.confirming-deletion + .outfit-delete + visibility: hidden + .outfit-url + display: none + .outfit-delete-confirmation + display: block + &.starred + .outfit-star + background-image: url(/images/star.png) + + .preview-sidebar-nav + float: right + font-size: 85% + margin-top: 1em diff --git a/app/stylesheets/partials/_jquery.jgrowl.sass b/app/stylesheets/partials/_jquery.jgrowl.sass new file mode 100644 index 00000000..9f006fd8 --- /dev/null +++ b/app/stylesheets/partials/_jquery.jgrowl.sass @@ -0,0 +1,98 @@ +div + &.jGrowl + padding: 10px + z-index: 9999 + color: #fff + font-size: 12px + &.ie6 + position: absolute + &.top-right + right: auto + bottom: auto + left: expression(( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ) + top: expression(( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ) + &.top-left + left: expression(( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ) + top: expression(( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ) + &.bottom-right + left: expression(( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ) + top: expression(( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ) + &.bottom-left + left: expression(( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ) + top: expression(( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ) + &.center + left: expression(( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ) + top: expression(( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ) + width: 100% + +/** Special IE6 Style Positioning * + +/** Normal Style Positions * + +body > div.jGrowl + position: fixed + &.top-left + left: 0px + top: 0px + &.top-right + right: 0px + top: 0px + &.bottom-left + left: 0px + bottom: 0px + &.bottom-right + right: 0px + bottom: 0px + &.center + top: 0px + width: 50% + left: 25% + +/** Cross Browser Styling * + +div + &.center div + &.jGrowl-notification, &.jGrowl-closer + margin-left: auto + margin-right: auto + &.jGrowl div + &.jGrowl-notification, &.jGrowl-closer + background-color: #000 + opacity: .85 + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85) + zoom: 1 + width: 235px + padding: 10px + margin-top: 5px + margin-bottom: 5px + font-family: Tahoma, Arial, Helvetica, sans-serif + font-size: 1em + text-align: left + display: none + -moz-border-radius: 5px + -webkit-border-radius: 5px + &.jGrowl-notification + min-height: 40px + div + &.header + font-weight: bold + font-size: .85em + &.close + z-index: 99 + float: right + font-weight: bold + font-size: 1em + cursor: pointer + &.jGrowl-closer + padding-top: 4px + padding-bottom: 4px + cursor: pointer + font-size: .9em + font-weight: bold + text-align: center + +/** Hide jGrowl when printing * +@media print + div.jGrowl + display: none diff --git a/app/stylesheets/partials/clean/_constants.sass b/app/stylesheets/partials/clean/_constants.sass index 8894fc35..831feba5 100644 --- a/app/stylesheets/partials/clean/_constants.sass +++ b/app/stylesheets/partials/clean/_constants.sass @@ -1,3 +1,4 @@ +$background-color: #fff $text-color: #040 $soft-text-color: $text-color + #444 $link-color: $text-color + #222 diff --git a/app/stylesheets/partials/clean/_mixins.sass b/app/stylesheets/partials/clean/_mixins.sass index debd298a..7c051207 100644 --- a/app/stylesheets/partials/clean/_mixins.sass +++ b/app/stylesheets/partials/clean/_mixins.sass @@ -55,6 +55,26 @@ &:active top: 1px +=reset-awesome-button + +border-radius(0) + background: transparent + display: inline + padding: 0 + color: inherit + -moz-box-shadow: none + -webkit-box-shadow: none + text-shadow: none + border-bottom: 0 + position: static + font-weight: normal + line-height: inherit + + &:hover + background: transparent + color: inherit + &:active + top: auto + =loud-awesome-button-color +awesome-button-color(#ff5c00) diff --git a/app/stylesheets/screen.sass b/app/stylesheets/screen.sass index d35429f1..4171f728 100644 --- a/app/stylesheets/screen.sass +++ b/app/stylesheets/screen.sass @@ -8,6 +8,7 @@ @import items @import items/index @import items/show +@import outfits/edit @import outfits/new @import pets/bulk @import static/terms diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index 36fdd316..976a8c02 100644 --- a/app/views/outfits/edit.html.haml +++ b/app/views/outfits/edit.html.haml @@ -1,116 +1,143 @@ -!!! -%html - %head - %title Dress to Impress - Planning an outfit - /[if lt IE 9] - = javascript_include_tag "http://html5shiv.googlecode.com/svn/trunk/html5.js" - = stylesheet_link_tag "http://#{RemoteImpressHost}/assets/css/clean.css" - %body.standard.outfits-edit.fullscreen - #container - %a#home-link{:href => "/"} - %span Dress to Impress - %h1#title Planning an outfit - #pet-type-not-found.possible-error - We haven't seen that combination before. Have you? - Submit the pet's name if you have! - #preview-toolbar - %form#pet-type-form - %select{:name => "color"} - %select{:name => "species"} - %input{:type => "submit", :value => "Go"}/ - %form#pet-state-form - Gender/Emotions: - %ul - #sharing - %input#short-url-response{:type => "text", :value => "http://www.example.com/"}/ - %button#short-url-button - Short URL - #share-button-wrapper - %button#share-button.addthis_button - %img{:src => "http://s7.addthis.com/static/t00/logo1414.gif"}/ - Share - #preview - #preview-swf - %p Flash and Javascript (but not Java!) are required to preview outfits. - %p If this message stays after the page is done loading, check those first. - #preview-closet - %h2 Closet - %ul - %p#fullscreen-copyright - Images © 2000-2010 Neopets, Inc. All Rights Reserved. - Used With Permission - %form#preview-search-form - %header - %h2 Add an item - %input{:name => "query", :placeholder => "Search items...", :type => "search"}/ - %input{:type => "submit", :value => "Go"}/ - #preview-search-form-pagination - %a#preview-search-form-clear{:href => "#"} clear - %dl#preview-search-form-help +- add_body_class 'fullscreen' +%a#home-link{:href => "/"} + %span Dress to Impress +%h1#title Planning an outfit +#pet-type-not-found.possible-error + We haven't seen that combination before. Have you? + Submit the pet's name if you have! +#preview-toolbar + %form#pet-type-form + %select{:name => "color"} + %select{:name => "species"} + %input{:type => "submit", :value => "Go"}/ + %form#pet-state-form + Gender/Emotions: + %ul + #sharing + %input#short-url-response{:type => "text", :value => "http://www.example.com/"}/ + %button#short-url-button + Short URL + #share-button-wrapper + %button#share-button.addthis_button + %img{:src => "http://s7.addthis.com/static/t00/logo1414.gif"}/ + Share +#preview + #preview-swf + #preview-swf-container + %p Flash and Javascript (but not Java!) are required to preview outfits. + %p If this message stays after the page is done loading, check those first. + #preview-swf-overlay + #preview-sidebar + #preview-closet + %a#preview-sidebar-nav-outfits.preview-sidebar-nav{:href => '#'} Your outfits + %h2 Closet + %ul + %p#fullscreen-copyright + Images © 2000-2010 Neopets, Inc. All Rights Reserved. + Used With Permission + #preview-outfits + %a#preview-sidebar-nav-closet.preview-sidebar-nav{:href => "#"} ← Back to Closet + %h2 Your outfits + %ul + %li.starred + %span.outfit-thumbnail + %img{:src => "http://pets.neopets.com/cp/qw2l4ocw/1/2.png"}/ %div - %dt kreludor "altador cup" -background - %dd - returns any item with the word "kreludor" and the phrase "altador cup" - in it, but not the word "background" + %header + %button.outfit-delete × + .outfit-star + %h4 Pretty in Pink + %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'} + .outfit-delete-confirmation + %span Delete forever? + %a.outfit-delete-confirmation-yes{:href => '#'} yes + \/ + %a.outfit-delete-confirmation-no{:href => '#'} no, thanks + %li.starred + %span.outfit-thumbnail + %img{:src => "http://pets.neopets.com/cp/wgvw75n8/1/2.png"}/ %div - %dt collar -is:nc -is:pb - %dd - returns any item with the word "collar" in it, but is not from the NC - mall, and is not from a deluxe paint brush set + %header + %button.outfit-delete × + .outfit-star + %h4 The Little Mermaid + %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'} + .outfit-delete-confirmation + %span Delete forever? + %a.outfit-delete-confirmation-yes{:href => '#'} yes + \/ + %a.outfit-delete-confirmation-no{:href => '#'} no, thanks + %li + %span.outfit-thumbnail + %img{:src => "http://pets.neopets.com/cp/qb98jrng/1/2.png"}/ %div - %dt - %span species: - %span.search-helper{"data-search-filter" => "species"} Acara - %dd - returns any item a - %span.search-helper{"data-search-filter" => "species"} Acara - can wear + %header + %button.outfit-delete × + .outfit-star + %h4 Autumn is Here + %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'} + .outfit-delete-confirmation + %span Delete forever? + %a.outfit-delete-confirmation-yes{:href => '#'} yes + \/ + %a.outfit-delete-confirmation-no{:href => '#'} no, thanks + %li + %span.outfit-thumbnail + %img{:src => "http://pets.neopets.com/cp/84l7xx9t/1/2.png"}/ %div - %dt - %span type: - %span.search-helper{"data-search-filter" => "type"} background - %dd - returns any item that fills a - %span.search-helper{"data-search-filter" => "type"} background - zone - #preview-search-form-loading Loading... - #preview-search-form-error.possible-error - #preview-search-form-no-results - No results for "" - %ul - #no-assets-full-message - We haven't seen this item on this body type before. Have you? Submit its name on the home page if you have! - /[if IE] - = include_javascript_libraries :html5 - = include_javascript_libraries :jquery, :swfobject, :bitly, :addthis - %script{:src => "http://#{RemoteImpressHost}/assets/timestamped/js/jquery.jgrowl-v1278204174.js", :type => "text/javascript"} - = include_javascripts :edit_outfit_package - #userbar - #userbar-login-with Login with: - %ul#userbar-auth-servers - %li - %a{:href => "http://id.openneo.net/?app=impress&path=%2Fwardrobe&session_id=a9ddeffb83a923447e2f40a2fe8387dc"} - %img{:src => "http://id.openneo.net/favicon.png"}/ - %span OpenNeo ID - #footer - %ul - %li - %a{:href => "http://openneo.net/", :target => "_blank"} OpenNeo - %li - %a{:href => "http://blog.openneo.net/", :target => "_blank"} Blog - %li - %a{:href => "http://forum.openneo.net/", :target => "_blank"} Forum - %li - %a{:href => "http://github.com/matchu/openneo-impress"} The Source Code - %li - %a{:href => "/terms.html"} Terms of Use - %div - Contact: - %ul - %li - %a{:href => "http://openneo.uservoice.com/forums/40720-dress-to-impress"} Feedback - %li - %a{:href => "mailto:webmaster@openneo.net"} Questions, comments, bug reports - %p - Images © 2000-2010 Neopets, Inc. All Rights Reserved. - Used With Permission + %header + %button.outfit-delete × + .outfit-star + %h4 Super Mysterious Secret Agent + %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/qW2l4o'} + .outfit-delete-confirmation + %span Delete forever? + %a.outfit-delete-confirmation-yes{:href => '#'} yes + \/ + %a.outfit-delete-confirmation-no{:href => '#'} no, thanks +%form#preview-search-form + %header + %h2 Add an item + %input{:name => "query", :placeholder => "Search items...", :type => "search"}/ + %input{:type => "submit", :value => "Go"}/ + #preview-search-form-pagination + %a#preview-search-form-clear{:href => "#"} clear + %dl#preview-search-form-help + %div + %dt kreludor "altador cup" -background + %dd + returns any item with the word "kreludor" and the phrase "altador cup" + in it, but not the word "background" + %div + %dt collar -is:nc -is:pb + %dd + returns any item with the word "collar" in it, but is not from the NC + mall, and is not from a deluxe paint brush set + %div + %dt + %span species: + %span.search-helper{"data-search-filter" => "species"} Acara + %dd + returns any item a + %span.search-helper{"data-search-filter" => "species"} Acara + can wear + %div + %dt + %span type: + %span.search-helper{"data-search-filter" => "type"} background + %dd + returns any item that fills a + %span.search-helper{"data-search-filter" => "type"} background + zone + #preview-search-form-loading Loading... + #preview-search-form-error.possible-error + #preview-search-form-no-results + No results for "" + %ul +#no-assets-full-message + We haven't seen this item on this body type before. Have you? Submit its name on the home page if you have! +- content_for :javascripts do + /[if IE] + = include_javascript_libraries :html5 + = include_javascript_libraries :jquery, :swfobject, :bitly, :addthis + = include_javascripts :edit_outfit_package diff --git a/config/assets.yml b/config/assets.yml index 34ac1e17..6b4d07a9 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -6,6 +6,7 @@ javascripts: - public/javascripts/pets/bulk.js edit_outfit_package: + - public/javascripts/jquery.jgrowl.js - public/javascripts/wardrobe.js - public/javascripts/outfits/edit.js diff --git a/public/images/star.png b/public/images/star.png new file mode 100644 index 0000000000000000000000000000000000000000..b88c8578956ceec4ff17f81995b8652f6aa2b58d GIT binary patch literal 670 zcmV;P0%84$P)rx?szq&Dw38OK zY!^{rCAFy_2z8TV&4=Ube7+y|oYO*02OOyb5BD7I^ZdAQt`ZS+tMaFrb6^=AxbXHx zH;=|4CCm%L{PZwSS3v3G^sH+#W3JcR_xs(&`Tqt8^J9}d0vU#im5^f#04JL4qMaI^seoYDXwB>7;oyw=|M z1!ayym?6XvqV3ae_f95{py8ukt2TxB^!VIzRRh4#rNu~y^X+P>L{SXo3_|Qqm>9wY zz(9!5s#OBElpmj4DRyjO`0`RiEIkUg%7D)8y}}Ye3}prow;JG>UQOIs{kfZSJ9bYz zskMPbH9)1H6FDf)1=ZKVfe+;jf`a(O{!9meiN~~d0iA$0qX=t0D6Ydx4#RO76h@#R z9_k7Z;$fv6G>QeZ{Yu0n&xL4%!?l}UPj4!j&Vs@?dl=y8#_IQ`5I-5a_T$dJtJ_~5 z4&186>klZh{hfbaPx#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2igf9 z04WvgJghVT00GoVL_t(I%av2RjuSx;tnuv5?5^7 z=q|Q1ht4dF{RM~=T|#g%k`u3YXZA5u1e`4_&I`2EQcF{+uI}jq8e+LzK3p!BPns|R zn&TbG1ioAHU6h(omsu0I9@;paT6g9~W$sZ)INL~gc-)pV! z2SETSC4>+F0BbFbG4S5QIfo=kpp*)nbKSbGyLDYZE{funxR(4OilVzok|4`6lw}F; zJxIcPzpnwH)9Juk3u~<<`Ej>{3uDYC%QD1qya$s!$di*36h#4RZAJ2YI2@W50Q7o2 zNAe=i^UQk>t@S}?k`O|GB=S73z4zzC;V?V+g?_(ZlKhhAIh0a=sL)#PM*BV*jW#!4 zBFTGFN>o(^DJ7Ir5JJEhgR(4l%I+LJWs==is|6_~+U+*1wQ$bu_u`y`bM96XK}QII zG)-ZQaU{QyG-;YXS4xG~3Zf>0WW8QjB)<*@gU`P`eVR_EFSgt5Yv){i)Oxeo?Ac%3 iiOFPgIv$VrzW522`!)hjwK2#50000").addClass($.jGrowl.defaults.position).appendTo("body"); +} +$("#jGrowl").jGrowl(m,o); +}; +$.fn.jGrowl=function(m,o){ +if($.isFunction(this.each)){ +var _6=arguments; +return this.each(function(){ +var _7=this; +if($(this).data("jGrowl.instance")==undefined){ +$(this).data("jGrowl.instance",$.extend(new $.fn.jGrowl(),{notifications:[],element:null,interval:null})); +$(this).data("jGrowl.instance").startup(this); +} +if($.isFunction($(this).data("jGrowl.instance")[m])){ +$(this).data("jGrowl.instance")[m].apply($(this).data("jGrowl.instance"),$.makeArray(_6).slice(1)); +}else{ +$(this).data("jGrowl.instance").create(m,o); +} +}); +} +}; +$.extend($.fn.jGrowl.prototype,{defaults:{pool:0,header:"",group:"",sticky:false,position:"top-right",glue:"after",theme:"default",corners:"10px",check:250,life:3000,speed:"normal",easing:"swing",closer:true,closeTemplate:"×",closerTemplate:"
[ close all ]
",log:function(e,m,o){ +},beforeOpen:function(e,m,o){ +},open:function(e,m,o){ +},beforeClose:function(e,m,o){ +},close:function(e,m,o){ +},animateOpen:{opacity:"show"},animateClose:{opacity:"hide"}},notifications:[],element:null,interval:null,create:function(_17,o){ +var o=$.extend({},this.defaults,o); +this.notifications.push({message:_17,options:o}); +o.log.apply(this.element,[this.element,_17,o]); +},render:function(_19){ +var _1a=this; +var _1b=_19.message; +var o=_19.options; +var _19=$("
"+"
"+o.closeTemplate+"
"+"
"+o.header+"
"+"
"+_1b+"
").data("jGrowl",o).addClass(o.theme).children("div.close").bind("click.jGrowl",function(){ +$(this).parent().trigger("jGrowl.close"); +}).parent(); +$(_19).bind("mouseover.jGrowl",function(){ +$("div.jGrowl-notification",_1a.element).data("jGrowl.pause",true); +}).bind("mouseout.jGrowl",function(){ +$("div.jGrowl-notification",_1a.element).data("jGrowl.pause",false); +}).bind("jGrowl.beforeOpen",function(){ +if(o.beforeOpen.apply(_19,[_19,_1b,o,_1a.element])!=false){ +$(this).trigger("jGrowl.open"); +} +}).bind("jGrowl.open",function(){ +if(o.open.apply(_19,[_19,_1b,o,_1a.element])!=false){ +if(o.glue=="after"){ +$("div.jGrowl-notification:last",_1a.element).after(_19); +}else{ +$("div.jGrowl-notification:first",_1a.element).before(_19); +} +$(this).animate(o.animateOpen,o.speed,o.easing,function(){ +if($.browser.msie&&(parseInt($(this).css("opacity"),10)===1||parseInt($(this).css("opacity"),10)===0)){ +this.style.removeAttribute("filter"); +} +$(this).data("jGrowl").created=new Date(); +}); +} +}).bind("jGrowl.beforeClose",function(){ +if(o.beforeClose.apply(_19,[_19,_1b,o,_1a.element])!=false){ +$(this).trigger("jGrowl.close"); +} +}).bind("jGrowl.close",function(){ +$(this).data("jGrowl.pause",true); +$(this).animate(o.animateClose,o.speed,o.easing,function(){ +$(this).remove(); +var _1d=o.close.apply(_19,[_19,_1b,o,_1a.element]); +if($.isFunction(_1d)){ +_1d.apply(_19,[_19,_1b,o,_1a.element]); +} +}); +}).trigger("jGrowl.beforeOpen"); +if($.fn.corner!=undefined){ +$(_19).corner(o.corners); +} +if($("div.jGrowl-notification:parent",_1a.element).size()>1&&$("div.jGrowl-closer",_1a.element).size()==0&&this.defaults.closer!=false){ +$(this.defaults.closerTemplate).addClass("jGrowl-closer ui-state-highlight ui-corner-all").addClass(this.defaults.theme).appendTo(_1a.element).animate(this.defaults.animateOpen,this.defaults.speed,this.defaults.easing).bind("click.jGrowl",function(){ +$(this).siblings().children("div.close").trigger("click.jGrowl"); +if($.isFunction(_1a.defaults.closer)){ +_1a.defaults.closer.apply($(this).parent()[0],[$(this).parent()[0]]); +} +}); +} +},update:function(){ +$(this.element).find("div.jGrowl-notification:parent").each(function(){ +if($(this).data("jGrowl")!=undefined&&$(this).data("jGrowl").created!=undefined&&($(this).data("jGrowl").created.getTime()+$(this).data("jGrowl").life)<(new Date()).getTime()&&$(this).data("jGrowl").sticky!=true&&($(this).data("jGrowl.pause")==undefined||$(this).data("jGrowl.pause")!=true)){ +$(this).trigger("jGrowl.beforeClose"); +} +}); +if(this.notifications.length>0&&(this.defaults.pool==0||$(this.element).find("div.jGrowl-notification:parent").size()"); +this.interval=setInterval(function(){ +$(e).data("jGrowl.instance").update(); +},this.defaults.check); +if($.browser.msie&&parseInt($.browser.version)<7&&!window["XMLHttpRequest"]){ +$(this.element).addClass("ie6"); +} +},shutdown:function(){ +$(this.element).removeClass("jGrowl").find("div.jGrowl-notification").remove(); +clearInterval(this.interval); +},close:function(){ +$(this.element).find("div.jGrowl-notification").each(function(){ +$(this).trigger("jGrowl.beforeClose"); +}); +}}); +$.jGrowl.defaults=$.fn.jGrowl.prototype.defaults; +})(jQuery); + diff --git a/public/javascripts/outfits/edit.js b/public/javascripts/outfits/edit.js index 6d247aa0..087b47cc 100644 --- a/public/javascripts/outfits/edit.js +++ b/public/javascripts/outfits/edit.js @@ -1,9 +1,11 @@ +// TODO: remove code associated with Short URL, Share + var Partial = {}, main_wardrobe, View = Wardrobe.getStandardView({ Preview: { swf_url: '/swfs/preview.swf?v=0.12', wrapper: $('#preview'), - placeholder: $('#preview-swf') + placeholder: $('#preview-swf-container') } }); @@ -147,7 +149,7 @@ View.Closet = function (wardrobe) { View.Fullscreen = function (wardrobe) { var full = $(document.body).hasClass('fullscreen'), win = $(window), preview_el = $('#preview'), search_el = $('#preview-search-form'), - preview_swf = $('#preview-swf'), closet_el = $('#preview-closet'), + preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'), footer = $('#footer'); function fit() { @@ -155,7 +157,7 @@ View.Fullscreen = function (wardrobe) { preview_swf = $('#preview-swf'); // swf replaced var available = { height: search_el.offset().top - preview_el.offset().top, - width: preview_el.innerWidth() - closet_el.outerWidth() - 12 // 12px margin + width: preview_el.innerWidth() - sidebar_el.outerWidth() - 12 // 12px margin }, dim = {}, margin = {}, size = { old: {height: preview_swf.height(), width: preview_swf.width()}, next: {} @@ -408,6 +410,39 @@ View.Hash = function (wardrobe) { })(); } +View.Outfits = function (wardrobe) { + var outfits_el = $('#preview-outfits'), sidebar_el = $('#preview-sidebar'), + overlay_el = $('#preview-swf-overlay'); + + $('input.outfit-url').live('mouseover', function () { + this.focus(); + }).live('mouseout', function () { + this.blur(); + }); + + $('button.outfit-delete').live('click', function (e) { + e.preventDefault(); + $(this).closest('li').addClass('confirming-deletion'); + }); + + $('a.outfit-delete-confirmation-no').live('click', function (e) { + e.preventDefault(); + $(this).closest('li').removeClass('confirming-deletion'); + }); + + $('#preview-sidebar-nav-outfits').click(function (e) { + e.preventDefault(); + sidebar_el.addClass('viewing-outfits'); + overlay_el.fadeTo('slow', .75) + }); + + $('#preview-sidebar-nav-closet').click(function (e) { + e.preventDefault(); + sidebar_el.removeClass('viewing-outfits'); + overlay_el.fadeTo('fast', 0); + }); +} + View.PetStateForm = function (wardrobe) { var INPUT_NAME = 'pet_state_id', form_query = '#pet-state-form', form = $(form_query), diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index bafa8dcd..ec600c5f 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -22,66 +22,67 @@ html, body { /* line 21, ../../../app/stylesheets/_layout.sass */ body { + background: white; color: #004400; font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif; font-size: 90%; line-height: 1.5; } -/* line 28, ../../../app/stylesheets/_layout.sass */ +/* line 29, ../../../app/stylesheets/_layout.sass */ a { color: #226622; } -/* line 31, ../../../app/stylesheets/_layout.sass */ +/* line 32, ../../../app/stylesheets/_layout.sass */ p { font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; } -/* line 34, ../../../app/stylesheets/_layout.sass */ +/* line 35, ../../../app/stylesheets/_layout.sass */ input, button, select { font-family: inherit; font-size: 100%; } -/* line 39, ../../../app/stylesheets/_layout.sass */ +/* line 40, ../../../app/stylesheets/_layout.sass */ p { margin-bottom: 1em; } -/* line 42, ../../../app/stylesheets/_layout.sass */ +/* line 43, ../../../app/stylesheets/_layout.sass */ h1, h2, h3 { font-family: Delicious, Helvetica, Arial, Verdana, sans-serif; } -/* line 45, ../../../app/stylesheets/_layout.sass */ +/* line 46, ../../../app/stylesheets/_layout.sass */ h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } -/* line 50, ../../../app/stylesheets/_layout.sass */ +/* line 51, ../../../app/stylesheets/_layout.sass */ h2 { font-size: 2em; margin-bottom: 0.75em; } -/* line 54, ../../../app/stylesheets/_layout.sass */ +/* line 55, ../../../app/stylesheets/_layout.sass */ h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } -/* line 59, ../../../app/stylesheets/_layout.sass */ +/* line 60, ../../../app/stylesheets/_layout.sass */ .inline-image, body.pets-bulk #bulk-pets-form ul img { margin-right: 1em; vertical-align: middle; } /* Main */ -/* line 67, ../../../app/stylesheets/_layout.sass */ +/* line 68, ../../../app/stylesheets/_layout.sass */ #container { margin: 1em auto; padding-top: 3em; @@ -89,12 +90,12 @@ h3 { width: 800px; } -/* line 73, ../../../app/stylesheets/_layout.sass */ +/* line 74, ../../../app/stylesheets/_layout.sass */ input, button, select, label { cursor: pointer; } -/* line 76, ../../../app/stylesheets/_layout.sass */ +/* line 77, ../../../app/stylesheets/_layout.sass */ input[type=text], body.pets-bulk #bulk-pets-form textarea, input[type=password], input[type=search], select { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -103,12 +104,12 @@ input[type=text], body.pets-bulk #bulk-pets-form textarea, input[type=password], color: #448844; padding: 0.25em; } -/* line 82, ../../../app/stylesheets/_layout.sass */ +/* line 83, ../../../app/stylesheets/_layout.sass */ input[type=text]:focus, body.pets-bulk #bulk-pets-form textarea:focus, input[type=text]:active, body.pets-bulk #bulk-pets-form textarea:active, input[type=password]:focus, input[type=password]:active, input[type=search]:focus, input[type=search]:active, select:focus, select:active { color: inherit; } -/* line 85, ../../../app/stylesheets/_layout.sass */ +/* line 86, ../../../app/stylesheets/_layout.sass */ a.button, input[type=submit], button { /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */ -moz-border-radius: 5px; @@ -139,7 +140,7 @@ a.button:hover, input[type=submit]:hover, button:hover { a.button:active, input[type=submit]:active, button:active { top: 1px; } -/* line 87, ../../../app/stylesheets/_layout.sass */ +/* line 88, ../../../app/stylesheets/_layout.sass */ a.button.loud, input[type=submit].loud, button.loud { background: #ff5c00 url(/images/alert-overlay.png) repeat-x; font-size: 125%; @@ -150,26 +151,26 @@ a.button.loud:hover, input[type=submit].loud:hover, button.loud:hover { background-color: #ee4b00; } -/* line 67, ../../../app/stylesheets/partials/clean/_mixins.sass */ +/* line 87, ../../../app/stylesheets/partials/clean/_mixins.sass */ a.button:after { content: " >>"; } -/* line 93, ../../../app/stylesheets/_layout.sass */ +/* line 94, ../../../app/stylesheets/_layout.sass */ ul.buttons { margin-bottom: 1em; } -/* line 95, ../../../app/stylesheets/_layout.sass */ +/* line 96, ../../../app/stylesheets/_layout.sass */ ul.buttons li { list-style: none; margin: 0 0.5em; } -/* line 98, ../../../app/stylesheets/_layout.sass */ +/* line 99, ../../../app/stylesheets/_layout.sass */ ul.buttons li, ul.buttons li form { display: inline; } -/* line 101, ../../../app/stylesheets/_layout.sass */ +/* line 102, ../../../app/stylesheets/_layout.sass */ #footer { clear: both; font-size: 75%; @@ -177,77 +178,77 @@ ul.buttons li, ul.buttons li form { padding-top: 2em; text-align: center; } -/* line 107, ../../../app/stylesheets/_layout.sass */ +/* line 108, ../../../app/stylesheets/_layout.sass */ #footer ul, #footer div { display: inline; margin: 0 1em; } -/* line 110, ../../../app/stylesheets/_layout.sass */ +/* line 111, ../../../app/stylesheets/_layout.sass */ #footer li, #footer div ul { display: inline; margin: 0 0.5em; } -/* line 114, ../../../app/stylesheets/_layout.sass */ +/* line 115, ../../../app/stylesheets/_layout.sass */ .success, .alert, .warning { margin-bottom: 1em; padding: 0.25em 0.5em; text-align: center; } -/* line 119, ../../../app/stylesheets/_layout.sass */ +/* line 120, ../../../app/stylesheets/_layout.sass */ .success { background: #e6efc2; border: 1px solid #c6d880; color: #264409; } -/* line 124, ../../../app/stylesheets/_layout.sass */ +/* line 125, ../../../app/stylesheets/_layout.sass */ .alert { background: #fbe3e4; border: 1px solid #fbc2c4; color: #8a1f11; } -/* line 129, ../../../app/stylesheets/_layout.sass */ +/* line 130, ../../../app/stylesheets/_layout.sass */ .warning { background: #fff6bf; border: 1px solid #ffd324; color: #514721; } -/* line 134, ../../../app/stylesheets/_layout.sass */ +/* line 135, ../../../app/stylesheets/_layout.sass */ #userbar { font-family: Delicious, Helvetica, Arial, Verdana, sans-serif; position: absolute; right: 0; top: 0; } -/* line 139, ../../../app/stylesheets/_layout.sass */ +/* line 140, ../../../app/stylesheets/_layout.sass */ #userbar > * { display: inline; margin: 0 0.25em; } -/* line 143, ../../../app/stylesheets/_layout.sass */ +/* line 144, ../../../app/stylesheets/_layout.sass */ #userbar-log-in { text-decoration: none; } -/* line 145, ../../../app/stylesheets/_layout.sass */ +/* line 146, ../../../app/stylesheets/_layout.sass */ #userbar-log-in img { margin-bottom: -4px; margin-right: 0.25em; } -/* line 149, ../../../app/stylesheets/_layout.sass */ +/* line 150, ../../../app/stylesheets/_layout.sass */ #userbar-log-in span { text-decoration: underline; } -/* line 151, ../../../app/stylesheets/_layout.sass */ +/* line 152, ../../../app/stylesheets/_layout.sass */ #userbar-log-in:hover span { text-decoration: none; } -/* line 154, ../../../app/stylesheets/_layout.sass */ +/* line 155, ../../../app/stylesheets/_layout.sass */ .object { display: -moz-inline-box; -moz-box-orient: vertical; @@ -261,25 +262,25 @@ ul.buttons li, ul.buttons li form { vertical-align: top; width: 100px; } -/* line 161, ../../../app/stylesheets/_layout.sass */ +/* line 162, ../../../app/stylesheets/_layout.sass */ .object a { text-decoration: none; } -/* line 163, ../../../app/stylesheets/_layout.sass */ +/* line 164, ../../../app/stylesheets/_layout.sass */ .object a img { -moz-opacity: 0.75; -webkit-opacity: 0.75; -o-opacity: 0.75; -khtml-opacity: 0.75; } -/* line 165, ../../../app/stylesheets/_layout.sass */ +/* line 166, ../../../app/stylesheets/_layout.sass */ .object a:hover img { -moz-opacity: 1; -webkit-opacity: 1; -o-opacity: 1; -khtml-opacity: 1; } -/* line 167, ../../../app/stylesheets/_layout.sass */ +/* line 168, ../../../app/stylesheets/_layout.sass */ .object img { display: block; height: 80px; @@ -287,17 +288,17 @@ ul.buttons li, ul.buttons li form { width: 80px; } -/* line 173, ../../../app/stylesheets/_layout.sass */ +/* line 174, ../../../app/stylesheets/_layout.sass */ dt { font-weight: bold; } -/* line 176, ../../../app/stylesheets/_layout.sass */ +/* line 177, ../../../app/stylesheets/_layout.sass */ dd { margin: 0 0 1.5em 1em; } -/* line 179, ../../../app/stylesheets/_layout.sass */ +/* line 180, ../../../app/stylesheets/_layout.sass */ #home-link { font-family: Delicious, Helvetica, Arial, Verdana, sans-serif; font-size: 175%; @@ -308,26 +309,26 @@ dd { position: absolute; top: 0; } -/* line 189, ../../../app/stylesheets/_layout.sass */ +/* line 190, ../../../app/stylesheets/_layout.sass */ #home-link:hover { background: #eeffee; text-decoration: none; } -/* line 192, ../../../app/stylesheets/_layout.sass */ +/* line 193, ../../../app/stylesheets/_layout.sass */ #home-link span:before { content: "<< "; } -/* line 196, ../../../app/stylesheets/_layout.sass */ +/* line 197, ../../../app/stylesheets/_layout.sass */ .pagination a, .pagination span { margin: 0 0.5em; } -/* line 198, ../../../app/stylesheets/_layout.sass */ +/* line 199, ../../../app/stylesheets/_layout.sass */ .pagination .current { font-weight: bold; } -/* line 201, ../../../app/stylesheets/_layout.sass */ +/* line 202, ../../../app/stylesheets/_layout.sass */ .object .nc-icon { height: 16px; position: absolute; @@ -335,7 +336,7 @@ dd { top: 64px; width: 16px; } -/* line 207, ../../../app/stylesheets/_layout.sass */ +/* line 208, ../../../app/stylesheets/_layout.sass */ .object .nc-icon:hover { -moz-opacity: 0.5; -webkit-opacity: 0.5; @@ -626,6 +627,648 @@ body.items-show .nc-icon { width: 16px; } +@import url(../shared/jquery.jgrowl.css); +/* line 13, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-toolbar { + margin-bottom: 0.5em; + text-align: left; +} +/* line 16, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-toolbar form { + display: inline; + margin-right: 2em; +} +/* line 19, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #pet-info form { + display: inline; +} +/* line 22, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #pet-state-form ul { + list-style: none; +} +/* line 24, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #pet-state-form ul, body.outfits-edit #pet-state-form ul li { + display: inline; +} +/* line 26, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #pet-state-form input { + display: none; +} +/* line 28, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #pet-state-form label { + /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + background: #006400 url(/images/alert-overlay.png) repeat-x; + border: 0; + display: inline-block; + padding: 0.5em 0.75em 0.45em; + color: white; + text-decoration: none; + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(0, 0, 0, 0.25); + position: relative; + font-weight: bold; + line-height: 1; + margin: 0 0.25em; +} +/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #pet-state-form label:hover { + background-color: #005300; +} +/* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #pet-state-form label:hover { + color: white; +} +/* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #pet-state-form label:active { + top: 1px; +} +/* line 31, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #pet-state-form li.selected label { + background: #0b61a4 url(/images/alert-overlay.png) repeat-x; +} +/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #pet-state-form li.selected label:hover { + background-color: #005093; +} +/* line 33, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #sharing { + float: right; + position: relative; +} +/* line 36, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #short-url-response { + font-size: 87.5%; + display: none; + position: absolute; + right: 0; + top: -2em; + width: 20em; +} +/* line 43, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #share-button-wrapper { + display: inline; +} +/* line 46, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #share-button img { + margin-bottom: -0.25em; + margin-right: 0.25em; + height: 16px; + width: 16px; +} +/* line 52, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #share-button:active { + top: 1px; +} +/* line 54, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview { + clear: both; +} +/* line 56, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-swf { + float: left; + height: 400px; + margin-bottom: 1em; + position: relative; + width: 400px; +} +/* line 62, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-swf-overlay { + -moz-opacity: 0; + -webkit-opacity: 0; + -o-opacity: 0; + -khtml-opacity: 0; + background: black; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +/* line 70, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sidebar { + float: left; + height: 400px; + margin-left: 20px; + margin-bottom: 1em; + width: 380px; +} +/* line 77, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sidebar.viewing-outfits #preview-closet { + display: none; +} +/* line 79, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-sidebar.viewing-outfits #preview-outfits { + display: block; +} +/* line 82, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet h2 { + margin: 0; +} +/* line 84, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet .object { + background: #eeffee; +} +/* line 86, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet .object img { + -moz-opacity: 0.5; + -webkit-opacity: 0.5; + -o-opacity: 0.5; + -khtml-opacity: 0.5; +} +/* line 88, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet .object.worn { + background: transparent; +} +/* line 90, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet .object.worn img { + -moz-opacity: 1; + -webkit-opacity: 1; + -o-opacity: 1; + -khtml-opacity: 1; +} +/* line 92, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet .object.no-assets { + background: #fbe3e4; + color: #8a1f11; + padding-bottom: 1.25em; +} +/* line 96, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-closet .object.no-assets .no-assets-message { + display: block; +} +/* line 98, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .no-assets-message { + background: #f3dbdc; + bottom: 0; + color: #821709; + cursor: pointer; + display: none; + font-size: 75%; + left: 0; + position: absolute; + width: 100%; +} +/* line 108, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #no-assets-full-message { + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + background: #fff4f5; + border: 1px solid #ffd3d5; + color: #9b3022; + font-size: 75%; + left: -9999px; + padding: 0.25em; + position: absolute; + top: -9999px; + width: 30em; +} +/* line 119, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form { + clear: both; + text-align: left; +} +/* line 122, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form h2 { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *display: inline; + *vertical-align: auto; + margin: 0 1em 0 0; +} +/* line 125, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form input { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *display: inline; + *vertical-align: auto; +} +/* line 127, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-pagination { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *display: inline; + *vertical-align: auto; + margin-left: 2em; +} +/* line 130, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-pagination a, body.outfits-edit #preview-search-form-pagination span { + margin: 0 0.25em; +} +/* line 132, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-pagination .current { + font-weight: bold; +} +/* line 134, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-clear { + display: none; + font-size: 87.5%; + margin-left: 2em; +} +/* line 138, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-loading { + display: none; + font-size: 75%; + font-style: italic; + margin-left: 2em; +} +/* line 144, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-no-results { + display: none; +} +/* line 146, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-search-form-help { + font-size: 87.5%; + margin-left: 2em; +} +/* line 149, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .search-helper { + font-family: inherit; +} +/* line 151, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .possible-error { + display: none; +} +/* line 154, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #fullscreen-copyright { + display: none; +} +/* line 156, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen { + height: 100%; +} +/* line 159, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #container { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + height: 100%; + margin: 0 auto; + min-width: 800px; + padding-top: 2.5em; + position: relative; + width: 80%; +} +/* line 167, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen h1 { + display: none; +} +/* line 169, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #short-url-response { + position: static; +} +/* line 171, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #preview { + width: 100%; +} +/* line 173, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #preview-sidebar { + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border: 1px solid #aaddaa; + float: right; + height: 100%; + margin: 0; + overflow: auto; + position: relative; + width: 400px; +} +/* line 182, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #preview-sidebar > div { + padding-left: 24px; + padding-right: 24px; +} +/* line 186, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #preview-search-form { + bottom: 1em; + left: 0; + overflow: auto; + padding: 0.5em 1em; + position: absolute; + width: 100%; +} +/* line 194, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #preview-search-form-help div { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *display: inline; + *vertical-align: auto; + width: 48%; +} +/* line 197, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #footer { + bottom: 0; + left: 0; + position: absolute; + width: 100%; +} +/* line 202, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #footer ul, body.outfits-edit.fullscreen #footer p, body.outfits-edit.fullscreen #footer li { + display: inline; +} +/* line 204, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit.fullscreen #footer ul { + margin-right: 2em; +} +/* line 207, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object { + padding: 6px; + position: relative; +} +/* line 210, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object ul { + display: none; + left: 0; + list-style: none; + position: absolute; + top: 0; +} +/* line 216, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object ul li { + margin-bottom: 0.25em; +} +/* line 218, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object ul li a { + /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + background: #006400 url(/images/alert-overlay.png) repeat-x; + border: 0; + display: inline-block; + padding: 0.5em 0.75em 0.45em; + color: white; + text-decoration: none; + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); + border-bottom: 1px solid rgba(0, 0, 0, 0.25); + position: relative; + font-weight: bold; + line-height: 1; + background: #aaaaaa url(/images/alert-overlay.png) repeat-x; + -moz-opacity: 0.9; + -webkit-opacity: 0.9; + -o-opacity: 0.9; + -khtml-opacity: 0.9; + font-size: 80%; +} +/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit .object ul li a:hover { + background-color: #005300; +} +/* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit .object ul li a:hover { + color: white; +} +/* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit .object ul li a:active { + top: 1px; +} +/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit .object ul li a:hover { + background-color: #999999; +} +/* line 224, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object:hover ul, body.outfits-edit .object:hover .object-info { + display: block; +} +/* line 231, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .nc-icon { + background: url(/assets/images/nc.png) no-repeat; + height: 16px; + position: absolute; + right: 16px; + text-indent: -9999px; + top: 64px; + width: 16px; +} +/* line 239, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .nc-icon:hover { + -moz-opacity: 0.5; + -webkit-opacity: 0.5; + -o-opacity: 0.5; + -khtml-opacity: 0.5; +} +/* line 242, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object-info { + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + -moz-opacity: 0.75; + -webkit-opacity: 0.75; + -o-opacity: 0.75; + -khtml-opacity: 0.75; + background: #aaaaaa; + color: white; + display: none; + height: 16px; + position: absolute; + right: 8px; + top: 0; + width: 16px; +} +/* line 253, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object-info span { + font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; + font-weight: bold; + position: relative; + top: -2px; +} +/* line 259, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .object-info:hover { + -moz-opacity: 1; + -webkit-opacity: 1; + -o-opacity: 1; + -khtml-opacity: 1; +} +/* line 269, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits { + display: none; + text-align: left; +} +/* line 272, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits h2 { + margin-bottom: 0.25em; +} +/* line 274, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits h3 { + margin-bottom: 0.5em; +} +/* line 276, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul { + display: block; + font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif; + list-style: none; + margin-bottom: 1em; +} +/* line 281, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li { + overflow: hidden; + display: inline-block; + font-size: 75%; + margin-bottom: 0.5em; +} +/* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #preview-outfits > ul > li { + display: block; +} +/* line 285, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li .outfit-thumbnail { + float: left; + height: 50px; + margin-right: 12px; + overflow: hidden; + position: relative; + width: 50px; +} +/* line 292, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li img { + height: 100px; + left: -25px; + position: absolute; + top: -25px; + width: 100px; +} +/* line 298, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li > div { + float: left; + width: 258px; +} +/* line 301, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li button { + -moz-border-radius: 0; + -webkit-border-radius: 0; + background: transparent; + display: inline; + padding: 0; + color: inherit; + -moz-box-shadow: none; + -webkit-box-shadow: none; + text-shadow: none; + border-bottom: 0; + position: static; + font-weight: normal; + line-height: inherit; + -moz-opacity: 0.5; + -webkit-opacity: 0.5; + -o-opacity: 0.5; + -khtml-opacity: 0.5; + font-size: 150%; + float: right; + line-height: 1; + margin-top: -0.125em; + padding: 0.125em 0.25em; +} +/* line 72, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #preview-outfits > ul > li button:hover { + background: transparent; + color: inherit; +} +/* line 75, ../../../app/stylesheets/partials/clean/_mixins.sass */ +body.outfits-edit #preview-outfits > ul > li button:active { + top: auto; +} +/* line 309, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li button:hover { + -moz-opacity: 1; + -webkit-opacity: 1; + -o-opacity: 1; + -khtml-opacity: 1; + background: #eeffee; +} +/* line 312, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li header { + display: block; + padding-left: 24px; +} +/* line 315, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li .outfit-star { + background-image: url(/images/unstarred.png); + background-position: left top; + background-repeat: no-repeat; + bottom: -2px; + /* margin-bottom doesn't work here */ + cursor: pointer; + display: block; + float: left; + height: 16px; + margin-left: -24px; + /* makes it not take up inline space */ + position: relative; + width: 16px; +} +/* line 330, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li h4 { + cursor: pointer; + font-size: 150%; +} +/* line 333, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li h4:hover { + text-decoration: underline; +} +/* line 335, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li input { + -moz-opacity: 0.5; + -webkit-opacity: 0.5; + -o-opacity: 0.5; + -khtml-opacity: 0.5; + border-color: white; + width: 234px; +} +/* line 339, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li input:hover { + -moz-opacity: 1; + -webkit-opacity: 1; + -o-opacity: 1; + -khtml-opacity: 1; + border-color: #cceecc; +} +/* line 342, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation { + display: none; +} +/* line 344, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation span { + color: red; +} +/* line 346, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li .outfit-delete-confirmation a { + margin: 0 0.25em; +} +/* line 349, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-delete { + visibility: hidden; +} +/* line 351, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-url { + display: none; +} +/* line 353, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li.confirming-deletion .outfit-delete-confirmation { + display: block; +} +/* line 356, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit #preview-outfits > ul > li.starred .outfit-star { + background-image: url(/images/star.png); +} +/* line 359, ../../../app/stylesheets/outfits/_edit.sass */ +body.outfits-edit .preview-sidebar-nav { + float: right; + font-size: 85%; + margin-top: 1em; +} + /* line 2, ../../../app/stylesheets/outfits/_new.sass */ body.outfits-new #outfit-forms { overflow: hidden;