mirror of
https://github.com/aljazceru/satshkd-vercel.git
synced 2025-12-17 05:04:24 +01:00
Merge pull request #9 from aljazceru/claude/mobile-responsive-design-01K8gfo4Ba3j4YEXHMarLQ2M
Add comprehensive mobile responsiveness to website
This commit is contained in:
GitHub
193
public/static/mobile.css
Normal file
193
public/static/mobile.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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:end;font-size:2rem;">{{ price }} </th>
|
||||
<th style="text-align:end;font-size:2rem;white-space: pre;"> {{ percentchange }} </th>
|
||||
<th style="text-align:left;">{{ date }} </th>
|
||||
<th style="text-align:right;">{{ price }} </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:end">{{ this.sats }} sats </td>
|
||||
<td style="text-align:end">{{ this.percent }} % </td>
|
||||
<td style="text-align:left">{{ this.year }}</td>
|
||||
<td style="text-align:right">{{ this.sats }} sats </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
|
||||
|
||||
Reference in New Issue
Block a user