From 4ad806847b55e7ad883cfce3a4a1dce894afcfd1 Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 2 Apr 2014 13:54:27 -0500 Subject: [PATCH] switch between basic and advanced forms --- app/assets/javascripts/outfits/edit.js | 11 +++- app/assets/stylesheets/outfits/_edit.sass | 75 ++++++++++++++--------- app/views/outfits/edit.html.haml | 38 +++++++----- 3 files changed, 75 insertions(+), 49 deletions(-) diff --git a/app/assets/javascripts/outfits/edit.js b/app/assets/javascripts/outfits/edit.js index d0668078..2be4b368 100644 --- a/app/assets/javascripts/outfits/edit.js +++ b/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) { diff --git a/app/assets/stylesheets/outfits/_edit.sass b/app/assets/stylesheets/outfits/_edit.sass index 45441089..d1b868fc 100644 --- a/app/assets/stylesheets/outfits/_edit.sass +++ b/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 diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index c9b91b1f..2922cc85 100644 --- a/app/views/outfits/edit.html.haml +++ b/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 - %header - %h2= t '.search.header' - %input{:name => "query", :placeholder => t('.search.form.query_placeholder'), :type => "search"}/ - %input{:type => "submit", :value => t('.search.form.submit')}/ - %a.preview-search-form-your-items{:href => '#', 'data-search-value' => 'owns'} - = closet_lists_group_name :you, true - %a.preview-search-form-your-items{:href => '#', 'data-search-value' => 'wants'} - = closet_lists_group_name :you, false - #preview-search-form-pagination - %a#preview-search-form-clear{:href => "#"}= t '.search.form.clear' - #preview-search-form-help + #preview-search + %form#preview-search-basic + %header + %h2= t '.search.header' + %input{:name => "query", :placeholder => t('.search.form.query_placeholder'), :type => "search"}/ + %input{:type => "submit", :value => t('.search.form.submit')}/ + -# TODO: i18n + %a#preview-search-advanced-link{href: 'javascript:void(0)'} Advanced Search + #preview-search-form-pagination + %a#preview-search-form-clear{:href => "#"}= t '.search.form.clear' + #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 + %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'}