blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: fix layout of jobs table

Browse Source 
This ensures it uses virtual DOM, which is waaaaaaay faster.
CSS variables are used to compute the max height for the Jobs Table grid
cell, to make sure the Tabulator height can be set to 100% without
overflowing.
This commit is contained in:
Sybren A. Stüvel 2022-04-14 09:39:50 +02:00
parent 93b065217e
commit 315c7cfde7
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/src/App.vue
View File

@ -129,6 +129,12 @@ export default {
<style> <style>
@import "tabulator-tables/dist/css/tabulator_midnight.min.css"; @import "tabulator-tables/dist/css/tabulator_midnight.min.css";
:root {
--header-height: 25px;
--footer-height: 25px;
--grid-gap: 4px;
}
body { body {
margin: 0; margin: 0;
} }
@ -144,7 +150,8 @@ body {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 25px 1fr 25px; grid-template-rows: var(--header-height) 1fr var(--footer-height);
grid-gap: var(--grid-gap);
grid-template-areas: grid-template-areas:
"header header header" "header header header"
"col-1 col-2 col-3" "col-1 col-2 col-3"
@ -176,6 +183,7 @@ h3.sub-title {
.col-1 { .col-1 {
grid-area: col-1; grid-area: col-1;
max-height: calc(100vh - var(--header-height) - var(--footer-height) - 2*var(--grid-gap));
} }
.col-2 { .col-2 {

2
web/app/src/components/JobsTable.vue
View File

@ -35,7 +35,7 @@ export default {
initialSort: [ initialSort: [
{ column: "updated", dir: "desc" }, { column: "updated", dir: "desc" },
], ],
height: "80%", height: "100%",
data: [], // Will be filled via a Flamenco API request. data: [], // Will be filled via a Flamenco API request.
selectable: 1, // Only allow a single row to be selected at a time. selectable: 1, // Only allow a single row to be selected at a time.
}; };