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

Fix studio page responsive

pull/6610/head
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

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

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

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

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