Skip to content
This repository has been archived by the owner on Jul 6, 2020. It is now read-only.

Modify the challenge overview page #142

Merged
merged 25 commits into from
Jul 3, 2019
Merged

Modify the challenge overview page #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
94fb076
initial commit
Sanji515 Jun 10, 2019
bcb03eb
Modified the challenge overview
Sanji515 Jun 10, 2019
1fb15d7
fix travis errors and remove unused lines
Sanji515 Jun 10, 2019
959c56d
minor changes
Sanji515 Jun 10, 2019
ef50ad4
minor change
Sanji515 Jun 12, 2019
454444d
Merge branch 'master' into challenge-overview
Sanji515 Jun 13, 2019
558457f
resolved conflicts after updating branch with master and added media …
Sanji515 Jun 15, 2019
6c784be
testing on travis after removing test-log
Sanji515 Jun 16, 2019
ab29a1a
testing in travis by modifying the travis.yml
Sanji515 Jun 20, 2019
b42b345
revert travis.yml file as master
Sanji515 Jun 20, 2019
eaf7dae
checking by changing privacy policy spec file
Sanji515 Jun 20, 2019
5271bef
removed the test case for smae title and nav text in privacy policy s…
Sanji515 Jun 20, 2019
01324a3
removed tests for privacy policy spec
Sanji515 Jun 20, 2019
c30dd14
reverted the privacy policy spec file
Sanji515 Jun 20, 2019
16f8bd8
added service in the modal spec file
Sanji515 Jun 21, 2019
06d854f
changed the path for the servies in the spec file of modal component
Sanji515 Jun 21, 2019
899ec28
typo in modal component spec file
Sanji515 Jun 21, 2019
7625cef
changed the console log of delete challenge and edit challenge title API
Sanji515 Jun 23, 2019
c6f7a97
Merge branch 'master' into challenge-overview
Sanji515 Jun 24, 2019
a72332e
made the line length small to make it readable
Sanji515 Jun 24, 2019
5d91f03
removed unnecessary comments in confirm component
Sanji515 Jun 24, 2019
9b516ec
formatted the challenge component html
Sanji515 Jun 26, 2019
f97be81
Made the apiCall component variable
Sanji515 Jun 27, 2019
3f9ecf2
Merge branch 'master' into challenge-overview
RishabhJain2018 Jul 3, 2019
d06b1db
Merge branch 'master' into challenge-overview
RishabhJain2018 Jul 3, 2019
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
186 changes: 150 additions & 36 deletions src/app/components/challenge/challenge.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,156 @@
<app-header-static>
</app-header-static>
<div class="container-top">
<div class="challenge-container">
<div class="challenge-image-container">
<img class="challenge-cover-image" [src]="challenge['cover_image']" (error)="challenge['cover_image']='assets/images/wide.jpg';" />
</div>
<div class="challenge-content-container">
<div class="challenge-header">
<div class="challenge-img-parent">
<div class="challenge-img-wrap">
<img class="challenge-img" [src]="challenge['image']" (error)="challenge['image']='assets/images/404.png';" />
<div class="mid-container">
<div class="challenge-container">
<div class="challenge-card">
<div class="top-card-container ev-card-panel">
<div class="row card-img-row">
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="image-container">
<img [src]="challenge['image']" width="100%">
</div>
</div>
<div class="col-lg-7 col-md-6">
<div class="card-content">
<p>
<span style="line-height: 1.5" class="fs-18">
<strong style="color: rgba(0, 0, 0, 0.87);"
class="fw-semibold">
{{challenge['title']}}
</strong>
</span>
&nbsp;
<span *ngIf="isChallengeHost">
<a style="padding-right: 4px;"
class="pointer"
(click)="editChallengeTitle()">
<i class="fa fa-pencil"
aria-hidden="true"></i>
</a>
<a class="pointer"
(click)="deleteChallenge()">
<i class="fa fa-trash red-text"
aria-hidden="true"></i>
</a>
</span>
<br>
<span style="line-height: 1.5"
*ngIf="challenge.creator.team_url !=
''">
<strong class="text-light-black fw-semibold
fs-15">Organized by:</strong>
<a class="orange-text"
href="{{challenge['creator']['team_url']}}"
target="_blank">
{{challenge['creator']['team_name']}}
</a>
</span>
<span style="line-height: 1.5"
*ngIf="challenge.creator.team_url ==
''">
<strong class="text-light-black fw-semibold
fs-15">Organized by:</strong>
{{challenge['creator']['team_name']}}
</span>
<br>
<span style="line-height: 1.5"
*ngIf="isChallengeHost">
<span><a class="pointer"
(click)="togglePublishChallengeState()">
<strong class="text-light-black
fw-semibold fs-15">{{publishChallenge.state}}
</strong>
<i class="{{publishChallenge.icon}}"
aria-hidden="true"></i></a>
</span>
</span>
</p>
</div>
</div>
<div class="col-lg-3 col-md-3 align-right">
<button class="stars btn-waves-effect grad-rec-btn
grad-btn-dark ev-btn-dark
fw-light fs-14"
type="submit" [class.is-clickable]="isLoggedIn"
(click)="starToggle(challenge['id'])">
<i class="fa fa-star star"></i>
{{challenge.data}}&nbsp;&nbsp;{{stars['count']}}
</button>
</div>
</div>
<div class="row rm-row-bot card-tab-row">
<div class="col-sm-12">
<ul class="inline-list rm-gut">
<li><a
[class.selected]="localRouter.url.endsWith('overview')"
[routerLink]="['./overview']"
class="text-light-black
fw-semibold fs-15">
<i class="fa fa-info"></i> Overview
</a></li>
<li><a
[class.selected]="localRouter.url.endsWith('evaluation')"
[routerLink]="['./evaluation']"
class="text-light-black
fw-semibold fs-15">
<i class="fa fa-bar-chart-o"></i> Evaluation
</a></li>
<li><a
[class.selected]="localRouter.url.endsWith('phases')"
[routerLink]="['./phases']"
class="text-light-black fw-semibold
fs-15">
<i class="fa fa-level-up"></i> Phases
</a></li>
<li *ngIf="!isParticipated"><a
[class.selected]="localRouter.url.endsWith('participate')"
[routerLink]="['./participate']"
class="text-light-black
fw-semibold fs-15">
<i class="fa fa-free-code-camp"></i>
Participate
</a></li>
<li *ngIf="isParticipated"><a
[class.selected]="localRouter.url.endsWith('submit')"
[routerLink]="['./submit']"
class="text-light-black fw-semibold
fs-15">
<i class="fa fa-upload"></i> Submit
</a></li>
<li *ngIf="isParticipated"><a
[class.selected]="localRouter.url.endsWith('submissions')"
[routerLink]="['./submissions']"
class="text-light-black
fw-semibold fs-15">
<i class="fa fa-eye"></i> My Submissions
</a></li>
<li *ngIf="isChallengeHost"><a
[class.selected]="localRouter.url.endsWith('view-all-submissions')"
[routerLink]="['./view-all-submissions']"
class="text-light-black fw-semibold fs-15">
<i class="fa fa-eye"></i>View All
Submissions
</a></li>
<li><a
[class.selected]="localRouter.url.endsWith('leaderboard')"
[routerLink]="['./leaderboard']"
class="text-light-black
fw-semibold fs-15">
<i class="fa fa-th-list"></i> Leaderboard
</a></li>
<li *ngIf=""><a
[class.selected]="localRouter.url.endsWith('discussions')"
href="{{challenge.forumURL}}"
target="_blank"
class="text-light-black fw-semibold fs-15">
<i class="fa fa-comments"></i> Discussions
</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="challenge-title">
<span class="title">
{{challenge['title']}}
</span>
<span [class.is-starred]="stars['is_starred']" [class.is-clickable]="isLoggedIn" (click)="starToggle(challenge['id'])" class="stars">
<i class="fas fa-star"></i>
{{stars['count']}}
</span>

