Cleanup title-page CSS

This commit is contained in:
Chocobozzz 2022-06-16 16:10:12 +02:00
parent ef2b5520f9
commit c4a051712b
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
27 changed files with 114 additions and 129 deletions

View File

@ -53,7 +53,7 @@
</div>
</form>
<div *ngIf="!isContactFormEnabled()" class="alert alert-error" i18n>The contact form is not enabled on this instance.</div>
<div *ngIf="!isContactFormEnabled()" class="alert alert-danger" i18n>The contact form is not enabled on this instance.</div>
</div>
</ng-template>

View File

@ -1,13 +1,10 @@
<div>
<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
<a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="sub-menu-entry">Instance</a>
<div class="links">
<a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
<a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="sub-menu-entry">PeerTube</a>
<a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a>
<a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Network</a>
</div>
<a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="sub-menu-entry">Network</a>
</div>
<div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">

View File

@ -66,7 +66,7 @@
<div class="links" [ngClass]="{ 'on-channel-page': isOnChannelPage() }">
<ng-template #linkTemplate let-item="item">
<a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
<a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
</ng-template>
<my-list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>

View File

@ -5,18 +5,7 @@
</h1>
<div class="margin-content">
<div class="alert alert-danger" i18n *ngIf="externalAuthError">
Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
</div>
<ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
<div *ngIf="error" class="alert alert-danger">
{{ error }}
<span *ngIf="error === 'User email is not verified.'">
<a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a>
</span>
</div>
<div class="alert pt-alert-primary" role="alert">
<h5 class="alert-heading" i18n>
@ -34,6 +23,18 @@
</p>
</div>
<div class="alert alert-danger" i18n *ngIf="externalAuthError">
Sorry but there was an issue with the external login process. Please <a class="link-orange" routerLink="/about">contact an administrator</a>.
</div>
<div *ngIf="error" class="alert alert-danger">
{{ error }}
<a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
Request new verification email
</a>
</div>
<div class="wrapper">
<div class="login-form-and-externals">

View File

