Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2 from girik21/dev/template-cleanup

Browse source 
Template Cleanup
This commit is contained in:
Anish Gurung 2024-03-21 09:02:11 -07:00 • committed by GitHub
commit 39385049e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 580 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -40,3 +40,5 @@ testem.log
# System Files
.DS_Store
Thumbs.db
/.angular

2
src/app/@theme/components/footer/footer.component.ts
View file

@ -5,7 +5,7 @@ import { Component } from '@angular/core';
styleUrls: ['./footer.component.scss'],
template: `
<span class="created-by">
Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
</span>
<div class="socials">
<a href="#" target="_blank" class="ion ion-social-github"></a>

3
src/app/@theme/components/header/header.component.html
View file

@ -3,8 +3,9 @@
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
<nb-icon icon="menu-2-outline"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()">T<span>Resume</span></a>
<a class="logo" href="#" (click)="navigateHome()"><span><img src="assets/images/thread.png" alt="My Logo"></span>Resume Tailor</a>
</div>
<div class="spc"> </div>
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
</nb-select>

8
src/app/@theme/components/header/header.component.scss
View file

@ -50,6 +50,14 @@
white-space: nowrap;
text-decoration: none;
}
.spc {
padding-left: 100px;
font-size: 1.25rem;
@include nb-ltr(border-left, 1px solid nb-theme(divider-color));
@include nb-rtl(border-right, 1px solid nb-theme(divider-color));
white-space: nowrap;
text-decoration: none;
}
}
@include media-breakpoint-down(sm) {

2
src/app/pages/layout/layout.module.ts
View file

@ -21,6 +21,7 @@ import { NewsPostComponent } from './infinite-list/news-post/news-post.component
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
import { AccordionComponent } from './accordion/accordion.component';
import { NewsService } from './news.service';
import { ProfileComponent } from './stepper/profile/profile.component';
@NgModule({
imports: [
@ -48,6 +49,7 @@ import { NewsService } from './news.service';
InfiniteListComponent,
NewsPostComponent,
AccordionComponent,
ProfileComponent,
],
providers: [
NewsService,

1
src/app/pages/layout/stepper/profile/profile.component.html Normal file
View file

@ -0,0 +1 @@
<p>profile works!</p>

0
src/app/pages/layout/stepper/profile/profile.component.scss Normal file
View file

23
src/app/pages/layout/stepper/profile/profile.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
describe('ProfileComponent', () => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ProfileComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
src/app/pages/layout/stepper/profile/profile.component.ts Normal file
View file

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.scss']
})
export class ProfileComponent {
}

641
src/app/pages/layout/stepper/stepper.component.html
View file

@ -2,25 +2,535 @@
<nb-card-body>
<nb-stepper orientation="horizontal">
<nb-step [label]="labelOne">
<ng-template #labelOne>First step</ng-template>
<h3>Step content #1</h3>
<ng-template #labelOne>Personal details</ng-template>
<!-- Start of form -->
<nb-card>
<nb-card-header> <h3>Personal Details</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label
for="fullName"
class="text-muted font-weight-bold small"
>Full Name</label
>
<input
type="text"
class="form-control bg-light"
id="fullName"
placeholder="Full name"
/>
</div>
<div class="form-group text-left">
<label for="email" class="text-muted font-weight-bold small"
>Email Address</label
>
<input
type="email"
class="form-control bg-light"
id="email"
placeholder="Email address"
/>
</div>
<div class="form-group text-left">
<label for="phone" class="text-muted font-weight-bold small"
>Phone Number</label
>
<input
type="tel"
class="form-control bg-light"
id="phone"
placeholder="Phone number"
/>
</div>
<div class="form-group text-left">
<label
for="linkedin"
class="text-muted font-weight-bold small"
>LinkedIn URL</label
>
<input
type="url"
class="form-control bg-light"
id="linkedin"
placeholder="LinkedIn URL"
/>
</div>
</div>
<div class="col-md-6">
<div class="form-group text-left">
<label
for="website"
class="text-muted font-weight-bold small"
>Personal Website or Relevant Link</label
>
<input
type="url"
class="form-control bg-light"
id="website"
placeholder="Website link"
/>
</div>
<div class="form-group text-left">
<label
for="country"
class="text-muted font-weight-bold small"
>Country</label
>
<input
type="text"
class="form-control bg-light"
id="country"
placeholder="Country"
/>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo>Second step</ng-template>
<h3>Step content #2</h3>
<nb-step label="Experience">
<!-- Start of form -->
<nb-card>
<nb-card-header><h3>Experience</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label for="role" class="text-muted font-weight-bold small"
>What was your role at the company?</label
>
<input
type="text"
class="form-control bg-light"
id="role"
placeholder="Your role at the company"
/>
</div>
<div class="form-group text-left">
<label
for="company"
class="text-muted font-weight-bold small"
>For which company did you work?</label
>
<input
type="text"
class="form-control bg-light"
id="company"
placeholder="Company name"
/>
</div>
<div class="form-group text-left">
<label
for="duration"
class="text-muted font-weight-bold small"
>How long were you with the company?</label
>
<div class="input-group">
<input
type="text"
class="form-control bg-light"
id="duration"
placeholder="Start date"
/>
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input
type="text"
class="form-control bg-light"
placeholder="End date"
/>
</div>
</div>
<div class="form-group text-left">
<label
for="location"
class="text-muted font-weight-bold small"
>Where was the company located?</label
>
<input
type="text"
class="form-control bg-light"
id="location"
placeholder="Company location"
/>
</div>
</div>
<div class="col-md-6">
<div class="form-group text-left">
<label
for="responsibilities"
class="text-muted font-weight-bold small"
>What did you do at the company?</label
>
<textarea
class="form-control bg-light"
id="responsibilities"
rows="5"
placeholder="Enter your responsibilities"
></textarea>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Third step">
<h3>Step content #3</h3>
<nb-step label="Project">
<!-- Start of form -->
<nb-card>
<nb-card-header><h3>Project</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label
for="projectTitle"
class="text-muted font-weight-bold small"
>Give your project a title</label
>
<input
type="text"
class="form-control bg-light"
id="projectTitle"
placeholder="Project title"
/>
</div>
<div class="form-group text-left">
<label
for="organization"
class="text-muted font-weight-bold small"
>In which organization did you do your project?</label
>
<input
type="text"
class="form-control bg-light"
id="organization"
placeholder="Organization name"
/>
</div>
<div class="form-group text-left">
<label
for="projectDuration"
class="text-muted font-weight-bold small"
>When did you do your project?</label
>
<div class="input-group">
<input
type="text"
class="form-control bg-light"
id="projectDuration"
placeholder="Start date"
/>
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input
type="text"
class="form-control bg-light"
placeholder="End date"
/>
</div>
</div>
<div class="form-group text-left">
<label
for="projectURL"
class="text-muted font-weight-bold small"
>Project URL</label
>
<input
type="url"
class="form-control bg-light"
id="projectURL"
placeholder="Project URL"
/>
</div>
</div>
<div class="col-md-6">
<div class="form-group text-left">
<label
for="projectDescription"
class="text-muted font-weight-bold small"
>Now describe what you did</label
>
<textarea
class="form-control bg-light"
id="projectDescription"
rows="5"
placeholder="Describe your project"
></textarea>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Education">
<!-- Start of form -->
<nb-card>
<nb-card-header><h3>Education</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label
for="degree"
class="text-muted font-weight-bold small"
>What is your degree or other qualification and
major?</label
>
<input
type="text"
class="form-control bg-light"
id="degree"
placeholder="Your degree and major"
/>
</div>
<div class="form-group text-left">
<label
for="institution"
class="text-muted font-weight-bold small"
>Where did you earn your degree/qualification?</label
>
<input
type="text"
class="form-control bg-light"
id="institution"
placeholder="Institution name"
/>
</div>
<div class="form-group text-left">
<label
for="institutionLocation"
class="text-muted font-weight-bold small"
>Where is the institution located?</label
>
<input
type="text"
class="form-control bg-light"
id="institutionLocation"
placeholder="Institution location"
/>
</div>
<div class="form-group text-left">
<label
for="graduationYear"
class="text-muted font-weight-bold small"
>When did you earn your degree/qualification?</label
>
<input
type="text"
class="form-control bg-light"
id="graduationYear"
placeholder="Graduation year"
/>
</div>
</div>
<div class="col-md-6">
<div class="form-group text-left">
<label for="minor" class="text-muted font-weight-bold small"
>Did you minor in anything?</label
>
<input
type="text"
class="form-control bg-light"
id="minor"
placeholder="Minor subject"
/>
</div>
<div class="form-group text-left">
<label for="gpa" class="text-muted font-weight-bold small"
>GPA (if applicable)</label
>
<input
type="text"
class="form-control bg-light"
id="gpa"
placeholder="Your GPA"
/>
</div>
<div class="form-group text-left">
<label
for="additionalInfo"
class="text-muted font-weight-bold small"
>Open field for additional information</label
>
<textarea
class="form-control bg-light"
id="additionalInfo"
rows="5"
placeholder="Additional information"
></textarea>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Certifications">
<!-- Start of form -->
<nb-card>
<nb-card-header> <h3>Certifications</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label
for="certificateName"
class="text-muted font-weight-bold small"
>What was the certificate name?</label
>
<input
type="text"
class="form-control bg-light"
id="certificateName"
placeholder="Certificate name"
/>
</div>
<div class="form-group text-left">
<label
for="certificateIssuer"
class="text-muted font-weight-bold small"
>Where did you get the certificate?</label
>
<input
type="text"
class="form-control bg-light"
id="certificateIssuer"
placeholder="Certificate issuer"
/>
</div>
<div class="form-group text-left">
<label
for="certificateYear"
class="text-muted font-weight-bold small"
>When did you get the certificate?</label
>
<input
type="text"
class="form-control bg-light"
id="certificateYear"
placeholder="Certificate year"
/>
</div>
<div class="form-group text-left">
<label
for="certificateRelevance"
class="text-muted font-weight-bold small"
>How is the certificate relevant?</label
>
<textarea
class="form-control bg-light"
id="certificateRelevance"
rows="5"
placeholder="Certificate relevance"
></textarea>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Skills">
<!-- Start of form -->
<nb-card>
<nb-card-header><h3>Skills</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label
for="skills"
class="text-muted font-weight-bold small"
>Enter the skills you possess</label
>
<textarea
class="form-control bg-light"
id="skills"
rows="5"
placeholder="Enter your skills"
></textarea>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour>Fourth step</ng-template>
<h3>Step content #4</h3>
<ng-template #labelFour>Summary</ng-template>
<!-- Start of form -->
<nb-card>
<nb-card-header><h3>Summary</h3></nb-card-header>
<nb-card-body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group text-left">
<label
for="professionalSummary"
class="text-muted font-weight-bold small"
>Write a professional summary</label
>
<textarea
class="form-control bg-light"
id="professionalSummary"
rows="5"
placeholder="Write your professional summary"
></textarea>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>
<!-- end of form -->
<button nbButton nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button>
</nb-step>
@ -28,116 +538,3 @@
</nb-card-body>
</nb-card>
<div class="steppers-container row">
<div class="col-md-12 col-lg-6 col-xxxl-6">
<nb-card>
<nb-card-body>
<nb-stepper #stepper>
<nb-step [stepControl]="firstForm" label="First step">
<form [formGroup]="firstForm" (ngSubmit)="onFirstSubmit()" class="step-container">
<p class="lorem">
Lorizzle ipsum dolizzle stuff fizzle, consectetuer adipiscing break it down. Nullizzle sapien velizzle,
my shizz pimpin', shizzle my nizzle crocodizzle shut the shizzle up, gravida vizzle, dang.
</p>
<div class="input-group">
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
</div>
<button nbButton nbStepperNext>next</button>
</form>
</nb-step>
<nb-step [stepControl]="secondForm" label="Second step">
<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" class="step-container">
<p class="lorem">
Pellentesque we gonna chung tortor.
Sizzle pizzle. Fizzle izzle dolor dapibus fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempus tempor.
Maurizzle cool nibh owned turpizzle. My shizz fo shizzle tortor.
</p>
<div class="input-group">
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
</div>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</form>
</nb-step>
<nb-step [stepControl]="thirdForm" label="Third step">
<form [formGroup]="thirdForm" (ngSubmit)="onThirdSubmit()" class="step-container">
<p class="lorem">
Things boom shackalack rhoncus yo. In fo shizzle my nizzle gangsta platea dictumst. Check it out pot.
</p>
<div class="input-group">
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
</div>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>Confirm</button>
</form>
</nb-step>
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
<div class="step-container">
<h3>Wizard completed!</h3>
<button nbButton (click)="stepper.reset()">Try again</button>
</div>
</nb-step>
</nb-stepper>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-12 col-lg-6 col-xxxl-6">
<nb-card size="medium">
<nb-card-body>
<nb-stepper orientation="vertical">
<nb-step label="First step">
<h3>Step content #1</h3>
<p class="lorem">
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
placerat quis, lobortis in ligula.
</p>
<button nbButton disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Second step">
<h3>Step content #2</h3>
<p class="lorem">
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Third step">
<h3>Step content #3</h3>
<p class="lorem">
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
placerat quis, lobortis in ligula.
</p>
<p class="lorem">
Curabitur luctus mattis risus nec condimentum. Donec at dui turpis. Sed vehicula fringilla rutrum. Nullam
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
</nb-step>
<nb-step label="Fourth step">
<h3>Step content #4</h3>
<p class="lorem">
Proin varius accumsan semper. Praesent consequat tincidunt sagittis. Curabitur egestas sem a ipsum bibendum,
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
viverra ex.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button>
</nb-step>
</nb-stepper>
</nb-card-body>
</nb-card>
</div>
</div>

147
src/app/pages/pages-menu.ts
View file

@ -13,157 +13,32 @@ export const MENU_ITEMS: NbMenuItem[] = [
group: true,
},
{
title: 'Layout',
title: 'Create',
icon: 'layout-outline',
children: [
{
title: 'Stepper',
title: 'Resume',
link: '/pages/layout/stepper',
},
{
title: 'List',
link: '/pages/layout/list',
},
{
title: 'Infinite List',
link: '/pages/layout/infinite-list',
},
{
title: 'Accordion',
link: '/pages/layout/accordion',
},
{
title: 'Tabs',
pathMatch: 'prefix',
link: '/pages/layout/tabs',
},
title: 'Cover Letter',
link: '',
}
],
},
{
title: 'Forms',
icon: 'edit-2-outline',
children: [
{
title: 'Form Inputs',
link: '/pages/forms/inputs',
},
{
title: 'Form Layouts',
link: '/pages/forms/layouts',
},
{
title: 'Buttons',
link: '/pages/forms/buttons',
},
{
title: 'Datepicker',
link: '/pages/forms/datepicker',
},
],
},
{
title: 'UI Features',
title: 'AI',
icon: 'keypad-outline',
link: '/pages/ui-features',
children: [
{
title: 'Grid',
link: '/pages/ui-features/grid',
title: 'AI Resume',
link: '',
},
{
title: 'Icons',
link: '/pages/ui-features/icons',
},
{
title: 'Typography',
link: '/pages/ui-features/typography',
},
{
title: 'Animated Searches',
link: '/pages/ui-features/search-fields',
},
],
},
{
title: 'Modal & Overlays',
icon: 'browser-outline',
children: [
{
title: 'Dialog',
link: '/pages/modal-overlays/dialog',
},
{
title: 'Window',
link: '/pages/modal-overlays/window',
},
{
title: 'Popover',
link: '/pages/modal-overlays/popover',
},
{
title: 'Toastr',
link: '/pages/modal-overlays/toastr',
},
{
title: 'Tooltip',
link: '/pages/modal-overlays/tooltip',
},
],
},
{
title: 'Extra Components',
icon: 'message-circle-outline',
children: [
{
title: 'Calendar',
link: '/pages/extra-components/calendar',
},
{
title: 'Progress Bar',
link: '/pages/extra-components/progress-bar',
},
{
title: 'Spinner',
link: '/pages/extra-components/spinner',
},
{
title: 'Alert',
link: '/pages/extra-components/alert',
},
{
title: 'Calendar Kit',
link: '/pages/extra-components/calendar-kit',
},
{
title: 'Chat',
link: '/pages/extra-components/chat',
},
title: 'AI Cover Letter',
link: '',
}
],
},
{
title: 'Miscellaneous',
icon: 'shuffle-2-outline',
children: [
{
title: '404',
link: '/pages/miscellaneous/404',
},
],
},
{
title: 'Auth',
icon: 'lock-outline',
children: [
{
title: 'Login',
link: '/auth/login',
},
{
title: 'Register',
link: '/auth/register',
},
],
},
];

BIN
src/assets/images/resume_logo.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/thread.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB