Compare commits
587 Commits
525203da36
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| fa77a69132 | |||
| fc1523a89c | |||
| 16e19dfa5b | |||
| 7b8ea2d1c4 | |||
| 3616ba9718 | |||
| a97f22bc0c | |||
| 470f83aacd | |||
| 506a878c0e | |||
| 6b86d5bde9 | |||
| 83ebc042f7 | |||
| 46946c2016 | |||
| f8dcd58b04 | |||
| c07b4ba0d5 | |||
| 2b5f3d6b83 | |||
| 47248b74ab | |||
| fb6fed66ba | |||
| 216fc08544 | |||
| 136bbead7e | |||
| 3f9932c078 | |||
| 7ec7c9778f | |||
| 6b09a5aab0 | |||
| 3f47527eca | |||
| e1c0aa6409 | |||
| bc2637efca | |||
| 17779386aa | |||
| 2d6deba89b | |||
| 4038a861fb | |||
| 1db311092b | |||
| 28f9b40f26 | |||
| acfba0ae87 | |||
| 7340726f9b | |||
| 7741634b94 | |||
| 3187943aff | |||
| e9ea1556e8 | |||
| e44a1a67d3 | |||
| 5413e0ffd9 | |||
| 008ab8708f | |||
| 475b9a57d6 | |||
| 41630718e1 | |||
| 468bbbf759 | |||
| d97a7ab16c | |||
| 0288625409 | |||
| 34b53a72b2 | |||
| be9edeee64 | |||
| 5f9cff53fc | |||
| 6b802300ec | |||
| e74a528c04 | |||
| 75307a1f0d | |||
| 7414b2e22e | |||
| 464886fcd0 | |||
| 3485b6ffc5 | |||
| 6ac58515d0 | |||
| 1b49386967 | |||
| 59d577b051 | |||
| 06553b93c3 | |||
| 29d3db5c20 | |||
| d95ceefbea | |||
| ab959bf7f3 | |||
| c5c6222e7f | |||
| a5563a6b6d | |||
| d0f5160bb1 | |||
| 183b3e82f0 | |||
| cb7ba76a7d | |||
| 53c614d813 | |||
| 6edb965eef | |||
| b52e7cfac1 | |||
| 564362fc50 | |||
| 9a7e7df3cf | |||
| 72edc01fd4 | |||
| 481b403aae | |||
| bf5ca9bf82 | |||
| dac4ee2c8e | |||
| a0b767b798 | |||
| 83267e5f86 | |||
| ffd706dba7 | |||
| 0e039e4462 | |||
| 3c137548f9 | |||
| 595c2fd418 | |||
| 0a9705f81b | |||
| 8b741ea223 | |||
| 4a93905830 | |||
| 3f0bd96040 | |||
| 75455bbf4e | |||
| 41ca4834a2 | |||
| a7d9930ed6 | |||
| 1980bd456d | |||
| 85ffb9a4f3 | |||
| 23d799b75b | |||
| 69cfb846b4 | |||
| eb35f8d073 | |||
| 8fe3503f72 | |||
| 35d363af4e | |||
| ec552f2e1a | |||
| 60c4979cff | |||
| 1d75910181 | |||
| e33ee9701a | |||
| 3563ae04c8 | |||
| e0e6c9f8ce | |||
| d82db4e6ca | |||
| f3631cf2d9 | |||
| 64db473d49 | |||
| 8f28915857 | |||
| d56c9609eb | |||
| 61673efc36 | |||
| e2716f1c23 | |||
| 12467d0386 | |||
| 48a024d9a4 | |||
| a4a6de7473 | |||
| 4a3ad336a5 | |||
| 9f7fd92613 | |||
| 72715d9d49 | |||
| 89c35d0506 | |||
| 4551b00c3a | |||
| 3751c079c1 | |||
| 59707596c2 | |||
| 48d9a88181 | |||
| 72eb7ddc59 | |||
| 00d628a532 | |||
| 603e7baf6a | |||
| c6d75b4284 | |||
| 3d1fa03a51 | |||
| 78e50050a4 | |||
| 17f7d10b04 | |||
| 26fd2a9615 | |||
| 2de37ce3bc | |||
| c101e71ead | |||
| 8b9198a631 | |||
| b1fb4bec84 | |||
| a035c58c95 | |||
| e5e1bf3acd | |||
| 806fb1f4bc | |||
| 6db49a2ea9 | |||
| 1b05010c77 | |||
| 3257ab72cc | |||
| c17661458a | |||
| 7640e4cca9 | |||
| d182cda6dc | |||
| 2b9d60f432 | |||
| 5170459186 | |||
| 4addc47565 | |||
| 388e111e9b | |||
| e0f4b9ea69 | |||
| aaa07abe26 | |||
| 0242384887 | |||
| f7492809ac | |||
| 73282a0dac | |||
| 46efc9a422 | |||
| 011f47d102 | |||
| a62a76f5d1 | |||
| 74d46e88f4 | |||
| 0ef4477030 | |||
| 0232a39c25 | |||
| 69d95b2df6 | |||
| b683bb57f0 | |||
| ea5a6eafc3 | |||
| 89a6fd58ee | |||
| fb6e6d38db | |||
| 12e5a4afdb | |||
| e60cdf3a60 | |||
| e79ac3589c | |||
| ac9fb1f467 | |||
| 224627888a | |||
| 719792893f | |||
| 9a6b39a030 | |||
| 36f07e5935 | |||
| d261439d18 | |||
| d7eec30f89 | |||
| bcd5664f26 | |||
| 29b4ca7292 | |||
| fec8a1cf54 | |||
| 2ccb682b2f | |||
| 41a5a5af2e | |||
| 4930070ecb | |||
| 5e91e71d53 | |||
| 07b67de65b | |||
| 35a88af12d | |||
| b927321d9a | |||
| 60a55e60ae | |||
| c1d4234407 | |||
| 123676993a | |||
| abfa25a4d4 | |||
| 77f1b63e35 | |||
| b8d085e12c | |||
| 9a045e60dc | |||
| 732b1a4b6d | |||
| 0999529ffb | |||
| eb99e7aaf6 | |||
| 385b965d44 | |||
| 142961e87f | |||
| 991cdde784 | |||
| b0abcb7022 | |||
| e398b90135 | |||
| 97fb6a82e7 | |||
| 0589e0b579 | |||
| 2eab6281ab | |||
| 9610e52a80 | |||
| 5c9087893d | |||
| c03c32834e | |||
| 9d4f187cab | |||
| b6cd66c6ac | |||
| ececb862c2 | |||
| 0ba43545f1 | |||
| 6cd64953bf | |||
| 91834dfcc7 | |||
| 7ae06d16f6 | |||
| 382822243a | |||
| 6aabae3469 | |||
| dec65e7bf7 | |||
| 4e24d8d695 | |||
| d93059e8c0 | |||
| 3626ead591 | |||
| 1335c4c29b | |||
| 3dbf87f388 | |||
| 86f60c8a95 | |||
| 6f06b14ece | |||
| 5f27d1bf02 | |||
| b3b6b4afea | |||
| acb4e38d79 | |||
| 8f2e9afc36 | |||
| 34eaf19e68 | |||
| 9245e67844 | |||
| 496c3acce0 | |||
| 897e643528 | |||
| c3c374bda1 | |||
| 14a3266b89 | |||
| c61c1e4410 | |||
| 691a199006 | |||
| 9de620afb2 | |||
| 2d3b82a4cf | |||
| 74dd6246ee | |||
| 1c7e3295b6 | |||
| 9cec57f995 | |||
| f25622067f | |||
| 8bfaca8375 | |||
| 342557a4fe | |||
| a9a7d0739e | |||
| c9244c5d78 | |||
| d87eb0db7f | |||
| e78efae8aa | |||
| 70b5d04b26 | |||
| 0dce088842 | |||
| 1739cacd10 | |||
| 400af7ba31 | |||
| 030787e01c | |||
| d4fdd5702b | |||
| c05336900d | |||
| 3643bcba35 | |||
| 299c725c31 | |||
| c45ca38934 | |||
| 8385bd1240 | |||
| 0c3af4c0fd | |||
| 6323f577de | |||
| 35194352f5 | |||
| 10cb3e54d0 | |||
| e49d3d0a01 | |||
| 6936530289 | |||
| 9f39ab0dbd | |||
| 5f1ed149bf | |||
| 691bf67219 | |||
| f9df92fba9 | |||
| 861119c190 | |||
| 8864a74ac4 | |||
| ce9ad7ae88 | |||
| c5324b4683 | |||
| 1fa8c139e8 | |||
| f4012dd6af | |||
| 46240bb702 | |||
| d4c72dcc79 | |||
| cad4a27584 | |||
| bae1307bb4 | |||
| 5f7121892b | |||
| 0b40e1224b | |||
| e0b6790f6d | |||
| c8adb91545 | |||
| 1eb1fce129 | |||
| ce49f11950 | |||
| 2309d6e75f | |||
| bfa5c7310e | |||
| da2e0d2c38 | |||
| bf0244b2fe | |||
| dfeb4a8292 | |||
| 68d445fa0d | |||
| 4ac49450c2 | |||
| 9988e56cbd | |||
| 622310f627 | |||
| c80150b945 | |||
| e9af572102 | |||
| 413ecc1040 | |||
| 7312718822 | |||
| b7af632306 | |||
| faab7b7a0b | |||
| dc291b67f3 | |||
| 232247df8d | |||
| 01b709c14f | |||
| 39e8b6607c | |||
| 83e4c43d7f | |||
| 4a3b899ab0 | |||
| c17daddc44 | |||
| 2e82486eb8 | |||
| 06af9a492e | |||
| a8ac05e460 | |||
| 62db1cf3b5 | |||
| 15d60be16c | |||
| 310610acff | |||
| fac495a7e0 | |||
| 1ca3e78eda | |||
| 7379f26fd3 | |||
| a808da6818 | |||
| e325b9a3bc | |||
| 2f75b0779a | |||
| 1c28a57244 | |||
| bf13bb7131 | |||
| ec2ef3a808 | |||
| 486c2e9dea | |||
| a7bb4f9973 | |||
| a65ad4740c | |||
| 02d463cf00 | |||
| 5b051fc205 | |||
| f0b52f01d4 | |||
| f93d5053fd | |||
| 3820969cc2 | |||
| fa3ab13579 | |||
| 4785ff6283 | |||
| 86ef310892 | |||
| e9a721cfd6 | |||
| 0dcdde0d78 | |||
| 1ed572ac88 | |||
| 8a00d21ff6 | |||
| 3322549ca5 | |||
| 4fbd8329f7 | |||
| 05fbcfad0e | |||
| 11972796a4 | |||
| 09484fa1e5 | |||
| 99799f6e44 | |||
| 670c849c64 | |||
| 88000a824d | |||
| 59e9a4ae2b | |||
| 908ab49d70 | |||
| 7de269b38b | |||
| ca62198d9c | |||
| ab9a2206b8 | |||
| 82fd5a2db8 | |||
| 958f1ec991 | |||
| 9ddc3f7b1e | |||
| dafb43e6ce | |||
| 0aa9c45ed8 | |||
| 84f3cdd8a1 | |||
| d27d791236 | |||
| 9286f52fb2 | |||
| d71e70688f | |||
| 81884f7fec | |||
| ee29257e17 | |||
| 30f5cfd5e4 | |||
| 299fda0696 | |||
| d79b1c023e | |||
| 8eb26ea8b4 | |||
| 2b4dcabfa6 | |||
| 1394112a9b | |||
| f32ce078e1 | |||
| f4a1a757c4 | |||
| b11f58a2b7 | |||
| 6576919ff6 | |||
| a3455a720c | |||
| 3490b97063 | |||
| 48acea45ba | |||
| a7f324f3b2 | |||
| 34032ab681 | |||
| d5926729ad | |||
| e2e58399f5 | |||
| 1184fe0cd1 | |||
| dbcdfc8472 | |||
| 995feecb65 | |||
| ec4ca6e94b | |||
| 66b4d046b5 | |||
| 81c01e29a1 | |||
| c1d3e60f4b | |||
| 46889f20d9 | |||
| dff0550ebd | |||
| 06aba90bca | |||
| 839f32424c | |||
| d087f41e5e | |||
| f2e7042afe | |||
| 5c08acdb46 | |||
| 6d6e028b40 | |||
| 692e06de2d | |||
| 798e6a11ad | |||
| aa3086c23e | |||
| e46883c0f8 | |||
| a9126a355f | |||
| 7080a3a4f3 | |||
| 111d6412d6 | |||
| 60399985b5 | |||
| 8b29b4b425 | |||
| e01aee1612 | |||
| 28036e8fa6 | |||
| 8ca1d90345 | |||
| c795d4fe64 | |||
| b9271f5cb6 | |||
| 620797240d | |||
| 760bf3925a | |||
| 2c8f3d34c8 | |||
| e9bdfd23df | |||
| 74cc4058bd | |||
| f0f18ff843 | |||
| 237b6795c6 | |||
| bf9d065f3b | |||
| a5fe4bd2c8 | |||
| ce261975ca | |||
| ad5a26d5d8 | |||
| d5f51bff1a | |||
| f9008a5b88 | |||
| acb947865b | |||
| 45342b1148 | |||
| f39ddb789d | |||
| b8dd4f0fe6 | |||
| b35a650a11 | |||
| 1d8a2e6f2b | |||
| e5b04c594c | |||
| f7e0a20cf3 | |||
| 54cddb23f1 | |||
| 6b3ba2e5e1 | |||
| fffccc48b6 | |||
| 419a9ed505 | |||
| e739938d64 | |||
| 4d677d866c | |||
| 277da4cc14 | |||
| e11b6a08fd | |||
| 87b721483f | |||
| 7bc8b430be | |||
| be3cb15494 | |||
| 16d09ae658 | |||
| 13487b5d17 | |||
| 09053c34cd | |||
| c3aedce0d1 | |||
| aeb811db4e | |||
| 3d9c9c5b6b | |||
| 3015506dd8 | |||
| fa83a6fc7a | |||
| 3edcfc22bb | |||
| 089c3fb385 | |||
| 346f57c589 | |||
| 1342c10ac8 | |||
| 2912377102 | |||
| 4d20bb39d2 | |||
| 5b2363bae2 | |||
| 79721ef1e5 | |||
| be3a893a93 | |||
| 728dc962cc | |||
| 26a7ac654c | |||
| 06270b7f57 | |||
| 88ea5efba7 | |||
| bc6a785eb3 | |||
| cc0d192db2 | |||
| fb416055b5 | |||
| 7450785c11 | |||
| c4e8f9ae7f | |||
| fa44fd724d | |||
| bcd6e2591f | |||
| 84ecd6c471 | |||
| 3ee215a5b5 | |||
| 8cd8a61d34 | |||
| a610b52c6e | |||
| 363f83ef61 | |||
| 450eaee4f9 | |||
| 00a2213b11 | |||
| a4d53c31ca | |||
| cb0191ead7 | |||
| 1331a49c63 | |||
| c8734933d3 | |||
| 7d7ba23a82 | |||
| 14b96ae5db | |||
| 35617bd0b1 | |||
| 206623060e | |||
| 09b033797c | |||
| 532268295d | |||
| 18271d15a4 | |||
| 020d9fa764 | |||
| 59b793bb1f | |||
| 255547df14 | |||
| e0d0894176 | |||
| c03f332ad3 | |||
| f30449b8ef | |||
| 332b99d3ec | |||
| 63c33b5f17 | |||
| d9938dc94d | |||
| b4ff268b5a | |||
| 84b6e51a40 | |||
| 26878f172e | |||
| e52a5b4d53 | |||
| d683da4ce8 | |||
| b9fe8d640b | |||
| e5c9674186 | |||
| c2a6854ae3 | |||
| 31e4e328fc | |||
| 86678363f9 | |||
| af7edafd35 | |||
| 79794e0030 | |||
| 2320513c9f | |||
| d2378e4f44 | |||
| 08c8f78f1c | |||
| ecf6845890 | |||
| 38d99a617f | |||
| 473f88a940 | |||
| aa20284351 | |||
| 662ea94761 | |||
| c6b0c5682f | |||
| 58dd40bf99 | |||
| 013ba5b9a1 | |||
| 407cdafa47 | |||
| 94dc876345 | |||
| f314daed98 | |||
| a321234a07 | |||
| d80699c918 | |||
| e259b87bf6 | |||
| d65e44450e | |||
| f95de11e35 | |||
| b89d88ffcd | |||
| a6f6ecf6cf | |||
| 0401dfb1a2 | |||
| 3dd1fc3ffa | |||
| b526e92bfc | |||
| 807739cae6 | |||
| 73ae8fe55b | |||
| 1a6b3a630c | |||
| 9e8d128fa5 | |||
| fb9bd2d954 | |||
| b5a86e1abb | |||
| 20ef5dab44 | |||
| f4faed7dc1 | |||
| e924fdb040 | |||
| 14f713c3af | |||
| 092223eccc | |||
| d48f951d6c | |||
| 04ab65043f | |||
| 8538259fa2 | |||
| 0cd25f999f | |||
| a1f2a3ae5f | |||
| 0db819088b | |||
| 6a1e560688 | |||
| 94145349e7 | |||
| 6063458ed4 | |||
| d3d5b157a7 | |||
| 654a924ce9 | |||
| 5c8b9a7a3b | |||
| aa64ae8ba5 | |||
| 2d2a571402 | |||
| 1c60bd4c52 | |||
| 29fee835f4 | |||
| 18a266746b | |||
| 6a674ca24b | |||
| ee797f3b7e | |||
| 26c55d54f6 | |||
| 3e6a6e5266 | |||
| c78cf84753 | |||
| 9c723283ff | |||
| 6f9647e440 | |||
| c5b0297704 | |||
| c88ffb4004 | |||
| 1a2c86d665 | |||
| 78063b0b88 | |||
| 36c6ded695 | |||
| 61d7aa7298 | |||
| ecdf46fd33 | |||
| 9ef9e63297 | |||
| 478b21c8ef | |||
| c74649e16b | |||
| 3f79de36fb | |||
| f373159238 | |||
| 5f971353ec | |||
| a3660527c7 | |||
| 8539f41834 | |||
| bd67feb727 | |||
| 233d1843dc | |||
| 21d73cd346 | |||
| 7e891c1603 | |||
| 019d7cc362 | |||
| 3e9d970f11 | |||
| 34cdcf15cd | |||
| 43c86f43ae | |||
| 1a01c317d7 | |||
| 707af4f01f | |||
| 60e2ecda09 | |||
| ce50ac8cfc | |||
| acb7842913 | |||
| 36a2f2c080 | |||
| cf3d29858c | |||
| 96f021aa38 |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
Scripts/node_modules/
|
||||
1
.python-version
Normal file
1
.python-version
Normal file
@ -0,0 +1 @@
|
||||
3.10.13
|
||||
7
Assorted_Notes/Ninjacat.md
Normal file
7
Assorted_Notes/Ninjacat.md
Normal file
@ -0,0 +1,7 @@
|
||||
# NinjaCat
|
||||
|
||||
## 12/18/2023
|
||||
|
||||
ChurnZero deal but having disco calls with CS AE/CAMs?
|
||||
Gio Demaio joining as AE/CAM
|
||||
|
||||
23
Assorted_Notes/Pulse2024.md
Normal file
23
Assorted_Notes/Pulse2024.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Notes on Offiste + Pulse 2024
|
||||
|
||||
## Offsite
|
||||
|
||||
*CSM/Project Manager Role*
|
||||
* Example from CS CSM:
|
||||
* GS: "We just had a meeting and showed them the risk management framework! They will start using it."
|
||||
* 2 months later
|
||||
* Client: "Yeah we never implemented it."
|
||||
* CS is facing similarity to other products trying to self-serve.
|
||||
|
||||
## Future of CS
|
||||
* Most popular selection was 1 CSM and 1 CSSC
|
||||
|
||||
What do we know works?
|
||||
* Missed that slide
|
||||
|
||||
We need to decouple CS from the other Emerging Products. Right now, CS is the focal point and "leader" for the multi-product customer. How can we change that so the appropriate product is the leader?
|
||||
|
||||
Scorecards for CE Data. Community first-pass MVP Example:
|
||||
* Number of contacts that have registered for Community
|
||||
* Number of Questions or Articles they have generated
|
||||
* Number of Product Ideas that they are submitting on behalf of that client.
|
||||
6
Assorted_Notes/incorrect_renewaldates_gong.md
Normal file
6
Assorted_Notes/incorrect_renewaldates_gong.md
Normal file
@ -0,0 +1,6 @@
|
||||
# Incorrect Dates in Gong Renewals
|
||||
| Company | Gong Renewal | Actual Renewal | Submitted to Gong Feedback? |
|
||||
|---------------- | --------------- | --------------- | ------------------ |
|
||||
| Walmart | 1/1/2026 | 4/07/25 | Yes, 09/01/2023 |
|
||||
| | | |
|
||||
|
||||
BIN
Custom_Templates/.DS_Store
vendored
BIN
Custom_Templates/.DS_Store
vendored
Binary file not shown.
BIN
Custom_Templates/.churned_customers/.DS_Store
vendored
Normal file
BIN
Custom_Templates/.churned_customers/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,61 @@
|
||||
{% if training_session.approved? %}
|
||||
<div class="np-training-session-cta-note">
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% t .registered %}
|
||||
</div>
|
||||
{% elsif training_session.pending? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .pending %}
|
||||
</div>
|
||||
{% elsif training_session.denied? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .denied %}
|
||||
</div>
|
||||
{% elsif training_session.too_late? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .too_late %}
|
||||
</div>
|
||||
{% elsif training_session.no_seats? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .no_seats %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
{% if training_session.session_url != "" %}
|
||||
<a href={{ training_session.session_url }}>
|
||||
<button class="np-top-button np-button np-button-big ">
|
||||
Register
|
||||
</button>
|
||||
{% else %}
|
||||
<form
|
||||
action="{% route training_session_registration, id: training_session.id %}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.internal? and training_session.approved? %}
|
||||
{% if features.training_events_google_calendar? %}
|
||||
{% include "training_session_calendars" %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.not_registered? %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,120 @@
|
||||
{% comment %}
|
||||
For this widget to work you must import Slick CSS and JS
|
||||
{% endcomment %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-card-content-achievements">
|
||||
<div class="achievements-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div>
|
||||
<div class="np-card-content-title col-12">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="col-12 ">
|
||||
<img class="np-achievement-icon" src="{{ course.properties.course_badge }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="#" class="np-view-all-achievements">View All</a>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
$('.achivements-carousel').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 5000,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
responsive: [{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
|
||||
dots: false
|
||||
}
|
||||
}]
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.achievements-carousel{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .np-card-content-title {
|
||||
font-size: 0.937rem;
|
||||
text-align:center;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-achievement-icon {
|
||||
color: #bec2c6;
|
||||
margin:14px auto 26px;
|
||||
width:130px;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .slick-slider {
|
||||
width:100%;
|
||||
max-width: 375px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.np-view-all-achievements {
|
||||
color:#2BB24C;
|
||||
font-size:0.75rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
.np-card-content-achievements {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem .5rem;
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0.5;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.slick-arrow.fa-chevron-left { left:0 }
|
||||
.slick-arrow.fa-chevron-right { right:0; }
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.np-card-content-achievements .slick-slider {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">My Points</div>
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border" style="text-align: center;">
|
||||
<h1 class="user-point-num" style="margin-bottom: 1rem;">{{ current_person.properties.learner_points }}</h1>
|
||||
<h3 class="user-point-label" style="margin-top: 1rem;">Points</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign courseCompletedCouter = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign courseCompletedCouter = courseCompletedCouter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="achievements-box" style="{% if courseCompletedCouter > 0%}display: block !important;{% endif %}">
|
||||
<div class="np-dashboard-resources-title">Recent Achievements</div>
|
||||
{% include "widget_achievements" %}
|
||||
</div>
|
||||
|
||||
{% if features.training_events? %}
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.achievements-box{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
.user-point-num{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.user-point-label{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
{% assign cat_name = "" %}
|
||||
{% assign cat_class = "" %}
|
||||
{% for category in course.categories limit: 1 %}
|
||||
{% unless category.name contains "Focus-" or category.name contains "Production Applications-" or category.name contains "Materials-" or category.name contains "Cleaning Methods-" %}
|
||||
{% assign cat_name = category.name %}
|
||||
{% assign cat_class = cat_name | replace: " ", "-" | downcase | replace: "&", "and" %}
|
||||
{% endunless % %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-card course-card">
|
||||
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div style="position: relative;">
|
||||
<div class="course-category {{cat_class}}">
|
||||
<span>{{ cat_name }}</span>
|
||||
</div>
|
||||
<div class="course-image-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% unless course.instructor_names == "" %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
{% endunless %}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i>
|
||||
<span>completed</span>
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
<i class="fas fa-spinner"></i>
|
||||
<span>{% t shared.progress, count: course.progress %}</span>
|
||||
{% else %}
|
||||
<i class="not-started-circle"></i>
|
||||
<span>{% t shared.progress, count: course.progress %}</span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% capture course_path %}
|
||||
{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button" href="{{ course_path }}">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% elsif course.progress == 100 %}
|
||||
Retake
|
||||
{% else %}
|
||||
Start
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,84 @@
|
||||
<div class="np-card np-no-horizontal-padding learning-path-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="learning-path-image-container">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
{% comment %} <div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
{% comment %} <div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% if learning_path.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
<i class="fas fa-spinner"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% else %}
|
||||
<i class="not-started-circle"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%; {% if learning_path.progress == 100 %}background-color: #16C466;{% endif %}"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% if learning_path.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
<i class="fas fa-spinner"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% else %}
|
||||
<i class="not-started-circle"></i> <span>{% t shared.progress, count: learning_path.progress %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
Continue
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.84375 0.9375H2.53125C2.98828 0.9375 3.375 1.32422 3.375 1.78125V3.46875C3.375 3.96094 2.98828 4.3125 2.53125 4.3125V7.40625H4.5C4.5 6.94922 4.85156 6.5625 5.34375 6.5625H7.03125C7.48828 6.5625 7.875 6.94922 7.875 7.40625V9.09375C7.875 9.58594 7.48828 9.9375 7.03125 9.9375H5.34375C4.85156 9.9375 4.5 9.58594 4.5 9.09375H2.53125V12.75C2.53125 12.9258 2.63672 13.0312 2.8125 13.0312H4.5C4.5 12.5742 4.85156 12.1875 5.34375 12.1875H7.03125C7.48828 12.1875 7.875 12.5742 7.875 13.0312V14.7188C7.875 15.2109 7.48828 15.5625 7.03125 15.5625H5.34375C4.85156 15.5625 4.5 15.2109 4.5 14.7188H2.8125C1.72266 14.7188 0.84375 13.8398 0.84375 12.75V8.25V4.3125C0.351562 4.3125 0 3.96094 0 3.46875V1.78125C0 1.32422 0.351562 0.9375 0.84375 0.9375ZM5.625 2.625C5.625 2.16797 5.97656 1.78125 6.46875 1.78125H17.1562C17.6133 1.78125 18 2.16797 18 2.625C18 3.11719 17.6133 3.46875 17.1562 3.46875H6.46875C5.97656 3.46875 5.625 3.11719 5.625 2.625ZM10.125 8.25C10.125 7.79297 10.4766 7.40625 10.9688 7.40625H17.1562C17.6133 7.40625 18 7.79297 18 8.25C18 8.74219 17.6133 9.09375 17.1562 9.09375H10.9688C10.4766 9.09375 10.125 8.74219 10.125 8.25ZM10.125 13.875C10.125 13.418 10.4766 13.0312 10.9688 13.0312H17.1562C17.6133 13.0312 18 13.418 18 13.875C18 14.3672 17.6133 14.7188 17.1562 14.7188H10.9688C10.4766 14.7188 10.125 14.3672 10.125 13.875Z" fill="#185A7D"/>
|
||||
</svg>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} Courses
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<div class="np-card previous-event-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ course.properties.previous_event_date_and_time}}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-button" href="{{ course_path }}">
|
||||
Watch
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,42 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% assign enrolled_courses_alphabetical = courses.enrolled | sort: "name" %}
|
||||
{% for course in enrolled_courses_alphabetical %}
|
||||
|
||||
{% assign course_progress = "" %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign course_progress = "completed" %}
|
||||
{% elsif course.progress < 100 and course.progress > 0 %}
|
||||
{% assign course_progress = "in-progress" %}
|
||||
{% else %}
|
||||
{% assign course_progress = "not-started" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign cat_name = "" %}
|
||||
{% for category in course.categories limit: 1 %}
|
||||
{% assign cat_name = category.name %}
|
||||
{% endfor %}
|
||||
<div class="{{ class }}" data-progress="{{course_progress}}" data-category="{{cat_name}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-card.course-card {
|
||||
padding: 0 0 100px;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
<footer class="np-footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-title">Brighton Science Service and Support</div>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://customer.brighton-science.com/myinstruments"
|
||||
target="_blank">
|
||||
<span>
|
||||
Instrument Records and Support
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://customer.brighton-science.com/knowledge"
|
||||
target="_blank">
|
||||
<span>
|
||||
Knowledge Base
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://store.brighton-science.com"
|
||||
target="_blank">
|
||||
<span>
|
||||
Instrument Parts and Service
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
<a
|
||||
class="footer-item"
|
||||
href="https://app.brighton-science.com/experiments/list"
|
||||
target="_blank">
|
||||
<span>
|
||||
BConnect
|
||||
</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="1em"
|
||||
viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 373px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
width: 85%;
|
||||
border-top: 6px solid #185A7D;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
color: #185A7D;
|
||||
font-family: Helvetica Neue;
|
||||
font-size: 34px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-item {
|
||||
color: #0077B8;
|
||||
font-size: 19px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 49px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-item:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.footer-item svg {
|
||||
margin-left: 10px;
|
||||
fill: #0077B8;
|
||||
}
|
||||
|
||||
.footer-item:hover svg {
|
||||
fill: #185A7D;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
||||
@ -0,0 +1,309 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}" />
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
<div class="logo-text">Brighton Academy</div>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Dashboard" %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="{% if link.label == 'Catalog' %}/app/courses{% else %}{{ link.url }}{% endif %}" class="np-header-desktop-nav-link np-header-font-color {{ link.active_class }}">
|
||||
{% if link.label == "Home" %}
|
||||
Dashboard
|
||||
{% elsif link.label == "Catalog" %}
|
||||
Courses
|
||||
{% elsif link.label == "Events" %}
|
||||
Upcoming Events
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form
|
||||
action="{% route search %}"
|
||||
method="get"
|
||||
data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}" />
|
||||
<i class="np-header-search-icon far fa-search np-header-font-color"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside>
|
||||
<div>
|
||||
<span class="welcome-text">Welcome back,</span><br>
|
||||
<strong class="person-name-text">
|
||||
{% if current_person.first_name %}
|
||||
{{ current_person.first_name }}{% endif %}
|
||||
{% if current_person.last_name %}
|
||||
{{ current_person.last_name }}{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<svg
|
||||
style="margin-left: 13px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="9"
|
||||
viewBox="0 0 21 13"
|
||||
fill="none">
|
||||
<path
|
||||
d="M1.0376 1.23193L10.5188 10.7129L20 1.23193"
|
||||
stroke="#0077B8"
|
||||
stroke-width="2" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<div>
|
||||
<span class="welcome-text">Welcome back,</span><br>
|
||||
<strong class="person-name-text">
|
||||
{% if current_person.first_name %}
|
||||
{{ current_person.first_name }}{% endif %}
|
||||
{% if current_person.last_name %}
|
||||
{{ current_person.last_name }}{% endif %}
|
||||
</strong>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="/app/profile">
|
||||
Your Profile
|
||||
</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
||||
{% t.sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}">
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}" />
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<a href="{{ link.url }}" class="np-header-mobile-menu-content-button {{ link.active_class }}">
|
||||
{% if link.label == "Home" %}
|
||||
Dashboard
|
||||
{% elsif link.label == "Events" %}
|
||||
Upcoming Events
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a class="np-header-mobile-menu-content-button" href="/app/profile">
|
||||
Your Profile
|
||||
</a>
|
||||
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
||||
{% t.sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-header-logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-header-logo img {
|
||||
border-right: 1px solid #707070;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.np-header-logo .logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.4px;
|
||||
margin-left: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-inactive {
|
||||
color: #0077B8;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-active {
|
||||
color: #185A7D!important;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
border-bottom: 1px solid #185A7D;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid #185A7D;
|
||||
padding: 0 4%;
|
||||
}
|
||||
|
||||
.np-header-avatar-button {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.np-header-avatar-button i {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color: #0077B8;
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
color: #185A7D;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.person-name-text {
|
||||
color: #185A7D;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border: 1px solid #F0F0F0;
|
||||
background: #fff;
|
||||
box-shadow: 2px 1px 1.5px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip > div {
|
||||
padding-left: 20px;
|
||||
padding-top: 10px
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link {
|
||||
color: #0077B8;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.np-header {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.np-header-logo .logo-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
<div class="progress-activity-section-container">
|
||||
<div class="np-main np-dashboard np-subpage-container np-max-width progress-activity-section">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="dashboard-title">YOUR PROGRESS</div>
|
||||
{% include "section_progress_widget" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{% include "section_recent_activity", enrolled_courses: enrolled_courses, enrolled_learning_paths: enrolled_learning_paths %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress-activity-section-container {
|
||||
margin-bottom: 6px;
|
||||
box-shadow: 0px 3px 2.5px 0px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
.progress-activity-section-container,
|
||||
.progress-activity-section {
|
||||
background-color: #f7fbfe;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.progress-activity-section {
|
||||
padding: 42px 60px 54px 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
<div class="np-learning-paths-resources row">
|
||||
{% if learning_paths.available.any? %}
|
||||
{% for learning_path in items %}
|
||||
|
||||
{% assign learning_path_progress = "" %}
|
||||
{% if learning_path.progress == 100 %}
|
||||
{% assign learning_path_progress = "completed" %}
|
||||
{% elsif learning_path.progress < 100 and learning_path.progress > 0 %}
|
||||
{% assign learning_path_progress = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign cat_name = "" %}
|
||||
{% for category in learning_path.categories limit: 1 %}
|
||||
{% assign cat_name = category.name %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="col-xs-12 col-md-6 lp-column" data-progress="{{learning_path_progress}}" data-category="{{cat_name}}">
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
{% assign radius = 93 %}
|
||||
{% assign pi = 3.14159 %}
|
||||
{% assign circumference = radius | times: 2 | times: pi %}
|
||||
{% assign progress = count | times: 1.0 | divided_by: total %}
|
||||
{% assign offset = 1 | minus: progress | times: circumference %}
|
||||
|
||||
{% assign circle_background_color = '#e5e9eb' %}
|
||||
{% assign progress_number_color = '#1b3e4f' %}
|
||||
|
||||
<div class="progress-circle-wrapper">
|
||||
<svg
|
||||
class="progress-circle"
|
||||
width="212"
|
||||
height="212">
|
||||
<circle
|
||||
class="circle circle-bg"
|
||||
stroke="#6FCFEB"
|
||||
stroke-width="17"
|
||||
fill="transparent"
|
||||
r="{{ radius }}"
|
||||
cx="106"
|
||||
cy="106"
|
||||
/>
|
||||
<circle
|
||||
class="circle"
|
||||
stroke="#185A7D"
|
||||
stroke-width="17"
|
||||
fill="transparent"
|
||||
r="{{ radius }}"
|
||||
cx="106"
|
||||
cy="106"
|
||||
stroke-dasharray="{{ circumference }} {{ circumference }}"
|
||||
stroke-dashoffset="{{ offset }}"
|
||||
style='transform: rotate(-90deg);transform-origin: 50% 50%;'
|
||||
/>
|
||||
<text class='dt' x="50%" y="60%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ progress_number_color }}" dy=".3em">
|
||||
<tspan x="50%" dy="0em" class="progress-circle-big-text">{{count}}</tspan>
|
||||
<tspan x="50%" dy="1.4em" class="progress-circle-text">of {{ total }}</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
@ -0,0 +1,168 @@
|
||||
<div class="row lps-row">
|
||||
{% assign displayed_learning_paths_count = 0 %}
|
||||
<div class="col-xs-12">
|
||||
<div class="flex-wrapper">
|
||||
<div class="dashboard-title">LEARNING PATHS: NEW AND IN PROGRESS</div>
|
||||
<div class="learning-paths-link">
|
||||
<a href="/app/learning_paths?category=completed">View completed Learning Paths</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if learning_paths.enrolled.any? %}
|
||||
{% assign learning_paths_by_progress = learning_paths.enrolled | sort: "progress" | reverse %}
|
||||
{% assign learning_paths_index = 1 %}
|
||||
|
||||
{% for learning_path in learning_paths_by_progress %}
|
||||
{% if learning_path.progress < 100 and learning_paths_index < 3 %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% assign learning_paths_index = learning_paths_index | plus: 1 %}
|
||||
{% assign displayed_learning_paths_count = displayed_learning_paths_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if displayed_learning_paths_count == 0 %}
|
||||
<div class="learning-paths-completed-card np-card">
|
||||
<div>
|
||||
<div class="flex-wrapper">
|
||||
<div class="completion-icon">
|
||||
<svg
|
||||
width="102"
|
||||
height="103"
|
||||
viewBox="0 0 102 103"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M48.4102 68.4844C46.2188 70.6758 42.832 70.6758 40.6406 68.4844L27.8906 55.7344C25.6992 53.543 25.6992 50.1562 27.8906 47.9648C30.082 45.7734 33.4688 45.7734 35.6602 47.9648L44.625 56.7305L66.1406 35.2148C68.332 33.0234 71.7188 33.0234 73.9102 35.2148C76.1016 37.4062 76.1016 40.793 73.9102 42.9844L48.4102 68.4844ZM102 51.75C102 80.0391 79.0898 102.75 51 102.75C22.7109 102.75 0 80.0391 0 51.75C0 23.6602 22.7109 0.75 51 0.75C79.0898 0.75 102 23.6602 102 51.75ZM51 10.3125C28.0898 10.3125 9.5625 29.0391 9.5625 51.75C9.5625 74.6602 28.0898 93.1875 51 93.1875C73.7109 93.1875 92.4375 74.6602 92.4375 51.75C92.4375 29.0391 73.7109 10.3125 51 10.3125Z" fill="#16C466" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class='completion-title-message'>Congratulations, you've completed all your assigned Learning Paths!</div>
|
||||
<div class="completion-subtitle-message">When new learning paths become available we'll send an email announcing it and they'll always appear here.<br>For now you can
|
||||
<a href="/app/courses">browse your courses</a>,
|
||||
<a href="/app/courses">watch previous events</a>, and sign-up for any
|
||||
<a href="/app/training_events">upcoming events</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.learning-paths-link {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t.empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.completion-title-message {
|
||||
color: #000;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.completion-subtitle-message a {
|
||||
color: #0077B8;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.completion-subtitle-message {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.completion-icon {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.learning-paths-link {
|
||||
margin-bottom: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.learning-paths-link a {
|
||||
color: #0077B8;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.learning-paths-link a:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.learning-path-card.np-card {
|
||||
height: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card.np-card {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 150px !important;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .np-card-container {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .learning-paths-completed-heading {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
|
||||
.lps-row .flex-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lps-row .learning-paths-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .flex-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.learning-paths-completed-card .np-card-container {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// hide title and link if no laernings paths to display
|
||||
$(document).ready(function() {
|
||||
const displayedLps = {{displayed_learning_paths_count}}
|
||||
|
||||
if (displayedLps == 0) {
|
||||
$(".lps-row .dashboard-title").hide()
|
||||
$(".learning-paths-link").hide()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,67 @@
|
||||
<div class="previous-events">
|
||||
<div class="dashboard-title">WATCH PREVIOUS EVENTS</div>
|
||||
<div class="previous-events-widget">
|
||||
<div class="row">
|
||||
{% assign index = 0 %}
|
||||
|
||||
{% for course in enrolled_courses %}
|
||||
{% assign is_event_course = false %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name contains "webinars" or cat_name contains "events" %}
|
||||
{% assign is_event_course = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if course.properties.previous_event_display_on_dashboard and index < 2 and is_event_course %}
|
||||
<div class="col-xs-12 col-sm-6 previous-event" data-date="{{course.properties.course_publish_date}}">
|
||||
{% include "cards_previous_event" with course %}
|
||||
</div>
|
||||
{% assign index = index | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var eventIndexes = document.querySelectorAll(".previous-event:not([data-date=''])");
|
||||
var eventIndexesArray = Array.from(eventIndexes);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.previous-event-card .np-card-content-title {
|
||||
color: #0077B8;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.previous-event-card .np-button {
|
||||
background-color: #0077B8;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-container:hover .np-card-content-title {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-container:hover .np-button {
|
||||
background-color: #185A7D;;
|
||||
}
|
||||
|
||||
.previous-event-card .course-image-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-container:hover .np-card-image {
|
||||
scale: 1.25;
|
||||
transition: .5s ease all;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<div class="progress-widget">
|
||||
<div class="progress-widget-flex-wrapper">
|
||||
<div class="progress-item courses-progress">
|
||||
{% assign completed_courses_count = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign completed_courses_count = completed_courses_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="progress-header">Courses Completed</div>
|
||||
<a href="/app/courses?category=not-started" class="progress-link">View Courses not started</a>
|
||||
{%
|
||||
include "progress_circle",
|
||||
count: completed_courses_count,
|
||||
total: courses.enrolled.size %}
|
||||
</div>
|
||||
<div class="progress-item courses-progress">
|
||||
{% assign completed_lps_count = 0 %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.progress == 100 %}
|
||||
{% assign completed_lps_count = completed_lps_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="progress-header">Learning Paths Completed</div>
|
||||
<a href="/app/learning_paths?category=completed" class="progress-link">View all Learning Paths</a>
|
||||
{%
|
||||
include "progress_circle",
|
||||
count: completed_lps_count,
|
||||
total: learning_paths.enrolled.size %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.progress-widget {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.progress-widget .progress-item {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.progress-widget .progress-header {
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.progress-circle-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-circle-wrapper:before {
|
||||
content: "";
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 195px;
|
||||
height: 195px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-widget .progress-link {
|
||||
color: #0077B8;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
margin-bottom: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress-widget .progress-link:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.progress-circle-big-text {
|
||||
color: #002745;
|
||||
font-size: 80px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.progress-circle-text {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@media(min-width:500px) {
|
||||
.progress-widget .progress-widget-flex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.progress-widget .progress-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1200px) {
|
||||
.progress-widget .progress-widget-flex-wrapper {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
{% assign courses_by_progress = enrolled_courses | sort: "progress" %}
|
||||
{% assign learning_paths_by_progress = enrolled_learning_paths | sort: "progress" %}
|
||||
|
||||
<div class="dashboard-title">RECENT ACTIVITY</div>
|
||||
<div class="recent-activity-widget">
|
||||
<table class="recent-activity-table" id='recentActivityTable'>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
{% for course in courses_by_progress %}
|
||||
{% if course.progress > 0 %}
|
||||
<tr data-progress="{{course.progress}}">
|
||||
<td width="70%" class="name-element"><a href="{% route course, id: course.id %}">{{course.name}}</a></td>
|
||||
<td width="30%" class="progress-element">
|
||||
<div>
|
||||
{% if course.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% else %}
|
||||
<i class="fas fa-spinner"></i> <span>in progress</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths_by_progress %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
<tr data-progress="{{learning_path.progress}}">
|
||||
<td width="70%"><a class="name-element" href="{% route learning_path, id: learning_path.id %}">{{learning_path.name}}</a></td>
|
||||
<td width="30%" class="progress-element">
|
||||
<div>
|
||||
{% if learning_path.progress == 100 %}
|
||||
<i class="far fa-check-circle"></i> <span>completed</span>
|
||||
{% else %}
|
||||
<i class="fas fa-spinner"></i> <span>in progress</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress-element div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-element span {
|
||||
margin-left: 9px;
|
||||
color: #000;
|
||||
text-align: right;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recent-activity-table th {
|
||||
color: #FFF;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
padding: 6px 0 6px 12px;
|
||||
}
|
||||
|
||||
.recent-activity-widget {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.recent-activity-widget table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
box-shadow: 0px 3px 2.5px 0px rgba(0, 0, 0, 0.42);
|
||||
background-color:#fff;
|
||||
border-bottom: 2px solid #185A7D;
|
||||
}
|
||||
|
||||
.progress-element {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.name-element {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.recent-activity-widget td {
|
||||
border: 1px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #185A7D;
|
||||
}
|
||||
|
||||
.recent-activity-widget th {
|
||||
color:#fff;
|
||||
border-color: #185A7D;
|
||||
background-color: #185A7D;
|
||||
}
|
||||
|
||||
.name-element a,
|
||||
.name-element a:visited {
|
||||
color: #0077B8;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.name-element a:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
const table = document.getElementById('recentActivityTable');
|
||||
const tbody = table.querySelector('tbody'); // Select the tbody element
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
|
||||
const sortedRows = rows
|
||||
.map(row => ({ progress: parseInt(row.getAttribute('data-progress')), element: row }))
|
||||
.sort((a, b) => a.progress - b.progress);
|
||||
|
||||
rows.forEach(row => tbody.removeChild(row));
|
||||
|
||||
sortedRows.forEach((sortedRow, index) => {
|
||||
if (index < 6) {
|
||||
tbody.appendChild(sortedRow.element)
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="row recent-courses-row">
|
||||
<div class="col-xs-12">
|
||||
<div class="recent-courses-flex-wrapper">
|
||||
<div>
|
||||
<div class="dashboard-title">COURSES: RECENTLY ADDED</div>
|
||||
<div class="dashboard-subtitle">See what's new from Brighton Science</div>
|
||||
</div>
|
||||
<div class="recent-courses-link">
|
||||
<a href="/app/courses" class="recent-courses-link">View all Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="row recent-courses-list">
|
||||
{% for course in enrolled_courses %}
|
||||
{% unless course.properties.course_publish_date == "MM/DD/YYYY" %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 recent-course np-hidden" data-date="{{course.properties.course_publish_date}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var indexes = document.querySelectorAll(".recent-course:not([data-date=''])");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByDate = arr => {
|
||||
const dateSorter = (a, b) => {
|
||||
return new Date(b.dataset.date).getTime() - new Date(a.dataset.date).getTime();
|
||||
}
|
||||
arr.sort(dateSorter);
|
||||
};
|
||||
|
||||
sortByDate(indexesArray);
|
||||
|
||||
$(".recent-courses-list").empty()
|
||||
|
||||
for (let i = 0; i < indexesArray.length; i++) {
|
||||
if (i < 4) {
|
||||
document.querySelector(".recent-courses-list").appendChild(indexesArray[i])
|
||||
}
|
||||
}
|
||||
|
||||
$(".recent-course").removeClass("np-hidden")
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.recent-courses-flex-wrapper {
|
||||
margin:32px 0;
|
||||
}
|
||||
|
||||
.recent-courses.link {
|
||||
margin-bottom: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.recent-courses-flex-wrapper .dashboard-title {
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.recent-courses-flex-wrapper {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:flex-end;
|
||||
margin:64px 0 32px ;
|
||||
}
|
||||
|
||||
.recent-courses-row .np-card {
|
||||
padding: 0 0 32px;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,206 @@
|
||||
<div class="row recommended-courses-row">
|
||||
<div class="col-xs-12">
|
||||
<div class="recommended-courses-flex-wrapper">
|
||||
<div>
|
||||
<div class="dashboard-title">COURSES: RECOMMENDED</div>
|
||||
<div class="dashboard-subtitle">Personalized list of courses just for you</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: row;">
|
||||
<div class="recommended-courses-container">
|
||||
<strong>Why am I seeing these?</strong>
|
||||
<a href="/app/profile" class="recommended-courses-link">Review and update your interest profile</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-courses-link view-all-courses">
|
||||
<a href="/app/courses" class="recent-courses-link">View all Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12">
|
||||
<div class="row" id="recommended-courses-row">
|
||||
{% assign focus_groups = "" %}
|
||||
{% assign materials_groups = "" %}
|
||||
{% assign cleaning_method_groups = "" %}
|
||||
{% assign production_application_groups = "" %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name contains "Focus" %}
|
||||
{% assign focus_groups = focus_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
|
||||
{% if group.name contains "Materials" %}
|
||||
{% assign materials_groups = materials_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
|
||||
{% if group.name contains "Production Application" %}
|
||||
{% assign production_application_groups = production_application_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
|
||||
{% if group.name contains "Cleaning Method" %}
|
||||
{% assign cleaning_method_groups = cleaning_method_groups | append: "," | append: group.name %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="col-xs-12 np-hidden" id="recommended-courses-zero-state">
|
||||
{% capture message %}
|
||||
Update your interest profile to gain recommended content
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="unfilteredRecommendedCourses" style="display:none">
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.progress < 100 %}
|
||||
{% assign course_categories_list = "" %}
|
||||
{% for category in course.categories %}
|
||||
{% assign course_categories_list = course_categories_list | append: category.name | append: "," %}
|
||||
{% endfor %}
|
||||
<div
|
||||
class="recommended-course"
|
||||
data-categories="{{course_categories_list}}"
|
||||
data-id="{{course.id}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$("document").ready(function() {
|
||||
const allCourses = $(".recommended-course")
|
||||
const focusGroups = "{{focus_groups}}"
|
||||
const productionApplicationGroups = "{{production_application_groups}}"
|
||||
const materialsGroups = "{{materials_groups}}"
|
||||
const cleaningMethodGroups = "{{cleaning_method_groups}}"
|
||||
|
||||
const focusGroupsArray = focusGroups.split(",").filter(item => item !== "");
|
||||
const productionApplicationGroupsArray = productionApplicationGroups.split(",").filter(item => item !== "");
|
||||
const materialsGroupsArray = materialsGroups.split(",").filter(item => item !== "");
|
||||
const cleaningMethodGroupsArray = cleaningMethodGroups.split(",").filter(item => item !== "");
|
||||
|
||||
let focusCourses = []
|
||||
let productionApplicationsCourses = []
|
||||
let materialsCourses = []
|
||||
let cleaningMethodCourses = []
|
||||
|
||||
$(allCourses).each((index, course) => {
|
||||
if (course.getAttribute("data-categories").includes("Focus-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const focusCategories = categories.filter(category => category.includes('Focus-'));
|
||||
if (focusGroups.includes(focusCategories[0])) {
|
||||
focusCourses.push(course)
|
||||
}
|
||||
}
|
||||
|
||||
if (course.getAttribute("data-categories").includes("Production Applications-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const productionApplicationsCategories = categories.filter(category => category.includes('Production Applications-'));
|
||||
if (productionApplicationGroups.includes(productionApplicationsCategories[0])) {
|
||||
productionApplicationsCourses.push(course)
|
||||
}
|
||||
}
|
||||
|
||||
if (course.getAttribute("data-categories").includes("Materials-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const materialsCategories = categories.filter(category => category.includes('Materials-'));
|
||||
if (materialsGroups.includes(materialsCategories[0])) {
|
||||
materialsCourses.push(course)
|
||||
}
|
||||
}
|
||||
|
||||
if (course.getAttribute("data-categories").includes("Cleaning Method-")) {
|
||||
const categories = course.getAttribute("data-categories").split(",")
|
||||
const cleaningMethodCategories = categories.filter(category => category.includes('Cleaning Method-'));
|
||||
if (cleaningMethodGroups.includes(cleaningMethodCategories[0])) {
|
||||
cleaningMethodCourses.push(course)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log("Focus Courses: ", focusCourses)
|
||||
let coursesToAppend = [];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
if (productionApplicationsCourses.length > 0) {
|
||||
coursesToAppend.push(productionApplicationsCourses.shift());
|
||||
} else if (materialsCourses.length > 0) {
|
||||
coursesToAppend.push(materialsCourses.shift());
|
||||
} else if (cleaningMethodCourses.length > 0) {
|
||||
coursesToAppend.push(cleaningMethodCourses.shift());
|
||||
} else if (focusCourses.length > 0) {
|
||||
coursesToAppend.push(focusCourses.shift());
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Recommended Courses to Append: ", coursesToAppend)
|
||||
if (coursesToAppend.length > 0) {
|
||||
|
||||
for (let i = 0; i < coursesToAppend.length; i++) {
|
||||
console.log(coursesToAppend[i].innerHTML)
|
||||
$("#recommended-courses-row").append(`<div class="col-xs-12 col-sm-6 col-md-4">${
|
||||
coursesToAppend[i].innerHTML
|
||||
}</div>`)
|
||||
}
|
||||
} else {
|
||||
$("#recommended-courses-zero-state").removeClass("np-hidden")
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.recommended-courses-row {
|
||||
margin-bottom: 32px;
|
||||
margin-top: 86px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.recommended-courses-flex-wrapper {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.recommended-courses.link {
|
||||
margin-bottom: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.recommended-courses-flex-wrapper .dashboard-title {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.recommended-courses-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.view-all-courses {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.recommended-courses-flex-wrapper strong {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.recommended-courses-flex-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.recommended-courses-row .np-card {
|
||||
padding: 0 0 32px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
{% comment %} <nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav> {% endcomment %}
|
||||
@ -0,0 +1,198 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
<div class="row row-with-thumbnails">
|
||||
<div class="col-xs-12">
|
||||
<div class="filters-container courses-filters">
|
||||
<div class="filters-heading">APPLY FILTERS<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="filters-content">
|
||||
<div class="filter-column status-column">
|
||||
<div class="filter-column-title">STATUS</div>
|
||||
<div class="filters-list">
|
||||
<div class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="completed"
|
||||
value="completed">
|
||||
<label for="completed">Completed
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="in-progress"
|
||||
value="in-progress">
|
||||
<label for="in-progress">In Progress
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="in-progress"
|
||||
value="not-started">
|
||||
<label for="not-started">Not Started
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-column categories-column">
|
||||
<div class="filter-column-title">CATEGORY</div>
|
||||
<div class="filters-list">
|
||||
{% for category in categories.enrolled %}
|
||||
<script>
|
||||
console.log("{{category.name}}")
|
||||
</script>
|
||||
<div class="filter-item category-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="{{category.name}}"
|
||||
value="{{category.name}}">
|
||||
<label for="{{category.name}}">{{ category.name }}
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3 course-column" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
if (params.has('category')) {
|
||||
let allParams = params.getAll('category')
|
||||
allParams.forEach((param) => {
|
||||
document.querySelector(`.filter-item input[value='${param}']`).click()
|
||||
})
|
||||
}
|
||||
|
||||
addCountToFilters()
|
||||
addActiveNavigationClass()
|
||||
|
||||
}
|
||||
|
||||
$("input[type='checkbox']").change(function(e) {
|
||||
filterCourses()
|
||||
})
|
||||
|
||||
$("document").ready(function() {
|
||||
|
||||
document
|
||||
.querySelector(".filters-heading")
|
||||
.addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + 32 + "px";
|
||||
}
|
||||
})
|
||||
|
||||
document
|
||||
.querySelector(".filters-heading")
|
||||
.click()
|
||||
})
|
||||
|
||||
|
||||
function filterCourses() {
|
||||
|
||||
// hide all courses
|
||||
$(".course-column").hide()
|
||||
|
||||
// get all checked filters
|
||||
let selectedStatusFilters = []
|
||||
let selectedCategoryFilters = []
|
||||
|
||||
$(".status-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedStatusFilters.push(filter.value)
|
||||
})
|
||||
|
||||
$(".categories-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedCategoryFilters.push(filter.value)
|
||||
})
|
||||
|
||||
// loop over courses and get filters
|
||||
$(".course-column").each((index, course) => {
|
||||
const courseStatus = $(course).data("progress")
|
||||
const courseCategory = $(course).data("category")
|
||||
|
||||
if (selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(courseStatus, selectedStatusFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else if (! selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else if (selectedStatusFilters.length && ! selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseStatus, selectedStatusFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else {
|
||||
$(course).show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCountToFilters() {
|
||||
const allFiltersFromCourses = []
|
||||
|
||||
$(".course-column").each((index, course) => {
|
||||
if ($(course).attr("data-progress")) {
|
||||
allFiltersFromCourses.push($(course).attr("data-progress"))
|
||||
}
|
||||
|
||||
if ($(course).attr("data-category")) {
|
||||
allFiltersFromCourses.push($(course).attr("data-category"))
|
||||
}
|
||||
})
|
||||
|
||||
$(".filter-item").each((index, filter) => {
|
||||
const filterValue = $(filter).find("input").val()
|
||||
const filterCount = getFilterCount(filterValue, allFiltersFromCourses)
|
||||
|
||||
if ($(filter).hasClass("category-filter")) {
|
||||
if (filterCount == 0) {
|
||||
$(filter).hide()
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getFilterCount = (value, array) => {
|
||||
let count = 0;
|
||||
|
||||
array.forEach(filter => {
|
||||
if (filter == value) {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
|
||||
return count
|
||||
}
|
||||
|
||||
function addActiveNavigationClass() {
|
||||
$('a[href="/app/courses"]').addClass("np-sub-navigation-content-item-active").removeClass("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace("/app")
|
||||
</script>
|
||||
@ -0,0 +1,183 @@
|
||||
{% assign enrolled_courses = courses.enrolled %}
|
||||
{% assign enrolled_learning_paths = learning_paths.enrolled %}
|
||||
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
{% include "homepage_section_progress_activity" %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
{% if features.training_events? %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-7">
|
||||
<div class="dashboard-title">UPCOMING EVENTS</div>
|
||||
<div class="np-dashboard-resources row upcoming-events">
|
||||
{% if training_events.available.any? %}
|
||||
{% for training_event in training_events.available limit: 2 %}
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
{% include "section_previous_events", enrolled_courses: enrolled_courses %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if features.learning_paths? %}
|
||||
{% include "section_learning_paths" %}
|
||||
{% endif %}
|
||||
<div class="background-logo">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="657"
|
||||
height="844"
|
||||
viewBox="0 0 657 844">
|
||||
<defs>
|
||||
<clipPath id="clip-BRT_Background">
|
||||
<rect width="657" height="844" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="BRT_Background" clip-path="url(#clip-BRT_Background)">
|
||||
<g
|
||||
id="Group_535"
|
||||
data-name="Group 535"
|
||||
transform="translate(-762.559 -1560.226)">
|
||||
<g
|
||||
id="Group_109"
|
||||
data-name="Group 109"
|
||||
transform="translate(762.559 1867.316)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61"
|
||||
data-name="Path 61"
|
||||
d="M1406.748,820.66H1578V667.283H1406.748a153.283,153.283,0,0,1-132.81-76.691,153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(-1253.371 -360.524)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62"
|
||||
data-name="Path 62"
|
||||
d="M1406.748,703.671H1578V550.288H1406.748a153.353,153.353,0,0,0-132.81,230.068A153.278,153.278,0,0,1,1406.748,703.671Z"
|
||||
transform="translate(-1253.371 -550.288)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
<g
|
||||
id="Group_124"
|
||||
data-name="Group 124"
|
||||
transform="translate(762.559 1944.09)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61-2"
|
||||
data-name="Path 61"
|
||||
d="M1406.748,820.66H1578V667.283H1406.748a153.283,153.283,0,0,1-132.81-76.691,153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(-1253.371 -360.524)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62-2"
|
||||
data-name="Path 62"
|
||||
d="M1406.748,703.671H1578V550.288H1406.748a153.353,153.353,0,0,0-132.81,230.068A153.278,153.278,0,0,1,1406.748,703.671Z"
|
||||
transform="translate(-1253.371 -550.288)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
<g
|
||||
id="Group_122"
|
||||
data-name="Group 122"
|
||||
transform="translate(1411.828 2020.362) rotate(180)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61-3"
|
||||
data-name="Path 61"
|
||||
d="M153.377,230.068H324.632V76.691H153.377A153.283,153.283,0,0,1,20.567,0a153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(0 230.068)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62-3"
|
||||
data-name="Path 62"
|
||||
d="M153.377,153.383H324.632V0H153.377A153.354,153.354,0,0,0,20.567,230.068,153.279,153.279,0,0,1,153.377,153.383Z"
|
||||
transform="translate(0 0)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
<g
|
||||
id="Group_123"
|
||||
data-name="Group 123"
|
||||
transform="translate(1411.828 2097.135) rotate(180)"
|
||||
opacity="0.05">
|
||||
<path
|
||||
id="Path_61-4"
|
||||
data-name="Path 61"
|
||||
d="M153.377,230.068H324.632V76.691H153.377A153.283,153.283,0,0,1,20.567,0a153.354,153.354,0,0,0,132.81,230.068Z"
|
||||
transform="translate(0 230.068)"
|
||||
fill="#6fcfeb" />
|
||||
<path
|
||||
id="Path_62-4"
|
||||
data-name="Path 62"
|
||||
d="M153.377,153.383H324.632V0H153.377A153.354,153.354,0,0,0,20.567,230.068,153.279,153.279,0,0,1,153.377,153.383Z"
|
||||
transform="translate(0 0)"
|
||||
fill="#4e738a" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{% include "section_recommended_courses", enrolled_courses: enrolled_courses %}
|
||||
|
||||
{% include "section_recently_added_courses", enrolled_courses: enrolled_courses %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-dashboard-resources .np-card {
|
||||
padding-left: 0;
|
||||
padding-right: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.np-dashboard-resources .np-card-content-vertical {
|
||||
justify-content:flex-end;
|
||||
}
|
||||
|
||||
.previous-events,
|
||||
.upcoming-events {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.recommended-courses-link,
|
||||
.recent-courses-link {
|
||||
color: #0077B8;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.recommended-courses-link:hover,
|
||||
.recent-courses-link:hover {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.background-logo {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background-logo svg {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,179 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="filters-container Lps-filters">
|
||||
<div class="filters-heading">APPLY FILTERS<i class="fa fa-chevron-down"></i></div>
|
||||
<div class="filters-content">
|
||||
<div class="filter-column status-column">
|
||||
<div class="filter-column-title">STATUS</div>
|
||||
<div class="filters-list">
|
||||
<div class="filter-item status-filter">
|
||||
<input type="checkbox" name="completed" value="completed">
|
||||
<label for="completed">Completed <span></span></label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input type="checkbox" name="in-progress" value="in-progress">
|
||||
<label for="in-progress">In Progress <span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-column categories-column">
|
||||
<div class="filter-column-title">CATEGORY</div>
|
||||
<div class="filters-list">
|
||||
{% for category in categories.enrolled %}
|
||||
<div class="filter-item category-filter">
|
||||
<input type="checkbox" name="{{category.name}}" value="{{category.name}}">
|
||||
<label for="{{category.name}}">{{category.name}} <span></span></label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign learning_paths_alphabetical = learning_paths.available | sort: "name" %}
|
||||
{% include "learning_paths_index", items: learning_paths_alphabetical %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-card-content-vertical {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.learning-path-card .np-card-content-title {
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.np-learning-path-image {
|
||||
align-self: unset !important;
|
||||
object-fit: cover !important;
|
||||
width: 100% !important;
|
||||
min-height: unset !important;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
max-width: 265px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
if (params.has('category')) {
|
||||
let allParams = params.getAll('category')
|
||||
allParams.forEach((param) => {
|
||||
document.querySelector(`.filter-item input[value='${param}']`).click()
|
||||
})
|
||||
}
|
||||
|
||||
addCountToFilters()
|
||||
}
|
||||
|
||||
$("input[type='checkbox']").change(function(e) {
|
||||
filterLps()
|
||||
})
|
||||
|
||||
$("document").ready(function() {
|
||||
|
||||
document.querySelector(".filters-heading").addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + 32 + "px";
|
||||
}
|
||||
})
|
||||
|
||||
document.querySelector(".filters-heading").click()
|
||||
})
|
||||
|
||||
function filterLps() {
|
||||
// hide all Lps
|
||||
$(".lp-column").hide()
|
||||
|
||||
// get all checked filters
|
||||
let selectedStatusFilters = []
|
||||
let selectedCategoryFilters = []
|
||||
|
||||
$(".status-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedStatusFilters.push(filter.value)
|
||||
})
|
||||
|
||||
$(".categories-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedCategoryFilters.push(filter.value)
|
||||
})
|
||||
|
||||
//loop over Lps and get filters
|
||||
$(".lp-column").each((index, lp) => {
|
||||
const lpStatus = $(lp).data("progress")
|
||||
const courseCategory = $(lp).data("category")
|
||||
|
||||
if (selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(lpStatus, selectedStatusFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else if (!selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else if (selectedStatusFilters.length && !selectedCategoryFilters.length) {
|
||||
if($.inArray(lpStatus, selectedStatusFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else {
|
||||
$(lp).show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCountToFilters() {
|
||||
const allFiltersFromLps = []
|
||||
|
||||
$(".lp-column").each((index, course) => {
|
||||
if ($(course).attr("data-progress")) {
|
||||
allFiltersFromLps.push($(course).attr("data-progress"))
|
||||
}
|
||||
|
||||
if ($(course).attr("data-category")) {
|
||||
allFiltersFromLps.push($(course).attr("data-category"))
|
||||
}
|
||||
})
|
||||
|
||||
$(".filter-item").each((index, filter) => {
|
||||
const filterValue = $(filter).find("input").val()
|
||||
const filterCount = getFilterCount(filterValue, allFiltersFromLps)
|
||||
|
||||
|
||||
if ($(filter).hasClass("category-filter")) {
|
||||
if (filterCount == 0) {
|
||||
$(filter).hide()
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getFilterCount = (value, array) => {
|
||||
let count = 0;
|
||||
|
||||
array.forEach(filter => {
|
||||
if (filter == value) { count++; }
|
||||
});
|
||||
|
||||
return count
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,53 @@
|
||||
{% include "header" %}
|
||||
<div class="your-profile-container">
|
||||
<div class="your-profile np-max-width">
|
||||
your profile
|
||||
</div>
|
||||
</div>
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div width="100%" height="100%" style="margin-bottom: 46px;">
|
||||
<iframe src="https://customer.brighton-science.com/profile-update" frameborder="0" width="100%" height="1400px" id="profile-update-frame"></iframe>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.your-profile-container {
|
||||
width: 100%;
|
||||
background-color: #F8FBFF;
|
||||
}
|
||||
|
||||
.your-profile {
|
||||
color: #185A7D;
|
||||
font-size: 50px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
padding: 23px 5% 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #185A7D;
|
||||
font-size: 34px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.embed-wrapper {
|
||||
margin-bottom:48px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.getElementById("profile-update-frame").name = Date();
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
addActiveNavigationClass()
|
||||
})
|
||||
|
||||
function addActiveNavigationClass() {
|
||||
$('.np-header-avatar-button').addClass("np-sub-navigation-content-item-active")
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,434 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: 'Heebo', "Roboto", sans-serif;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.np-dashboard,
|
||||
.np-learning-paths {
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
.np-button {
|
||||
border-radius:0;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color:#0077B8;
|
||||
}
|
||||
|
||||
.np-card-container,
|
||||
.np-card-progress-bar-container,
|
||||
.np-card-progress-bar {
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content {
|
||||
height:100%;
|
||||
justify-content:unset;
|
||||
}
|
||||
|
||||
.np-card-stack-level-1,
|
||||
.np-card-stack-level-2 {
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.np-flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.np-card-content-progress i {
|
||||
margin-right:6px;
|
||||
}
|
||||
|
||||
.np-card-content-progress i.not-started-circle {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: 2.7px dashed;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.dashboard-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.learning-path-card.np-card {
|
||||
display:flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-container {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.learning-path-card .np-learning-path {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-title {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card .np-card-container,
|
||||
.previous-event-card .np-card-container {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-footer,
|
||||
.previous-event-card .np-card-content-footer {
|
||||
margin-top:0;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.course-card .course-category {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
opacity: 0.9;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform:uppercase;
|
||||
color: #fff;
|
||||
padding: 6px 26px;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 27px;
|
||||
z-index: 2;
|
||||
background-color: {{ color_palette.button_color }};
|
||||
}
|
||||
|
||||
.course-card .np-card-content,
|
||||
.previous-event-card .np-card-content {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-progress,
|
||||
.previous-event-card .np-card-content-progress {
|
||||
margin-bottom:12px;
|
||||
font-size:14px;
|
||||
text-transform:lowercase;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.np-card.previous-event-card {
|
||||
padding: 0 0 32px;
|
||||
}
|
||||
|
||||
.previous-event-card .np-card-cotnent-title {
|
||||
font-size:16px;
|
||||
line-height:normal;
|
||||
}
|
||||
|
||||
/* FILTERS */
|
||||
.filters-container {
|
||||
margin-bottom:64px;
|
||||
background-color: #F8FBFF;
|
||||
}
|
||||
|
||||
.filters-heading {
|
||||
background-color: #185A7D;
|
||||
color:#fff;
|
||||
padding: 8px 25px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.filters-heading.active i {
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
|
||||
.filters-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
.filter-column {
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.filter-column.categories-column {
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.filter-column-title {
|
||||
color: #185A7D;
|
||||
font-size: 21px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
letter-spacing: 2.1px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.filter-item label {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
text-transform: uppercase;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.filters-content {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.categories-column .filters-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 550px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.categories-column .filters-list .filter-item {
|
||||
width:calc(50% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.fa-spinner {
|
||||
color: #EAAF1E;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.fa-check-circle {
|
||||
color: #16C466;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-container {
|
||||
border: 1px solid #185A7D;
|
||||
|
||||
-webkit-box-shadow: 9px 9px 0px -1px rgba(0, 119, 184, 1);
|
||||
-moz-box-shadow: 9px 9px 0px -1px rgba(0, 119, 184, 1);
|
||||
box-shadow: 9px 9px 0px -1px rgba(0, 119, 184, 1);
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-title,
|
||||
.course-card .np-card-content-title {
|
||||
color: #0077B8;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-title {
|
||||
font-size: 16px;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-card {
|
||||
color: #0077B8;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-content-progress span,
|
||||
.course-card .np-card-content-progress span {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-progress-bar {
|
||||
background-color: #EAAF1E;
|
||||
}
|
||||
|
||||
.learning-path-card .np-card-progress-bar-container {
|
||||
border: 1px solid #707070;
|
||||
background-color: #FFFFFF;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.learning-path-card .np-button {
|
||||
padding: 3px 16px;
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.learning-path-card .np-learning-path-items-count {
|
||||
color: #185A7D;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.case-studies {
|
||||
background-color: #256180 !important;
|
||||
}
|
||||
|
||||
.surface-research {
|
||||
background-color: #6ABCD5CC !important;
|
||||
}
|
||||
|
||||
.internal-training {
|
||||
background-color: #10BE60!important;
|
||||
}
|
||||
|
||||
.webinars-and-events {
|
||||
background-color: #EEA153 !important;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-progress {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-progress i.not-started-circle {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.course-card .np-card-content-footer .np-button {
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
padding: 6px 18px;
|
||||
background-color: #0077B8;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=checkbox]:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
border: 2px solid #0077B8;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 9px;
|
||||
border: solid #0077B8;
|
||||
border-width: 0 2px 2px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.np-learning-path:hover .np-card-content-title,
|
||||
.course-card .np-card-container:hover .np-card-content-title {
|
||||
color: #185A7D;
|
||||
}
|
||||
|
||||
.course-card .np-card-container:hover .np-card-content-footer .np-button,
|
||||
.np-learning-path:hover .np-button {
|
||||
background-color: #185A7D;
|
||||
}
|
||||
|
||||
/*.np-learning-path:hover {
|
||||
-webkit-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
-moz-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
transition: .5s ease all;
|
||||
}*/
|
||||
|
||||
.learning-path-card:hover .np-card-container {
|
||||
-webkit-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
-moz-box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
box-shadow: 3px 3px 0px -1px #185A7D;
|
||||
transition: .5s all;
|
||||
}
|
||||
|
||||
.np-learning-path:hover .np-card-image,
|
||||
.course-card .np-card-container:hover .np-card-image {
|
||||
scale: 1.25;
|
||||
transition: .5s ease all;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.course-image-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-learning-path-image {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
max-width: 345px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="course-description">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<div class="button-wrapper">
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<div class="back-button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<div class="back-button"></div>
|
||||
</div>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,48 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<div class="button-wrapper">
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<div class="back-button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="courses-filter">
|
||||
<div class="courses-filter-title">
|
||||
Categories
|
||||
</div>
|
||||
<div class="courses-filter-item courses-filter-item-active" filter-category="ALL" onclick="filterCourses(this);">
|
||||
All
|
||||
</div>
|
||||
{% for category in categories.in_catalog %}
|
||||
<div class="courses-filter-item" filter-category="{{ category.id }}" onclick="filterCourses(this);">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function filterCourses(element) {
|
||||
let categoryId = element.getAttribute('filter-category');
|
||||
document.querySelector('.courses-filter-item-active').classList.remove('courses-filter-item-active');
|
||||
element.classList.add('courses-filter-item-active');
|
||||
if (categoryId === 'ALL') {
|
||||
document.querySelectorAll('.filter-hidden').forEach(x => {
|
||||
x.classList.remove('filter-hidden');
|
||||
});
|
||||
} else {
|
||||
document.querySelectorAll('[course-category]').forEach(x => {
|
||||
if (x.getAttribute('course-category').includes(categoryId)) {
|
||||
x.classList.remove('filter-hidden');
|
||||
} else {
|
||||
x.classList.add('filter-hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,20 @@
|
||||
<div class="courses-list np-hidden">
|
||||
<div class="np-resource-title courses-list-title">
|
||||
Library
|
||||
</div>
|
||||
<div class="row courses-wrapper">
|
||||
<div class="courses-filter-wrapper col-12 col-md-3">
|
||||
{% include "courses_filter" %}
|
||||
</div>
|
||||
<div class="courses-wrapper row row-with-thumbnails col-12 col-md-9">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-sm-6 col-xl-4 np-stretch-content role-hidden" course-category="{{ course.categories | map: 'id' | join: ' ' }}" course-role="{{ course.properties.role }}">
|
||||
{% include "cards_course" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="zero-state np-hidden">
|
||||
{% include "courses_zero_state", message: "No courses matching criteria" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
|
||||
178
Custom_Templates/.churned_customers/Cayuse/_header.html.liquid
Normal file
178
Custom_Templates/.churned_customers/Cayuse/_header.html.liquid
Normal file
@ -0,0 +1,178 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,83 @@
|
||||
<div class="topics-wrapper col-xs-12">
|
||||
<h3 class="topics-title">
|
||||
Popular Topics
|
||||
</h3>
|
||||
<div class="topics row">
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/360002631894-Animal-Oversight">
|
||||
Animal Oversight
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/1500001762282-Connect-Conference-Community">
|
||||
Cayuse Community
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/9886295600147-Cayuse-Modernization">
|
||||
Cayuse Modernization
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/360000137107-Fund-Manager-Effort-and-Grants">
|
||||
Fund Manager, Effort, and Grants
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/115001977467-Human-Ethics">
|
||||
Human Ethics
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/360003816254-Integrations-and-APIs">
|
||||
Integrations & APIs
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/360001518894-Outside-Interests">
|
||||
Outside Interests
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/115002015648-Platform-and-Admin">
|
||||
Platform & Admin
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/360001581913-Sponsored-Projects-4-0">
|
||||
Sponsored Projects 4.0
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic-wrapper col-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<a class="topic" href="https://support.cayuse.com/hc/en-us/categories/360002101954-Vivarium-Operations-and-Vet-Care">
|
||||
Vivarium Operations & Vet Care
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.topics-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.topic-wrapper {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.topic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
border: 2px solid #253272;
|
||||
padding: 8px 0;
|
||||
color: #253272;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.topic:hover {
|
||||
color: white;
|
||||
background: rgba(37,50,114, 0.9);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,106 @@
|
||||
<div class="role-select container">
|
||||
<div class="role-select-title">
|
||||
Library
|
||||
</div>
|
||||
<div class="role-select-list row">
|
||||
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#administrators">
|
||||
<div class="role-select-item-container">
|
||||
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/admin.jpg">
|
||||
<div class="role-select-item-text">
|
||||
<div class="role-select-item-name">
|
||||
Administrators
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#researchers">
|
||||
<div class="role-select-item-container">
|
||||
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/researcher.jpg">
|
||||
<div class="role-select-item-text">
|
||||
<div class="role-select-item-name">
|
||||
Researchers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#it-managers">
|
||||
<div class="role-select-item-container">
|
||||
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/it_manager.jpg">
|
||||
<div class="role-select-item-text">
|
||||
<div class="role-select-item-name">
|
||||
IT Managers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#staff">
|
||||
<div class="role-select-item-container">
|
||||
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/staff.jpg">
|
||||
<div class="role-select-item-text">
|
||||
<div class="role-select-item-name">
|
||||
Staff
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
addEventListener("hashchange", () => {
|
||||
showCourses(location.hash.replace('#', ''));
|
||||
});
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
showCourses(location.hash.replace('#', ''));
|
||||
})
|
||||
|
||||
const roleDescriptions = {
|
||||
'administrators': {
|
||||
name: 'Courses for Administrators',
|
||||
},
|
||||
'researchers': {
|
||||
name: 'Courses for Researchers',
|
||||
},
|
||||
'it-managers': {
|
||||
name: 'Courses for IT Managers',
|
||||
},
|
||||
'staff': {
|
||||
name: 'Courses for Staff',
|
||||
}
|
||||
}
|
||||
|
||||
function showCourses(name) {
|
||||
let coursesParent = document.querySelector('.courses-wrapper')
|
||||
let roleSelectElement = document.querySelector('.role-select');
|
||||
|
||||
if (!name) {
|
||||
if (roleSelectElement.classList.contains('np-hidden')) {
|
||||
roleSelectElement.classList.remove('np-hidden');
|
||||
document.querySelector('.courses-list').classList.add('np-hidden');
|
||||
}
|
||||
} else if (roleDescriptions[name]) {
|
||||
coursesParent.querySelectorAll('[course-role]').forEach(x => {
|
||||
if (x.getAttribute('course-role') === name) {
|
||||
x.classList.remove('role-hidden');
|
||||
} else {
|
||||
x.classList.add('role-hidden');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('[filter-category]:not([filter-category="ALL"])').forEach( x => {
|
||||
if (coursesParent.querySelector(`[course-category*="${x.getAttribute('filter-category')}"][course-role="${name}"]`)) {
|
||||
x.classList.remove('role-hidden');
|
||||
} else {
|
||||
x.classList.add('role-hidden');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('.courses-list-title').innerText = roleDescriptions[name].name;
|
||||
|
||||
if (!roleSelectElement.classList.contains('np-hidden')) {
|
||||
roleSelectElement.classList.add('np-hidden');
|
||||
document.querySelector('.courses-list').classList.remove('np-hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,25 @@
|
||||
<nav class="np-sub-navigation np-hidden-desktop">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' %}
|
||||
{% if link.label == 'Home' %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Library
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,59 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
{% include "role_select" %}
|
||||
{% include 'courses_with_filter' %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.courses-filter {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.courses-filter-title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.courses-filter-item {
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.courses-filter-item-active {
|
||||
font-weight: 600;
|
||||
cursor: auto;
|
||||
}
|
||||
.role-select-title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.role-select-item-container {
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: 1px solid darkblue;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.role-select-item-name {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.role-select-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.role-select-image {
|
||||
width: 100%;
|
||||
}
|
||||
.role-select-item-text {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.role-hidden, .filter-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include 'popular_topics' %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,55 @@
|
||||
<script>
|
||||
window.location.href = '/app/courses'
|
||||
</script>
|
||||
{%- comment -%} {% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
|
||||
{% t .discover %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.featured.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.featured %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="{% t .empty, key: current_school.course_vocabulary %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %} {%- endcomment -%}
|
||||
50
Custom_Templates/.churned_customers/Cayuse/styles.css.liquid
Normal file
50
Custom_Templates/.churned_customers/Cayuse/styles.css.liquid
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
a, a:hover, a:focus, a:active {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.course-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@media screen and (min-width: 768px) and (max-width: 950px){
|
||||
.np-card-content-footer {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
.button-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.back-button {
|
||||
position: absolute !important;
|
||||
background: #2e3e8f;
|
||||
opacity: 0.8;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
border-radius: 4px;
|
||||
z-index: -1;
|
||||
}
|
||||
.np-button:hover {
|
||||
color: white;
|
||||
}
|
||||
.np-card-content-progress {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-header-desktop-nav-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user