@worksafevictoria/wcl7.5 1.1.0-beta.106 → 1.1.0-beta.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.106",
+  "version": "1.1.0-beta.107",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Global/DirectoryFilters/index.vue

@@ -27,6 +27,8 @@
           @cleared="$emit('locationCleared')"
         />
       </column>
+      <span class="d-none">{{ filters }}</span>
+      <span class="d-none">{{ filters.taxonomies.map(taxonomy => taxonomy.name).join(', ') }}</span>
       <column
         :md="!bundle ? 12 : bundle === 'isp' ? 4 : 8"
         :sm="!bundle ? 12 : bundle === 'isp' ? 6 : 12"
@@ -116,14 +118,6 @@ export default {
     // wait for hydration,
     // then show all boxes together
     this.loading = false
-
-    // Log the filters data
-    console.log("Filters Data:", this.filters);
-
-    // Log taxonomies specifically
-    if (this.filters.taxonomies) {
-      console.log("Taxonomies:", this.filters.taxonomies.map(taxonomy => taxonomy.name));
-    }
   },
   methods: {
     emitFilterOpts(ev) {

package/src/components/Paragraphs/Directory/HSCP/Records/index.vue

@@ -1,30 +1,29 @@
 <template>
-  <section-group class="paragraph--directory">
-    <div v-if="items.length" class="paragraph--directory__records">
+  <section-group class="paragraph--directory hscp-filters">
     <!-- Filters -->
-    <row class="paragraph--directory.hscp-filters">
-       <!-- Keyword Filters -->
-      <column class="colSearch" md="2" sm="6">
+    <row style="column-gap: 16px;">
+      <!-- Keyword Filters -->
+      <column xxl="2" xl="3" md="4" sm="6">
         <label class="visually-hidden" for="search-directory">
           Search by keyword (typed keyword automatically filters below results)
         </label>
         <input type="text" v-model="searchOrg" placeholder="Search organisation" class="search">
       </column>
-      <column class="colSearch" md="2" sm="6">
+      <column xxl="2" xl="3" md="4" sm="6">
         <label class="visually-hidden" for="search-directory">
           Search by suburb (typed suburb automatically filters below results)
         </label>
         <input type="text" v-model="searchSub" placeholder="Search suburb" class="search">
       </column>
       <!-- Other Filters -->
-      <column class="colSearch" md="2" sm="6">
+      <column xxl="2" xl="3" md="4" sm="6">
         <select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
           <option class="placeholder" value="" disabled hidden selected>Search course type</option>
           <option value="HSR Initial">HSR Initial</option>
           <option value="HSR Refresher">HSR Refresher</option>
         </select>
       </column>
-      <column class="colSearch" md="4" sm="6" style="padding-left: 0px">
+      <column xxl="2" xl="3" md="4" sm="6">
         <select id="filterTheme" v-model="searchThemes" name="filter1" class="selectClass">
           <option class="placeholder" value="" disabled hidden selected>Search theme</option>
           <option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
@@ -32,7 +31,7 @@
           </option>
         </select>
       </column>
-      <column>
+      <column md="2">
         <filter-button
           v-if="!hideReset"
           filter-button="!hideReset"
@@ -58,7 +57,7 @@
         />
       </div>
     <h2 v-if="filteredRecords.length === 0">No records found</h2>
-  </div>
+
   </section-group>
   
 </template>
@@ -278,22 +277,48 @@ export default {
 @import '../../styles.scss';
 .paragraph--directory.hscp-filters {
 
-  align-items: center !important;
+  .selectClass {
+    display:inline-block;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 200px;
+    border: 1px solid $gray;
+    margin-right: 16px;
+    margin-bottom: 16px;
+
+  }
+
+  .search {
+    display: inline-block;
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-image: url('./../../../../../assets/icons/search.svg');
+    background-repeat: no-repeat !important;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    margin-right: 16px;
+    transition: none;
+  }
  
   .grid-column {
     display: inline-block;
     width: 25%;
 
     @media (max-width: 767px) {
-      width: 50%;
-    }
+    width: 50%;
+  }
 
-    @media (max-width: 539px) {
-      display: block;
-      width: 100%;
-      float: none;
-      margin-bottom: 16px;
-    }
+  @media (max-width: 539px) {
+    display: block;
+    width: 100%;
+    float: none;
+    margin-bottom: 16px;
+  }
+   
   }
   .right {
     float: right;
@@ -311,38 +336,10 @@ export default {
   float: right;
 }
 
-.colSearch {
-  padding-right: 16px !important;
-}
-
 .hscpRecords {
   padding-top: 16px;
 }
 
-  .input, 
-  .button, 
-  .select, 
-  .optgroup,
-  .selectClass {
-    display: inline-block;
-    height: 42px;
-    border-radius: 8px;
-    padding-right: 16px !important;
-    border: 1px solid $gray;
-  }
 
-  .search {
-  display: inline-block;
-  color: $black;
-  border: 1px solid $gray;
-  border-radius: 8px;
-  padding: 10px 12px;
-  height: 42px;
-  background-image: url('./../../../../../assets/icons/search.svg');
-  background-repeat: no-repeat !important;
-  background-position: 96% 12px;
-  margin-bottom: 16px;
-  transition: none;
-}
 
 </style>