Cleanup
This commit is contained in:
Chocobozzz
parent
c3aaee5dff
commit
e346077a94
|
|
@ -89,7 +89,7 @@
|
|||
"buffer": "^6.0.3",
|
||||
"chart.js": "^4.3.0",
|
||||
"chartjs-plugin-zoom": "~2.0.1",
|
||||
"color-bits": "^1.0.3",
|
||||
"color-bits": "^1.0.4",
|
||||
"core-js": "^3.22.8",
|
||||
"debug": "^4.3.1",
|
||||
"dompurify": "^3.1.6",
|
||||
|
|
|
|||
|
|
@ -15,8 +15,11 @@
|
|||
|
||||
.middle-title {
|
||||
margin-top: 0;
|
||||
text-transform: uppercase;
|
||||
color: pvar(--fg);
|
||||
font-weight: $font-bold;
|
||||
|
||||
@include in-content-small-title;
|
||||
@include font-size(22px);
|
||||
@include margin-bottom(1.5rem);
|
||||
}
|
||||
|
||||
|
|
@ -42,9 +45,6 @@
|
|||
.middle-title,
|
||||
.section-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: pvar(--fg);
|
||||
color: pvar(--fg-400);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,9 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
|
||||
<h1 class="title-page-v2">
|
||||
<strong class="underline-orange">{{ instanceName }}</strong>
|
||||
|
||||
>
|
||||
|
||||
<ng-container i18n>Login</ng-container>
|
||||
</h1>
|
||||
|
||||
<div class="margin-content">
|
||||
<h1 class="title-page" i18n>Login on {{ instanceName }}</h1>
|
||||
|
||||
<ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
|
||||
|
||||
<my-alert type="primary">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ input[type=email] {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
|
||||
> div {
|
||||
flex: 1 1;
|
||||
|
|
@ -32,8 +31,7 @@ my-alert {
|
|||
|
||||
my-alert {
|
||||
display: block;
|
||||
|
||||
@include margin(0, auto, 2rem);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-form-and-externals {
|
||||
|
|
|
|||
|
|
@ -124,10 +124,10 @@
|
|||
}
|
||||
|
||||
.video-channel-display-name {
|
||||
font-size: $video-miniature-row-mobile-name-font-size;
|
||||
font-size: $miniature-fs-mobile-big;
|
||||
}
|
||||
|
||||
.video-channel-name {
|
||||
font-size: $video-miniature-row-mobile-info-font-size;
|
||||
font-size: $miniature-fs-mobile-medium;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@
|
|||
$index-block-height: 40px;
|
||||
|
||||
header {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 25px;
|
||||
width: 100%;
|
||||
background-color: pvar(--primary-50);
|
||||
background-color: pvar(--primary-150);
|
||||
border-radius: 5px;
|
||||
|
||||
@include rfs(2rem, margin-bottom);
|
||||
@include rfs(2rem, padding);
|
||||
}
|
||||
|
||||
.header-steps {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<div>
|
||||
<div class="margin-content">
|
||||
|
||||
<div class="margin-content signup-disabled" *ngIf="signupDisabled">
|
||||
<div class="signup-disabled" *ngIf="signupDisabled">
|
||||
<my-alert type="warning" i18n>Signup is not enabled on this instance.</my-alert>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!signupDisabled">
|
||||
<h1 class="title-page-v2">
|
||||
<strong class="underline-orange">{{ instanceName }}</strong>
|
||||
>
|
||||
<my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
|
||||
</h1>
|
||||
|
||||
<div class="register-content">
|
||||
<my-custom-stepper linear>
|
||||
|
||||
|
|
@ -26,7 +20,7 @@
|
|||
<my-register-step-about [serverStats]="serverStats" [requiresApproval]="requiresApproval" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-about>
|
||||
|
||||
<div class="step-buttons">
|
||||
<a i18n class="skip-step underline-orange" routerLink="/login">
|
||||
<a i18n class="skip-step link-primary fw-normal" routerLink="/login">
|
||||
<strong>I already have an account</strong>, I log in
|
||||
</a>
|
||||
|
||||
|
|
@ -93,7 +87,7 @@
|
|||
<button class="peertube-button-big secondary-button" cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
|
||||
|
||||
<div class="skip-step">
|
||||
<button class="underline-orange button-unstyle" (click)="skipChannelCreation()">
|
||||
<button class="link-primary button-unstyle" (click)="skipChannelCreation()">
|
||||
<strong i18n>I don't want to create a channel</strong>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,6 @@ my-signup-step-title strong {
|
|||
padding-top: 30vh;
|
||||
}
|
||||
|
||||
.title-page-v2 {
|
||||
background-color: pvar(--primary-50);
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
my-instance-about-accordion {
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -36,14 +30,6 @@ my-instance-about-accordion {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.underline-orange {
|
||||
color: pvar(--fg);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
> button,
|
||||
.skip-step {
|
||||
margin-top: 20px;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { AuthService, ServerService } from '@app/core'
|
|||
import { HooksService } from '@app/core/plugins/hooks.service'
|
||||
import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance/instance-about-accordion.component'
|
||||
import { AlertComponent } from '@app/shared/shared-main/common/alert.component'
|
||||
import { ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
|
||||
import { PeerTubeProblemDocument, ServerConfig, ServerStats, UserRegister } from '@peertube/peertube-models'
|
||||
import { LoaderComponent } from '../../shared/shared-main/common/loader.component'
|
||||
import { SignupLabelComponent } from '../../shared/shared-main/users/signup-label.component'
|
||||
import { SignupStepTitleComponent } from '../shared/signup-step-title.component'
|
||||
|
|
@ -213,7 +213,7 @@ export class RegisterComponent implements OnInit {
|
|||
},
|
||||
|
||||
error: err => {
|
||||
this.signupError = err.message
|
||||
this.signupError = (err.body as PeerTubeProblemDocument)?.detail || err.message
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<div class="margin-content">
|
||||
<h1 class="title-page" i18n>{{ video.name }}</h1>
|
||||
<h1 class="title-page">
|
||||
<my-global-icon iconName="stats"></my-global-icon>
|
||||
|
||||
<ng-container i18n>{{ video.name }} statistics</ng-container>
|
||||
</h1>
|
||||
|
||||
<div class="stats-embed">
|
||||
<div class="global-stats">
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@
|
|||
|
||||
.label,
|
||||
.more-info {
|
||||
font-size: 14px;
|
||||
font-size: 1rem;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { NgFor, NgIf } from '@angular/common'
|
|||
import { NumberFormatterPipe } from '@app/shared/shared-main/common/number-formatter.pipe'
|
||||
import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
|
||||
import { LiveVideoService } from '@app/shared/shared-video-live/live-video.service'
|
||||
import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
|
||||
|
||||
type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries' | 'regions'
|
||||
|
||||
|
|
@ -69,7 +70,8 @@ ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--fg')
|
|||
NgbNavContent,
|
||||
ChartModule,
|
||||
ButtonComponent,
|
||||
NgbNavOutlet
|
||||
NgbNavOutlet,
|
||||
GlobalIconComponent
|
||||
]
|
||||
})
|
||||
export class VideoStatsComponent implements OnInit {
|
||||
|
|
@ -583,7 +585,7 @@ export class VideoStatsComponent implements OnInit {
|
|||
}
|
||||
|
||||
private buildChartColor () {
|
||||
return getComputedStyle(document.body).getPropertyValue('--primary-400')
|
||||
return getComputedStyle(document.body).getPropertyValue('--border-primary')
|
||||
}
|
||||
|
||||
private formatXTick (options: {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
<div class="margin-content">
|
||||
<h1 i18n class="title-page" *ngIf="pagination.totalItems">
|
||||
Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
|
||||
</h1>
|
||||
|
||||
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
|
||||
|
||||
<div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
|
||||
|
|
|
|||
|
|
@ -19,11 +19,6 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
.title-page {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlists {
|
||||
justify-content: left;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
@use '_miniature' as *;
|
||||
@use '_button-mixins' as *;
|
||||
|
||||
$owner-block-bg: pvar(--bg-secondary-350);
|
||||
|
||||
.root {
|
||||
--co-global-top-padding: 2rem;
|
||||
--co-channel-img-margin: 30px;
|
||||
--co-font-size: 16px;
|
||||
--co-channel-handle-font-size: 16px;
|
||||
|
|
@ -28,7 +29,6 @@
|
|||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
padding-top: var(--co-global-top-padding);
|
||||
font-size: var(--co-font-size);
|
||||
|
||||
@include margin-bottom(3rem);
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
.channel-description {
|
||||
grid-column: 1;
|
||||
word-break: break-word;
|
||||
padding-bottom: var(--co-global-top-padding);
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
|
@ -84,8 +83,6 @@
|
|||
}
|
||||
|
||||
.owner-block {
|
||||
$owner-block-bg: pvar(--bg-secondary-350);
|
||||
|
||||
background-color: $owner-block-bg;
|
||||
padding: 30px;
|
||||
width: 300px;
|
||||
|
|
@ -146,7 +143,6 @@ my-copy-button {
|
|||
|
||||
@media screen and (max-width: 1100px) {
|
||||
.root {
|
||||
--co-global-top-padding: 45px;
|
||||
--co-channel-img-margin: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +155,7 @@ my-copy-button {
|
|||
.channel-description:not(.expanded) {
|
||||
max-height: 70px;
|
||||
|
||||
@include fade-text(30px, pvar(--bg-secondary-350));
|
||||
@include fade-text(30px, pvar(--bg));
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
|
@ -182,16 +178,14 @@ my-copy-button {
|
|||
|
||||
.bottom-owner {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid $separator-border-color;
|
||||
padding: var(--co-global-top-padding) 45px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.owner-block {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding: 1rem;
|
||||
|
||||
.avatar-row {
|
||||
grid-column: 1;
|
||||
|
|
@ -203,7 +197,7 @@ my-copy-button {
|
|||
grid-column: 2;
|
||||
max-height: 70px;
|
||||
|
||||
@include fade-text(30px, pvar(--bg));
|
||||
@include fade-text(30px, $owner-block-bg);
|
||||
}
|
||||
|
||||
.view-account {
|
||||
|
|
@ -224,7 +218,6 @@ my-copy-button {
|
|||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
.root {
|
||||
--co-global-top-padding: 1rem;
|
||||
--co-font-size: 14px;
|
||||
--co-channel-handle-font-size: 13px;
|
||||
--co-owner-handle-font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<div class="margin-content">
|
||||
<h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
|
||||
<h1 class="title-page">
|
||||
<my-global-icon iconName="film"></my-global-icon>
|
||||
|
||||
<ng-container i18n>Studio for {{ video.name }}</ng-container>
|
||||
</h1>
|
||||
|
||||
<div class="grid-container">
|
||||
<form [formGroup]="form">
|
||||
|
|
@ -11,12 +15,12 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label i18n for="cutStart">New start</label>
|
||||
<my-timestamp-input inputName="cutStart" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
|
||||
<my-timestamp-input inputName="cutStart" enableBorder="true" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label i18n for="cutEnd">New end</label>
|
||||
<my-timestamp-input inputName="cutEnd" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
|
||||
<my-timestamp-input inputName="cutEnd" enableBorder="true" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,16 +52,12 @@ my-timestamp-input {
|
|||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: $font-bold;
|
||||
font-size: 16px;
|
||||
padding: 0 5px;
|
||||
width: fit-content;
|
||||
margin: -8px 0 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { ReactiveFileComponent } from '../../shared/shared-forms/reactive-file.c
|
|||
import { TimestampInputComponent } from '../../shared/shared-forms/timestamp-input.component'
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
||||
import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
|
||||
import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
|
||||
|
||||
@Component({
|
||||
selector: 'my-video-studio-edit',
|
||||
|
|
@ -29,7 +30,8 @@ import { VideoDetails } from '@app/shared/shared-main/video/video-details.model'
|
|||
ButtonComponent,
|
||||
EmbedComponent,
|
||||
NgIf,
|
||||
NgFor
|
||||
NgFor,
|
||||
GlobalIconComponent
|
||||
]
|
||||
})
|
||||
export class VideoStudioEditComponent extends FormReactive implements OnInit {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
<my-timestamp-input
|
||||
class="me-1"
|
||||
inputName="segmentStart" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
|
||||
inputName="segmentStart" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
|
||||
[(ngModel)]="segment.startMs" [parser]="timestampParser" [formatter]="timestampFormatter"
|
||||
></my-timestamp-input>
|
||||
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
<my-timestamp-input
|
||||
class="me-1"
|
||||
inputName="segmentEnd" [disableBorder]="false" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
|
||||
inputName="segmentEnd" enableBorder="true" [maxTimestamp]="publishedVideo.duration * 1000" mask="99:99:99.999"
|
||||
[(ngModel)]="segment.endMs" [parser]="timestampParser" [formatter]="timestampFormatter"
|
||||
></my-timestamp-input>
|
||||
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@
|
|||
<div class="position">{{ i + 1 }}</div>
|
||||
|
||||
<my-timestamp-input
|
||||
class="d-block" [disableBorder]="false" [inputName]="'timecode[' + i + ']'"
|
||||
class="d-block" enableBorder="true" [inputName]="'timecode[' + i + ']'"
|
||||
[maxTimestamp]="publishedVideo?.duration" formControlName="timecode"
|
||||
></my-timestamp-input>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
</div>
|
||||
|
||||
<input
|
||||
class="peertube-button primary-button"
|
||||
[disabled]="firstStepPermanentLive !== true && firstStepPermanentLive !== false"
|
||||
type="button" i18n-value value="Go Live" (click)="goLive()"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ $width-size: 275px;
|
|||
}
|
||||
|
||||
.first-step-block {
|
||||
--input-bg: #{pvar(--bg-secondary-500)};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -42,15 +42,18 @@
|
|||
<ng-container i18n>Instead, <a class="text-decoration-underline alert-link" routerLink="/admin/overview/users">create a dedicated account</a> to upload your videos.</ng-container>
|
||||
</my-alert>
|
||||
|
||||
<my-channels-setup-message></my-channels-setup-message>
|
||||
|
||||
<my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'"></my-user-quota>
|
||||
|
||||
<div class="title-page" *ngIf="isInSecondStep()">
|
||||
<ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
|
||||
<ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
|
||||
@if (secondStepType === 'import-url' || secondStepType === 'import-torrent') {
|
||||
<ng-container i18n>Import {{ videoName }}</ng-container>
|
||||
} @else if (secondStepType === 'upload') {
|
||||
<ng-container i18n>Upload {{ videoName }}</ng-container>
|
||||
}
|
||||
</div>
|
||||
|
||||
<my-channels-setup-message></my-channels-setup-message>
|
||||
|
||||
<div ngbNav #nav="ngbNav" class="nav-tabs video-add-nav" [activeId]="activeNav" (activeIdChange)="onNavChange($event)" [ngClass]="{ 'hide-nav': !!secondStepType }">
|
||||
<ng-container ngbNavItem="upload">
|
||||
<a ngbNavLink>
|
||||
|
|
@ -93,6 +96,6 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div [ngbNavOutlet]="nav"></div>
|
||||
<div class="nav-content" [ngbNavOutlet]="nav"></div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,10 +37,6 @@ $nav-link-height: 40px;
|
|||
}
|
||||
}
|
||||
|
||||
.margin-content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .video-add-nav {
|
||||
@include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<div class="margin-content">
|
||||
<div class="title-page">
|
||||
<span class="me-1" i18n>Update</span>
|
||||
<a [routerLink]="getVideoUrl()">{{ videoDetails?.name }}</a>
|
||||
</div>
|
||||
<h1 class="title-page" i18n>Update {{ videoDetails?.name }}</h1>
|
||||
|
||||
<my-upload-progress
|
||||
[isUploading]="isReplacingVideoFile" [uploadPercents]="videoUploadPercents" [error]="uploadError" [uploaded]="updateDone"
|
||||
|
|
|
|||
|
|
@ -53,24 +53,17 @@ form {
|
|||
|
||||
::ng-deep .help-tooltip-button {
|
||||
my-global-icon {
|
||||
color: pvar(--input-placeholder);
|
||||
height: $markdown-icon-height;
|
||||
width: $markdown-icon-width;
|
||||
|
||||
svg {
|
||||
color: pvar(--input-border-color);
|
||||
fill: pvar(--input-border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
my-global-icon svg {
|
||||
background-color: pvar(--input-border-color);
|
||||
color: pvar(--bg);
|
||||
fill: pvar(--bg);
|
||||
}
|
||||
&:focus my-global-icon {
|
||||
color: pvar(--input-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.highlighted-comment {
|
||||
display: inline-block;
|
||||
background-color: pvar(--bg-secondary-500);
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
color: pvar(--fg);
|
||||
padding: 0 5px;
|
||||
font-size: 13px;
|
||||
|
|
@ -48,7 +48,8 @@
|
|||
|
||||
.video-author {
|
||||
height: 20px;
|
||||
background-color: #888888;
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
color: pvar(--fg);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2px;
|
||||
max-width: 100%;
|
||||
|
|
@ -56,7 +57,6 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
color: #fff !important;
|
||||
|
||||
@include padding-right(6px);
|
||||
@include padding-left(6px);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
<div>
|
||||
<div class="title-block">
|
||||
<h2 class="title-page">
|
||||
<h2>
|
||||
{totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
|
||||
</h2>
|
||||
|
||||
<my-feed [syndicationItems]="syndicationItems"></my-feed>
|
||||
|
||||
<div ngbDropdown class="d-inline-block ms-4 dropdown-root">
|
||||
<button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
|
||||
<div ngbDropdown class="d-inline-block ms-auto dropdown-root">
|
||||
<button class="peertube-button tertiary-button" id="dropdown-sort-comments" ngbDropdownToggle i18n>
|
||||
SORT BY
|
||||
</button>
|
||||
|
||||
<div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
|
||||
<button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
|
||||
<button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@
|
|||
}
|
||||
|
||||
.title-block {
|
||||
.title-page {
|
||||
@include margin-right(0);
|
||||
> h2 {
|
||||
display: inline-block;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@include font-size(1.25rem);
|
||||
}
|
||||
|
||||
my-feed {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
|
||||
@if (videos.length !== 0) {
|
||||
<div class="title-page-container">
|
||||
<h2 i18n class="title-page">Other videos</h2>
|
||||
<h2 i18n>Other videos</h2>
|
||||
|
||||
<div
|
||||
*ngIf="!playlist" class="title-page-autoplay"
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@
|
|||
margin-bottom: 25px;
|
||||
flex-wrap: wrap-reverse;
|
||||
|
||||
.title-page {
|
||||
margin-bottom: unset;
|
||||
> h2 {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
font-size: 1.25rem;
|
||||
|
||||
@include margin-right(.5rem !important);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
<my-video-attributes [video]="video"></my-video-attributes>
|
||||
|
||||
<my-video-comments
|
||||
class="border-top"
|
||||
class="border-top pt-3"
|
||||
[video]="video"
|
||||
[videoPassword]="videoPassword"
|
||||
[user]="user"
|
||||
|
|
|
|||
|
|
@ -207,14 +207,14 @@ export class ThemeService {
|
|||
|
||||
const mainColorHSL = toHSLA(parse(mainColor))
|
||||
|
||||
let lastColorHSL = { ...mainColorHSL }
|
||||
|
||||
// Inject in alphabetical order for easy debug
|
||||
const toInject: { id: number, key: string, value: string }[] = [
|
||||
{ id: 500, key: `--${prefix}-500`, value: this.toHSLStr(mainColorHSL) }
|
||||
]
|
||||
|
||||
for (const j of [ -1, 1 ]) {
|
||||
let lastColorHSL = { ...mainColorHSL }
|
||||
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
const suffix = 500 + (50 * i * j)
|
||||
const key = `--${prefix}-${suffix}`
|
||||
|
|
|
|||
|
|
@ -5,10 +5,11 @@
|
|||
|
||||
.root {
|
||||
--co-logo-size: 34px;
|
||||
--co-root-padding: 1.5rem;
|
||||
|
||||
background-color: pvar(--bg);
|
||||
|
||||
padding: 1.5rem;
|
||||
padding: var(--co-root-padding);
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
width: 100%;
|
||||
|
||||
@include ellipsis;
|
||||
@include margin-left(10px);
|
||||
}
|
||||
|
||||
.icon-logo {
|
||||
|
|
@ -45,8 +47,6 @@
|
|||
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
@include margin-right(10px);
|
||||
}
|
||||
|
||||
my-search-typeahead {
|
||||
|
|
@ -135,15 +135,15 @@ my-actor-avatar {
|
|||
|
||||
@media screen and (max-width: $small-view) {
|
||||
.root {
|
||||
padding: 1rem;
|
||||
--co-root-padding: 1rem;
|
||||
}
|
||||
|
||||
my-search-typeahead {
|
||||
@include margin-right(0.5rem);
|
||||
}
|
||||
|
||||
.margin-button.tertiary-button {
|
||||
@include margin-right(0);
|
||||
.margin-button[theme=tertiary] {
|
||||
@include margin-right(5px);
|
||||
}
|
||||
|
||||
my-actor-avatar {
|
||||
|
|
@ -177,8 +177,8 @@ my-actor-avatar {
|
|||
.root {
|
||||
--co-logo-size: 48px;
|
||||
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
row-gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
|
||||
|
|
@ -196,11 +196,15 @@ my-actor-avatar {
|
|||
my-search-typeahead {
|
||||
grid-row: 2 !important;
|
||||
grid-column: 1 / 4;
|
||||
max-width: none;
|
||||
max-width: 100%;
|
||||
|
||||
@include margin-right(0);
|
||||
}
|
||||
|
||||
.peertube-title {
|
||||
@include margin-right(5px)
|
||||
}
|
||||
|
||||
.instance-name {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,12 +69,13 @@
|
|||
[markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
|
||||
></my-user-notifications>
|
||||
|
||||
<a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
|
||||
<my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
|
||||
<span i18n>See all your notifications</span>
|
||||
<div class="all-notifications">
|
||||
<a *ngIf="loaded" class="text-decoration-underline" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)" i18n>
|
||||
View all
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
border-bottom: 1px solid $separator-border-color;
|
||||
border-bottom: 1px solid $separator-border-color-on-secondary;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
|
|
@ -61,17 +61,10 @@
|
|||
}
|
||||
|
||||
.all-notifications {
|
||||
border-top: 1px solid pvar(--bg-secondary-300);
|
||||
border-top: 1px solid $separator-border-color-on-secondary;
|
||||
margin-top: -1px; // To not have 2 borders with the last notification
|
||||
text-align: center;
|
||||
font-weight: $font-semibold;
|
||||
color: pvar(--fg);
|
||||
padding: 0.75rem 0;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
|
||||
<div *ngIf="showSearchGlobalHelp()" id="typeahead-suggestion-help" class="overflow-hidden">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="small-title mb-2" i18n>GLOBAL SEARCH</div>
|
||||
<div class="section-label mb-2" i18n>GLOBAL SEARCH</div>
|
||||
|
||||
<span *ngIf="serverConfig" class="muted" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
|
||||
</div>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<!-- search instructions, when search input is empty -->
|
||||
<div [hidden]="this.search" id="typeahead-input-help" class="overflow-hidden">
|
||||
<span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
|
||||
<div class="mt-3 mb-2 small-title" i18n>ADVANCED SEARCH</div>
|
||||
<div class="mt-3 mb-2 section-label" i18n>ADVANCED SEARCH</div>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -116,10 +116,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.small-title {
|
||||
@include in-content-small-title;
|
||||
}
|
||||
|
||||
my-suggestion {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="modal-body">
|
||||
<my-alert i18n type="primary">These settings apply only to your session on this instance.</my-alert>
|
||||
|
||||
<h5 i18n class="mt-4 mb-2">Videos</h5>
|
||||
<h5 i18n class="section-label mt-4 mb-2">VIDEOS</h5>
|
||||
|
||||
<my-user-video-settings
|
||||
*ngIf="!isUserLoggedIn()"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
>
|
||||
</my-user-video-settings>
|
||||
|
||||
<h5 i18n class="mt-4 mb-2">Interface</h5>
|
||||
<h5 i18n class="section-label mt-4 mb-2">INTERFACE</h5>
|
||||
|
||||
<my-user-interface-settings
|
||||
*ngIf="!isUserLoggedIn()"
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
<div class="block-documentation">
|
||||
<div class="columns">
|
||||
<a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" i18n-title title="Go to the CLI documentation">
|
||||
<h5 i18n class="underline-orange">CLI documentation</h5>
|
||||
<h5 i18n class="link-primary">CLI documentation</h5>
|
||||
|
||||
<div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
|
||||
</a>
|
||||
|
||||
<a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" i18n-title title="Go to the admin documentation">
|
||||
<h5 i18n class="underline-orange">Admin documentation</h5>
|
||||
<h5 i18n class="link-primary">Admin documentation</h5>
|
||||
|
||||
<div i18n>Managing users, following other instances, dealing with spammers...</div>
|
||||
</a>
|
||||
|
||||
<a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" i18n-title title="Go to the user documentation">
|
||||
<h5 i18n class="underline-orange">User documentation</h5>
|
||||
<h5 i18n class="link-primary">User documentation</h5>
|
||||
|
||||
<div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@
|
|||
class="chip me-1"
|
||||
>
|
||||
<my-actor-avatar size="18" [actor]="abuse.reporterAccount" actorType="account"></my-actor-avatar>
|
||||
<div>
|
||||
<span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:"' + abuse.reporterAccount.displayName + '"' }"
|
||||
|
|
@ -32,9 +30,7 @@
|
|||
class="chip me-1"
|
||||
>
|
||||
<my-actor-avatar size="18" [actor]="abuse.flaggedAccount" actorType="account"></my-actor-avatar>
|
||||
<div>
|
||||
<span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:"' +abuse.flaggedAccount.displayName + '"' }"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@use '_miniature' as *;
|
||||
|
||||
.comment-html {
|
||||
background-color: #ececec;
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -17,5 +17,5 @@
|
|||
}
|
||||
|
||||
my-global-icon[iconName=flag] {
|
||||
width: 15px;
|
||||
@include global-icon-size(15px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ input {
|
|||
text-indent: -9999px;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background: #cccccc;
|
||||
background: pvar(--input-bg);
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
|
|
@ -25,7 +25,7 @@ input {
|
|||
left: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: pvar(--on-primary);
|
||||
background: pvar(--fg-300);
|
||||
border-radius: 50%;
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
|
|
@ -41,6 +41,7 @@ input {
|
|||
&::after {
|
||||
left: calc(100% - 3px);
|
||||
transform: translateX(-100%);
|
||||
background: pvar(--on-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<p-inputMask
|
||||
[disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
|
||||
[ngClass]="{ 'border-disabled': disableBorder }"
|
||||
[ngClass]="{ 'with-border': enableBorder }"
|
||||
[mask]="mask" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
|
||||
></p-inputMask>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,16 @@
|
|||
@use '_form-mixins' as *;
|
||||
|
||||
p-inputmask {
|
||||
&.with-border {
|
||||
--input-border-color: #{pvar(--bg-secondary-500)};
|
||||
}
|
||||
|
||||
::ng-deep input {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
@include peertube-input-text(100%);
|
||||
|
||||
&:focus-within,
|
||||
&:focus {
|
||||
box-shadow: $focus-box-shadow-form;
|
||||
|
|
@ -17,16 +23,4 @@ p-inputmask {
|
|||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.border-disabled {
|
||||
::ng-deep input {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.border-disabled) {
|
||||
::ng-deep input {
|
||||
@include peertube-input-text(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
|
|||
@Input() timestamp: number
|
||||
|
||||
@Input({ transform: booleanAttribute }) disabled = false
|
||||
@Input({ transform: booleanAttribute }) disableBorder = true
|
||||
@Input({ transform: booleanAttribute }) enableBorder = false
|
||||
|
||||
@Input() inputName: string
|
||||
@Input() mask = '99:99:99'
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
line-height: 24px;
|
||||
|
||||
@include global-icon-size(24px);
|
||||
@include margin-right(15px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<my-global-icon *ngIf="h1Icon" [iconName]="h1Icon"></my-global-icon>
|
||||
|
||||
{{ h1 }}
|
||||
|
||||
</h1>
|
||||
|
||||
<ng-template #entryTemplate let-item="item">
|
||||
|
|
|
|||
|
|
@ -1,2 +1,13 @@
|
|||
<ng-container i18n *ngIf="requiresApproval">Request an account</ng-container>
|
||||
<ng-container i18n *ngIf="!requiresApproval">Create an account</ng-container>
|
||||
@if (withInstanceName) {
|
||||
@if (requiresApproval) {
|
||||
<ng-container i18n>Request an account on {{ instanceName }}</ng-container>
|
||||
} @else {
|
||||
<ng-container i18n>Create an account on {{ instanceName }}</ng-container>
|
||||
}
|
||||
} @else {
|
||||
@if (requiresApproval) {
|
||||
<ng-container i18n>Request an account</ng-container>
|
||||
} @else {
|
||||
<ng-container i18n>Create an account</ng-container>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, Input } from '@angular/core'
|
||||
import { booleanAttribute, Component, Input } from '@angular/core'
|
||||
import { NgIf } from '@angular/common'
|
||||
import { ServerService } from '@app/core'
|
||||
|
||||
@Component({
|
||||
selector: 'my-signup-label',
|
||||
|
|
@ -8,5 +9,13 @@ import { NgIf } from '@angular/common'
|
|||
imports: [ NgIf ]
|
||||
})
|
||||
export class SignupLabelComponent {
|
||||
@Input() requiresApproval: boolean
|
||||
@Input({ transform: booleanAttribute }) requiresApproval: boolean
|
||||
@Input({ transform: booleanAttribute }) withInstanceName = false
|
||||
|
||||
constructor (private server: ServerService) {
|
||||
}
|
||||
|
||||
get instanceName () {
|
||||
return this.server.getHTMLConfig().instance.name
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ my-action-dropdown.show {
|
|||
|
||||
.table-comment-link,
|
||||
.table-account-link {
|
||||
text-decoration: none;
|
||||
color: pvar(--fg);
|
||||
|
||||
@include disable-outline;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,6 @@
|
|||
<div class="root" [formGroup]="form">
|
||||
|
||||
<div class="scope-row" *ngIf="totalFollowing && !hideScope">
|
||||
@if (filters.scope === 'local') {
|
||||
<ng-container i18n>Videos on {{ instanceName }}</ng-container>
|
||||
} @else {
|
||||
<ng-container i18n>Videos on {{ instanceName }} and {{ totalFollowing }} other platforms</ng-container>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="filters-row">
|
||||
<div class="d-flex flex-wrap">
|
||||
<div class="d-flex flex-wrap me-2">
|
||||
<div class="d-flex flex-wrap mb-3">
|
||||
@for (quickFilter of quickFilters; track quickFilter) {
|
||||
<my-button
|
||||
theme="secondary" [icon]="quickFilter.iconName" class="me-2 mb-2"
|
||||
|
|
@ -21,14 +10,26 @@
|
|||
}
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap-reverse align-items-start justify-content-between">
|
||||
<div class="me-3">
|
||||
<div class="scope-info" *ngIf="totalFollowing && !hideScope">
|
||||
@if (filters.scope === 'local') {
|
||||
<ng-container i18n>Videos on <strong>{{ instanceName }}</strong></ng-container>
|
||||
} @else {
|
||||
<ng-container i18n>Videos on <strong>{{ instanceName }}</strong> and <strong>{{ totalFollowing }}</strong> other platforms</ng-container>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="filters-summary d-inline-block">
|
||||
<div class="d-inline-block active-filters">
|
||||
@for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) {
|
||||
@if (filter.key !== 'scope') {
|
||||
<div class="d-inline-block">
|
||||
<span i18n *ngIf="filter.value">{{ filter.label }}: </span>
|
||||
<strong>{{ getFilterValue(filter) || filter.label }}</strong>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<button
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap align-items-center ms-3" >
|
||||
<div class="d-flex flex-wrap align-items-center mb-2">
|
||||
<label for="sort-videos" i18n class="select-label">Sort by:</label>
|
||||
|
||||
<my-select-options inputId="sort-videos" class="d-inline-block me-2" formControlName="sort" [items]="sortItems"></my-select-options>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,15 @@ $filters-background: pvar(--bg-secondary-400);
|
|||
--input-bg: #{pvar(--input-bg-in-secondary)};
|
||||
--input-border-color: #{pvar(--input-bg-in-secondary)};
|
||||
|
||||
margin-bottom: 45px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
// Prevent layout shift
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.scope-row {
|
||||
.scope-info {
|
||||
font-size: 20px;
|
||||
color: pvar(--fg-350);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.filters-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.select-label {
|
||||
|
|
@ -92,6 +88,8 @@ $filters-background: pvar(--bg-secondary-400);
|
|||
@include margin-left(0.25rem);
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--secondary-icon-color);
|
||||
|
||||
@include margin-left(5px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
import { NgClass, NgIf } from '@angular/common'
|
||||
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
|
||||
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'
|
||||
import { ActivatedRoute, Params, RouterLink } from '@angular/router'
|
||||
import { RouterLink } from '@angular/router'
|
||||
import { AuthService, RedirectService } from '@app/core'
|
||||
import { ServerService } from '@app/core/server/server.service'
|
||||
import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { UserRight, VideoConstant } from '@peertube/peertube-models'
|
||||
import { AttributesOnly } from '@peertube/peertube-typescript-utils'
|
||||
import debug from 'debug'
|
||||
import { Subscription } from 'rxjs'
|
||||
import { SelectOptionsItem } from 'src/types'
|
||||
import { PeertubeCheckboxComponent } from '../shared-forms/peertube-checkbox.component'
|
||||
import { SelectCategoriesComponent } from '../shared-forms/select/select-categories.component'
|
||||
import { SelectLanguagesComponent } from '../shared-forms/select/select-languages.component'
|
||||
import { SelectOptionsComponent } from '../shared-forms/select/select-options.component'
|
||||
import { GlobalIconComponent, GlobalIconName } from '../shared-icons/global-icon.component'
|
||||
import { InstanceFollowService } from '../shared-instance/instance-follow.service'
|
||||
import { ButtonComponent } from '../shared-main/buttons/button.component'
|
||||
import { PeertubeModalService } from '../shared-main/peertube-modal/peertube-modal.service'
|
||||
import { VideoFilterActive, VideoFilters } from './video-filters.model'
|
||||
import { InstanceFollowService } from '../shared-instance/instance-follow.service'
|
||||
import { AttributesOnly } from '@peertube/peertube-typescript-utils'
|
||||
|
||||
const debugLogger = debug('peertube:videos:VideoFiltersHeaderComponent')
|
||||
|
||||
|
|
|
|||
|
|
@ -204,8 +204,8 @@ $more-button-width: 40px;
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
my-actor-avatar + .owner-label {
|
||||
@include margin-left(0.5rem);
|
||||
my-actor-avatar {
|
||||
@include margin-right(0.5rem);
|
||||
}
|
||||
|
||||
.video-actions {
|
||||
|
|
@ -232,5 +232,13 @@ $more-button-width: 40px;
|
|||
.video-miniature.display-as-row {
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-small-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-small-height};
|
||||
|
||||
--co-fs-small: 0.875rem;
|
||||
--co-fs-medium: 0.875rem;
|
||||
--co-fs-big: 1rem;
|
||||
|
||||
my-actor-avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
display: flex;
|
||||
|
||||
.miniature-name {
|
||||
font-size: $video-miniature-row-name-font-size;
|
||||
font-size: $miniature-fs-row-big;
|
||||
}
|
||||
|
||||
.miniature-thumbnail {
|
||||
|
|
@ -121,5 +121,9 @@
|
|||
.miniature.display-as-row {
|
||||
--co-row-thumbnail-width: #{$video-thumbnail-small-width};
|
||||
--co-row-thumbnail-height: #{$video-thumbnail-small-height};
|
||||
|
||||
.miniature-name {
|
||||
font-size: $miniature-fs-mobile-big;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,16 +13,21 @@
|
|||
align-items: center;
|
||||
font-size: inherit;
|
||||
padding: 15px 5px 15px 10px;
|
||||
border-bottom: 1px solid $separator-border-color;
|
||||
border-bottom: 1px solid $separator-border-color-on-secondary;
|
||||
word-break: break-word;
|
||||
|
||||
&.unread {
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: pvar(--bg-secondary-350);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
width: 24px;
|
||||
color: pvar(--fg);
|
||||
color: pvar(--secondary-icon-color);
|
||||
|
||||
@include margin-right(11px);
|
||||
@include margin-left(3px);
|
||||
|
|
@ -43,6 +48,7 @@
|
|||
|
||||
a {
|
||||
font-weight: $font-semibold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="#C6C6C6" stroke-width="10" fill="none"/><path d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="24" viewBox="0 0 208 128"><rect width="198" height="118" x="5" y="5" ry="10" stroke="currentColor" stroke-width="10" fill="none"/><path fill="currentColor" d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 309 B |
|
|
@ -51,6 +51,9 @@ body {
|
|||
--input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
|
||||
--input-bg-in-secondary: #{pvar(--bg-secondary-450)};
|
||||
|
||||
--input-check-active-fg: #{pvar(--on-primary)};
|
||||
--input-check-active-bg: #{pvar(--primary)};
|
||||
|
||||
--input-y-padding: 5px;
|
||||
--input-x-padding: 20px;
|
||||
|
||||
|
|
@ -78,6 +81,10 @@ body {
|
|||
|
||||
--header-height: #{$header-height};
|
||||
|
||||
@media screen and (max-width: $small-view) {
|
||||
--header-height: #{$header-height-small-view};
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
--header-height: #{$header-height-mobile-view};
|
||||
}
|
||||
|
|
@ -102,6 +109,9 @@ body {
|
|||
--secondary-icon-color: hsl(0, 9%, 51%);
|
||||
--input-placeholder: hsl(0, 9%, 51%);
|
||||
|
||||
--input-check-active-fg: #{pvar(--bg)};
|
||||
--input-check-active-bg: #{pvar(--fg-250)};
|
||||
|
||||
--alert-primary-fg: #{pvar(--on-primary)};
|
||||
--alert-primary-bg: #{pvar(--primary-200)};
|
||||
--alert-primary-border-color: #{pvar(--primary-300)};
|
||||
|
|
@ -204,6 +214,14 @@ code {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.main-col {
|
||||
// Don't use rfs to get exact pixels
|
||||
margin-inline-start: $menu-width;
|
||||
|
|
@ -256,16 +274,6 @@ my-global-icon[iconName=external-link] {
|
|||
top: -0.1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{breakpoint(xl)}) {
|
||||
/* the following applies from 500px to 900px and is partially overridden from 500px to 800px by changes below to $small-view */
|
||||
.main-col,
|
||||
.main-col.expanded {
|
||||
.title-page {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $menu-overlay-view) {
|
||||
.menu-open {
|
||||
overflow: hidden !important;
|
||||
|
|
|
|||
|
|
@ -218,6 +218,14 @@ body {
|
|||
// Nav
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
.nav:not(.nav-pills) {
|
||||
--bs-nav-link-padding-x: 0;
|
||||
|
||||
.nav-link {
|
||||
@include margin-right(2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.nav .nav-link {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
|
|
@ -281,11 +289,15 @@ body {
|
|||
.accordion-button {
|
||||
font-size: 18px;
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--secondary-icon-color);
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
font-weight: $font-bold;
|
||||
|
||||
my-global-icon {
|
||||
color: pvar(--primary-400);
|
||||
color: pvar(--fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
.callout {
|
||||
padding: 1.25rem;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid pvar(--bg-secondary-400);
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
position: relative;
|
||||
top: -5px;
|
||||
left: -10px;
|
||||
color: #6c757d !important;
|
||||
color: pvar(--fg-400) !important;
|
||||
font-size: 1rem;
|
||||
font-weight: $font-bold;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
&.callout-primary {
|
||||
border-color: pvar(--primary-100);
|
||||
border-color: pvar(--primary-350);
|
||||
|
||||
&:not(.callout-light) {
|
||||
border-left-color: pvar(--primary);
|
||||
|
|
@ -96,6 +96,10 @@
|
|||
color: pvar(--alert-primary-fg) !important;
|
||||
}
|
||||
|
||||
.link-primary {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
@include secondary-button(
|
||||
$fg: pvar(--alert-primary-fg),
|
||||
|
|
|
|||
|
|
@ -38,36 +38,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.title-page-v2 {
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
padding: 35px 25px;
|
||||
}
|
||||
|
||||
.title-page {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 1.5rem;
|
||||
color: pvar(--fg-400);
|
||||
|
||||
color: pvar(--fg);
|
||||
display: inline-block;
|
||||
font-weight: $font-semibold;
|
||||
font-size: 1.25rem;
|
||||
@include font-size(2rem);
|
||||
|
||||
@include margin-right(55px);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
@include margin-left(15px);
|
||||
my-global-icon {
|
||||
@include global-icon-size(28px);
|
||||
@include margin-right(0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,13 +70,13 @@
|
|||
font-weight: $font-semibold;
|
||||
line-height: 1.1;
|
||||
|
||||
@include underline-orange;
|
||||
@include underline-primary;
|
||||
|
||||
&:hover {
|
||||
color: pvar(--fg);
|
||||
opacity: 0.8;
|
||||
|
||||
@include underline-orange;
|
||||
@include underline-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,10 +92,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.underline-orange {
|
||||
@include underline-orange;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
@include section-label;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
font-weight: $font-semibold;
|
||||
line-height: 1.1;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
|
||||
&.badge-fs-normal {
|
||||
font-size: 100%;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
|
||||
padding: pvar(--input-y-padding) calc(#{pvar(--input-x-padding)} + 23px) pvar(--input-y-padding) pvar(--input-x-padding);
|
||||
position: relative;
|
||||
border: 0;
|
||||
border: 0 !important;
|
||||
appearance: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
@ -148,9 +148,9 @@
|
|||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: -1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid pvar(--fg-300);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
|
@ -158,11 +158,11 @@
|
|||
[type=radio]:checked + label::after,
|
||||
[type=radio]:not(:checked) + label::after {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: pvar(--primary);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: pvar(--input-check-active-bg);
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 4px;
|
||||
left: 5px;
|
||||
border-radius: 100%;
|
||||
transition: all 0.2s ease;
|
||||
|
|
@ -212,29 +212,30 @@
|
|||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
top: 4px;
|
||||
left: 6px;
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
height: 7px;
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) scale(0);
|
||||
border-right: 2px solid pvar(--on-primary);
|
||||
border-bottom: 2px solid pvar(--on-primary);
|
||||
border-right: 2px solid pvar(--input-check-active-fg);
|
||||
border-bottom: 2px solid pvar(--input-check-active-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + span {
|
||||
background: pvar(--fg-400);
|
||||
background: pvar(--input-check-active-bg);
|
||||
animation: jelly 0.6s ease;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: pvar(--primary);
|
||||
background: pvar(--input-check-active-bg);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all 0.2s ease;
|
||||
border: 2px solid transparent;
|
||||
border: 2px solid pvar(--input-check-active-fg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@use '_variables' as *;
|
||||
@import '_bootstrap-mixins';
|
||||
|
||||
@mixin underline-orange {
|
||||
@mixin underline-primary {
|
||||
text-decoration: underline !important;
|
||||
text-decoration-color: pvar(--border-primary) !important;
|
||||
text-underline-offset: 0.25em !important;
|
||||
|
|
@ -135,15 +135,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin in-content-small-title {
|
||||
text-transform: uppercase;
|
||||
color: pvar(--fg);
|
||||
font-weight: $font-bold;
|
||||
font-size: 13px;
|
||||
|
||||
@include underline-orange();
|
||||
}
|
||||
|
||||
@mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
|
||||
display: flex;
|
||||
min-height: $min-height;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ $white: #fff;
|
|||
$button-font-size: 1rem;
|
||||
|
||||
$header-height: 94px;
|
||||
$header-height-mobile-view: 144px;
|
||||
$header-height-small-view: 74px;
|
||||
$header-height-mobile-view: 124px;
|
||||
|
||||
$menu-width: 248px;
|
||||
$menu-collapsed-width: 50px;
|
||||
|
|
@ -37,11 +38,19 @@ $max-channels-width: 1200px;
|
|||
$footer-height: 30px;
|
||||
$footer-margin: 30px;
|
||||
|
||||
$video-miniature-row-name-font-size: 1.3em;
|
||||
$video-miniature-row-mobile-name-font-size: 14px;
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
$video-miniature-row-info-font-size: 14px;
|
||||
$video-miniature-row-mobile-info-font-size: 12px;
|
||||
$miniature-fs-small: 0.75rem;
|
||||
$miniature-fs-medium: 0.875rem;
|
||||
$miniature-fs-big: 1rem;
|
||||
|
||||
$miniature-fs-row-small: 0.875rem;
|
||||
$miniature-fs-row-medium: 1rem;
|
||||
$miniature-fs-row-big: 1.25rem;
|
||||
|
||||
$miniature-fs-mobile-small: 0.875rem;
|
||||
$miniature-fs-mobile-medium: 0.875rem;
|
||||
$miniature-fs-mobile-big: 1rem;
|
||||
|
||||
$video-thumbnail-height: 153px;
|
||||
$video-thumbnail-width: 280px;
|
||||
|
|
@ -87,9 +96,14 @@ $variables: (
|
|||
|
||||
--input-fg: var(--input-fg),
|
||||
--input-bg: var(--input-bg),
|
||||
|
||||
--input-placeholder: var(--input-placeholder),
|
||||
--input-border-color: var(--input-border-color),
|
||||
--input-bg-in-secondary: var(--input-bg-in-secondary),
|
||||
|
||||
--input-check-active-fg: var(--input-check-active-fg),
|
||||
--input-check-active-bg: var(--input-check-active-bg),
|
||||
|
||||
--input-x-padding: var(--input-x-padding),
|
||||
--input-y-padding: var(--input-y-padding),
|
||||
|
||||
|
|
@ -201,4 +215,5 @@ $zindex: (
|
|||
// ---------------------------------------------------------------------------
|
||||
|
||||
$separator-border-color: pvar(--bg-secondary-400);
|
||||
$separator-border-color-on-secondary: pvar(--bg-secondary-450);
|
||||
$focus-box-shadow-form: #{$focus-box-shadow-dimensions} #{pvar(--fg-100)};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
@use '_mixins' as *;
|
||||
@use '_icons' as *;
|
||||
|
||||
$hover-bg: pvar(--bg-secondary-350);
|
||||
|
||||
/* stylelint-disable */
|
||||
@import 'primeng/resources/primeng.css';
|
||||
|
||||
|
|
@ -71,7 +73,7 @@ body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
|
|||
body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
|
||||
body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
|
||||
body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
background-color: $hover-bg;
|
||||
color: pvar(--fg);
|
||||
}
|
||||
body .p-paginator .p-paginator-first:focus,
|
||||
|
|
@ -128,7 +130,7 @@ body .p-paginator .p-paginator-pages .p-paginator-page {
|
|||
border-radius: 0;
|
||||
}
|
||||
body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
background-color: $hover-bg;
|
||||
color: pvar(--fg);
|
||||
}
|
||||
body .p-paginator .p-paginator-pages .p-paginator-page:focus {
|
||||
|
|
@ -243,7 +245,7 @@ body .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
|
|||
}
|
||||
.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: pvar(--fg);
|
||||
background: pvar(--bg-secondary-400);
|
||||
background: $hover-bg;
|
||||
}
|
||||
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
|
||||
margin: 0;
|
||||
|
|
@ -565,7 +567,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
|
|||
background: pvar(--bg-secondary-500);
|
||||
}
|
||||
.p-multiselect.p-variant-filled:not(.p-disabled):hover {
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
background-color: $hover-bg;
|
||||
}
|
||||
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
|
||||
background-color: pvar(--bg-secondary-500);
|
||||
|
|
@ -816,7 +818,7 @@ p-table {
|
|||
.p-datatable-tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
background-color: $hover-bg !important;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -860,7 +862,7 @@ p-table {
|
|||
color: pvar(--fg) !important;
|
||||
|
||||
&.p-sortable-column:hover {
|
||||
background-color: pvar(--bg-secondary-400) !important;
|
||||
background-color: $hover-bg !important;
|
||||
}
|
||||
|
||||
&.p-sortable-column:focus-visible {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,3 @@ interface NodeModule {
|
|||
}
|
||||
|
||||
declare module 'markdown-it-emoji/lib/light.mjs'
|
||||
|
||||
// FIXME: remove color-bits upgrade (with https://github.com/romgrk/color-bits/commit/ea01b950ab89e5ea7a85471642b95dd1fbffb68d included)
|
||||
declare module 'color-bits'
|
||||
|
|
|
|||
|
|
@ -4444,10 +4444,10 @@ clone@^1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
|
||||
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
|
||||
|
||||
color-bits@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.3.tgz#bd1c52eebffb4cd1e0c906161a76b7377a98dd8c"
|
||||
integrity sha512-CkCco0HfT8kWR317vK8r5hzIRcKbiM+kdhlZ/RbmEmoj5vINgzoCZ29S5cY6BMQZC49b+p2elgNj/xbdF9FOdg==
|
||||
color-bits@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/color-bits/-/color-bits-1.0.4.tgz#9ed0acc9bc67509493a713f60f356783f189adbf"
|
||||
integrity sha512-gcNCga5BpVlzW+ZqO+U1/4thYuJ13DsQSBzrnhBcEUUe30eF54STR/kqnPn2I18jLp0lfXDw8KJT228DTyLKXA==
|
||||
|
||||
color-convert@^1.9.0:
|
||||
version "1.9.3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue