diff --git a/frontend/src/asset/style/art-bg-example.png b/frontend/src/asset/style/art-bg-example.png new file mode 100644 index 0000000..238eb57 Binary files /dev/null and b/frontend/src/asset/style/art-bg-example.png differ diff --git a/frontend/src/asset/style/eckles-img-example.png b/frontend/src/asset/style/eckles-img-example.png new file mode 100644 index 0000000..0eec867 Binary files /dev/null and b/frontend/src/asset/style/eckles-img-example.png differ diff --git a/frontend/src/asset/style/eslint-error.png b/frontend/src/asset/style/eslint-error.png new file mode 100644 index 0000000..5c90cc4 Binary files /dev/null and b/frontend/src/asset/style/eslint-error.png differ diff --git a/frontend/src/asset/style/eslint-success.png b/frontend/src/asset/style/eslint-success.png new file mode 100644 index 0000000..bfcdb7f Binary files /dev/null and b/frontend/src/asset/style/eslint-success.png differ diff --git a/frontend/src/asset/style/guardian-img-example.png b/frontend/src/asset/style/guardian-img-example.png new file mode 100644 index 0000000..cfc6133 Binary files /dev/null and b/frontend/src/asset/style/guardian-img-example.png differ diff --git a/frontend/src/asset/style/moodle-bg-example.png b/frontend/src/asset/style/moodle-bg-example.png new file mode 100644 index 0000000..e828e5a Binary files /dev/null and b/frontend/src/asset/style/moodle-bg-example.png differ diff --git a/frontend/src/component/StyleComponents.jsx b/frontend/src/component/StyleComponents.jsx index 979e59e..e97be38 100644 --- 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) => { <> setExpand(!expand)}> - {expand ? '⬇️' : '⬆️'} 💡 Example: + {expand ? '⬇️' : '⬆️'} 💡 {`${(props.title ?? 'Example')}:`} {expand ? ( @@ -68,7 +69,7 @@ export const Example = (props) => { {props.goods && props.goods.map((good, idx) => { return ( <> - 🟢 Good + 🟢 Good {good} ) @@ -79,4 +80,38 @@ export const Example = (props) => { )} ) -} \ No newline at end of file +} + +export const ExampleImages = ({ title, srcArray = [] }) => { + const [expand, setExpand] = React.useState(true); + + return ( + <> + setExpand(!expand)}> + + {expand ? '⬇️' : '⬆️'} 💡 {`${(title ?? 'Example')}:`} + + + {expand ? ( + srcArray.map((asset, idx) => ( + + )) + ) : ( +
...
+ )} + + ) +} + +const CaptionedImage = ({ src, alt, caption }) => ( + + + {caption ?? ''} + +) diff --git a/frontend/src/page/Style/StyleCSS.jsx b/frontend/src/page/Style/StyleCSS.jsx index 7cbb6a3..d7c4415 100644 --- a/frontend/src/page/Style/StyleCSS.jsx +++ b/frontend/src/page/Style/StyleCSS.jsx @@ -84,7 +84,7 @@ const StyleCSS = ({}) => {
🎨 2.2. Indentation
- As long as you're consistent, you may use 2-space or 4-space indentation in CSS files. We increase the indentation level everytime we use an opening brace {'{'} and decrease it when we use a closing brace }. We also go to a new line with each semicolon ;. + As long as you're consistent, you may use 2-space or 4-space indentation in CSS files. We increase the indentation level everytime we use an opening brace {'{'} and decrease it when we use a closing brace {'}'}. We also go to a new line with each semicolon ;. 2.5. Universal Selectors - 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. + 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. + However, an exception will be made if they are solely used to modify the default settings for box-sizing, margin or padding.
diff --git a/frontend/src/page/Style/StyleHtml.jsx b/frontend/src/page/Style/StyleHtml.jsx index fc1bb0e..2dae063 100644 --- 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 = ({}) => {

📜 1. HTML Style Guide

- 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. + 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. 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. We follow the W3 schools style guide for HTML as a base. Here are a few notable guidelines that are often asked about or forgotten. @@ -49,13 +53,13 @@ const StyleHtml = ({}) => { ` ]} /> - 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. + 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.
📜 1.2. Indentation
- 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. - 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). + 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. + 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). { Student ID - + @@ -149,8 +153,9 @@ const StyleHtml = ({}) => { {` - - + + + `} @@ -229,7 +234,7 @@ const StyleHtml = ({}) => {
📜 1.6. The Style Attribute
- You should always try and avoid inline/internal styling and keep all CSS styles in a separate .css file - **stick to external styling**. See below under the [CSS section](#css-external-spreadsheet) for reasons why. + You should always try and avoid inline/internal styling and keep all CSS styles in a separate .css file - stick to external styling. See below under the [CSS section](#css-external-spreadsheet) for reasons why. - While you can interchange with another tag styled with background-image, there's a clear distinction between the two. + While you can interchange {''} with another tag styled with background-image, there's a clear distinction between the two. - background-image 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. + background-image 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. - On the other hand, a 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. + On the other hand, a {''} 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. Getting these mixed up will impact:
    @@ -361,28 +366,20 @@ document.getElementById('main-btn').addEventListener('click', changeText);
- -Eckles Course Website`, -` -The Guardian News Website` + .'}, + { src: GuardianImg, caption: 'Images that are unobscured and is meant to be viewed/consumed by the user should use .'}, ]} - medium /> - -Moodle Website`, -` -Art Website` + 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 />