Skip to content

Commit

Permalink
Merge pull request #8 from spence-m/fix-table-scrolling
Browse files Browse the repository at this point in the history 
Fixed horizontal scrolling on tables so only the table scrolls.
  • Loading branch information
@spence-m
spence-m authored Sep 10, 2022
2 parents 66b74e9 + a3823a2 commit ab981aa
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 138 deletions.
272 changes: 139 additions & 133 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<main role="main" class="main">
<h1 class="title">WoW Classic Battleground Holidays 2022</h1>
<div class="content-wrapper">
<article class="calendar" x-data="bccHolidays">
<article class="article" x-data="bccHolidays">
<h1 class="subtitle subtitle--bcc">
Burning Crusade Classic <b x-text="year"></b>
</h1>
Expand All @@ -45,61 +45,63 @@ <h1 class="subtitle subtitle--bcc">
Previous year
</button>
<button class="button" @click="incrementYear">Next year</button>
<table>
<thead>
<tr>
<th class="table-heading">Eye of the Storm</th>
<th class="table-heading">Warsong Gulch</th>
<th class="table-heading">Arathi Basin</th>
<th class="table-heading">Alterac Valley</th>
</tr>
</thead>
<tbody>
<template x-for="(date, index) in dates">
<div class="table-wrapper">
<table>
<thead>
<tr>
<td class="table-cell">
<div
:class="isHoliday(date[0].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[0].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[0].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[1].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[1].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[1].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[2].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[2].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[2].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[3].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[3].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[3].date)"
></span>
</td>
<th class="table-heading">Eye of the Storm</th>
<th class="table-heading">Warsong Gulch</th>
<th class="table-heading">Arathi Basin</th>
<th class="table-heading">Alterac Valley</th>
</tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<template x-for="(date, index) in dates">
<tr>
<td class="table-cell">
<div
:class="isHoliday(date[0].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[0].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[0].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[1].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[1].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[1].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[2].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[2].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[2].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[3].date) === true ? 'triangle triangle--bcc' : ''"
></div>
<span
:class="isPast(date[3].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[3].date)"
></span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</article>

<article class="calendar" x-data="somHolidays">
<article class="article" x-data="somHolidays">
<h1 class="subtitle">Season of Mastery <b x-text="year"></b></h1>
<button
class="button"
Expand All @@ -115,51 +117,53 @@ <h1 class="subtitle">Season of Mastery <b x-text="year"></b></h1>
>
Next year
</button>
<table>
<thead>
<tr>
<th class="table-heading">Warsong Gulch</th>
<th class="table-heading">Arathi Basin</th>
<th class="table-heading">Alterac Valley</th>
</tr>
</thead>
<tbody>
<template x-for="(date, index) in dates">
<div class="table-wrapper">
<table>
<thead>
<tr>
<td class="table-cell">
<div
:class="isHoliday(date[0].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[0].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[0].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[1].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[1].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[1].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[2].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[2].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[2].date)"
></span>
</td>
<th class="table-heading">Warsong Gulch</th>
<th class="table-heading">Arathi Basin</th>
<th class="table-heading">Alterac Valley</th>
</tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<template x-for="(date, index) in dates">
<tr>
<td class="table-cell">
<div
:class="isHoliday(date[0].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[0].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[0].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[1].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[1].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[1].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[2].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[2].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[2].date)"
></span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</article>

<article class="calendar" x-data="classicEraHolidays">
<article class="article" x-data="classicEraHolidays">
<h1 class="subtitle">Classic Era <b x-text="year"></b></h1>
<button
class="button"
Expand All @@ -170,48 +174,50 @@ <h1 class="subtitle">Classic Era <b x-text="year"></b></h1>
Previous year
</button>
<button class="button" @click="incrementYear">Next year</button>
<table>
<thead>
<tr>
<th class="table-heading">Warsong Gulch</th>
<th class="table-heading">Arathi Basin</th>
<th class="table-heading">Alterac Valley</th>
</tr>
</thead>
<tbody>
<template x-for="(date, index) in dates">
<div class="table-wrapper">
<table>
<thead>
<tr>
<td class="table-cell">
<div
:class="isHoliday(date[0].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[0].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[0].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[1].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[1].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[1].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[2].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[2].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[2].date)"
></span>
</td>
<th class="table-heading">Warsong Gulch</th>
<th class="table-heading">Arathi Basin</th>
<th class="table-heading">Alterac Valley</th>
</tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<template x-for="(date, index) in dates">
<tr>
<td class="table-cell">
<div
:class="isHoliday(date[0].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[0].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[0].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[1].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[1].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[1].date)"
></span>
</td>
<td class="table-cell">
<div
:class="isHoliday(date[2].date) === true ? 'triangle' : ''"
></div>
<span
:class="isPast(date[2].date) === true ? 'table-cell--past' : ''"
x-text="formatDate(date[2].date)"
></span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</article>
</div>
</main>
Expand Down
13 changes: 8 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,6 @@ table {
max-width: 1400px;
}

.calendar {
overflow-x: auto;
overflow-y: hidden;
}

.footer {
display: flex;
flex-direction: column;
Expand All @@ -53,6 +48,14 @@ table {
column-gap: 69px;
}

.article {
overflow-x: auto;
}

.table-wrapper {
overflow-x: auto;
}

.table-heading {
font-size: 14px;
font-weight: 700;
Expand Down

0 comments on commit ab981aa

Please sign in to comment.