kj
/
kxip-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Home page UI Alignment fix + Page on enter animations + Player details page UI

master
kj1352 5 years ago
parent
212c347679
commit
ec5f1d22fb
7 changed files with 492 additions and 238 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +58
    -56
      src/app/home/home.page.html
  2. +3
    -4
      src/app/home/home.page.scss
  3. +46
    -41
      src/app/live/live.page.html
  4. +1
    -22
      src/app/live/live.page.scss
  5. +85
    -79
      src/app/player-stats/player-stats.page.html
  6. +279
    -36
      src/app/player-stats/player-stats.page.scss
  7. +20
    -0
      src/global.scss

+ 58
- 56
src/app/home/home.page.html View File

@@ -1,62 +1,64 @@
<ion-content> <ion-content>
<div class="heading-holder">
<h2 class="main-header"> # Discover </h2>
<section class="segments">
<button [ngClass]="{'active' : selectedTab === 'news'}"
(click)="selectedTab = 'news'"> News </button>
<button [ngClass]="{'active' : selectedTab === 'videos'}"
(click)="selectedTab = 'videos'"> Videos </button>
</section>
</div>

<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
<div class="content-container">
<div class="heading-holder">
<h2 class="main-header"> # Discover </h2>
<ion-slide *ngFor="let news of newsData; let i = index"
[ngClass]="{'active' : selectedArticle === i}">
<div class="image-holder">
<figure>
<img [src]="news.image">
</figure>

<button *ngIf="news.type === 'VIDEO'">
<ion-icon name="play"></ion-icon>
</button>

<button *ngIf="news.type === 'ARTICLE'">
<ion-icon name="newspaper"></ion-icon>
</button>
</div>

<section class="content">
<h4> {{ news.heading }} </h4>

<div class="details">
{{ news.description }}
</div>
</section>

<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="news.isLiked = !news.isLiked"
[ngClass]="{'active' : news.isLiked}">
<ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
<span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
<section class="segments">
<button [ngClass]="{'active' : selectedTab === 'news'}"
(click)="selectedTab = 'news'"> News </button>
<button [ngClass]="{'active' : selectedTab === 'videos'}"
(click)="selectedTab = 'videos'"> Videos </button>
</section>
</div>
<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
<ion-slide *ngFor="let news of newsData; let i = index"
[ngClass]="{'active' : selectedArticle === i}">
<div class="image-holder">
<figure>
<img [src]="news.image">
</figure>
<button *ngIf="news.type === 'VIDEO'">
<ion-icon name="play"></ion-icon>
</button> </button>
<button>
<ion-icon name="share-social-outline"></ion-icon>
<button *ngIf="news.type === 'ARTICLE'">
<ion-icon name="newspaper"></ion-icon>
</button> </button>
</section>

<button class="read-more" (click)="showNewsDetails(news);">
<span> More </span>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</section>
</ion-slide>

</ion-slides>
</div>
<section class="content">
<h4> {{ news.heading }} </h4>
<div class="details">
{{ news.description }}
</div>
</section>
<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="news.isLiked = !news.isLiked"
[ngClass]="{'active' : news.isLiked}">
<ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
<span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
</button>
<button>
<ion-icon name="share-social-outline"></ion-icon>
</button>
</section>
<button class="read-more" (click)="showNewsDetails(news);">
<span> More </span>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</section>
</ion-slide>
</ion-slides>
</div>


</ion-content> </ion-content>

+ 3
- 4
src/app/home/home.page.scss View File

