adding styles to hide and show buttons to collapse the search menu in mobile views

diff --git a/css/front.css b/css/front.css
index 32dd68c..f7c2dc3 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -25,12 +25,6 @@
  .search-sidebar-container{
         clear: both;
     }
-    .results-container{
-        padding: 0;
-    }
-    .search-sidebar-container{
-        padding: 0;
-    }
 }
 .search-label{
     font-size: 13px;
@@ -63,13 +57,19 @@
 /*    width: 50%;*/
     margin: 0 auto;
 }
+
 .search-container input, .search-container select{
-    margin: 5px 0;
+    margin: 5px auto;
 }
 .search-container div{
     margin: 0;
     padding: 0 10px;
 }
+@media(max-width: 1024px){
+    .sidebar-container{
+        display: none;
+    }
+}
 .options-wrapper{
     display: none;
 }
@@ -99,7 +99,8 @@
     font-weight: bold;
 }
 .search-container .results-limit-container {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
+    margin-top: 10px;
     text-align: center;
 }
 .search-container .results-limit-container input:nth-child(2){
@@ -140,7 +141,7 @@ input.sidebar-criteria{
     margin-top: 7px;
 }
 .search-input input, .search-input select{
-    max-width: 320px;
+/*    max-width: 320px;*/
 }
 .search-input select{
 /*    max-width: 222px;*/
@@ -172,4 +173,21 @@ input.sidebar-criteria{
 .no-results{
     font-weight: bold;
     text-align: center;
+}
+
+.search-container .search-options{
+    margin-top: 10px;
+}
+@media(max-width: 640px){
+    .not-input, .logic-input{
+        display: none;
+    }
+}
+.show-search{
+    background: #a62800;
+    color: white;
+    text-align: center;
+    padding: 5px 0;
+    margin: 5px 0 5px 15px;
+    width: 150px;
 }
\ No newline at end of file

diff --git a/js/front.js b/js/front.js
index 9f8c19f..742a93c 100644 (file)
--- a/js/front.js
+++ b/js/front.js
@@ -9,7 +9,21 @@ $(document).ready(function(){
         e.preventDefault();
         $('.options-wrapper').slideToggle(500, function () {});
     });
-
+    
+    $(".expand-collapse-main").on("click", function(e){
+        if( $(this).text() === "Show Options" ){
+           $(this).text("Hide Options");
+        } else if( $(this).text() === "Hide Options" ){
+            $(this).text("Show Options");
+        }
+         e.preventDefault();
+        
+        if( $(window).width() < 640 ){
+            $('.not-input').slideToggle(400);
+            $('.logic-input').slideToggle(400);
+        }
+    });
+    
     $('.obits-link').on("click", function(){
        $('#obits-search').submit(); 
     });
@@ -20,6 +34,11 @@ $(document).ready(function(){
         console.log("test");
     });
     
+    if( $(window).width() < 1024 ){
+        $('.show-search').on("click", function(){
+            $('.sidebar-container').slideToggle(500) ;
+        });
+    }
     
     $('#results-limit').on('change', function(){
 //        $('#obits-search').submit(); 

diff --git a/models/front/obits/search.php b/models/front/obits/search.php
index 8840390..89e8fdf 100644 (file)
--- a/models/front/obits/search.php
+++ b/models/front/obits/search.php
@@ -95,7 +95,7 @@ class GlmMembersFront_obits_search extends GlmDataObits
         $this->table = GLM_MEMBERS_OBITS_PLUGIN_DB_PREFIX . 'obits';
         
         $view = 'search';
-        
+        $placeholders = array('Last Name', 'First Middle', 'Birth Year', 'Death Year', 'Maiden or Other Name', 'Spouse or Partner Name');
         
         $year_ranges        = new glmObitSupportFunctions($this->wpdb, $this->config);
         $birth_death_range  = array('birth' => $year_ranges->getObitYearRange(BIRTH_YEAR_START), 'death' => $year_ranges->getObitYearRange(DEATH_YEAR_START));
@@ -109,7 +109,7 @@ class GlmMembersFront_obits_search extends GlmDataObits
    
             $form_data = $_POST;
 
-            // build array of potential search fields , will be used in the paging urls
+            // build array of potential search fields , will be used in the paging url
             $form_fields = array(
                 'last'          => filter_var($form_data['last_name'],FILTER_SANITIZE_STRING), 
                 'first'         => filter_var($form_data['first_mid'],FILTER_SANITIZE_STRING), 
@@ -120,7 +120,13 @@ class GlmMembersFront_obits_search extends GlmDataObits
                 'spouse'        => filter_var($form_data['spouse_partner'],FILTER_SANITIZE_STRING), 
                 'maiden'        => filter_var($form_data['maiden_other'],FILTER_SANITIZE_STRING)
             );
-
+            
+            //clear the placeholder values from the jquery html input fix
+            foreach($form_fields as $field=>$f){
+                if( in_array($f, $placeholders) ){
+                    $form_fields[$field] = '';
+                }
+            }
             $get_fields = array(
                 'last_name'         => filter_var($_GET['last'],FILTER_SANITIZE_STRING), 
                 'first_mid'         => filter_var($_GET['first'],FILTER_SANITIZE_STRING), 
@@ -145,7 +151,7 @@ class GlmMembersFront_obits_search extends GlmDataObits
 
             // separate the search fields from the logic ('not', 'contains, 'equals') etc.
             foreach($form_data as $key=>$value){
-                if (isset($value) && $value !== ''){
+                if (isset($value) && $value !== '' && !in_array($value,$placeholders) ){
                     if( $value !== 'Search' && $key !== 'conditions' && $key !== 'results-limit'){
                         if(strpos($key,'-logic') === false && strpos($key,'not-') === false  ) {
                             $value = filter_var($value, FILTER_SANITIZE_STRING);
@@ -167,7 +173,6 @@ class GlmMembersFront_obits_search extends GlmDataObits
                 }
             }
 
-
             // check to see if there are 8 empty values, if there are, there are no search values
             if(count($empty_values) === 8){
                 $empty_search = 'true';
@@ -229,7 +234,8 @@ class GlmMembersFront_obits_search extends GlmDataObits
                
                  $where = $search;
             }
-
+            
+                
             // begin paging 
             if (isset($_REQUEST['pageSelect'])) {
 
@@ -246,7 +252,7 @@ class GlmMembersFront_obits_search extends GlmDataObits
                     $start = $newStart;
                 }
             }
-
+      
             $obits = $this->getList($where, 'last_name', $fieldVals = true, $idField = 'id', $start, $per_page);
 
             $returned = $obits['returned'];

diff --git a/views/front/obits/search.html b/views/front/obits/search.html
index 29f251f..fcb426d 100644 (file)
--- a/views/front/obits/search.html
+++ b/views/front/obits/search.html
@@ -3,8 +3,12 @@
         <form action="{$thisUrl}" method="post" enctype="multipart/form-data" name="obits-search" id="obits-search">
             
            <div class="results-limit-container">
-                <input type="radio" checked value="all" name="conditions[]">All Conditions
-                <input type="radio" value="any" name="conditions[]">Any Condition
+                <input class="condition-all-main" type="radio" checked value="all" name="conditions[]">All Conditions
+                <input class="condition-any-main" type="radio" value="any" name="conditions[]">Any Condition
+                <div class="search-options show-for-small-only">
+                    <a href="#" class="expand-collapse-main">Show Options</a>
+                </div>
+                 
            </div>
 
             <div class="row search-row">

diff --git a/views/front/obits/searchResults.html b/views/front/obits/searchResults.html
index 9e32bb8..08cb64c 100644 (file)
--- a/views/front/obits/searchResults.html
+++ b/views/front/obits/searchResults.html
@@ -1,5 +1,6 @@
 <div class="row">
     <form action="{$thisUrl}" method="post" enctype="multipart/form-data" name="obits-search" id="obits-search">
+      <div class="show-search small-3 columns show-for-medium-down">Show Search</div>
        <div class="small-12 large-3 columns small-centered large-uncentered search-sidebar-container">
             <div class="search-sidebar">
     <!--            {include file='front/obits/search.html'}-->
@@ -7,13 +8,15 @@
                     <div class="small-12 columns">
                        <input class="sidebar-criteria" type="radio" checked value="all" name="conditions[]">All 
                        <input class="sidebar-criteria" type="radio" value="any" name="conditions[]">Any 
-                       <a href="#" class="expand-collapse">Show Options</a>
+                   
+                           <a href="#" class="expand-collapse">Show Options</a>
+             
                         <div class="row search-row">
                             <div class="small-12 columns search-label hide "> 
                                 Last Name: 
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                 <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-last">Not</label>
                                    <input type="checkbox" value="not" id="not-last" name="not-last_name">
                                 </div>
@@ -26,7 +29,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="small-12 columns">
+                            <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
                                 <input {if $get_params.last}value="{$get_params.last}"{/if}{if $search.last}value="{$search.last}"{/if} type="text" name="last_name" placeholder="Last Name">
                             </div>
                         </div>
@@ -37,7 +40,7 @@
                                 First Name &amp; Middle: 
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper not-wrapper columns">
+                                <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-first_mid">Not</label>
                                    <input type="checkbox" value="not" id="not-first_mid" name="not-first_mid">
                                 </div>
@@ -50,8 +53,8 @@
                                     </select>
                                 </div>
                            </div>     
-                           <div class="small-12 columns">
-                               <input {if $get_params.first}value="{$get_params.first}"{/if}{if $search.first}value="{$search.first}"{/if} type="text" name="first_mid" placeholder="First - Middle Name">
+                           <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
+                               <input {if $get_params.first}value="{$get_params.first}"{/if}{if $search.first}value="{$search.first}"{/if} type="text" name="first_mid" placeholder="First Middle">
                             </div>
                         </div>
 
@@ -61,7 +64,7 @@
                                 Birth Year: 
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                 <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-b_year">Not</label>
                                    <input type="checkbox" value="not" id="not-b_year" name="not-b_year">
                                 </div>
@@ -74,8 +77,8 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="small-12 columns">
-                                <input {if $get_params.b_yr}value="{$get_params.b_yr}"{/if}{if $search.b_yr}value="{$search.b_yr}"{/if} type="text" name="b_year" placeholder="Year of Birth">
+                            <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
+                                <input {if $get_params.b_yr}value="{$get_params.b_yr}"{/if}{if $search.b_yr}value="{$search.b_yr}"{/if} type="text" name="b_year" placeholder="Birth Year">
                             </div>
                         </div>
 
@@ -85,7 +88,7 @@
                                 Birth Year Range:
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                 <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-b_yr_range">Not</label>
                                    <input type="checkbox" value="not" id="not-b_yr_range" name="not-b_yr_range">
                                 </div>
@@ -96,7 +99,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="small-12 columns">
+                            <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
                                <select name="b_yr_range" id="">
                                <option value="">Select Birth Year Range</option>
                                 {foreach from=$birth_death_range.birth item=r}
@@ -112,7 +115,7 @@
                                 Death Year: 
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                 <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-death">Not</label>
                                    <input type="checkbox" value="not" id="not-death" name="not-d_year">
                                 </div>
@@ -125,8 +128,8 @@
                                     </select>
                                 </div>
                             </div>    
-                           <div class="small-12 columns">
-                                <input }{if $search.d_yr}value="{$search.d_yr}"{/if} type="text" name="d_year" placeholder="Year of Death">
+                           <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
+                                <input }{if $search.d_yr}value="{$search.d_yr}"{/if} type="text" name="d_year" placeholder="Death Year">
                             </div>
                         </div>
 
@@ -136,7 +139,7 @@
                                Death Year Range: 
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                 <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-d_yr_range">Not</label>
                                    <input type="checkbox" value="not" id="not-d_yr_range" name="not-d_yr_range">
                                 </div>
@@ -147,7 +150,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="small-12 columns">
+                            <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
                                 <select name="d_yr_range" id="d_yr_range-range">
                                 <option value="">Select Death Year Range</option>
                                 {foreach from=$birth_death_range.death item=r}
@@ -163,7 +166,7 @@
                                 Maiden or Other Name:
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                 <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-maiden_other">Not</label>
                                    <input type="checkbox" value="not" id="not-maiden" name="not-maiden_other">
                                 </div>
@@ -176,8 +179,8 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="small-12 columns">
-                                <input {if $search.maiden}value="{$search.maiden}"{/if} type="text" name="maiden_other" placeholder="Maiden or Other">
+                            <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
+                                <input {if $search.maiden}value="{$search.maiden}"{/if} type="text" name="maiden_other" placeholder="Maiden or Other Name">
                             </div>
                         </div>
 
@@ -187,7 +190,7 @@
                                 Spouse / Partner Name: 
                             </div>
                             <div class="options-wrapper">
-                                <div class="small-3 large-4 not-wrapper columns">
+                                <div class="small-offset-1 small-3 medium-offset-2 large-offset-0 large-4 not-wrapper columns">
                                    <label for="not-spouse_partner">Not</label>
                                    <input type="checkbox" value="not" value="not" id="not-spouse" name="not-spouse_partner">
                                 </div>
@@ -200,8 +203,8 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="small-12 columns">
-                                <input {if $get_params.spouse}value="{$get_params.spouse}"{/if}{if $search.spouse}value="{$search.spouse}"{/if} type="text" name="spouse_partner" placeholder="Spouse or Partner">
+                            <div class="small-offset-1 small-10 medium-offset-2 medium-7 large-offset-0 large-12 columns">
+                                <input {if $get_params.spouse}value="{$get_params.spouse}"{/if}{if $search.spouse}value="{$search.spouse}"{/if} type="text" name="spouse_partner" placeholder="Spouse or Partner Name">
                             </div>
                         </div>
                         <div class="search-btn-container">
@@ -270,17 +273,32 @@
 </div>
 <script type="text/javascript">
     jQuery(document).ready(function($) {
-        var results_limit = {$limit};
+        var results_limit = {$limit},
+            alpha         = '{$alpha_key}' ;
         
-        var alpha         = '{$alpha_key}' ;
         $('.glm-alpha-link').each(function(){
             if( $(this).text() === alpha){
                 $(this).addClass("selected-alpha");
             }
         });
         
+        $('#results-limit').val(results_limit);
         
-        
+        // fixes placeholder problem cross browser
+        $('[placeholder]').focus(function() {
+              var input = $(this);
+              if (input.val() == input.attr('placeholder')) {
+                input.val('');
+                input.removeClass('placeholder');
+              }
+         }).blur(function() {
+              var input = $(this);
+              if (input.val() == '' || input.val() == input.attr('placeholder')) {
+                input.addClass('placeholder');
+                input.val(input.attr('placeholder'));
+              }
+         }).blur();
+
         $('#results-limit').val(results_limit);
     });
 </script>
\ No newline at end of file