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

Web: Use two-column layout

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-22 16:28:38 +02:00 committed by Francesco Siddi
parent 3b719dca77
commit 68370a1df4
2 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/app/src/assets/base.css
View File

@ -109,6 +109,15 @@ body {
width: calc(100% - calc(var(--grid-gap) * 2));
}
body.is-two-columns #app {
grid-template-areas:
"header header"
"col-1 col-2"
"footer footer";
grid-template-columns: 1fr 1fr;
grid-template-rows: var(--header-height) 1fr var(--footer-height);
}
@media (max-width: 1280px) {
#app {
grid-template-areas:
@ -121,6 +130,18 @@ body {
}
}
@media (max-width: 960px) {
body.is-two-columns #app {
grid-template-areas:
"header"
"col-1"
"col-2"
"footer";
grid-template-columns: 1fr;
grid-template-rows: var(--header-height) 1fr 1fr var(--footer-height);
}
}
.col {
background-color: var(--color-background-column);
border-radius: var(--border-radius);

2
web/app/src/views/WorkersView.vue
View File

@ -50,6 +50,8 @@ export default {
mounted() {
window.workersView = this;
this._fetchWorker(this.workerID);
document.body.classList.add('is-two-columns');
},
watch: {
workerID(newWorkerID, oldWorkerID) {