@@ -59,8 +59,8 @@ ion-slides {
left: 0; left: 0;
top: 0; top: 0;
z-index: 1; z-index: 1;
overflow: visible;
height: calc(100vh - 40%);
overflow: visible;
height: 65vh;


ion-slide { ion-slide {
display: block; display: block;
@@ -175,13 +175,12 @@ ion-slides {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: 50px; height: 50px;
margin-top: -1px;
padding: 0 3%; padding: 0 3%;
position: relative; position: relative;
box-shadow: 0px 0px 0px var(--light-grey); box-shadow: 0px 0px 0px var(--light-grey);
transition: border-radius 0.3s, transform 0.3s, width 0.3s, margin 0.3s, box-shadow 0.3s; transition: border-radius 0.3s, transform 0.3s, width 0.3s, margin 0.3s, box-shadow 0.3s;
z-index: 1; z-index: 1;
margin: 0 auto 20px;
margin: 0 auto;


.shortcuts { .shortcuts {
display: flex; display: flex;


+ 46
- 41
src/app/live/live.page.html View File

@@ -1,49 +1,54 @@
<ion-content> <ion-content>
<div class="heading-holder">
<h2 class="main-header">
Matches
</h2>

<p>
Live / Next Match
</p>
</div>


<div class="content-container">

<div class="heading-holder">
<h2 class="main-header">
Matches
</h2>

<p>
Live / Next Match
</p>
</div>


<section class="match-card">
<span class="format"> T20 Qualifiers </span>
<header> <h4> Kings XI Punjab v/s Mumbai Indians </h4> </header>
<p> <ion-icon src="assets/icons/helmet.svg"></ion-icon> Sehwag, KL Rahul </p>
<p> <ion-icon name="baseball-outline"></ion-icon> <span> Pollard </span> </p>


<section class="score-card">
<div class="team">
<header> <img src="assets/home-team/KXIP.svg"> <h5> Kings XI Punjab </h5> </header>
<div class="score"> 179/9 <span> (19.3) </span> </div>
</div>
<section class="match-card">
<span class="format"> T20 Qualifiers </span>
<header> <h4> Kings XI Punjab v/s Mumbai Indians </h4> </header>
<p> <ion-icon src="assets/icons/helmet.svg"></ion-icon> Sehwag, KL Rahul </p>
<p> <ion-icon name="baseball-outline"></ion-icon> <span> Pollard </span> </p>


<div class="team">
<header> <img src="assets/logos/mi.svg"> <h5> Mumbai Indians </h5> </header>
<div class="score"> 10/2 <span> (5.5) </span> </div>
</div>
<section class="score-card">
<div class="team">
<header> <img src="assets/home-team/KXIP.svg"> <h5> Kings XI Punjab </h5> </header>
<div class="score"> 179/9 <span> (19.3) </span> </div>
</div>

<div class="team">
<header> <img src="assets/logos/mi.svg"> <h5> Mumbai Indians </h5> </header>
<div class="score"> 10/2 <span> (5.5) </span> </div>
</div>
</section>
</section> </section>
</section>

<ul class="statistical-pages">
<li>
<label> Fixtures </label>
<button> + </button>
</li>

<li>
<label> Results </label>
<button> + </button>
</li>

<li>
<label> Tours </label>
<button> + </button>
</li>
</ul>

<ul class="statistical-pages">
<li>
<label> Fixtures </label>
<button> + </button>
</li>

<li>
<label> Results </label>
<button> + </button>
</li>

<li>
<label> Tours </label>
<button> + </button>
</li>
</ul>

</div>


</ion-content> </ion-content>

+ 1
- 22
src/app/live/live.page.scss View File

@@ -5,28 +5,7 @@ $pink: #d73e53;


ion-content { ion-content {
--background: transparent; --background: transparent;
background-color: white;

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
animation: fadeIn 0.5s forwards;
background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);
} }


.heading-holder { .heading-holder {


+ 85
- 79
src/app/player-stats/player-stats.page.html View File

@@ -1,95 +1,101 @@
<ion-content> <ion-content>
<section class="action-buttons">
<div class="nav">
<button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>
<div class="action">
<button> <ion-icon name="share-social-outline"></ion-icon> </button>
<button> <ion-icon name="bookmark-outline"></ion-icon> </button>
</div>
</section>

<section class="player-primary-data">

<section class="details">
<div class="teams-holder">
<img src="assets/home-team/KXIP.svg" alt="">
<img src="assets/home-team/india.png" alt="">
<div class="content-container">
<section class="action-buttons">
<div class="nav">
<button> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>
<div class="action">
<button> <ion-icon name="share-social-outline"></ion-icon> </button>
<button> <ion-icon name="bookmark-outline"></ion-icon> </button>
</div> </div>
</section>
<section class="player-primary-data">
<section class="details">
<div class="teams-holder">
<figure>
<img src="assets/home-team/KXIP.svg" alt="">
</figure>
<figure>
<img src="assets/home-team/india.png" alt="">
</figure>
</div>
<h2 class="name"> KL Rahul </h2>
<div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman, <br> Wicket Keeper </div>
</section>
<figure class="player-image">
<img src="assets/home-team/player.png" alt="">
</figure>
<h2 class="name"> KL Rahul </h2>
<div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman / Wicket Keeper </div>
</section> </section>

<figure>
<img src="assets/home-team/player.png" alt="">
</figure>

</section>

<ul class="statistics">
<li>
<label> Age </label>
<h5> 26 </h5>
</li>

<li>
<label> Games </label>
<h5> 64 </h5>
</li>

<li>
<label> Centuries </label>
<h5> 18 </h5>
</li>
</ul>
<section class="news">
<header>
Now discussing
</header>

<ul>
<li>
<label> 30 <span> Jan </span> </label>
<p>
KL Rahul wins the player of the season 2018 confirms BCCI
</p>
<button> <ion-icon name="share-social-outline"></ion-icon> </button>
</li>

<li>
<label> 22 <span> Oct </span> </label>
<p>
KL Rahul planning to head back to RCB
</p>
<button> <ion-icon name="share-social-outline"></ion-icon> </button>
</li>
</ul>
</section>

<section class="about">
<header> ABOUT </header>
<ul>
<li>
<label> Full name </label>
<p> KL Rahul </p>
</li>
<ul class="statistics">
<li> <li>
<label> Age </label> <label> Age </label>
<p> 26 </p>
<h5> 26 </h5>
</li> </li>
<li> <li>
<label> Native </label>
<p> Mangaluru </p>
<label> Games </label>
<h5> 64 </h5>
</li> </li>
<li> <li>
<label> Avg. Run rate </label>
<p> 43.64 </p>
<label> Centuries </label>
<h5> 18 </h5>
</li> </li>
</ul> </ul>
</section>
<section class="news">
<header>
<span></span> <h4> Now discussing </h4>
</header>
<ul>
<li>
<label> 30 <span> Jan </span> </label>
<p>
KL Rahul wins the player of the season 2018 confirms BCCI
</p>
<button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
</li>
<li>
<label> 22 <span> Oct </span> </label>
<p>
KL Rahul planning to head back to RCB
</p>
<button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
</li>
</ul>
</section>
<section class="about">
<header> ABOUT </header>
<ul>
<li>
<label> Full name </label>
<p> KL Rahul </p>
</li>
<li>
<label> Age </label>
<p> 26 </p>
</li>
<li>
<label> Native </label>
<p> Mangaluru </p>
</li>
<li>
<label> Avg. Run rate </label>
<p> 43.64 </p>
</li>
</ul>
</section>
</div>


</ion-content> </ion-content>

+ 279
- 36
src/app/player-stats/player-stats.page.scss View File

@@ -3,37 +3,15 @@ $blue-grey: #949599;


ion-content { ion-content {
--background: transparent; --background: transparent;
background-color: white;

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
animation: fadeIn 0.5s forwards;
background-color: $dark-blue;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
background-color: $dark-blue;
} }


.action-buttons { .action-buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
height: 80px;
padding-right: 5%;
padding-left: 3%;
align-items: flex-start;
padding: 20px 5% 10px 3%;
margin-bottom: 20px;
button { button {
background-color: transparent; background-color: transparent;
@@ -61,19 +39,19 @@ ion-content {
} }


.action button { .action button {
width: 40px;
height: 40px;
width: 35px;
height: 35px;
border: 1px solid $blue-grey; border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1); background-color: rgba($blue-grey, 0.1);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 10px;
margin-left: 15px;


ion-icon { ion-icon {
color: $blue-grey; color: $blue-grey;
font-size: 20px;
font-size: 17px;
} }
} }


@@ -82,35 +60,90 @@ ion-content {


.player-primary-data { .player-primary-data {
display: flex; display: flex;

width: 95%;
padding-left: 5%;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('../../assets/home-team/KXIP-lion-white.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0.1;
}
.details { .details {
width: 50%; width: 50%;
position: relative;
} }
.teams-holder { .teams-holder {
display: flex;
position: relative; position: relative;
z-index: 0; z-index: 0;
display: flex;
justify-content: flex-start;


img {
figure {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 0;
display: block; display: block;
overflow: hidden;
box-shadow: 0px 0px 5px $dark-blue;


&:nth-child(2) { &:nth-child(2) {
margin-left: -10px;
z-index: 0; z-index: 0;
object-fit: cover;
transform: translateX(-10px);
} }
img {
width: 100%;
height: 100%;
display: block;
transform: scale(1.5);
}
}
}

.name {
font-size: 2rem;
font-weight: 700;
letter-spacing: 1px;
color: white;
}

.role {
position: absolute;
bottom: 60px;
left: 0;
color: $blue-grey;
font-size: 1rem;
display: flex;
align-items: center;
font-weight: 500;
line-height: 1.5;

ion-icon {
margin-right: 10px;
font-size: 2rem;
vertical-align: middle;
color: var(--brand-red);
} }
} }


figure {
.player-image {
width: 50%; width: 50%;
display: block; display: block;
height: 40vh;


img { img {
display: block; display: block;
@@ -120,4 +153,214 @@ ion-content {
object-position: bottom; object-position: bottom;
} }
} }
}

.statistics {
display: flex;
width: 100%;
padding: 0 5%;
list-style: none;
margin: 0 auto -30px auto;
justify-content: space-between;
transform: translateY(-50px);
z-index: 1;
position: relative;
background-color: rgba($dark-blue, 0.8);
box-shadow: 0px -10px 10px rgba($dark-blue, 0.8);

li {
width: 27vw;
height: 27vw;
background-color: rgba($dark-blue, 0.8);
border: 1px solid rgba($blue-grey, 0.3);
display: flex;
border-radius: 10px;
color: white;
align-items: flex-end;
justify-content: space-between;
padding: 10px;
overflow: hidden;
position: relative;

&::before {
content: '';
position: absolute;
left: 0;
top: 0;
background-color: rgba($blue-grey, 0.1);
width: 100%;
height: 100%;
}
}

label {
font-weight: 500;
font-size: 0.8rem;
align-self: flex-start;
width: 50%;
overflow: visible;
white-space: nowrap;
position: relative;
}

h5 {
width: 50%;
white-space: nowrap;
overflow: visible;
margin: 0;
font-weight: 700;
font-size: 1.8rem;
align-self: flex-end;
text-align: right;
position: relative;
}
}

.news {
width: 90%;
margin: 0 auto 20px auto;

header {
display: flex;
align-items: center;
justify-content: flex-start;

h4 {
color: #148dfc;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.5px;
}

span {
margin-right: 10px;
border: 7px solid #148dfc;
border-radius: 50%;
height: 25px;
width: 25px;
background-color: $dark-blue;
}
}

ul {
list-style: none;
padding: 0;
background-color: lighten($dark-blue, 5%);
box-shadow: 0px 0px 10px darken($dark-blue, 3%);
border-radius: 10px;
overflow: hidden;

li {
width: 90%;
margin: 0 auto;
padding: 15px 0px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba($blue-grey, 0.2);

&:last-child {
border-bottom: none;
}
}

label {
width: 40px;
text-align: center;
color: white;
font-size: 0.8rem;
display: block;
line-height: 1.3;

span {
color: $blue-grey;
font-size: 0.8rem;
display: block;
}
}

p {
width: calc(100% - 100px);
font-size: 0.8rem;
color: white;
font-weight: 500;
line-height: 1.5;
margin: 0;
}

.share-button {
width: 30px;
height: 30px;
border: 1px solid $blue-grey;
background-color: rgba($blue-grey, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;

ion-icon {
color: $blue-grey;
font-size: 15px;
}
}
}
}

.about {
background-color: lighten($dark-blue, 5%);
box-shadow: 0px 0px 10px darken($dark-blue, 3%);
border-radius: 10px;
overflow: hidden;
width: 90%;
margin: 0 auto 40px auto;
padding: 0px 0px 5px 0px;

header {
font-size: 1rem;
font-weight: 500;
color: white;
padding: 15px 5%;
border-bottom: 1px solid rgba($blue-grey, 0.2);
margin: 0;
}

ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;
}

li {
padding: 10px 5px;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba($blue-grey, 0.2);
text-align: left;

&:last-child {
border-bottom: none;
}
}

label {
color: $blue-grey;
font-size: 0.7rem;
display: block;
line-height: 1.3;
width: 100px;
}

p {
width: calc(100% - 100px);
font-size: 0.9rem;
color: white;
font-weight: 500;
line-height: 1.5;
margin: 0;
opacity: 0.8;
}
} }

+ 20
- 0
src/global.scss View File

@@ -32,4 +32,24 @@
outline: none; outline: none;
text-decoration: none; text-decoration: none;
letter-spacing: 0.5px; letter-spacing: 0.5px;
}

figure {
margin: 0;
}

.content-container {
animation: fadeIn 0.4s forwards;
opacity: 0;

@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(10vh);
}
100% {
opacity: 1;
transform: translateY(0vh);
}
}
} }

Write Preview
Loading…
Cancel
Save