From b49a27d5adc635e90684dec7d4141664dc58df43 Mon Sep 17 00:00:00 2001 From: transtrike Date: Sun, 10 Jan 2021 12:59:25 +0200 Subject: Added services; Tweeked register --- src/DevHive.Angular/angular.json | 3 +- src/DevHive.Angular/src/app/app.component.html | 1 + src/DevHive.Angular/src/app/app.module.ts | 6 +- .../src/app/components/feed/feed.component.css | 109 +++++++++++++++++++++ .../src/app/components/feed/feed.component.html | 107 ++++++++++++++++++++ .../src/app/components/feed/feed.component.ts | 17 ++++ .../src/app/components/post/post.component.css | 0 .../src/app/components/post/post.component.html | 1 + .../src/app/components/post/post.component.ts | 15 +++ .../components/register/register.component.html | 2 +- .../src/app/services/feed.service.spec.ts | 16 +++ .../src/app/services/feed.service.ts | 9 ++ .../src/app/services/login.service.spec.ts | 16 +++ .../src/app/services/login.service.ts | 9 ++ src/DevHive.Angular/src/theme.scss | 14 +++ 15 files changed, 322 insertions(+), 3 deletions(-) create mode 100644 src/DevHive.Angular/src/app/components/feed/feed.component.css create mode 100644 src/DevHive.Angular/src/app/components/feed/feed.component.html create mode 100644 src/DevHive.Angular/src/app/components/feed/feed.component.ts create mode 100644 src/DevHive.Angular/src/app/components/post/post.component.css create mode 100644 src/DevHive.Angular/src/app/components/post/post.component.html create mode 100644 src/DevHive.Angular/src/app/components/post/post.component.ts create mode 100644 src/DevHive.Angular/src/app/services/feed.service.spec.ts create mode 100644 src/DevHive.Angular/src/app/services/feed.service.ts create mode 100644 src/DevHive.Angular/src/app/services/login.service.spec.ts create mode 100644 src/DevHive.Angular/src/app/services/login.service.ts create mode 100644 src/DevHive.Angular/src/theme.scss (limited to 'src') diff --git a/src/DevHive.Angular/angular.json b/src/DevHive.Angular/angular.json index c4b2bf6..2f7de40 100644 --- a/src/DevHive.Angular/angular.json +++ b/src/DevHive.Angular/angular.json @@ -29,7 +29,8 @@ ], "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", - "src/styles.css" + "src/styles.css", + "src/theme.scss" ], "scripts": [] }, diff --git a/src/DevHive.Angular/src/app/app.component.html b/src/DevHive.Angular/src/app/app.component.html index c021c8c..bb3fbbb 100644 --- a/src/DevHive.Angular/src/app/app.component.html +++ b/src/DevHive.Angular/src/app/app.component.html @@ -1,6 +1,7 @@
+
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index 3c7c98b..6270561 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -10,12 +10,16 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; +import { FeedComponent } from './components/feed/feed.component'; +import { PostComponent } from './components/post/post.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, - RegisterComponent + RegisterComponent, + FeedComponent, + PostComponent ], imports: [ BrowserModule, diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css new file mode 100644 index 0000000..7715234 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -0,0 +1,109 @@ +#feed { + max-width: 50%; + margin-left: auto; + margin-right: auto; +} + +.post { + margin: 1em 0; +} + +.post-content { + background-color: var(--dark-blue); + border: 2px solid var(--orange); + border-radius: 0.5em; + padding: 0.6em; + overflow: hidden; + display: flex; +} + +.author { + margin-bottom: 0.5em; + display: flex; + position: relative; +} + +.profile-picture { + height: 2.1em; + width: 2.1em; + border-radius: 50%; + margin-right: 0.5em; + object-fit: cover; +} + +.author-info > .name { + font-weight: bold; +} + +.author-info > .handle { + font-size: 0.9em; +} + +.post-content > .rating { + margin-left: auto; + display: flex; + align-items: center; + flex-direction: column; +} + +.timestamp { + font-size: 0.5em; + color: var(--gray); + padding-top: 0.8em; +} + +.score { + margin-top: auto; + margin-bottom: auto; +} + +.attachments { + position: relative; + z-index: -1; + display: flex; +} + +.attachment { + background-color: var(--dark-blue); + border: 1px solid var(--orange); + border-bottom-width: 2px; + border-radius: 0 0 0.5em 0.5em; + padding: 0.5em; + margin-top: -0.6em; + padding-top: 1em; + flex: 1; + display: flex; + overflow: hidden; +} + +.attachment:nth-of-type(1) { + border-left-width: 2px; +} + +.attachment:nth-last-of-type(1) { + border-right-width: 2px; +} + +.filename { + font-style: italic; + text-shadow: 0.1em 0.1em 0.1em black; +} + +.file-picture { + height: 1.9em; + width: 1.9em; + object-fit: cover; + margin-left: auto; +} + +.info-reminder { + font-size: 0.5em; + color: var(--gray); + padding-top: 0.2em; + align-self: flex-end; +} + +.loading-more { + text-align: center; +} + \ No newline at end of file diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html new file mode 100644 index 0000000..96864c7 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -0,0 +1,107 @@ +
+ + +
\ No newline at end of file diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts new file mode 100644 index 0000000..a0efd17 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { FeedService } from 'src/app/services/feed.service'; +import { PostComponent } from '../post/post.component'; + +@Component({ + selector: 'app-feed', + templateUrl: './feed.component.html', + styleUrls: ['./feed.component.css'] +}) +export class FeedComponent implements OnInit { + public posts: PostComponent[] = [ ]; + + constructor(private service: FeedService) { } + + ngOnInit(): void { + } +} diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html new file mode 100644 index 0000000..71b500c --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -0,0 +1 @@ +

