diff --git a/app/assets/javascripts/outfits/edit.js b/app/assets/javascripts/outfits/edit.js index 7eb39448..e40a97de 100644 --- a/app/assets/javascripts/outfits/edit.js +++ b/app/assets/javascripts/outfits/edit.js @@ -144,7 +144,7 @@ View.Fullscreen = function (wardrobe) { preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'), sidebar_content_el = $('#preview-sidebar-content'), sidebar_navbar_el = $('#preview-sidebar-navbar'), footer = $('#footer'), - jwindow = $(window), overrideFull = false; + container = $('#container'), jwindow = $(window), overrideFull = false; function fit() { if(!overrideFull) { @@ -162,10 +162,13 @@ View.Fullscreen = function (wardrobe) { if(full) { preview_swf = $('#preview-swf'); // swf replaced + var searchTop = footer.offset().top; + if (search_el.is(':visible')) searchTop -= search_el.outerHeight(true); + var sidebarWidth = sidebar_el.is(':visible') ? + sidebar_el.outerWidth(true) : 0; var available = { - height: search_el.offset().top - - parseInt(search_el.css('marginTop'), 10) - preview_el.offset().top, - width: preview_el.innerWidth() - sidebar_el.outerWidth() - 12 // 12px margin + height: searchTop - preview_el.offset().top, + width: preview_el.innerWidth() - sidebarWidth }, dim = {}, margin = {}, size = { old: {height: preview_swf.height(), width: preview_swf.width()}, next: {} @@ -203,6 +206,12 @@ View.Fullscreen = function (wardrobe) { win.resize(fit).load(fit); fit(); + + $('#toggle-big-picture').click(function(e) { + e.preventDefault(); + $(document.body).toggleClass('big-picture'); + fit(); + }); } View.Hash = function (wardrobe) { diff --git a/app/assets/stylesheets/outfits/_edit.sass b/app/assets/stylesheets/outfits/_edit.sass index 580fe006..1a4f8495 100644 --- a/app/assets/stylesheets/outfits/_edit.sass +++ b/app/assets/stylesheets/outfits/_edit.sass @@ -168,7 +168,7 @@ body.outfits-edit button font-size: 75% width: 100% - #preview-mode-note, #report-broken-image + #toggle-big-picture, #preview-mode-note, #report-broken-image display: block font-size: 75% margin-top: .5em @@ -337,6 +337,9 @@ body.outfits-edit .possible-error @extend .error display: none + &.big-picture + #preview-toolbar, #preview-sidebar, #preview-search + display: none &.fullscreen $fullscreen-search-border: 1px 1px 0 height: 100% diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index 4e4883f1..a8732244 100644 --- a/app/views/outfits/edit.html.haml +++ b/app/views/outfits/edit.html.haml @@ -34,6 +34,8 @@ %ul#preview-mode-toggle %li#preview-mode-flash.active= t '.preview.mode.flash.name' %li#preview-mode-image= t '.preview.mode.image.name' + = link_to t('.preview.big_picture'), 'javascript:void(0)', + id: 'toggle-big-picture' = link_to t('.preview.mode.image.faq'), image_mode_path, :id => 'preview-mode-note', :target => '_blank' = link_to t('.preview.mode.image.report_broken'), '#', diff --git a/config/locales/en.yml b/config/locales/en.yml index e17d311e..21e6b3a7 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -551,6 +551,7 @@ en: preview: requirements: Flash and Javascript (but not Java!) are required to preview outfits. + big_picture: Big Picture mode: flash: name: Flash