big picture mode

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) {

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%

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'), '#',

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