Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: fix bottom spacing (#28658)

Browse source
This commit is contained in:
Michael Geers 2026-03-30 17:39:55 +02:00 • committed by GitHub
parent f6e4a5b312
commit 32cfc5ac6a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 12 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

7
assets/css/app.css
View file

@ -93,6 +93,7 @@
--safe-area-inset-right: env(safe-area-inset-right, 0px);
--tab-bar-height: 3rem;
--bottom-space: 1.5px;
--tab-bar-background: var(--evcc-background);
--evcc-backdrop-blur: blur(20px);
}
@ -686,13 +687,13 @@ html.app .hide-in-app {
display: none !important;
}
html.app .safe-area-inset {
.safe-area-inset {
padding: max(1rem, var(--safe-area-inset-top)) var(--safe-area-inset-right)
var(--safe-area-inset-bottom) var(--safe-area-inset-left);
calc(var(--safe-area-inset-bottom) + var(--bottom-space)) var(--safe-area-inset-left);
position: relative;
}
html.app .safe-area-inset::before {
.safe-area-inset::before {
content: "";
display: block;
position: fixed;

1
assets/js/components/Forecast/Co2Chart.vue
View file

@ -122,7 +122,6 @@ export default defineComponent({
<style scoped>
.forecast-chart-scroll {
overflow-x: auto;
margin-bottom: 1.5rem;
padding-bottom: 4px;
}
</style>

1
assets/js/components/Forecast/PriceChart.vue
View file

@ -168,7 +168,6 @@ export default defineComponent({
<style scoped>
.forecast-chart-scroll {
overflow-x: auto;
margin-bottom: 1.5rem;
padding-bottom: 4px;
}
</style>

1
assets/js/components/Forecast/SolarChart.vue
View file

@ -133,7 +133,6 @@ export default defineComponent({
<style scoped>
.forecast-chart-scroll {
overflow-x: auto;
margin-bottom: 1.5rem;
padding-bottom: 4px;
}
</style>

9
assets/js/components/Site/Site.vue
View file

@ -1,8 +1,5 @@
<template>
<div
class="d-flex flex-column site safe-area-inset"
:class="{ 'site--bottomtabs': experimental }"
>
<div class="d-flex flex-column site safe-area-inset">
<div class="container px-4 top-area">
<div
class="d-flex justify-content-between align-items-center my-3 my-md-4"
@ -240,10 +237,6 @@ export default defineComponent({
min-height: 100vh;
min-height: 100dvh;
}
.site--bottomtabs {
min-height: calc(100vh - var(--tab-bar-height) - var(--safe-area-inset-bottom));
min-height: calc(100dvh - var(--tab-bar-height) - var(--safe-area-inset-bottom));
}
.content-area {
flex-grow: 1;
z-index: 1;

2
assets/js/views/App.vue
View file

@ -275,6 +275,6 @@ export default defineComponent({
min-height: 100dvh;
}
.app--bottomtabs {
padding-bottom: var(--tab-bar-height);
--bottom-space: calc(var(--tab-bar-height) + 1.5rem);
}
</style>

4
assets/js/views/Config.vue
View file

@ -6,7 +6,7 @@
:title="$t('config.main.title')"
:notifications="notifications"
/>
<div class="wrapper pb-5">
<div class="wrapper mb-3">
<AuthSuccessBanner
v-if="callbackCompleted || callbackError"
:provider-id="callbackCompleted"
@ -357,7 +357,7 @@
<hr class="my-5" />
<h2 class="my-4 mt-5">{{ $t("config.section.system") }}</h2>
<div class="round-box p-4 d-flex gap-4 mb-5 flex-wrap">
<div class="round-box p-4 d-flex gap-4 flex-wrap">
<router-link to="/log" class="btn btn-outline-secondary">
{{ $t("config.system.logs") }}
</router-link>

5
assets/js/views/Forecast.vue
View file

@ -119,7 +119,7 @@
/>
</section>
<section v-if="forecast.co2" class="mb-5">
<section v-if="forecast.co2">
<h3
class="fw-normal my-4 d-flex gap-3 flex-wrap align-items-baseline overflow-hidden"
>
@ -311,8 +311,7 @@ export default defineComponent({
<style scoped>
.empty-container {
min-height: calc(100dvh - var(--tab-bar-height) - var(--safe-area-inset-bottom));
padding-bottom: calc(var(--tab-bar-height) + var(--safe-area-inset-bottom));
min-height: calc(100dvh - var(--bottom-space));
}
.empty-box {
background-color: var(--evcc-box);

2
assets/js/views/Log.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="root safe-area-inset">
<div class="container d-flex h-100 flex-column px-0 pb-4">
<div class="container d-flex h-100 flex-column px-0 pb-0 pb-md-3">
<TopHeader :title="$t('log.title')" class="mx-4" />
<div class="logs d-flex flex-column overflow-hidden flex-grow-1 px-4 mx-2 mx-sm-4">
<div class="flex-grow-0 row py-4">

2
assets/js/views/Sessions.vue
View file

@ -152,7 +152,7 @@
:currency="currency"
@show-session="showDetails"
/>
<div class="d-flex gap-2 mt-1 mb-5">
<div class="d-flex gap-2 my-3">
<a
class="btn btn-outline-secondary"
tabindex="0"