diff --git a/layouts/index.html b/layouts/index.html index 17cab83..72c9e4b 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -19,6 +19,7 @@ + diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html new file mode 100644 index 0000000..9864b89 --- /dev/null +++ b/layouts/partials/sections/education.html @@ -0,0 +1,99 @@ +{{ $sectionID := replace (lower .section.name) " " "-" }} +{{ if .section.id }} +{{ $sectionID = .section.id }} +{{ end }} + +
+ {{ if not (.section.hideTitle) }} +

{{ .section.name }}

+ {{ end }} + +
+ + + {{ range .degrees}} + + + + + + {{ end }} + +
+
+
+ +
+ 		+
+ 		+
+
+
+ {{ if .institution.url }} +
{{ .institution.name }}
+ {{ else }} +
{{ .institution.name }}
+ {{ end }} +
+
{{ .timeframe }}
+
+
{{ .name }}
+ {{ if .grade }} +
{{ .grade.scale }}: {{ .grade.achieved }} out of {{ .grade.outOf }}
+ {{ end }} + {{ if .publications }} +
+
Publications
+ +
+ {{ end }} + {{ if .takenCourses }} +
+
Taken Courses
+ {{ if .takenCourses.showGrades }} + + + + + + + + {{ range $index,$course := .takenCourses.courses }} + + + + + + {{ end }} + +
Course NameTotal CreditObtained Credit
{{ $course.name }}{{ $course.outOf }}{{ $course.achieved }}
+ {{ else }} +
    + {{ range $index,$course := .takenCourses.courses }} +
  • {{ $course.name }}
    • + {{ end }} +
+ {{ end }} + +
+ {{ end }} + {{ if .extracurricularActivities }} +
+
Extracurricular Activities
+
    + {{ range .extracurricularActivities }} +
  • {{ . }}
    • + {{ end }} +
+
+ {{ end }} +
+
+
+
\ No newline at end of file diff --git a/static/assets/css/layouts/main.css b/static/assets/css/layouts/main.css index 248df5a..e733588 100644 --- a/static/assets/css/layouts/main.css +++ b/static/assets/css/layouts/main.css @@ -83,6 +83,14 @@ a:hover { color: #e5e9f2 !important; } +.btn-link{ + color: #248aaa; +} + +.btn-link:hover{ + color: #207089; +} + .bg-white { background-color: #f9fafc !important; } diff --git a/static/assets/css/sections/education.css b/static/assets/css/sections/education.css new file mode 100644 index 0000000..4a223e0 --- /dev/null +++ b/static/assets/css/sections/education.css @@ -0,0 +1,157 @@ +.education-section .education-info-table { + width: 100%; +} + +.education-section .education-info-table tr { + padding: 0.1rem; +} + +.education-section .timeframe { + color: #8392A5; + text-align: right; +} +.education-section .icon { + width: 2rem; + padding-left: 0; + padding-right: 0; + position: relative; +} + +.education-section .icon .hline { + position: absolute; + left: 1rem; + top: 0; + background-color: #248aaa; + height: 100%; + width: 2px; +} + +.education-section .education-info-table tr:first-child .hline { + height: 60%; + top: auto; +} + +.education-section .education-info-table tr:last-child .hline { + height: 50%; +} + +.education-section .icon-holder { + background-color: #248aaa; + border-radius: 50%; + height: 2rem; + width: 2rem; + padding: 0.2rem; + text-align: center; + color: #e5e9f2; + position: relative; +} + +.education-section .line { + width: 5%; + padding-left: 0; + padding-right: 0; +} + +.education-section .line div { + height: 2px; + /* width: 100%; */ + margin-right: -1px; + background-color: #248aaa; +} + +.education-section .degree-info { + padding: 1rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-left: 2px solid #248aaa; + border-top: 1px solid #C0CCDA; + border-bottom: 1px solid #C0CCDA; + border-right: 1px solid #C0CCDA; + border-radius: 5px; +} + +.education-section .degree-info h5{ + margin-bottom: 0.3rem; +} + +.education-section .taken-courses table { + margin-left: 1rem; + width: 100%; + transition: all 0.3s ease-out; +} + +.education-section .taken-courses .hidden-course { + display: none; + transition: all 1s ease-out; +} + +.education-section .taken-courses ul { + margin-bottom: 0; +} + +/* .education-section .taken-courses .show-more-btn { + padding-top: 0; + margin-left: 0.2rem; +} */ + +/* ============= Device specific fixes ======= */ + +/* Large screens such as TV */ + +@media only screen and (min-width: 1824px) {} + +/* Extra large devices (large desktops, 1200px and up) */ + +@media (max-width: 1400px) {} + +@media (max-width: 1200px) {} + +/* IPad Pro */ + +@media (max-width: 1024px) { + .education-section .container { + padding-left: 0; + } +} + +/* Large devices (desktops, 992px and up) */ + +@media (max-width: 992px) {} + +/* Medium devices (tablets, 768px and up) */ + +@media only screen and (max-width: 768px) {} + +/* Small devices (landscape phones, 576px and up) */ + +@media only screen and (max-width: 576px) { + .education-section { + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .education-section .container{ + padding-right: 0; + } + + .education-section .icon { + display: none; + } + .education-section .line{ + display: none; + } + .education-section .timeframe{ + text-align: left; + } +} + +/* iPhoneX, iPhone 6,7,8 */ + +@media only screen and (max-width: 375px) {} + +/* Galaxy S5, Moto G4 */ + +@media only screen and (max-width: 360px) {} + +/* iPhone 5 or before */ + +@media only screen and (max-width: 320px) {} \ No newline at end of file diff --git a/static/assets/js/main.js b/static/assets/js/main.js index 47c0886..4975634 100644 --- a/static/assets/js/main.js +++ b/static/assets/js/main.js @@ -138,3 +138,27 @@ function toggleTOC() { } } +// Show more rows in the taken courses table +function showMoreCourses(elem) { + + // find the courses + let courses = elem.parentNode.getElementsByClassName("course"); + if (courses == null) { + return + } + + // toggle hidden-course class from the third elements + for (var i = 0; i < courses.length; i++) { + if (i > 1 && courses[i].classList !== null) { + courses[i].classList.toggle("hidden-course"); + } + } + + // toggle the button text + let btnText = elem.innerText; + if (btnText == "Show More") { + elem.innerText = "Show Less"; + } else { + elem.innerText = "Show More"; + } +}