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 = [ const APP_SHELL_URLS = [
// '/', // Let NetworkFirst handle '/' // '/', // Let NetworkFirst handle '/'
'/manifest.json', '/manifest.json',

11
src/assets/tailwind.css
View File

@@ -7,6 +7,17 @@ body {
overscroll-behavior-y: contain; /* Prevents pull-to-refresh on mobile */ 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 */ /* Basic button styling */
.btn { .btn {
@apply px-4 py-2 rounded font-semibold focus:outline-none focus:ring-2 focus:ring-opacity-50; @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> </div>
<!-- Player Name --> <!-- 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 }} {{ player.name }}
</h2> </h2>
<TimerDisplay <TimerDisplay
@@ -42,7 +42,6 @@
class="text-4xl sm:text-5xl md:text-6xl lg:text-6xl xl:text-5xl" 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="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> </div>
</template> </template>
@@ -109,9 +108,9 @@ const calculateAvatarSize = () => {
const availableHeight = screenHeight / 2; const availableHeight = screenHeight / 2;
let size = Math.min(availableHeight * 0.5, screenWidth * 0.4, 175); let size = Math.min(availableHeight * 0.5, screenWidth * 0.4, 175);
if (screenWidth < 960) { if (screenWidth < 768) { // Mobile
size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 250); size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 230);
} else if (screenWidth < 1024) { } else if (screenWidth < 1024) { // Tablet
size = Math.min(availableHeight * 0.55, screenWidth * 0.45, 180); size = Math.min(availableHeight * 0.55, screenWidth * 0.45, 180);
} }
size = Math.max(size, 100); size = Math.max(size, 100);

2
src/views/GameView.vue
View File

@@ -1,5 +1,5 @@
<template> <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 class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
<!-- ... header content ... --> <!-- ... header content ... -->
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">