fix(ui): enhance responsive in pagination

witnet · Aug 17, 2021 · 37bfa51 · 37bfa51
1 parent 01c9058
commit 37bfa51
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/ui/assets/styles/element-ui.scss b/packages/ui/assets/styles/element-ui.scss
@@ -40,11 +40,17 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     background-color: var(--bg);
     color: var(--pagination-button);
     margin: 4px;
+    padding-left: 4px;
   }
 
   .btn-prev {
     background-color: var(--bg);
     color: var(--pagination-button);
     margin: 4px;
+    padding-right: 4px;
+  }
+
+  .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
+    color: var(--pagination-button);
   }
 }
diff --git a/packages/ui/components/DataFeedDetails.vue b/packages/ui/components/DataFeedDetails.vue
@@ -24,8 +24,10 @@
     />
     <el-pagination
       v-if="numberOfPages > 1"
+      :small="small"
       class="pagination"
       layout="prev, pager, next"
+      :pager-count="4"
       :page-count="numberOfPages"
       :current-page="currentPage"
       @current-change="handleCurrentChange"
@@ -73,6 +75,9 @@ export default {
     }
   },
   computed: {
+    small() {
+      return this.numberOfPages > 10
+    },
     svgIcon() {
       return this.feed.name.split('/').join('')
     },
@@ -154,6 +159,7 @@ export default {
     }
   }
   .pagination {
+    padding-bottom: 72px;
     justify-self: center;
   }
   .chart {