WEB-63 Format blog page to display style (#350)

csesoc · Jun 11, 2023 · 3c8d63f · 3c8d63f
1 parent e4c0654
commit 3c8d63f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 4 deletions.
diff --git a/frontend/src/packages/editor/components/buttons/EditorQuoteButton.tsx b/frontend/src/packages/editor/components/buttons/EditorQuoteButton.tsx
@@ -10,7 +10,7 @@ const EditorQuoteButton: FC = () => {
       size={30}
       onMouseDown={(event) => {
         event.preventDefault();
-        toggleMark(editor, 'quote');
+        toggleMark(editor, "quote");
       }}
     />
   );

diff --git a/next/src/components/blog/Blog-styled.tsx b/next/src/components/blog/Blog-styled.tsx
@@ -8,6 +8,22 @@ const Text = styled.span<TextStyle>`
   text-decoration-line: ${(props) => (props.underline ? "underline" : "none")};
   text-align: ${(props) => props.align};
   font-size: ${(props) => `${props.textSize}px` ?? "16px"};
+  word-wrap: break-word;
+  font-family: ${(props) => props.code ? "monospace" : "inherit"};
+  background-color: ${(props) => props.code ? "#eee" : "#fff"};
+  color: ${(props) => (props.quote ? '#9e9e9e' : 'black')};
+  border-left: ${(props) => (props.quote ? "3px solid #9e9e9e" : "auto")};
+  margin: ${(props) => (props.quote ? "0px" : "auto")};
+  padding-left: ${(props) => (props.quote ? "10px" : "0px")};
+
+  min-width: 200px;
+  @media ${device.tablet} {
+    min-width: 500px;
+  }
+
+  @media (min-width: 1920px) {
+    min-width: 1250px;
+  }
 `;
 
 const AlignedText = Text.withComponent("div");
@@ -24,6 +40,14 @@ const ImagePlaceholder = styled.div`
 
 const ParagraphContainer = styled.div`
   padding: 10px;
+  min-width: 200px;
+  @media ${device.tablet} {
+    min-width: 500px;
+  }
+
+  @media (min-width: 1920px) {
+    min-width: 1250px;
+  }
 `;
 
 const BlogContainer = styled.div`

diff --git a/next/src/components/blog/types.ts b/next/src/components/blog/types.ts
@@ -27,6 +27,8 @@ export interface TextStyle {
   bold?: boolean;
   italic?: boolean;
   underline?: boolean;
+  code?: boolean;
+  quote?: boolean;
   align?: "left" | "right" | "center";
   textSize: number;
 }
diff --git a/next/src/components/footer/Footer.tsx b/next/src/components/footer/Footer.tsx
@@ -63,7 +63,7 @@ const Footer: React.FC<{}> = () => {
         <Image src={CSESocLogo} alt="CSESoc" />
       </Logo>
       <Details>
-        <p>
+        <div>
           B03 CSE Building K17, UNSW
           <br />
           csesoc@csesoc.org.au
@@ -87,7 +87,7 @@ const Footer: React.FC<{}> = () => {
           </ImagesContainer>
           <br /><br />
           © 2022 — CSESoc UNSW
-        </p>
+        </div>
       </Details>
     </FooterComponent>
   );

diff --git a/next/src/pages/blog/[bid].tsx b/next/src/pages/blog/[bid].tsx
@@ -42,7 +42,7 @@ const BlogPage: NextPage<{ data: Block[] }> = ({ data }) => {
 
 export const getServerSideProps: GetServerSideProps = async ({ params }) => {
   const data = await fetch(
-    `/api/filesystem/get/published?DocumentID=${
+    `http://backend:8080/api/filesystem/get/published?DocumentID=${
       params && params.bid
     }`,
     {