diff options
author | Emruz Hossain <hossainemruz@gmail.com> | 2021-01-02 19:29:38 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-01-02 19:29:38 +0300 |
commit | 73c786b1c22b01f18db46524a785c21576dd0b78 (patch) | |
tree | 2021c85b0b2973236ad1004f08ebcdc920f61f78 /static | |
parent | 7c87605d450d89dddee382369902bc189e87453e (diff) |
Add education section (#168)
* Add education section
* Add education-alt section
* Add translations
Diffstat (limited to 'static')
-rw-r--r-- | static/assets/css/layouts/main.css | 8 | ||||
-rw-r--r-- | static/assets/css/sections/education.css | 158 | ||||
-rw-r--r-- | static/assets/js/main.js | 24 |
3 files changed, 190 insertions, 0 deletions
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..e095394 --- /dev/null +++ b/static/assets/css/sections/education.css @@ -0,0 +1,158 @@ +.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 Alter Template =============*/ +.education-alt .degree-info{ + border-right: 2px solid #248aaa; +} + + +/* ============= 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"; + } +} |