</div>
<div class="challenge-host">
Organized by: <span>{{challenge['creator']['team_name']}}</span>
</div>
</div>
<div class="horizontal-nav">
<a [class.selected]="localRouter.url.endsWith('overview')" [routerLink]="['./overview']">Overview</a>
<a [class.selected]="localRouter.url.endsWith('evaluation')" [routerLink]="['./evaluation']">Evaluation</a>
<a [class.selected]="localRouter.url.endsWith('phases')" [routerLink]="['./phases']">Phases</a>
<a [class.selected]="localRouter.url.endsWith('participate')" [routerLink]="['./participate']" *ngIf="!isParticipated">Participate</a>
<a [class.selected]="localRouter.url.endsWith('submit')" [routerLink]="['./submit']" *ngIf="isParticipated">Submit</a>
<a [class.selected]="localRouter.url.indexOf('submissions') >= 0" [routerLink]="['./submissions']" *ngIf="isParticipated">My Submissions</a>
<a [class.selected]="localRouter.url.indexOf('leaderboard') >= 0" [routerLink]="['./leaderboard']">Leaderboard</a>
<router-outlet></router-outlet>
</div>
<router-outlet></router-outlet>
</div>
</div>
</div>
<app-footer></app-footer>
160 changes: 50 additions & 110 deletions src/app/components/challenge/challenge.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,123 +2,63 @@
@import './mixins.scss';

