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

webapp: fix line break for reload button

Browse Source 
if a page uses the reload button, it had only 1 column of space, and
only if the viewport was at least "sm". this is not the case for typical
smartphones, in which case the reload button would appear on its own row
instead of to the right.

we now limit the heading to 10 columns if and only if the reload button
is to be used, otherwise the heading uses all 12 columns, regardless of
the viewport size. the reload buton uses two columns -- if it is
displayed at all.

the font size of the icon is increased slightly.

as the font size of h1 headings changes with the viewport size, we need
to center both the heading and the button vertically.
This commit is contained in:
Bernhard Kirchen 2024-11-11 20:55:13 +01:00
parent d5d66ecfd5
commit 7e19f19655
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/src/components/BasePage.vue
View File

@ -1,9 +1,9 @@
<template>
<div :class="{ 'container-xxl': !isWideScreen, 'container-fluid': isWideScreen }" role="main">
<div class="page-header">
<div class="row">
<div class="col-sm-11">
<h1>
<div class="row mb-3">
<div :class="'align-content-center ' + (showReload ? 'col-10' : 'col-12')">
<h1 class="mb-0">
{{ title }}
<span
v-if="showWebSocket"
@ -14,10 +14,10 @@
></span>
</h1>
</div>
<div class="col-sm-1" v-if="showReload">
<div class="col-2 align-content-center" v-if="showReload">
<button
type="button"
class="float-end btn btn-outline-primary"
class="float-end btn btn-outline-primary fs-5"
@click="$emit('reload')"
v-tooltip
:title="$t('base.Reload')"