Major redesign of post component styling. Added foundatinal global stylings as well as icons.

2 files changed, 58 insertions, 145 deletions

diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index 07d931f..52f3283 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -1,129 +1,30 @@
-.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;
-}
-
-.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;
+  margin: 0.2em 0;
+  word-break: break-word;
 }
 
-.attachments:empty {
-  display: none;
+.post-details {
+  margin-bottom: calc(var(--card-padding) / 1.5);
+  padding: 0.2em 0;
 }
 
-.attachments > * {
-  flex: 1;
+.post-details > * {
+  margin-left: 1.1em;
 }
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 1603ebf..a4acfe6 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">
+			<button class="small-padding lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+				<img src="/assets/icons/tabler-icon-message-2.svg">
+				&nbsp;Comment
+			</button>
+			<button class="small-padding lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+				<img src="/assets/icons/tabler-icon-link.svg">
+				&nbsp;Share
+			</button>
+		</section>
+	</main>
+	<aside class="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>