Skip to content

Commit

Permalink
Add a stepper mockup for the create community
Browse files Browse the repository at this point in the history
  • Loading branch information
@sondreb
sondreb committed Oct 6, 2024
1 parent c1303b5 commit 55a3286
Show file tree
Hide file tree
Showing 3 changed files with 308 additions and 49 deletions.
299 changes: 250 additions & 49 deletions app/src/app/communities/create/create.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,200 @@
<form [formGroup]="form" novalidate (ngSubmit)="onSubmit()">
<app-avatar formControlName="avatar"></app-avatar>
<mat-stepper #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Create your community</ng-template>

<mat-card class="form-card">
<mat-card-content>
<mat-form-field class="full-width">
<mat-label>Community name</mat-label>
<input matInput #name placeholder="Community name" maxlength="200" formControlName="name" />
</mat-form-field>
<!-- <div>
<p>You want to create your own community? Great!</p>
<p>
On Ariton, communities are important and we want both the owners, and the members to have a great
experience.
</p>
<p>We work very hard to make sure Ariton is a great place for communities, so we.</p>
</div> -->

<mat-form-field class="full-width">
<mat-label>Community type</mat-label>
<mat-select formControlName="type">
@for (type of communityTypes; track type) {
<mat-option [value]="type.type">{{ type.name }}</mat-option>
}
</mat-select>
</mat-form-field>
<div>
<div class="storage-container">
<mat-icon class="storage-icon" inline="true">diversity_1</mat-icon>
<h1>Choose the feature options</h1>
<p>Choose the features you want to include in your community. You can always change these later on.</p>
<p>
<mat-button-toggle-group [(ngModel)]="premiumPeriod">
<mat-button-toggle value="monthly">Monthly</mat-button-toggle>
<mat-button-toggle value="annual">Annual</mat-button-toggle>
</mat-button-toggle-group>
</p>
</div>

<div class="offers">
@if (premiumPeriod === 'monthly') {
<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud</mat-icon>
<mat-card-title>Standard (1 GB)</mat-card-title>
<mat-card-subtitle>Ideal for small and private communities.</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>Your current storage option.</p>
</mat-card-content>
<mat-card-actions>
<button mat-button [disabled]="true">CURRENT</button>
</mat-card-actions>
</mat-card>

<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud_done</mat-icon>
<mat-card-title>Basic (10 GB)</mat-card-title>
<mat-card-subtitle>$2 for 1 month</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>Upgrade your current storage to 10x the amount of storage for only $2 per month.</p>
<!-- <mat-chip-set>
<mat-chip>charming</mat-chip>
<mat-chip>graceful</mat-chip>
<mat-chip>sassy</mat-chip>
</mat-chip-set> -->
</mat-card-content>
<mat-card-actions>
<button mat-button>CHOOSE</button>
</mat-card-actions>
</mat-card>

<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud_done</mat-icon>
<mat-card-title>Standard (50 GB)</mat-card-title>
<mat-card-subtitle>$8 for 1 month</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
This option is perfect for those who need more storage than the Basic plan, if you plan on storing
more photos and files this is a great option for you.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>CHOOSE</button>
</mat-card-actions>
</mat-card>

<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud_done</mat-icon>
<mat-card-title>Premium (100 GB)</mat-card-title>
<mat-card-subtitle>$14 for 1 month</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
For only $14 per month you can get 100 GB of storage, this is perfect for those who need to store a
lot of files.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>CHOOSE</button>
</mat-card-actions>
</mat-card>
} @else {
<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud</mat-icon>
<mat-card-title>Standard (1 GB)</mat-card-title>
<mat-card-subtitle>Free</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>Your current storage option.</p>
</mat-card-content>
<mat-card-actions>
<button mat-button [disabled]="true">CURRENT</button>
</mat-card-actions>
</mat-card>

<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud_done</mat-icon>
<mat-card-title>Basic (10 GB)</mat-card-title>
<mat-card-subtitle>$22 for 1 years</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>Upgrade your current storage to 10x the amount of storage for only $22 per year.</p>
<!-- <mat-chip-set>
<mat-chip>charming</mat-chip>
<mat-chip>graceful</mat-chip>
<mat-chip>sassy</mat-chip>
</mat-chip-set> -->
</mat-card-content>
<mat-card-actions>
<button mat-button>CHOOSE</button>
</mat-card-actions>
</mat-card>

<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud_done</mat-icon>
<mat-card-title>Standard (50 GB)</mat-card-title>
<mat-card-subtitle>$88 for 1 year</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
This option is perfect for those who need more storage than the Basic plan, if you plan on storing
more photos and files this is a great option for you.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>CHOOSE</button>
</mat-card-actions>
</mat-card>

<mat-card class="offer-card">
<mat-card-header>
<mat-icon mat-card-avatar>cloud_done</mat-icon>
<mat-card-title>Premium (100 GB)</mat-card-title>
<mat-card-subtitle>$322 for 1 year</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
For only $322 per year you can get 100 GB of storage, this is perfect for those who need to store a
lot of files.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>CHOOSE</button>
</mat-card-actions>
</mat-card>
}
</div>
</div>

<!-- <mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required />
</mat-form-field> -->
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup" label="Fill out details">
<div>
<app-avatar formControlName="avatar"></app-avatar>

