2HoursProject/nexus-timer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

visuals fixed on mobile

Browse Source
This commit is contained in:
cpu
2025-05-09 12:09:15 +02:00
parent 04379a4cec
commit ec39b8d774
4 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/PlayerDisplay.vue
View File

@@ -32,7 +32,7 @@
</div>
<!-- Player Name -->
<h2 class="font-semibold mb-6 md:mb-6 text-5xl sm:text-2xl md:text-3xl lg:text-5xl">
<h2 class="font-semibold mb-4 md:mb-6 text-5xl sm:text-2xl md:text-3xl lg:text-5xl">
{{ player.name }}
</h2>
<TimerDisplay
@@ -42,7 +42,6 @@
class="text-4xl sm:text-5xl md:text-6xl lg:text-6xl xl:text-5xl"
/>
<p v-if="player.isSkipped" class="text-red-500 dark:text-red-400 mt-1 md:mt-2 font-semibold text-sm md:text-base lg:text-lg">SKIPPED</p>
<p v-if="isNextPlayerArea && !player.isSkipped" class="mt-1 md:mt-2 text-xs md:text-sm text-gray-600 dark:text-gray-400">(Swipe up to pass turn)</p>
</div>
</template>
@@ -109,9 +108,9 @@ const calculateAvatarSize = () => {
const availableHeight = screenHeight / 2;
let size = Math.min(availableHeight * 0.5, screenWidth * 0.4, 175);
if (screenWidth < 960) {
size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 250);
} else if (screenWidth < 1024) {
if (screenWidth < 768) { // Mobile
size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 230);
} else if (screenWidth < 1024) { // Tablet
size = Math.min(availableHeight * 0.55, screenWidth * 0.45, 180);
}
size = Math.max(size, 100);