borekon/PeerTube_original
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better videos list header styling

Browse Source
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="margin-content">
<div class="videos-header"> <div class="videos-header pt-4 mb-4">
<h1 *ngIf="displayTitle" class="title" placement="bottom" [ngbTooltip]="titleTooltip" container="body"> <h1 *ngIf="displayTitle" class="title mb-1" placement="bottom" [ngbTooltip]="titleTooltip" container="body">
{{ title }} {{ title }}
</h1> </h1>
@ -10,7 +10,7 @@
<my-feed [syndicationItems]="syndicationItems"></my-feed> <my-feed [syndicationItems]="syndicationItems"></my-feed>
</div> </div>
<div class="action-block"> <div *ngIf="headerActions.length !== 0" class="action-block mt-3">
<ng-container *ngFor="let action of headerActions"> <ng-container *ngFor="let action of headerActions">
<a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active"> <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
<ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container> <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 *; @use '_miniature' as *;
// Cannot set margin top to videos-header because of the main header fixed position // Cannot set margin top to videos-header because of the main header fixed position
$margin-top: 30px; $margin-top: 2rem;
.videos-header { .videos-header {
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
margin-bottom: 30px;
.title, .title,
.title-subscription { .title-subscription {
@ -21,9 +20,6 @@ $margin-top: 30px;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
display: inline-block; display: inline-block;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-top: $margin-top;
margin-bottom: 0;
} }
.title-subscription { .title-subscription {
@ -39,7 +35,6 @@ $margin-top: 30px;
.action-block { .action-block {
grid-column: 3; grid-column: 3;
grid-row: 1/3; grid-row: 1/3;
margin-top: $margin-top;
} }
my-feed { my-feed {
@ -77,15 +72,15 @@ $margin-top: 30px;
@include margin-right(pvar(--horizontalMarginContent)); @include margin-right(pvar(--horizontalMarginContent));
.video-wrapper { .video-wrapper {
margin-bottom: 15px; margin-bottom: 1rem;
} }
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
.videos-header, .videos-header,
my-video-filters-header { my-video-filters-header {
@include margin-left(15px); @include margin-left(1rem);
@include margin-right(15px); @include margin-right(1rem);
display: inline-block; display: inline-block;
} }
@ -95,9 +90,8 @@ $margin-top: 30px;
} }
.videos-header { .videos-header {
flex-direction: column; text-align: center;
align-items: center; width: 100%;
height: auto; margin-bottom: 1rem;
margin-bottom: 10px;
} }
} }