<mat-card class="form-card">
<mat-card-content>
<mat-form-field class="full-width">
<mat-label>Community name</mat-label>
<input matInput #name placeholder="Community name" maxlength="200" formControlName="name" />
</mat-form-field>

<!-- <mat-form-field class="full-width">
<mat-form-field class="full-width">
<mat-label>Community type</mat-label>
<mat-select formControlName="type">
@for (type of communityTypes; track type) {
<mat-option [value]="type.type">{{ type.name }}</mat-option>
}
</mat-select>
</mat-form-field>

<!-- <mat-form-field class="full-width">
<mat-label>Title</mat-label>
<input matInput #title placeholder="Title" formControlName="title" />
@if (form.controls['title'].hasError('required')) {
Expand All @@ -33,16 +210,16 @@
}
</mat-form-field> -->

<mat-form-field class="full-width">
<mat-label>About</mat-label>
<textarea maxlength="300" matInput #bio placeholder="About" formControlName="bio"></textarea>
@if (form.controls['bio'].hasError('required')) {
<mat-error>About is <strong>required</strong></mat-error>
}
<mat-hint align="end">{{ bio.value.length }} / 300</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<mat-label>About</mat-label>
<textarea maxlength="300" matInput #bio placeholder="About" formControlName="bio"></textarea>
@if (form.controls['bio'].hasError('required')) {
<mat-error>About is <strong>required</strong></mat-error>
}
<mat-hint align="end">{{ bio.value.length }} / 300</mat-hint>
</mat-form-field>

<!-- <mat-form-field class="full-width">
<!-- <mat-form-field class="full-width">
<mat-label>Location</mat-label>
<input matInput placeholder="Location" formControlName="location" />
@if (form.controls['location'].hasError('required')) {
Expand All @@ -51,7 +228,7 @@
<mat-icon matSuffix>place</mat-icon>
</mat-form-field> -->

<!--
<!--
<mat-form-field class="full-width">
<mat-select placeholder="State" formControlName="state">
Expand All @@ -64,7 +241,7 @@
}
</mat-form-field>-->

<!--
<!--
<div class="row">
<div class="col">
<mat-form-field class="full-width">
Expand All @@ -74,23 +251,25 @@
</div>
</div>-->

<!-- In your component.html -->
<!-- Step 5: Update HTML to display dynamic link inputs -->
<!--<div formArrayName="links" *ngFor="let link of links.controls; let i = index">-->
<div formArrayName="owners">
@for (owner of owners.controls; track owner; let i = $index) {
<div class="link-input">
<mat-form-field class="full-width">
<input matInput type="text" [formControlName]="i" placeholder="Owner (DID)" />
</mat-form-field>
<!-- <button mat-stroked-button type="button" (click)="removeLink(i)">Remove</button> -->
<button mat-icon-button type="button" (click)="removeOwner(i)"><mat-icon>clear</mat-icon></button>
</div>
}
</div>
<button mat-stroked-button type="button" (click)="addOwner()"><mat-icon>add_link</mat-icon> Add Owner</button>
<!-- In your component.html -->
<!-- Step 5: Update HTML to display dynamic link inputs -->
<!--<div formArrayName="links" *ngFor="let link of links.controls; let i = index">-->
<div formArrayName="owners">
@for (owner of owners.controls; track owner; let i = $index) {
<div class="link-input">
<mat-form-field class="full-width">
<input matInput type="text" [formControlName]="i" placeholder="Owner (DID)" />
</mat-form-field>
<!-- <button mat-stroked-button type="button" (click)="removeLink(i)">Remove</button> -->
<button mat-icon-button type="button" (click)="removeOwner(i)"><mat-icon>clear</mat-icon></button>
</div>
}
</div>
<button mat-stroked-button type="button" (click)="addOwner()">
<mat-icon>add_link</mat-icon> Add Owner
</button>

<!--
<!--
<div class="row">
<div class="col">
<mat-radio-group formControlName="shipping">
Expand All @@ -100,10 +279,32 @@
</mat-radio-group>
</div>
</div>-->
</mat-card-content>
<mat-card-actions align="end">
<button mat-button type="button" (click)="back()">Cancel</button>
<button mat-flat-button color="primary" type="submit" [disabled]="form.invalid">Save</button>
</mat-card-actions>
</mat-card>
</mat-card-content>
<mat-card-actions align="end">
<button mat-button type="button" (click)="back()">Cancel</button>
<button mat-flat-button color="primary" type="submit" [disabled]="form.invalid">Save</button>
</mat-card-actions>
</mat-card>
</div>

<form [formGroup]="secondFormGroup">
<mat-form-field>
<mat-label>Address</mat-label>
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" required />
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-stepper>
</form>
40 changes: 40 additions & 0 deletions app/src/app/communities/create/create.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,43 @@ form {

@media (max-width: 959.98px) {
}

.storage-container {
text-align: center;
}

.storage-icon {
font-size: 3em;
}

.offer-card {
display: inline-block;
padding: 12px 16px;
margin-right: 1em;
margin-bottom: 1em;
max-width: 320px;
font-size: 0.9em;
border: 2px solid transparent;
}

.offer-card:hover {
border: 2px solid var(--mat-app-text-color);
}

mat-card-content {
height: 180px;
max-height: 180px;
}

.offers {
display: flex;
justify-content: center;
}

@media (max-width: 1200px) {
.offers {
display: flex;
flex-direction: column;
align-items: center;
}
}
Loading

0 comments on commit 55a3286

Please sign in to comment.