Prevent icon layout shift
This commit is contained in:
Chocobozzz
parent
1eb9541b79
commit
6ec059165a
|
|
@ -32,6 +32,7 @@ my-global-icon {
|
|||
left: 16px;
|
||||
top: -24px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
|
||||
&.icon-bottom {
|
||||
top: 4px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<button class="btn btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
|
||||
<button class="btn" (click)="togglePasswordVisibility()" type="button">
|
||||
@if (showPassword) {
|
||||
<ng-container i18n>Hide</ng-container>
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { Observable } from 'rxjs'
|
||||
import { catchError, switchMap } from 'rxjs/operators'
|
||||
import { HttpClient, HttpParams } from '@angular/common/http'
|
||||
import { Injectable } from '@angular/core'
|
||||
import { RestExtractor, RestPagination, RestService } from '@app/core'
|
||||
import { ResultList, VideoInclude, VideoPrivacy } from '@peertube/peertube-models'
|
||||
import { getAllPrivacies } from '@peertube/peertube-core-utils'
|
||||
import { VideoService, CommonVideoParams } from '@app/shared/shared-main/video/video.service'
|
||||
import { Video } from '@app/shared/shared-main/video/video.model'
|
||||
import { AdvancedInputFilter } from '@app/shared/shared-forms/advanced-input-filter.component'
|
||||
import { Video } from '@app/shared/shared-main/video/video.model'
|
||||
import { CommonVideoParams, VideoService } from '@app/shared/shared-main/video/video.service'
|
||||
import { getAllPrivacies, omit } from '@peertube/peertube-core-utils'
|
||||
import { ResultList, VideoInclude, VideoPrivacy } from '@peertube/peertube-models'
|
||||
import { Observable } from 'rxjs'
|
||||
import { catchError, switchMap } from 'rxjs/operators'
|
||||
|
||||
@Injectable()
|
||||
export class VideoAdminService {
|
||||
|
|
@ -25,7 +25,7 @@ export class VideoAdminService {
|
|||
const { pagination, search } = options
|
||||
|
||||
let params = new HttpParams()
|
||||
params = this.videoService.buildCommonVideosParams({ params, ...options })
|
||||
params = this.videoService.buildCommonVideosParams({ params, ...omit(options, [ 'search', 'pagination' ]) })
|
||||
|
||||
params = params.set('start', pagination.start.toString())
|
||||
.set('count', pagination.count.toString())
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ my-embed {
|
|||
display: flex;
|
||||
|
||||
my-global-icon {
|
||||
width: 16px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
@include global-icon-size(16px);
|
||||
@include margin-left(3px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
<my-video-playlist-element-miniature
|
||||
[playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
|
||||
[playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
|
||||
[touchScreenEditButton]="true"
|
||||
></my-video-playlist-element-miniature>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,18 @@
|
|||
|
||||
.abuse-messages {
|
||||
my-global-icon {
|
||||
width: 22px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
top: -1px;
|
||||
|
||||
@include global-icon-size(22px);
|
||||
@include margin-left(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.table-video-text my-global-icon,
|
||||
my-video-cell my-global-icon {
|
||||
width: 15px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
@include global-icon-size(15px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<button
|
||||
class="btn btn-outline-secondary copy-button"
|
||||
type="button"
|
||||
class="btn copy-button"
|
||||
(click)="copy()"
|
||||
[title]="title" [ngClass]="{ 'is-input-group': isInputGroup, 'with-border': withBorder }"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,6 @@ button:not(.with-border, .is-input-group) {
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 15px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
|
||||
@include global-icon-size(15px);
|
||||
@include margin-right(5px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
my-global-icon {
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
@include global-icon-size(32px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,5 @@ input {
|
|||
}
|
||||
|
||||
.form-control-clear my-global-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
@include global-icon-size(20px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
}
|
||||
|
||||
my-global-icon[iconName=shield] {
|
||||
width: 16px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
top: -1px;
|
||||
|
||||
@include global-icon-size(16px);
|
||||
@include margin-left(10px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,8 +51,6 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<my-edit-button *ngIf="owned && touchScreenEditButton" [ptRouterLink]="[ '/my-library', 'video-playlists', playlist.shortUUID ]"></my-edit-button>
|
||||
|
||||
<div
|
||||
*ngIf="owned" class="more dropdown-root" ngbDropdown #moreDropdown="ngbDropdown" placement="left auto"
|
||||
(openChange)="onDropdownOpenChange()" autoClose="outside" container="body"
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ my-video-thumbnail,
|
|||
.video {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
background-color: pvar(--bg);
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid $separator-border-color;
|
||||
|
|
@ -44,7 +45,6 @@ my-video-thumbnail,
|
|||
}
|
||||
|
||||
> a {
|
||||
grid-row: 1 / 3;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
|
|
@ -56,28 +56,22 @@ my-video-thumbnail,
|
|||
min-width: 25px;
|
||||
|
||||
my-global-icon {
|
||||
width: 17px;
|
||||
position: relative;
|
||||
left: -2px;
|
||||
color: pvar(--fg-300);
|
||||
|
||||
@include global-icon-size(17px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more,
|
||||
my-edit-button {
|
||||
justify-self: flex-end;
|
||||
.more {
|
||||
cursor: pointer;
|
||||
min-width: 24px;
|
||||
|
||||
@include margin-left(auto);
|
||||
}
|
||||
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
opacity: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
|
|||
@Input() rowLink = false
|
||||
@Input() accountLink = true
|
||||
@Input() position: number // Keep this property because we're in the OnPush change detection strategy
|
||||
@Input() touchScreenEditButton = false
|
||||
|
||||
@Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 24px;
|
||||
color: pvar(--secondary-icon-color);
|
||||
|
||||
@include margin-right(11px);
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ body {
|
|||
my-global-icon {
|
||||
opacity: 0.5;
|
||||
|
||||
@include icon(22px);
|
||||
@include global-icon-size(22px);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
|
|
|
|||
|
|
@ -120,10 +120,6 @@
|
|||
@mixin rounded-icon-button {
|
||||
padding: 0.5rem !important;
|
||||
border-radius: 100% !important;
|
||||
|
||||
my-global-icon {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin danger-button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue