From 0a5a73cecfdb45a79ab407dda44aa746b77d6173 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedek=20L=C3=A1szl=C3=B3?= Date: Mon, 8 Apr 2024 18:52:19 +0200 Subject: [PATCH] user and post models --- src/app/feed/feed.component.html | 7 +-- src/app/feed/feed.component.ts | 48 ++++++++++++++++++- src/app/feed/feed.module.ts | 5 +- .../shared/side-menu/side-menu.component.scss | 1 + .../shared/top-menu/top-menu.component.scss | 6 +++ .../large-user/large-user.component.html | 6 +++ .../large-user/large-user.component.scss | 44 +++++++++++++++++ .../large-user/large-user.component.spec.ts | 23 +++++++++ .../views/large-user/large-user.component.ts | 14 ++++++ src/app/shared/views/post/post.component.html | 7 +-- src/app/shared/views/post/post.component.scss | 16 +++++++ src/app/shared/views/post/post.component.ts | 8 ++-- .../small-user/small-user.component.html | 4 +- .../views/small-user/small-user.component.ts | 8 ++-- src/app/user/user.component.html | 7 ++- src/app/user/user.component.ts | 37 ++++++++++++++ src/app/user/user.module.ts | 11 ++++- src/model/Post.ts | 9 ++++ src/model/User.ts | 5 ++ src/styles.scss | 1 + 20 files changed, 244 insertions(+), 23 deletions(-) create mode 100644 src/app/shared/views/large-user/large-user.component.html create mode 100644 src/app/shared/views/large-user/large-user.component.scss create mode 100644 src/app/shared/views/large-user/large-user.component.spec.ts create mode 100644 src/app/shared/views/large-user/large-user.component.ts create mode 100644 src/model/Post.ts create mode 100644 src/model/User.ts diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html index 910ede2..49965a8 100644 --- a/src/app/feed/feed.component.html +++ b/src/app/feed/feed.component.html @@ -1,10 +1,5 @@
- - - - - - +
diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts index 3e8ee0c..4e4507c 100644 --- a/src/app/feed/feed.component.ts +++ b/src/app/feed/feed.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { Post } from '../../model/Post'; @Component({ selector: 'app-feed', @@ -6,5 +7,50 @@ import { Component } from '@angular/core'; styleUrl: './feed.component.scss' }) export class FeedComponent { - + posts: Array = new Array( + { + user: { + username: "Zámbó Jimmy", + picture: "assets/placeholder-profile-picture.png", + followed: true + }, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + { + user: { + username: "Zámbó Jimmy", + picture: "assets/placeholder-profile-picture.png", + followed: true + }, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + { + user: { + username: "Zámbó Jimmy", + picture: "assets/placeholder-profile-picture.png", + followed: true + }, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + { + user: { + username: "Zámbó Jimmy", + picture: "assets/placeholder-profile-picture.png", + followed: true + }, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + ); } diff --git a/src/app/feed/feed.module.ts b/src/app/feed/feed.module.ts index 7dec5d2..d3867bf 100644 --- a/src/app/feed/feed.module.ts +++ b/src/app/feed/feed.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { CommonModule, NgFor } from '@angular/common'; import { FeedRoutingModule } from './feed-routing.module'; import { FeedComponent } from './feed.component'; @@ -16,7 +16,8 @@ import { PostComponent } from '../shared/views/post/post.component'; FeedRoutingModule, TopMenuComponent, SideMenuComponent, - PostComponent + PostComponent, + NgFor ] }) export class FeedModule { } diff --git a/src/app/shared/side-menu/side-menu.component.scss b/src/app/shared/side-menu/side-menu.component.scss index c60e7bd..d80a6b9 100644 --- a/src/app/shared/side-menu/side-menu.component.scss +++ b/src/app/shared/side-menu/side-menu.component.scss @@ -1,6 +1,7 @@ .side-menu { display: block; position: fixed; + transform: translateY(45px); width: 100px; height: 100vh; margin: 0; diff --git a/src/app/shared/top-menu/top-menu.component.scss b/src/app/shared/top-menu/top-menu.component.scss index 48a7f23..294b92f 100644 --- a/src/app/shared/top-menu/top-menu.component.scss +++ b/src/app/shared/top-menu/top-menu.component.scss @@ -8,6 +8,12 @@ menu { display: flex; align-items: center; + position: fixed; + z-index: 100; + width: 100%; + + // transform: translateY(-10px); + background: var(--highlight-color); } diff --git a/src/app/shared/views/large-user/large-user.component.html b/src/app/shared/views/large-user/large-user.component.html new file mode 100644 index 0000000..d414be0 --- /dev/null +++ b/src/app/shared/views/large-user/large-user.component.html @@ -0,0 +1,6 @@ +
+
+ {{user?.username}} +
+ +
\ No newline at end of file diff --git a/src/app/shared/views/large-user/large-user.component.scss b/src/app/shared/views/large-user/large-user.component.scss new file mode 100644 index 0000000..b67e6bb --- /dev/null +++ b/src/app/shared/views/large-user/large-user.component.scss @@ -0,0 +1,44 @@ +.user-container { + width: max(50%, 250px); + margin: 10px auto; + + + + div { + padding: 0 10px; + + img { + display: block; + margin: 20px auto; + width: max(200px, 70%); + border-radius: 50%; + aspect-ratio: 1; + } + + span { + display: block; + width: 100%; + text-align: center; + } + + span::before { + content: '@'; + } + } + + .follow { + display: block; + margin: 10px auto; + width: 10px; + aspect-ratio: 1; + } + + .follow::before { + content: "👨‍👦"; + filter: saturate(0); + } + + .follow.followed::before { + filter: saturate(1) !important; + } +} \ No newline at end of file diff --git a/src/app/shared/views/large-user/large-user.component.spec.ts b/src/app/shared/views/large-user/large-user.component.spec.ts new file mode 100644 index 0000000..1965e39 --- /dev/null +++ b/src/app/shared/views/large-user/large-user.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LargeUserComponent } from './large-user.component'; + +describe('LargeUserComponent', () => { + let component: LargeUserComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LargeUserComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LargeUserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/views/large-user/large-user.component.ts b/src/app/shared/views/large-user/large-user.component.ts new file mode 100644 index 0000000..c2508ef --- /dev/null +++ b/src/app/shared/views/large-user/large-user.component.ts @@ -0,0 +1,14 @@ +import { Component, Input } from '@angular/core'; +import { User } from '../../../../model/User'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'app-large-user', + standalone: true, + templateUrl: './large-user.component.html', + styleUrl: './large-user.component.scss', + imports: [RouterModule] +}) +export class LargeUserComponent { + @Input() user: User | undefined; +} diff --git a/src/app/shared/views/post/post.component.html b/src/app/shared/views/post/post.component.html index de128a1..9af22d8 100644 --- a/src/app/shared/views/post/post.component.html +++ b/src/app/shared/views/post/post.component.html @@ -1,5 +1,6 @@
- -
Post content blblblblblblbllblb
- + +
{{post?.content}}
+ + {{post?.likes}}
\ 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 index f937d42..3ee8903 100644 --- a/src/app/shared/views/post/post.component.scss +++ b/src/app/shared/views/post/post.component.scss @@ -12,5 +12,21 @@ display: block; border-radius: 4px; } + + .likes { + display: block; + margin: 10px auto; + width: 10px; + aspect-ratio: 1; + } + + .likes::before { + content: "❤️"; + filter: saturate(0); + } + + .likes.liked::before { + filter: saturate(1) !important; + } } diff --git a/src/app/shared/views/post/post.component.ts b/src/app/shared/views/post/post.component.ts index 78a6046..7165b18 100644 --- a/src/app/shared/views/post/post.component.ts +++ b/src/app/shared/views/post/post.component.ts @@ -1,14 +1,16 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { SmallUserComponent } from '../small-user/small-user.component'; +import { Post } from '../../../../model/Post'; +import { NgIf } from '@angular/common'; @Component({ selector: 'app-post', standalone: true, - imports: [SmallUserComponent], + imports: [SmallUserComponent, NgIf], templateUrl: './post.component.html', styleUrl: './post.component.scss' }) export class PostComponent { - + @Input() post: Post | undefined; } diff --git a/src/app/shared/views/small-user/small-user.component.html b/src/app/shared/views/small-user/small-user.component.html index f340219..542bc53 100644 --- a/src/app/shared/views/small-user/small-user.component.html +++ b/src/app/shared/views/small-user/small-user.component.html @@ -1,3 +1,3 @@ -
- Username +
+ {{user?.username}}
\ No newline at end of file diff --git a/src/app/shared/views/small-user/small-user.component.ts b/src/app/shared/views/small-user/small-user.component.ts index 8c262cc..d615aba 100644 --- a/src/app/shared/views/small-user/small-user.component.ts +++ b/src/app/shared/views/small-user/small-user.component.ts @@ -1,12 +1,14 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { User } from '../../../../model/User'; +import { RouterModule } from '@angular/router'; @Component({ selector: 'app-small-user', standalone: true, - imports: [], + imports: [RouterModule], templateUrl: './small-user.component.html', styleUrl: './small-user.component.scss' }) export class SmallUserComponent { - + @Input() user: User | undefined; } diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html index d039bb7..52ec478 100644 --- a/src/app/user/user.component.html +++ b/src/app/user/user.component.html @@ -1 +1,6 @@ -

