SILABMC-191: Move search field to page title

5 files changed, 40 insertions, 25 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 2d8c0e14..b883c32e 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -223,3 +223,18 @@
 .system-control__radio label {
   padding-top: 4px;
 }
+
+@media (min-width: 768px) {
+  .search-block {
+    position: absolute;
+    top: 4.3rem;
+    right: $spacer;
+    justify-content: end;
+  }
+}
+@media (max-width: 768px) {
+  .date-filter {
+    display: flex;
+    flex-direction: column;
+  }
+}
\ No newline at end of file
diff --git a/src/views/_sila/HardwareStatus/Sensors/Sensors.vue b/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
index 347efd6c..3f1eb59a 100644
--- a/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
+++ b/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
@@ -2,21 +2,21 @@
   <b-container fluid="xl">
     <page-title />
     <b-row class="align-items-end">
-      <b-col sm="6" md="5" xl="4">
+      <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pageSensors.searchForSensors')"
           data-test-id="sensors-input-searchForSensors"
           @change-search="onChangeSearchInput"
           @clear-search="onClearSearchInput"
         />
+        <div class="ml-sm-4">
+          <table-cell-count
+            :filtered-items-count="filteredRows"
+            :total-number-of-cells="allSensors.length"
+          ></table-cell-count>
+        </div>
       </b-col>
-      <b-col sm="3" md="3" xl="2">
-        <table-cell-count
-          :filtered-items-count="filteredRows"
-          :total-number-of-cells="allSensors.length"
-        ></table-cell-count>
-      </b-col>
-      <b-col sm="3" md="4" xl="6" class="text-right">
+      <b-col class="text-right">
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
       </b-col>
     </b-row>
diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue
index adaa2e9e..19a8b205 100644
--- a/src/views/_sila/Logs/EventLogs/EventLogs.vue
+++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue
@@ -2,7 +2,7 @@
   <b-container fluid="xl">
     <page-title />
     <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+      <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pageEventLogs.table.searchLogs')"
           data-test-id="eventLogs-input-searchLogs"
@@ -16,11 +16,11 @@
           ></table-cell-count>
         </div>
       </b-col>
-      <b-col sm="8" md="7" xl="6">
+    </b-row>
+    <b-row class="align-items-center date-filter">
+      <b-col>
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
       <b-col class="text-right">
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
         <b-button
diff --git a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
index e05ef639..80a837c7 100644
--- a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -2,7 +2,7 @@
   <b-container fluid="xl">
     <page-title />
     <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+      <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
           @change-search="onChangeSearchInput"
@@ -15,12 +15,12 @@
           ></table-cell-count>
         </div>
       </b-col>
-      <b-col sm="8" md="7" xl="6">
+    </b-row>
+    <b-row class="align-items-center date-filter">
+      <b-col>
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="12" class="text-right">
+      <b-col class="text-right">
         <b-button
           variant="primary"
           :disabled="allLogs.length === 0"
diff --git a/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue b/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue
index 4f9d5e66..057fc827 100644
--- a/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue
+++ b/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue
@@ -1,20 +1,20 @@
 <template>
-  <b-container fluid class="xl">
+  <b-container fluid="xl">
     <page-title />
     <b-row class="align-items-center">
-      <b-col sm="6" md="5" xl="4">
+      <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4">
         <search
           :placeholder="$t('pageSessions.table.searchSessions')"
           data-test-id="sessions-input-searchSessions"
           @change-search="onChangeSearchInput"
           @clear-search="onClearSearchInput"
         />
-      </b-col>
-      <b-col sm="3" md="3" xl="2">
-        <table-cell-count
-          :filtered-items-count="filteredRows"
-          :total-number-of-cells="allConnections.length"
-        ></table-cell-count>
+        <div class="ml-sm-4">
+          <table-cell-count
+            :filtered-items-count="filteredRows"
+            :total-number-of-cells="allConnections.length"
+          ></table-cell-count>
+        </div>
       </b-col>
     </b-row>
     <b-row>