diff --git a/README.md b/README.md index 796e308..f0dc0f8 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,4 @@ -# Quack - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.3. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +- `ng new && cd ` +- `ng g module app --routing --flat` +- `rm app.routes.ts`, `import { routes } from './app-routing.module';` > *app.config.ts* +- `ng g moudle --route= --module=app` \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..651b7b3 --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +export const routes: Routes = [ + { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) }, + { path: 'feed', loadChildren: () => import('./feed/feed.module').then(m => m.FeedModule) }, + { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }, + { path: '', redirectTo: 'feed', pathMatch: 'full'} +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..12b5d24 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 6c6ef60..d273453 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,7 +1,7 @@ import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; -import { routes } from './app.routes'; +import { routes } from './app-routing.module'; export const appConfig: ApplicationConfig = { providers: [provideRouter(routes)] diff --git a/src/app/app.module.ts b/src/app/app.module.ts new file mode 100644 index 0000000..4a53d5a --- /dev/null +++ b/src/app/app.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AppRoutingModule } from './app-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + AppRoutingModule + ] +}) +export class AppModule { } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts deleted file mode 100644 index dc39edb..0000000 --- a/src/app/app.routes.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Routes } from '@angular/router'; - -export const routes: Routes = []; diff --git a/src/app/auth/auth-routing.module.ts b/src/app/auth/auth-routing.module.ts new file mode 100644 index 0000000..a2bd1c3 --- /dev/null +++ b/src/app/auth/auth-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { LoginComponent } from './login/login.component'; +import { RegisterComponent } from './register/register.component'; + +const routes: Routes = [ + { path: 'login', component: LoginComponent}, + { path: 'register', component: RegisterComponent}, + { path: '', redirectTo: 'login', pathMatch: 'full'} +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AuthRoutingModule { } diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html new file mode 100644 index 0000000..f66eb69 --- /dev/null +++ b/src/app/auth/auth.component.html @@ -0,0 +1 @@ +

auth works!

