fix: ios pwa status bar #545

This commit is contained in:
Daan Wijns 2024-01-28 11:35:38 +01:00
parent cf84840d36
commit 196aff6d60
4 changed files with 15 additions and 7 deletions

View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width" />
<meta name="description" content="VueTorrent" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@ -18,11 +18,12 @@
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials" />
<script src="/registerSW.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but Vuetorrent doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div style="padding-top: calc(env(safe-area-inset-top) * 0.5)" id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View file

@ -184,7 +184,7 @@ const onCategoryChanged = () => {
scrollable
:transition="openSuddenly ? 'none' : 'dialog-bottom-transition'">
<v-card>
<v-card-title>
<v-card-title class="ios-margin">
<v-toolbar color="transparent">
<v-toolbar-title>{{ t('dialogs.add.title') }}</v-toolbar-title>
<v-btn icon="mdi-close" @click="close" />
@ -427,5 +427,3 @@ const onCategoryChanged = () => {
</v-card>
</v-dialog>
</template>
<style scoped></style>

View file

@ -20,7 +20,7 @@ const toggleDrawer = () => {
</script>
<template>
<v-navigation-drawer v-model="isDrawerOpen" :location="isDrawerRight ? 'right' : 'left'" color="primary" disable-route-watcher>
<v-navigation-drawer class="ios-padding" v-model="isDrawerOpen" :location="isDrawerRight ? 'right' : 'left'" color="primary" disable-route-watcher>
<v-list class="clean-px px-2 pt-0">
<v-list-item v-if="showCurrentSpeed">
<CurrentSpeed />
@ -57,7 +57,7 @@ const toggleDrawer = () => {
</template>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar class="ios-padding">
<v-app-bar-nav-icon @click="toggleDrawer" />
<v-app-bar-title>
<span v-if="$vuetify.display.smAndUp" class="text-accent">Vue</span>

View file

@ -113,3 +113,12 @@ $sideborder-margin: 6px;
border-radius: 16px;
background: #6b7280;
}
/* iOS PWA */
.ios-padding {
padding-top: calc(env(safe-area-inset-top) * 0.5);
}
.ios-margin {
margin-top: calc(env(safe-area-inset-top) * 0.5);
}