WordPress.org
Get WordPress

Plugin Directory

Changeset 3112748


Ignore:
Timestamp:
07/04/2024 06:51:20 PM (21 months ago)
Author:
webmaster85
Message:

Added improvements.

Location:
instant-search
Files:
35 added
7 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • instant-search/trunk/instant-search.php

    r3107173 r3112748  
    99 * Plugin URI: https://instant-search.net
    1010 * Description: A WordPress search plugin with live and voice search.
    11  * Version: 1.0.5
     11 * Version: 1.0.6
    1212 * Author: webmaster85
    1313 * Author URI: https://www.marincas.net
    … …  
    2525
    2626function instant_search_scripts() {
     27        wp_enqueue_script('jquery'); // Ensure jQuery is enqueued
    2728    wp_enqueue_script('instant_search', plugins_url('instant_search.js', __FILE__), array('jquery'), '1.0', true);
    2829    wp_enqueue_style('instant_search', plugins_url('instant_search.css', __FILE__));
    29     wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
    30     wp_localize_script('instant_search', 'instant_search', array('ajax_url' => admin_url('admin-ajax.php'), 'display_style' => get_option('instant_search_display_style', 'list')));
     30    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
     31    wp_localize_script('instant_search', 'instant_search', array(
     32        'ajax_url' => admin_url('admin-ajax.php'),
     33        'display_style' => get_option('instant_search_display_style', 'list'),
     34        'search_method' => get_option('instant_search_method', 'overlay')
     35    ));
    3136}
    3237
    … …  
    7075function instant_search_custom_styles() {
    7176    $search_form_width = get_option('instant_search_form_width', '300px');
     77     $search_form_width2 = get_option('instant_search_form_width2', '300px');
    7278    echo '<style>
    7379        .search-wrapper {
    7480            width: ' . esc_attr($search_form_width) . ';
    7581        }
     82        .search-wrapper2, input#s2 {
     83            width: ' . esc_attr($search_form_width2) . ';
     84        }
     85       
    7686    </style>';
    7787}
    … …  
    127137            update_option('instant_search_form_width', $search_form_width);
    128138        }
    129     }
    130      $post_types = get_option('instant_search_post_types', array('post', 'page'));
     139        if (isset($_POST['search_form_width2'])) {
     140            $search_form_width2 = sanitize_text_field($_POST['search_form_width2']);
     141            update_option('instant_search_form_width2', $search_form_width2);
     142        }
     143         if (isset($_POST['search_method'])) {
     144            $search_method = sanitize_text_field($_POST['search_method']);
     145            update_option('instant_search_method', $search_method);
     146        }
     147    }
     148    $post_types = get_option('instant_search_post_types', array('post', 'page'));
    131149    $display_style = get_option('instant_search_display_style', 'list');
    132150    $search_placeholder = get_option('instant_search_placeholder', 'What are we searching for today?');
    133151    $all_post_types = get_post_types(array('public' => true), 'names');
    134     $search_form_width = get_option('instant_search_form_width', '50%');
     152    $search_form_width = get_option('instant_search_form_width', '50%');
     153     $search_form_width2 = get_option('instant_search_form_width2', '50%');
     154    $search_method = get_option('instant_search_method', 'overlay'); // Ensure this line is added
    135155    ?>
    136156
    137157    <div class="wrapper">
    138     <h2 class="bigtitle">Instant Search Settings <button id="toggle-ads-button">Show Ads</button></h2> 
     158    <h1 class="bigtitle">Instant Search Plugin Settings <button id="toggle-ads-button">Show Ads</button></h1>   
    139159    <div id="toggle-ads">
    140160        <script>
    … …  
    164184        </a>   
    165185        </div>     
    166         </div> 
    167      <form method="post" action="">     
    168     <div class="articles"> 
    169   <article>
    170     <div class="article-wrapper">
    171     <h1>
    172       1
    173       </h1>
    174       <div class="article-body">
    175         <h2>Select the post types</h2>
    176         <p>
    177         Choose the types of posts you'd like the form to display results for. Each WordPress site, depending on the themes and plugins in use, may have various custom post types. These might include products, posts, pages, attachments, global sections, templates, etc. The plugin automatically detects all available post types, so you can get search results from any of them. Feel free to select multiple options.
    178         </p>
    179         <p>
     186        </div>     
     187       
     188     <form method="post" action="">         
     189      <div class="settings-wrapper">     
     190     <div class="toolkit"> 
     191     <ul>   
     192    <li class="search-method"> 
     193        <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/search-method.jpg', __FILE__)); ?>">       
     194        <h2>Search Method</h2>     
     195        <p>Select how do you want the form to behave, inline to display the search results right below the form, or overlay to display them in a large modal, all over the screen.</p>     
     196       <p class="search-method">
     197                    <select name="search_method">
     198                        <option value="overlay"<?php if ($search_method == 'overlay') echo ' selected'; ?>>Overlay</option>
     199                        <option value="inline"<?php if ($search_method == 'inline') echo ' selected'; ?>>Inline</option>
     200                    </select>
     201        </p>       
     202    </li>   
     203    <li class="post-types">       
     204        <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/post-types.jpg', __FILE__)); ?>">             
     205        <h2>Post Types</h2>     
     206        <p>Choose the types of posts you'd like the form to display results for. Feel free to select multiple options.</p>
     207        <p style="text-align:left;">
    180208        <?php foreach ($all_post_types as $post_type): ?>
    181209            <input type="checkbox" name="post_types[]" value="<?php echo esc_attr($post_type); ?>"<?php if (in_array($post_type, $post_types)) echo ' checked'; ?> /> <?php echo esc_html($post_type); ?><br />
    182210        <?php endforeach; ?>
    183         </p>       
    184       </div>
    185     </div>
    186   </article> 
    187    <article>
    188     <div class="article-wrapper">
    189     <h1>
    190       2
    191       </h1>
    192       <div class="article-body">
    193         <h2>Search results display</h2>
     211       </p>     
     212    </li>   
     213    <li class="results-display">   
     214       <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/results-display.jpg', __FILE__)); ?>">     
     215        <h2>Display</h2>       
    194216        <p>
    195           Depending on your choice here, your website visitors will see search results either in a grid (3 columns) or in a list format. The grid view is perfect for desktops, offering a visually appealing layout, while the list view is ideal for small screens like phones, ensuring better readability and easier navigation.
    196         </p> 
    197         <p class="display-styles">
    198         <select name="display_style">
     217           The grid is perfect for desktops, offering a visually appealing layout, while the list view is ideal for small screens like phones, ensuring better readability and easier navigation.
     218        </p>       
     219        <select name="display_style">
    199220            <option value="list"<?php if ($display_style == 'list') echo ' selected'; ?>>List</option>
    200             <option value="grid"<?php if ($display_style == 'grid') echo ' selected'; ?>>Grid (3 columns)</option>
    201         </select>
    202         </p>       
    203       </div>
    204     </div>
    205   </article> 
    206    <article>
    207     <div class="article-wrapper">
    208     <h1>
    209       3
    210       </h1>
    211       <div class="article-body">
    212         <h2>Placeholder text</h2>
    213         <p>
    214           In this field, you can set a personalized message that will be displayed inside the search form. The default is usually "Search..." but you have the flexibility to change it. For example, you could use "What are we searching for today?" or anything else that suits your needs.
    215         </p>
    216         <p class="placeholder-text">
    217         <input type="text" style="min-width:250px;" name="search_placeholder" value="<?php echo esc_attr($search_placeholder); ?>" />
    218         </p>       
    219       </div>
    220     </div>
    221   </article> 
    222    <article>
    223     <div class="article-wrapper">
    224     <h1>
    225       4
    226       </h1>
    227       <div class="article-body">
    228         <h2>Width</h2>
    229         <p>
    230           You can customize the width of the search form (the pop-up one) in this field. By default it's set to 300px, but you can change it to any CSS unit that suits your website's layout. For instance, you could use 50% for a responsive design, 300px for a fixed width, or 30vh to make it proportional to the viewport height.
    231         </p>       
    232         <p class="width-text">
    233             <input type="text" style="min-width:250px;" name="search_form_width" value="<?php echo esc_attr($search_form_width); ?>" placeholder="e.g., 50%, 300px, 30vh" />
    234         </p>
    235       </div>
    236     </div>
    237   </article> 
    238    <article>
    239     <div class="article-wrapper">
    240     <h1>
    241       5
    242       </h1>
    243       <div class="article-body">
    244         <h2>Shortcode</h2>
    245         <p>
     221            <option value="grid"<?php if ($display_style == 'grid') echo ' selected'; ?>>Grid</option>
     222        </select>       
     223    </li>   
     224    <li class="inline-width">   
     225        <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/inline-width.jpg', __FILE__)); ?>">       
     226        <h2>Inline Width</h2>       
     227        <p>Customize the width of the inline form. By default it's set to 300px, but you can change it to any CSS unit that suits your needs. You could use 50% for a responsive design, 300px for a fixed width, or 30vh to make it proportional to the viewport height.</p>     
     228            <input type="text" style="min-width:250px;" name="search_form_width2" value="<?php echo esc_attr($search_form_width2); ?>" placeholder="e.g., 50%, 300px, 30vh" />         
     229    </li>   
     230    <li class="overlay-width"> 
     231       <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/overlay-width.jpg', __FILE__)); ?>">       
     232        <h2>Overlay Width</h2>     
     233        <p>Customize the width of the overlay form. By default it's set to 300px, but you can change it to any CSS unit that suits your needs. You could use 50% for a responsive design, 300px for a fixed width, or 30vh to make it proportional to the viewport height.</p>       
     234            <input type="text" style="min-width:250px;" name="search_form_width" value="<?php echo esc_attr($search_form_width); ?>" placeholder="e.g., 50%, 300px, 30vh" />       
     235    </li>   
     236    <li class="placeholder-text">   
     237        <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/placeholder-text.jpg', __FILE__)); ?>">       
     238        <h2>Placeholder Text</h2>       
     239          <p>
     240          Set a personalized message that will be displayed inside the search form. The default is usually "Search..." but you have the flexibility to change it. For example, you could use "What are we searching for today?" or anything else that suits your needs.
     241        </p>       
     242      <input type="text" style="min-width:250px;" name="search_placeholder" value="<?php echo esc_attr($search_placeholder); ?>" />     
     243    </li>   
     244     <li class="the-shortcode">
     245        <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/the-shortcode.jpg', __FILE__)); ?>">       
     246        <h2>Shortcode</h2>     
     247          <p>
    246248          Use the shortcode to display a search form anywhere. Personally, I find it works best when placed in the website's header. It optimizes user experience and navigation, as it's a prime location for visitors to initiate searches, thus enhancing overall site usability.
    247         </p>      
    248         <h3 class="the-shortcode">
     249        </p>        
     250     <h2 class="the-shortcode">
    249251        [instant_search]
    250         </h3>
    251       </div>
    252     </div>
    253   </article> 
    254    <article>
    255     <div class="article-wrapper">
    256     <h1>
    257       6
    258       </h1>
    259       <div class="article-body">
    260         <h2>Donate</h2>
     252        </h2>       
     253    </li>   
     254         <li class="donate">   
     255        <img style="border:0px" src="<?php echo esc_url(plugins_url('/banner/donate.jpg', __FILE__)); ?>">     
     256        <h2>Donate</h2>     
    261257        <p>
    262258          I use the donations to improve the plugin. That could mean a variety of things. I mainly buy web development courses that let me upgrade my skills to understand the whole environment better, how the search works in-depth, and see the big picture.
    263         </p>   
    264             <p style="text-align:center;">
    265          <button class="donate-button" ><a href="https://instant-search.net/#donate" target="_blank">Donate here</a></button>
    266             </p>
    267       </div>
    268     </div>
    269   </article>
    270   </div>   
     259        </p>      
     260     <p style="margin-top:25px;">
     261        <a class="donate-button" href="https://instant-search.net/#donate" target="_blank">Donate here</a>
     262    </p>       
     263    </li>   
     264</ul>
     265     </div>
     266     </div>   
    271267     <p class="submit-changes">
    272268            <input type="submit" class="save-changes" value="Save Changes" />
    273         </p>   
     269     </p>          
    274270      </form>   
    275271</div>

  • instant-search/trunk/instant_search.css

    r3107189 r3112748  
    1111  width: -webkit-fill-available;
    1212}
     13
     14#search-results.grid .search-result img {   
     15    width: 100%;
     16   
     17}
     18#search-results {   
     19    display:none;
     20    width: 100%;
     21    max-width: 1100px;
     22    text-align:center;
     23    margin: auto;
     24    background: white;
     25    padding: 20px;
     26    overflow-y: auto;
     27    max-height: 80vh;
     28    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     29}
     30#search-results * {
     31    font-size:1em!important;
     32    line-height: 1em!important;
     33    color:#000000;
     34}
     35
     36#search-results a, .search-result a {
     37    font-weight:bold;
     38    font-size:1.15em;
     39}
     40
     41#search-results img {
     42    margin-bottom:10px;
     43   
     44}
     45
     46#search-results.inline {
     47    display: none;
     48    width: 100%;
     49    max-width: 1100px;
     50    margin: auto;
     51    background: white;
     52    padding: 20px;
     53    overflow-y: auto;
     54    max-height: 80vh;
     55    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     56    position: relative;
     57    z-index: 1000;
     58}
     59
     60#inline-search-results {
     61    display: none;
     62    width: inherit; /* Inherit the width of the parent container */
     63    background: white;
     64    text-align:center;
     65    padding: 0px;
     66    overflow-y: auto;
     67    max-height: 80vh;
     68    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     69    position: absolute;
     70    z-index: 1000;
     71}
     72#inline-search-results.list .search-result,
     73#search-results.list .search-result  {
     74  display: block;
     75    max-width: 50%;
     76    margin: auto;
     77    padding: 25px; 
     78}
     79#inline-search-results.list .search-result img,
     80#search-results.list .search-result img {
     81    width: -webkit-fill-available;
     82}
     83#inline-search-results h2 {
     84        font-size: 1em !important;
     85    line-height: 1em !important;
     86    color: #000000;
     87}
     88#inline-search-results.grid .search-result,
    1389#search-results.grid .search-result {
    1490    display: inline-block;
    … …  
    1793    box-sizing: border-box;
    1894}
    19 #search-results.grid .search-result img {   
    20     width: 100%;
    21    
    22 }
    23 #search-results {   
    24 display:none;
    25     width: 100%;
    26     max-width: 1100px;
    27     margin: auto;
    28     background: white;
    29     padding: 20px;
    30     overflow-y: auto;
    31     max-height: 80%;
    32     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    33 }
    34 #search-results * {
    35     font-size:1em!important;
    36     line-height: 1em!important;
    37 }
    38 #search-results img {
    39     margin-bottom:10px;
    40    
     95#inline-search-results.grid .search-result img,
     96#search-results.grid .search-result img {
     97    width: 100%;
    4198}
    4299form#searchform input[type=text] {
    … …  
    62119    align-items: center;
    63120}
    64 
    65121.search-wrapper {
    66122    position: relative;
    … …  
    68124    align-items: center;
    69125}
     126.search-wrapper2 {
     127    position: relative; 
     128}
     129
    70130#s {
    71131    flex-grow: 1;

  • instant-search/trunk/instant_search.js

    r3107173 r3112748  
    1 jQuery(document).ready(function($) {
    2     function getOrCreateOverlay() {
     1jQuery(document).ready(function($) {   
     2    var searchMethod = instant_search.search_method;
     3    var displayStyle = instant_search.display_style;
     4   
     5function getOrCreateOverlay() {
    36        let overlay = $('#search-overlay');
    47        if (overlay.length === 0) {
    58            overlay = $('<div id="search-overlay" class="search-overlay" style="display: none;"></div>');
    6             let searchResults = $('<div id="search-results" class="' + instant_search.display_style + '" style="display: none;"></div>');
     9            let searchResults = $('<div id="search-results" class="' + displayStyle + '" style="display: none;"></div>');
    710            overlay.append(searchResults);
    811            $('.modal-content').append(overlay);
    912        }
    1013        return overlay;
    11     }
     14    }   
     15   
    1216    var debounceTimeout;
    1317    var currentRequest = null;
    14     var delay = 10;
    15     $('#s').on('input', function() {
    16         clearTimeout(debounceTimeout);
    17         debounceTimeout = setTimeout(function() {
    18             var query = $('#s').val();
    19             var overlay = getOrCreateOverlay();
    20             var searchResults = overlay.find('#search-results');
     18    var delay = 10;     
     19   
     20    function getOrCreateInlineWrapper() {
     21        let wrapper = $('#inline-search-results');
     22        if (wrapper.length === 0) {
     23            wrapper = $('<div id="inline-search-results" class="search-results ' + displayStyle + '"></div>');
     24            $('#s2').closest('.search-wrapper2').append(wrapper);
     25        }
     26        return wrapper;
     27    }
     28     
     29    function performSearch(query) {
     30        if (query.length < 3) {
     31            return;
     32        }
    2133
    22             if (query === '') {
     34        var overlay = getOrCreateOverlay();
     35        var searchResults = overlay.find('#search-results');
     36        var inlineWrapper = getOrCreateInlineWrapper();
     37
     38        if (query === '') {
     39            if (searchMethod === 'overlay') {
    2340                overlay.fadeOut(0, function() {
    2441                    searchResults.hide();
    2542                });
    2643            } else {
    27                 if (currentRequest != null) {
    28                     currentRequest.abort();
    29                 }
    30                 currentRequest = $.ajax({
    31                     url: instant_search.ajax_url,
    32                     type: 'post',
    33                     data: {
    34                         action: 'instant_search',
    35                         query: query
    36                     },
    37                     success: function(result) {
     44                inlineWrapper.hide();
     45            }
     46        } else {
     47            if (currentRequest != null) {
     48                currentRequest.abort();
     49            }
     50            currentRequest = $.ajax({
     51                url: instant_search.ajax_url,
     52                type: 'post',
     53                data: {
     54                    action: 'instant_search',
     55                    query: query
     56                },
     57                success: function(result) {
     58                    if (searchMethod === 'overlay') {
    3859                        searchResults.html(result).css('display', 'block');
    3960                        overlay.fadeIn(0);
    40                     },
    41                     complete: function() {
    42                         currentRequest = null;
     61                    } else {
     62                        inlineWrapper.html(result).attr('class', 'search-results ' + displayStyle).show();
    4363                    }
     64                },
     65                complete: function() {
     66                    currentRequest = null;
     67                }
     68            });
     69        }
     70    }   
     71    $('#s, #s2').on('input', function() {
     72        clearTimeout(debounceTimeout);
     73        debounceTimeout = setTimeout(function() {
     74            var query = $('#s').val() || $('#s2').val();
     75            performSearch(query);
     76        }, delay);
     77    });
     78   
     79        if (searchMethod === 'overlay') {
     80        $(document).on('click', '#search-overlay', function(e) {
     81            if ($(e.target).closest('#search-results').length === 0) {
     82                $('#search-overlay').fadeOut(function() {
     83                    $(this).remove();
    4484                });
    4585            }
    46         }, delay);
    47     });
    48     $(document).on('click', '#search-overlay', function(e) {
    49         if ($(e.target).closest('#search-results').length === 0) {
    50             $('#search-overlay').fadeOut(function() {
    51                 $(this).remove();
    52             });
    53         }
    54     });
    55     $(document).on('click', '#search-results', function(e) {
    56         e.stopPropagation();
    57     });
    58 
    59     if ('webkitSpeechRecognition' in window) {
     86        });
     87    }   
     88        $(document).on('click', '#search-results', function(e) {
     89        e.stopPropagation();
     90    });
     91      if ('webkitSpeechRecognition' in window) {
    6092        var recognition = new webkitSpeechRecognition();
    6193        recognition.continuous = false;
    … …  
    6496        recognition.onresult = function(event) {
    6597            var transcript = event.results[0][0].transcript;
    66             var cleanedTranscript = transcript.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,""); 
    67             $('#s').val(cleanedTranscript).trigger('input');
     98            var cleanedTranscript = transcript.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"");
     99            $('#s, #s2').val(cleanedTranscript).trigger('input');
    68100        };
    69101
    70         $('#voice-search-btn').on('click', function() {
     102        $('#voice-search-btn, #voice-search-btn2').on('click', function() {
    71103            recognition.start();
    72104        });
    73105    } else {
    74         $('#voice-search-btn').hide();
    75     }   
     106        $('#voice-search-btn, #voice-search-btn2').hide();
     107    }
    76108});

  • instant-search/trunk/readme.txt

    r3107187 r3112748  
    44Tags: code, search plugin, ajax search, live search, woocommerce search
    55Requires at least: 4.7
    6 Tested up to: 6.5.4
    7 Stable tag: 1.0.5
     6Tested up to: 6.5.5
     7Stable tag: 1.0.6
    88Requires PHP: 7.4
    99License: GPLv2 or later
    … …  
    2525
    2626**Features:**
     27
    2728- Live voice search
    2829- Live search
     30- Two search methods: inline & overlay
    2931- Search by SKU in WooCommerce
    3032- Return search results from all registered post types
    … …  
    3335- Customize the text
    3436- Customize the width
    35 - Submit for searching
     37
    3638
    3739== Installation ==
    … …  
    6769- Live voice search
    6870- Live search
     71- Two search methods: inline & overlay
    6972- Search by SKU in WooCommerce
    7073- Return search results from all registered post types
    … …  
    7376- Customize the text
    7477- Customize the width
    75 - Submit for searching
    7678
    7779= Will you be adding more features? =
    … …  
    102104
    103105== Changelog ==
     106
     107= 1.0.6 =
     108
     109Added improvements.
    104110
    105111= 1.0.5 =

  • instant-search/trunk/searchform.php

    r3107173 r3112748  
    44    }
    55?>
     6<form role="search" style="display:ruby-text;" method="get" id="searchform2" action="<?php echo esc_url(home_url('/')); ?>">
     7    <div class="search-wrapper2" >
     8        <input type="text" value="" id="s2" placeholder="<?php echo esc_attr(get_option('instant_search_placeholder', 'What are we searching for today?')); ?>" />
     9        <button type="button" id="voice-search-btn2" aria-label="Voice Search"><i class="fas fa-microphone"></i></button>
    610       
    7 <form >
    8     <div class="search-wrapper2" style="width:100%;">
    9         <input type="text" value="" id="s2" placeholder="<?php echo esc_attr(get_option('instant_search_placeholder', 'What are we searching for today?')); ?>" />
    10         <button type="button" id="voice-search-btn2" aria-label="Voice Search"></button>
    1111    </div>
    12  
    1312</form>
    1413<div id="myModal" class="modal" style="z-index:999;">
    15   <div class="modal-content"> 
    16   <div id="search-results" class="<?php echo esc_attr(get_option('instant_search_display_style', 'list')); ?>"></div> 
    17     <span class="close">&times;</span>   
    18  <form role="search" style="display:ruby-text;" method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">
    19     <div class="search-wrapper">
    20         <input type="text" value="" name="s" id="s" placeholder="<?php echo esc_attr(get_option('instant_search_placeholder', 'What are we searching for today?')); ?>" />
    21         <button type="button" id="voice-search-btn" aria-label="Voice Search"><i class="fas fa-microphone"></i></button>
     14    <div class="modal-content">
     15        <div id="search-results" class="<?php echo esc_attr(get_option('instant_search_display_style', 'list')); ?> <?php echo esc_attr(get_option('instant_search_method', 'overlay')); ?>"></div>
     16        <span class="close">&times;</span>
     17        <form role="search" style="display:ruby-text;" method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>">
     18            <div class="search-wrapper">
     19                <input type="text" value="" name="s" id="s" placeholder="<?php echo esc_attr(get_option('instant_search_placeholder', 'What are we searching for today?')); ?>" />
     20                <button type="button" id="voice-search-btn" aria-label="Voice Search"><i class="fas fa-microphone"></i></button>
     21            </div>
     22            <input type="hidden" name="post_type[]" value="<?php echo esc_attr(implode(',', get_option('instant_search_post_types', array('post', 'page')))); ?>">
     23        </form>
    2224    </div>
    23     <input type="hidden" name="post_type[]" value="<?php echo esc_attr(implode(',', get_option('instant_search_post_types', array('post', 'page')))); ?>">
    24 </form>   
    25   </div>
    2625</div>
    2726<script>
    28 var modal = document.getElementById("myModal");
    29 var btn = document.getElementById("s2");
     27jQuery(document).ready(function($) {
     28    var modal = document.getElementById("myModal");
     29    var btn = document.getElementById("s2");
    3030var span = document.getElementsByClassName("close")[0];
     31
    3132btn.onclick = function() {
    32   modal.style.display = "block";
     33    if (instant_search.search_method === 'overlay') {
     34        modal.style.display = "block";
     35    } else {
     36        $('#s2').trigger('input');
     37    }
    3338}
     39
    3440span.onclick = function() {
    35   modal.style.display = "none"; 
     41    modal.style.display = "none";
    3642}
    3743
    3844window.onclick = function(event) {
    39   if (event.target == modal) {
    40     modal.style.display = "none";
    41   }
     45    if (event.target == modal) {
     46        modal.style.display = "none";
     47    }
    4248}
     49});
    4350</script>
    4451
    4552
     53
     54

  • instant-search/trunk/settings.css

    r3098189 r3112748  
    1414    min-width:100px;
    1515}
    16 #toggle-ads {
     16#toggle-ads {   
    1717    display:none;
    1818}
    … …  
    3535    line-height: 1;
    3636}
    37 .display-styles {
    38   position: absolute;
    39   left: 0;
    40   right: 0;
    41   margin-left: auto;
    42   margin-right: auto;
    43   bottom:50px;
    44   width: 135px;
     37.bigtitle {
     38    text-align:center;
    4539}
    46 .placeholder-text {
    47   position: absolute;
    48   left: 0;
    49   right: 0;
    50   margin-left: auto;
    51   margin-right: auto;
    52   bottom:50px;
    53   width: 250px;
    54 }
    55 .width-text {
    56   position: absolute;
    57   left: 0;
    58   right: 0;
    59   margin-left: auto;
    60   margin-right: auto;
    61   bottom:25px;
    62   width: 250px;
    63 }
    64 h3.the-shortcode  {
    65   position: absolute;
    66   left: 0;
    67   right: 0;
    68   margin-left: auto;
    69   margin-right: auto;
    70   bottom:25px;
    71   width: 250px;
    72 }
    73 .donate-button a {
     40a.donate-button {
    7441    color:#fff;
    7542}
    76 .donate-button button {
    77 position: absolute;
    78   left: 0;
    79   right: 0;
    80   margin-left: auto;
    81   margin-right: auto;
    82   bottom:25px;
    83   width: 250px;   
    84 }
    85 .bigtitle {
    86     text-align:center;
    87     font-size:2.25em;
     43a.donate-button:hover, p.submit-changes:hover {
     44    opacity:.75;
    8845}
    8946p.submit-changes {
    … …  
    9451    margin-bottom:50px;
    9552}
    96 article {
    97   position: relative;
    98   border-radius: 16px;
    99   box-shadow: none;
    100   background: #fff;
    101   transform-origin: center;
    102   overflow: hidden; 
    103   border:1px solid black;
     53.toolkit {
     54    text-align:center;
    10455}
    105 article h1 {
    106   text-align:center;
    107   font-size:2.25em;
     56
     57.settings-wrapper {
     58    margin: 60px auto;
     59    width: 1100px; 
    10860}
    109 article h2 {
    110   margin: 0 0 18px 0;
    111   font-size: 1.9rem;
    112   text-align:center;
     61
     62.toolkit ul {
     63    display: flex;
     64    flex-wrap: wrap;
     65    gap: 23px;
     66    list-style:none;
     67    padding:0px;
     68        margin-block-start: 1em;
     69    margin-block-end: 1em;
     70    margin-inline-start: 0px;
     71    margin-inline-end: 0px;
     72    padding-inline-start: 40px;
     73    unicode-bidi: isolate;
    11374}
    114 .article-body {
    115   padding: 24px;
     75
     76.toolkit ul li.search-method {
     77 background: linear-gradient(116.75deg, #0074d9, #001f3f 66.49%);
    11678}
    117 .article-body h3 {
    118  text-align:center;
     79
     80.toolkit ul li.post-types {
     81     background: linear-gradient(116.75deg, #2ecc40, #3d9970 66.49%);
    11982}
    120 .articles {
    121   display: grid;
    122   max-width: 1200px;
    123   margin-inline: auto;
    124   padding-inline: 24px;
    125   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    126   gap: 24px;
     83
     84.toolkit ul li.results-display {
     85     background: linear-gradient(116.75deg, #7fdbff, #39cccc 66.49%);
     86}
     87
     88.toolkit ul li.inline-width {
     89    background: linear-gradient(116.75deg, #ff851b, #ff4136 66.49%);
     90}
     91
     92.toolkit ul li.overlay-width {
     93       background: linear-gradient(116.75deg, #b10dc9, #85144b 66.49%);
     94}
     95
     96.toolkit ul li.placeholder-text {
     97    background: linear-gradient(116.75deg, #f012be, #b10dc9 66.49%);
     98}
     99
     100.toolkit ul li.the-shortcode {
     101      background: linear-gradient(116.75deg, #2ecc40, #3d9970 66.49%);
    127102}
    128103
    129104
     105.toolkit ul li.donate {
     106   background: linear-gradient(116.75deg, #ff851b, #ff4136 66.49%);
     107}
     108
     109.toolkit ul li {
     110    border-radius: 3px;
     111    box-shadow: 0 12px 64px 0 rgba(103, 151, 255, .102), 0 4px 24px 0 rgba(103, 151, 255, .102);
     112    flex: 1;
     113    padding: 24px;
     114        margin-bottom: 6px;
     115}
     116.toolkit ul li img {
     117    height: 194px;
     118    width: 270px;
     119        overflow-clip-margin: content-box;
     120    overflow: clip;
     121}
     122
     123.toolkit ul li h2 {
     124    color: #fff;
     125    font-size: 20px;
     126    font-weight: 700;
     127        margin: 1em 0;
     128}
     129
     130.toolkit ul li p {
     131    color: #fff;
     132    font-size: 13px;
     133    font-weight: 600;
     134    margin-bottom: 0;
     135        line-height: 1.5;
     136    margin: 1em 0;
     137}
    130138
    131139
     140@media only screen and (max-width: 767px) {
     141.settings-wrapper {   
     142    width: 98%;
     143}
     144
     145}
Note: See TracChangeset for help on using the changeset viewer.