Skip to content

Commit 0327ff0

Browse files
akanshajain231999akanshajain231999
authored
Frontend: Fix my hosted challenges page after aligning content and limiting tags (#4632)
* Modified challenge card of My Hosted Challenges Page * Modified height and aligned the text to left of the challenge card in 'My hosted Challenge page' * Renamed the classes name
1 parent 3ab0e40 commit 0327ff0

File tree

2 files changed

+38
-18
lines changed

2 files changed

+38
-18
lines changed

‎frontend/src/css/modules/challenge.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ a.active-challenge {
6262
.ev-challenge-card {
6363
height: 425px;
6464
}
65+
.ev-hosted-challenge-card {
66+
height: 475px;
67+
}
6568

6669
.ev-dashboard-card {
6770
min-height: 190px;
@@ -431,6 +434,17 @@ md-select .md-select-value span:first-child:after {
431434
text-align: center;
432435
}
433436
}
437+
.challenges-container {
438+
margin-top: 20px;
439+
min-height: 200px;
440+
441+
.hosted-challenge-card-content {
442+
padding: 20px;
443+
text-align: left;
444+
}
445+
}
446+
447+
434448

435449
.github-icon-link {
436450
margin-right: 10px;

‎frontend/src/views/web/hosted-challenges.html‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,28 @@
2727

2828
<!-- Ongoing challenges tab content -->
2929
<div class="challenges-container" ng-if="hostedChallenges.currentTab === 'ongoing'">
30-
<div ng-if="!hostedChallenges.ongoingChallenges.length" class="card-content">
30+
<div ng-if="!hostedChallenges.ongoingChallenges.length" class="hosted-challenge-card-content">
3131
<p>You haven't hosted any ongoing challenge. Please <a ui-sref="web.challenge-host-teams" class="highlight-link">click here</a> to host one!</p>
3232
</div>
3333
<div class="row" ng-if="hostedChallenges.ongoingChallenges.length">
3434
<div class="col s12 m3" ng-repeat="challenge in hostedChallenges.ongoingChallenges">
3535
<a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
36-
<div class="card ev-card-panel ev-challenge-card ev-card-hover">
36+
<div class="card ev-card-panel ev-challenge-card1 ev-card-hover">
3737
<div class="card-image ev-card-image">
3838
<img class="bg-img" ng-src="{{challenge.image}}">
3939
<span class=" ev-card-title fs-14"><span><img ng-src="{{challenge.image}}" ></span>{{challenge.title}}</span>
4040
</div>
41-
<div class="card-content">
42-
<li ng-repeat="tags in challenge.list_tags" class="list-inline-item chip orange white-text tag-size">{{tags}}</li>
41+
<div class="hosted-challenge-card-content">
42+
<li ng-repeat="tags in challenge.list_tags | limitTo: 1" class="list-inline-item chip orange white-text tag-size">
43+
{{tags | limitTo: 12}}{{tags.length > 12 ? '...' : ''}}
44+
</li>
4345
<li ng-if="challenge.domain" class="list-inline-item chip light-blue white-text">{{challenge.domain}}</li>
4446
<p><strong class="text-light-black fs-12">Organized by</strong>
4547
<strong>{{challenge.creator.team_name}}</strong></p>
4648
<p><strong class="text-light-black fs-12">Starts on</strong>
47-
<br> <strong>{{challenge.start_date | date:'medium'}} {{challenge.time_zone}} ({{challenge.gmt_zone}})</strong></p>
49+
<br> <strong>{{challenge.start_date | date:'medium'}} {{challenge.time_zone}}</strong></p>
4850
<p><strong class="text-light-black fs-12">Ends on</strong>
49-
<br> <strong>{{challenge.end_date | date:'medium'}} {{challenge.time_zone}} ({{challenge.gmt_zone}})</strong></p>
51+
<br> <strong>{{challenge.end_date | date:'medium'}} {{challenge.time_zone}}</strong></p>
5052
<div class="margin-top-btm">
5153
<span ng-if="challenge.approved_by_admin">
5254
<div class="chip green white-text">Approved</div>
@@ -71,26 +73,28 @@
7173

7274
<!-- Upcoming challenges tab content -->
7375
<div class="challenges-container" ng-if="hostedChallenges.currentTab === 'upcoming'">
74-
<div ng-if="!hostedChallenges.upcomingChallenges.length" class="card-content">
76+
<div ng-if="!hostedChallenges.upcomingChallenges.length" class="hosted-challenge-card-content">
7577
<p>You haven't hosted any upcoming challenge. Please <a ui-sref="web.challenge-host-teams" class="highlight-link">click here</a> to host one!</p>
7678
</div>
7779
<div class="row" ng-if="hostedChallenges.upcomingChallenges.length">
7880
<div class="col s12 m3" ng-repeat="challenge in hostedChallenges.upcomingChallenges">
7981
<a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
80-
<div class="card ev-card-panel ev-challenge-card ev-card-hover">
82+
<div class="card ev-card-panel ev-challenge-card1 ev-card-hover">
8183
<div class="card-image ev-card-image">
8284
<img class="bg-img" ng-src="{{challenge.image}}">
8385
<span class=" ev-card-title fs-14"><span><img ng-src="{{challenge.image}}" ></span>{{challenge.title}}</span>
8486
</div>
85-
<div class="card-content">
86-
<li ng-repeat="tags in challenge.list_tags" class="list-inline-item chip orange white-text tag-size">{{tags}}</li>
87+
<div class="hosted-challenge-card-content">
88+
<li ng-repeat="tags in challenge.list_tags | limitTo: 1" class="list-inline-item chip orange white-text tag-size">
89+
{{tags | limitTo: 12}}{{tags.length > 12 ? '...' : ''}}
90+
</li>
8791
<li ng-if="challenge.domain" class="list-inline-item chip light-blue white-text">{{challenge.domain}}</li>
8892
<p><strong class="text-light-black fs-12">Organized by</strong>
8993
<strong>{{challenge.creator.team_name}}</strong></p>
9094
<p><strong class="text-light-black fs-12">Starts on</strong>
91-
<br> <strong>{{challenge.start_date | date:'medium'}} {{challenge.time_zone}} ({{challenge.gmt_zone}})</strong></p>
95+
<br> <strong>{{challenge.start_date | date:'medium'}} {{challenge.time_zone}}</strong></p>
9296
<p><strong class="text-light-black fs-12">Ends on</strong>
93-
<br> <strong>{{challenge.end_date | date:'medium'}} {{challenge.time_zone}} ({{challenge.gmt_zone}})</strong></p>
97+
<br> <strong>{{challenge.end_date | date:'medium'}} {{challenge.time_zone}}</strong></p>
9498
<div class="margin-top-btm">
9599
<span ng-if="challenge.approved_by_admin">
96100
<div class="chip green white-text">Approved</div>
@@ -115,26 +119,28 @@
115119

116120
<!-- Past challenges tab content -->
117121
<div class="challenges-container" ng-if="hostedChallenges.currentTab === 'past'">
118-
<div ng-if="!hostedChallenges.pastChallenges.length" class="card-content">
122+
<div ng-if="!hostedChallenges.pastChallenges.length" class="hosted-challenge-card-content">
119123
<p>You haven't hosted any past challenge.</p>
120124
</div>
121125
<div class="row" ng-if="hostedChallenges.pastChallenges.length">
122126
<div class="col s12 m3" ng-repeat="challenge in hostedChallenges.pastChallenges">
123127
<a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
124-
<div class="card ev-card-panel ev-challenge-card ev-card-hover">
128+
<div class="card ev-card-panel ev-challenge-card1 ev-card-hover">
125129
<div class="card-image ev-card-image">
126130
<img class="bg-img" ng-src="{{challenge.image}}">
127131
<span class=" ev-card-title fs-14"><span><img ng-src="{{challenge.image}}" ></span>{{challenge.title}}</span>
128132
</div>
129-
<div class="card-content">
130-
<li ng-repeat="tags in challenge.list_tags" class="list-inline-item chip orange white-text tag-size">{{tags}}</li>
133+
<div class="hosted-challenge-card-content">
134+
<li ng-repeat="tags in challenge.list_tags | limitTo: 1" class="list-inline-item chip orange white-text tag-size">
135+
{{tags | limitTo: 12}}{{tags.length > 12 ? '...' : ''}}
136+
</li>
131137
<li ng-if="challenge.domain" class="list-inline-item chip light-blue white-text">{{challenge.domain}}</li>
132138
<p><strong class="text-light-black fs-12">Organized by</strong>
133139
<strong>{{challenge.creator.team_name}}</strong></p>
134140
<p><strong class="text-light-black fs-12">Starts on</strong>
135-
<br> <strong>{{challenge.start_date | date:'medium'}} {{challenge.time_zone}} ({{challenge.gmt_zone}})</strong></p>
141+
<br> <strong>{{challenge.start_date | date:'medium'}} {{challenge.time_zone}}</strong></p>
136142
<p><strong class="text-light-black fs-12">Ends on</strong>
137-
<br> <strong>{{challenge.end_date | date:'medium'}} {{challenge.time_zone}} ({{challenge.gmt_zone}})</strong></p>
143+
<br> <strong>{{challenge.end_date | date:'medium'}} {{challenge.time_zone}}</strong></p>
138144
<div class="margin-top-btm">
139145
<span ng-if="challenge.approved_by_admin">
140146
<div class="chip green white-text">Approved</div>

0 commit comments

Comments
 (0)