better new account design
This commit is contained in:
Nicolas Constant
parent
a7f50b2a1f
commit
be17f56140
|
|
@ -1,19 +1,33 @@
|
|||
<div class="panel" [class.comrade__background]="isComrade">
|
||||
<h3 class="panel__title" [class.comrade__text]="isComrade">Add new account</h3>
|
||||
|
||||
<h2 class="comrade__title" *ngIf="isComrade">Welcome Comrade!</h2>
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<label [class.comrade__text]="isComrade">Please provide your <span *ngIf="isComrade">comrade</span> account:</label>
|
||||
<input type="text" class="form-control form-control-sm form-color" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrade__input]="isComrade"
|
||||
placeholder="@nickname@mastodon.social" />
|
||||
<br />
|
||||
<button *ngIf="!isLoading" type="submit" class="btn btn-success btn-sm" [class.comrade__button]="isComrade">Submit</button>
|
||||
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
||||
</form>
|
||||
<div class="panel__content">
|
||||
<h2 class="comrade__title" *ngIf="isComrade">Welcome Comrade!</h2>
|
||||
<form (ngSubmit)="onSubmit()">
|
||||
<label [class.comrade__text]="isComrade">Please provide your <span *ngIf="isComrade">comrade</span>
|
||||
account:</label>
|
||||
|
||||
<div *ngIf="isComrade" class="comrade__video">
|
||||
<iframe width="300" height="170" src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<div>
|
||||
<input type="text" class="form-control form-control-sm form-with-button"
|
||||
[(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrade__input]="isComrade"
|
||||
placeholder="@nickname@mastodon.social" />
|
||||
<!-- <br /> -->
|
||||
<button type="submit" class="form-button"
|
||||
title="add this account"
|
||||
[class.comrade__button]="isComrade">
|
||||
<span *ngIf="!isLoading">Submit</span>
|
||||
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div *ngIf="isComrade" class="comrade__video">
|
||||
<iframe width="300" height="170"
|
||||
src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,21 +1,74 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "panel";
|
||||
|
||||
$button-size: 70px;
|
||||
|
||||
.panel {
|
||||
|
||||
padding-left: 0px;
|
||||
// padding-right: 0px;
|
||||
background-position: 0 100%;
|
||||
|
||||
&__content {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-color {
|
||||
background-color: $column-color;
|
||||
border-color: $button-border-color;
|
||||
color: #fff;
|
||||
font-size: $default-font-size;
|
||||
.form-with-button {
|
||||
width: calc(100% - #{$button-size});
|
||||
float: left;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
font-size: $default-font-size;
|
||||
height: 29px;
|
||||
padding: 0 5px 0 5px;
|
||||
|
||||
background-color: $status-editor-title-background;
|
||||
color: $status-editor-color;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-width: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
// background-color: $column-color;
|
||||
// border-color: $button-border-color;
|
||||
// color: #fff;
|
||||
// font-size: $default-font-size;
|
||||
// &:focus {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// height: 29px;
|
||||
// padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
.waiting-icon {
|
||||
position: relative;
|
||||
top:1px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
@include clearButton;
|
||||
transition: all .2s;
|
||||
background-color: $status-editor-footer-background;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($status-editor-footer-background, 20%);
|
||||
background-color: darken($status-editor-footer-background, 20%);
|
||||
}
|
||||
|
||||
outline: inherit;
|
||||
&:focus {
|
||||
background-color: darken($status-editor-footer-background, 20%);
|
||||
}
|
||||
|
||||
width: $button-size;
|
||||
height: 29px;
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
$comrade_yellow: #ffcc00;
|
||||
|
|
|
|||
|
|
@ -59,9 +59,12 @@ export class AddNewAccountComponent implements OnInit {
|
|||
}
|
||||
|
||||
onSubmit(): boolean {
|
||||
this.checkBlockList(this.instance);
|
||||
if(this.isLoading) return false;
|
||||
|
||||
this.isLoading = true;
|
||||
this.isLoading = true;
|
||||
|
||||
this.checkBlockList(this.instance);
|
||||
|
||||
this.checkAndCreateApplication(this.instance)
|
||||
.then((appData: AppData) => {
|
||||
this.redirectToInstanceAuthPage(this.username, this.instance, appData);
|
||||
|
|
|
|||
Loading…
Reference in New Issue