Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add tabs for challenges #4385

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add tabs for challenges #4385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47a8ac3
Add tabs for challenges
Harshit28j Jun 20, 2024
d59df72
Optimized api call & added blank space in SCSS
Harshit28j Jun 27, 2024
06c5d20
revert changes to js
Harshit28j Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion frontend/src/css/modules/challenge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,4 +370,42 @@ md-select .md-select-value span:first-child:after {

.filter-icon {
padding: 10px;
}
}
.no-margin {
margin: 0px;
}
.nav-underline {
display: flex;
justify-content: space-around;
border-bottom: 1px solid #e0e0e0;
li {
margin-bottom: -0.5%;
}

.nav-item {
flex: 1;
text-align: center;
color: #9e9e9e;

.nav-link {
display: block;
padding: 10px 0;
color: #9e9e9e;
text-decoration: none;
border: none;
background-color: transparent;
font-weight: bold;
transition: border-bottom 0.3s ease, color 0.3s ease;

&.active {
border-bottom: 2px solid #000;
color: #000;
}

&:hover {
color: #000;
}
}
}
}
Harshit28j marked this conversation as resolved.
Show resolved Hide resolved

8 changes: 2 additions & 6 deletions frontend/src/js/controllers/challengeListCtrl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
vm.noneUpcomingChallenge = false;
vm.nonePastChallenge = false;
vm.getAllResults = function(parameters, resultsArray, typ){
parameters.method = 'GET';
parameters.callback = {
onSuccess: function(response) {
var data = response.data;
Expand Down Expand Up @@ -88,19 +89,14 @@

// calls for ongoing challenges
parameters.url = 'challenges/challenge/present/approved/public';
parameters.method = 'GET';

vm.getAllResults(parameters, vm.currentList, "noneCurrentChallenge");

// calls for upcoming challenges
parameters.url = 'challenges/challenge/future/approved/public';
parameters.method = 'GET';

vm.getAllResults(parameters, vm.upcomingList, "noneUpcomingChallenge");

// calls for past challenges
parameters.url = 'challenges/challenge/past/approved/public';
parameters.method = 'GET';

vm.getAllResults(parameters, vm.pastList, "nonePastChallenge");

vm.scrollUp = function() {
Expand Down
34 changes: 31 additions & 3 deletions frontend/src/views/web/challenge-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
<section class="ev-sm-container ev-view challenge-container">
<p class="text-med-black fs-30 no-margin">All Challenges</p>
<!-- tabs for challenges -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you are on the ongoing challenge tab, the api for all the challenges will be called. Modify it, so that the challenges relevant to the tab are shown

Copy link
Author

@Harshit28j Harshit28j Jun 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gautamjajoo I think it's necessary to call all the api's so that we can show the number of challenges in each tab. I implemented the approach of calling the api for one specific tab considering it as default tab, whenever the page is loaded for the first time and then call api when we switch tabs. However, the problem is that if I only call the api for default tab, it won't show me the number of challenges on the other tabs.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gchhablani Should we display the number of challenges on the tabs? This is a tradeoff between UI vs loading time

<div class="row">
<div class="col s12">
<ul class="nav nav-underline" ng-init="tab = 1">
<li class="nav-item">
<a href="#" ng-click="tab = 1" class="nav-link" ng-class="{'active': tab === 1}">
<strong class="text-med-black">Ongoing ({{challengeList.currentList.length}})</strong>
</a>
</li>
<li class="nav-item">
<a href="#" ng-click="tab = 2" class="nav-link" ng-class="{'active': tab === 2}">
<strong class="text-med-black">Upcoming ({{challengeList.upcomingList.length}})</strong>
</a>
</li>
<li class="nav-item">
<a href="#" ng-click="tab = 3" class="nav-link" ng-class="{'active': tab === 3}">
<strong class="text-med-black">Past ({{challengeList.pastList.length}})</strong>
</a>
</li>
</ul>
</div>
</div>

<!-- ongoing challenges -->
<div class="challenge-page-title" id = "ongoing-challenges"><strong class="text-med-black fs-18">Ongoing Challenges</strong></div>
<div ng-show="tab === 1" class="ongoing-challenges">
<div ng-if="challengeList.noneCurrentChallenge">None</div>
<div class="row">
<div class="col s12 m3" ng-repeat="challenge in challengeList.currentList"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
Expand All @@ -22,6 +46,7 @@
<div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details </strong> &nbsp; </div>
</div>
</a>
</div>
</div>
</div>

Expand All @@ -43,7 +68,7 @@
</div>

<!-- upcoming challenges -->
<div class="challenge-page-title"><strong class="text-med-black fs-18">Upcoming Challenges</strong></div>
<div ng-show="tab === 2" class="ongoing-challenges">
<div ng-if="challengeList.noneUpcomingChallenge">None</div>
<div class="row">
<div class="col s12 m3" ng-repeat="challenge in challengeList.upcomingList"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
Expand All @@ -67,8 +92,10 @@
</a>
</div>
</div>
</div>

<!-- past challenges -->
<div class="challenge-page-title"><strong class="text-med-black fs-18">Past Challenges</strong></div>
<div ng-show="tab === 3" class="ongoing-challenges">
<div ng-if="challengeList.nonePastChallenge">None</div>
<div class="row">
<div class="col s12 m3" ng-repeat="challenge in challengeList.pastList">
Expand All @@ -91,6 +118,7 @@
<div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details </strong> &nbsp; </div>
</div>
</a>
</div>
</div>
</div>
</section>
Expand Down