post works!

diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts new file mode 100644 index 0000000..c61410b --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-post', + templateUrl: './post.component.html', + styleUrls: ['./post.component.css'] +}) +export class PostComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/DevHive.Angular/src/app/components/register/register.component.html b/src/DevHive.Angular/src/app/components/register/register.component.html index ee9c2ba..837f812 100644 --- a/src/DevHive.Angular/src/app/components/register/register.component.html +++ b/src/DevHive.Angular/src/app/components/register/register.component.html @@ -11,7 +11,7 @@ Min length of 3 - + * This is required diff --git a/src/DevHive.Angular/src/app/services/feed.service.spec.ts b/src/DevHive.Angular/src/app/services/feed.service.spec.ts new file mode 100644 index 0000000..656b960 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/feed.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { FeedService } from './feed.service'; + +describe('FeedService', () => { + let service: FeedService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(FeedService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/DevHive.Angular/src/app/services/feed.service.ts b/src/DevHive.Angular/src/app/services/feed.service.ts new file mode 100644 index 0000000..23284b9 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/feed.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class FeedService { + + constructor() { } +} diff --git a/src/DevHive.Angular/src/app/services/login.service.spec.ts b/src/DevHive.Angular/src/app/services/login.service.spec.ts new file mode 100644 index 0000000..299b0d5 --- /dev/null +++ b/src/DevHive.Angular/src/app/services/login.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { LoginService } from './login.service'; + +describe('LoginService', () => { + let service: LoginService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(LoginService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/DevHive.Angular/src/app/services/login.service.ts b/src/DevHive.Angular/src/app/services/login.service.ts new file mode 100644 index 0000000..92c777e --- /dev/null +++ b/src/DevHive.Angular/src/app/services/login.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class LoginService { + + constructor() { } +} diff --git a/src/DevHive.Angular/src/theme.scss b/src/DevHive.Angular/src/theme.scss new file mode 100644 index 0000000..a87ae45 --- /dev/null +++ b/src/DevHive.Angular/src/theme.scss @@ -0,0 +1,14 @@ +// Import theming functions +@import '~@angular/material/theming'; +@import './styles.css'; +@include mat-core(); + +// Custom Angular theme + +// $my-custom-primary: mat-palette($mat-deep-purple); +// $my-custom-accent: mat-palette($mat-pink, 100, 500, A100); +// $my-custom-warn: mat-palette($mat-lime); + +// $my-custom-theme: mat-light-theme($my-custom-primary, $my-custom-accent, $my-custom-warn); + +// @include angular-material-theme($my-custom-theme); \ No newline at end of file -- cgit v1.2.3