Merge pull request #9 from aljazceru/claude/mobile-responsive-design-01K8gfo4Ba3j4YEXHMarLQ2M

Add comprehensive mobile responsiveness to website

public/static/mobile.css

@@ -0,0 +1,193 @@
+/* Mobile-Responsive Styles for SatsEUR */
+
+/* Base responsive improvements */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0 10px;
+}
+
+/* Container adjustments for mobile */
+.container {
+    padding-left: 15px;
+    padding-right: 15px;
+    max-width: 100%;
+}
+
+/* Responsive typography */
+h3 {
+    font-size: clamp(1.2rem, 5vw, 2rem);
+    line-height: 1.3;
+    word-wrap: break-word;
+    padding: 0 10px;
+}
+
+#current {
+    display: inline-block;
+    word-break: break-word;
+}
+
+/* Table responsive design */
+table.u-full-width {
+    width: 100%;
+    margin-top: 20px;
+    font-size: 1rem;
+}
+
+table.u-full-width thead th {
+    font-size: 1.2rem;
+    padding: 10px 5px;
+    white-space: nowrap;
+}
+
+table.u-full-width tbody td {
+    padding: 12px 5px;
+    font-size: 1rem;
+}
+
+/* Mobile-specific styles */
+@media screen and (max-width: 768px) {
+    body {
+        margin-top: 40px;
+        padding: 0 5px;
+    }
+
+    .container {
+        margin-top: 10px !important;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    /* Responsive heading */
+    h3 {
+        font-size: clamp(1rem, 4.5vw, 1.5rem);
+        margin-bottom: 15px;
+        padding: 0 5px;
+    }
+
+    /* Table optimization for mobile */
+    table.u-full-width {
+        font-size: 0.9rem;
+    }
+
+    table.u-full-width thead th {
+        font-size: 1rem;
+        padding: 8px 3px;
+    }
+
+    table.u-full-width tbody td {
+        padding: 10px 3px;
+        font-size: 0.9rem;
+    }
+
+    /* Chart container */
+    #historical {
+        margin: 15px 0;
+        padding: 0;
+    }
+
+    /* Dark mode toggle - better positioning for mobile */
+    .floating-button {
+        bottom: 15px;
+        left: 15px;
+        z-index: 1000;
+    }
+
+    .dark-toggle-icon {
+        width: 18px;
+        height: 18px;
+        padding: 8px;
+    }
+}
+
+/* Small mobile devices */
+@media screen and (max-width: 480px) {
+    body {
+        margin-top: 20px;
+    }
+
+    .container {
+        margin-top: 5px !important;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    h3 {
+        font-size: clamp(0.9rem, 4vw, 1.3rem);
+        margin-bottom: 10px;
+    }
+
+    /* Make table more compact on very small screens */
+    table.u-full-width {
+        font-size: 0.85rem;
+    }
+
+    table.u-full-width thead th {
+        font-size: 0.95rem;
+        padding: 6px 2px;
+    }
+
+    table.u-full-width tbody td {
+        padding: 8px 2px;
+        font-size: 0.85rem;
+    }
+
+    /* Smaller dark toggle for small screens */
+    .floating-button {
+        bottom: 10px;
+        left: 10px;
+    }
+
+    .dark-toggle-icon {
+        width: 16px;
+        height: 16px;
+        padding: 7px;
+    }
+}
+
+/* Landscape orientation on mobile */
+@media screen and (max-width: 896px) and (orientation: landscape) {
+    body {
+        margin-top: 20px;
+    }
+
+    .container {
+        margin-top: 5px !important;
+    }
+
+    h3 {
+        font-size: 1.2rem;
+        margin-bottom: 10px;
+    }
+
+    #historical {
+        margin: 10px 0;
+    }
+}
+
+/* Ensure chart is responsive */
+#historical canvas {
+    max-width: 100%;
+    height: auto !important;
+}
+
+/* Fix text alignment for better cross-browser support */
+th[style*="-webkit-left"],
+td[style*="-webkit-left"] {
+    text-align: left !important;
+}
+
+th[style*="text-align:end"],
+td[style*="text-align:end"] {
+    text-align: right !important;
+}
+
+/* Improve touch targets for mobile */
+@media (hover: none) and (pointer: coarse) {
+    a, button, .floating-button {
+        min-height: 44px;
+        min-width: 44px;
+    }
+}

views/sats.hbs

@@ -7,6 +7,7 @@
 
     <link rel="stylesheet" type="text/css" href="/static/skeleton.css">
     <link rel="stylesheet" type="text/css" href="/static/normalize.css">
+    <link rel="stylesheet" type="text/css" href="/static/mobile.css">
     <link rel="shortcut icon" type="image/png" href="/static/favicon.png" />
     <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway&display=swap" rel="stylesheet">
     <script src="/static/chart.min.js"></script>
@@ -108,17 +109,17 @@
                 <table class="u-full-width">
                     <thead>
                         <tr>
-                            <th style="text-align:-webkit-left;font-size:2rem;">{{ date }} </th>
+                            <th style="text-align:left;">{{ date }} </th>
-                            <th style="text-align:end;font-size:2rem;">{{ price }}&nbsp;&nbsp;</th>
+                            <th style="text-align:right;">{{ price }}&nbsp;&nbsp;</th>
-                            <th style="text-align:end;font-size:2rem;white-space: pre;"> {{ percentchange }} </th>
+                            <th style="text-align:right;white-space: pre;"> {{ percentchange }} </th>
                         </tr>
                     </thead>
                     <tbody>
                         {{#each yeardata}}
                         <tr>
-                            <td style="text-align:-webkit-left">{{ this.year }}</td>
+                            <td style="text-align:left">{{ this.year }}</td>
-                            <td style="text-align:end">{{ this.sats }} sats </td>
+                            <td style="text-align:right">{{ this.sats }} sats </td>
-                            <td style="text-align:end">{{ this.percent }} % </td>
+                            <td style="text-align:right">{{ this.percent }} % </td>
                         </tr>
                          {{/each}}
                     </tbody>
@@ -226,7 +227,7 @@
                                             display: true,
                                             text: '{{ subtitle }}',
                                             font: {
-                                                size: 16
+                                                size: window.innerWidth < 768 ? 12 : 16
                                             }
                                         },
                                         legend: {
@@ -257,10 +258,10 @@
                                                         backgroundColor: 'rgba(255, 99, 132, 0.8)',
                                                         color: 'white',
                                                         font: {
-                                                            size: 10,
+                                                            size: window.innerWidth < 768 ? 8 : 10,
                                                             weight: 'bold'
                                                         },
-                                                        padding: 4
+                                                        padding: window.innerWidth < 768 ? 2 : 4
                                                     },
                                                     click: function() {
                                                         marker.click();
@@ -280,7 +281,10 @@
                                                 }
                                             },
                                             ticks: {
-                                                maxTicksLimit: 16
+                                                maxTicksLimit: window.innerWidth < 768 ? 8 : 16,
+                                                font: {
+                                                    size: window.innerWidth < 768 ? 10 : 12
+                                                }
                                             },
                                             grid: {
                                                 display: true
@@ -294,7 +298,10 @@
                                                 callback: function(value) {
                                                     return value.toLocaleString() + ' sats';
                                                 },
-                                                maxTicksLimit: 12
+                                                maxTicksLimit: window.innerWidth < 768 ? 8 : 12,
+                                                font: {
+                                                    size: window.innerWidth < 768 ? 10 : 12
+                                                }
                                             },
                                             grid: {
                                                 display: true