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

Cleanup sub title CSS

This commit is contained in:
Chocobozzz 2024-10-03 14:02:54 +02:00
parent 5801d519a7
commit 714f7aebad
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
50 changed files with 317 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/+admin/follows/followers-list/followers-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="follower" aria-hidden="true"></my-global-icon> <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
<ng-container i18n>Followers of your instance</ng-container> <h1 i18n>Followers of your instance</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="followers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

8
client/src/app/+admin/follows/following-list/following-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="following" aria-hidden="true"></my-global-icon> <my-global-icon iconName="following" aria-hidden="true"></my-global-icon>
<ng-container i18n>Subscriptions of your instance</ng-container> <h1 i18n>Subscriptions of your instance</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="following" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

8
client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
<ng-container i18n>Videos redundancies</ng-container> <h1 i18n>Videos redundancies</h1>
</h1> </div>
</div>
<div class="admin-sub-header"> <div class="admin-sub-header">
<div class="select-filter-block"> <div class="select-filter-block">

8
client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
View File

@ -1,6 +1,8 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="flag" aria-hidden="true"></my-global-icon> <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
<ng-container i18n>Reports</ng-container> <h1 i18n>Reports</h1>
</h1> </div>
</div>
<my-abuse-list-table viewType="admin"></my-abuse-list-table> <my-abuse-list-table viewType="admin"></my-abuse-list-table>

8
client/src/app/+admin/moderation/registration-list/registration-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
<ng-container i18n>Registration requests</ng-container> <h1 i18n>Registration requests</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="registrations" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="registrations" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

8
client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="cross" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
<ng-container i18n>Video blocks</ng-container> <h1 i18n>Video blocks</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="blocklist" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

7
client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
View File

@ -1,7 +0,0 @@
@use '_variables' as *;
@use '_mixins' as *;
my-global-icon {
width: 24px;
height: 24px;
}

2
client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
View File

