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

Commit

Permalink
Modify challenge overview page according to current theme(#142)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sanji515 @RishabhJain2018
Sanji515 authored and RishabhJain2018 committed Jul 3, 2019
1 parent 965800b commit 75e8c6f
Show file tree
Hide file tree
Showing 21 changed files with 785 additions and 210 deletions.
186 changes: 150 additions & 36 deletions src/app/components/challenge/challenge.component.html
View file
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
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

0 comments on commit 75e8c6f

Please sign in to comment.