popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust schedule layout for mobiles

Browse Source
This commit is contained in:
Dobromir Popov
2024-02-28 13:49:47 +02:00
parent 243405db0c
commit 3a126b0608
1 changed files with 77 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/templates/schedule.hbs
View File

@ -3,9 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Event Schedule</title> <title>Event Schedule</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
<style> <style>
/* template */ /* Existing styles */
/* Word-specific styles */
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@ -19,45 +21,17 @@
text-align: center; text-align: center;
border: 1px solid black; border: 1px solid black;
padding: 4px; padding: 4px;
margin-top: 6px;
margin-bottom: 6px;
font-size: 12.5pt; font-size: 12.5pt;
} }
td { td {
border: 1px solid black; border: 1px solid black;
padding: 2px; padding: 2px;
margin-top: 2px;
margin-bottom: 2px;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
font-size: 12.5pt; font-size: 12.5pt;
} }
/* Word-specific styles */
@media screen and (min-width: 0\0) {
table {
width: auto !important;
}
table td,
table th {
border: 1px solid #000000 !important;
}
}
/* custom styles */
.col1 {
text-align: center;
width: 15%;
}
.col2 {
width: 60%;
}
/* Define different header colors for each week */ /* Define different header colors for each week */
.week1 { .week1 {
background-color: #FFF766; background-color: #FFF766;
@ -78,7 +52,75 @@
.week5 { .week5 {
background-color: #C785C8; background-color: #C785C8;
} }
/* Responsive adjustments */
@media (max-width: 768px) {
/* Adjust for medium devices */
.col1,
.col2,
.col3 {
display: block;
width: 100%;
box-sizing: border-box;
}
.col1 {
text-align: left;
font-weight: bold;
}
.col3 {
text-align: left;
font-style: italic;
}
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
thead tr {
display: block;
border: none;
}
tr {
border: 1px solid #ccc;
}
td {
border: none;
position: relative;
padding-left: 10%;
text-align: right;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
}
@media (max-width: 480px) {
/* Adjust for small devices */
/* Further adjustments if needed for smaller screens */
}
</style> </style>
</head> </head>
<body> <body>
@ -107,7 +149,8 @@
<table> <table>
<thead class="week{{week}}"> <thead class="week{{week}}">
<tr> <tr>
<th colspan="3">{{dayOfWeek}} {{dayOfMonth}}<br /> <th colspan="3"
class="">{{dayOfWeek}} {{dayOfMonth}}<br />
{{placeOfEvent}} {{placeOfEvent}}
</th> </th>
</tr> </tr>
@ -115,15 +158,13 @@
<tbody> <tbody>
{{#each shifts}} {{#each shifts}}
<tr> <tr>
<td class="col1">{{time}}</td> <td class="col1 block sm:table-cell">{{time}}</td>
<td class="col2">{{names}}</td> <td class="col2 block sm:table-cell">{{names}}</td>
<td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td> <td class="col3 hidden sm:table-cell"><strong>{{notes_bold}}</strong></td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
<div style="page-break-before: always;"></div>
<div style="margin-bottom: 50px;"></div>
{{#if @last}} {{#if @last}}
<!-- Don't add margin after the last table --> <!-- Don't add margin after the last table -->
{{else}} {{else}}