diff options
Diffstat (limited to 'src')
35 files changed, 1553 insertions, 502 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-loading *ngIf="!dataArrived"></app-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"> + <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"> + <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"> + Comment + </button> + <button class="padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()"> + <img src="/assets/icons/tabler-icon-link.svg"> + 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"> - 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"> - 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(); diff --git a/src/assets/icons/tabler-icon-calendar-time.svg b/src/assets/icons/tabler-icon-calendar-time.svg new file mode 100644 index 0000000..3bb3a3e --- /dev/null +++ b/src/assets/icons/tabler-icon-calendar-time.svg @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-calendar-time" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg16" + sodipodi:docname="tabler-icon-calendar-time.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata22"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs20" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview18" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg16" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="M 11.795,21 H 5 A 2,2 0 0 1 3,19 V 7 A 2,2 0 0 1 5,5 h 12 a 2,2 0 0 1 2,2 v 4" + id="path4" + style="stroke:#ffeede" /> + <circle + cx="18" + cy="18" + r="4" + id="circle6" + style="stroke:#ffeede" /> + <path + d="M 15,3 V 7" + id="path8" + style="stroke:#ffeede" /> + <path + d="M 7,3 V 7" + id="path10" + style="stroke:#ffeede" /> + <path + d="M 3,11 H 19" + id="path12" + style="stroke:#ffeede" /> + <path + d="M 18,16.496 V 18 l 1,1" + id="path14" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-chevron-down.svg b/src/assets/icons/tabler-icon-chevron-down.svg new file mode 100644 index 0000000..0971874 --- /dev/null +++ b/src/assets/icons/tabler-icon-chevron-down.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-chevron-down" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg6" + sodipodi:docname="tabler-icon-chevron-down.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata12"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs10" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="750" + inkscape:window-height="480" + id="namedview8" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="0" + inkscape:current-layer="svg6" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <polyline + points="6 9 12 15 18 9" + id="polyline4" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-chevron-up.svg b/src/assets/icons/tabler-icon-chevron-up.svg new file mode 100644 index 0000000..20d694a --- /dev/null +++ b/src/assets/icons/tabler-icon-chevron-up.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-chevron-up" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg6" + sodipodi:docname="tabler-icon-chevron-up.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata12"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs10" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="737" + inkscape:window-height="480" + id="namedview8" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="0" + inkscape:current-layer="svg6" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <polyline + points="6 15 12 9 18 15" + id="polyline4" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-home.svg b/src/assets/icons/tabler-icon-home.svg new file mode 100644 index 0000000..3578ddb --- /dev/null +++ b/src/assets/icons/tabler-icon-home.svg @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-home" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg10" + sodipodi:docname="tabler-icon-home.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata16"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs14" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview12" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg10" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <polyline + points="5 12 3 12 12 3 21 12 19 12" + id="polyline4" + style="stroke:#ffeede" /> + <path + d="m 5,12 v 7 a 2,2 0 0 0 2,2 h 10 a 2,2 0 0 0 2,-2 v -7" + id="path6" + style="stroke:#ffeede" /> + <path + d="m 9,21 v -6 a 2,2 0 0 1 2,-2 h 2 a 2,2 0 0 1 2,2 v 6" + id="path8" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-link.svg b/src/assets/icons/tabler-icon-link.svg new file mode 100644 index 0000000..a9f9110 --- /dev/null +++ b/src/assets/icons/tabler-icon-link.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-link" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-link.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="737" + inkscape:window-height="480" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="0" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="m 10,14 a 3.5,3.5 0 0 0 5,0 l 4,-4 A 3.5355339,3.5355339 0 0 0 14,5 l -0.5,0.5" + id="path4" + style="stroke:#ffeede" /> + <path + d="m 14,10 a 3.5,3.5 0 0 0 -5,0 l -4,4 a 3.5355339,3.5355339 0 0 0 5,5 l 0.5,-0.5" + id="path6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-login.svg b/src/assets/icons/tabler-icon-login.svg new file mode 100644 index 0000000..4f62892 --- /dev/null +++ b/src/assets/icons/tabler-icon-login.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-login" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-login.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="M 14,8 V 6 A 2,2 0 0 0 12,4 H 5 A 2,2 0 0 0 3,6 v 12 a 2,2 0 0 0 2,2 h 7 a 2,2 0 0 0 2,-2 v -2" + id="path4" + style="stroke:#ffeede" /> + <path + d="M 20,12 H 7 l 3,-3 m 0,6 -3,-3" + id="path6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-logout.svg b/src/assets/icons/tabler-icon-logout.svg new file mode 100644 index 0000000..c311628 --- /dev/null +++ b/src/assets/icons/tabler-icon-logout.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-logout" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-logout.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="M 14,8 V 6 A 2,2 0 0 0 12,4 H 5 A 2,2 0 0 0 3,6 v 12 a 2,2 0 0 0 2,2 h 7 a 2,2 0 0 0 2,-2 v -2" + id="path4" + style="stroke:#ffeede" /> + <path + d="M 7,12 H 21 L 18,9 m 0,6 3,-3" + id="path6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-message-2.svg b/src/assets/icons/tabler-icon-message-2.svg new file mode 100644 index 0000000..6a9d20c --- /dev/null +++ b/src/assets/icons/tabler-icon-message-2.svg @@ -0,0 +1,79 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-message-2" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg10" + sodipodi:docname="tabler-icon-message-2.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata16"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs14" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview12" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg10" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="M 12,20 9,17 H 7 A 3,3 0 0 1 4,14 V 8 A 3,3 0 0 1 7,5 h 10 a 3,3 0 0 1 3,3 v 6 a 3,3 0 0 1 -3,3 h -2 l -3,3" + id="path4" + style="stroke:#ffeede" /> + <line + x1="8" + y1="9" + x2="16" + y2="9" + id="line6" + style="stroke:#ffeede" /> + <line + x1="8" + y1="13" + x2="14" + y2="13" + id="line8" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-message-circle.svg b/src/assets/icons/tabler-icon-message-circle.svg new file mode 100644 index 0000000..fc999bd --- /dev/null +++ b/src/assets/icons/tabler-icon-message-circle.svg @@ -0,0 +1,86 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-message-circle" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg12" + sodipodi:docname="tabler-icon-message-circle.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata18"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs16" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview14" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg12" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="M 3,20 4.3,16.1 A 9,8 0 1 1 7.7,19 L 3,20" + id="path4" + style="stroke:#ffeede" /> + <line + x1="12" + y1="12" + x2="12" + y2="12.01" + id="line6" + style="stroke:#ffeede" /> + <line + x1="8" + y1="12" + x2="8" + y2="12.01" + id="line8" + style="stroke:#ffeede" /> + <line + x1="16" + y1="12" + x2="16" + y2="12.01" + id="line10" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-paperclip.svg b/src/assets/icons/tabler-icon-paperclip.svg new file mode 100644 index 0000000..955e6fb --- /dev/null +++ b/src/assets/icons/tabler-icon-paperclip.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-paperclip" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg6" + sodipodi:docname="tabler-icon-paperclip.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata12"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs10" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="737" + inkscape:window-height="480" + id="namedview8" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="0" + inkscape:current-layer="svg6" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="m 15,7 -6.5,6.5 a 2.1213203,2.1213203 0 0 0 3,3 L 18,10 A 4.2426407,4.2426407 0 0 0 12,4 l -6.5,6.5 a 6.363961,6.363961 0 0 0 9,9 L 21,13" + id="path4" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-search.svg b/src/assets/icons/tabler-icon-search.svg new file mode 100644 index 0000000..abbd480 --- /dev/null +++ b/src/assets/icons/tabler-icon-search.svg @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-search" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-search.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <circle + cx="10" + cy="10" + r="7" + id="circle4" + style="stroke:#ffeede" /> + <line + x1="21" + y1="21" + x2="15" + y2="15" + id="line6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-settings.svg b/src/assets/icons/tabler-icon-settings.svg new file mode 100644 index 0000000..c133334 --- /dev/null +++ b/src/assets/icons/tabler-icon-settings.svg @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-settings" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-settings.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <path + d="m 10.325,4.317 c 0.426,-1.756 2.924,-1.756 3.35,0 a 1.724,1.724 0 0 0 2.573,1.066 c 1.543,-0.94 3.31,0.826 2.37,2.37 a 1.724,1.724 0 0 0 1.065,2.572 c 1.756,0.426 1.756,2.924 0,3.35 a 1.724,1.724 0 0 0 -1.066,2.573 c 0.94,1.543 -0.826,3.31 -2.37,2.37 a 1.724,1.724 0 0 0 -2.572,1.065 c -0.426,1.756 -2.924,1.756 -3.35,0 A 1.724,1.724 0 0 0 7.752,18.617 c -1.543,0.94 -3.31,-0.826 -2.37,-2.37 A 1.724,1.724 0 0 0 4.317,13.675 c -1.756,-0.426 -1.756,-2.924 0,-3.35 A 1.724,1.724 0 0 0 5.383,7.752 c -0.94,-1.543 0.826,-3.31 2.37,-2.37 1,0.608 2.296,0.07 2.572,-1.065 z" + id="path4" + style="stroke:#ffeede" /> + <circle + cx="12" + cy="12" + r="3" + id="circle6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-trending-up.svg b/src/assets/icons/tabler-icon-trending-up.svg new file mode 100644 index 0000000..c40ee92 --- /dev/null +++ b/src/assets/icons/tabler-icon-trending-up.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-trending-up" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-trending-up.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <polyline + points="3 17 9 11 13 15 21 7" + id="polyline4" + style="stroke:#ffeede" /> + <polyline + points="14 7 21 7 21 14" + id="polyline6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/icons/tabler-icon-user.svg b/src/assets/icons/tabler-icon-user.svg new file mode 100644 index 0000000..37969ec --- /dev/null +++ b/src/assets/icons/tabler-icon-user.svg @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + class="icon icon-tabler icon-tabler-user" + width="24" + height="24" + viewBox="0 0 24 24" + stroke-width="2" + stroke="currentColor" + fill="none" + stroke-linecap="round" + stroke-linejoin="round" + version="1.1" + id="svg8" + sodipodi:docname="tabler-icon-user.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1053" + id="namedview10" + showgrid="false" + inkscape:zoom="37.541667" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + stroke="none" + d="M0 0h24v24H0z" + fill="none" + id="path2" /> + <circle + cx="12" + cy="7" + r="4" + id="circle4" + style="stroke:#ffeede" /> + <path + d="m 6,21 v -2 a 4,4 0 0 1 4,-4 h 4 a 4,4 0 0 1 4,4 v 2" + id="path6" + style="stroke:#ffeede" /> +</svg> diff --git a/src/assets/images/comment.png b/src/assets/images/comment.png Binary files differdeleted file mode 100644 index 5f8e8d9..0000000 --- a/src/assets/images/comment.png +++ /dev/null diff --git a/src/assets/images/feed/chat-pic.png b/src/assets/images/feed/chat-pic.png Binary files differdeleted file mode 100644 index 60241fa..0000000 --- a/src/assets/images/feed/chat-pic.png +++ /dev/null diff --git a/src/assets/images/feed/profile-pic.png b/src/assets/images/feed/profile-pic.png Binary files differdeleted file mode 100644 index 87f67f5..0000000 --- a/src/assets/images/feed/profile-pic.png +++ /dev/null diff --git a/src/assets/images/paper-clip.png b/src/assets/images/paper-clip.png Binary files differdeleted file mode 100644 index 46ce0a7..0000000 --- a/src/assets/images/paper-clip.png +++ /dev/null diff --git a/src/styles.css b/src/styles.css index b62f493..66fedf7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,11 +2,16 @@ @import "./reset.css"; :root { - --bg-color: white; + --max-width: 40rem; + --bg-color: #18191a; + --fg-color: #ffeede; --focus-color: forestgreen; - --card-bg: white; + --card-bg: #303030; + --card-padding: 0.5em; --success: forestgreen; --failure: indianred; + --faded-color: #696969; + --navbar-height: 2.6em; } html, @@ -16,11 +21,22 @@ body { } body { font: 21px sans-serif !important; + color: var(--fg-color); background-color: var(--bg-color); } +button, textarea, input { + color: inherit; + background: inherit; + background-color: inherit; + font: inherit; + padding: 0; + border: none; +} + input:focus, -button:focus { +button:focus, +textarea:focus { outline: 0; } @@ -38,7 +54,7 @@ input[type=file]::file-selector-button { #content { /* Used for the login and register pages */ height: 100%; - max-width: 20em; + max-width: var(--max-width); box-sizing: border-box; border: 0.5em solid var(--bg-color); @@ -74,6 +90,7 @@ input[type=file]::file-selector-button { width: 100%; max-height: 100%; overflow-y: auto; + flex-wrap: nowrap !important; } /* Hide scrollbar for Chrome, Safari and Opera */ @@ -96,6 +113,191 @@ input[type=file]::file-selector-button { width: fit-content; } +/* General flex */ + +.flex-row, .flex-col { + display: flex; + flex-wrap: wrap; +} + +.flex-row { + flex-direction: row; +} + +.flex-col { + flex-direction: column; +} + +.flexible, .flexible-children > * { + flex: 1; +} + +.flex-center-align-items { + align-items: center; +} + +.flex-justify-start { + justify-content: flex-start; +} + +.flex-justify-end { + justify-content: flex-end; +} + +.flex-justify-center { + justify-content: center; +} + +.flex-center-align-children > * { + display: flex; + align-items: center; +} + +.justify-children-center > * { + display: flex; + justify-content: center; +} + +/* General font sizes */ + +.font-size-dot9 { + font-size: 0.9em; +} + +.font-size-dot8 { + font-size: 0.8em; +} + +.font-size-dot7 { + font-size: 0.7em; +} + +.img-height-font-size { + height: 1em; +} + +/* General colors */ + +.fg-color-faded { + color: var(--faded-color); +} + +/* General text */ + +.text-centered { + text-align: center; +} + +.text-vertical-middle { + vertical-align: middle; +} + +/* General border */ + +.faded-slim-border { + border: 1px solid var(--faded-color); +} + +.border-radius-normal, .card { + border-radius: 0.5em; +} + +.border-radius-smaller { + border-radius: 0.3em; +} + +.border-radius-small { + border-radius: 0.2em; +} + +.border-bottom-only { + border-top: none; + border-left: none; + border-right: none; +} + +/* General padding */ + +.padding-normal { + padding: 0.4em; +} + +.padding-smaller { + padding: 0.3em; +} + +.padding-small { + padding: 0.2em; +} + +.padding-tiny { + padding: 0.1em; +} + +/* Cards */ + +.card { + margin: 0.5em auto; + box-sizing: border-box; + padding: var(--card-padding); + background-color: var(--card-bg); + position: relative; +} + +@media screen and (max-width: 30rem) { + .card { + font-size: 0.8em; + } + + .card button { + font-size: 0.9em; + } +} + +.card-hr { + width: calc(100% - 1em); + border: 1px solid var(--fg-color); + background-color: var(--fg-color); +} + +/* Effects */ + +.lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover { + cursor: pointer; +} + +.lighter-hover:hover { + background: #424242; +} + +.light-hover:hover { + background: #696969; +} + +.hover-half-opacity:hover { + opacity: 0.5; +} + +.click-effect:active { + transform: scale(0.9); +} + +/* Misc */ + +.full-width { + width: 100%; +} + +.centered-content { + max-width: var(--max-width); + margin: 0 auto; + box-sizing: border-box; +} + +.under-navbar { + height: calc(100% - var(--navbar-height)) !important; +} + /* Inputs, the type found in login and register */ .input-field { |
