diff --git a/templates/base.html b/templates/base.html index 8c0300b..27a1500 100644 --- a/templates/base.html +++ b/templates/base.html @@ -14,7 +14,7 @@ - +
diff --git a/templates/degree_components/degree_requirements.html b/templates/degree_components/degree_requirements.html new file mode 100644 index 0000000..829dcbf --- /dev/null +++ b/templates/degree_components/degree_requirements.html @@ -0,0 +1,38 @@ +
+
+

0% planned

+

0/0cp

+
+
+ + +
+
+

Degree core

+

0/96

+
+
+

Major 1

+

0/48

+
+
+

Major 2

+

0/48

+
+
+

Degree requirement

+

0/0

+
+
+
+ + + diff --git a/templates/degree_components/empty_unit.html b/templates/degree_components/empty_unit.html new file mode 100644 index 0000000..5f9a48b --- /dev/null +++ b/templates/degree_components/empty_unit.html @@ -0,0 +1,5 @@ +
+ + search + +
\ No newline at end of file diff --git a/templates/degree_components/semester_plan.html b/templates/degree_components/semester_plan.html new file mode 100644 index 0000000..8bf9237 --- /dev/null +++ b/templates/degree_components/semester_plan.html @@ -0,0 +1,12 @@ +
+

2021

+ +
+

Semester 2

+ + add_box + +
+ + {% include 'degree_components/empty_unit.html' %} +
\ No newline at end of file diff --git a/templates/degree_plan.html b/templates/degree_plan.html index 65c09ef..88001da 100644 --- a/templates/degree_plan.html +++ b/templates/degree_plan.html @@ -3,7 +3,18 @@ {% block main %} {% include 'components/navbar.html' %}
- Degree plan page - +
+
+

Bachelor of Advanced Computing

+ + edit + +
+ {% include 'degree_components/semester_plan.html' %} + {% include 'degree_components/semester_plan.html' %} + {% include 'degree_components/semester_plan.html' %} + {% include 'degree_components/semester_plan.html' %} +
+ {% include 'degree_components/degree_requirements.html' %}
{% endblock %} diff --git a/unitrack/static/global/scss/_degreePlanner.scss b/unitrack/static/global/scss/_degreePlanner.scss new file mode 100644 index 0000000..0a3390f --- /dev/null +++ b/unitrack/static/global/scss/_degreePlanner.scss @@ -0,0 +1,158 @@ +.degreePlan { + display: grid; + align-content: space-evenly; + grid-template-columns: auto; + gap: 25px; + padding: 10px 20px; + height: 100%; + width: 100%; + margin: 10px; + background-color: #F0EEEE; + border-radius: 15px; +} + +.degreePlan > .heading { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.degreePlan > .heading p { + font-size: 20px; + font-weight: 600; +} + +.degreePlan > .heading i { + color: black; + font-size: 35px; + + &:hover { + color: #DD432B; + } +} + +.degreeRequirements { + float: right; + position: sticky; + top: 0; + height: 100%; + padding: 15px 15px; + height: 100%; +} + +.degreeRequirements > .creditRequirements { + box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); + margin-top: 10px; +} + +.degreeRequirements > .creditRequirements p { + padding: 20px; +} + +.creditRequirements > .degreeRequirement { + width: 255px; + height: 48px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.degreeProgress { + width: 255px; + display: table; +} + +.degreeProgress p { + display: table-cell; + width: 100%; // Fill the whole width +} + +// Progress bar styling +progress[value] { + --color: #DD432B; /* the progress color */ + --background: #E5E5E5; /* the background color */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + width: 255px; + height: 9px; + margin-bottom: 5px; + border-radius: 5em; + background: var(--background); +} + +progress[value]::-webkit-progress-bar { + border-radius: 10em; + background: var(--background); +} + +progress[value]::-webkit-progress-value { +border-radius: 10em; +background: var(--color); +} + +progress[value]::-moz-progress-bar { +border-radius: 10em; +background: var(--color); +} + +// Degree unit styling +.degreeUnit { + display: flex; + border-radius: 15px; + background: rgba(255, 255, 255, 1); + flex-direction: column; + width: 150px; + min-width: 130px; + height: 100px; + padding: 10px; + margin-left: 10px; + margin-right: 10px; + margin-bottom: 20px; + box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1); + align-items: center; + justify-content: center; +} + +.degreeUnit i { + color: black; + opacity: 50%; + font-size: 35px; + + &:hover { + color: #DD432B; + opacity: 100%; + } +} + +.semesterRow { + display: flex; + flex-direction: row; + align-items: center; +} + +.semesterPlan > .semesterRow i { + color: black; + font-size: 30px; + margin-left: 10px; + + &:hover { + color: #DD432B; + } +} + +.semesterPlan p { + display: inline; // Prevent new line +} + +.semesterPlan #year { + font-size: 25px; + font-weight: 700; +} + +.semesterPlan #semester { + font-size: 20px; + font-weight: 600; +} \ No newline at end of file diff --git a/unitrack/static/global/scss/global.scss b/unitrack/static/global/scss/global.scss index 830b1de..9b5e13c 100644 --- a/unitrack/static/global/scss/global.scss +++ b/unitrack/static/global/scss/global.scss @@ -24,13 +24,12 @@ button { } .pageContentsContainer { - padding: 10px; + padding: 15px; display: flex; - flex-direction: column; - align-items: flex-start; justify-content: center; height: 100%; + width: 100%; box-sizing: border-box; } -@import "navbar", "signin", "register"; +@import "navbar", "signin", "register", "degreePlanner";