@ -51,11 +51,11 @@ input[type=email] {
}
.wrapper,
.pt-alert-primary {
.alert {
max-width: 1200px;
}
.pt-alert-primary {
.alert {
margin: 0 auto 30px;
}

View File

@ -1,7 +1,5 @@
<div class="root">
<div class="alert alert-error" *ngIf="error">
{{ error }}
</div>
<div class="alert alert-danger" *ngIf="error">{{ error }}</div>
</div>

View File

@ -1,31 +1,32 @@
<div class="margin-content">
<div i18n class="title-page title-page-single">
Reset my password
</div>
<h1 i18n class="title-page">Reset my password</h1>
<form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
<div class="form-group">
<label i18n for="password">Password</label>
<my-input-text formControlName="password" inputId="password"
i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="new-password"></my-input-text>
<div *ngIf="formErrors.password" class="form-error">
{{ formErrors.password }}
</div>
<my-input-text
formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
></my-input-text>
<div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
</div>
<div class="form-group">
<label i18n for="password-confirm">Confirm password</label>
<my-input-text formControlName="password-confirm" inputId="password-confirm"
i18n-placeholder placeholder="Confirmed password"
[ngClass]="{ 'input-error': formErrors['password-confirm'] }"
autocomplete="new-password"></my-input-text>
<div *ngIf="formErrors['password-confirm']" class="form-error">
{{ formErrors['password-confirm'] }}
</div>
<my-input-text
formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
[ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password"
></my-input-text>
<div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
</div>
<input type="submit" i18n-value value="Reset my password" [disabled]="!form.valid || !isConfirmedPasswordValid()">
<input
class="peertube-button orange-button" type="submit" i18n-value value="Reset my password"
[disabled]="!form.valid || !isConfirmedPasswordValid()"
>
</form>
</div>

View File

@ -1,12 +1,7 @@
@use '_variables' as *;
@use '_mixins' as *;
input:not([type=submit]) {
@include peertube-input-text(340px);
my-input-text {
max-width: 340px;
display: block;
}
input[type=submit] {
@include peertube-button;
@include orange-button;
}

View File

@ -1,21 +1,21 @@
<div class="margin-content">
<div i18n class="title-page title-page-single">
Request email for account verification
</div>
<h1 i18n class="title-page">Request email for account verification</h1>
<form *ngIf="requiresEmailVerification; else emailVerificationNotRequired" role="form" (ngSubmit)="askSendVerifyEmail()" [formGroup]="form">
<div class="form-group">
<label i18n for="verify-email-email">Email</label>
<input
type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
>
<div *ngIf="formErrors['verify-email-email']" class="form-error">
{{ formErrors['verify-email-email'] }}
</div>
<div *ngIf="formErrors['verify-email-email']" class="form-error">{{ formErrors['verify-email-email'] }}</div>
</div>
<input type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
<input class="peertube-button orange-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
</form>
<ng-template #emailVerificationNotRequired>
<div i18n>This instance does not require email verification.</div>
</ng-template>

View File

@ -1,12 +1,8 @@
@use '_variables' as *;
@use '_mixins' as *;
input:not([type=submit]) {
input[type=email] {
@include peertube-input-text(340px);
display: block;
}
input[type=submit] {
@include peertube-button;
@include orange-button;
}

View File

@ -1,18 +1,14 @@
<div class="margin-content">
<div i18n class="title-page title-page-single">
Verify account email confirmation
</div>
<h1 i18n class="title-page">Verify account email confirmation</h1>
<my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false">
</my-signup-success>
<div i18n class="alert alert-success" *ngIf="isPendingEmail && success">
Email updated.
</div>
<div i18n class="alert alert-success" *ngIf="isPendingEmail && success">Email updated.</div>
<div *ngIf="failed">
<div class="alert alert-danger" *ngIf="failed">
<span i18n>An error occurred.</span>
<a i18n routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email.</a>
<a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email</a>
</div>
</div>

View File

@ -1,5 +1,5 @@
<div class="margin-content">
<h1 class="title-page title-page-single" i18n>{{ video.name }}</h1>
<h1 class="title-page" i18n>{{ video.name }}</h1>
<div class="stats-embed">
<div class="global-stats">

View File

@ -1,7 +1,7 @@
<div class="margin-content">
<div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
<h1 i18n class="title-page" *ngIf="pagination.totalItems">
Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
</div>
</h1>
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>

View File

@ -113,7 +113,7 @@
<div class="links">
<ng-template #linkTemplate let-item="item">
<a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
<a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
</ng-template>
<my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>

View File

@ -1,5 +1,5 @@
<div class="margin-content">
<h1 class="title-page title-page-single" i18n>Studio for {{ video.name }}</h1>
<h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
<div class="columns">
<form role="form" [formGroup]="form">

View File

@ -5,15 +5,6 @@
@include peertube-select-container(auto);
}
.title-page a {
color: pvar(--mainForegroundColor);
&:hover {
text-decoration: none;
opacity: .8;
}
}
my-peertube-checkbox {
display: block;
margin-bottom: 1rem;

View File

@ -40,7 +40,7 @@
<div *ngIf="!user.isUploadDisabled()" class="margin-content">
<my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
<div class="title-page title-page-single" *ngIf="isInSecondStep()">
<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>
</div>

View File

@ -1,5 +1,5 @@
<div class="margin-content">
<div class="title-page title-page-single">
<div class="title-page">
<span class="me-1" i18n>Update</span>
<a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
</div>

View File

@ -1,6 +1,6 @@
<div>
<div class="title-block">
<h2 class="title-page title-page-single">
<h2 class="title-page">
{totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
</h2>

View File

@ -1,9 +1,8 @@
<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
<ng-container *ngIf="hasVideos$ | async">
<div class="title-page-container">
<h2 i18n class="title-page title-page-single">
Other videos
</h2>
<h2 i18n class="title-page">Other videos</h2>
<div *ngIf="!playlist" class="title-page-autoplay"
[ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
>

View File

@ -8,18 +8,14 @@
margin-bottom: 25px;
flex-wrap: wrap-reverse;
.title-page.active,
.title-page.title-page-single {
.title-page {
@include margin-right(.5rem !important);
margin-bottom: unset;
margin-top: 0;
}
}
.title-page {
margin-top: 0;
}
.title-page-autoplay {
@include margin-left(auto);

View File

@ -1,7 +1,13 @@
<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
<ng-container *ngFor="let menuEntry of menuEntries; index as id">
<a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a>
<a
*ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
[routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
(click)="onActiveLinkScrollToTop(routerLink)"
>
{{ menuEntry.label }}
</a>
<div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
#dropdown="ngbDropdown" autoClose="true" container="body">
@ -10,7 +16,7 @@
tabindex=0
[ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
(click)="openModal(id)" (keydown.enter)="openModal(id)"
role="button" class="title-page title-page-settings">
role="button" class="sub-menu-entry">
<ng-container i18n>{{ menuEntry.label }}</ng-container>
</span>
@ -19,7 +25,7 @@
tabindex=0
[ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
(click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
role="button" class="title-page title-page-settings"
role="button" class="sub-menu-entry"
>
<ng-container i18n>{{ menuEntry.label }}</ng-container>
</span>

View File

@ -8,7 +8,7 @@
<div class="modal-body">
<div class="playlist" *ngIf="playlist">
<div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div>
<h5 i18n *ngIf="video">Share the playlist</h5>
<div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
<div i18n>This playlist is private so you won't be able to share it with external users</div>
@ -85,7 +85,7 @@
<div class="video" *ngIf="video">
<div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div>
<h5 *ngIf="playlist" i18n>Share the video</h5>
<div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
<div i18n>This video is private so you won't be able to share it with external users</div>

View File

@ -5,10 +5,6 @@ my-input-text {
width: 100%;
}
.title-page.title-page-single {
margin-top: 0;
}
.playlist {
margin-bottom: 50px;
}
@ -80,3 +76,7 @@ my-input-text {
align-items: center;
justify-content: space-between;
}
h5 {
font-size: 1.15rem;
}

View File

@ -99,11 +99,5 @@ $margin-top: 30px;
align-items: center;
height: auto;
margin-bottom: 10px;
.title-page {
@include margin-right(0);
margin-bottom: 10px;
}
}
}

View File

@ -98,7 +98,7 @@ label + .form-group-description {
// ---------------------------------------------------------------------------
.title-page {
.sub-menu-entry {
@include disable-default-a-behaviour;
@include margin-right(55px);
@ -107,20 +107,13 @@ label + .form-group-description {
display: inline-block;
font-weight: $font-semibold;
border-bottom: 2px solid transparent;
&.title-page-single {
margin-top: 30px;
margin-bottom: 25px;
}
white-space: nowrap;
font-size: 1rem;
&.active {
border-bottom-color: pvar(--mainColor);
}
&.title-page-single {
font-size: 125%;
}
&:hover,
&:active,
&:focus {
@ -130,8 +123,7 @@ label + .form-group-description {
&.active,
&:hover,
&:active,
&:focus,
&.title-page-single {
&:focus {
opacity: 1;
outline: 0 hidden !important;
}
@ -147,10 +139,31 @@ label + .form-group-description {
padding: 35px 25px;
}
.title-page-about,
.title-page-settings {
white-space: nowrap;
font-size: 1rem;
.title-page {
@include margin-right(55px);
margin-top: 30px;
margin-bottom: 25px;
color: pvar(--mainForegroundColor);
display: inline-block;
font-weight: $font-semibold;
font-size: 1.25rem;
a {
@include disable-default-a-behaviour;
color: inherit;
&:hover {
color: inherit;
opacity: 0.8;
}
}
@media screen and (max-width: $mobile-view) {
@include margin-left(15px);
}
}
.admin-sub-header {

View File

@ -882,15 +882,17 @@ p-toast {
padding: 10px 20px;
.message {
flex-grow: 1;
@include margin-right(20px);
flex-grow: 1;
h3 {
font-size: 21px;
}
p {
font-size: 16px;
@include peertube-word-wrap;
margin-bottom: 0;
}
}