Skip to content
Snippets Groups Projects
Commit 2683493e authored by Sreeram, Sudarshan's avatar Sreeram, Sudarshan :carrot:
Browse files

Update styling of module cards

parent cb260df8
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 390 additions and 25 deletions
frontend/src/assets/images/discrete-illustration.svg 0 → 100644
+ 43
− 0
View file @ 2683493e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="120px" viewBox="0 0 240 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Illustration</title>
<defs>
<rect id="path-1" x="0" y="0" width="240" height="120"></rect>
</defs>
<g id="Modules" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Module-View" transform="translate(-600.000000, -393.000000)">
<g id="Main-Body" transform="translate(330.000000, 94.000000)">
<g id="Course-Tiles" transform="translate(0.000000, 264.000000)">
<g id="Discrete-Mathematics" transform="translate(270.000000, 0.000000)">
<g id="Group" transform="translate(0.000000, 35.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Rectangle" fill="#EDF2FF" xlink:href="#path-1"></use>
<g id="Group-3" mask="url(#mask-2)">
<g transform="translate(18.000000, -8.000000)">
<text id="A" stroke="none" fill="none" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="32" y="82" fill="#5B7CFA">A</tspan>
</text>
<circle id="Oval" stroke="#5B7CFA" stroke-width="1.4" fill="none" transform="translate(54.129729, 75.536072) rotate(27.000000) translate(-54.129729, -75.536072) " cx="54.1297293" cy="75.5360718" r="40"></circle>
<text id="B" stroke="none" fill="none" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="96" y="120" fill="#5B7CFA">B</tspan>
</text>
<text id="C" stroke="none" fill="none" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="102" y="43" fill="#5B7CFA">C</tspan>
</text>
<text id="U" stroke="none" fill="none" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="194" y="33" fill="#5B7CFA">U</tspan>
</text>
<circle id="Oval" stroke="#5B7CFA" stroke-width="1.4" fill="none" transform="translate(102.146555, 53.986491) rotate(27.000000) translate(-102.146555, -53.986491) " cx="102.146555" cy="53.9864908" r="40"></circle>
<circle id="Oval" stroke="#5B7CFA" stroke-width="1.4" fill="none" transform="translate(99.083123, 104.052601) rotate(27.000000) translate(-99.083123, -104.052601) " cx="99.0831226" cy="104.052601" r="40"></circle>
<path d="M92.6003343,64.5804359 C95.1357692,73.47592 94.6103336,83.2663365 90.4710953,92.2499358 C88.2730843,91.5780281 86.1045273,90.7057189 83.9869351,89.6267518 C78.0083417,86.5805063 73.1236371,82.2373626 69.5009033,77.114624 C75.5188013,70.4979896 83.5162485,66.1967397 92.0836506,64.6675024 Z" id="Combined-Shape" stroke="#5B7CFA" stroke-width="1.4" fill="#BAC8FF" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
frontend/src/assets/images/logic-illustration.svg 0 → 100644
+ 70
− 0
View file @ 2683493e
This diff is collapsed.
frontend/src/assets/images/methods-illustration.svg 0 → 100644
+ 50
− 0
View file @ 2683493e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="120px" viewBox="0 0 240 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Illustration</title>
<defs>
<rect id="path-1" x="0" y="0" width="240" height="120"></rect>
</defs>
<g id="Modules" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Module-View" transform="translate(-330.000000, -683.000000)">
<g id="Main-Body" transform="translate(330.000000, 94.000000)">
<g id="Course-Tiles" transform="translate(0.000000, 264.000000)">
<g id="Mathematical-Methods" transform="translate(0.000000, 290.000000)">
<g id="Group" transform="translate(0.000000, 35.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Rectangle" fill="#F3F0FF" xlink:href="#path-1"></use>
<g id="Group-9" mask="url(#mask-2)">
<g transform="translate(19.000000, 7.000000)">
<path d="M61.2499785,74 C55.0624817,74 49.9062344,71.95 46.2968613,68.3625 C42.6874882,64.775 40.6249893,59.65 40.6249893,53.5 L61.2499785,53.5 L61.2499785,74 Z M61.2499785,74 C67.4374753,74 72.5937226,71.95 76.2030957,68.3625 C79.8124688,64.775 81.8750537,59.65 81.8750537,53.5 L61.2499785,53.5 L61.2499785,74 Z M143.750021,74 C137.562525,74 132.406277,71.95 128.796904,68.3625 C125.187531,64.775 123.125032,59.65 123.125032,53.5 L143.750021,53.5 L143.750021,74 Z M143.750021,74 C149.937518,74 155.093766,71.95 158.703139,68.3625 C162.312512,64.775 164.375011,59.65 164.375011,53.5 L143.750021,53.5 L143.750021,74 Z M102.500043,33 C96.3125462,33 91.1562989,35.05 87.5469258,38.6375 C83.9375526,42.225 81.8750537,47.35 81.8750537,53.5 L102.500043,53.5 L102.500043,33 Z M102.500043,33 C108.68754,33 113.843787,35.05 117.45316,38.6375 C121.062533,42.225 123.125032,47.35 123.125032,53.5 L102.500043,53.5 L102.500043,33 Z M20,33 C26.1874968,33 31.3437441,35.05 34.9531172,38.6375 C38.5624903,42.225 40.6249893,47.35 40.6249893,53.5 L20,53.5 L20,33 Z M185,33 C178.812503,33 173.656256,35.05 170.046883,38.6375 C166.43751,42.225 164.375011,47.35 164.375011,53.5 L185,53.5 L185,33 Z" id="Fill-1" stroke="none" fill="#D0BFFF" fill-rule="evenodd"></path>
<path d="M143.750021,74 C149.937518,74 155.093766,71.95 158.703139,68.3625 C162.312512,64.775 164.375011,59.65 164.375011,53.5 M61.2499785,74 C67.4374753,74 72.5937226,71.95 76.2030957,68.3625 C79.8124688,64.775 81.8750537,59.65 81.8750537,53.5 M143.750021,74 C137.562525,74 132.406277,71.95 128.796904,68.3625 C125.187531,64.775 123.125032,59.65 123.125032,53.5 M61.2499785,74 C55.0624817,74 49.9062344,71.95 46.2968613,68.3625 C42.6874882,64.775 40.6249893,59.65 40.6249893,53.5 M102.500043,33 C96.3125462,33 91.1562989,35.05 87.5469258,38.6375 C83.9375526,42.225 81.8750537,47.35 81.8750537,53.5 M102.500043,33 C108.68754,33 113.843787,35.05 117.45316,38.6375 C121.062533,42.225 123.125032,47.35 123.125032,53.5 M20,33 C26.1874968,33 31.3437441,35.05 34.9531172,38.6375 C38.5624903,42.225 40.6249893,47.35 40.6249893,53.5 M185,33 C178.812503,33 173.656256,35.05 170.046883,38.6375 C166.43751,42.225 164.375011,47.35 164.375011,53.5" id="Stroke-2" stroke="#855EF6" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
<polyline id="Stroke-3" stroke="#855EF6" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" points="105 3 102.5 0 100 3"></polyline>
<polyline id="Stroke-4" stroke="#855EF6" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" points="105 103 102.5 106 100 103"></polyline>
<line x1="102.5" y1="0" x2="102.5" y2="106" id="Stroke-5" stroke="#855EF6" stroke-width="1.4" fill="#7950F2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></line>
<polyline id="Stroke-6" stroke="#855EF6" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" points="202 56 205 53.5 202 51"></polyline>
<polyline id="Stroke-7" stroke="#855EF6" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round" points="3 56 0 53.5 3 51"></polyline>
<line x1="205" y1="53.5" x2="0" y2="53.5" id="Stroke-8" stroke="#855EF6" stroke-width="1.4" fill="#7950F2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></line>
</g>
</g>
<text id="y-=-cos(x)" mask="url(#mask-2)" font-family="CMUSerif-BoldItalic, CMU Serif" font-size="9" font-style="italic" font-weight="bold" letter-spacing="-0.216" fill="#855EF6">
<tspan x="140" y="33">y = cos(x)</tspan>
</text>
<text id="y" mask="url(#mask-2)" font-family="CMUSerif-Italic, CMU Serif" font-size="9" font-style="italic" font-weight="normal" letter-spacing="-0.216" fill="#855EF6">
<tspan x="127" y="11">y</tspan>
</text>
<text id="x’" mask="url(#mask-2)" font-family="CMUSerif-Italic, CMU Serif" font-size="9" font-style="italic" font-weight="normal" letter-spacing="-0.216" fill="#855EF6">
<tspan x="18" y="70">x’</tspan>
</text>
<text id="x" mask="url(#mask-2)" font-family="CMUSerif-Italic, CMU Serif" font-size="9" font-style="italic" font-weight="normal" letter-spacing="-0.216" fill="#855EF6">
<tspan x="219" y="70">x</tspan>
</text>
<text id="y’" mask="url(#mask-2)" font-family="CMUSerif-Italic, CMU Serif" font-size="9" font-style="italic" font-weight="normal" letter-spacing="-0.216" fill="#855EF6">
<tspan x="127" y="111">y’</tspan>
</text>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
frontend/src/assets/images/systems-illustration.svg 0 → 100644
+ 58
− 0
View file @ 2683493e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="120px" viewBox="0 0 240 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Illustration</title>
<defs>
<rect id="path-1" x="0" y="0" width="240" height="120"></rect>
</defs>
<g id="Modules" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Module-View" transform="translate(-870.000000, -393.000000)">
<g id="Main-Body" transform="translate(330.000000, 94.000000)">
<g id="Course-Tiles" transform="translate(0.000000, 264.000000)">
<g id="Computer-Systems" transform="translate(540.000000, 0.000000)">
<g id="Group" transform="translate(0.000000, 35.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Rectangle" fill="#E3FAFC" xlink:href="#path-1"></use>
<g id="Group-7" mask="url(#mask-2)">
<g transform="translate(12.000000, 19.000000)">
<text id="A" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="0" y="16" fill="#16AABF">A</tspan>
</text>
<text id="R" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="205" y="31" fill="#16AABF">R</tspan>
</text>
<text id="B" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="0" y="47" fill="#16AABF">B</tspan>
</text>
<text id="C" font-family="CMUClassicalSerif-Italic, CMU Classical Serif" font-size="17" font-style="italic" font-weight="normal" letter-spacing="-0.408">
<tspan x="0" y="78" fill="#16AABF">C</tspan>
</text>
<g id="Group-4" stroke-width="1" fill-rule="evenodd" transform="translate(15.697465, 4.000000)">
<path d="M43.3025352,9 L43.3025352,32.2680362 L63.6685171,32.2680362 C71.4245292,32.2680362 75.3025352,28.3900301 75.3025352,20.6340181 C75.3025352,12.878006 71.4245292,9 63.6685171,9 L43.3025352,9 Z" id="Path-4" stroke="#16AABF" stroke-linejoin="round"></path>
<path d="M137.302535,9 L137.302535,32.2680362 L157.668517,32.2680362 C165.424529,32.2680362 169.302535,28.3900301 169.302535,20.6340181 C169.302535,12.878006 165.424529,9 157.668517,9 L137.302535,9 Z" id="Path-4" stroke="#16AABF" stroke-linejoin="round"></path>
<path d="M85.3025352,44 C89.839311,47.5844382 92.1076988,51.4624442 92.1076988,55.6340181 C92.1076988,59.8055919 89.839311,63.683598 85.3025352,67.2680362 C106.635869,67.2680362 117.302535,63.3900301 117.302535,55.6340181 C117.302535,47.878006 106.635869,44 85.3025352,44 Z" id="Path-4" stroke="#16AABF" stroke-linejoin="round"></path>
<line x1="1.96195215" y1="68" x2="20.3025352" y2="68" id="Path-7" stroke="#16AABF" stroke-linecap="round" stroke-linejoin="round"></line>
<polyline id="Path-8" stroke="#16AABF" stroke-linecap="round" stroke-linejoin="round" points="-5.68439252e-14 37 20.3025352 37 20.3025352 50.8345183 90.9332659 50.8345183"></polyline>
<polyline id="Path-9" stroke="#16AABF" stroke-linecap="round" stroke-linejoin="round" points="42.3025352 68 59.3025352 68 59.3025352 60 90.9332659 60"></polyline>
<circle id="Oval" stroke="#16AABF" cx="39.3025352" cy="68" r="2.5"></circle>
<line x1="117.302535" y1="55.6340181" x2="137.302535" y2="55.6340181" id="Path-10" stroke="#16AABF"></line>
<polyline id="Path-11" stroke="#16AABF" points="0 6 20.3025352 6 20.3025352 16 43.3025352 16"></polyline>
<polyline id="Path-12" stroke="#16AABF" points="20.3025352 37 20.3025352 26 43.3025352 26"></polyline>
<polyline id="Path-13" stroke="#16AABF" stroke-linecap="round" stroke-linejoin="round" points="159.009759 56 169.302535 56 169.302535 39.498186 117.302535 39.498186 117.302535 25.5782606 137.107381 25.5782606"></polyline>
<line x1="75.3025352" y1="20.6340181" x2="137.302535" y2="20.6340181" id="Path-14" stroke="#16AABF"></line>
<polyline id="Path-15" stroke="#16AABF" stroke-linejoin="round" points="20.3025352 6 20.3025352 6.03961325e-14 101.302535 6.03961325e-14 101.302535 16 137.302535 16"></polyline>
<line x1="169.302535" y1="20.6340181" x2="189.189997" y2="20.6340181" id="Path-16" stroke="#16AABF" stroke-linecap="round" stroke-linejoin="round"></line>
<polygon id="Triangle" stroke="#16AABF" stroke-linejoin="round" transform="translate(28.302535, 68.000000) rotate(-270.000000) translate(-28.302535, -68.000000) " points="28.3025352 60 36.3025352 76 20.3025352 76"></polygon>
<polygon id="Triangle" stroke="#16AABF" stroke-linejoin="round" transform="translate(145.302535, 56.000000) rotate(-270.000000) translate(-145.302535, -56.000000) " points="145.302535 48 153.302535 64 137.302535 64"></polygon>
<circle id="Oval" stroke="#16AABF" cx="156.302535" cy="56" r="2.5"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
frontend/src/components/atoms/CalendarCard/style.module.scss
+ 2
− 2
View file @ 2683493e
......@@ -10,7 +10,7 @@ $deadline-background: transparentize($teal-100, 0.5);
color: #000;
border-width: 0px;
width: 100%;
border-radius: 5px !important;
border-radius: 8px !important;
text-align: left;
}
......@@ -63,4 +63,4 @@ $deadline-background: transparentize($teal-100, 0.5);
font-weight: 500;
text-align: left;
border-width: 0px;
}
\ No newline at end of file
}
frontend/src/components/atoms/NavBarTabItem/style.module.scss
+ 1
− 1
View file @ 2683493e
......@@ -3,7 +3,7 @@
@media (min-width: 992px) {
.pageButton {
background: $gray-100;
border-radius: 5px;
border-radius: 8px !important;
font-family: "IBM Plex Sans";
font-size: 18px;
color: $black !important;
......
frontend/src/components/molecules/SideBarTabGroup/style.module.scss
+ 1
− 1
View file @ 2683493e
......@@ -8,7 +8,7 @@
letter-spacing: 0;
border-width: 0px;
height: 40px;
border-radius: 5px !important;
border-radius: 8px !important;
text-align: left;
display: inline-block;
vertical-align: middle;
......
frontend/src/components/pages/ModulePage/index.tsx
+ 90
− 19
View file @ 2683493e
import React, { useEffect } from "react";
// import styles from "./style.module.scss";
// import classNames from "classnames";
import styles from "./style.module.scss";
import Breadcrumb from "react-bootstrap/Breadcrumb";
import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
import CardDeck from "react-bootstrap/CardDeck";
import classNames from "classnames";
import logicIllustration from "assets/images/logic-illustration.svg";
import discreteIllustration from "assets/images/discrete-illustration.svg";
import systemsIllustration from "assets/images/systems-illustration.svg";
import methodsIllustration from "assets/images/methods-illustration.svg";
const ModulePage: React.FC = () => {
// only needed for using holder images, delete when done
// @ts-ignore
useEffect(() => {window.Holder.run()});
return (
<Container className="p-4">
<Breadcrumb>
<Breadcrumb.Item></Breadcrumb.Item>
<Container className={classNames("p-4", styles.moduleContainer)}>
<Breadcrumb className={classNames(styles.breadcrumb)}>
<Breadcrumb.Item active>Modules</Breadcrumb.Item>
<Breadcrumb.Item></Breadcrumb.Item>
</Breadcrumb>
<h1 className="header">Modules</h1>
<h3 className={classNames(styles.moduleHeader)}>Modules</h3>
<hr />
<h3>First Year Undergraduate</h3>
<p>
<h4 className={classNames(styles.moduleSectionHeader)}>
First Year Undergraduate
</h4>
<p className={classNames(styles.moduleParagraph)}>
There are eight core modules, each with their own coursework and written
examination: Introduction to Computer Systems, Introduction to Computer
Architecture, Logic, Reasoning about Programs, Mathematics I, Discrete
Structures, Graphs and Algorithms, Introduction to Databases.
</p>
<Card style={{ width: "200px", marginTop: "50px" }}>
<Card.Img variant="top" src="holder.js/200x100" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>Some quick example text</Card.Text>
</Card.Body>
</Card>
<CardDeck className={classNames(styles.moduleCardDeck)}>
<Card className={classNames(styles.moduleCard)}>
<Card.Header className={classNames(styles.moduleCardHeader)}>
CO140
</Card.Header>
<Card.Img
style={{ borderRadius: 0 }}
variant="top"
src={logicIllustration}
/>
<Card.Body>
<Card.Title>Introduction to Logic</Card.Title>
</Card.Body>
<Card.Footer>
<small className={classNames(styles.moduleCardProgressText)}>
in progress
</small>
</Card.Footer>
</Card>
<Card className={classNames(styles.moduleCard)}>
<Card.Header className={classNames(styles.moduleCardHeader)}>
CO142
</Card.Header>
<Card.Img
style={{ borderRadius: 0 }}
variant="top"
src={discreteIllustration}
/>
<Card.Body>
<Card.Title>Discrete Mathematics</Card.Title>
</Card.Body>
<Card.Footer>
<small className={classNames(styles.moduleCardProgressText)}>
in progress
</small>
</Card.Footer>
</Card>
<Card className={classNames(styles.moduleCard)}>
<Card.Header className={classNames(styles.moduleCardHeader)}>
CO112
</Card.Header>
<Card.Img
style={{ borderRadius: 0 }}
variant="top"
src={systemsIllustration}
/>
<Card.Body>
<Card.Title>Introduction to Computer Systems</Card.Title>
</Card.Body>
<Card.Footer>
<small className={classNames(styles.moduleCardProgressText)}>
in progress
</small>
</Card.Footer>
</Card>
<Card className={classNames(styles.moduleCard)}>
<Card.Header className={classNames(styles.moduleCardHeader)}>
CO145
</Card.Header>
<Card.Img
style={{ borderRadius: 0 }}
variant="top"
src={methodsIllustration}
/>
<Card.Body>
<Card.Title>Mathematical Methods</Card.Title>
</Card.Body>
<Card.Footer>
<small className={classNames(styles.moduleCardProgressText)}>
in progress
</small>
</Card.Footer>
</Card>
</CardDeck>
</Container>
);
};
......
frontend/src/components/pages/ModulePage/style.module.scss
+ 75
− 2
View file @ 2683493e
@import "assets/scss/custom";
.moduleCard {
background: #ffffff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
border-width: 0px;
border-radius: 8px !important;
}
@media (max-width: 992px) {
.moduleCardDeck {
margin-top: 30px;
}
.moduleCard :global(.card-header) {
background: #fff;
border-radius: 8px !important;
border-width: 0px;
color: #000;
font-weight: 500;
text-transform: uppercase;
text-align: right;
padding: 8px;
}
@media (min-width: 992px) {
.moduleCard :global(.card-body) {
padding: 8px;
}
.moduleCard :global(.card-footer) {
border-radius: 8px !important;
background: #fff;
border-width: 0px;
padding: 8px;
}
.breadcrumb,
:global(.breadcrumb) {
background: #fff !important;
text-transform: uppercase;
font-weight: 500;
color: #000;
padding: 0px;
margin-bottom: 30px;
}
.moduleContainer {
padding-top: 30px;
margin-bottom: 72px;
}
.breadcrumb,
:global(.breadcrumb, .active) {
color: #000;
}
.moduleHeader {
}
.moduleCardHeader {
font-weight: 600;
font-size: 18px;
}
.moduleCardProgressText {
text-transform: uppercase;
font-weight: 500;
color: $green-500;
font-size: 16px;
}
.moduleSectionHeader {
margin-top: 30px;
}
.moduleParagraph {
margin-top: 15px;
}
@media (max-width: 992px) {
}
@media (min-width: 992px) {
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment