noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added overlay on portrait screens to force switching to landscape

Browse Source 
(Needs better styling/design)
This commit is contained in:
Colin Kallemein 2025-01-22 22:36:08 +01:00
parent 41005735f9
commit 175d7c6199
3 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/scss/main.scss
View File

@ -31,6 +31,12 @@ body {
@apply outline-offset-2;
@apply rounded-sm;
}
@media only screen and (orientation:portrait) and (max-width: 768px) {
.portrait-mode-notice {
@apply block;
}
}
}
h1,

3
src/components/screens/Characters.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="relative max-lg:h-dvh flex flex-row-reverse">
<div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
<span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
</div>
<div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
<div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>

3
src/components/screens/Game.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="flex justify-center items-center h-dvh relative">
<div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
<span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
</div>
<Game :config="gameConfig" @create="createGame">
<Scene name="main" @preload="preloadScene" @create="createScene">
<Menu />