Add Tab view on settings page

[gautamjajoo]

This PR:

• restructures the settings page with tab view divided into three tabs.
• makes phase splits private when phase is made public
• added a check when phase splits made public when phase is private

@Ram81 @Kajol-Kumari

tab-view.mp4

[Kajol-Kumari]

@gautamjajoo minor change required,
rest LGTM 👍

[gautamjajoo]

@Kajol-Kumari Done!

[gautamjajoo]

mat-tab-label styles were channging when coming from public-list component. Fixed it by adding :host for child component.

[codecov-commenter]

Codecov Report

Merging #3551 (8558f63) into master (96968d6) will decrease coverage by 1.49%.
The diff coverage is 32.43%.

@@            Coverage Diff             @@
##           master    #3551      +/-   ##
==========================================
- Coverage   72.93%   71.44%   -1.50%     
==========================================
  Files          83       20      -63     
  Lines        5368     3232    -2136     
==========================================
- Hits         3915     2309    -1606     
+ Misses       1453      923     -530     

Impacted Files	Coverage Δ
frontend/src/js/controllers/authCtrl.js	53.91% <6.38%> (-12.95%)	⬇️
frontend/src/js/controllers/profileCtrl.js	79.76% <20.00%> (-13.10%)	⬇️
frontend/src/js/controllers/permissionCtrl.js	36.36% <22.22%> (-63.64%)	⬇️
frontend/src/js/controllers/challengeCtrl.js	63.41% <30.64%> (-10.29%)	⬇️
frontend/src/js/controllers/updateProfileCtrl.js	82.55% <44.44%> (-10.30%)	⬇️
frontend/src/js/controllers/challengeListCtrl.js	94.68% <50.00%> (ø)
...ntend/src/js/controllers/challengeHostTeamsCtrl.js	70.50% <66.66%> (-1.18%)	⬇️
frontend/src/js/controllers/teamsCtrl.js	71.17% <75.00%> (ø)
frontend/src/js/controllers/ChallengeInviteCtrl.js	100.00% <100.00%> (ø)
frontend/src/js/controllers/SubmissionFilesCtrl.js	95.45% <100.00%> (ø)
... and 31 more

Impacted Files	Coverage Δ
frontend/src/js/controllers/authCtrl.js	53.91% <6.38%> (-12.95%)	⬇️
frontend/src/js/controllers/profileCtrl.js	79.76% <20.00%> (-13.10%)	⬇️
frontend/src/js/controllers/permissionCtrl.js	36.36% <22.22%> (-63.64%)	⬇️
frontend/src/js/controllers/challengeCtrl.js	63.41% <30.64%> (-10.29%)	⬇️
frontend/src/js/controllers/updateProfileCtrl.js	82.55% <44.44%> (-10.30%)	⬇️
frontend/src/js/controllers/challengeListCtrl.js	94.68% <50.00%> (ø)
...ntend/src/js/controllers/challengeHostTeamsCtrl.js	70.50% <66.66%> (-1.18%)	⬇️
frontend/src/js/controllers/teamsCtrl.js	71.17% <75.00%> (ø)
frontend/src/js/controllers/ChallengeInviteCtrl.js	100.00% <100.00%> (ø)
frontend/src/js/controllers/SubmissionFilesCtrl.js	95.45% <100.00%> (ø)
... and 31 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c509e38...8558f63. Read the comment docs.

[Kajol-Kumari]

@gautamjajoo can we please fix the below minor responsiveness issues -

1. The private tag for phase select box shouldn't get hidden for small screen. ref ⬇️

2. The left-padding for Evaluation tab goes off for screens smaller than 700px. We should keep it consistent throughout. ref ⬇️

[gautamjajoo]

@Kajol-Kumari What was the screen size for the phase selected box?. Got it!

[gautamjajoo]

@Kajol-Kumari Updated the PR!

[Kajol-Kumari]

@gautamjajoo The padding on the settings page doesn't look consistent with the other pages, please fix it. See the ref image below -

[Kajol-Kumari]

Let's keep it till 800px as the private-tag issue is for ipad sized screens as well

[gautamjajoo]

@Kajol-Kumari In the above screenshot is it regarding the space between title and the tabs? Because it was intentional as they were tabs so I thought some space would be needed?

[Kajol-Kumari]

@Kajol-Kumari In the above screenshot is it regarding the space between title and the tabs? Because it was intentional as they were tabs so I thought some space would be needed?

I am taking about the top-padding for the title. Here the top-padding is larges as compared with the other tabs. Also the spacing btw title and tabs can also be reduced a bit.(we can keep it same as the top padding but the top padding should be same as other tabs)

[gautamjajoo]

@Kajol-Kumari Done the changes!

[Kajol-Kumari]

Thanks for making the requested changes @gautamjajoo
LGTM 👍

[Ram81]

@gautamjajoo can we add heading Evaluation script on he Evaluation tab

[gautamjajoo]

@Ram81 Heading of the first card where evaluation script and criteria is present?

[Ram81]

Yes

[gautamjajoo]

Should we add like this or the one similar to edit phase and leaderboard?