From 23f7a8967cd540e455718de6d8fb0dd3709732a6 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 5 Feb 2021 19:23:42 +0530 Subject: [PATCH] Stories UI --- src/app/fan-zone/fan-zone.page.html | 35 ++++- src/app/fan-zone/fan-zone.page.scss | 193 ++++++++++++++++++++++++++ src/app/fan-zone/fan-zone.page.ts | 60 +++++++- src/assets/icons/emojis/heart.png | Bin 0 -> 911 bytes src/assets/icons/emojis/laughing.png | Bin 0 -> 1819 bytes src/assets/icons/emojis/surprised.png | Bin 0 -> 1477 bytes src/assets/icons/emojis/thumb-up.png | Bin 0 -> 1353 bytes 7 files changed, 281 insertions(+), 7 deletions(-) create mode 100644 src/assets/icons/emojis/heart.png create mode 100644 src/assets/icons/emojis/laughing.png create mode 100644 src/assets/icons/emojis/surprised.png create mode 100644 src/assets/icons/emojis/thumb-up.png diff --git a/src/app/fan-zone/fan-zone.page.html b/src/app/fan-zone/fan-zone.page.html index bc07982..f4b687e 100644 --- a/src/app/fan-zone/fan-zone.page.html +++ b/src/app/fan-zone/fan-zone.page.html @@ -12,8 +12,14 @@ @@ -55,6 +61,29 @@ - + + + + +
+
{{ story.name }}
+ +
+ +
+ +
+ +
+ + + +
+ + + diff --git a/src/app/fan-zone/fan-zone.page.scss b/src/app/fan-zone/fan-zone.page.scss index b712d0a..7c078b7 100644 --- a/src/app/fan-zone/fan-zone.page.scss +++ b/src/app/fan-zone/fan-zone.page.scss @@ -65,8 +65,201 @@ .stories { display: inline-block; + list-style: none; + padding: 0 5%; + margin: 20px 0; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; li { + margin-right: 15px; + display: inline-block; + + &.inactive img { + background-color: $blue-grey; + } + + img { + border-radius: 50%; + width: 50px; + height: 50px; + margin: 0 auto; + display: block; + background-color: $pink; + padding: 2px; + object-fit: contain; + } + ion-icon { + width: 50px; + height: 50px; + display: block; + color: $pink; + margin: 0 auto; + } + + span { + display: block; + margin-top: 7px; + color: $blue-grey; + font-size: 0.9rem; + text-align: center; + } + } +} + +.story-slides { + position: fixed; + top: 0; + z-index: 1; + height: calc(100vh - 55px); + width: 100%; + transform: scale(0); + transition: transform 0.3s; + + &.active { + transform: scale(1); + } + + ion-slide { + display: block; + overflow: hidden; + height: 100%; + position: relative; + transition: transform 0.3s; + box-shadow: 10px 10px 15px -7px darken($dark-blue, 10%); + width: 100%; + background-color: rgba(black, 0.9); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + overflow: hidden; + } + + header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: rgba(black, 0.8); + padding: 10px 15px; + + + h5 { + display: flex; + align-items: center; + justify-content: flex-start; + color: $blue-grey; + font-size: 1rem; + margin: 0; + + img { + width: 30px; + height: 30px; + border-radius: 50%; + background-color: $blue-grey; + padding: 1px; + object-fit: contain; + margin-right: 10px; + } + } + + + button { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid $blue-grey; + background-color: transparent; + color: $blue-grey; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + } + } + + .action-buttons { + position: absolute; + left: 0; + bottom: 20px; + width: 70%; + margin-left: 15%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; + background-color: rgba(black, 0.6); + border-radius: 30px; + z-index: 1; + + button { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid rgba($blue-grey, 0.6); + background-color: transparent; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 20px; + } + + ion-icon { + color: white; + font-size: 20px; + } + } + } + + .emoji-buffer { + position: absolute; + left: 0; + top: 70px; + height: 90%; + width: 100%; + transform: translateY(10vh); + + &.active { + animation: riseUp 2s forwards linear; + } + + @keyframes riseUp { + 0% { + transform: translateY(20vh); + } + 50% { + transform: translateY(0); + } + 100% { + opacity: 0; + transform: translateY(-20vh); + } + } + + img { + position: absolute; + left: 0; + top: 0; + width: 30px; + animation: bigSmall 1s infinite linear; + } + + @keyframes bigSmall { + 0% { + transform: scale(1); + } + 25% { + transform: scale(1.2); + } + 50% { + transform: scale(0.9); + } + 100% { + transform: scale(1); + } + } } } \ No newline at end of file diff --git a/src/app/fan-zone/fan-zone.page.ts b/src/app/fan-zone/fan-zone.page.ts index 651b058..56b1802 100644 --- a/src/app/fan-zone/fan-zone.page.ts +++ b/src/app/fan-zone/fan-zone.page.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { IonSlides } from '@ionic/angular'; @Component({ selector: 'app-fan-zone', @@ -6,15 +7,37 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./fan-zone.page.scss'], }) export class FanZonePage implements OnInit { + @ViewChild('slides') slides: IonSlides; + + emojis = ['assets/icons/emojis/heart.png', 'assets/icons/emojis/laughing.png', 'assets/icons/emojis/surprised.png', 'assets/icons/emojis/thumb-up.png']; + + showSlides: boolean = false; fanStories: Array<{ profileImage: string, name: string, storyImage: string, likeCount: number, - opened: boolean + opened: boolean, }>; + selectedEmoji: string = ''; + + emojiBuffer: Array<{ + emoji: string, + positionX: number, + positionY: number, + size: number, + }> = []; + + slideOpts = { + slidesPerView: 1, + initialSlide: 0, + centeredSlides: true, + // simulateTouch: false, + // followFinger: false, + }; + constructor() { } ngOnInit() { @@ -30,9 +53,38 @@ export class FanZonePage implements OnInit { likeCount: 230, profileImage: 'https://m.media-amazon.com/images/M/MV5BMmNkMjNkZmEtYWNhYS00ZjI0LTkzZTktZmViODI1NmI0ZmMyXkEyXkFqcGdeQXVyMTM1ODM2MjM@._V1_UY317_CR130,0,214,317_AL_.jpg', storyImage: 'https://i.pinimg.com/originals/dd/78/64/dd78643b1b2980bcfa83daa2d188fa91.jpg', - opened: false - }] + opened: false, + }]; + } + + generateEmojiStream() { + + this.emojiBuffer = []; + + for (let i = 0; i < 150; i += 1) { + this.emojiBuffer.push({ + emoji: this.selectedEmoji, + positionX: Math.floor((Math.random()) * 100), + positionY: Math.floor((Math.random()) * 100), + size: Math.floor((Math.random()) * 60), + }); + } + + + setTimeout(() => { + this.selectedEmoji = ''; + this.emojiBuffer = []; + }, 2100); + } + + goToSlide(index: number) { + this.slides.slideTo(index); + } + updateStory() { + this.slides.getActiveIndex().then((index) => { + this.fanStories[index].opened = true; + }); } } diff --git a/src/assets/icons/emojis/heart.png b/src/assets/icons/emojis/heart.png new file mode 100644 index 0000000000000000000000000000000000000000..2afeeaa3b7d23e744abe468b4fd66c87e5fb3fac GIT binary patch literal 911 zcmV;A191F_P)8+Tu5RnfDh!Sy*aG;| zpbdi9MX>u)dVq~JmALHtSR?cB1i)XFd6k-XNZmmDoyP!dU$F!wE+d$kx#(wP8_M2C zMIT0F+hy zc&+;-Qa%B|P81&i(I=6{5u{W&7Fh9OrVrvOyC%8NGl=QC2SDOm@!~ZnIdgS*^eqss zR)m1$FsPy&#u(B(1*ymAV$UnwzDJ-T_G!Y(f=F zj&m^eF$Qp@cL=Y4143wGpF#bXiz$jhW2zY$4*<~Ba~pSg8`^G^Wp{(D#>5d8@JYwIo!rwfNnJCIV- z!n-76%P_qVs0NXqH+y*Zp-i(AJBFUs<0%i~B;f1&eD8>1&@B^%L$)1AX>;8M644M^ zy9re1&^_q^gxNs*t-fs5xd8yQE}hDk=tJzpEXu0DQ=TDPU%;n!a5@sr#Wr_a9K>FN-DmT$%O3z>bM1PpcqfiEiLy!H2}IEB=3MwizE*z+kW%xa l<7gzIr~Cib;@3>scNEaRE`l;YL}&uaic`xlme(+9FLft+KAC{74PjE= zF0jualoUxk9+m{ii-hz(=Dv|EUO?N1TD1EYVC5$wo{Uqelzcr@|K^oD3;1AlJ<2%( zc6N5@@^!^POqd%n)KuL*WW9qzSC684hGoHQlUw)G_G8cYn?j#E`LC%3v~8$Gd+!#K zA8XP4_+S`gpn8U7|MnzxbNySAw|6-_|8kgtn4lE=;G0PrmU+4TWXw%E;;arVfBWoY z0bLuyq}}5bxcxsj6x;Tduy%>ZmM^4vpw{qlOcANhpR5o)1B!cQ7(TqA_}xE(yxFR0 z-j!fZtr_!z!M*8^gtcG8vNH()m3uqo?P5aAPqjHTuJG9NRFVa=4FS!R^_hu2QU_npVjPd4o|Y1>pj*^*SRZo z0(u996RjG6%5uv?^L(sf+%q{R(gO*0t#Qa z8%#Wa?;5fxpcDx`Hb$*0eCX(D&FMDHyjh0&`96#17y|l#6XbeA$2HCQPU!4*c%;tb z(G?zkIv*x+q+25#2DTTzeCR}gi&yd)-F)Delui$ly4g!=v=={h1MzO4Z7&!PS8B0= z2s%_ta9Sm{vLdjkAXkbh@AApNTDOobiVy01dFc<8O1U_!{7*pShPB zmU*0RbNTx_nLc{uY8O|oc2Opp}UUCighSG3~uj$$HoO%3bgaXO=;$NLAKQ+Jth!cNFY>I?1OChS1~`)#&y1!ssYf zV;!^Z0iW-GZ5aG~F1a>;D`hzqfFM5w48Xi_`-{n#o6Od0IB5CVj#0j|DNQ(NdB?X* zH5JA!^lQV@UmWEp+oFV=f|^(2FABZ?i?P3Ej59wKf9vqz{Us)l`1z)?0r$-6hkf5a zfkSB^?4YzDO6VIBesws6ZVT{L&!O<1iwnFxC&i;*igQo-c!`dqMpQu71ecyX_uWIo z)d}U6{Pu~eYvTk=Ld)`!6#9_w`i<5gBAH1>96>okf1jfJy$~u1Gw*Y$T$nIG%vC8WV{%&{{>w)=RUR|eNg}a002ov JPDHLkV1m#{YHt7l literal 0 HcmV?d00001 diff --git a/src/assets/icons/emojis/surprised.png b/src/assets/icons/emojis/surprised.png new file mode 100644 index 0000000000000000000000000000000000000000..1ad5be159c379981abead65594536b58737dd99c GIT binary patch literal 1477 zcmV;$1v>hPP)6}0_7yaUd&bdSodMnNmyA{z{y(%G45{&4+6cNsilar8)tU0@zBKO2{^kmPn0|c z`e%f$4v8C~ltG>)=Rd*F{%Yp}PV5}Ox9j9jm|g5)(+r)|{}Z+o!yvoBi(oZXoxwga=iih6#-tbkY^e@qLS4h@V5qAKL1y?l6~h5W5?`;Dwocb&~%~Cj4!A|oVr)D3Y@wlhnu-T(~v2is}Rp7^bQo3 z&3dV76wg%%yM1~G3N?HA`v?T>3I=-&Zsyiza>z=xYN+S3$pOM{pH)LWq_JzT8{eP~ ziOu;({khrRg5H4w;t3RPfYpycZXMWjF!eS}zu%s5#VD-&9Rvdqora4qA(i6|*#lWz z3+nWK(Xkx|fm_-JEZhLsK2OWMy7&tG@3ltTs)u0p@0$WR_|Ko9a=gK6D=G18g7M8I zgXm!UbjUKt@cJ8XF?!E^?0WL4%>I*yLGpDe&d4Wz2`n&f8(u8`07Vm!q#Sw zYPYFvsqK(khf`(uo;N8Li+sHA0Au5)KmrJ_Tks370|^)#KgGxU4p1x>*}dmYoND&! zngzI;kf3!hsE0j=5n*J@FwQyp`}$bBW++=rCKvqXey?3KM1Nl&&N)W53}ZyHzG)FK zUjYyu-#(7Y^=$>L7=`}705CRwinVKo2!a5LAHl@qjlP4AL+@=^Yx(BPSvIVn3px38 zOVgIWk5C0MVht*b9~h?J&l*lG8`fXHKtB0QtMBA9Q2dA>2r_cD*?*hJQ|p*-0b?kO ze!b&Ggw{@}hvc*OoJ>MGy`(GN3h?_O{tmSD3=+>K*h&h3pED;6!rrALk_C#!mnVnJ zCmL@{u1-m+Y3*5z>{)aa{}_l%33g6^2-;=5mDz4McJm7efBYfAz8v>>?_dDHZ+>Cf zygpsh-z7?ADy}_yfjN;MIr_6Dx8uby_O0O$e{Xbs`LAU*{M5DeS5+!gwqaK!2sd|+ z9R4bs0~-%bfIQm?Ilwyy!;Wn8h-Q)oaxe4_caI$Y3hIY^&VK?p+KGU!eCtWNolRA# zPFqsDP#MoNrK(@JYyNpbz|j6`6v+c=tQVIP@Y`QnOx+AMCbQKed*_YhVk9+z>{$8p z{Zlnt^SvNCe&g*L>)xQ?<-Kt6Nqzp3@WH296W)EZrSIx2jylDb(^|LJllvj}hQt4O zr@`LtVq(A8zBx_PLwNKAc@N_YV%i)U>X2GT8at9|N^?lhGbIzqj&S(MznlNJ_|@## z)~*Qu-PESPQiq6SCmHbs;|Z#Yx-4T?H(s0Jh2G(+U%0Ej?41digFSZBuv7PHnz&8s z+MS)+1Qpcy=46Wh;C#0)>f7=4{Mcw$Y|cNbPVaXqgQ#|^YJdVFi7}MLlmCj5Jz>mq fY&$a3N!b4bE=Y9Hr=wa%00000NkvXXu0mjfek{hT literal 0 HcmV?d00001 diff --git a/src/assets/icons/emojis/thumb-up.png b/src/assets/icons/emojis/thumb-up.png new file mode 100644 index 0000000000000000000000000000000000000000..7707c66692ed249e2729d37e39e38d4b86290d34 GIT binary patch literal 1353 zcmV-P1-AN$P)ri5~Yr#+1}*AZ;x9MjEeX zrKbgMA1o32g%je(Pl`l}H?ae-j*EMeH}UN8pZ5q+S0zMsxe(RmqTuO#4OljkJeE=V zTlzww+-DX%1=5h{^|&R#F&+R5vomIBE~f(wBO+e9dCLT@#T+2c>0J5ND+O+Z0K){J z+vlgpAJBp3SOdtiRbErL{CO*y9ud!7t0&RzzB1BeBLd5ZmiluL_+o>9= z9iTVRcekUf=Lg^h4DMqtPhw-ycPC~{&72z<{J<|LJy62=pFRrZ=g!s+?EcC#Icef! zzrx?wM^$w#eZf$ao|}`!tjrl4IZ;Wd*9V44YiB3BO7^QQ4?152DkK1h%iXo>P-CLQ z<&FZVsyxNR@*P~*_brknF{aRU@C5*;dVLC`-7pPm;wA+ z{8_Xh1o-@5nAH4vn-yEP=lO%7ETDdTmOzrgrU0;DRu&(;_L8C~)S$a6qaQhwoE)#b7e7b3zdlyHw}N+3Lse(`=xsVnhi}@}!Z_M4;@7 z4Twzi5P)KLb#?u9#g&q?Bx-C|Qys$UEUUU$yR+(I?R3wClS{T2?^!)3>j`Pys+I9` zvu8?^yovv9uBs61N7Hrom6p*H2s8o>QGA2XMR5tqN40^_gh-DNIO5`4d=Fcm1?~?U zV*#G?CV1A^WZPWBG`x@Vwpb*KQwdkK)he5suAOOWd$10Oy0-lT5F_={A!vwb00000 LNkvXXu0mjf&uEY( literal 0 HcmV?d00001