@ -23,7 +23,7 @@ import { VideoBlockService } from '@app/shared/shared-moderation/video-block.ser
@Component({ @Component({
selector: 'my-video-block-list', selector: 'my-video-block-list',
templateUrl: './video-block-list.component.html', templateUrl: './video-block-list.component.html',
styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-block-list.component.scss' ], styleUrls: [ '../../../shared/shared-moderation/moderation.scss' ],
standalone: true, standalone: true,
imports: [ imports: [
GlobalIconComponent, GlobalIconComponent,

8
client/src/app/+admin/moderation/watched-words-list/watched-words-list-admin.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon> <my-global-icon iconName="eye-open" aria-hidden="true"></my-global-icon>
<ng-container i18n>Instance watched words lists</ng-container> <h1 i18n>Instance watched words lists</h1>
</h1> </div>
</div>
<em class="d-block" i18n>Video name/description and comments that contain any of the watched words are automatically tagged with the name of the list.</em> <em class="d-block" i18n>Video name/description and comments that contain any of the watched words are automatically tagged with the name of the list.</em>
<em class="d-block mb-3" i18n>These automatic tags can be used to filter comments and videos.</em> <em class="d-block mb-3" i18n>These automatic tags can be used to filter comments and videos.</em>

10
client/src/app/+admin/overview/comments/video-comment-list.component.html
View File

@ -1,9 +1,11 @@
<h1> <div class="sub-title-container">
<my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon> <div class="sub-title">
<ng-container i18n>Video comments</ng-container> <my-global-icon class="top--1px" iconName="message-circle" aria-hidden="true"></my-global-icon>
<h1 i18n>Video comments</h1>
<my-feed [syndicationItems]="syndicationItems"></my-feed> <my-feed [syndicationItems]="syndicationItems"></my-feed>
</h1> </div>
</div>
<em i18n>This view also shows comments from muted accounts.</em> <em i18n>This view also shows comments from muted accounts.</em>

9
client/src/app/+admin/overview/comments/video-comment-list.component.scss
View File

@ -1,9 +0,0 @@
@use '_variables' as *;
@use '_mixins' as *;
my-feed {
display: inline-block;
width: 15px;
@include margin-left(5px);
}

1
client/src/app/+admin/overview/comments/video-comment-list.component.ts
View File

@ -8,7 +8,6 @@ import { VideoCommentListAdminOwnerComponent } from '../../../shared/shared-vide
@Component({ @Component({
selector: 'my-video-comment-list', selector: 'my-video-comment-list',
templateUrl: './video-comment-list.component.html', templateUrl: './video-comment-list.component.html',
styleUrls: [ './video-comment-list.component.scss' ],
standalone: true, standalone: true,
imports: [ imports: [
GlobalIconComponent, GlobalIconComponent,

8
client/src/app/+admin/overview/users/user-list/user-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <my-global-icon iconName="user" aria-hidden="true"></my-global-icon>
<ng-container i18n>Users</ng-container> <h1 i18n>Users</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="users" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

9
client/src/app/+admin/overview/users/user-list/user-list.component.scss
View File

@ -3,6 +3,11 @@
@use '_mixins' as *; @use '_mixins' as *;
@use 'bootstrap/scss/functions' as *; @use 'bootstrap/scss/functions' as *;
.sub-title-container my-global-icon {
position: relative;
top: -2px;
}
.banned-info { .banned-info {
font-style: italic; font-style: italic;
} }
@ -20,10 +25,6 @@ p-tableCheckbox {
top: -2.5px; top: -2.5px;
} }
my-global-icon {
width: 18px;
}
@media screen and (max-width: $primeng-breakpoint) { @media screen and (max-width: $primeng-breakpoint) {
.empty-cell { .empty-cell {
padding: 0; padding: 0;

8
client/src/app/+admin/overview/videos/video-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
<ng-container i18n>Videos</ng-container> <h1 i18n>Videos</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

11
client/src/app/+admin/system/debug/debug.component.html
View File

@ -1,5 +1,11 @@
<div class="root"> <div class="sub-title-container">
<h4 i18n>IP address</h4> <div class="sub-title">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<h1 i18n>Debug</h1>
</div>
</div>
<h2 class="fs-5" i18n>IP address</h2>
<p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p> <p i18n>PeerTube thinks your web browser public IP is <strong>{{ debug?.ip }}</strong>.</p>
@ -14,4 +20,3 @@
<ul> <ul>
<li i18n>Check the <code>trust_proxy</code> configuration key</li> <li i18n>Check the <code>trust_proxy</code> configuration key</li>
</ul> </ul>
</div>

6
client/src/app/+admin/system/debug/debug.component.ts
View File

@ -2,11 +2,15 @@ import { Component, OnInit } from '@angular/core'
import { Notifier } from '@app/core' import { Notifier } from '@app/core'
import { Debug } from '@peertube/peertube-models' import { Debug } from '@peertube/peertube-models'
import { DebugService } from './debug.service' import { DebugService } from './debug.service'
import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
@Component({ @Component({
templateUrl: './debug.component.html', templateUrl: './debug.component.html',
styleUrls: [ './debug.component.scss' ], styleUrls: [ './debug.component.scss' ],
standalone: true standalone: true,
imports: [
GlobalIconComponent
]
}) })
export class DebugComponent implements OnInit { export class DebugComponent implements OnInit {
debug: Debug debug: Debug

8
client/src/app/+admin/system/jobs/jobs.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon> <my-global-icon iconName="circle-tick" aria-hidden="true"></my-global-icon>
<ng-container i18n>Local jobs</ng-container> <h1 i18n>Local jobs</h1>
</h1> </div>
</div>
<div class="admin-sub-header"> <div class="admin-sub-header">
<div class="select-filter-block"> <div class="select-filter-block">

2
client/src/app/+admin/system/jobs/jobs.component.scss
View File

@ -59,5 +59,5 @@ pre {
} }
.job-error { .job-error {
color: #ff0000; color: pvar(--red);
} }

8
client/src/app/+admin/system/logs/logs.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
<ng-container i18n>Logs</ng-container> <h1 i18n>Logs</h1>
</h1> </div>
</div>
<div class="header"> <div class="header">

14
client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
View File

@ -1,14 +1,16 @@
<h1 class="d-flex justify-content-between"> <div class="sub-title-container">
<span class="text-nowrap me-2"> <div class="sub-title">
<my-global-icon iconName="globe" aria-hidden="true"></my-global-icon> <my-global-icon class="top--1px" iconName="globe" aria-hidden="true"></my-global-icon>
<span i18n>Runner jobs</span> <h1 i18n>Runner jobs</h1>
</span> </div>
<div>
<a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button"> <a routerLink="/admin/system/runners/runners-list" class="peertube-button-link peertube-button-icon grey-button">
<my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon> <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
<ng-container i18n>Remote runners</ng-container> <ng-container i18n>Remote runners</ng-container>
</a> </a>
</h1> </div>
</div>
<p-table <p-table
[value]="runnerJobs" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="runnerJobs" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

10
client/src/app/+admin/system/runners/runner-list/runner-list.component.html
View File

@ -1,14 +1,16 @@
<h1 class="d-flex justify-content-between"> <div class="sub-title-container">
<span class="text-nowrap me-2"> <span class="sub-title">
<my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon> <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
<ng-container i18n>Remote runners</ng-container> <h1 i18n>Remote runners</h1>
</span> </span>
<div>
<a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button"> <a routerLink="/admin/system/runners/registration-tokens-list" class="peertube-button-link peertube-button-icon grey-button">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<ng-container i18n>Runner registration tokens</ng-container> <ng-container i18n>Runner registration tokens</ng-container>
</a> </a>
</h1> </div>
</div>
<p-table <p-table
[value]="runners" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="runners" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

8
client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
View File

@ -1,7 +1,7 @@
<h1 class="d-flex justify-content-between"> <div class="sub-title-container">
<span class="text-nowrap me-2"> <span class="sub-title">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<ng-container i18n>Runner registration tokens</ng-container> <h1 i18n>Runner registration tokens</h1>
</span> </span>
<div> <div>
@ -10,7 +10,7 @@
<ng-container i18n>Remote runners</ng-container> <ng-container i18n>Remote runners</ng-container>
</a> </a>
</div> </div>
</h1> </div>
<p-table <p-table
[value]="registrationTokens" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start" [value]="registrationTokens" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [first]="pagination.start"

8
client/src/app/+my-account/my-account-abuses/my-account-abuses-list.component.html
View File

@ -1,6 +1,8 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="flag" aria-hidden="true"></my-global-icon> <my-global-icon iconName="flag" aria-hidden="true"></my-global-icon>
<ng-container i18n>Reports</ng-container> <h1 i18n>Reports</h1>
</h1> </div>
</div>
<my-abuse-list-table viewType="user"></my-abuse-list-table> <my-abuse-list-table viewType="user"></my-abuse-list-table>

8
client/src/app/+my-account/my-account-applications/my-account-applications.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon> <my-global-icon iconName="codesandbox" aria-hidden="true"></my-global-icon>
<ng-container i18n>Applications</ng-container> <h1 i18n>Applications</h1>
</h1> </div>
</div>
<div class="pt-two-cols"> <!-- built-in token grid --> <div class="pt-two-cols"> <!-- built-in token grid -->

8
client/src/app/+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="no" aria-hidden="true"></my-global-icon> <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
<ng-container i18n>Your automatic tag policies</ng-container> <h1 i18n>Your automatic tag policies</h1>
</h1> </div>
</div>
<strong class="d-block mb-3" i18n>Automatically block comments:</strong> <strong class="d-block mb-3" i18n>Automatically block comments:</strong>

8
client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon> <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
<ng-container i18n>Comments on your videos</ng-container> <h1 i18n>Comments on your videos</h1>
</h1> </div>
</div>
<my-video-comment-list-admin-owner mode="user"></my-video-comment-list-admin-owner> <my-video-comment-list-admin-owner mode="user"></my-video-comment-list-admin-owner>

8
client/src/app/+my-account/my-account-import-export/my-account-import-export.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
<ng-container i18n>Import/Export</ng-container> <h1 i18n>Import/Export</h1>
</h1> </div>
</div>
<my-account-import #accountImport [videoQuotaUsed]="videoQuotaUsed" class="d-block mb-5"></my-account-import> <my-account-import #accountImport [videoQuotaUsed]="videoQuotaUsed" class="d-block mb-5"></my-account-import>

7
client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
View File

@ -1,4 +1,9 @@
<h1 class="visually-hidden" i18n>Notifications</h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="bell" aria-hidden="true"></my-global-icon>
<h1 i18n>Notifications</h1>
</div>
</div>
<div class="header"> <div class="header">
<a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications"> <a class="peertube-button-link grey-button" routerLink="/my-account/settings" fragment="notifications">

8
client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<ng-container i18n>Two factor authentication</ng-container> <h1 i18n>Two factor authentication</h1>
</h1> </div>
</div>
<div i18n *ngIf="twoFactorAlreadyEnabled === true" class="root already-enabled"> <div i18n *ngIf="twoFactorAlreadyEnabled === true" class="root already-enabled">
Two factor authentication is already enabled. Two factor authentication is already enabled.

8
client/src/app/+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="no" aria-hidden="true"></my-global-icon> <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
<ng-container i18n>Your watched words lists</ng-container> <h1 i18n>Your watched words lists</h1>
</h1> </div>
</div>
<em class="d-block" i18n>Comments that contain any of the watched words are automatically tagged with the name of the list.</em> <em class="d-block" i18n>Comments that contain any of the watched words are automatically tagged with the name of the list.</em>
<em class="d-block mb-3" i18n>These automatic tags can be used to filter comments or <a routerLink="/my-account/auto-tag-policies">automatically block</a> them.</em> <em class="d-block mb-3" i18n>These automatic tags can be used to filter comments or <a routerLink="/my-account/auto-tag-policies">automatically block</a> them.</em>

14
client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
View File

@ -1,17 +1,17 @@
<h1> <div class="sub-title-container">
<span class="text-nowrap me-2"> <div class="sub-title">
<my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
<ng-container i18n>My channels</ng-container> <h1 i18n>My channels</h1>
<span *ngIf="this.pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ this.pagination.totalItems }}</span> <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
</span> </div>
<div> <div>
<a routerLink="/my-library/video-channel-syncs" class="button-link"> <a routerLink="/my-library/video-channel-syncs" class="peertube-button-link grey-button peertube-button-icon">
<my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon> <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
<ng-container i18n>My synchronizations</ng-container> <ng-container i18n>My synchronizations</ng-container>
</a> </a>
</div> </div>
</h1> </div>
<my-channels-setup-message [hideLink]="true"></my-channels-setup-message> <my-channels-setup-message [hideLink]="true"></my-channels-setup-message>

16
client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
View File

@ -1,19 +1,9 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
h1 { .sub-title my-global-icon {
display: flex; position: relative;
justify-content: space-between; top: -3px;
my-global-icon {
top: -4px;
}
.button-link {
@include peertube-button-link;
@include grey-button;
@include button-with-icon(18px, 3px, -1px);
}
} }
input[type=text] { input[type=text] {

9
client/src/app/+my-library/my-follows/my-followers.component.html
View File

@ -1,11 +1,10 @@
<div class="d-flex"> <div class="sub-title-container">
<h1 class="text-nowrap"> <div class="sub-title">
<my-global-icon iconName="follower" aria-hidden="true"></my-global-icon> <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
<ng-container i18n>My followers</ng-container> <h1 i18n>My followers</h1>
</h1>
<span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span> <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
</div> </div>
</div>
<div class="followers-header"> <div class="followers-header">
<my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>

12
client/src/app/+my-library/my-follows/my-subscriptions.component.html
View File

@ -1,12 +1,12 @@
<h1> <div class="sub-title-container">
<span class="text-nowrap me-2"> <div class="sub-title">
<my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
<ng-container i18n>My subscriptions</ng-container> <h1 i18n>My subscriptions</h1>
<span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span> <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
</span> </div>
</h1> </div>
<div class="video-subscriptions-header"> <div class="mb-3">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter> <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
</div> </div>

5
client/src/app/+my-library/my-follows/my-subscriptions.component.scss
View File

@ -2,11 +2,6 @@
@use '_mixins' as *; @use '_mixins' as *;
@use '_actor' as *; @use '_actor' as *;
.video-subscriptions-header {
margin-bottom: 30px;
display: flex;
}
input[type=text] { input[type=text] {
@include peertube-input-text(300px); @include peertube-input-text(300px);
} }

8
client/src/app/+my-library/my-history/my-history.component.html
View File

@ -1,8 +1,10 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="history" aria-hidden="true"></my-global-icon> <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
<ng-container i18n>My watch history</ng-container> <h1 i18n>My watch history</h1>
<span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span> <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
</h1> </div>
</div>
<div class="top-buttons"> <div class="top-buttons">
<div class="search-wrapper"> <div class="search-wrapper">

8
client/src/app/+my-library/my-ownership/my-ownership.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="download" aria-hidden="true"></my-global-icon> <my-global-icon iconName="download" aria-hidden="true"></my-global-icon>
<ng-container i18n>My ownership changes</ng-container> <h1 i18n>My ownership changes</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="videoChangeOwnerships" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [value]="videoChangeOwnerships" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage"

6
client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
View File

@ -1,9 +1,11 @@
<my-alert *ngIf="error" type="danger">{{ error }}</my-alert> <my-alert *ngIf="error" type="danger">{{ error }}</my-alert>
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="refresh" aria-hidden="true"></my-global-icon> <my-global-icon iconName="refresh" aria-hidden="true"></my-global-icon>
<ng-container i18n>My synchronizations</ng-container> <ng-container i18n>My synchronizations</ng-container>
</h1> </div>
</div>
<div *ngIf="!syncEnabled()"> <div *ngIf="!syncEnabled()">
<p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p> <p class="muted" i18n>⚠️ The instance doesn't allow channel synchronization</p>

14
client/src/app/+my-library/my-video-imports/my-video-imports.component.html
View File

@ -1,14 +1,16 @@
<h1 class="d-flex justify-content-between"> <div class="sub-title-container">
<span> <div class="sub-title">
<my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
<ng-container i18n>My imports</ng-container> <h1 i18n>My imports</h1>
</span> </div>
<a routerLink="/my-library/video-channel-syncs" class="button-link"> <div>
<a routerLink="/my-library/video-channel-syncs" class="peertube-button-link peertube-icon-link grey-button">
<my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon> <my-global-icon iconName="repeat" aria-hidden="true"></my-global-icon>
<ng-container i18n>My synchronizations</ng-container> <ng-container i18n>My synchronizations</ng-container>
</a> </a>
</h1> </div>
</div>
<div class="mb-4 d-flex justify-content-between"> <div class="mb-4 d-flex justify-content-between">
<my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter> <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>

8
client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
View File

@ -6,11 +6,5 @@ pre {
} }
.video-import-error { .video-import-error {
color: #ff0000; color: pvar(--red);
}
.button-link {
@include peertube-button-link;
@include grey-button;
@include button-with-icon(18px, 3px, -1px);
} }

8
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
View File

@ -1,8 +1,10 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
<ng-container i18n>My playlists</ng-container> <h1 i18n>My playlists</h1>
<span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span> <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
</h1> </div>
</div>
<my-channels-setup-message></my-channels-setup-message> <my-channels-setup-message></my-channels-setup-message>

4
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
View File

@ -1,10 +1,6 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
h1 {
display: flex;
}
input[type=text] { input[type=text] {
@include peertube-input-text(300px); @include peertube-input-text(300px);
} }

14
client/src/app/+my-library/my-videos/my-videos.component.html
View File

@ -1,22 +1,22 @@
<h1> <div class="sub-title-container">
<span class="text-nowrap me-2"> <div class="sub-title">
<my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
<ng-container i18n>My videos</ng-container> <h1 i18n>My videos</h1>
<span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span> <span *ngIf="pagination.totalItems" [title]="getTotalTitle()" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
</span> </div>
<div> <div>
<a routerLink="/my-library/video-imports" class="button-link"> <a routerLink="/my-library/video-imports" class="peertube-button-link grey-button peertube-button-icon me-2">
<my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cloud-download" aria-hidden="true"></my-global-icon>
<ng-container i18n>My imports</ng-container> <ng-container i18n>My imports</ng-container>
</a> </a>
<a routerLink="/my-library/ownership" class="button-link"> <a routerLink="/my-library/ownership" class="peertube-button-link grey-button peertube-button-icon">
<my-global-icon iconName="users" aria-hidden="true"></my-global-icon> <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
<ng-container i18n>Ownership changes</ng-container> <ng-container i18n>Ownership changes</ng-container>
</a> </a>
</div> </div>
</h1> </div>
<div class="videos-header d-flex justify-content-between gap-2"> <div class="videos-header d-flex justify-content-between gap-2">
<my-advanced-input-filter [emitOnInit]="false" [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> <my-advanced-input-filter [emitOnInit]="false" [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>

15
client/src/app/+my-library/my-videos/my-videos.component.scss
View File

@ -10,21 +10,6 @@ input[type=text] {
@include margin-left(0.5rem); @include margin-left(0.5rem);
} }
h1 {
display: flex;
justify-content: space-between;
.button-link {
@include peertube-button-link;
@include grey-button;
@include button-with-icon(18px, 3px, -1px);
&:not(:last-child) {
@include margin-right(10px);
}
}
}
.action-button-delete-selection { .action-button-delete-selection {
display: inline-block; display: inline-block;

8
client/src/app/shared/shared-moderation/account-blocklist.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="user-x" aria-hidden="true"></my-global-icon> <my-global-icon iconName="user-x" aria-hidden="true"></my-global-icon>
<ng-container i18n>Muted accounts</ng-container> <h1 i18n>Muted accounts</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [value]="blockedAccounts" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords"

8
client/src/app/shared/shared-moderation/server-blocklist.component.html
View File

@ -1,7 +1,9 @@
<h1> <div class="sub-title-container">
<div class="sub-title">
<my-global-icon iconName="peertube-x" aria-hidden="true"></my-global-icon> <my-global-icon iconName="peertube-x" aria-hidden="true"></my-global-icon>
<ng-container i18n>Muted servers</ng-container> <h1 i18n>Muted servers</h1>
</h1> </div>
</div>
<p-table <p-table
[value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [value]="blockedServers" [paginator]="totalRecords > 0" [totalRecords]="totalRecords"

19
client/src/sass/class-helpers/_position.scss Normal file
View File

@ -0,0 +1,19 @@
.top--1px {
position: relative;
top: -1px;
}
.top-1px {
position: relative;
top: 1px;
}
.top--2px {
position: relative;
top: -2px;
}
.top-2px {
position: relative;
top: 2px;
}

1
client/src/sass/class-helpers/index.scss
View File

@ -6,3 +6,4 @@
@use './_menu'; @use './_menu';
@use './_text'; @use './_text';
@use './_layout'; @use './_layout';
@use './_position';

44
client/src/sass/include/_mixins.scss
View File

@ -642,26 +642,52 @@
} }
@mixin sub-menu-h1 { @mixin sub-menu-h1 {
::ng-deep h1 { ::ng-deep .sub-title-container {
font-size: 1.3rem; display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
border-bottom: 2px solid $grey-background-color; border-bottom: 2px solid $grey-background-color;
padding-bottom: 15px; padding-bottom: 15px;
margin-bottom: $sub-menu-margin-bottom; margin-bottom: $sub-menu-margin-bottom;
> span > my-global-icon, > * {
gap: 0.5rem;
display: flex;
align-items: center;
}
.sub-title {
&,
h1 {
font-size: 1.3rem;
}
h1 {
margin: 0;
}
> my-global-icon { > my-global-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
position: relative;
top: -2px;
@include margin-right(10px); svg {
vertical-align: initial;
}
} }
.pt-badge { my-feed {
vertical-align: top; display: inline-block;
width: 15px;
@include margin-left(7px); my-global-icon svg {
vertical-align: initial;
position: relative;
top: 1px;
}
}
} }
} }
} }