From c65b5199609a15254238e4f2b2c2aba61f320db2 Mon Sep 17 00:00:00 2001 From: digvijay26 Date: Wed, 23 Dec 2020 05:53:00 +0530 Subject: [PATCH] new ui changes --- src/assets/css/custom.css | 79 +++- src/assets/images/close.png | Bin 0 -> 195 bytes src/assets/images/discard.svg | 10 + src/assets/images/s-mobile.svg | 28 +- src/assets/images/thought.png | Bin 0 -> 2011 bytes src/assets/images/thoughts-upper.svg | 16 + src/components/AuthorIntro.vue | 74 +++- src/components/EpisodeIntro.vue | 71 ++- src/components/NoScreenshotSingleAuthor.vue | 549 ++++++++++++++++++++---- src/components/Profile.vue | 213 +++++++-- src/components/SingleMobileScreenInsightOne.vue | 548 ++++++++++++++++++----- src/components/SingleMobileScreenInsightTwo.vue | 501 +++++++++++++++++++++ src/components/outro.vue | 378 ++++++++++------ src/router/index.js | 16 +- 14 files changed, 2085 insertions(+), 398 deletions(-) create mode 100644 src/assets/images/close.png create mode 100644 src/assets/images/discard.svg create mode 100644 src/assets/images/thought.png create mode 100644 src/assets/images/thoughts-upper.svg create mode 100644 src/components/SingleMobileScreenInsightTwo.vue diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 8974233..9b70b22 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -193,8 +193,8 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font /* profile data wrp */ .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} -.data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;} -.card-warpper{ width: 283px; background: #fff; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} +.data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 88px;} +.card-warpper{ width: 283px; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} .company-detail{ width: 100%; display: block; float: left; @@ -737,7 +737,7 @@ color: #514DA7;opacity:1; .compare-c .logo-1{ width: 200px; display: block; float: left;} .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; margin-top: 25px;} - .compare-c .logo-2{ width: 200px; display: block; float: left;} + .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} .epi-bg{ position: absolute; bottom: -152px; @@ -753,7 +753,7 @@ color: #514DA7;opacity:1; float: left; width: 49%; background: #fff;} -.intro-startup .footer-top{ width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} +.intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} @@ -897,8 +897,8 @@ color: #514DA7;opacity:1; right: 0;} /* thnaks Wrapper */ .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} - .thanks-l-wrp{ display: block; float: left; width: 504px; margin-bottom: 90px; position: relative; } - .thanks-img{ width: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -271px;} + .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } + .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; box-sizing: border-box; border-radius: 15px; position: relative; @@ -913,7 +913,7 @@ color: #514DA7;opacity:1; list-style-type: none; width: 370px; float: left;} - .thanks-pay-wrp ul li{ float: left; width: 72px;} + .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} .thanks-pay-wrp ul li a span img{ width: 8px; @@ -979,12 +979,11 @@ color: #514DA7;opacity:1; .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} /* single mobile */ - .single-mobileInsight{ width: 441px; display: block; height: 910px;position: absolute; background-image:url('../images/s-mobile.svg'); background-repeat: no-repeat; left: 0; + .single-mobileInsight{ width: 441px; display: block; height: 730px;position: absolute; background-image:url('../images/s-mobile.svg'); background-repeat: no-repeat; left: 0; right: 0; margin: 0 auto; bottom: 0; - top: unset; - background-position: bottom;} + top: unset;} .slide-img{ width: 402px; position: absolute; bottom: 1px; @@ -998,7 +997,7 @@ color: #514DA7;opacity:1; .single-left-Insight-comments{position: absolute; width: 423px; display: block; - top: 183px; + top: 0; left: -332px;} .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; margin-bottom: -20px;} @@ -1187,7 +1186,24 @@ color: #514DA7;opacity:1; .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; float: right;} - .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; right: 0; top: 0px; z-index: 50;} + .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; + transition-property: right; + -webkit-transition-property: right; + -moz-transition-property: right; + -o-transition-property: right; + + transition-duration: 0.3s; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + + transition-timing-function: linear; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + right: -500px; + +} .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;} .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} @@ -1290,4 +1306,41 @@ box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); button:focus{ border:0px; outline: none;} .short_by{left: -100px !important;} input:focus{ outline: none;} -.comments-footer textarea:focus{ outline: none;} \ No newline at end of file +.comments-footer textarea:focus{ outline: none;} +.close_chat_bx{ width: 20px; height: 20px; display: block; float: right; border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;} +.close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} +.close_chat_bx:hover{ background-color: #ccc;} +/* chat box close */ +.cht_close{ + transition-property: right; + -webkit-transition-property: right; + -moz-transition-property: right; + -o-transition-property: right; + + transition-duration: 0.3s; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + + transition-timing-function: linear; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + right: 0px; +} +.p-left-0{ padding-left:0px !important;} +.ps_right{ float: right !important; position: static !important;} +.testi-photos-ct .c-with-photos{ margin-left: 0px; } +.testi-photos-ct .comments-detail{padding-left: 165px !important;} +.ct-width{ width: 400px;} +.m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} +.testi-photos-ct .comments-detail{padding-right: 40px;} +.ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} +.right-corner { border-radius: 25px 25px 2px 25px;} +.upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} +.dynamic-thoughts { width: 200px; display: block; } +.two-screen-spc-top{ top: 100px; right: -286px;} +.joined_wrapper{ position: relative;} +.each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} +.reply-Wdth{ width: 64px;} +.discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} \ No newline at end of file diff --git a/src/assets/images/close.png b/src/assets/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..4458179fdc552ef8e24900b6193b98fb5682c93a GIT binary patch literal 195 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmSQK*5Dp-y;YjHK@~b>u978mM zTPI!QZBXE0?N^O)EdO+0{;|oq2Mm3WO=bysducYxbKIF~=fvdqAi+j0!Q1{j)2_ZN zk~r74%j*_b+7u?xM)FC + + + + + + + + + diff --git a/src/assets/images/s-mobile.svg b/src/assets/images/s-mobile.svg index e10b90b..fe4e543 100644 --- a/src/assets/images/s-mobile.svg +++ b/src/assets/images/s-mobile.svg @@ -1,17 +1,11 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + diff --git a/src/assets/images/thought.png b/src/assets/images/thought.png new file mode 100644 index 0000000000000000000000000000000000000000..769e4bfe696e4ea2792dc37a5f46aa172e3a6a2f GIT binary patch literal 2011 zcmV<12PF83P)n8kZcfa5N{xE5O)H(6F8kf=>$$EusVU$30&P!v@b#MOCkYE z#&ZrNisC0;+Lj@Rvr4*`5 zq_Y>tQkFvh#3fTc5=V$O4DE&GEX5Jm6FONrQOoi$lyM~_&WaO9O8ys4x6~QJ;)u0d zP7tvU-&KjVSWXW^SR5&EDP8U;KGO`~*PK3TqT@&o?Bfw3CXFwKy3&r!A?WyWw5OTXC%z&K^&wN1 z194=xH6;c0{5%M4C63Io__Z;|NSs>vp3GEOj<6Q3Xl}Jniw^p3=t_q{Kut_5 zY01pNs6000SP}!>puFo_culTx#XxFeRlDVpp3X`g;7?|t*@>dN_g&jUy7Mdt`1!F6 z2>1orb;U-zupqidkX=_Cv7TzCsSl8KG>PQS{BZz=zhiH#P;$j1elC1Kgz z*zL+vv_kL6#KNlSXAQI{I@nt>G0;Q1{;DQ)<563SB@=@WYC1SR;+k=H7#T|OB<1$a zcnkyb+ka$5S9@jUEn98av0UW*9OWb24e4&a zEqXw`=~}R$p1D4Tx^NGKpJSg|7)$>vIeJUzj2K3Qic6Z$Vvz%16Mmz^joL}!{dZ6N zSYv5_4aj}qzusHhW@1e}k9!$X!rD|8zpY(GK^!dYVieRf-ap0^&k3js_yYqAg=M%X zPl1i<^=ExlAKfp=DF~miz6tb+_|<>MfwwV^v6dpR{tfe5izDn#yTlMa(u|3*(fcg@HfQAQO^s*5%@KgF>wXzC3Ogn_BY&F`j2(halF-AR%6Ez!we6!`$)eiZI+-* z>{ZJ$eQwIqk0mUopHj5ob!^=*A$r4Ysc$`Blqtk846BgHGAZK7in{wWOo;#d!%zxU zd$lM9rRhos;fCYH5LOJcU`HB05y49Ru6;jU1=cC(&$zK-4B2j9BXVy1uADV9qA!FE z5v9+<#)?tV7UxonAsCvy28Nj_7%mFDyu5O=Pf}_`++#D&FCcUGvkk#e7bNO2-O>~# z1-_ebq(hFy_X@GA-wk0>QBbc;q`=awxForN<~J-;p(`K-aWK5N-_JC?MnOV0q!&eJ zie+9bFXt?U;R{Vc9Es6BGzEq@7pyEVVpMN@y{B2xa4dk-F{PlHF;fLsaZeH#v^S7K z7#bZT^HcN~1W7H5A>7SkIUGy-u%w5;yn7aQr$TB`DlErc=CzbUgfhJ=$t8=F4b>pJ zG+mJv!?5@wnJBJCT+A)!4AXZCR$_^pvSbcIVnD$(LWotIRjWHShO$;P)N(2jDvNkkLcAe9 t)rF?2<|P-PlIG}=-=&1cIi=6@mvGLk@Zo0b3o002ovPDHLkV1gwiz?c94 literal 0 HcmV?d00001 diff --git a/src/assets/images/thoughts-upper.svg b/src/assets/images/thoughts-upper.svg new file mode 100644 index 0000000..1d5b6c1 --- /dev/null +++ b/src/assets/images/thoughts-upper.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/AuthorIntro.vue b/src/components/AuthorIntro.vue index 8a5c87a..fea57f1 100644 --- a/src/components/AuthorIntro.vue +++ b/src/components/AuthorIntro.vue @@ -17,15 +17,20 @@
-
-
vs
-
-
+
+ +
+
-

👋 Hi there! My name is Rashmi, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.

+ +

{{currentSlideData.payload.metaData.textBox}}

- View My Profile + View My Profile
@@ -35,15 +40,16 @@

- + +
-
@@ -69,16 +75,60 @@ export default { name: "AuthorIntro", data() { - return {}; + + return { + allSlide:[], + currentSlideIndex:null, + currentSlideData:null, + }; + }, + mounted() { + var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); + if (allSlideData) { + this.allSlide = JSON.parse(allSlideData); + this.getCurrentSlideData(); + } + }, - mounted() {}, methods: { + getCurrentSlideData(){ + var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); + this.currentSlideIndex = i; + this.currentSlideData = this.allSlide[i] + console.log("currentSlideData",this.currentSlideData) + + }, + goNext(){ + this.currentSlideIndex++ + this.$router.push({ + name: this.allSlide[this.currentSlideIndex].ur, + params: { + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, + slideId: this.allSlide[this.currentSlideIndex].slideId, + }, + }); + + }, + goBack(){ + this.currentSlideIndex-- + this.$router.push({ + name: this.allSlide[this.currentSlideIndex].ur, + params: { + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, + slideId: this.allSlide[this.currentSlideIndex].slideId, + }, + }); + + }, goToLogin() { this.$router.push("/"); }, goToSignUp() { this.$router.push("/signup"); }, + goToProfile() { + this.$router.push("/profile"); + }, }, }; diff --git a/src/components/EpisodeIntro.vue b/src/components/EpisodeIntro.vue index 32c0b12..20e8bc3 100644 --- a/src/components/EpisodeIntro.vue +++ b/src/components/EpisodeIntro.vue @@ -16,11 +16,15 @@
+
-
-
vs
-
-
+
+
+
@@ -28,48 +32,45 @@ Product Growth
-
Apple music vs Spotify
+
{{currentSlideData.payload.metaData.name}}
Author - Rashmi & Shubham + {{currentSlideData.payload.metaData.authors[0]}}
-
- Issue - 06 -
-
+ +
Last updated - 11.11.2020 + {{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}
App - Whitehat Jr. + {{currentSlideData.payload.metaData.app}}
Focus - Product Discovery + {{currentSlideData.payload.metaData.focus}}
Read - 5 min + {{currentSlideData.payload.metaData.readTime}} min
Platform - Android + {{currentSlideData.payload.metaData.platForm}}
- + Start @@ -91,10 +92,42 @@ export default { name: "EpisodeIntro", data() { - return {}; + return { + allSlide:[], + currentSlideIndex:null, + currentSlideData:null, + }; + }, + mounted() { + var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); + if (allSlideData) { + this.allSlide = JSON.parse(allSlideData); + this.getCurrentSlideData(); + } + }, - mounted() {}, methods: { + getCurrentSlideData(){ + var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); + this.currentSlideIndex = i; + this.currentSlideData = this.allSlide[i] + console.log("currentSlideData",this.currentSlideData) + + }, + goNext(){ + this.currentSlideIndex++ + this.$router.push({ + name: this.allSlide[this.currentSlideIndex].ur, + params: { + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, + slideId: this.allSlide[this.currentSlideIndex].slideId, + }, + }); + + }, + goBack(){ + + }, goToLogin() { this.$router.push("/"); }, diff --git a/src/components/NoScreenshotSingleAuthor.vue b/src/components/NoScreenshotSingleAuthor.vue index 74a529d..adc8c86 100644 --- a/src/components/NoScreenshotSingleAuthor.vue +++ b/src/components/NoScreenshotSingleAuthor.vue @@ -1,42 +1,338 @@