Merge conflict

chamhayden · Oct 1, 2023 · 9fcd8b3 · 9fcd8b3
2 parents eb1bd55 + cabc1d2
commit 9fcd8b3
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 35 deletions.
diff --git a/frontend/src/asset/style/art-bg-example.png b/frontend/src/asset/style/art-bg-example.png
diff --git a/frontend/src/asset/style/eckles-img-example.png b/frontend/src/asset/style/eckles-img-example.png
diff --git a/frontend/src/asset/style/eslint-error.png b/frontend/src/asset/style/eslint-error.png
diff --git a/frontend/src/asset/style/eslint-success.png b/frontend/src/asset/style/eslint-success.png
diff --git a/frontend/src/asset/style/guardian-img-example.png b/frontend/src/asset/style/guardian-img-example.png
diff --git a/frontend/src/asset/style/moodle-bg-example.png b/frontend/src/asset/style/moodle-bg-example.png
diff --git a/frontend/src/component/StyleComponents.jsx b/frontend/src/component/StyleComponents.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
+import Box from '@mui/material/Box';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
@@ -52,7 +53,7 @@ export const Example = (props) => {
     <>
       <Body onClick={() => setExpand(!expand)}>
         <span style={{ cursor: 'pointer' }}>
-          {expand ? '⬇️' : '⬆️'} 💡 <b>Example: </b>
+          {expand ? '⬇️' : '⬆️'} 💡 <b>{`${(props.title ?? 'Example')}:`} </b>
         </span>
       </Body>
       {expand ? (
@@ -68,7 +69,7 @@ export const Example = (props) => {
           {props.goods && props.goods.map((good, idx) => {
             return (
               <>
-                <Body style={{paddingTop: '20px'}} key={idx}><b> 🟢 Good</b></Body>
+                <Body style={{paddingTop: '20px'}} key={idx}><b>🟢 Good</b></Body>
                 <Code lang={props.lang} large={props.large} medium={props.medium}>{good}</Code>
               </>
             )
@@ -79,4 +80,38 @@ export const Example = (props) => {
       )}
     </>
   )
-}
+}
+
+export const ExampleImages = ({ title, srcArray = [] }) => {
+  const [expand, setExpand] = React.useState(true);
+
+  return (
+    <>
+      <Body onClick={() => setExpand(!expand)}>
+        <span style={{ cursor: 'pointer' }}>
+          {expand ? '⬇️' : '⬆️'} 💡 <b>{`${(title ?? 'Example')}:`} </b>
+        </span>
+      </Body>
+      {expand ? (
+        srcArray.map((asset, idx) => (
+          <CaptionedImage src={asset.src} alt={`Example #${idx + 1}`} caption={asset.caption} />
+        ))
+      ) : (
+        <div style={{ marginLeft: '20px' }}>...</div>
+      )}
+    </>
+  )
+}
+
+const CaptionedImage = ({ src, alt, caption }) => (
+  <Box mb={4}>
+    <Box
+      component='img'
+      src={src}
+      alt={alt}
+      maxWidth='700px'
+      width='100%'
+    />
+    <Typography><i>{caption ?? ''}</i></Typography>
+  </Box>
+)
diff --git a/frontend/src/page/Style/StyleCSS.jsx b/frontend/src/page/Style/StyleCSS.jsx
@@ -84,7 +84,7 @@ const StyleCSS = ({}) => {
 
       <H5 id="css-indentation">🎨 2.2. Indentation</H5>
 
-      <Body>As long as you're <b>consistent</b>, you may use 2-space or 4-space indentation in CSS files. We increase the indentation level everytime we use an opening brace <code>{'{'}</code> and decrease it when we use a closing brace <code>}</code>. We also go to a new line with each semicolon <code>;</code>.</Body>
+      <Body>As long as you're <b>consistent</b>, you may use 2-space or 4-space indentation in CSS files. We increase the indentation level everytime we use an opening brace <code>{'{'}</code> and decrease it when we use a closing brace <code>{'}'}</code>. We also go to a new line with each semicolon <code>;</code>.</Body>
 
       <Example lang="css"
         bads={[
@@ -262,17 +262,26 @@ css
 
       <H5 id="css-universal-selectors">2.5. Universal Selectors</H5>
 
-      <Body>Avoid the `*` selector to prevent unintended side effects, such as unintentionally overriding the margin property of an element that you want a different margin set.</Body>
+      <Body>Avoid the <code>*</code> selector to prevent unintended side effects, such as unintentionally overriding the margin property of an element that you want a different margin set.</Body>
+      <Body>However, an exception will be made if they are solely used to modify the default settings for <code>box-sizing</code>, <code>margin</code> or <code>padding</code>.</Body>
 
       <Example
         lang="css"
         bads={[
 `* {
   background-color: red;
-  margin: 0px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   /* Any style etc. */
 }`
         ]}
+        goods={[
+`* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+`
+        ]}
       />
 
       <HR />

diff --git a/frontend/src/page/Style/StyleHtml.jsx b/frontend/src/page/Style/StyleHtml.jsx
@@ -3,7 +3,11 @@ import React from 'react';
 import makePage from '../../component/makePage';
 
 
-import { Body, H3, H5, HR, Code, Example } from '../../component/StyleComponents';
+import { Body, H3, H5, HR, Code, Example, ExampleImages } from '../../component/StyleComponents';
+import MoodleImg from '../../asset/style/moodle-bg-example.png';
+import ArtImg from '../../asset/style/art-bg-example.png';
+import GuardianImg from '../../asset/style/guardian-img-example.png';
+import EcklesImg from '../../asset/style/eckles-img-example.png';
 
 
 const StyleHtml = ({}) => {
@@ -12,7 +16,7 @@ const StyleHtml = ({}) => {
 
       <H3>📜 1. HTML Style Guide</H3>
 
-      <Body>The assignments in COMP6080 all have a portion of their marks allocated to code style. As such, it is **highly** recommended for students to have a read through this style guide.</Body>
+      <Body>The assignments in COMP6080 all have a portion of their marks allocated to code style. As such, it is <b>highly</b> recommended for students to have a read through this style guide.</Body>
       <Body>This page outlines the conventions we will be following throughout the course. It incorporates guidelines derived from standard style guides plus feedback and inquiries accumulated from previous cohorts.</Body>
       <Body>We follow the <a href="https://www.w3schools.com/html/html5_syntax.asp" target="_blank">W3 schools style guide for HTML</a> as a base. Here are a few notable guidelines that are often asked about or forgotten.</Body>
 
@@ -49,13 +53,13 @@ const StyleHtml = ({}) => {
 </button>`
         ]}
       />
-      <Body>You may use either single (') or double (") quotations as long as you're **consistent** with which you choose. Using double quotation in HTML is more commonly seen in the industry.</Body>
+      <Body>You may use either single (') or double (") quotations as long as you're <b>consistent</b> with which you choose. Using double quotation in HTML is more commonly seen in the industry.</Body>
 
       <HR />
 
       <H5 id="html-indentation">📜 1.2. Indentation</H5>
-      <Body>As long as you are **consistent**, you can use 2 or 4 space indentation. However, as there will be many levels of indentation, you should indent with **2 spaces** in HTML as opposed to the usual 4 spaces.</Body>
-      <Body>Each HTML tag should be indented **with respect to its parent tag**, with the opening and closing tag being on the same level of indentation (unless it is on the same line).</Body>
+      <Body>As long as you are <b>consistent</b>, you can use 2 or 4 space indentation. However, as there will be many levels of indentation, you should indent with <b>2 spaces</b> in HTML as opposed to the usual 4 spaces.</Body>
+      <Body>Each HTML tag should be indented <b>with respect to its parent tag</b>, with the opening and closing tag being on the same level of indentation (unless it is on the same line).</Body>
 
       <Example
         lang="html"
@@ -96,7 +100,7 @@ const StyleHtml = ({}) => {
   <tr>
     <th>Student</th>
     <th>ID</th>
-  </tr> <!-- The closing tag is on the same indentation level as its respeective opening tag -->
+  </tr> <!-- The closing tag is on the same indentation level as its respective opening tag -->
   </thead>
   <tbody>
     <tr>
@@ -149,8 +153,9 @@ const StyleHtml = ({}) => {
       <Code lang="html">
 {`<!DOCTYPE html>
 <html>
-  <title></title>
-  <head></head>
+  <head>
+    <title></title>
+  </head>
   <body></body>
 </html>`}
       </Code>
@@ -229,7 +234,7 @@ const StyleHtml = ({}) => {
       <HR />
 
       <H5 id="html-style">📜 1.6. The Style Attribute</H5>
-      <Body>You should always try and avoid inline/internal styling and keep all CSS styles in a separate <code>.css</code> file - **stick to external styling**. See below under the [CSS section](#css-external-spreadsheet) for reasons why.</Body>
+      <Body>You should always try and avoid inline/internal styling and keep all CSS styles in a separate <code>.css</code> file - <b>stick to external styling</b>. See below under the [CSS section](#css-external-spreadsheet) for reasons why.</Body>
 
       <Example
         lang="html"
@@ -347,11 +352,11 @@ document.getElementById('main-btn').addEventListener('click', changeText);
 }`}
       </Code>
 
-      <Body>While you can interchange <code><img/></code> with another tag styled with <code>background-image</code>, there's a clear distinction between the two.</Body>
+      <Body>While you can interchange <code>{'<img/>'}</code> with another tag styled with <code>background-image</code>, there's a clear distinction between the two.</Body>
 
-      <Body> <code>background-image</code> as the name implies is for setting an image in the **background** (i.e., there could be text or other elements obscuring the image). These are normally reserved for decoration and making the website visually appealing.</Body>
+      <Body> <code>background-image</code> as the name implies is for setting an image in the <b>background</b> (i.e., there could be text or other elements obscuring the image). These are normally reserved for decoration and making the website visually appealing.</Body>
 
-      <Body>On the other hand, a <code><img /></code> tag is for setting an image in the **foreground** and is used for salient images (i.e., nothing is obscuring it and is part of the website flow/layout). These are used for displaying content that is to be consumed by users.</Body>
+      <Body>On the other hand, a <code>{'<img/>'}</code> tag is for setting an image in the <b>foreground</b> and is used for salient images (i.e., nothing is obscuring it and is part of the website flow/layout). These are used for displaying content that is to be consumed by users.</Body>
 
       <Body>Getting these mixed up will impact:
         <ul>
@@ -361,28 +366,20 @@ document.getElementById('main-btn').addEventListener('click', changeText);
         </ul>
       </Body>
 
-      <Example
-        lang="html"
-        title="Examples of when to use the img tag"
-        goods={[
-`<!-- Logos like the top left image on Eckles is part of the website layout and thus should use \`img\` -->
-<img src="./eckles-img-example.png" alt="Eckles Course Website" width="700px"/>`,
-`<!-- Images that are unobscured and is meant to be viewed/consumed by the user should use \`img\` -->
-<img src="./guardian-img-example.png" alt="The Guardian News Website" width="700px"/>`
+      <ExampleImages
+        title="Examples of when to use the image tag"
+        srcArray={[
+          { src: EcklesImg, caption: 'Logos like the top left image on Eckles is part of the website layout and thus should use <img />.'},
+          { src: GuardianImg, caption: 'Images that are unobscured and is meant to be viewed/consumed by the user should use <img />.'},
         ]}
-        medium
       />
 
-      <Example
-        lang="html"
+      <ExampleImages
         title="Examples of when to use the background-image style property"
-        goods={[
-`<!-- UNSW Moodle uses a image of the campus in the **background** and is not part of the website layout. As such, it uses \`background-image\`. -->
-<img src="./moodle-bg-example.png" alt="Moodle Website" width="700px"/>`,
-`<!-- Images that have other elements obscuring it should use \`background-image\`. -->
-<img src="./art-bg-example.png" alt="Art Website" width="700px"/>`
+        srcArray={[
+          { src: MoodleImg, caption: 'UNSW Moodle uses a image of the campus in the background and is not part of the website layout. As such, it uses background-image.'},
+          { src: ArtImg, caption: 'Images that have other elements obscuring it should use background-image.'},
         ]}
-        medium
       />
 
       <HR />