From 4b4e1163fd148ed7002230b9210dccfd4e637396 Mon Sep 17 00:00:00 2001
From: Fabiano <fabianocarvalho15@gmail.com>
Date: Thu, 5 Jul 2018 13:21:43 -0300
Subject: [PATCH] organized the form on collection list

---
 src/archive-tainacan-collection.php | 86 +++++++++++++++++++----------
 src/assets/scss/_simple-search.scss | 39 +++++++++++++
 src/assets/scss/style.scss          | 12 ++++
 src/functions/enqueues.php          |  6 +-
 4 files changed, 112 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/scss/_simple-search.scss

diff --git a/src/archive-tainacan-collection.php b/src/archive-tainacan-collection.php
index 496c0e3..ba7ee1b 100644
--- a/src/archive-tainacan-collection.php
+++ b/src/archive-tainacan-collection.php
@@ -8,39 +8,69 @@
 <main role="main" class="max-large margin-one-column">
     <div class="row">
         <div class="col col-sm mx-sm-auto">
-            <form method="GET" id="tainacan-collection-search">
-                <?php _e('Order by', 'tainacan-theme'); ?>
-                <select name="orderby">
-                    <option value="date" <?php selected('date', get_query_var('orderby')); ?> >
-                        <?php _e('Creation date', 'tainacan-theme'); ?>
+            <div class="form-inline mt-4 tainacan-collection-list--simple-search">
+                <?php //_e('Order by', 'tainacan-theme'); ?>
+                <!-- <select class="custom-select" name="orderby">
+                    <option value="date" <?php //selected('date', get_query_var('orderby')); ?> >
+                        <?php //_e('Creation date', 'tainacan-theme'); ?>
                     </option>
-                    <option value="title" <?php selected('title', get_query_var('orderby')); ?> >
-                        <?php _e('Title', 'tainacan-theme'); ?>
+                    <option value="title" <?php //selected('title', get_query_var('orderby')); ?> >
+                        <?php //_e('Title', 'tainacan-theme'); ?>
                     </option>
-                </select>
-                <select name="order">
-                    <option value="ASC" <?php selected('ASC', get_query_var('order')); ?> >
-                        ASC
+                </select> -->
+                
+                <div class="dropdown">
+                    <button class="btn bg-white dropdown-toggle text-black" type="button" id="dropdownMenuSorting" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <?php _e('Sorting', 'tainacan-theme'); ?>
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuSorting">
+                        <a class="dropdown-item" href="#"><?php _e('Creation date', 'tainacan-theme'); ?></a>
+                        <a class="dropdown-item" href="#"><?php _e('Title', 'tainacan-theme'); ?></a>
+                    </div>
+                </div>
+                    
+                <button class="btn btn-white bg-white margin-one-column-left">
+                    <i class="mdi mdi-sort-ascending"></i>
+                </button>
+                <button class="btn btn-white bg-white">
+                    <i class="mdi mdi-sort-descending"></i>
+                </button>
+                
+                <div class="dropdown margin-one-column-left">
+                    <button class="btn bg-white dropdown-toggle text-black" type="button" id="dropdownMenuViewMode" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="mdi mdi-view-list text-oslo-gray"></i>
+                        <?php _e('View Mode', 'tainacan-theme'); ?>
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuViewMode">
+                        <a class="dropdown-item" href="#"><?php _e('Table', 'tainacan-theme'); ?></a>
+                        <a class="dropdown-item" href="#"><?php _e('Cards', 'tainacan-theme'); ?></a>
+                        <a class="dropdown-item" href="#"><?php _e('Grid', 'tainacan-theme'); ?></a>
+                    </div>
+                </div>
+
+                <?php //_e('View Mode', 'tainacan-theme'); ?>
+                <!-- <select class="custom-select" name="tainacan_collections_viewmode">
+                    <option value="table" <?php //selected('table', get_query_var('tainacan_collections_viewmode')); ?> >
+                        <?php //_e('Table', 'tainacan-theme'); ?>
                     </option>
-                    <option value="DESC" <?php selected('DESC', get_query_var('order')); ?> >
-                        DESC
+                    <option value="cards" <?php //selected('cards', get_query_var('tainacan_collections_viewmode')); ?> >
+                        <?php //_e('Cards', 'tainacan-theme'); ?>
                     </option>
-                </select>
-                <?php _e('View Mode', 'tainacan-theme'); ?>
-                <select name="tainacan_collections_viewmode">
-                    <option value="table" <?php selected('table', get_query_var('tainacan_collections_viewmode')); ?> >
-                        <?php _e('Table', 'tainacan-theme'); ?>
+                    <option value="grid" <?php //selected('grid', get_query_var('tainacan_collections_viewmode')); ?> >
+                        <?php //_e('Grid', 'tainacan-theme'); ?>
                     </option>
-                    <option value="cards" <?php selected('cards', get_query_var('tainacan_collections_viewmode')); ?> >
-                        <?php _e('Cards', 'tainacan-theme'); ?>
-                    </option>
-                    <option value="grid" <?php selected('grid', get_query_var('tainacan_collections_viewmode')); ?> >
-                        <?php _e('Grid', 'tainacan-theme'); ?>
-                    </option>
-                </select>
-                <input type="text" name="s" value="<?php echo get_query_var('s'); ?>" />
-                <input type="submit" value="Go!" />
-            </form>
+                </select> -->
+                <form role="search" class="ml-auto" method="get" id="tainacan-collection-search">
+                    <div class="input-group">
+                        <input class="form-control rounded-0" type="search" name="s" value="<?php echo get_query_var('s'); ?>" placeholder="<?php _e('Search in collection'); ?>" />
+                        <span class="input-group-append">
+                            <button class="btn border border-left-0 rounded-0 bg-white text-midnight-blue" type="submit">
+                                <i class="mdi mdi-magnify" style="line-height: inherit;"></i>
+                            </button>
+                        </span>
+                    </div>
+                </form>
+            </div>
 
             <?php get_template_part('template-parts/loop-tainacan-collection', get_query_var('tainacan_collections_viewmode')); ?>
         </div>
diff --git a/src/assets/scss/_simple-search.scss b/src/assets/scss/_simple-search.scss
new file mode 100644
index 0000000..592e24f
--- /dev/null
+++ b/src/assets/scss/_simple-search.scss
@@ -0,0 +1,39 @@
+.tainacan-collection-list--simple-search{
+    .dropdown {
+        #dropdownMenuSorting, #dropdownMenuViewMode {
+            font-size: 14px;
+            &:focus{
+                box-shadow: none;
+            }
+            &::after {
+                color: #298596;
+            }
+        }
+        .dropdown-menu {
+            a {
+                &:hover{
+                    background-color: #c1dae0;
+                }
+            }
+        }
+    }
+    #tainacan-collection-search {
+        input{
+            border-color: #cbcbcb !important;
+            &:focus{
+                box-shadow: none;
+                border-right: none;
+            }
+            &::placeholder{
+                font-size: 11px;
+                color: #898d8f;
+            }
+        }
+        button{
+            border-color: #cbcbcb !important;
+            &:focus{
+                box-shadow: none;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index b64e1a0..7548ca9 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -358,6 +358,10 @@ form{
     margin: 0 4.16666666667%;
 }
 
+.margin-one-column-left{
+    margin-left: 4.16666666667%;
+}
+
 .margin-two-column{
     margin: 0 8.33333333334%;
 }
@@ -366,10 +370,18 @@ form{
     margin: 0 12.5%;
 }
 
+.custom-select{
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
 @import "_comments";
 
 @import "_list-post";
 
+@import "_simple-search";
+
 @import "_post";
 
 @import "_sidebar";
diff --git a/src/functions/enqueues.php b/src/functions/enqueues.php
index 22ff7d5..726a889 100644
--- a/src/functions/enqueues.php
+++ b/src/functions/enqueues.php
@@ -23,12 +23,12 @@ if ( ! function_exists('tainacan_Enqueues') ) {
             //Style
             wp_register_style('bootstrap4CSS', get_template_directory_uri() . '/assets/vendor/bootstrap/css/bootstrap.min.css', '', '4.1.1', '');
             wp_enqueue_style('bootstrap4CSS');
-            //Javascript
-            wp_register_script('bootstrap4JS', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.min.js', array('jquery'), '4.1.1', true);
-            wp_enqueue_script('bootstrap4JS');
             //Popper
             wp_register_script('popper_bootstrap4', get_template_directory_uri() . '/assets/vendor/bootstrap/js/popper.min.js', '', '', true);
             wp_enqueue_script('popper_bootstrap4');
+            //Javascript
+            wp_register_script('bootstrap4JS', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.min.js', array('jquery'), '4.1.1', true);
+            wp_enqueue_script('bootstrap4JS');
 
         /**
          * Slick Slider Carousel