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>
<meta charset="UTF-8" />
<title>Event Schedule</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
<style>
/* template */
/* Word-specific styles */
/* Existing styles */
table {
width: 100%;
border-collapse: collapse;
@ -19,45 +21,17 @@
text-align: center;
border: 1px solid black;
padding: 4px;
margin-top: 6px;
margin-bottom: 6px;
font-size: 12.5pt;
}
td {
border: 1px solid black;
padding: 2px;
margin-top: 2px;
margin-bottom: 2px;
padding-left: 8px;
padding-right: 8px;
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 */
.week1 {
background-color: #FFF766;
@ -78,7 +52,75 @@
.week5 {
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>
</head>
<body>
@ -107,7 +149,8 @@
<table>
<thead class="week{{week}}">
<tr>
<th colspan="3">{{dayOfWeek}} {{dayOfMonth}}<br />
<th colspan="3"
class="">{{dayOfWeek}} {{dayOfMonth}}<br />
{{placeOfEvent}}
</th>
</tr>
@ -115,15 +158,13 @@
<tbody>
{{#each shifts}}
<tr>
<td class="col1">{{time}}</td>
<td class="col2">{{names}}</td>
<td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
<td class="col1 block sm:table-cell">{{time}}</td>
<td class="col2 block sm:table-cell">{{names}}</td>
<td class="col3 hidden sm:table-cell"><strong>{{notes_bold}}</strong></td>
</tr>
{{/each}}
</tbody>
</table>
<div style="page-break-before: always;"></div>
<div style="margin-bottom: 50px;"></div>
{{#if @last}}
<!-- Don't add margin after the last table -->
{{else}}