diff options
| -rw-r--r-- | src/app/components/post/post.component.html | 6 | ||||
| -rw-r--r-- | src/app/components/post/post.component.ts | 13 | ||||
| -rw-r--r-- | src/styles.css | 7 |
3 files changed, 18 insertions, 8 deletions
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index d9ce657..a966d00 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -47,13 +47,13 @@ </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)"> + <button class="upvote flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)"> <img src="/assets/icons/tabler-icon-chevron-up.svg"> </button> - <summary> + <summary class="top-bot-padding-small"> {{ votesNumber }} </summary> - <button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)"> + <button class="downvote flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)"> <img src="/assets/icons/tabler-icon-chevron-down.svg"> </button> </aside> diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts index 24ecdb4..58dad4f 100644 --- a/src/app/components/post/post.component.ts +++ b/src/app/components/post/post.component.ts @@ -22,9 +22,11 @@ export class PostComponent implements OnInit { @Input() paramId: string; @Input() index: number; public loggedIn = false; - private voteBtns: HTMLCollectionOf<HTMLElement>; + private upvoteBtns: HTMLCollectionOf<HTMLElement>; + private downvoteBtns: HTMLCollectionOf<HTMLElement>; - constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService) { } + constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService) + { } ngOnInit(): void { this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== ''; @@ -39,7 +41,8 @@ export class PostComponent implements OnInit { this.post.fileURLs = Object.values(result)[7]; this.votesNumber = this.post.currentRating; - this.voteBtns = document.getElementsByClassName('vote') as HTMLCollectionOf<HTMLElement>; + this.upvoteBtns = document.getElementsByClassName('upvote') as HTMLCollectionOf<HTMLElement>; + this.downvoteBtns = document.getElementsByClassName('downvote') as HTMLCollectionOf<HTMLElement>; this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB'); @@ -123,8 +126,8 @@ export class PostComponent implements OnInit { } private changeColorOfVoteButton(isUpvoted: boolean, isDownvoted: boolean): void { - this.voteBtns.item(this.index * 2)!.style.backgroundColor = (isUpvoted) ? 'lightblue' : 'white'; - this.voteBtns.item((this.index * 2) + 1)!.style.backgroundColor = (isDownvoted) ? 'lightblue' : 'white'; + this.upvoteBtns.item(this.index)!.style.backgroundColor = (isUpvoted) ? 'var(--upvote-highlight)' : 'inherit'; + this.downvoteBtns.item(this.index)!.style.backgroundColor = (isDownvoted) ? 'var(--downvote-highlight)' : 'inherit'; } private highlightButtonsOnInit(): void { diff --git a/src/styles.css b/src/styles.css index a1754e4..0a435a7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -12,6 +12,8 @@ --failure: indianred; --faded-color: #696969; --navbar-height: 2.6em; + --upvote-highlight: #999908; + --downvote-highlight: #c35b5b; } html, @@ -239,6 +241,11 @@ input[type=file]::file-selector-button { padding-left: 0.3em; } +.top-bot-padding-small { + padding-top: 0.2em; + padding-bottom: 0.2em; +} + /* Cards */ .card { |