diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/components/profile/profile.component.css | 109 | ||||
| -rw-r--r-- | src/app/components/profile/profile.component.html | 100 | ||||
| -rw-r--r-- | src/app/components/profile/profile.component.ts | 12 | ||||
| -rw-r--r-- | src/styles.css | 13 |
4 files changed, 72 insertions, 162 deletions
diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css index ebcd406..c14fd00 100644 --- a/src/app/components/profile/profile.component.css +++ b/src/app/components/profile/profile.component.css @@ -1,105 +1,18 @@ -* { - 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-title { + padding-bottom: 0.2em; + margin-bottom: 0.3em; } -form { - width: 100%; -} - -/* 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; -} - -#posts { - width: 100%; - height: 100%; +.sec-info { + 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 dede887..45e51a5 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -2,61 +2,57 @@ <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 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 flex-col full-width"> + <div class="sec-info-title faded-slim-border border-bottom-only"> + Languages </div> - <hr> - <div id="posts"> - <div id="no-posts" *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> + <span *ngIf="user.languages.length === 0"> + None + </span> + <div class="flex-row" *ngFor="let lang of user.languages"> + <span class="sec-info border-radius-normal padding-small"> + {{ lang.name }} + </span> + </div> + </section> + <section class="card flex-col full-width"> + <div class="sec-info-title faded-slim-border border-bottom-only"> + Technologies + </div> + <span *ngIf="user.technologies.length === 0"> + None + </span> + <div *ngFor="let tech of user.technologies"> + <span class="sec-info border-radius-normal padding-small"> + {{ tech.name }} + </span> + </div> + </section> + <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> - </div> -</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/styles.css b/src/styles.css index b4f7539..64aa79f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -89,6 +89,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 */ @@ -142,6 +143,10 @@ input[type=file]::file-selector-button { justify-content: flex-end; } +.flex-justify-center { + justify-content: center; +} + .flex-center-align-children > * { display: flex; align-items: center; @@ -178,6 +183,10 @@ input[type=file]::file-selector-button { /* General text */ +.text-centered { + text-align: center; +} + .text-vertical-middle { vertical-align: middle; } @@ -268,6 +277,10 @@ input[type=file]::file-selector-button { /* Misc */ +.full-width { + width: 100%; +} + .centered-content { max-width: var(--max-width); margin: 0 auto; |