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

Better videos list header styling

This commit is contained in:
Chocobozzz 2023-10-12 09:06:40 +02:00
parent 5bd42bbca7
commit a1c96a63a0
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/shared/shared-video-miniature/videos-list.component.html
View File

@ -1,6 +1,6 @@
<div class="margin-content">
<div class="videos-header">
<h1 *ngIf="displayTitle" class="title" placement="bottom" [ngbTooltip]="titleTooltip" container="body">
<div class="videos-header pt-4 mb-4">
<h1 *ngIf="displayTitle" class="title mb-1" placement="bottom" [ngbTooltip]="titleTooltip" container="body">
{{ title }}
</h1>
@ -10,7 +10,7 @@
<my-feed [syndicationItems]="syndicationItems"></my-feed>
</div>
<div class="action-block">
<div *ngIf="headerActions.length !== 0" class="action-block mt-3">
<ng-container *ngFor="let action of headerActions">
<a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
<ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>

20
client/src/app/shared/shared-video-miniature/videos-list.component.scss
View File

@ -4,12 +4,11 @@
@use '_miniature' as *;
// Cannot set margin top to videos-header because of the main header fixed position
$margin-top: 30px;
$margin-top: 2rem;
.videos-header {
display: grid;
grid-template-columns: auto 1fr auto;
margin-bottom: 30px;
.title,
.title-subscription {
@ -21,9 +20,6 @@ $margin-top: 30px;
color: pvar(--mainForegroundColor);
display: inline-block;
font-weight: $font-semibold;
margin-top: $margin-top;
margin-bottom: 0;
}
.title-subscription {
@ -39,7 +35,6 @@ $margin-top: 30px;
.action-block {
grid-column: 3;
grid-row: 1/3;
margin-top: $margin-top;
}
my-feed {
@ -77,15 +72,15 @@ $margin-top: 30px;
@include margin-right(pvar(--horizontalMarginContent));
.video-wrapper {
margin-bottom: 15px;
margin-bottom: 1rem;
}
}
@media screen and (max-width: $mobile-view) {
.videos-header,
my-video-filters-header {
@include margin-left(15px);
@include margin-right(15px);
@include margin-left(1rem);
@include margin-right(1rem);
display: inline-block;
}
@ -95,9 +90,8 @@ $margin-top: 30px;
}
.videos-header {
flex-direction: column;
align-items: center;
height: auto;
margin-bottom: 10px;
text-align: center;
width: 100%;
margin-bottom: 1rem;
}
}