dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

auto shrink wardrobe from fullscreen when screen too small

Browse source
This commit is contained in:
Emi Matchu 2011-02-06 18:55:04 -05:00
parent 28b387d4ca
commit 50f0adaa4d
4 changed files with 87 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/stylesheets/outfits/_edit.sass
View file

@ -170,11 +170,14 @@ body.outfits-edit
top: 0
width: 100%
#preview-sidebar
+border-radius(10px)
border: 1px solid $soft-border-color
float: left
height: $preview-dimension
margin-left: $sidebar-margin
margin-bottom: 1em
width: $container_width - $preview-dimension - $sidebar-margin
overflow: auto
width: $container_width - $preview-dimension - $sidebar-margin - 2px
&.viewing-outfits
#preview-closet
display: none
@ -187,6 +190,11 @@ body.outfits-edit
display: none
#preview-saving-outfit
display: block
.sidebar-view
h2
margin:
bottom: .25em
left: $sidebar-unit-horizontal-padding
#preview-closet
h2
margin-bottom: 0
@ -282,19 +290,11 @@ body.outfits-edit
#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
.sidebar-view
h2
margin:
bottom: .25em
left: $sidebar-unit-horizontal-padding
&.viewing-saving-outfit
height: auto
max-height: 100%

1
app/views/outfits/edit.html.haml
View file

@ -106,5 +106,6 @@
\/
%a.outfit-delete-confirmation-no{:href => '#'} no, thanks
</li>
- content_for :javascripts do
= include_javascript_libraries :jquery, :swfobject, :jquery_tmpl
= include_javascripts :edit_outfit_package

17
public/javascripts/outfits/edit.js
View file

