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

2
public/service-worker.js
View File

@@ -1,4 +1,4 @@
const CACHE_VERSION = 'nexus-timer-cache-v3.3';
const CACHE_VERSION = 'nexus-timer-cache-v3.4';
const APP_SHELL_URLS = [
// '/', // Let NetworkFirst handle '/'
'/manifest.json',

11
src/assets/tailwind.css
View File

@@ -7,6 +7,17 @@ body {
overscroll-behavior-y: contain; /* Prevents pull-to-refresh on mobile */
}
/* Safe area insets for mobile devices (status bar, home indicator) */
.safe-area-padding {
padding-top: env(safe-area-inset-top);
/* padding-bottom: env(safe-area-inset-bottom); */
}
.safe-area-height {
height: calc(100dvh - env(safe-area-inset-top));
min-height: 0;
}
/* Basic button styling */
.btn {
@apply px-4 py-2 rounded font-semibold focus:outline-none focus:ring-2 focus:ring-opacity-50;

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);

2
src/views/GameView.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
<div class="flex flex-col safe-area-height safe-area-padding overflow-hidden" :class="{'dark': theme === 'dark'}">
<header class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
<!-- ... header content ... -->
<div class="flex items-center space-x-2">