Fix for banner and too far scrolling (#2399)

* Fix for banner and too far scrolling

* Update App.css
This commit is contained in:
Luca Hohmann 2022-07-16 11:30:38 +02:00 committed by GitHub
parent e489825a4a
commit f7b9c5acca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 22 deletions

View File

@ -7,6 +7,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
height: 100%;
} }
.routerView { .routerView {
@ -15,14 +16,13 @@
} }
.banner { .banner {
margin: 16px auto 0 auto; width: 80%;
width: 90%; margin: 0 auto;
} }
.flexBox { .flexBox {
margin: 0; margin-top: 60px;
flex: 1 1 0%; display: block;
flex-direction: column;
} }
#changeLogText { #changeLogText {
@ -44,7 +44,8 @@
} }
.banner { .banner {
width: 90%; width: 80%;
margin-top: 60px;
} }
.flexBox { .flexBox {

View File

@ -9,21 +9,25 @@
> >
<top-nav ref="topNav" /> <top-nav ref="topNav" />
<side-nav ref="sideNav" /> <side-nav ref="sideNav" />
<ft-flex-box
<ft-flex-box class="flexBox"> class="flexBox routerView"
<ft-notification-banner >
v-if="showUpdatesBanner" <div
class="banner" v-if="showUpdatesBanner || showBlogBanner"
:message="updateBannerMessage" >
@click="handleUpdateBannerClick" <ft-notification-banner
/> v-if="showUpdatesBanner"
<ft-notification-banner class="banner"
v-if="showBlogBanner" :message="updateBannerMessage"
class="banner" @click="handleUpdateBannerClick"
:message="blogBannerMessage" />
@click="handleNewBlogBannerClick" <ft-notification-banner
/> v-if="showBlogBanner"
class="banner"
:message="blogBannerMessage"
@click="handleNewBlogBannerClick"
/>
</div>
<transition <transition
v-if="dataReady" v-if="dataReady"
mode="out-in" mode="out-in"
@ -34,7 +38,7 @@
ref="router" ref="router"
class="routerView" class="routerView"
/> />
<!-- </keep-alive> --> <!-- </keep-alive> -->
</transition> </transition>
</ft-flex-box> </ft-flex-box>