Fix: Responsive Search Criteria (#2497)

solop-develop · Jul 25, 2024 · f89b461 · f89b461
1 parent 25eb1f4
commit f89b461
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 76 deletions.
diff --git a/src/views/ADempiere/ReportViewerEngine/searchCriteria/index.vue b/src/views/ADempiere/ReportViewerEngine/searchCriteria/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="24" align="middle" class="containerReport">
-    <el-col :xs="24" :md="14" class="containerPrint">
+    <el-col :xs="24" :md="12" class="containerPrint">
       <PrintOptions
         :container-uuid="containerUuid"
         :report-output="reportOutput"
@@ -66,44 +66,18 @@ export default defineComponent({
 
 <style>
 .containerReport {
-  margin-bottom: 20px;
-  margin-right: 90px !important
-}
-.containerRefreshButton {
-  padding-right: 5px;
-}
-.containerReport .el-col {
   display: flex;
   align-items: center;
+  margin-bottom: 20px;
 }
-
-@media screen and (max-width: 800px) {
-  .containerSummary, .containerButton {
-    margin-top: 25px;
-    display: flex;
-    justify-content: center;
-  }
-}
-
-@media screen and (max-width: 1080px) {
-  .containerSummary, .containerButton {
-    margin-top: 10px;
-    display: flex;
-    justify-content: center;
-  }
-  .containerSummary {
+@media screen and (max-width:1150px) {
+  .containerReport, .custom-button {
     font-size: 12px;
   }
 }
-
-@media screen and (max-width: 1200px) {
-  .containerSummary, .containerButton {
-    margin-top: 10px;
-    display: flex;
-    justify-content: center;
-  }
-  .containerSummary {
-    font-size: 12px;
+@media screen and (max-width:1100px) {
+  .containerReport {
+    margin-bottom: 22px;
   }
 }
 </style>
diff --git a/src/views/ADempiere/ReportViewerEngine/searchCriteria/printFormatReport.vue b/src/views/ADempiere/ReportViewerEngine/searchCriteria/printFormatReport.vue
@@ -1,40 +1,36 @@
 <template>
   <div class="container">
-    <div class="containerPrint">
-      <label for="report-format-select" class="select-label">{{ $t('report.reportEnginer.printFormat') }}</label>
-      <el-select
-        id="report-format-select"
-        v-model="reportAsPrintFormatValue"
-        class="selectReportFormat"
-        :placeholder="$t('report.printFormats')"
-        @visible-change="showListOptions"
-        @change="runReport"
-      >
-        <el-option
-          v-for="(item, key) in reportOptions.childs"
-          :key="key"
-          :label="item.name"
-          :value="item.id"
-        />
-      </el-select>
-    </div>
-    <div class="containerPrint">
-      <label for="report-view-select" class="select-label">{{ $t('report.reportEnginer.viewReport') }}</label>
-      <el-select
-        id="report-view-select"
-        v-model="reportAsPrintViewValue"
-        :placeholder="$t('route.reportViews')"
-        @visible-change="showListView"
-        @change="runReport"
-      >
-        <el-option
-          v-for="(item, key) in reportView.childs"
-          :key="key"
-          :label="item.name"
-          :value="item.id"
-        />
-      </el-select>
-    </div>
+    <label for="report-format-select" class="select-label">{{ $t('report.reportEnginer.printFormat') }}</label>
+    <el-select
+      id="report-format-select"
+      v-model="reportAsPrintFormatValue"
+      class="selectReportFormat"
+      :placeholder="$t('report.printFormats')"
+      @visible-change="showListOptions"
+      @change="runReport"
+    >
+      <el-option
+        v-for="(item, key) in reportOptions.childs"
+        :key="key"
+        :label="item.name"
+        :value="item.id"
+      />
+    </el-select>
+    <label for="report-view-select" class="select-label">{{ $t('report.reportEnginer.viewReport') }}</label>
+    <el-select
+      id="report-view-select"
+      v-model="reportAsPrintViewValue"
+      :placeholder="$t('route.reportViews')"
+      @visible-change="showListView"
+      @change="runReport"
+    >
+      <el-option
+        v-for="(item, key) in reportView.childs"
+        :key="key"
+        :label="item.name"
+        :value="item.id"
+      />
+    </el-select>
   </div>
 </template>
 
@@ -210,6 +206,15 @@ export default defineComponent({
     justify-content: space-between;
     align-items: center;
   }
-
+}
+@media screen and (max-width:1000px) {
+  #report-format-select, #report-view-select  {
+    width: 120px;
+  }
+}
+@media screen and (max-width:920px) {
+  #report-format-select, #report-view-select  {
+    width: 60px;
+  }
 }
 </style>
diff --git a/src/views/ADempiere/ReportViewerEngine/searchCriteria/refreshButton.vue b/src/views/ADempiere/ReportViewerEngine/searchCriteria/refreshButton.vue
@@ -5,7 +5,7 @@
       type="success"
       class="button-base-icon"
       icon="el-icon-refresh-right"
-      style="font-size:20px"
+      style="font-size:16px"
       @click="runReport"
     >
       {{ $t('report.reportEnginer.refreshRecord') }}
@@ -92,7 +92,9 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.select-container {
-  width: 80%;
+@media screen and (max-width:1150px) {
+  .button-base-icon {
+    font-size: 12px;
+  }
 }
 </style>
diff --git a/src/views/ADempiere/ReportViewerEngine/searchCriteria/reportSumary.vue b/src/views/ADempiere/ReportViewerEngine/searchCriteria/reportSumary.vue
@@ -39,8 +39,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.select-label {
-  margin-bottom: 5px;
-  font-weight: bold;
-}
+
 </style>