TIL about empty cells

A presentation at Tech Talk @ Tagesspiegel in March 2021 in by Gunnar Bittersmann

Slide 1

Slide 1

TIL about empty cells Photo by Umanoide on Unsplash

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

<ol :class=”$style.pagerList”> <li v-if=”!firstPage” :class=”$style.pagerFirst”> <a href=”…”>erste Seite”</a> “</li> <li v-if=”!firstPage” :class=”$style.pagerPrevious”> <a href=”…”> <span class=”visually-hidden”>vorige Seite”</span> <svg aria-hidden=”true”>…”</svg> “</a> “</li> <li v-for=”index in neighbors” :class=”$style.pagerNeighbor”> <a href=”…”> <span class=”visually-hidden”>Seite”</span> {{ index }} “</a> “</li> <li v-if=”!lastPage” :class=”$style.pagerNext”> <a href=”…”>

Slide 8

Slide 8

<ol :class=”$style.pagerList”> <li :class=”$style.pagerFirst”> <a :href=”!firstPage ? “…” : “”>erste Seite”</a> “</li> <li:class=”$style.pagerPrevious”> <a :href=”!firstPage ? “…” : “”> <span class=”visually-hidden”>vorige Seite”</span> <svg aria-hidden=”true”>…”</svg> “</a> “</li> <li v-for=”index in neighbors” :class=”$style.pagerNeighbor”> <a href=”…”> <span class=”visually-hidden”>Seite”</span> {{ index }} “</a> “</li> <li :class=”$style.pagerNext”> <a :href=”!lastPage ? “…” : “”>

Slide 9

Slide 9

.pager”__list { display: inline-grid; grid-template-columns: auto repeat(var(“—items, 5), 1fr) auto; grid-template-rows: auto auto; } .pager”__neighbor:first-child { grid-column: 2; }

Slide 10

Slide 10

.pager”__list { display: inline-grid; grid-template-columns: 1fr repeat(var(“—items, 5), 1fr) grid-template-rows: auto auto; } .pager”__neighbor:first-child { grid-column: 2; } 1fr;

Slide 11

Slide 11

Wirrungen und Photo by Crawford Jolly on Unsplash Irrungen