From 3a126b06085d1305991e8d8c6bc736b25b6d645e Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Wed, 28 Feb 2024 13:49:47 +0200
Subject: [PATCH] adjust schedule layout for mobiles

---
 src/templates/schedule.hbs | 113 +++++++++++++++++++++++++------------
 1 file changed, 77 insertions(+), 36 deletions(-)
diff --git a/src/templates/schedule.hbs b/src/templates/schedule.hbs
index d88fe39..f85badd 100644
--- a/src/templates/schedule.hbs
+++ b/src/templates/schedule.hbs
@@ -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}}