@ -185,9 +185,21 @@ View.Fullscreen = function (wardrobe) {
var full = $(document.body).hasClass('fullscreen'), win = $(window),
preview_el = $('#preview'), search_el = $('#preview-search-form'),
preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'),
footer = $('#footer');
footer = $('#footer'), jwindow = $(window), overrideFull = false;
function fit() {
if(!overrideFull) {
var newFull = jwindow.height() > 500;
if(newFull != full) {
full = newFull;
$(document.body).toggleClass('fullscreen', full);
if(!full) {
preview_swf.removeAttr('style').css('visibility', 'visible');
preview_el.removeAttr('style');
}
}
}
if(full) {
preview_swf = $('#preview-swf'); // swf replaced
var available = {
@ -229,10 +241,10 @@ View.Fullscreen = function (wardrobe) {
var Konami=function(){var a={addEvent:function(b,c,d,e){if(b.addEventListener)b.addEventListener(c,d,false);else if(b.attachEvent){b["e"+c+d]=d;b[c+d]=function(){b["e"+c+d](window.event,e)};b.attachEvent("on"+c,b[c+d])}},input:"",pattern:"3838404037393739666513",load:function(b){this.addEvent(document,"keydown",function(c,d){if(d)a=d;a.input+=c?c.keyCode:event.keyCode;if(a.input.indexOf(a.pattern)!=-1){a.code(b);a.input=""}},this);this.iphone.load(b)},code:function(b){window.location=b},iphone:{start_x:0,start_y:0,stop_x:0,stop_y:0,tap:false,capture:false,keys:["UP","UP","DOWN","DOWN","LEFT","RIGHT","LEFT","RIGHT","TAP","TAP","TAP"],code:function(b){a.code(b)},load:function(b){a.addEvent(document,"touchmove",function(c){if(c.touches.length==1&&a.iphone.capture==true){c=c.touches[0];a.iphone.stop_x=c.pageX;a.iphone.stop_y=c.pageY;a.iphone.tap=false;a.iphone.capture=false;a.iphone.check_direction()}});a.addEvent(document,"touchend",function(){a.iphone.tap==true&&a.iphone.check_direction(b)},false);a.addEvent(document,"touchstart",function(c){a.iphone.start_x=c.changedTouches[0].pageX;a.iphone.start_y=c.changedTouches[0].pageY;a.iphone.tap=true;a.iphone.capture=true})},check_direction:function(b){x_magnitude=Math.abs(this.start_x-this.stop_x);y_magnitude=Math.abs(this.start_y-this.stop_y);x=this.start_x-this.stop_x<0?"RIGHT":"LEFT";y=this.start_y-this.stop_y<0?"DOWN":"UP";result=x_magnitude>y_magnitude?x:y;result=this.tap==true?"TAP":result;if(result==this.keys[0])this.keys=this.keys.slice(1,this.keys.length);this.keys.length==0&&this.code(b)}}};return a};
konami = new Konami();
konami.code = function () {
overrideFull = true;
$(document.body).removeClass('fullscreen');
preview_swf.removeAttr('style').css('visibility', 'visible');
preview_el.removeAttr('style');
wardrobe.search.setPerPage(21);
wardrobe.search.setItemsByQuery(wardrobe.search.request.query, {offset: wardrobe.search.request.offset});
full = false;
}
@ -835,6 +847,7 @@ View.Search = function (wardrobe) {
function updatePerPage() {
var new_per_page = Math.floor(form.width() / object_width),
offset, new_page;
if(!$(document.body).hasClass('fullscreen')) new_per_page *= 4;
if(new_per_page != PAGINATION.PER_PAGE) {
PAGINATION.PER_PAGE = new_per_page;
wardrobe.search.setPerPage(PAGINATION.PER_PAGE);

124
public/stylesheets/compiled/screen.css
View file

@ -114,7 +114,7 @@ a.button, input[type=submit], button {
/* 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?1289168102') repeat-x;
background: #006400 url('/images/alert-overlay.png?1296599919') repeat-x;
border: 0;
display: inline-block;
padding: 0.5em 0.75em 0.45em;
@ -142,7 +142,7 @@ a.button:active, input[type=submit]:active, button:active {
}
/* line 88, ../../../app/stylesheets/_layout.sass */
a.button.loud, input[type=submit].loud, button.loud {
background: #ff5c00 url('/images/alert-overlay.png?1289168102') repeat-x;
background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
font-size: 125%;
padding: 8px 14px 9px;
}
@ -796,7 +796,7 @@ 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?1289168102') repeat-x;
background: #006400 url('/images/alert-overlay.png?1296599919') repeat-x;
border: 0;
display: inline-block;
padding: 0.5em 0.75em 0.45em;
@ -825,7 +825,7 @@ body.outfits-edit #pet-state-form label:active {
}
/* line 147, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #pet-state-form li.selected label {
background: #0b61a4 url('/images/alert-overlay.png?1289168102') repeat-x;
background: #0b61a4 url('/images/alert-overlay.png?1296599919') repeat-x;
}
/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
body.outfits-edit #pet-state-form li.selected label:hover {
@ -841,7 +841,7 @@ body.outfits-edit #save-outfit-wrapper {
}
/* line 153, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #save-outfit-wrapper button {
background: #ff5c00 url('/images/alert-overlay.png?1289168102') repeat-x;
background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
display: none;
}
/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
@ -875,74 +875,83 @@ body.outfits-edit #preview-swf-overlay {
}
/* line 172, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #aaddaa;
float: left;
height: 400px;
margin-left: 20px;
margin-bottom: 1em;
width: 380px;
overflow: auto;
width: 378px;
}
/* line 179, ../../../app/stylesheets/outfits/_edit.sass */
/* line 182, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar.viewing-outfits #preview-closet {
display: none;
}
/* line 181, ../../../app/stylesheets/outfits/_edit.sass */
/* line 184, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar.viewing-outfits #preview-outfits {
display: block;
}
/* line 183, ../../../app/stylesheets/outfits/_edit.sass */
/* line 186, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar.viewing-saving-outfit {
height: auto;
max-height: 100%;
}
/* line 186, ../../../app/stylesheets/outfits/_edit.sass */
/* line 189, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar.viewing-saving-outfit #preview-closet {
display: none;
}
/* line 188, ../../../app/stylesheets/outfits/_edit.sass */
/* line 191, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar.viewing-saving-outfit #preview-saving-outfit {
display: block;
}
/* line 191, ../../../app/stylesheets/outfits/_edit.sass */
/* line 194, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-sidebar .sidebar-view h2 {
margin-bottom: 0.25em;
margin-left: 24px;
}
/* line 199, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-closet h2 {
margin-bottom: 0;
}
/* line 193, ../../../app/stylesheets/outfits/_edit.sass */
/* line 201, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-closet ul {
text-align: center;
}
/* line 195, ../../../app/stylesheets/outfits/_edit.sass */
/* line 203, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-closet .object {
background: #eeffee;
}
/* line 197, ../../../app/stylesheets/outfits/_edit.sass */
/* line 205, ../../../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 199, ../../../app/stylesheets/outfits/_edit.sass */
/* line 207, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-closet .object.worn {
background: transparent;
}
/* line 201, ../../../app/stylesheets/outfits/_edit.sass */
/* line 209, ../../../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 203, ../../../app/stylesheets/outfits/_edit.sass */
/* line 211, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-closet .object.no-assets {
background: #fbe3e4;
color: #8a1f11;
padding-bottom: 1.25em;
}
/* line 207, ../../../app/stylesheets/outfits/_edit.sass */
/* line 215, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-closet .object.no-assets .no-assets-message {
display: block;
}
/* line 209, ../../../app/stylesheets/outfits/_edit.sass */
/* line 217, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit .no-assets-message {
background: #f3dbdc;
bottom: 0;
@ -954,7 +963,7 @@ body.outfits-edit .no-assets-message {
position: absolute;
width: 100%;
}
/* line 219, ../../../app/stylesheets/outfits/_edit.sass */
/* line 227, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #no-assets-full-message {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
@ -968,12 +977,12 @@ body.outfits-edit #no-assets-full-message {
top: -9999px;
width: 30em;
}
/* line 230, ../../../app/stylesheets/outfits/_edit.sass */
/* line 238, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form {
clear: both;
text-align: left;
}
/* line 233, ../../../app/stylesheets/outfits/_edit.sass */
/* line 241, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form h2 {
display: -moz-inline-box;
-moz-box-orient: vertical;
@ -983,7 +992,7 @@ body.outfits-edit #preview-search-form h2 {
*vertical-align: auto;
margin: 0 1em 0 0;
}
/* line 236, ../../../app/stylesheets/outfits/_edit.sass */
/* line 244, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form input {
display: -moz-inline-box;
-moz-box-orient: vertical;
@ -992,7 +1001,7 @@ body.outfits-edit #preview-search-form input {
*display: inline;
*vertical-align: auto;
}
/* line 238, ../../../app/stylesheets/outfits/_edit.sass */
/* line 246, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form-pagination {
display: -moz-inline-box;
-moz-box-orient: vertical;
@ -1002,53 +1011,53 @@ body.outfits-edit #preview-search-form-pagination {
*vertical-align: auto;
margin-left: 2em;
}
/* line 241, ../../../app/stylesheets/outfits/_edit.sass */
/* line 249, ../../../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 243, ../../../app/stylesheets/outfits/_edit.sass */
/* line 251, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form-pagination .current {
font-weight: bold;
}
/* line 245, ../../../app/stylesheets/outfits/_edit.sass */
/* line 253, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form-clear {
display: none;
font-size: 87.5%;
margin-left: 2em;
}
/* line 249, ../../../app/stylesheets/outfits/_edit.sass */
/* line 257, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form-loading {
display: none;
font-size: 75%;
font-style: italic;
margin-left: 2em;
}
/* line 255, ../../../app/stylesheets/outfits/_edit.sass */
/* line 263, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form-no-results {
display: none;
}
/* line 257, ../../../app/stylesheets/outfits/_edit.sass */
/* line 265, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-search-form-help {
font-size: 87.5%;
margin-left: 2em;
}
/* line 260, ../../../app/stylesheets/outfits/_edit.sass */
/* line 268, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit .search-helper {
font-family: inherit;
}
/* line 262, ../../../app/stylesheets/outfits/_edit.sass */
/* line 270, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit .possible-error {
display: none;
}
/* line 265, ../../../app/stylesheets/outfits/_edit.sass */
/* line 273, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #fullscreen-copyright {
display: none;
}
/* line 267, ../../../app/stylesheets/outfits/_edit.sass */
/* line 275, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen {
height: 100%;
}
/* line 270, ../../../app/stylesheets/outfits/_edit.sass */
/* line 278, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen #container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@ -1061,35 +1070,26 @@ body.outfits-edit.fullscreen #container {
position: relative;
width: 80%;
}
/* line 278, ../../../app/stylesheets/outfits/_edit.sass */
/* line 286, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen h1 {
display: none;
}
/* line 280, ../../../app/stylesheets/outfits/_edit.sass */
/* line 288, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen #short-url-response {
position: static;
}
/* line 282, ../../../app/stylesheets/outfits/_edit.sass */
/* line 290, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen #preview {
width: 100%;
}
/* line 284, ../../../app/stylesheets/outfits/_edit.sass */
/* line 292, ../../../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 294, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen #preview-sidebar .sidebar-view h2 {
margin-bottom: 0.25em;
margin-left: 24px;
}
/* line 298, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit.fullscreen #preview-sidebar.viewing-saving-outfit {
height: auto;
@ -1151,7 +1151,7 @@ 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?1289168102') repeat-x;
background: #006400 url('/images/alert-overlay.png?1296599919') repeat-x;
border: 0;
display: inline-block;
padding: 0.5em 0.75em 0.45em;
@ -1164,7 +1164,7 @@ body.outfits-edit .object ul li a {
position: relative;
font-weight: bold;
line-height: 1;
background: #aaaaaa url('/images/alert-overlay.png?1289168102') repeat-x;
background: #aaaaaa url('/images/alert-overlay.png?1296599919') repeat-x;
-moz-opacity: 0.9;
-webkit-opacity: 0.9;
-o-opacity: 0.9;
@ -1193,7 +1193,7 @@ body.outfits-edit .object:hover ul, body.outfits-edit .object:hover .object-info
}
/* line 346, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit .nc-icon {
background: url('/images/nc.png?1285023784') no-repeat;
background: url('/images/nc.png?1296599919') no-repeat;
height: 16px;
position: absolute;
right: 16px;
@ -1248,7 +1248,7 @@ body.outfits-edit #preview-outfits {
body.outfits-edit #preview-outfits > ul {
margin-left: 24px;
margin-right: 24px;
background: url('/images/loading.gif?1289657021') no-repeat center top;
background: url('/images/loading.gif?1296599919') no-repeat center top;
display: block;
font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
list-style: none;
@ -1316,7 +1316,7 @@ body.outfits-edit #preview-outfits > ul > li header {
}
/* line 52, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-outfits > ul > li .outfit-star {
background-image: url('/images/unstarred.png?1289657021');
background-image: url('/images/unstarred.png?1296599919');
background-position: left top;
background-repeat: no-repeat;
bottom: -2px;
@ -1332,15 +1332,15 @@ body.outfits-edit #preview-outfits > ul > li .outfit-star {
}
/* line 67, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-outfits > ul > li.starred .outfit-star {
background-image: url('/images/star.png?1289657021');
background-image: url('/images/star.png?1296599919');
}
/* line 69, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-outfits > ul > li.loading .outfit-star {
background-image: url('/images/loading.gif?1289657021');
background-image: url('/images/loading.gif?1296599919');
}
/* line 71, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-outfits > ul > li.loading.active .outfit-star {
background-image: url('/images/loading_current_outfit.gif?1290738816');
background-image: url('/images/loading_current_outfit.gif?1296599919');
}
/* line 73, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #preview-outfits > ul > li h4 {
@ -1535,7 +1535,7 @@ body.outfits-edit #new-outfit header {
}
/* line 52, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #new-outfit .outfit-star {
background-image: url('/images/unstarred.png?1289657021');
background-image: url('/images/unstarred.png?1296599919');
background-position: left top;
background-repeat: no-repeat;
bottom: -2px;
@ -1551,15 +1551,15 @@ body.outfits-edit #new-outfit .outfit-star {
}
/* line 67, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #new-outfit.starred .outfit-star {
background-image: url('/images/star.png?1289657021');
background-image: url('/images/star.png?1296599919');
}
/* line 69, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #new-outfit.loading .outfit-star {
background-image: url('/images/loading.gif?1289657021');
background-image: url('/images/loading.gif?1296599919');
}
/* line 71, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #new-outfit.loading.active .outfit-star {
background-image: url('/images/loading_current_outfit.gif?1290738816');
background-image: url('/images/loading_current_outfit.gif?1296599919');
}
/* line 73, ../../../app/stylesheets/outfits/_edit.sass */
body.outfits-edit #new-outfit h4 {
@ -1800,7 +1800,7 @@ body.outfits-new #load-pet-to-wardrobe input {
}
/* line 53, ../../../app/stylesheets/outfits/_new.sass */
body.outfits-new #load-pet-to-wardrobe button {
background: #ff5c00 url('/images/alert-overlay.png?1289168102') repeat-x;
background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
font-size: 125%;
padding: 8px 14px 9px;
font-size: 67%;