iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile layout issues

Browse Source
This commit is contained in:
0x1d
2025-09-20 12:19:21 +02:00
parent 03e4c50766
commit 4538853ec7
2 changed files with 156 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
public/styles/main.css
View File

@@ -416,6 +416,10 @@ p {
margin-bottom: 2rem;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
gap: 1rem;
width: 100%;
box-sizing: border-box;
}
.gauge-container {
@@ -423,7 +427,9 @@ p {
flex-direction: column;
align-items: center;
flex: 1;
max-width: 110px;
max-width: 130px;
min-width: 80px;
box-sizing: border-box;
}
.gauge {
@@ -433,6 +439,66 @@ p {
margin-bottom: 0.3rem;
}
/* Mobile responsive gauges */
@media (max-width: 768px) {
.resource-gauges {
justify-content: center;
gap: 0.75rem;
padding: 0.75rem;
}
.gauge-container {
flex: 0 0 auto;
max-width: 90px;
min-width: 70px;
}
.gauge {
width: 90px;
height: 90px;
}
}
@media (max-width: 480px) {
.resource-gauges {
justify-content: center;
gap: 0.75rem;
padding: 0.5rem;
}
.gauge-container {
flex: 0 0 calc(50% - 0.375rem);
max-width: calc(50% - 0.375rem);
min-width: 0;
}
.gauge {
width: 100px;
height: 100px;
}
}
@media (max-width: 360px) {
.resource-gauges {
justify-content: center;
gap: 0.5rem;
padding: 0.25rem;
}
.gauge-container {
flex: 0 0 calc(50% - 0.25rem);
max-width: calc(50% - 0.25rem);
min-width: 0;
}
.gauge {
width: 80px;
height: 80px;
max-width: 100%;
max-height: 100%;
}
}
.gauge-circle {
position: relative;
width: 100%;
@@ -508,6 +574,49 @@ p {
font-weight: 400;
}
/* Responsive gauge text sizes */
@media (max-width: 768px) {
.gauge-value {
font-size: 1rem;
}
.gauge-label {
font-size: 0.7rem;
}
.gauge-detail {
font-size: 0.6rem;
}
}
@media (max-width: 480px) {
.gauge-value {
font-size: 0.9rem;
}
.gauge-label {
font-size: 0.65rem;
}
.gauge-detail {
font-size: 0.55rem;
}
}
@media (max-width: 360px) {
.gauge-value {
font-size: 0.8rem;
}
.gauge-label {
font-size: 0.6rem;
}
.gauge-detail {
font-size: 0.5rem;
}
}
/* Dynamic gauge colors based on percentage */
.gauge-empty .gauge-circle {
background: rgba(255, 255, 255, 0.1);
@@ -864,53 +973,29 @@ p {
.tasks-summary {
flex-direction: column;
gap: 1rem;
padding: 1rem;
padding: 0.75rem;
text-align: center;
}
.tasks-summary-left {
flex-direction: column;
gap: 1rem;
flex-direction: row;
gap: 0.5rem;
align-items: center;
justify-content: center;
}
.tasks-summary-right {
flex-direction: column;
gap: 0.75rem;
flex-direction: row;
gap: 0.5rem;
align-items: center;
}
.summary-stat {
min-width: 70px;
padding: 0.5rem 0.75rem;
}
.summary-stat-value {
font-size: 1.25rem;
}
.summary-stat-label {
font-size: 0.7rem;
}
.summary-icon {
width: 40px;
height: 40px;
font-size: 1.25rem;
margin-right: 0;
margin-bottom: 0.5rem;
}
}
@media (max-width: 480px) {
.tasks-summary {
padding: 0.75rem;
gap: 0.75rem;
justify-content: center;
flex-wrap: nowrap;
}
.summary-stat {
min-width: 60px;
padding: 0.4rem 0.6rem;
flex: 0 0 auto;
}
.summary-stat-value {
@@ -925,6 +1010,41 @@ p {
width: 36px;
height: 36px;
font-size: 1.1rem;
margin-right: 0.5rem;
margin-bottom: 0;
}
}
@media (max-width: 480px) {
.tasks-summary {
padding: 0.5rem;
gap: 0.75rem;
}
.tasks-summary-left,
.tasks-summary-right {
gap: 0.25rem;
}
.summary-stat {
min-width: 50px;
padding: 0.3rem 0.4rem;
flex: 0 0 auto;
}
.summary-stat-value {
font-size: 1rem;
}
.summary-stat-label {
font-size: 0.6rem;
}
.summary-icon {
width: 32px;
height: 32px;
font-size: 1rem;
margin-right: 0.25rem;
}
}