giers10/virtual_interdimensional_spirit_summoner
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactor spirit-info styling for better mobile and desktop compatibility

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 20:04:19 +02:00
parent c4130c5b54
commit e61296c05e
1 changed files with 34 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
node/server/public/index.html
View File

@@ -47,43 +47,32 @@ canvas {
overflow-wrap: normal; overflow-wrap: normal;
} }
/* === Standard: Mobile/klein - Bild oben, Text unten === */
.spirit-info-flex { .spirit-info-flex {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 16px;
}
#spirit-info img {
display: block;
margin: 0 auto 18px auto;
max-width: 84vw;
max-height: 30vh;
border-radius: 12px;
width: 100%;
height: auto;
object-fit: contain;
background: transparent;
}
#spirit-info .spirit-info-content {
width: 100%;
max-width: 100%;
min-width: 0;
word-break: break-word;
} }
#spirit-info { /* === Breiter Desktop ODER Mobile Landscape: Bild links, Text rechts === */
box-sizing: border-box; @media (min-width: 750px) and (pointer: fine), (pointer: coarse) and (orientation: landscape) and (min-width: 750px) {
position: fixed;
overflow-x: hidden;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.94);
color: #fff;
border-radius: 18px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 12px 64px #000a;
width: 600px;
max-width: calc(100vw - 48px);
min-width: 320px;
max-height: calc(100dvh - 48px);
overflow-y: auto;
padding: 40px 36px 32px 36px;
z-index: 9999;
margin: 0;
}
/* === 1. Desktop immer: Bild links, Text rechts === */
@media (pointer: fine) {
#spirit-info {
width: 600px;
max-width: calc(100vw - 48px);
min-width: 320px;
max-height: calc(100dvh - 48px);
padding: 40px 36px 32px 36px;
}
.spirit-info-flex { .spirit-info-flex {
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
@@ -111,71 +100,21 @@ canvas {
} }
} }
/* === 2. Mobile Portrait: Bild oben, Text unten === */ /* #spirit-info: Größe Desktop vs. Mobile */
@media (pointer: coarse) and (orientation: portrait) { #spirit-info {
#spirit-info { width: 90vw;
width: 90vw; max-width: 98vw;
max-width: 98vw; min-width: 0;
min-width: 0; max-height: 82dvh;
max-height: 82dvh; padding: 8vw 4vw 4vw 4vw;
padding: 8vw 4vw 4vw 4vw;
}
.spirit-info-flex {
flex-direction: column;
gap: 16px;
}
#spirit-info img {
display: block;
margin: 0 auto 18px auto;
max-width: 84vw;
max-height: 30vh;
border-radius: 12px;
width: 100%;
height: auto;
object-fit: contain;
background: transparent;
}
#spirit-info .spirit-info-content {
width: 100%;
max-width: 100%;
min-width: 0;
word-break: break-word;
}
} }
@media (min-width: 750px) and (pointer: fine) {
/* === 3. Mobile Landscape: Bild links, Text rechts === */
@media (pointer: coarse) and (orientation: landscape) {
#spirit-info { #spirit-info {
width: 96vw; width: 600px;
max-width: 800px; max-width: calc(100vw - 64px);
min-width: 0; min-width: 320px;
max-height: 82dvh; max-height: calc(100dvh - 64px);
padding: 4vw 4vw 4vw 4vw; padding: 40px 40px 36px 40px;
}
.spirit-info-flex {
flex-direction: row;
align-items: flex-start;
gap: 24px;
}
#spirit-info img {
max-width: 160px;
min-width: 80px;
width: 34vw;
max-height: 32vh;
height: auto;
object-fit: contain;
border-radius: 12px;
background: transparent;
flex-shrink: 0;
margin: 0;
display: block;
}
#spirit-info .spirit-info-content {
flex: 1 1 0;
min-width: 0;
max-width: 450px;
overflow-wrap: break-word;
word-break: break-word;
} }
} }
</style> </style>