feat: add new styles to posts to match what's on pages

Verseghy · Oct 5, 2020 · b942284 · b942284
1 parent d70c5bb
commit b942284
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 13 deletions.
diff --git a/apps/frontend/src/app/modules/posts/components/posts/posts.component.scss b/apps/frontend/src/app/modules/posts/components/posts/posts.component.scss
@@ -98,7 +98,7 @@ h1 {
   line-height: 26px;
 
   &::ng-deep {
-    p {
+    > p {
       max-width: 650px;
       margin: 0 auto 21px;
     }
@@ -130,12 +130,17 @@ h1 {
 
     table {
       border-collapse: collapse;
-      width: 100%;
+      width: 100% !important;
     }
 
     td,
     th {
       padding: 5px;
+      border-right: 1px solid #dedede;
+
+      &:last-child {
+        border-right: 0;
+      }
     }
 
     tr {
@@ -146,7 +151,8 @@ h1 {
       }
     }
 
-    ul {
+    ul,
+    ol {
       max-width: 650px;
       margin: 0 auto;
       list-style-position: outside;
@@ -163,6 +169,26 @@ h1 {
     li p {
       display: inline-block;
     }
+
+    blockquote {
+      background: #f8f8f8;
+      border-radius: 8px;
+      padding: 20px;
+      max-width: 650px;
+      margin: 0 auto 21px;
+      font-style: italic;
+      box-sizing: border-box;
+
+      p ~ p {
+        margin-top: 21px;
+      }
+    }
+
+    img {
+      width: 100% !important;
+      height: 100% !important;
+      border-radius: 8px;
+    }
   }
 }
 

diff --git a/apps/frontend/src/app/modules/posts/components/posts/posts.component.ts b/apps/frontend/src/app/modules/posts/components/posts/posts.component.ts
@@ -1,12 +1,12 @@
-import { Component, HostListener, OnInit, ViewChild } from '@angular/core'
-import { combineLatest, Observable } from 'rxjs'
-import { RequestService } from '../../services/request.service'
-import { Post } from '../../../../models/Post'
-import { ActivatedRoute } from '@angular/router'
-import { ContrastService } from '../../../../services/contrast.service'
-import { map, switchMap } from 'rxjs/operators'
-import { DomSanitizer } from '@angular/platform-browser'
-import { format } from 'date-fns'
+import { Component, HostListener, OnInit, ViewChild } from "@angular/core";
+import { combineLatest, Observable } from "rxjs";
+import { RequestService } from "../../services/request.service";
+import { Post } from "../../../../models/Post";
+import { ActivatedRoute } from "@angular/router";
+import { ContrastService } from "../../../../services/contrast.service";
+import { map, switchMap } from "rxjs/operators";
+import { DomSanitizer } from "@angular/platform-browser";
+import { format } from "date-fns";
 
 @Component({
   selector: 'verseghy-posts',
@@ -69,10 +69,19 @@ export class PostsComponent implements OnInit {
       parentNode.insertBefore(element, parentNode.children[index])
     }
 
-    links.forEach(link => {
+    links.forEach((link) => {
       link.setAttribute('target', '_blank')
     })
 
+    const images = Array.from(dom.getElementsByTagName('img'))
+    for (const image of images) {
+      const parent = image.parentElement
+      const parent2 = parent.parentElement
+
+      const index = Array.from(parent2.children).indexOf(parent)
+      parent2.insertBefore(image, parent2.children[index])
+    }
+
     return dom.documentElement.innerHTML
   }
 }