user works!

+ + +
+ + +
diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts index 8d6911d..f503afb 100644 --- a/src/app/user/user.component.ts +++ b/src/app/user/user.component.ts @@ -1,4 +1,6 @@ import { Component } from '@angular/core'; +import { Post } from '../../model/Post'; +import { User } from '../../model/User'; @Component({ selector: 'app-user', @@ -6,5 +8,40 @@ import { Component } from '@angular/core'; styleUrl: './user.component.scss' }) export class UserComponent { + exampleUser: User = { + username: "Zámbó Jimmy", + picture: "assets/placeholder-profile-picture.png", + followed: true + } + posts: Array = new Array( + { + user: this.exampleUser, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + { + user: this.exampleUser, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + { + user: this.exampleUser, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + { + user: this.exampleUser, + content: "Bukott diák vagyok én, nem bírom el a szenvedést.", + image: "assets/placeholder-profile-picture.png", + likes: 1, + liked: true + }, + ); } diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts index 1594b39..15b1cae 100644 --- a/src/app/user/user.module.ts +++ b/src/app/user/user.module.ts @@ -3,7 +3,10 @@ import { CommonModule } from '@angular/common'; import { UserRoutingModule } from './user-routing.module'; import { UserComponent } from './user.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'; +import { LargeUserComponent } from '../shared/views/large-user/large-user.component'; @NgModule({ declarations: [ @@ -11,7 +14,11 @@ import { UserComponent } from './user.component'; ], imports: [ CommonModule, - UserRoutingModule + UserRoutingModule, + TopMenuComponent, + SideMenuComponent, + PostComponent, + LargeUserComponent ] }) export class UserModule { } diff --git a/src/model/Post.ts b/src/model/Post.ts new file mode 100644 index 0000000..ed1f8c3 --- /dev/null +++ b/src/model/Post.ts @@ -0,0 +1,9 @@ +import { User } from "./User"; + +export interface Post { + user: User; + content: String; + image: String; + likes: Number; + liked: Boolean; +} \ No newline at end of file diff --git a/src/model/User.ts b/src/model/User.ts new file mode 100644 index 0000000..b60e0e1 --- /dev/null +++ b/src/model/User.ts @@ -0,0 +1,5 @@ +export interface User { + username: String; + picture: String; + followed: Boolean; +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 9444fb9..fa751d7 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -27,5 +27,6 @@ body { #main { transform: translateX(100px); + padding-top: 50px; width: calc(100vw - 100px); } \ No newline at end of file