patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: improve styling of hints on home view

Browse Source 
* increase the spacing between the icon and the text.
* put the text into its own box so it does not flow around the icon.
* vertically center the icon to account for multiple lines of text.
* vertically center the text to account for a single line of text.

closes #1441.
This commit is contained in:
Bernhard Kirchen 2024-12-03 20:33:30 +01:00 committed by Thomas Basler
parent 241ee1e99d
commit 8247070aae
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
webapp/src/components/HintView.vue
View File

@ -1,16 +1,29 @@
<template> <template>
<BootstrapAlert :show="hints.radio_problem" variant="danger"> <BootstrapAlert :show="hints.radio_problem" variant="danger">
<BIconBroadcast class="fs-4" /> {{ $t('hints.RadioProblem') }} <div class="d-flex">
<div class="align-content-center"><BIconBroadcast class="fs-4" /></div>
<div class="align-content-center ms-3">{{ $t('hints.RadioProblem') }}</div>
</div>
</BootstrapAlert> </BootstrapAlert>
<BootstrapAlert :show="hints.time_sync" variant="danger"> <BootstrapAlert :show="hints.time_sync" variant="danger">
<BIconClock class="fs-4" /> {{ $t('hints.TimeSync') }} <div class="d-flex">
<a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a> <div class="align-content-center"><BIconClock class="fs-4" /></div>
<div class="align-content-center ms-3">
{{ $t('hints.TimeSync') }}
<a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a>
</div>
</div>
</BootstrapAlert> </BootstrapAlert>
<BootstrapAlert :show="hints.default_password" variant="danger"> <BootstrapAlert :show="hints.default_password" variant="danger">
<BIconExclamationCircle class="fs-4" /> {{ $t('hints.DefaultPassword') }} <div class="d-flex">
<a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a> <div class="align-content-center"><BIconExclamationCircle class="fs-4" /></div>
<div class="align-content-center ms-3">
{{ $t('hints.DefaultPassword') }}
<a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a>
</div>
</div>
</BootstrapAlert> </BootstrapAlert>
</template> </template>