switch between basic and advanced forms

app/assets/javascripts/outfits/edit.js

@@ -140,7 +140,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_el = $('#preview'), search_el = $('#preview-search'),
     preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'),
     sidebar_content_el = $('#preview-sidebar-content'),
     sidebar_navbar_el = $('#preview-sidebar-navbar'), footer = $('#footer'),
@@ -1071,7 +1071,7 @@ View.ReportBrokenImage = function (wardrobe) {
 }
 
 View.Search = function (wardrobe) {
-  var form_selector = '#preview-search-form', form = $(form_selector),
+  var form_selector = '#preview-search-basic', form = $(form_selector),
     item_set = new Partial.ItemSet(wardrobe, form_selector + ' ul'),
     input_el = form.find('input[name=query]'),
     clear_el = $('#preview-search-form-clear'),
@@ -1081,6 +1081,7 @@ View.Search = function (wardrobe) {
     no_results_el = $('#preview-search-form-no-results'),
     no_results_span = no_results_el.children('span'),
     your_items_links = $('.preview-search-form-your-items'),
+    wrapper = $('#preview-search'),
     PAGINATION = {
       INNER_WINDOW: 4,
       OUTER_WINDOW: 1,
@@ -1224,6 +1225,12 @@ View.Search = function (wardrobe) {
     stopLoading();
     error_el.text(error).show('normal');
   });
+
+  $('#preview-search-advanced-link, #preview-search-basic-link').click(function() {
+    var fit = $('#preview').data('fit') || $.noop;
+    wrapper.toggleClass('advanced');
+    fit();
+  });
 }
 
 View.PrankColorMessage = function(wardrobe) {

app/assets/stylesheets/outfits/_edit.sass

@@ -239,7 +239,7 @@ body.outfits-edit
     position: absolute
     top: -9999px
     width: 30em
-  #preview-search-form
+  #preview-search
     clear: both
     text-align: left
     h2
@@ -249,6 +249,47 @@ body.outfits-edit
       +inline-block
       &[type=submit]
         margin-right: 2em
+    &.advanced
+      #preview-search-basic
+        display: none
+      #preview-search-advanced
+        display: block
+  #preview-search-advanced
+    display: none
+    margin-left: 2em
+
+    button
+      margin-right: 2em
+
+    #preview-search-basic-link
+      font-size: 85%
+
+    div
+      +inline-block
+      font-size: 87.5%
+      vertical-align: top
+      width: 32%
+
+      li.text, li.select
+        label
+          +inline-block
+
+      li.checkbox
+        list-style: none
+        margin-left: -24px
+
+      &:nth-of-type(1)
+        li.text, li.select
+          label
+            width: 12em
+
+      &:nth-of-type(2)
+        li.text, li.select
+          label
+            width: 5em
+  #preview-search-advanced-link
+    font-size: 85%
+    margin-right: 1em
   .preview-search-form-your-items
     display: none
     font-size: 85%
@@ -271,9 +312,6 @@ body.outfits-edit
     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
@@ -302,36 +340,13 @@ body.outfits-edit
       &.viewing-saving-outfit
         height: auto
         max-height: 100%
-    #preview-search-form
+    #preview-search
       bottom: 1.5em
       left: 0
       overflow: auto
       padding: .5em 1em
       position: absolute
       width: 100%
-    #preview-search-form-help
-      div
-        +inline-block
-        vertical-align: top
-        width: 33%
-
-        li.text, li.select
-          label
-            +inline-block
-
-        li.checkbox
-          list-style: none
-          margin-left: -24px
-
-        &:nth-of-type(1)
-          li.text, li.select
-            label
-              width: 12em
-
-        &:nth-of-type(2)
-          li.text, li.select
-            label
-              width: 5em
     #footer
       bottom: 0
       left: 0
@@ -773,7 +788,7 @@ body.outfits-edit
     font: inherit
     line-height: 1
 
-  #pet-type-form, #pet-state-form, #preview-swf, #preview-search-form
+  #pet-type-form, #pet-state-form, #preview-swf, #preview-search
     position: relative
 
   .control-overlay
@@ -839,7 +854,7 @@ body.outfits-edit
   &.user-not-signed-in
     #save-outfit-not-signed-in
       display: inline-block
-    #preview-search-form-help
+    #preview-search-advanced
       .must-log-in
         color: #aca
 

app/views/outfits/edit.html.haml

@@ -92,18 +92,26 @@
               = t '.sidebar.sharing.formats.html'
             %li{'data-format' => 'bbcode'}
               =t '.sidebar.sharing.formats.bbcode'
-  %form#preview-search-form
+  #preview-search
-    %header
+    %form#preview-search-basic
-      %h2= t '.search.header'
+      %header
-      %input{:name => "query", :placeholder => t('.search.form.query_placeholder'), :type => "search"}/
+        %h2= t '.search.header'
-      %input{:type => "submit", :value => t('.search.form.submit')}/
+        %input{:name => "query", :placeholder => t('.search.form.query_placeholder'), :type => "search"}/
-      %a.preview-search-form-your-items{:href => '#', 'data-search-value' => 'owns'}
+        %input{:type => "submit", :value => t('.search.form.submit')}/
-        = closet_lists_group_name :you, true
+        -# TODO: i18n
-      %a.preview-search-form-your-items{:href => '#', 'data-search-value' => 'wants'}
+        %a#preview-search-advanced-link{href: 'javascript:void(0)'} Advanced Search
-        = closet_lists_group_name :you, false
+        #preview-search-form-pagination
-      #preview-search-form-pagination
+        %a#preview-search-form-clear{:href => "#"}= t '.search.form.clear'
-      %a#preview-search-form-clear{:href => "#"}= t '.search.form.clear'
+      #preview-search-form-loading= t '.search.loading'
-    #preview-search-form-help
+      #preview-search-form-error.possible-error
+      #preview-search-form-no-results
+        = t '.search.no_results_html', :query => content_tag(:span)
+      %ul
+    %form#preview-search-advanced
+      %header
+        %h2 Advanced Search
+        %button{type: 'submit'} Search, advancedly!
+        %a#preview-search-basic-link{href: 'javascript:void(0)'} Never mind.
       -# TODO: remove search.examples
       -# TODO: i18n
       -# TODO: hook up labels
@@ -151,11 +159,7 @@
           %li.checkbox.must-log-in
             %input{type: 'checkbox', id: 'advanced-search-wants', disabled: true}
             %label{for: 'advanced-search-wants'} Only include items I want
-    #preview-search-form-loading= t '.search.loading'
+
-    #preview-search-form-error.possible-error
-    #preview-search-form-no-results
-      = t '.search.no_results_html', :query => content_tag(:span)
-    %ul
   #no-assets-full-message= t '.sidebar.closet.no_data.description'
   
   %script#sharing-html-image-template{:type => 'text/x-jquery-tmpl'}