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

Prevent header layout shift

This commit is contained in:
Chocobozzz 2024-12-02 08:41:05 +01:00
parent 3172bd1de7
commit c904f8fbfe
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/header/header.component.html
View File

@ -1,13 +1,13 @@
<div class="root" [hidden]="!loaded || (loggedIn && !user.account)"> <div class="root">
<a class="peertube-title" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()"> <a class="peertube-title" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()">
<span class="icon-logo"></span> <span class="icon-logo"></span>
<span class="instance-name">{{ instanceName }}</span> <span class="instance-name">{{ instanceName }}</span>
</a> </a>
<my-search-typeahead></my-search-typeahead> <my-search-typeahead [hidden]="!isLoaded()"></my-search-typeahead>
<div class="d-flex align-items-center buttons-container"> <div class="d-flex align-items-center buttons-container" [hidden]="!isLoaded()">
@if (!loggedIn) { @if (!loggedIn) {
<my-button <my-button
i18n-title title="Open settings modal" i18n-title title="Open settings modal"

1
client/src/app/header/header.component.scss
View File

@ -25,6 +25,7 @@
color: inherit !important; color: inherit !important;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 46px; // Prevent layout shifting when waiting for the right part of the header to load
@include padding-left(18px); @include padding-left(18px);
@include margin-right(0.5rem); @include margin-right(0.5rem);

8
client/src/app/header/header.component.ts
View File

@ -62,8 +62,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
currentInterfaceLanguage: string currentInterfaceLanguage: string
loaded = false
private serverConfig: ServerConfig private serverConfig: ServerConfig
private quickSettingsModalSub: Subscription private quickSettingsModalSub: Subscription
@ -93,6 +91,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
return this.serverService.getHTMLConfig().instance.name return this.serverService.getHTMLConfig().instance.name
} }
isLoaded () {
return this.serverConfig && (!this.loggedIn || !!this.user?.account)
}
isInMobileView () { isInMobileView () {
return this.screenService.isInMobileView() return this.screenService.isInMobileView()
} }
@ -125,8 +127,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
this.quickSettingsModalSub = this.modalService.openQuickSettingsSubject this.quickSettingsModalSub = this.modalService.openQuickSettingsSubject
.subscribe(() => this.openQuickSettings()) .subscribe(() => this.openQuickSettings())
this.loaded = true
} }
ngOnDestroy () { ngOnDestroy () {

6
client/src/sass/include/_button-mixins.scss
View File

@ -205,12 +205,10 @@
@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px, $right: 0) { @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px, $right: 0) {
my-global-icon { my-global-icon {
position: relative; position: relative;
display: inline-block;
width: $width;
height: $width;
line-height: $width;
top: $top; top: $top;
right: $right; right: $right;
@include global-icon-size($width);
} }
&:not(.icon-only) { &:not(.icon-only) {