mirror of https://github.com/Chocobozzz/PeerTube
Refactoring login component style
Wicklow
Chocobozzz
parent
75034888a6
commit
4e082e78d0
|
|
@ -13,7 +13,7 @@
|
|||
</h5>
|
||||
|
||||
<p *ngIf="signupAllowed" i18n>
|
||||
This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
|
||||
This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor d-inline" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
|
||||
You may also search for another instance to match your exact needs at: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
|
||||
</p>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<div class="wrapper">
|
||||
<div class="login-form-and-externals">
|
||||
|
||||
<form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
|
||||
<form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
|
||||
<ng-container *ngIf="!otpStep">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
|
|
@ -78,20 +78,20 @@
|
|||
></my-input-text>
|
||||
</div>
|
||||
|
||||
<input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
|
||||
<input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
|
||||
|
||||
<div *ngIf="!otpStep" class="additional-links">
|
||||
<a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
|
||||
<div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5">
|
||||
<a i18n role="button" class="link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
|
||||
|
||||
<ng-container *ngIf="signupAllowed">
|
||||
<span>·</span>
|
||||
<a i18n routerLink="/signup" class="link-orange">Create an account</a>
|
||||
<a i18n routerLink="/signup" class="link-orange mx-3">Create an account</a>
|
||||
</ng-container>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
|
||||
<div class="block-title" i18n>Or sign in with</div>
|
||||
<div class="fw-semibold" i18n>Or sign in with</div>
|
||||
|
||||
<div>
|
||||
<a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
|
||||
|
|
@ -119,13 +119,13 @@
|
|||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-body text-start">
|
||||
|
||||
<div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
|
||||
We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n>
|
||||
<div *ngIf="!isEmailDisabled()" class="mb-4" i18n>
|
||||
Enter your email address and we will send you a link to reset your password.
|
||||
</div>
|
||||
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
|
||||
<div class="modal-footer inputs">
|
||||
<input
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
|
||||
type="button" role="button" i18n-value value="Cancel" class="peertube-button d-none d-sm-block"
|
||||
(click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
@import 'bootstrap/scss/functions';
|
||||
@import 'bootstrap/scss/variables';
|
||||
|
||||
label {
|
||||
@include font-size(1.125rem);
|
||||
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -15,39 +13,16 @@ input[type=email] {
|
|||
@include peertube-input-text(100%);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
text-align: start;
|
||||
|
||||
.forgot-password-instructions {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-view) {
|
||||
.modal-body {
|
||||
#forgot-password-email {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer .grey-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//garder ça ou deux flex-grow-1 flex-shrink-1 lignes 39 et 104
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper,
|
||||
|
|
@ -56,46 +31,24 @@ input[type=email] {
|
|||
}
|
||||
|
||||
.alert {
|
||||
margin: 0 auto 30px;
|
||||
@include rfs(0 auto 2rem, margin);
|
||||
}
|
||||
|
||||
.login-form-and-externals {
|
||||
@include margin-left(10px);
|
||||
@include margin-right(10px);
|
||||
@include margin-bottom(2.5rem);
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 450px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
|
||||
input[type=submit] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.additional-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0 30px;
|
||||
|
||||
.link-orange {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external-login-blocks {
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
|
||||
.block-title {
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.external-login-block {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
|
|
@ -119,10 +72,10 @@ input[type=email] {
|
|||
.instance-information {
|
||||
@include margin-left(10px);
|
||||
@include margin-right(10px);
|
||||
@include margin-bottom(2.5rem);
|
||||
@include rfs (22rem, min-width);
|
||||
|
||||
max-width: 600px;
|
||||
min-width: 350px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.terms-anchor {
|
||||
|
|
@ -133,45 +86,33 @@ input[type=email] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@mixin column-reverse-display {
|
||||
flex-direction: column-reverse;
|
||||
@include on-small-main-col {
|
||||
.wrapper {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.login-form-and-externals,
|
||||
.instance-information {
|
||||
@include margin-left(0);
|
||||
@include margin-right(0);
|
||||
.login-form-and-externals,
|
||||
.instance-information {
|
||||
@include margin-left(0);
|
||||
@include margin-right(0);
|
||||
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
min-width: unset;
|
||||
align-self: center;
|
||||
}
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
min-width: unset;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.instance-information {
|
||||
::ng-deep .accordion {
|
||||
.instance-information {
|
||||
::ng-deep .accordion {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.terms-anchor {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.terms-anchor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terms-link {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: breakpoint(md)) {
|
||||
.wrapper {
|
||||
@include column-reverse-display();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: breakpoint(md) + $menu-width) {
|
||||
:host-context(.main-col:not(.expanded)) {
|
||||
.wrapper {
|
||||
@include column-reverse-display();
|
||||
.terms-link {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue