aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/app')
-rw-r--r--src/app/app-constants.module.ts2
-rw-r--r--src/app/app.module.ts4
-rw-r--r--src/app/components/admin-panel-page/admin-panel-page.component.html2
-rw-r--r--src/app/components/comment-page/comment-page.component.html4
-rw-r--r--src/app/components/feed/feed.component.css171
-rw-r--r--src/app/components/feed/feed.component.html70
-rw-r--r--src/app/components/navbar/navbar.component.css38
-rw-r--r--src/app/components/navbar/navbar.component.html47
-rw-r--r--src/app/components/navbar/navbar.component.ts62
-rw-r--r--src/app/components/post-page/post-page.component.html4
-rw-r--r--src/app/components/post/post.component.css120
-rw-r--r--src/app/components/post/post.component.html84
-rw-r--r--src/app/components/profile-settings/profile-settings.component.html4
-rw-r--r--src/app/components/profile/profile.component.css110
-rw-r--r--src/app/components/profile/profile.component.html99
-rw-r--r--src/app/components/profile/profile.component.ts12
16 files changed, 335 insertions, 498 deletions
diff --git a/src/app/app-constants.module.ts b/src/app/app-constants.module.ts
index f8722f7..39538e0 100644
--- a/src/app/app-constants.module.ts
+++ b/src/app/app-constants.module.ts
@@ -14,7 +14,7 @@ export class AppConstants {
public static API_COMMENT_URL = AppConstants.BASE_API_URL + '/Comment';
public static PAGE_SIZE = 10;
- public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png';
+ public static FALLBACK_PROFILE_ICON = 'assets/icons/tabler-icon-user.svg';
public static SESSION_TOKEN_KEY = 'UserCred';
public static ADMIN_ROLE_NAME = 'Admin';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1bf44ad..f582bbc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { CommentComponent } from './components/comment/comment.component';
import { CommentPageComponent } from './components/comment-page/comment-page.component';
import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component';
import { RouterModule } from '@angular/router';
+import { NavbarComponent } from './components/navbar/navbar.component';
@NgModule({
declarations: [
@@ -43,7 +44,8 @@ import { RouterModule } from '@angular/router';
AdminPanelPageComponent,
CommentComponent,
CommentPageComponent,
- PostAttachmentComponent
+ PostAttachmentComponent,
+ NavbarComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html
index 31f0849..96ab545 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.html
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.html
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
<!-- <app&#45;loading *ngIf="!dataArrived"></app&#45;loading> -->
<main id="content" *ngIf="!dataArrived">
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
index ae114da..553b545 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -1,6 +1,8 @@
+<app-navbar></app-navbar>
+
<app-loading *ngIf="!loaded"></app-loading>
-<main id="content" *ngIf="loaded">
+<main id="content" class="scroll-standalone under-navbar" *ngIf="loaded">
<nav>
<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
</nav>
diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index 3d22349..372792c 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -1,171 +1,36 @@
-#feed-page {
- height: 100%;
- max-width: 40em;
- box-sizing: border-box;
- border: .5em solid var(--bg-color);
-
- margin: 0 auto;
-
- display: flex;
-}
-
-@media screen and (max-width: 750px) {
- #profile-bar {
- display: none !important;
- }
- #top-bar-profile-pic {
- display: initial;
- }
-}
-@media screen and (min-width: 750px) {
- #profile-bar {
- display: initial;
- }
- #top-bar-profile-pic {
- display: none !important;
- }
-}
-
-/* Content */
-
-#feed-content {
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-/* Profile bar */
-
-#profile-bar {
- width: 20%;
- height: fit-content;
- display: flex;
- flex-direction: column;
- align-items: center;
-
- box-sizing: border-box;
- background-color: var(--bg-color);
-
- margin-right: .5em;
- padding-bottom: 1em;
- padding: .5em;
- border-radius: .6em;
-}
-
-#profile-bar-profile-pic {
- width: 7em;
- height: 7em;
- box-sizing: border-box;
- padding: .5em;
-}
-
-#profile-bar-name {
- text-align: center;
-}
-
-#profile-bar-username {
- margin: .5em 0;
-}
-
-#profile-bar > #profile-info {
- display: flex;
- flex-direction: column;
- align-items: center;
+#create-post {
+ width: 100%;
+ margin-top: 1em;
}
-/* Top bar */
-
-#top-bar {
- display: flex;
- flex-direction: row;
- width: 98%;
- margin: 0 auto;
- margin-bottom: .5em;
- box-sizing: border-box;
+#new-post-message {
+ min-height: 1.5em;
+ resize: vertical;
}
-#top-bar-profile-pic {
- height: 2.5em;
- width: 2.5em;
- margin-right: .5em;
+#attachments-btns {
+ padding: 0.5em 0;
}
-#top-bar-profile-pic > img {
- height: inherit;
- width: inherit;
+#attachments-btns img, .file-button > input {
+ height: 1.4em;
+ width: 1.4em;
}
-#top-bar-open-chat {
- /* Until implemented */
- display: none;
+#new-post-attachments {
+ margin-bottom: 0.5em;
}
-/* Create post */
-
-#create-post-form {
- width: 100%;
+.file-button {
position: relative;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
-}
-
-#form-inputs {
- display: flex;
-}
-
-#top-bar-create-post {
- flex: 1;
- font-size: inherit;
- width: 100%;
- height: 100%;
- margin: 0 auto;
- box-sizing: border-box;
- border: 2px solid var(--bg-color);
- border-radius: .6em;
-}
-
-#file-upload {
- font-size: inherit;
- color: transparent;
- width: 1.5em;
- height: 1.5em;
-}
-
-#file-upload:hover {
- cursor: pointer;
}
-#attachment-img {
- height: 1.5em;
- width: 1.5em;
+.file-button > img {
position: absolute;
- right: .4em;
pointer-events: none;
}
-/* Posts */
-
-#no-posts-msg {
- width: 100%;
- margin-top: 1em;
- color: gray;
- text-align: center;
-}
-
-/* Elements, that act as buttons */
-
-#profile-bar > #profile-info:hover,
-#top-bar-profile-pic:hover {
- cursor: pointer;
-}
-
-/* Can't copy text from */
-
-#profile-bar,
-.vote {
- -webkit-user-select: none; /* Safari */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* IE10+/Edge */
- user-select: none; /* Standard */
+.file-button > input {
+ font-size: inherit;
+ color: transparent;
}
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 5ff2dca..3b5b69b 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -1,48 +1,36 @@
+<app-navbar></app-navbar>
+
<app-loading *ngIf="!dataArrived"></app-loading>
-<main id="feed-page" *ngIf="dataArrived">
- <aside id="profile-bar" class="round-image rounded-border">
- <summary id="profile-info" (click)="goToProfile()">
- <img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/>
- <div id="profile-bar-name">
- {{ user.firstName }} {{ user.lastName }}
- </div>
- <div id="profile-bar-username">
- @{{ user.userName }}
+<main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived">
+ <form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
+ <textarea id="new-post-message" class="faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
+ <section id="attachments-btns" class="flex-row flex-justify-start flex-center-align-children">
+ <div class="file-button hover-half-opacity click-effect">
+ <img src="/assets/icons/tabler-icon-paperclip.svg">
+ <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
</div>
- </summary>
- <button class="submit-btn" (click)="goToSettings()">Settings</button>
- <button class="submit-btn" (click)="logout()">Logout</button>
- </aside>
- <section id="feed-content">
- <nav id="top-bar">
- <img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()">
- <form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
- <section id="form-inputs">
- <input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
- <input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
- <img id="attachment-img" src="assets/images/paper-clip.png">
- <input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
- </section>
- <section class="form-attachments">
- <div *ngFor="let file of files" class="form-attachment">
- {{ file.name ? file.name : 'Attachment' }}
- <div class="remove-form-attachment" (click)="removeAttachment(file.name)">
- ☒
- </div>
- </div>
- </section>
- </form>
- <img id="top-bar-open-chat" src="assets/images/feed/chat-pic.png" alt=""/>
- </nav>
- <section id="posts" class="scroll-standalone" (scroll)="onScroll($event)">
- <div id="no-posts-msg" *ngIf="posts.length === 0">
- None of your friends have posted anything yet!<br>
- Try refreshing your page!
- </div>
- <div *ngFor="let friendPost of posts; let i = index" class="post">
- <app-post [paramId]="friendPost.postId.toString()" [index]="i"></app-post>
+ </section>
+ <section id="new-post-attachments" class="flex-row faded-slim-border border-bottom-only">
+ <div *ngFor="let file of files" class="form-attachment">
+ {{ file.name ? file.name : 'Attachment' }}
+ <div class="remove-form-attachment" (click)="removeAttachment(file.name)">
+ ☒
+ </div>
</div>
</section>
+ <button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller">
+ Post
+ </button>
+ </form>
+ <hr class="card-hr">
+ <section id="posts" (scroll)="onScroll($event)">
+ <div id="no-posts-msg" *ngIf="posts.length === 0">
+ None of your friends have posted anything yet!<br>
+ Try refreshing your page!
+ </div>
+ <div *ngFor="let friendPost of posts; let i = index" class="post">
+ <app-post [paramId]="friendPost.postId.toString()" [index]="i"></app-post>
+ </div>
</section>
</main>
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
new file mode 100644
index 0000000..d02e928
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.css
@@ -0,0 +1,38 @@
+#navbar {
+ height: var(--navbar-height);
+ width: 100%;
+ background-color: var(--card-bg);
+}
+
+#nav-contents img {
+ height: 1.9em;
+ width: 1.9em;
+}
+
+@media screen and (max-width: 30rem) {
+ #nav-username {
+ display: none;
+ }
+
+ #navbar {
+ font-size: 0.8em;
+ }
+}
+
+#nav-profile-picture {
+ padding: 0.1em;
+}
+
+#nav-profile-picture img {
+ height: 1.8em;
+ width: 1.8em;
+}
+
+.nav-item {
+ margin-left: 0.2em;
+ padding: 0 0.1em;
+}
+
+.nav-item:first-child {
+ margin-left: 0;
+}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
new file mode 100644
index 0000000..a30f845
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,47 @@
+<nav id="navbar">
+ <div id="nav-contents" class="centered-content flex-row padding-smaller flex-center-align-items">
+ <div class="flexible" *ngIf="!loggedIn">
+ <!-- This element serves as a spacer -->
+ </div>
+ <div class="nav-item border-radius-small flex-row flex-center-align-items light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
+ <div id="nav-profile-picture" class="flex-col">
+ <img class="round-image" [src]="user.profilePictureURL">
+ </div>
+ <div id="nav-username" class="font-size-dot9 flex-col">
+ <div class="padding-small">
+ @{{ user.userName }}
+ </div>
+ </div>
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToFeed()">
+ <img src="/assets/icons/tabler-icon-home.svg">
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+ <!-- Trending functionality isn't implemented yet! -->
+ <img src="/assets/icons/tabler-icon-trending-up.svg">
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+ <!-- Chat functionality isn't implemented yet! -->
+ <img src="/assets/icons/tabler-icon-message-circle.svg">
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+ <!-- Search functionality isn't implemented yet! -->
+ <img src="/assets/icons/tabler-icon-search.svg">
+ </div>
+ <div class="flexible">
+ <!-- This element serves as a spacer -->
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn">
+ <img src="/assets/icons/tabler-icon-settings.svg">
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn">
+ <img src="/assets/icons/tabler-icon-logout.svg">
+ </div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToLogin()" *ngIf="!loggedIn">
+ <img src="/assets/icons/tabler-icon-login.svg">
+ </div>
+ <div class="flexible" *ngIf="!loggedIn">
+ <!-- This element serves as a spacer -->
+ </div>
+ </div>
+</nav>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
new file mode 100644
index 0000000..85f07d1
--- /dev/null
+++ b/src/app/components/navbar/navbar.component.ts
@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
+import { UserService } from 'src/app/services/user.service';
+import { User } from 'src/models/identity/user.model';
+
+@Component({
+ selector: 'app-navbar',
+ templateUrl: './navbar.component.html',
+ styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+ public user: User;
+ public loggedIn: Boolean;
+
+ constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService)
+ { }
+
+ ngOnInit(): void {
+ this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
+
+ this.user = this._userService.getDefaultUser();
+ this.user.userName = ''; // so you don't always see a flash of 'Gosho'
+
+ this._userService.getUserFromSessionStorageRequest().subscribe({
+ next: (res: object) => {
+ Object.assign(this.user, res);
+ },
+ });
+ }
+
+ goToProfile(): void {
+ // Properly reload the page
+ // Needed because if you're on someone's profile and go to yours, angular won't refresh the page (with your info)
+ this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+ this._router.onSameUrlNavigation = 'reload';
+
+ this._router.navigate(['/profile/' + this.user.userName]);
+ }
+
+ goToFeed(): void {
+ if (this.loggedIn) {
+ this._router.navigate(['/']);
+ }
+ else {
+ this.goToLogin();
+ }
+ }
+
+ goToSettings(): void {
+ this._router.navigate(['/profile/' + this.user.userName + '/settings']);
+ }
+
+ logout(): void {
+ this._tokenService.logoutUserFromSessionStorage();
+ this.goToLogin();
+ }
+
+ goToLogin(): void {
+ this._router.navigate(['/login']);
+ }
+}
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index 5da8cc7..ad748e3 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -1,6 +1,8 @@
+<app-navbar></app-navbar>
+
<app-loading *ngIf="!dataArrived"></app-loading>
-<main id="content" *ngIf="dataArrived">
+<main id="content" class="scroll-standalone under-navbar" *ngIf="dataArrived">
<nav>
<div class="many-buttons" *ngIf="loggedIn">
<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index 07d931f..f263386 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -1,129 +1,35 @@
-.post {
- display: flex;
- width: 98%;
-
- margin: .5em auto;
+.left-pane {
box-sizing: border-box;
- padding: .5em;
- background-color: var(--card-bg);
- position: relative;
-}
-
-.post:first-child {
- margin-top: 0;
-}
-
-hr {
- border: 1px solid black;
- width: 90%;
}
/* Author */
-.author {
- display: flex;
- margin-bottom: .2em;
-}
-
-.author:hover {
- cursor: pointer;
-}
-
-.author > img {
+.author-picture {
width: 2.2em;
height: 2.2em;
- margin-right: .2em;
-}
-
-.author-info > .handle {
- font-size: .9em;
- color: gray;
}
/* Content */
.content {
- flex: 1;
+ padding: 0 var(--card-padding);
}
.message {
- margin: .3em 0;
- word-break: break-all;
+ margin: 0.2em 0;
+ word-break: break-word;
}
-.bottom-post {
- font-size: .5em;
- color: gray;
- display: flex;
- align-items: center;
-}
-
-.separator {
- margin: 0 .5em;
-}
-
-.comment-count {
- font-size: 1em;
-}
-
-.comment-count > img {
- height: .8em;
-}
-
-.message:hover, .timestamp:hover {
- cursor: pointer;
-}
-
-/* Rating */
-
-.rating {
- display: flex;
- flex-direction: column;
- align-items: center;
- min-height: 4.4em;
- margin: auto -.1em auto 0;
-}
-
-.score {
- flex: 1;
- display: flex;
- align-items: center;
-}
-
-
-.vote {
- display: flex;
- align-items: center;
- flex: 1;
-
- background: var(--card-bg);
- font-size: 1em;
-
- border: 1px solid var(--card-bg);
- box-sizing: border-box;
- border-radius: .2em;
-
- }
-
-.vote:hover {
- border: 1px solid var(--focus-color);
- color: var(--focus-color);
- cursor: pointer;
-}
-
-/* Attachments */
-
-.attachments {
- display: flex;
- width: 98%;
- margin: -.3em auto .5em auto;
- flex-wrap: wrap;
+.post-details {
+ margin-bottom: calc(var(--card-padding) / 1.5);
+ padding: 0.2em 0;
}
-.attachments:empty {
- display: none;
+.post-details > * {
+ margin-left: 1.1em;
}
-.attachments > * {
- flex: 1;
+.rating img {
+ height: 1.2em;
+ width: 1.2em;
}
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 1603ebf..d9ce657 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -1,48 +1,60 @@
<app-loading *ngIf="!loaded"></app-loading>
-<section class="post rounded-border" *ngIf="loaded">
- <section class="content">
- <summary class="author" (click)="goToAuthorProfile()">
- <img class="round-image" [src]="user.profilePictureURL">
- <div class="author-info">
- <div class="name">
- {{ user.firstName }} {{ user.lastName }}
- </div>
- <div class="handle">
- @{{ user.userName }}
- </div>
- </div>
+<section class="card flex-row" *ngIf="loaded">
+ <aside class="left-pane">
+ <img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()">
+ </aside>
+ <main class="content flexible">
+ <summary class="font-size-dot8 text-vertical-middle hover-half-opacity" (click)="goToAuthorProfile()">
+ <span>
+ {{ user.firstName }} {{ user.lastName }}
+ </span>
+ <span class="fg-color-faded">
+ @{{ user.userName }}
+ </span>
</summary>
- <article class="message" (click)="goToPostPage()">
+ <article class="message">
{{ post.message }}
</article>
- <div class="bottom-post" (click)="goToPostPage()">
- <time class="timestamp">
- {{ timeCreated }}
+ <section class="flex-row flexible-children">
+ <figure *ngFor="let fileURL of post.fileURLs">
+ <app-post-attachment [paramURL]="fileURL"></app-post-attachment>
+ </figure>
+ </section>
+ <section class="post-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
+ <time class="flex-row flex-center-align-items">
+ <img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
+ <span>
+ {{ timeCreated }}
+ </span>
</time>
- <div class="separator">
- ║
- </div>
- <summary class="comment-count">
- {{ post.comments.length }}
- <img src="assets/images/comment.png">
+ <summary class="flex-row flex-center-align-items">
+ <img class="img-height-font-size" src="/assets/icons/tabler-icon-message-2.svg">&nbsp;
+ <span>
+ {{ post.comments.length }}
+ </span>
</summary>
- </div>
- </section>
- <section class="rating">
- <button class="vote" (click)="votePost(true)">
- ᐃ
+ </section>
+ <section class="flex-row flexible-children justify-children-center flex-center-align-children">
+ <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()">
+ <img src="/assets/icons/tabler-icon-message-2.svg">
+ &nbsp;Comment
+ </button>
+ <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()">
+ <img src="/assets/icons/tabler-icon-link.svg">
+ &nbsp;Share
+ </button>
+ </section>
+ </main>
+ <aside class="rating flex-col flex-center-align-items">
+ <button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)">
+ <img src="/assets/icons/tabler-icon-chevron-up.svg">
</button>
- <summary class="score">
+ <summary>
{{ votesNumber }}
</summary>
- <button class="vote" (click)="votePost(false)">
- ᐁ
+ <button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)">
+ <img src="/assets/icons/tabler-icon-chevron-down.svg">
</button>
- </section>
+ </aside>
</section>
-<aside class="attachments">
- <figure *ngFor="let fileURL of post.fileURLs">
- <app-post-attachment class="no-events" [paramURL]="fileURL"></app-post-attachment>
- </figure>
-</aside>
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 502697d..9e0e80e 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -1,6 +1,8 @@
+<app-navbar></app-navbar>
+
<app-loading *ngIf="!dataArrived"></app-loading>
-<div id="content" *ngIf="dataArrived">
+<div id="content" class="scroll-standalone under-navbar" *ngIf="dataArrived">
<nav id="navigation">
<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button>
diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index ebcd406..c7e112f 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -1,105 +1,27 @@
-* {
- box-sizing: border-box;
+#user-info {
+ font-size: 1.3em;
}
-#content {
- max-width: 22em;
- justify-content: start;
+#profile-picture {
+ height: 5rem;
+ width: 5rem;
}
-hr {
- width: calc(100% - 1em);
- color: black;
- border: 1px solid black;
+.sec-info-card {
+ padding-bottom: calc(var(--card-padding) - 0.3em);
}
-form {
- width: 100%;
+.sec-info-title {
+ padding-bottom: 0.2em;
+ margin-bottom: 0.3em;
}
-/* Navigation bar (for loggedin user) */
-
-#navigation {
- display: flex;
- width: 100%;
-}
-
-.submit-btn {
- flex: 1;
- margin-top: 0;
- margin-left: .5em;
- font-size: inherit;
-}
-
-#navigation > .submit-btn:first-child {
- margin-left: 0;
-}
-
-/* Top card */
-
-#main-info {
- display: flex;
- width: 100%;
- margin-bottom: .25em
-}
-
-#main-info > img {
- width: 5em;
- height: 5em;
-}
-
-#other-main-info {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
-}
-
-#other-main-info > * {
- font-size: 1.4em;
-}
-
-#other-main-info *:nth-child(1) {
- margin-top: auto;
-}
-
-#other-main-info *:nth-last-child(1) {
- margin-bottom: auto;
-}
-
-#add-friend, #loggedin-password {
- flex: 0 !important;
- margin-top: .4em;
- max-width: 8em;
- font-size: .6em !important;
-}
-
-#loggedin-password {
- max-width: 100%;
-}
-
-/* Languages and technologies */
-
-.secondary-info {
- margin-top: .25em;
- margin-bottom: .25em;
- width: 100%;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
-}
-
-/* Posts */
-
-#no-posts {
- width: 100%;
- text-align: center;
- color: gray;
- margin-top: .2em;
+.none-message {
+ margin-bottom: 0.3em;
}
-#posts {
- width: 100%;
- height: 100%;
+.sec-info {
+ width: fit-content;
+ background-color: #424242;
+ margin: 0 0.3em 0.3em 0;
}
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 5c21cee..7632620 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,60 +1,59 @@
+<app-navbar></app-navbar>
+
<app-loading *ngIf="!dataArrived"></app-loading>
-<div id="content" *ngIf="dataArrived">
- <nav id="navigation">
- <button class="submit-btn" (click)="goBack()">ᐊ Back</button>
- <button class="submit-btn" (click)="navigateToSettings()" *ngIf="isTheLoggedInUser">Settings</button>
- <button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isTheLoggedInUser && isAdminUser">Panel</button>
- <button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser">Logout</button>
- </nav>
- <hr>
- <div class="scroll-standalone" (scroll)="onScroll($event)">
- <div id="main-info" class="rounded-border">
- <img class="round-image" [src]="user.profilePictureURL" alt=""/>
- <div id="other-main-info">
- <div id="name">
- {{ user.firstName }} {{ user.lastName }}
- </div>
- <div id="username">
- @{{ user.userName }}
- </div>
- <form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
- <button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
- <br>
- <input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
- </form>
- </div>
+<main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
+ <section id="user-info" class="card flex-row full-width flex-justify-center">
+ <div>
+ <img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
</div>
- <div class="secondary-info rounded-border">
- Languages:
- <div *ngFor="let lang of user.languages">
- <div class="user-language">
- {{ lang.name }}
- </div>
+ <div class="flexible flex-col flex-center-align-items flex-justify-center">
+ <div class="text-centered">
+ {{ user.firstName }} {{ user.lastName }}
</div>
- <div *ngIf="user.languages.length === 0">
- &nbsp;None
+ <div>
+ @{{ user.userName }}
</div>
+ <form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+ <button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
+ <br>
+ <input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
+ </form>
</div>
- <div class="secondary-info rounded-border">
- Technologies:
- <div *ngFor="let tech of user.technologies">
- <div class="user-language">
- {{ tech.name }}
- </div>
- </div>
- <div *ngIf="user.technologies.length === 0">
- &nbsp;None
- </div>
+ </section>
+ <section class="card sec-info-card flex-col full-width">
+ <div class="sec-info-title faded-slim-border border-bottom-only">
+ Languages
+ </div>
+ <div class="none-message" *ngIf="user.languages.length === 0">
+ None
</div>
- <hr>
- <div id="posts">
- <div id="no-posts" *ngIf="userPosts.length === 0">
- {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+ <div class="flex-row" *ngFor="let lang of user.languages">
+ <div class="sec-info border-radius-normal padding-small">
+ {{ lang.name }}
</div>
- <div *ngFor="let userPost of userPosts; let i = index">
- <app-post [paramId]="userPost.postId.toString()" [index]="i"></app-post>
+ </div>
+ </section>
+ <section class="card sec-info-card flex-col full-width">
+ <div class="sec-info-title faded-slim-border border-bottom-only">
+ Technologies
+ </div>
+ <div class="none-message" *ngIf="user.technologies.length === 0">
+ None
+ </div>
+ <div class="flex-row" *ngFor="let tech of user.technologies">
+ <div class="sec-info border-radius-normal padding-small">
+ {{ tech.name }}
</div>
</div>
- </div>
-</div>
+ </section>
+ <hr class="card-hr">
+ <section>
+ <div *ngIf="userPosts.length === 0">
+ {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+ </div>
+ <div *ngFor="let userPost of userPosts; let i = index">
+ <app-post [paramId]="userPost.postId.toString()" [index]="i"></app-post>
+ </div>
+ </section>
+</main>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index ed17f33..fc5d4d6 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -131,18 +131,6 @@ export class ProfileComponent implements OnInit {
}
}
- goBack(): void {
- this._router.navigate(['/']);
- }
-
- navigateToAdminPanel(): void {
- this._router.navigate(['/admin-panel']);
- }
-
- navigateToSettings(): void {
- this._router.navigate([this._router.url + '/settings']);
- }
-
logout(): void {
this._tokenService.logoutUserFromSessionStorage();
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-17 10:38:34 +0000