diff --git a/social-app-backend/src/main/java/razepl/dev/socialappbackend/home/HomeController.java b/social-app-backend/src/main/java/razepl/dev/socialappbackend/home/HomeController.java index 200929d..63e1a15 100644 --- a/social-app-backend/src/main/java/razepl/dev/socialappbackend/home/HomeController.java +++ b/social-app-backend/src/main/java/razepl/dev/socialappbackend/home/HomeController.java @@ -54,7 +54,8 @@ public final ResponseEntity> getPostsList(@RequestParam int numOf @Override @PostMapping(value = CREATE_POST_MAPPING) - public final ResponseEntity createPost(@RequestParam String postContent, User user) { + public final ResponseEntity createPost(@RequestParam String postContent, + @AuthenticationPrincipal User user) { log.info("Creating post with data : {}", postContent); log.info("User who wants to create post : {}", user); diff --git a/social-app-frontend/Dockerfile.frontend b/social-app-frontend/Dockerfile.frontend index 1f18ee0..8c6d419 100644 --- a/social-app-frontend/Dockerfile.frontend +++ b/social-app-frontend/Dockerfile.frontend @@ -2,7 +2,7 @@ FROM node:18.15-alpine as node WORKDIR /app -COPY package*.json . +COPY package*.json ./ RUN npm install diff --git a/social-app-frontend/src/app/core/enums/ColumnIndex.ts b/social-app-frontend/src/app/core/enums/ColumnIndex.ts new file mode 100644 index 0000000..ef2742d --- /dev/null +++ b/social-app-frontend/src/app/core/enums/ColumnIndex.ts @@ -0,0 +1,5 @@ +export enum ColumnIndex { + USER_COLUMN = 0, + POSTS_COLUMN = 1, + FRIENDS_COLUMN = 2 +} diff --git a/social-app-frontend/src/app/core/interfaces/home/PostServiceInterface.ts b/social-app-frontend/src/app/core/interfaces/home/PostServiceInterface.ts index 912482f..9092e01 100644 --- a/social-app-frontend/src/app/core/interfaces/home/PostServiceInterface.ts +++ b/social-app-frontend/src/app/core/interfaces/home/PostServiceInterface.ts @@ -17,9 +17,10 @@ export interface PostServiceInterface { /** * Retrieves a list of posts. * + * @param numOfSite number of site used for pagination * @returns An Observable of an array of PostData representing the list of posts. */ - getListOfPosts(): Observable; + getListOfPosts(numOfSite: number): Observable; /** * Manages the friend status of a user. @@ -45,9 +46,4 @@ export interface PostServiceInterface { * @returns An Observable of void. */ deletePost(postId: number): Observable; - - /** - * Increments the site number. - */ - incrementSiteNumber(): void; } diff --git a/social-app-frontend/src/app/core/interfaces/search/SearchServiceInterface.ts b/social-app-frontend/src/app/core/interfaces/search/SearchServiceInterface.ts index 81c3552..4b6c65d 100644 --- a/social-app-frontend/src/app/core/interfaces/search/SearchServiceInterface.ts +++ b/social-app-frontend/src/app/core/interfaces/search/SearchServiceInterface.ts @@ -11,5 +11,5 @@ export interface SearchServiceInterface { * Retrieves a list of users based on a search pattern. * @returns An Observable that emits an array of UserSearchData objects. */ - getListOfUsersOfPattern(): Observable; + getListOfUsersOfPattern(numOfSite: number): Observable; } diff --git a/social-app-frontend/src/app/core/services/home/post.service.ts b/social-app-frontend/src/app/core/services/home/post.service.ts index dae4398..79d6ada 100644 --- a/social-app-frontend/src/app/core/services/home/post.service.ts +++ b/social-app-frontend/src/app/core/services/home/post.service.ts @@ -11,8 +11,6 @@ import { PostServiceInterface } from "@core/interfaces/home/PostServiceInterface providedIn: 'root' }) export class PostService implements PostServiceInterface { - private numOfSite: number = 0; - constructor(private http: HttpClient) { } @@ -24,10 +22,10 @@ export class PostService implements PostServiceInterface { }); } - getListOfPosts(): Observable { + getListOfPosts(numOfSite: number): Observable { return this.http.get(`${ environment.httpBackend }${ HomeApiCalls.POST_LIST }`, { params: { - "numOfSite": this.numOfSite + "numOfSite": numOfSite } }); } @@ -55,8 +53,4 @@ export class PostService implements PostServiceInterface { } }); } - - incrementSiteNumber(): void { - this.numOfSite = this.numOfSite + 1; - } } diff --git a/social-app-frontend/src/app/core/services/search/search.service.ts b/social-app-frontend/src/app/core/services/search/search.service.ts index 81f06b2..56ce1d9 100644 --- a/social-app-frontend/src/app/core/services/search/search.service.ts +++ b/social-app-frontend/src/app/core/services/search/search.service.ts @@ -11,16 +11,15 @@ import { SearchServiceInterface } from "@interfaces/search/SearchServiceInterfac }) export class SearchService implements SearchServiceInterface { searchPattern !: string; - numOfSite: number = 0; constructor(private http: HttpClient) { } - getListOfUsersOfPattern(): Observable { + getListOfUsersOfPattern(numOfSite: number): Observable { return this.http.get(`${ environment.httpBackend }${ SearchApiCalls.USERS_LIST_PATTERN }`, { params: { "pattern": this.searchPattern, - "numOfSite": this.numOfSite + "numOfSite": numOfSite } }); } diff --git a/social-app-frontend/src/app/pages/auth/login/login.component.scss b/social-app-frontend/src/app/pages/auth/login/login.component.scss index 4671ad1..1b9c061 100644 --- a/social-app-frontend/src/app/pages/auth/login/login.component.scss +++ b/social-app-frontend/src/app/pages/auth/login/login.component.scss @@ -70,3 +70,35 @@ opacity: 0.5; color: black; } + +@media screen and (max-width: 870px) { + .agenda { + margin-right: 4em; + } +} + +@media screen and (max-width: 702px) { + .agenda { + margin-right: 1em; + } + + .login-block { + padding: 1em; + margin-left: 1em; + } +} + +@media screen and (max-width: 584px) { + :host { + flex-direction: column; + } + + .agenda { + margin-right: 0; + } + + .login-block { + padding: 1em; + margin-left: 0; + } +} diff --git a/social-app-frontend/src/app/pages/auth/register/date/date.component.scss b/social-app-frontend/src/app/pages/auth/register/date/date.component.scss index 310fc41..b81230a 100644 --- a/social-app-frontend/src/app/pages/auth/register/date/date.component.scss +++ b/social-app-frontend/src/app/pages/auth/register/date/date.component.scss @@ -1,4 +1,4 @@ -.like-date-container { +.date-container { display: grid; padding: 0.5em; } @@ -18,6 +18,10 @@ padding: 1em; } +.date-input:hover { + border-color: aqua; +} + .date-input::-webkit-calendar-picker-indicator { filter: invert(100%); } @@ -29,3 +33,28 @@ .correct-date { border-color: green; } + +@media screen and (max-width: 762px) { + .date-input { + width: 18em; + } +} + +@media screen and (max-width: 600px) { + .date-input { + width: 14em; + } +} + +@media screen and (max-width: 492px){ + .date-input { + width: 11em; + } +} + +@media screen and (max-width: 403px){ + .date-input { + width: 13em; + } +} + diff --git a/social-app-frontend/src/app/pages/auth/register/name-input/name-input.component.scss b/social-app-frontend/src/app/pages/auth/register/name-input/name-input.component.scss index dfc80d7..670e75a 100644 --- a/social-app-frontend/src/app/pages/auth/register/name-input/name-input.component.scss +++ b/social-app-frontend/src/app/pages/auth/register/name-input/name-input.component.scss @@ -32,3 +32,28 @@ .correct { border-color: green; } + +@media screen and (max-width: 762px) { + .name-input { + width: 18em; + } +} + +@media screen and (max-width: 600px) { + .name-input { + width: 14em; + } +} + +@media screen and (max-width: 492px){ + .name-input { + width: 11em; + } +} + +@media screen and (max-width: 403px){ + .name-input { + width: 13em; + } +} + diff --git a/social-app-frontend/src/app/pages/auth/register/register.component.scss b/social-app-frontend/src/app/pages/auth/register/register.component.scss index 5b11578..087bf80 100644 --- a/social-app-frontend/src/app/pages/auth/register/register.component.scss +++ b/social-app-frontend/src/app/pages/auth/register/register.component.scss @@ -19,7 +19,6 @@ .register-container { display: grid; - min-width: 50em; max-width: 50em; margin: 10em auto 0; border: $border-width $main-blue solid; @@ -78,3 +77,58 @@ .invalid-form { border-color: red; } + +@media screen and (max-width: 762px) { + .register-container { + padding: 1em; + max-width: 42em; + } + + .inputs { + gap: 1em + } + + .lawyer-speech { + max-width: 42em; + } +} + +@media screen and (max-width: 600px) { + .register-container { + max-width: 33em; + } + + .inputs { + gap: 0.2em; + } +} + +@media screen and (max-width: 492px) { + .logo-block { + @include flex-center; + } + + .register-container { + margin-top: 0.2em; + max-width: 28em; + padding: 0.5em; + } + + .lawyer-speech { + font-size: 0.6em; + } + + .submit-button { + padding: 0.5em; + } +} + +@media screen and (max-width: 403px) { + .inputs { + flex-direction: column; + } + + .register-container { + max-width: 18em; + } +} diff --git a/social-app-frontend/src/app/pages/auth/shared/email-field/email-field.component.scss b/social-app-frontend/src/app/pages/auth/shared/email-field/email-field.component.scss index de74c03..ca68613 100644 --- a/social-app-frontend/src/app/pages/auth/shared/email-field/email-field.component.scss +++ b/social-app-frontend/src/app/pages/auth/shared/email-field/email-field.component.scss @@ -27,3 +27,27 @@ .correct-mail { border-color: green; } + +@media screen and (max-width: 762px) { + .email { + width: 18em; + } +} + +@media screen and (max-width: 600px) { + .email { + width: 14em; + } +} + +@media screen and (max-width: 492px){ + .email { + width: 11em; + } +} + +@media screen and (max-width: 403px){ + .email { + width: 13em; + } +} diff --git a/social-app-frontend/src/app/pages/auth/shared/password-field/password-field.component.scss b/social-app-frontend/src/app/pages/auth/shared/password-field/password-field.component.scss index 1b6c505..2d2e41c 100644 --- a/social-app-frontend/src/app/pages/auth/shared/password-field/password-field.component.scss +++ b/social-app-frontend/src/app/pages/auth/shared/password-field/password-field.component.scss @@ -27,3 +27,28 @@ .correct-password { border-color: green; } + +@media screen and (max-width: 762px) { + .password-input { + width: 18em; + } +} + +@media screen and (max-width: 600px) { + .password-input { + width: 14em; + } +} + +@media screen and (max-width: 492px){ + .password-input { + width: 11em; + } +} + +@media screen and (max-width: 403px){ + .password-input { + width: 13em; + } +} + diff --git a/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.html b/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.html index 79e4a8b..8b8e5d6 100644 --- a/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.html +++ b/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.html @@ -1,6 +1,8 @@

Friend list

+ + + +
No friends yet!
diff --git a/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.scss b/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.scss index 79e21ee..ebabc6f 100644 --- a/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.scss +++ b/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.scss @@ -4,3 +4,17 @@ @include content-field; padding: 2em; } + +mat-divider { + margin-bottom: 1em; +} + +.no-friends { + @include flex-center; +} + +@media screen and (max-width: 1518px) { + .friends-container { + width: 20em; + } +} diff --git a/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.ts b/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.ts index ec65dcc..e5af7f5 100644 --- a/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.ts +++ b/social-app-frontend/src/app/pages/home/home-friends/home-friends.component.ts @@ -8,7 +8,7 @@ import { HomeFriendsInterface } from "@interfaces/home/HomeFriendsInterface"; styleUrls: ['./home-friends.component.scss'] }) export class HomeFriendsComponent implements HomeFriendsInterface { - @Input() friendList!: FriendData[]; + @Input() friendList: FriendData[] = []; removeFriendFromList(friendUsername: string): void { this.friendList = this.friendList.filter((friend: FriendData): boolean => friend.friendUsername !== friendUsername); diff --git a/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.html b/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.html index 7f706fe..9a96938 100644 --- a/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.html +++ b/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.html @@ -17,3 +17,7 @@ (updateFriendListEvent)="updateFriendList()" > + +
Load more posts
+ +
No posts found yet
diff --git a/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.scss b/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.scss index f7de471..69cd95f 100644 --- a/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.scss +++ b/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.scss @@ -17,6 +17,8 @@ $input-background-color: #2c2d2c; .posts-container { @include content-field; + display: flex; + flex-direction: column; margin-bottom: 2em; width: 35em; } @@ -37,3 +39,44 @@ app-user-icon { @include flex-center; gap: 1.5em; } + +.no-posts { + @include flex-center; + @include content-field; + width: 35em; +} + +.load-more { + @include content-field; + @include flex-center; + width: 35em; + margin-bottom: 2em; +} + +.load-more:hover { + background-color: $input-background-color; +} + +.load-more:active { + background-color: #565756; +} + +@media screen and (max-width: 1250px) { + .posts-container { + width: 30em; + } + + .writing-container { + width: 30em; + } +} + +@media screen and (max-width: 800px) { + .posts-container { + width: 25em; + } + + .writing-container { + width: 25em; + } +} diff --git a/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.ts b/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.ts index 9a4e8cd..94223da 100644 --- a/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.ts +++ b/social-app-frontend/src/app/pages/home/home-posts/home-posts.component.ts @@ -15,15 +15,34 @@ import { HomePostsInterface } from "@interfaces/home/HomePostsInterface"; export class HomePostsComponent implements OnInit, OnDestroy, HomePostsInterface { private destroyPostList$: Subject = new Subject(); private destroyCreatePost$: Subject = new Subject(); + private loadMorePosts$: Subject = new Subject(); + private numOfSite: number = 0; @Output() updateFriendListEvent: EventEmitter = new EventEmitter(); @ViewChild(TextInputComponent) postTextInput !: TextInputComponent; posts: PostData[] = []; currentUser!: string; + isAllLoaded !: boolean; constructor(private postService: PostService, private utilService: UtilService) { } + loadNewPosts(): void { + this.postService.getListOfPosts(this.numOfSite) + .pipe(takeUntil(this.loadMorePosts$)) + .subscribe((data: PostData[]): void => { + for (let postData of data) { + this.posts.push(postData); + } + + if (data.length === 100) { + this.numOfSite++; + } else { + this.isAllLoaded = true; + } + }); + } + createNewPost(): void { this.postService.createNewPost(this.postTextInput.inputText) .pipe(takeUntil(this.destroyCreatePost$)) @@ -45,14 +64,17 @@ export class HomePostsComponent implements OnInit, OnDestroy, HomePostsInterface ngOnInit(): void { this.currentUser = this.utilService.getValueFromStorage(StorageKeys.USERNAME); this.currentUser = this.currentUser.substring(1, this.currentUser.length - 1); + this.isAllLoaded = false; - this.postService.getListOfPosts() + this.postService.getListOfPosts(this.numOfSite) .pipe(takeUntil(this.destroyPostList$)) .subscribe((data: PostData[]): void => { this.posts = data; if (data.length === 100) { - this.postService.incrementSiteNumber(); + this.numOfSite++; + } else { + this.isAllLoaded = true; } }); } @@ -60,5 +82,11 @@ export class HomePostsComponent implements OnInit, OnDestroy, HomePostsInterface ngOnDestroy(): void { this.destroyPostList$.next(); this.destroyPostList$.complete(); + + this.destroyCreatePost$.next(); + this.destroyCreatePost$.complete(); + + this.loadMorePosts$.next(); + this.loadMorePosts$.complete(); } } diff --git a/social-app-frontend/src/app/pages/home/home-profile/home-profile.component.scss b/social-app-frontend/src/app/pages/home/home-profile/home-profile.component.scss index 8bfae76..d1de3c8 100644 --- a/social-app-frontend/src/app/pages/home/home-profile/home-profile.component.scss +++ b/social-app-frontend/src/app/pages/home/home-profile/home-profile.component.scss @@ -49,3 +49,8 @@ $upper-navbar-color: #191819; font-size: 11px; } +@media screen and (max-width: 1518px) { + .user-container { + width: 20em; + } +} diff --git a/social-app-frontend/src/app/pages/home/home.component.html b/social-app-frontend/src/app/pages/home/home.component.html index f87a851..6c2249c 100644 --- a/social-app-frontend/src/app/pages/home/home.component.html +++ b/social-app-frontend/src/app/pages/home/home.component.html @@ -1,13 +1,24 @@
- + +
- + + - + + - + +
diff --git a/social-app-frontend/src/app/pages/home/home.component.scss b/social-app-frontend/src/app/pages/home/home.component.scss index 1ac0098..06f5106 100644 --- a/social-app-frontend/src/app/pages/home/home.component.scss +++ b/social-app-frontend/src/app/pages/home/home.component.scss @@ -47,9 +47,23 @@ $main-background-color: #0a0b0a; .sticky-navbar { @include position-sticky; top: 0; + z-index: 1000; } .sticky-element { @include position-sticky; top: 8em; } + +@media screen and (max-width: 1169px){ + .grid-container { + grid-template-columns: repeat(2, 0.5fr); + gap: 1em; + } +} + +@media screen and (max-width: 800px) { + .grid-container { + @include flex-center; + } +} diff --git a/social-app-frontend/src/app/pages/home/home.component.ts b/social-app-frontend/src/app/pages/home/home.component.ts index b1c84b5..ed09f0a 100644 --- a/social-app-frontend/src/app/pages/home/home.component.ts +++ b/social-app-frontend/src/app/pages/home/home.component.ts @@ -1,9 +1,10 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, EventEmitter, HostListener, OnDestroy, OnInit } from '@angular/core'; import { HomeService } from "@core/services/home/home.service"; -import { Subject, takeUntil } from "rxjs"; +import { Observable, of, Subject, takeUntil } from "rxjs"; import { FriendData } from "@core/interfaces/home/FriendData"; import { UtilService } from "@services/utils/util.service"; import { RoutePaths } from "@enums/RoutePaths"; +import { ColumnIndex } from "@enums/ColumnIndex"; @Component({ selector: 'app-home', @@ -13,12 +14,33 @@ import { RoutePaths } from "@enums/RoutePaths"; export class HomeComponent implements OnInit, OnDestroy { private destroyFriendList$: Subject = new Subject(); private updateFriendList$: Subject = new Subject(); - friendList !: FriendData[]; + friendList: FriendData[] = []; + areFriendsVisible: boolean = false; + areAllVisible: boolean = true; + isDoubleColumnGrid: boolean = true; + currentColumn: number = ColumnIndex.USER_COLUMN; constructor(private homeService: HomeService, private utilService: UtilService) { } + hideColumn(event: number): void { + this.areAllVisible = window.innerWidth >= 1250; + + this.currentColumn = event; + this.areFriendsVisible = !this.areFriendsVisible; + } + + @HostListener('window:resize', ['$event']) + onWindowResize(event: any): void { + this.areAllVisible = window.innerWidth >= 1250; + this.isDoubleColumnGrid = window.innerWidth > 800; + + if (this.isDoubleColumnGrid && this.currentColumn === ColumnIndex.POSTS_COLUMN) { + this.currentColumn = ColumnIndex.USER_COLUMN; + } + } + ngOnInit(): void { this.homeService.getFriendList() .pipe(takeUntil(this.destroyFriendList$)) diff --git a/social-app-frontend/src/app/pages/home/post-button-bar/post-button-bar.component.scss b/social-app-frontend/src/app/pages/home/post-button-bar/post-button-bar.component.scss index 75dae10..fec64f3 100644 --- a/social-app-frontend/src/app/pages/home/post-button-bar/post-button-bar.component.scss +++ b/social-app-frontend/src/app/pages/home/post-button-bar/post-button-bar.component.scss @@ -42,3 +42,30 @@ .attach-option:active { background-color: #414241; } + +@media screen and (max-width: 1250px) { + .post-create-bar { + width: 30em; + } + + .attach-option { + padding: 0.5em; + width: 4em; + } +} + +@media screen and (max-width: 800px) { + .post-create-bar { + width: 25em; + gap: 1em; + } + + .attach-option { + width: 3em; + padding: 0.8em; + } + + svg { + display: none; + } +} diff --git a/social-app-frontend/src/app/pages/home/shared-home/post/post.component.scss b/social-app-frontend/src/app/pages/home/shared-home/post/post.component.scss index f70a2dd..ff2a841 100644 --- a/social-app-frontend/src/app/pages/home/shared-home/post/post.component.scss +++ b/social-app-frontend/src/app/pages/home/shared-home/post/post.component.scss @@ -45,3 +45,16 @@ margin-bottom: 1em; margin-top: 1em; } + +@media screen and (max-width: 1250px) { + .posts-container { + width: 30em; + } +} + +@media screen and (max-width: 800px) { + .posts-container { + width: 25em; + } +} + diff --git a/social-app-frontend/src/app/pages/home/shared-home/shared-home.module.ts b/social-app-frontend/src/app/pages/home/shared-home/shared-home.module.ts index 9d202a0..7979150 100644 --- a/social-app-frontend/src/app/pages/home/shared-home/shared-home.module.ts +++ b/social-app-frontend/src/app/pages/home/shared-home/shared-home.module.ts @@ -31,7 +31,7 @@ import { SharedAuthModule } from "@auth/shared/shared-auth.module"; FormsModule, ReactiveFormsModule, MatListModule, - SharedAuthModule + SharedAuthModule, ], exports: [ FriendComponent, diff --git a/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.html b/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.html index b9acfeb..59b847a 100644 --- a/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.html +++ b/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.html @@ -8,12 +8,30 @@
- + - + - + - + + + + +
+
Messages
+ +
Notifications
+ +
Settings
+ +
Logout
+ +
Show friends
+ +
Show users details
+ +
Show posts
+
diff --git a/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.scss b/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.scss index 255317c..951bc6e 100644 --- a/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.scss +++ b/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.scss @@ -3,12 +3,19 @@ .search-bar { @include flex-center; gap: 1em; + margin-bottom: 1em; +} + +app-logo { + margin-top: 0.3em; } .icon-bar { display: flex; justify-content: flex-end; - margin-right: 5em; + margin-left: 3em; + margin-top: 0.1em; + margin-right: 3em; gap: 2em; } @@ -21,6 +28,7 @@ border: 1px #eeeee4 solid; font-family: 'Poppins', sans-serif; color: white; + margin-left: 2em; } .logo-background:hover { @@ -33,3 +41,103 @@ height: 3em; padding: 1em; } + +app-menu-icon { + display: none; +} + +.dropdown { + top: 5em; + right: 4em; + padding: 0.5em; + position: absolute; + background-color: $input-background-color; + border-radius: 0.5em; + z-index: 1000; +} + +.option { + padding: 0.4em; + border-radius: 0.3em; +} + +.option:hover { + background-color: #565756; + cursor: pointer; +} + +@media screen and (max-width: 1169px) { + .navbar-container { + display: flex; + justify-content: center; + align-items: center; + gap: 2em; + } + + .dropdown { + right: 10em; + } + + app-menu-icon { + display: block; + } + + .search-bar { + margin-bottom: 0; + } + + .icon { + display: none; + } + + .search-input { + width: 20em; + } + + .icon-bar { + margin-left: 2em; + margin-right: 0; + } + + app-logo { + font-size: 0.7em; + margin-right: 2em; + margin-top: 1em; + } +} + +@media screen and (max-width: 900px) { + .dropdown { + right: 6em; + } +} + +@media screen and (max-width: 800px) { + .dropdown { + right: 4em; + } +} + +@media screen and (max-width: 620px) { + .navbar-container { + gap: 0.2em; + } + + .search-bar { + gap: 0.5em; + } + + .icon-bar { + margin-left: 0; + } + + .search-input { + width: 15em; + margin-left: 0.1em; + } + + app-logo { + margin-top: 2em; + font-size: 0.45em; + } +} diff --git a/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.ts b/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.ts index 4f736ea..14af1bd 100644 --- a/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.ts +++ b/social-app-frontend/src/app/pages/home/shared-home/social-navbar/social-navbar.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core'; +import { Component, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'; import { Subject, takeUntil } from "rxjs"; import { AuthService } from "@core/services/auth/auth.service"; import { UtilService } from "@services/utils/util.service"; @@ -6,6 +6,7 @@ import { UserService } from "@services/utils/user.service"; import { RoutePaths } from "@core/enums/RoutePaths"; import { SearchService } from "@services/search/search.service"; import { SocialNavbarInterface } from "@interfaces/home/SocialNavbarInterface"; +import { ColumnIndex } from "@enums/ColumnIndex"; @Component({ selector: 'app-social-navbar', @@ -16,7 +17,12 @@ export class SocialNavbarComponent implements OnDestroy, SocialNavbarInterface { private onDestroy$: Subject = new Subject(); @Input() logoUrl: string = ""; @Output() searchEvent: EventEmitter = new EventEmitter(); + @Output() columnEvent: EventEmitter = new EventEmitter(); searchValue !: string; + isMenuVisible : boolean = true; + @Input() isOnHomeSite : boolean = false; + isOneColumnOnly: boolean = false; + currentColumn: number = 0; constructor(private authService: AuthService, private utilService: UtilService, @@ -24,6 +30,26 @@ export class SocialNavbarComponent implements OnDestroy, SocialNavbarInterface { private searchService: SearchService) { } + toggleMenu(): void { + this.isMenuVisible = !this.isMenuVisible; + } + + @HostListener('window:resize', ['$event']) + onWindowResize(event: any): void { + this.isOneColumnOnly = window.innerWidth <= 800; + + if (!this.isOneColumnOnly && this.currentColumn === 1) { + this.currentColumn = 0; + } + } + + + changeColumn(column: number): void { + this.currentColumn = column; + + this.columnEvent.emit(this.currentColumn); + } + logoutUserFromSite(): void { this.authService.logoutUser().pipe(takeUntil(this.onDestroy$)).subscribe((): void => { this.utilService.clearStorage(); @@ -50,4 +76,6 @@ export class SocialNavbarComponent implements OnDestroy, SocialNavbarInterface { this.onDestroy$.next(); this.onDestroy$.complete(); } + + protected readonly ColumnIndex = ColumnIndex; } diff --git a/social-app-frontend/src/app/pages/home/shared-home/text-input/text-input.component.scss b/social-app-frontend/src/app/pages/home/shared-home/text-input/text-input.component.scss index 4ca4ec1..cd9d6dd 100644 --- a/social-app-frontend/src/app/pages/home/shared-home/text-input/text-input.component.scss +++ b/social-app-frontend/src/app/pages/home/shared-home/text-input/text-input.component.scss @@ -13,3 +13,15 @@ color: white; font-family: Roboto, "Helvetica Neue", sans-serif; } + +@media screen and (max-width: 1250px) { + .post-input { + max-width: 20em; + } +} + +@media screen and (max-width: 800px) { + .post-input { + max-width: 15em; + } +} diff --git a/social-app-frontend/src/app/pages/icons/icons.module.ts b/social-app-frontend/src/app/pages/icons/icons.module.ts index 7235f86..9012044 100644 --- a/social-app-frontend/src/app/pages/icons/icons.module.ts +++ b/social-app-frontend/src/app/pages/icons/icons.module.ts @@ -19,6 +19,7 @@ import { CommentIconComponent } from './comment-icon/comment-icon.component'; import { ShareIconComponent } from './share-icon/share-icon.component'; import { DeleteIconComponent } from './delete-icon/delete-icon.component'; import { SendIconComponent } from './send-icon/send-icon.component'; +import { MenuIconComponent } from './menu-icon/menu-icon.component'; @NgModule({ @@ -41,7 +42,8 @@ import { SendIconComponent } from './send-icon/send-icon.component'; CommentIconComponent, ShareIconComponent, DeleteIconComponent, - SendIconComponent + SendIconComponent, + MenuIconComponent ], exports: [ GithubIconComponent, @@ -62,7 +64,8 @@ import { SendIconComponent } from './send-icon/send-icon.component'; CommentIconComponent, ShareIconComponent, DeleteIconComponent, - SendIconComponent + SendIconComponent, + MenuIconComponent ], imports: [ CommonModule diff --git a/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.html b/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.html new file mode 100644 index 0000000..410dd42 --- /dev/null +++ b/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.scss b/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.scss new file mode 100644 index 0000000..3e20782 --- /dev/null +++ b/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.scss @@ -0,0 +1 @@ +@import "../icons.common"; diff --git a/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.ts b/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.ts new file mode 100644 index 0000000..7aaebc0 --- /dev/null +++ b/social-app-frontend/src/app/pages/icons/menu-icon/menu-icon.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-menu-icon', + templateUrl: './menu-icon.component.html', + styleUrls: ['./menu-icon.component.scss'] +}) +export class MenuIconComponent { + +} diff --git a/social-app-frontend/src/app/pages/not-found/not-found.component.scss b/social-app-frontend/src/app/pages/not-found/not-found.component.scss index 2c13187..86bea8d 100644 --- a/social-app-frontend/src/app/pages/not-found/not-found.component.scss +++ b/social-app-frontend/src/app/pages/not-found/not-found.component.scss @@ -64,3 +64,31 @@ button:active { opacity: 0.5; color: black; } + +@media screen and (max-width: 948px) { + .error-number { + font-size: 10em; + } + + h3 { + font-size: 2em; + } + + p { + font-size: 1.2em; + } +} + +@media screen and (max-width: 552px) { + .error-number { + font-size: 7em; + } + + h3 { + font-size: 1.4em; + } + + button { + padding: 1.3em; + } +} diff --git a/social-app-frontend/src/app/pages/search-site/search-site.component.html b/social-app-frontend/src/app/pages/search-site/search-site.component.html index 7ce01ed..137959b 100644 --- a/social-app-frontend/src/app/pages/search-site/search-site.component.html +++ b/social-app-frontend/src/app/pages/search-site/search-site.component.html @@ -14,6 +14,8 @@ -
I did not find any account matching this pattern
+
I did not find any account matching this pattern!
+ +
Load more
diff --git a/social-app-frontend/src/app/pages/search-site/search-site.component.scss b/social-app-frontend/src/app/pages/search-site/search-site.component.scss index a873ceb..353742d 100644 --- a/social-app-frontend/src/app/pages/search-site/search-site.component.scss +++ b/social-app-frontend/src/app/pages/search-site/search-site.component.scss @@ -1,18 +1,21 @@ @import "mixins"; +app-social-navbar { + @include position-sticky; + width: 100%; +} + .background { @include main-background; + display: flex; + align-items: center; + flex-direction: column; } .friends-container { @include content-field; margin-top: 3em; width: 50em; - margin-left: 40em; -} - -app-social-navbar { - @include position-sticky; } .search-container { @@ -23,3 +26,49 @@ app-social-navbar { @include flex-center; font-weight: bold; } + +.load-more { + @include content-field; + @include flex-center; + margin-top: 1em; + margin-bottom: 2em; + width: 50em; +} + +.load-more:hover { + background-color: $input-background-color; +} + +.load-more:active { + background-color: #565756; +} + +@media screen and (max-width: 970px) { + .load-more { + width: 40em; + } + + .friends-container { + width: 40em; + } +} + +@media screen and (max-width: 790px) { + .load-more { + width: 30em; + } + + .friends-container { + width: 30em; + } +} + +@media screen and (max-width: 620px) { + .load-more { + width: 20em; + } + + .friends-container { + width: 23em; + } +} diff --git a/social-app-frontend/src/app/pages/search-site/search-site.component.ts b/social-app-frontend/src/app/pages/search-site/search-site.component.ts index 8212f05..5412071 100644 --- a/social-app-frontend/src/app/pages/search-site/search-site.component.ts +++ b/social-app-frontend/src/app/pages/search-site/search-site.component.ts @@ -12,28 +12,55 @@ import { SearchSiteInterface } from "@interfaces/search/SearchSiteInterface"; export class SearchSiteComponent implements OnInit, OnDestroy, SearchSiteInterface { private initUsersList$: Subject = new Subject(); private loadingData$: Subject = new Subject(); + private loadMore$: Subject = new Subject(); + private numOfSite: number = 0; + isItAll !: boolean; userList: UserSearchData[] = []; constructor(private searchService: SearchService) { } + loadMoreData(): void { + this.searchService.getListOfUsersOfPattern(this.numOfSite) + .pipe(takeUntil(this.loadMore$)) + .subscribe((data: UserSearchData[]): void => { + this.userList = data; + + if (data.length === 100) { + this.numOfSite++; + } else { + this.isItAll = true; + } + }); + } + loadData(): void { - this.searchService.getListOfUsersOfPattern() + this.searchService.getListOfUsersOfPattern(this.numOfSite) .pipe(takeUntil(this.loadingData$)) .subscribe((data: UserSearchData[]): void => { - console.log(data); - this.userList = data; + + if (data.length === 100) { + this.numOfSite++; + } else { + this.isItAll = true; + } }); } ngOnInit(): void { - this.searchService.getListOfUsersOfPattern() + this.isItAll = false; + + this.searchService.getListOfUsersOfPattern(this.numOfSite) .pipe(takeUntil(this.userList)) .subscribe((data: UserSearchData[]): void => { - console.log(data); - this.userList = data; + + if (data.length === 100) { + this.numOfSite++; + } else { + this.isItAll = true; + } }); } diff --git a/social-app-frontend/src/assets/menu.svg b/social-app-frontend/src/assets/menu.svg new file mode 100644 index 0000000..d4f225c --- /dev/null +++ b/social-app-frontend/src/assets/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/social-app-frontend/src/styles/mixins.scss b/social-app-frontend/src/styles/mixins.scss index 142979a..528f3aa 100644 --- a/social-app-frontend/src/styles/mixins.scss +++ b/social-app-frontend/src/styles/mixins.scss @@ -58,7 +58,6 @@ @mixin main-background { background-color: $main-background-color; - //position: fixed; color: white; height: 100%; width: 100%;