feat: move the update available dialoge always to the bottom
This commit is contained in:
parent
a6e9b36bd6
commit
a18c6ab8d8
2 changed files with 10 additions and 11 deletions
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="update-notification" v-if="updateAvailable">
|
<div class="update-notification" v-if="updateAvailable">
|
||||||
<p>{{ $t('update.available') }}</p>
|
<p>{{ $t('update.available') }}</p>
|
||||||
<x-button @click="refreshApp()" :shadow="false">
|
<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
|
||||||
{{ $t('update.do') }}
|
{{ $t('update.do') }}
|
||||||
</x-button>
|
</x-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -43,24 +43,19 @@ function refreshApp() {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.update-notification {
|
.update-notification {
|
||||||
margin: .5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: $warning;
|
background: $warning;
|
||||||
padding: 0 .25rem;
|
padding: .5rem;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
color: var(--grey-900);
|
color: var(--grey-900);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@media screen and (max-width: $desktop) {
|
position: fixed;
|
||||||
position: fixed;
|
bottom: 1rem;
|
||||||
bottom: 1rem;
|
width: 450px;
|
||||||
margin: 0;
|
left: calc(50vw - 225px);
|
||||||
width: 450px;
|
|
||||||
left: calc(50vw - 225px);
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) {
|
@media screen and (max-width: $tablet) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -3,3 +3,7 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-no-text-wrap {
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue