From ec5f1d22fb456bf39e735e166aff2e310438b089 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 8 Jan 2021 03:01:01 +0530 Subject: [PATCH] Home page UI Alignment fix + Page on enter animations + Player details page UI --- src/app/home/home.page.html | 114 +++---- src/app/home/home.page.scss | 7 +- src/app/live/live.page.html | 87 +++--- src/app/live/live.page.scss | 23 +- src/app/player-stats/player-stats.page.html | 164 +++++----- src/app/player-stats/player-stats.page.scss | 315 +++++++++++++++++--- src/global.scss | 20 ++ 7 files changed, 492 insertions(+), 238 deletions(-) diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index ef31170..8189590 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -1,62 +1,64 @@ -
-

# Discover

- -
- - -
-
- - +
+
+

# Discover

- -
-
- -
- - - - -
- -
-

{{ news.heading }}

- -
- {{ news.description }} -
-
- -
-
- + +
+
+ + + + +
+
+ +
+ + - - - - - - - - - +
+ +
+

{{ news.heading }}

+ +
+ {{ news.description }} +
+
+ +
+
+ + + +
+ + +
+ + + +
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 1d032be..2203fe1 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -59,8 +59,8 @@ ion-slides { left: 0; top: 0; z-index: 1; - overflow: visible; - height: calc(100vh - 40%); + overflow: visible; + height: 65vh; ion-slide { display: block; @@ -175,13 +175,12 @@ ion-slides { justify-content: space-between; width: 100%; height: 50px; - margin-top: -1px; padding: 0 3%; position: relative; 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; z-index: 1; - margin: 0 auto 20px; + margin: 0 auto; .shortcuts { display: flex; diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 70a5512..c62f9b0 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -1,49 +1,54 @@ -
-

- Matches -

- -

- Live / Next Match -

-
+
+ +
+

+ Matches +

+ +

+ Live / Next Match +

+
-
- T20 Qualifiers -

Kings XI Punjab v/s Mumbai Indians

-

Sehwag, KL Rahul

-

Pollard

-
-
-
Kings XI Punjab
-
179/9 (19.3)
-
+
+ T20 Qualifiers +

Kings XI Punjab v/s Mumbai Indians

+

Sehwag, KL Rahul

+

Pollard

-
-
Mumbai Indians
-
10/2 (5.5)
-
+
+
+
Kings XI Punjab
+
179/9 (19.3)
+
+ +
+
Mumbai Indians
+
10/2 (5.5)
+
+
-
- -
    -
  • - - -
    • - -
  • - - -
    • - -
  • - - -
    • -
+ +
    +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • +
+ +
diff --git a/src/app/live/live.page.scss b/src/app/live/live.page.scss index f95ba82..93c027d 100644 --- a/src/app/live/live.page.scss +++ b/src/app/live/live.page.scss @@ -5,28 +5,7 @@ $pink: #d73e53; ion-content { --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 { diff --git a/src/app/player-stats/player-stats.page.html b/src/app/player-stats/player-stats.page.html index 78cd8c0..b0b350b 100644 --- a/src/app/player-stats/player-stats.page.html +++ b/src/app/player-stats/player-stats.page.html @@ -1,95 +1,101 @@ -
-
- -
-
- - -
-
- -
- -
-
- - +
+
+
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +

KL Rahul

+ +
Batsman,
Wicket Keeper
+
+ +
+ +
-

KL Rahul

- -
Batsman / Wicket Keeper
- -
- -
- -
- -
    -
  • - -
    26
    -
    • - -
  • - -
    64
    -
    • - -
  • - -
    18
    -
    • -
-
-
- Now discussing -
- -
    -
  • - -

    - KL Rahul wins the player of the season 2018 confirms BCCI -

    - -
    • - -
  • - -

    - KL Rahul planning to head back to RCB -

    - -
    • -
-
- -
-
ABOUT
-
    -
  • - -

    KL Rahul

    -
    • +
    • -

      26

      +
      26
      • +
    • - -

      Mangaluru

      + +
      64
      • +
    • - -

      43.64

      + +
      18
    -
+ +
+
+

Now discussing

+
+ +
    +
  • + +

    + KL Rahul wins the player of the season 2018 confirms BCCI +

    + +
    • + +
  • + +

    + KL Rahul planning to head back to RCB +

    + +
    • +
+
+ +
+
ABOUT
+
    +
  • + +

    KL Rahul

    +
    • +
  • + +

    26

    +
    • +
  • + +

    Mangaluru

    +
    • +
  • + +

    43.64

    +
    • +
+
+ diff --git a/src/app/player-stats/player-stats.page.scss b/src/app/player-stats/player-stats.page.scss index 78eecdd..13df6ad 100644 --- a/src/app/player-stats/player-stats.page.scss +++ b/src/app/player-stats/player-stats.page.scss @@ -3,37 +3,15 @@ $blue-grey: #949599; ion-content { --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 { display: flex; 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 { background-color: transparent; @@ -61,19 +39,19 @@ ion-content { } .action button { - width: 40px; - height: 40px; + width: 35px; + height: 35px; 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; + margin-left: 15px; ion-icon { color: $blue-grey; - font-size: 20px; + font-size: 17px; } } @@ -82,35 +60,90 @@ ion-content { .player-primary-data { 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 { width: 50%; + position: relative; } .teams-holder { - display: flex; position: relative; z-index: 0; + display: flex; + justify-content: flex-start; - img { + figure { width: 50px; height: 50px; border-radius: 50%; position: relative; z-index: 1; + margin: 0; display: block; + overflow: hidden; + box-shadow: 0px 0px 5px $dark-blue; &:nth-child(2) { - margin-left: -10px; 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%; display: block; + height: 40vh; img { display: block; @@ -120,4 +153,214 @@ ion-content { 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; + } } \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 60942b5..c1964ea 100644 --- a/src/global.scss +++ b/src/global.scss @@ -32,4 +32,24 @@ outline: none; text-decoration: none; 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); + } + } } \ No newline at end of file