interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix studio page responsive

This commit is contained in:
Chocobozzz 2024-09-05 16:08:50 +02:00
parent e0901185ff
commit 82c15dd48e
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/app/+video-studio/edit/video-studio-edit.component.html
View File

@ -1,7 +1,7 @@
<div class="margin-content">
<h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
<div class="columns">
<div class="grid-container">
<form role="form" [formGroup]="form">
<div class="section cut" formGroupName="cut">
@ -69,20 +69,17 @@
></my-button>
</form>
<div class="embed-container">
<div class="mb-1 fw-bold" i18n>Video before edition</div>
<my-embed [video]="video"></my-embed>
</div>
<div class="information">
<div>
<div class="mb-1 fw-bold" i18n>Video before edition</div>
<my-embed [video]="video"></my-embed>
</div>
<div class="tasks-container" *ngIf="!noEdition()">
<div class="mb-1 fw-bold" i18n>Edition tasks:</div>
<div *ngIf="!noEdition()">
<div class="mb-1 fw-bold" i18n>Edition tasks:</div>
<ol>
<li *ngFor="let task of getTasksSummary()">{{ task }}</li>
</ol>
</div>
<ol>
<li *ngFor="let task of getTasksSummary()">{{ task }}</li>
</ol>
</div>
</div>
</div>

48
client/src/app/+video-studio/edit/video-studio-edit.component.scss
View File

@ -1,20 +1,48 @@
@use '_variables' as *;
@use '_mixins' as *;
.columns {
display: flex;
.grid-container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
.information {
width: 100%;
@include rfs(3rem, column-gap);
@include rfs(2rem, row-gap);
@include margin-left(50px);
form {
grid-column: 1;
grid-row: 1 / 3;
}
> div {
margin-bottom: 30px;
.embed-container {
grid-column: 2;
grid-row: 1;
}
.tasks-container {
grid-column: 2;
grid-row: 2;
}
}
@include on-small-main-col {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr;
form {
grid-column: 1;
grid-row: 2;
}
@media screen and (max-width: $small-view) {
display: none;
.embed-container {
grid-column: 1;
grid-row: 1;
}
.tasks-container {
grid-column: 1;
grid-row: 3;
}
}
}
@ -56,7 +84,7 @@ h2 {
}
@media screen and (max-width: $min-width) {
min-width: none;
min-width: 100%;
}
}