feat: move the update available dialoge always to the bottom

This commit is contained in:
kolaente 2022-09-14 19:06:34 +02:00
parent a6e9b36bd6
commit a18c6ab8d8
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 10 additions and 11 deletions

View file

@ -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;

View file

@ -3,3 +3,7 @@
display: none !important; display: none !important;
} }
} }
.has-no-text-wrap {
white-space: nowrap !important;
}