fix: Responsive File Uploader (#2067)

solop-develop · Apr 3, 2024 · 25e1a02 · 25e1a02
1 parent 6a11787
commit 25e1a02
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 7 deletions.
diff --git a/src/components/ADempiere/FormDefinition/VFileImport/SelectTable/index.vue b/src/components/ADempiere/FormDefinition/VFileImport/SelectTable/index.vue
@@ -24,7 +24,7 @@
         id="panel-select-table"
         class="panel-select-table"
       >
-        <div slot="header" class="clearfix" style="padding: 0px; !important">
+        <div slot="header" class="clearfix" style="padding: 0px;">
           <h3
             v-if="isEmptyValue(currentTable)"
             style="text-align: center;margin: 0px;"
@@ -249,12 +249,93 @@ export default defineComponent({
     margin: 0px;
   }
 }
-.scroll-list-tables {
-  max-height: 75vh;
+:root {
+  --scroll-list-max-height: 55vh;
+  --scroll-current-max-height: 55vh;
+  --el-table-height-height:20vh;
 }
-.scroll-current-tables {
-  max-height: 65vh;
+
+@media screen and (min-height: 500px) {
+  :root{
+    --el-table-height-height:10vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+  .el-table{
+    max-height: var(--el-table-height-height);
+  }
+}
+
+@media screen and (min-height: 720px) {
+  :root {
+    --scroll-list-max-height: 65vh;
+    --scroll-current-max-height: 50vh;
+    --el-table-height-height:10vh;
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+  .el-table{
+    max-height: var(--el-table-height-height);
+  }
+}
+@media screen and (min-height: 800px) {
+  :root {
+    --scroll-list-max-height: 65vh;
+    --scroll-current-max-height: 50vh;
+    --el-table-height-height:15vh;
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+  .el-table{
+    max-height: var(--el-table-height-height);
+  }
+}
+
+@media screen and (min-height: 1080px) {
+  :root {
+    --scroll-list-max-height: 75vh;
+    --scroll-current-max-height: 65vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
 }
+
+@media screen and (min-height: 1200px) {
+  :root {
+    --scroll-list-max-height: 85vh;
+    --scroll-current-max-height: 70vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+}
+
+@media screen and (min-height: 1400px) {
+  :root {
+    --scroll-list-max-height: 100vh;
+    --scroll-current-max-height: 100vh;
+  }
+  .scroll-list-tables {
+    max-height: var(--scroll-list-max-height);
+  }
+  .scroll-current-tables {
+    max-height: var(--scroll-current-max-height);
+  }
+}
+
 .custom-card-select {
   margin: 0.5px;
   cursor: pointer;

diff --git a/src/components/ADempiere/FormDefinition/VFileImport/index.vue b/src/components/ADempiere/FormDefinition/VFileImport/index.vue
@@ -29,7 +29,7 @@
       </el-steps>
     </div>
 
-    <div style="height: 90% !important;">
+    <div>
       <transition name="el-fade-in-linear">
         <selectTable
           v-if="currentSetp === 1"
@@ -359,7 +359,6 @@ export default defineComponent({
 
 <style scoped>
 .carousel-panel {
-  height: 100% !important;
   padding: 10px 0px;
 }
 .el-carousel__item {