pagination position fixed under the dashboard

sarchlab · Jun 12, 2024 · 01bea53 · 01bea53
1 parent 1026e32
commit 01bea53
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/daisen/static/dist/index.html b/daisen/static/dist/index.html
@@ -59,13 +59,13 @@
 
  <div class="main-body">
  <div id="inner-container"></div>
+ <div id="page-btn-container"></div>
  </div>
 
  <div class="status-bar">
  <div id="mouse-time"></div>
  </div>
+ <div id="page-btn-container"></div>
  </div>
-
-
  </body>
 </html>
diff --git a/daisen/static/src/css/app.css b/daisen/static/src/css/app.css
@@ -29,16 +29,23 @@ body {
 }
 
 .pagination-container {
- position: fixed;
  display: flex;
  align-items: center;
- justify-content: space-between;
- color:#2c7bb6
+ justify-content: center;
+ color:#2c7bb6;
+ margin-top: 0px;
+ margin-bottom: 40px;
+ position: relative;
+ width: 100%;
+}
+
+.canvas-container {
+ position: relative;
+ width: 100%;
 }
 
 .page-info {
  margin-left: 10px;
- margin-bottom: -10px;
 }
 
 .burger-menu {

diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
@@ -100,8 +100,13 @@ class Dashboard {
  } else {
  this._toolBar.style.display = 'none';
  }
+ const paginationContainer = this._canvas.querySelector('.pagination-container') as HTMLElement;
+ if (paginationContainer) {
+ paginationContainer.style.left = '50%';
+ paginationContainer.style.transform = 'translateX(-50%)';
+ }
  this._resize();
- }, 200));
+ }, 200)); 
 
  this._addZoomResetButton(this._toolBar);
  this._addFilterUI(this._toolBar);
@@ -171,6 +176,7 @@ class Dashboard {
  }
 
  _widgetHeight(): number {
+ this._resetNumRowCol();
  const numGap = this._numRow + 1;
  const marginTop = 5;
  const gapSpace = numGap * marginTop;
@@ -467,10 +473,10 @@ class Dashboard {
  paginationContainer.classList.add("pagination-container");
  paginationContainer.appendChild(nav);
  paginationContainer.appendChild(pageInfo);
-
- this._pageBtnContainer.innerHTML = "";
- this._pageBtnContainer.appendChild(paginationContainer);
-
+ if (this._canvas.querySelector('.pagination-container')) {
+  this._canvas.removeChild(this._canvas.querySelector('.pagination-container'));
+ }
+ this._canvas.appendChild(paginationContainer);
  this._addPageButtons(ul);
  }
 
@@ -643,6 +649,7 @@ class Dashboard {
 
  widget.render(true);
  });
+ this._addPaginationControl();
  }
 
 }