.challenge-container {

width:90%;
width: 83.5%;
margin: 0 auto;
margin-top:50px;
margin-bottom:50px;
.challenge-image-container {
z-index:5;
margin: 0 auto;
width:100%;
height:300px;
border-radius:10px;
background:rgba(0,0,0,0.5);
position:relative;
@include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
.challenge-cover-image {
border-radius:10px;
width:100%;
height:300px;
}
}
.challenge-content-container {
position:relative;
z-index:10;
@include box-shadow(0px, 0px, 15px, 5px, $overlay-light);
border-radius:10px;
width:80%;
margin:0 auto;
margin-top:-200px;
color:$gray-darker;
background:white;
.challenge-header {
text-align:center;
.challenge-img-parent {
position: relative;
display:inline-table;
width: 150px;
height: 100px;
position: relative;
@include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
margin:20px;
text-align:center;
.challenge-img-wrap {
display: table-cell;
position: relative;
vertical-align:middle;
margin:0 auto;
.challenge-img {
max-width: 150px;
max-height: 100px;
display: inline-block;
position: relative;
}
}

}

.challenge-title {
text-align: center;
margin:10px;
.stars {
font-size:$fs-12;
color:white;
background:$red-light;
border-radius:5px;
padding:5px;
position: absolute;
right: 50px;
margin-top:5px;
padding: 3px 10px 3px 10px;
&.is-starred {
color: $yellow-light;
}
i {
margin-right: 10px;
}
&.is-clickable {
cursor:pointer;
}
}
.title {
font-size: $fs-24;
color:$gray-darker;
}
}
.challenge-host {
display: inline-block;
margin: 10px;
font-weight: $fw-light;
font-size: $fs-18;
color: $gray-dark;
span {
color: $gray-darker;
}
}
}
}
padding-top: 70px;
}

@include screen-medium {
.challenge-container {
.challenge-content-container {
width:90%;
}
width: 90%;
}
}

@include screen-small {
.challenge-container {
.challenge-content-container {
width:90%;
.challenge-header {
.challenge-title {
.stars {
right: 5px;
margin-top: -25px;
}
}
}
}
}
.challenge-container {
width: 95%;
}
}

.mid-container {
background-color: #fafafa;
}

.card-content p {
padding-bottom: 10px;
}

.top-card-container {
padding: 40px 40px 0 40px;
}

.toggle-participation-text {
display: inline-block;
padding-left: 10px;
}

.top-card-container {
.stars {
cursor: default;
&.is-clickable {
cursor:pointer;
}
}

.card-img-row {
margin-bottom: 20px;
padding: 0 15px 0 15px;
}

.card-tab-row {
padding: 0 12px 0 12px;
}
}

.top-card-container ul.inline-list {
margin: 0px;
}
.top-card-container ul.inline-list li {
margin: 0 40px 1.5% 0;
min-height: 40px;
}
Loading