Fix x overflow for search results

pull/6000/head
Chocobozzz 2023-10-09 09:21:30 +02:00
parent a41c908370
commit 28af325f99
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 18 additions and 10 deletions

View File

@ -36,7 +36,10 @@
<ng-container *ngFor="let result of results"> <ng-container *ngFor="let result of results">
<div *ngIf="isVideoChannel(result)" class="entry video-channel"> <div *ngIf="isVideoChannel(result)" class="entry video-channel">
<my-actor-avatar [actor]="result" actorType="channel" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"></my-actor-avatar> <my-actor-avatar
[actor]="result" actorType="channel"
[internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"
></my-actor-avatar>
<div class="video-channel-info"> <div class="video-channel-info">
<a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names"> <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
@ -48,7 +51,7 @@
</a> </a>
<ng-template #aContent> <ng-template #aContent>
<div class="video-channel-display-name">{{ result.displayName }}</div> <div class="video-channel-display-name me-2">{{ result.displayName }}</div>
<div class="video-channel-name">{{ result.nameWithHost }}</div> <div class="video-channel-name">{{ result.nameWithHost }}</div>
</ng-template> </ng-template>

View File

@ -4,11 +4,11 @@
@mixin build-channel-img-size ($video-img-width) { @mixin build-channel-img-size ($video-img-width) {
$image-size: min(130px, $video-img-width); $image-size: min(130px, $video-img-width);
$margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width as the video miniature
@include actor-avatar-size($image-size); @include actor-avatar-size($image-size);
margin: 0 $margin-size 0 $margin-size; margin: 0 calc($margin-size + 1rem) 0 $margin-size;
} }
.search-result { .search-result {
@ -57,9 +57,14 @@
max-width: 800px; max-width: 800px;
} }
.video-channel {
my-actor-avatar {
@include margin-right(1rem);
}
}
.video-channel-info { .video-channel-info {
flex-grow: 1; flex-grow: 1;
margin: 0 10px;
width: fit-content; width: fit-content;
} }
@ -70,6 +75,7 @@
align-items: baseline; align-items: baseline;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
width: fit-content; width: fit-content;
flex-wrap: wrap;
} }
.video-channel-display-name { .video-channel-display-name {
@ -78,8 +84,6 @@
} }
.video-channel-name { .video-channel-name {
@include margin-left(5px);
font-size: $video-miniature-row-info-font-size; font-size: $video-miniature-row-info-font-size;
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
} }

View File

@ -3,7 +3,7 @@ import { LinkType } from 'src/types/link.type'
import { Component, OnDestroy, OnInit } from '@angular/core' import { Component, OnDestroy, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router' import { ActivatedRoute, Router } from '@angular/router'
import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core' import { AuthService, HooksService, MetaService, Notifier, ServerService, User, UserService } from '@app/core'
import { immutableAssign } from '@app/helpers' import { immutableAssign, SimpleMemoize } from '@app/helpers'
import { validateHost } from '@app/shared/form-validators/host-validators' import { validateHost } from '@app/shared/form-validators/host-validators'
import { Video, VideoChannel } from '@app/shared/shared-main' import { Video, VideoChannel } from '@app/shared/shared-main'
import { AdvancedSearch, SearchService } from '@app/shared/shared-search' import { AdvancedSearch, SearchService } from '@app/shared/shared-search'
@ -225,6 +225,7 @@ export class SearchComponent implements OnInit, OnDestroy {
return undefined return undefined
} }
@SimpleMemoize()
getInternalChannelUrl (channel: VideoChannel) { getInternalChannelUrl (channel: VideoChannel) {
const linkType = this.getLinkType() const linkType = this.getLinkType()

View File

@ -159,7 +159,7 @@ my-actor-avatar {
} }
my-video-thumbnail { my-video-thumbnail {
@include margin-right(10px); @include margin-right(1rem);
min-width: var(--rowThumbnailWidth); min-width: var(--rowThumbnailWidth);
max-width: var(--rowThumbnailWidth); max-width: var(--rowThumbnailWidth);

View File

@ -99,7 +99,7 @@
} }
.miniature-thumbnail { .miniature-thumbnail {
@include margin-right(10px); @include margin-right(1rem);
min-width: var(--rowThumbnailWidth); min-width: var(--rowThumbnailWidth);
max-width: var(--rowThumbnailWidth); max-width: var(--rowThumbnailWidth);