diff --git a/src/app/auth/auth.component.scss b/src/app/auth/auth.component.scss new file mode 100644 index 0000000..62d7372 --- /dev/null +++ b/src/app/auth/auth.component.scss @@ -0,0 +1,24 @@ +form { + padding: 10px; + margin-top: 40px; +} + +label { + display: inline-block; +} + +input { + float: right; +} + +button { + width: 50%; + border: none; + background: none; + transition: background-color 0.3s; +} + +button:hover { + background-color: var(--highlight-color); + cursor: pointer; +} \ No newline at end of file diff --git a/src/app/auth/auth.component.spec.ts b/src/app/auth/auth.component.spec.ts new file mode 100644 index 0000000..973f2cf --- /dev/null +++ b/src/app/auth/auth.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AuthComponent } from './auth.component'; + +describe('AuthComponent', () => { + let component: AuthComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AuthComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts new file mode 100644 index 0000000..985768d --- /dev/null +++ b/src/app/auth/auth.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-auth', + templateUrl: './auth.component.html', + styleUrl: './auth.component.scss' +}) +export class AuthComponent { + +} diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts new file mode 100644 index 0000000..2d70754 --- /dev/null +++ b/src/app/auth/auth.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AuthRoutingModule } from './auth-routing.module'; +import { AuthComponent } from './auth.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { LoginComponent } from './login/login.component'; +import { RegisterComponent } from './register/register.component'; + + +@NgModule({ + declarations: [ + AuthComponent, + LoginComponent, + RegisterComponent + ], + imports: [ + CommonModule, + AuthRoutingModule, + ReactiveFormsModule + ] +}) +export class AuthModule { } diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html new file mode 100644 index 0000000..7aa3031 --- /dev/null +++ b/src/app/auth/login/login.component.html @@ -0,0 +1,28 @@ +
+
+ + + + + + + + + + + + +
+ + + +
+ + + +
+ + +
+
+
diff --git a/src/app/auth/login/login.component.scss b/src/app/auth/login/login.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/auth/login/login.component.spec.ts b/src/app/auth/login/login.component.spec.ts new file mode 100644 index 0000000..1e19e5d --- /dev/null +++ b/src/app/auth/login/login.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts new file mode 100644 index 0000000..55c3ad7 --- /dev/null +++ b/src/app/auth/login/login.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss', '../auth.component.scss'] +}) +export class LoginComponent { + loginForm = new FormGroup({ + username: new FormControl(''), + password: new FormControl('') + }); + + constructor(private router: Router) { + this.loginForm.addValidators([Validators.required]); + } + + login() { + if (this.loginForm.valid) this.router.navigateByUrl("/feed"); + else alert("missing username or password"); + } +} diff --git a/src/app/auth/register/register.component.html b/src/app/auth/register/register.component.html new file mode 100644 index 0000000..002064d --- /dev/null +++ b/src/app/auth/register/register.component.html @@ -0,0 +1,37 @@ +
+
+ + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+
+ diff --git a/src/app/auth/register/register.component.scss b/src/app/auth/register/register.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/auth/register/register.component.spec.ts b/src/app/auth/register/register.component.spec.ts new file mode 100644 index 0000000..3a5dfc8 --- /dev/null +++ b/src/app/auth/register/register.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegisterComponent } from './register.component'; + +describe('RegisterComponent', () => { + let component: RegisterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RegisterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth/register/register.component.ts b/src/app/auth/register/register.component.ts new file mode 100644 index 0000000..dd8a270 --- /dev/null +++ b/src/app/auth/register/register.component.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-register', + templateUrl: './register.component.html', + styleUrls: ['./register.component.scss', '../auth.component.scss'] +}) +export class RegisterComponent { + registerForm = new FormGroup({ + username: new FormControl(''), + password: new FormControl(''), + rePassword: new FormControl('') + }); + + constructor() { + this.registerForm.addValidators([Validators.required, Validators.minLength(3)]); + } + + register() { + if (!this.registerForm.valid) alert("failed to register"); + } +} diff --git a/src/app/feed/feed-routing.module.ts b/src/app/feed/feed-routing.module.ts new file mode 100644 index 0000000..45e2581 --- /dev/null +++ b/src/app/feed/feed-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { FeedComponent } from './feed.component'; + +const routes: Routes = [{ path: '', component: FeedComponent }]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class FeedRoutingModule { } diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html new file mode 100644 index 0000000..910ede2 --- /dev/null +++ b/src/app/feed/feed.component.html @@ -0,0 +1,10 @@ + + +
+ + + + + + +
diff --git a/src/app/feed/feed.component.scss b/src/app/feed/feed.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/feed/feed.component.spec.ts b/src/app/feed/feed.component.spec.ts new file mode 100644 index 0000000..f553cb2 --- /dev/null +++ b/src/app/feed/feed.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FeedComponent } from './feed.component'; + +describe('FeedComponent', () => { + let component: FeedComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FeedComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FeedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts new file mode 100644 index 0000000..3e8ee0c --- /dev/null +++ b/src/app/feed/feed.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-feed', + templateUrl: './feed.component.html', + styleUrl: './feed.component.scss' +}) +export class FeedComponent { + +} diff --git a/src/app/feed/feed.module.ts b/src/app/feed/feed.module.ts new file mode 100644 index 0000000..7dec5d2 --- /dev/null +++ b/src/app/feed/feed.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { FeedRoutingModule } from './feed-routing.module'; +import { FeedComponent } from './feed.component'; +import { TopMenuComponent } from '../shared/top-menu/top-menu.component'; +import { SideMenuComponent } from '../shared/side-menu/side-menu.component'; +import { PostComponent } from '../shared/views/post/post.component'; + +@NgModule({ + declarations: [ + FeedComponent + ], + imports: [ + CommonModule, + FeedRoutingModule, + TopMenuComponent, + SideMenuComponent, + PostComponent + ] +}) +export class FeedModule { } diff --git a/src/app/shared/side-menu/side-menu.component.html b/src/app/shared/side-menu/side-menu.component.html new file mode 100644 index 0000000..a251418 --- /dev/null +++ b/src/app/shared/side-menu/side-menu.component.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/app/shared/side-menu/side-menu.component.scss b/src/app/shared/side-menu/side-menu.component.scss new file mode 100644 index 0000000..c60e7bd --- /dev/null +++ b/src/app/shared/side-menu/side-menu.component.scss @@ -0,0 +1,26 @@ +.side-menu { + display: block; + position: fixed; + width: 100px; + height: 100vh; + margin: 0; + padding: 0; + + background-color: rgb(163, 163, 163); + + button { + display: block; + background: none; + border: none; + + padding: 10px; + + transition: background-color 1s; + width: 100%; + + } + + button:hover { + background-color: var(--highlight-color); + } +} \ No newline at end of file diff --git a/src/app/shared/side-menu/side-menu.component.spec.ts b/src/app/shared/side-menu/side-menu.component.spec.ts new file mode 100644 index 0000000..69742e1 --- /dev/null +++ b/src/app/shared/side-menu/side-menu.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SideMenuComponent } from './side-menu.component'; + +describe('SideMenuComponent', () => { + let component: SideMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SideMenuComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SideMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/side-menu/side-menu.component.ts b/src/app/shared/side-menu/side-menu.component.ts new file mode 100644 index 0000000..95aec5a --- /dev/null +++ b/src/app/shared/side-menu/side-menu.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'app-side-menu', + standalone: true, + imports: [RouterModule], + templateUrl: './side-menu.component.html', + styleUrl: './side-menu.component.scss' +}) +export class SideMenuComponent { + +} diff --git a/src/app/shared/top-menu/top-menu.component.html b/src/app/shared/top-menu/top-menu.component.html new file mode 100644 index 0000000..82b68b6 --- /dev/null +++ b/src/app/shared/top-menu/top-menu.component.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/app/shared/top-menu/top-menu.component.scss b/src/app/shared/top-menu/top-menu.component.scss new file mode 100644 index 0000000..48a7f23 --- /dev/null +++ b/src/app/shared/top-menu/top-menu.component.scss @@ -0,0 +1,21 @@ +.logo::before { + content: 'Quack'; +} + +menu { + margin: 0; + padding: 10px; + display: flex; + align-items: center; + + background: var(--highlight-color); +} + +#search-container { + margin: auto; +} + +#search-container input { + display: inline-block; + width: 300px; +} \ No newline at end of file diff --git a/src/app/shared/top-menu/top-menu.component.spec.ts b/src/app/shared/top-menu/top-menu.component.spec.ts new file mode 100644 index 0000000..d10414c --- /dev/null +++ b/src/app/shared/top-menu/top-menu.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TopMenuComponent } from './top-menu.component'; + +describe('TopMenuComponent', () => { + let component: TopMenuComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TopMenuComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TopMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/top-menu/top-menu.component.ts b/src/app/shared/top-menu/top-menu.component.ts new file mode 100644 index 0000000..835c980 --- /dev/null +++ b/src/app/shared/top-menu/top-menu.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-top-menu', + standalone: true, + imports: [], + templateUrl: './top-menu.component.html', + styleUrl: './top-menu.component.scss' +}) +export class TopMenuComponent { + +} diff --git a/src/app/shared/views/post/post.component.html b/src/app/shared/views/post/post.component.html new file mode 100644 index 0000000..de128a1 --- /dev/null +++ b/src/app/shared/views/post/post.component.html @@ -0,0 +1,5 @@ +
+ +
Post content blblblblblblbllblb
+ +
\ No newline at end of file diff --git a/src/app/shared/views/post/post.component.scss b/src/app/shared/views/post/post.component.scss new file mode 100644 index 0000000..f937d42 --- /dev/null +++ b/src/app/shared/views/post/post.component.scss @@ -0,0 +1,16 @@ +.post-container { + width: max(50%, 250px); + margin: 10px auto; + + div { + padding: 0 10px; + } + + img { + width: 90%; + margin: 10px auto; + display: block; + border-radius: 4px; + } +} + diff --git a/src/app/shared/views/post/post.component.spec.ts b/src/app/shared/views/post/post.component.spec.ts new file mode 100644 index 0000000..7808ae8 --- /dev/null +++ b/src/app/shared/views/post/post.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostComponent } from './post.component'; + +describe('PostComponent', () => { + let component: PostComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PostComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PostComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/views/post/post.component.ts b/src/app/shared/views/post/post.component.ts new file mode 100644 index 0000000..78a6046 --- /dev/null +++ b/src/app/shared/views/post/post.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +import { SmallUserComponent } from '../small-user/small-user.component'; + +@Component({ + selector: 'app-post', + standalone: true, + imports: [SmallUserComponent], + templateUrl: './post.component.html', + styleUrl: './post.component.scss' +}) +export class PostComponent { + +} diff --git a/src/app/shared/views/small-user/small-user.component.html b/src/app/shared/views/small-user/small-user.component.html new file mode 100644 index 0000000..f340219 --- /dev/null +++ b/src/app/shared/views/small-user/small-user.component.html @@ -0,0 +1,3 @@ +
+ Username +
\ No newline at end of file diff --git a/src/app/shared/views/small-user/small-user.component.scss b/src/app/shared/views/small-user/small-user.component.scss new file mode 100644 index 0000000..072df0e --- /dev/null +++ b/src/app/shared/views/small-user/small-user.component.scss @@ -0,0 +1,21 @@ +div { + width: 100%; + padding: 10px; +} + +img { + display: inline-block; + width: 50px; + border-radius: 50%; + aspect-ratio: 1; +} + +span { + display: inline-block; + padding-left: 10px; + transform: translateY(-60%); +} + +span::before { + content: '@'; +} \ No newline at end of file diff --git a/src/app/shared/views/small-user/small-user.component.spec.ts b/src/app/shared/views/small-user/small-user.component.spec.ts new file mode 100644 index 0000000..d2a4293 --- /dev/null +++ b/src/app/shared/views/small-user/small-user.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SmallUserComponent } from './small-user.component'; + +describe('SmallUserComponent', () => { + let component: SmallUserComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SmallUserComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SmallUserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/views/small-user/small-user.component.ts b/src/app/shared/views/small-user/small-user.component.ts new file mode 100644 index 0000000..8c262cc --- /dev/null +++ b/src/app/shared/views/small-user/small-user.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-small-user', + standalone: true, + imports: [], + templateUrl: './small-user.component.html', + styleUrl: './small-user.component.scss' +}) +export class SmallUserComponent { + +} diff --git a/src/app/user/user-routing.module.ts b/src/app/user/user-routing.module.ts new file mode 100644 index 0000000..3a55d86 --- /dev/null +++ b/src/app/user/user-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { UserComponent } from './user.component'; + +const routes: Routes = [{ path: '', component: UserComponent }]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class UserRoutingModule { } diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html new file mode 100644 index 0000000..d039bb7 --- /dev/null +++ b/src/app/user/user.component.html @@ -0,0 +1 @@ +

user works!

diff --git a/src/app/user/user.component.scss b/src/app/user/user.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/user/user.component.spec.ts b/src/app/user/user.component.spec.ts new file mode 100644 index 0000000..7d16b25 --- /dev/null +++ b/src/app/user/user.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserComponent } from './user.component'; + +describe('UserComponent', () => { + let component: UserComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [UserComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(UserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts new file mode 100644 index 0000000..8d6911d --- /dev/null +++ b/src/app/user/user.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-user', + templateUrl: './user.component.html', + styleUrl: './user.component.scss' +}) +export class UserComponent { + +} diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts new file mode 100644 index 0000000..1594b39 --- /dev/null +++ b/src/app/user/user.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { UserRoutingModule } from './user-routing.module'; +import { UserComponent } from './user.component'; + + +@NgModule({ + declarations: [ + UserComponent + ], + imports: [ + CommonModule, + UserRoutingModule + ] +}) +export class UserModule { } diff --git a/src/assets/placeholder-profile-picture.png b/src/assets/placeholder-profile-picture.png new file mode 100644 index 0000000..c436d2c Binary files /dev/null and b/src/assets/placeholder-profile-picture.png differ diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..9444fb9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,31 @@ /* You can add global styles to this file, and also import other style files */ + +:root { + --highlight-color: lightgray; +} + +html { + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +body { + margin: 0; + padding: 0; +} + +.center { + margin: auto; + width: fit-content; +} + +.outline { + border: 1px solid gray; + border-radius: 5px; + + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); +} + +#main { + transform: translateX(100px); + width: calc(100vw - 100px); +} \ No newline at end of file