Better responsiviness for Advanced Search on Theme.

src/admin/components/advanced-search/advanced-search.vue

@@ -18,13 +18,13 @@
                 v-else
                 :style="advancedSearchResults ? { 'padding-top': '0' } : { 'padding-top': '47px' }"
                 :class="{ 'padding-in-header': isHeader, 'padding-regular': !isHeader }"
-                class="columns is-multiline tnc-advanced-search-container">
+                class="tnc-advanced-search-container">
 
             <div
                     v-show="!advancedSearchResults"
                     v-for="searchCriterion in searchCriteria"
                     :key="searchCriterion"
-                    class="field column is-12 tainacan-form">
+                    class="field is-12 tainacan-form">
 
                 <b-field
                         class="columns"
@@ -88,7 +88,6 @@
                                 @typing="autoCompleteTerm($event, searchCriterion)"
                                 />
                         <b-input
-                                class="tainacan-input-disabled"
                                 v-else
                                 type="text"
                                 disabled />
@@ -113,7 +112,6 @@
                             >{{ comparator }}</option>
                         </b-select>
                         <b-input
-                                class="tainacan-input-disabled"
                                 v-else
                                 type="text"
                                 disabled />
@@ -609,7 +607,7 @@
         padding-bottom: 47px;
 
         .column {
-            padding: 0 0.3rem 0.3rem !important;
+            padding: 0 0.5rem 0.75rem !important;
         }
 
         .control {
@@ -632,9 +630,16 @@
             margin-left: -5px !important;
         }
 
-        .tainacan-input-disabled {
+        @media screen and (max-width: 768px) {
-            background-color: $gray3;
+            .is-12>.columns {
+                flex-wrap: wrap;
+            }
+            .is-two-thirds {
+                order: 3;
+                flex-basis: 100%;
+            }
         }
+
     }
 
 </style>

src/admin/pages/lists/items-page.vue

@@ -94,7 +94,7 @@
         <div 
                 id="items-list-area"
                 class="items-list-area"
-                :class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
+                :class="{ 'spaced-to-right': !isFiltersMenuCompressed && !openAdvancedSearch }">
 
             <!-- FILTERS TAG LIST-->
             <filters-tags-list 
@@ -382,17 +382,15 @@
             </div>
 
             <!-- ADVANCED SEARCH -->
-            <div
+            <div v-if="openAdvancedSearch">
-                    v-if="openAdvancedSearch">
 
-                <div class="columns tnc-advanced-search-close">
+                <div class="tnc-advanced-search-close"> 
-                    <div class="column">
+                    <div class="advanced-search-criteria-title">
-                        <div class="advanced-search-criteria-title">
+                        <div class="is-flex">
                             <h1>{{ $i18n.get('info_search_criteria') }}</h1>
-
                             <div
                                     :style="{'margin-bottom': 'auto'}"
-                                    class="field is-grouped is-pulled-right">
+                                    class="field is-grouped">
                                 <p
                                         v-if="advancedSearchResults"
                                         class="control">
@@ -413,8 +411,8 @@
                                     </a>
                                 </p>
                             </div>
-                            <hr>
                         </div>
+                        <hr>
                     </div>
 
                 </div>
@@ -1087,6 +1085,10 @@
     .advanced-search-criteria-title {
         padding: 0;
 
+        &>.is-flex {
+            justify-content: space-between;
+        }
+
         h1 {
             font-size: 20px;
             font-weight: 500;
@@ -1307,6 +1309,9 @@
             align-items: center;
             width: 100%;
 
+            .input {
+                border: 1px solid $gray2;
+            }
             .control {
                 width: 100%;
                 .icon {

src/admin/scss/_inputs.scss

@@ -10,8 +10,8 @@
         border: 1px solid $gray2 !important;
     }    
     &[disabled] {
-        color: $gray4;
+        color: $gray4 !important;
-        background-color: $gray2;
+        background-color: $gray2 !important;
     }
     &::placeholder,
     &::-ms-input-placeholder,

src/admin/theme-items-list.vue

@@ -35,6 +35,9 @@ export default {
     // Tainacan imports
     @import "../admin/scss/_tables.scss";
     @import "../admin/scss/_modals.scss";
+    @import "../admin/scss/_buttons.scss";
+    @import "../admin/scss/_inputs.scss";
+    @import "../admin/scss/_checkboxes.scss";
     @import "../admin/scss/_pagination.scss";
     @import "../admin/scss/_tags.scss";
     @import "../admin/scss/_selects.scss";
@@ -56,65 +59,6 @@ export default {
             list-style: none;
         }
 
-        // Some components have a different style in listing pages
-        .button {
-            height: inherit !important;
-            box-shadow: none !important;
-            border-radius: 6px;
-            padding: 2px 15px;
-            margin-top: 0px;
-            margin-bottom: 0px;
-            display: inline-flex;
-            font-weight: normal;
-            cursor: pointer;
-
-            &.is-secondary:hover, &.is-secondary:focus {
-                background: $secondary !important;
-            }
-            &.is-primary:hover, &.is-primary:focus {
-                background: $turquoise3 !important;
-            }
-            &.is-success:hover, &.is-success:focus {
-                background: $success !important;
-            }
-            &.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
-                background: $white !important;
-            }
-            &:active {
-                -webkit-transform: none !important;
-                transform: none !important;
-            }
-            &.is-outlined {
-                color: #150e38 !important;
-                background-color: white;
-                border-color: $gray4 !important;
-            }
-            &:focus {
-                outline: 0px;
-            }
-        }
-        .button.is-small {
-            height: 26px !important;
-            line-height: 12px;
-        }
-        .button:not(.is-small):not(.is-medium):not(.is-large) {
-            height: 30px !important;
-            line-height: 20px !important;
-            font-size: 14px !important;
-        }
-        .input, .textarea {
-            font-size: 14px;
-            border: 1px solid $gray2;
-            border-radius: 1px !important;
-            background-color: white;
-            box-shadow: none !important;
-
-            &:focus, &:active {
-                box-shadow: none !important;
-                background-color: white;
-                border: 1px solid $gray2 !important;
-            }    
-        }
         .dropdown {
             display: inline-flex;
             position: relative;
@@ -123,35 +67,6 @@ export default {
         .dropdown-menu {
             display: block;
         }
-        .b-checkbox.checkbox {
-            align-items: baseline;
-            margin-bottom: 5px;
-
-            input[type="checkbox"] {
-                box-shadow: none !important;
-            }
-
-            input[type="checkbox"] + .check {
-                width: 1.0em;
-                height: 1.0em;
-                flex-shrink: 0;
-                border-radius: 0;
-                border: 1px solid $gray4;
-                transition: background 150ms ease-out;
-                box-shadow: none !important;
-            }
-
-            &:focus input[type="checkbox"] + .check, 
-            &:active input[type="checkbox"] + .check, 
-            &:hover input[type="checkbox"] + .check {
-                box-shadow: none !important;
-                border-color: $gray4 !important;
-            }
-            input[type="checkbox"]:checked + .check {
-                background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
-                border-color: $gray4 !important;
-            }
-        }
         .b-radio.radio {
 
             input[type="radio"] + .check {