2 sol forum styling (#51)

* Improve viewforum styling and UI
comp423-23s · Apr 14, 2023 · 51242b5 · 51242b5
1 parent dfacb27
commit 51242b5
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 23 deletions.
diff --git a/frontend/src/app/viewforum/viewforum.component.css b/frontend/src/app/viewforum/viewforum.component.css
@@ -11,14 +11,71 @@ tr:nth-child(even) {
   a {
     transition-duration: 0.4s;
     border: 2px solid #4CAF50;
+    background-color: #4CAF50;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
-    display: inline-block;
     font-size: 16px;
+    height: 200px;
+    width: 15%;
+    flex: 2;
+    border-radius: 25px;
+    max-width: fit-content;
+    font-weight: bold;
   }
 
   a:hover {
-    background-color: #4CAF50; /* Green */
+    border-color: whitesmoke; /* Green */
     color: white;
+  }
+  .forum-header{
+    padding: 10px;
+    display: flex;
+  }
+
+  .post-outline{
+    padding: 10px;
+    /*border-bottom: 1px solid #ddd; */
+    box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  border: 1px solid #969696;
+  margin: 10px;
+  align-self: baseline;
+  }
+
+ .post-body{
+    text-align:left;
+    padding-top: 10px;
+ }
+
+ .forum-posts{
+  align-items: flex-end;
+ }
+  .forum-user-name{
+    font-weight: bold;
+    text-align: left;
+    background-color: #4786C6;
+    font-style: oblique;
+    padding: 5px;
+    border-radius: 10px;
+    max-width: fit-content;
+  }
+  .forum-title{
+    font-weight: bold;
+  }
+
+  .forum-post-content{
+    text-align:left;
+  }
+
+  body{
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title{
+    flex:8;
+    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size:xx-large;
   }
diff --git a/frontend/src/app/viewforum/viewforum.component.html b/frontend/src/app/viewforum/viewforum.component.html
@@ -1,22 +1,21 @@
-<h1>Forum</h1>
+<body>
+  <div class="forum-header">
+    <h1 class ="title">Forum</h1>
+    <a mat-list-item routerLink="/forum">New Post</a>
+  </div>
 
-<table>
-  <thead>
-      <td>Title</td>
-      <td>Response</td>
-      <td>First Name</td> 
-      <td>Last Name</td>
-      <td>Date</td>
-  </thead>
-  <tbody>
-      <tr *ngFor="let post of post$| async">
-          <td>{{ post.title }}</td>
-          <td>{{ post.content }}</td>
-          <td>{{ post.user.first_name}}</td>
-          <td>{{ post.user.last_name}}</td>
-          <td>{{ post.timestamp }}</td>
-          <td *ngIf="adminPermission$ | async" > <button (click)="onDelete(post.id)">Delete</button> </td>
-      </tr>
-  </tbody>
-  <a mat-list-item routerLink="/forum">Make a Post</a>
-</table>
+  <div class="forum-posts">
+      <div class="post-outline" *ngFor="let post of post$| async">
+
+        <div class="forum-user-name"> {{ post.user.first_name}} {{ post.user.last_name}} {{ post.timestamp }}</div>
+          <h1 class="post-body">{{ post.title }}</h1>
+          <h2 class="post-body">{{ post.content }}</h2>
+
+          <div></div>
+          <div></div>
+          <td *ngIf="adminPermission$ | async"> <button (click)="onDelete(post.id)">Delete</button> </td>
+
+      </div>
+  </div>
+</body>
+