Web: header tweaks to get the layout a bit cleaner

This commit is contained in:
Sybren A. Stüvel 2022-04-15 16:29:30 +02:00
parent d099a31531
commit 78a3e5faf0

@ -1,7 +1,8 @@
<template> <template>
<header>{{ flamencoName }} <header>{{ flamencoName }}</header>
<header class="right">
<api-spinner :numRunningQueries="numRunningQueries" /> <api-spinner :numRunningQueries="numRunningQueries" />
<span class='flamenco-version'>version: {{ flamencoVersion }}</span> version: {{ flamencoVersion }}
</header> </header>
<div class="col-1"> <div class="col-1">
<jobs-table ref="jobsTable" :apiClient="apiClient" @selectedJobChange="onSelectedJobChanged" /> <jobs-table ref="jobsTable" :apiClient="apiClient" @selectedJobChange="onSelectedJobChanged" />
@ -157,20 +158,27 @@ body {
grid-template-rows: var(--header-height) 1fr var(--footer-height); grid-template-rows: var(--header-height) 1fr var(--footer-height);
grid-gap: var(--grid-gap); grid-gap: var(--grid-gap);
grid-template-areas: grid-template-areas:
"header header header" "header header header-right"
"col-1 col-2 col-3" "col-1 col-2 col-3"
"footer footer footer"; "footer footer footer";
} }
header { header,
grid-area: header; header.right {
background-color: #333; background-color: #333;
color: #EEE; color: #EEE;
} }
header span.flamenco-version { header {
float: right; grid-area: header;
font-size: small; padding-left: 0.2rem;
}
header.right {
grid-area: header-right;
text-align: right;
font-size: smaller;
padding-right: 0.4rem;
} }
h2.column-title { h2.column-title {