search

dragontheory / D7460N-with-db

Your data your way. Fast, easy, and secure.
https://d7460n-app-with-resizer.pages.dev/
2 stars 1 forks source link

Pagination: HTML/CSS only #14

Closed dragontheory closed 2 years ago

dragontheory commented 2 years ago

The structure of what we will by hiding/showing via total number of visible rows divided into total number of search results.

Dependent on #15

dragontheory commented 2 years ago

Added HTML and CSS styling.

HTML:

<list-item>
  <list-cell><a href="#">01</a></list-cell>
  <list-cell><a href="#">02</a></list-cell>
  <list-cell><a href="#">03</a></list-cell>
  <list-cell><a href="#">04</a></list-cell>
  <list-cell><a href="#">05</a></list-cell>
</list-item>

CSS:

/*-----------------------------
  PAGINATION
-----------------------------*/
app-panel:nth-of-type(3)  panel-header {
  grid-template-columns: 1fr 1fr;
}

app-panel:nth-of-type(3)  panel-header list-item {
  grid-template-columns: repeat(auto-fiT, minmax(3rem, auto));
  grid-template-rows: 1fr;
  box-shadow: 0 1px 0 0 rgb(255,255,255,0.0);
  background-color: rgba(48,190,255,0.0);
  justify-content: end;
}

app-panel:nth-of-type(3)  panel-header list-item list-cell {
  box-shadow: 2px 0 0 -1px rgb(255,255,255,0.2);
  transition: color 250ms, background-color 250ms;
  text-align: center;
}

app-panel:nth-of-type(3)  panel-header list-item list-cell:hover {
  box-shadow: 2px 0 0px -1px rgb(255,255,255,0.2);
  background-color: rgba(48,190,255,0.2);
  color: rgba(255,255,255,1.0);
}
dragontheory commented 2 years ago

Now we need to display the number of pagination links base on the total number of visible search result rows divided into the total number of search results.