viithiisys / spotlight-frontend

Download as
Browse Code ยป

Commit 9dc773b1b34d2b4954430daa82c5ff92df752105

Authored by Digvijay Singh
1 parent 1c575dae09
Exists in master

new page added

Showing 6 changed files with 256 additions and 30 deletions   Show diff stats
src/assets/css/custom.css
Diff comments   View file @9dc773b
... ... @@ -830,7 +830,7 @@ color: #514DA7;opacity:1;
830 830 box-sizing: border-box; position: absolute; right: 0px; top: 198px;}
831 831 .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto;
832 832 margin-top: -63px;}
833   -.app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;}
  833 +.app-discovery .top-user img{ width:100px; display: block; margin:0 auto; margin-top: 20px;}
834 834 .app-discovery h1{font-size: 60px;
835 835 font-family: 'Zuume'; margin-top: 136px;
836 836 font-weight: 400;
... ... @@ -842,7 +842,7 @@ color: #514DA7;opacity:1;
842 842 line-height: 66px; width: 100%; display: block; text-align: center;
843 843 color: #000;}
844 844 .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;}
845   - .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;}
  845 + .popcorn-set{ position: absolute; width: 120px; display: block; left: 50px; bottom: 0;}
846 846 .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; }
847 847 .intro-startup .footer-bottom ul li.active{ background: #514DA7;}
848 848 .ft-comments-group{display: block;
... ...
src/assets/css/media.css
Diff comments   View file @9dc773b
... ... @@ -95,7 +95,7 @@ and (-webkit-min-device-pixel-ratio: 1) {
95 95 and (max-device-width: 1680px)
96 96 {
97 97 .epi-bg{ left: 13%;}
98   - .popcorn-set{ right: 360px;}
  98 + /* .popcorn-set{ right: 360px;} */
99 99 .ft-comments-group{width: 100%;}
100 100  
101 101  
... ... @@ -151,9 +151,9 @@ and (-webkit-min-device-pixel-ratio: 1) {
151 151 .insights-details{ width: 620px;}
152 152 .episode-intro{ background-position: 101px -266px !important;}
153 153 .spot-light-top{ left: -170px;}
154   - .popcorn-set {
  154 + /* .popcorn-set {
155 155 right: 160px;
156   -}
  156 +} */
157 157 .ft-comments-group{ margin-left:0px; width: 100%;}
158 158 .comment-frm .frm-wdth{ padding-right: 20px;}
159 159  
... ...
src/components/AuthorReadingBreak.vue
Diff comments   View file @9dc773b
... ... @@ -0,0 +1,169 @@
  1 +<template>
  2 + <main class="landing-page">
  3 + <div class="container-fluid episode-intro app-discovery-bg">
  4 + <Header></Header>
  5 +
  6 + <!-- menu wrapper -->
  7 + <div class="intro-startup">
  8 +
  9 +
  10 + <div class="single-author-comments">
  11 + <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
  12 + <div class="ct-l-400">
  13 + <!-- <div class="single-author-li-comments" > -->
  14 + <div class="right-corner font-style">
  15 + <p>
  16 + {{ currentSlideData.payload.metaData.description }}
  17 + </p>
  18 +
  19 + </div>
  20 + <!-- comments box -->
  21 + <!-- </div> -->
  22 + </div>
  23 + <img
  24 + class="s-user-comments m-0"
  25 + :src="currentSlideData.payload.metaData.authorImage"
  26 + />
  27 + <div class="comments-a-wrp ct-width">
  28 + <div class="single-author-li-comments" >
  29 + <div class="a-intro-comments">
  30 + <p>
  31 + {{ currentSlideData.payload.comments[0].comment }}
  32 + </p>
  33 + <ul class="rly-comment-set">
  34 +
  35 + </ul>
  36 + </div>
  37 + <!-- comments box -->
  38 + </div>
  39 + <!-- single author comments -->
  40 + <div class="single-author-li-comments" >
  41 + <div class="a-intro-comments">
  42 + <p>
  43 + {{ currentSlideData.payload.comments[1].comment }}
  44 + </p>
  45 + <ul class="rly-comment-set">
  46 +
  47 + </ul>
  48 + </div>
  49 + </div>
  50 + </div>
  51 + </div>
  52 +
  53 + <div class="footer-nav">
  54 + <div class="footer-top">
  55 + <ul class="top-intro-bt ps_right">
  56 + <li>
  57 + <a href="javascript:void(0);" @click="goBack"
  58 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  59 + >
  60 + </li>
  61 + <li>
  62 + <a href="javascript:void(0);" @click="goNext"
  63 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  64 + slide</a
  65 + >
  66 + </li>
  67 + </ul>
  68 + </div>
  69 + <!-- footer top -->
  70 + <div class="footer-bottom">
  71 + <ul>
  72 + <li></li>
  73 + <li></li>
  74 + </ul>
  75 + </div>
  76 + <!-- footer top -->
  77 + </div>
  78 + <!-- footer -->
  79 + </div>
  80 + <!-- body wrapper -->
  81 + </div>
  82 + <!-- main wrapper -->
  83 + </main>
  84 +</template>
  85 +
  86 +<script>
  87 +import Vue from "vue";
  88 +import router from "../router";
  89 +import Header from "./Header";
  90 +
  91 +export default {
  92 + components: {
  93 + Header: Header,
  94 + },
  95 + name: "AuthorReadingBreak",
  96 +
  97 + data() {
  98 + return {
  99 + allSlide: [],
  100 + currentSlideIndex: null,
  101 + currentSlideData: null,
  102 + };
  103 + },
  104 + mounted() {
  105 + var allSlideData = localStorage.getItem(
  106 + "spotlight_slide" + this.$route.params.caseStudyId
  107 + );
  108 + if (allSlideData) {
  109 + this.allSlide = JSON.parse(allSlideData);
  110 + this.getCurrentSlideData();
  111 + }
  112 + },
  113 + methods: {
  114 + getCurrentSlideData() {
  115 + var i = this.allSlide.findIndex(
  116 + (slide_) => slide_.slideId == this.$route.params.slideId
  117 + );
  118 + this.currentSlideIndex = i;
  119 + this.currentSlideData = this.allSlide[i];
  120 + console.log( "currentSlideData", this.currentSlideData);
  121 + },
  122 + goNext() {
  123 + this.currentSlideIndex++;
  124 + this.$router.push({
  125 + name: this.allSlide[this.currentSlideIndex].ur,
  126 + params: {
  127 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  128 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  129 + },
  130 + });
  131 + },
  132 + goBack() {
  133 + this.currentSlideIndex--;
  134 + this.$router.push({
  135 + name: this.allSlide[this.currentSlideIndex].ur,
  136 + params: {
  137 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  138 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  139 + },
  140 + });
  141 + },
  142 + goToLogin() {
  143 + this.$router.push("/login");
  144 + },
  145 + goToSignUp() {
  146 + this.$router.push("/");
  147 + },
  148 + goToProfile() {
  149 + this.$router.push("/profile");
  150 + },
  151 +
  152 + commentExistCheck(i) {
  153 + console.log(this.commentList[i].comment);
  154 + var returnValue = false;
  155 + if (this.commentList[i].comment) {
  156 + returnValue = true;
  157 + }
  158 + return returnValue;
  159 + },
  160 + },
  161 +};
  162 +</script>
  163 +<style >
  164 +.font-style{
  165 + color:#35338C;
  166 + font-size:2rem;
  167 +}
  168 +
  169 +</style>
0 170 \ No newline at end of file
... ...
src/components/AuthorReadingNow.vue
Diff comments   View file @9dc773b
1 1 <template>
2 2 <main class="landing-page">
3 3 <div class="container-fluid episode-intro app-discovery-bg">
4   - <nav class="navbar navbar-expand-sm spotLight-nav">
5   - <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
6   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
7   - <span class="navbar-toggler-icon"></span>
8   - <span class="navbar-toggler-icon"></span>
9   - <span class="navbar-toggler-icon"></span>
10   - </button>
11   - <div class="user-profile-photo insights-profile">
12   - <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
13   - </div>
14   - </nav>
  4 + <Header></Header>
  5 +
15 6 <!-- menu wrapper -->
16 7 <div class="intro-startup">
17 8 <div class="spot-light-top">
18 9 <img src="../assets/images/spot-light-top.svg" />
19 10 <div class="app-discovery">
20 11 <div class="top-user">
21   - <img src="../assets/images/app-photo.svg" />
  12 + <img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/>
  13 + <img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/>
  14 + <img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/>
  15 + <img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/>
  16 + <!-- <img src="../assets/images/app-photo.svg" /> -->
22 17 </div><!-- top user -->
23   - <h1>App Discovery</h1>
24   - <h2>01</h2>
25   - <img src="../assets/images/discovery.svg" class="discovery-app-img" />
  18 + <h1>{{currentSlideData.payload.metaData.title}}</h1>
  19 + <h2>{{currentSlideData.payload.metaData.count}}</h2>
  20 + <img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" />
26 21 </div><!-- app Disovery -->
27 22  
28 23 </div><!-- spot light top -->
29   - <img src="../assets/images/popcorn-set.svg" class="popcorn-set" />
30   - <div class="footer-nav">
  24 + <img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" />
  25 + <div class="footer-nav">
31 26 <div class="footer-top">
32   - <ul class="top-intro-bt">
33   - <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
34   - <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
  27 + <ul class="top-intro-bt ps_right">
  28 + <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
  29 + <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
35 30 </ul>
36 31 </div><!-- footer top -->
37 32 <div class="footer-bottom">
38 33 <ul>
39   - <li class="active"></li>
  34 + <li></li>
40 35 <li></li>
41 36 </ul>
42 37 </div><!-- footer top -->
... ... @@ -52,22 +47,70 @@
52 47 <script>
53 48 import Vue from "vue";
54 49 import router from "../router";
  50 +import Header from "./Header";
55 51  
56 52 export default {
  53 +components: {
  54 + Header: Header,
  55 + },
57 56 name: "AuthorReadingNow",
58 57  
59 58 data() {
60   - return {};
  59 +
  60 + return {
  61 + allSlide:[],
  62 + currentSlideIndex:null,
  63 + currentSlideData:null,
  64 + };
  65 + },
  66 + mounted() {
  67 + var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
  68 + if (allSlideData) {
  69 + this.allSlide = JSON.parse(allSlideData);
  70 + this.getCurrentSlideData();
  71 + }
  72 +
61 73 },
62   - mounted() {},
63 74 methods: {
  75 + getCurrentSlideData(){
  76 + var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
  77 + this.currentSlideIndex = i;
  78 + this.currentSlideData = this.allSlide[i]
  79 + console.log( this.allSlide[0],"currentSlideData",this.currentSlideData)
  80 +
  81 + },
  82 + goNext(){
  83 + this.currentSlideIndex++
  84 + this.$router.push({
  85 + name: this.allSlide[this.currentSlideIndex].ur,
  86 + params: {
  87 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  88 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  89 + },
  90 + });
  91 +
  92 + },
  93 + goBack(){
  94 + this.currentSlideIndex--
  95 + this.$router.push({
  96 + name: this.allSlide[this.currentSlideIndex].ur,
  97 + params: {
  98 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  99 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  100 + },
  101 + });
  102 +
  103 + },
64 104 goToLogin() {
65 105 this.$router.push("/login");
66 106 },
67 107 goToSignUp() {
68 108 this.$router.push("/");
69 109 },
  110 + goToProfile() {
  111 + this.$router.push("/profile");
  112 + },
70 113  
71 114 },
72 115 };
73 116 -</script>
  117 +</script>
74 118 \ No newline at end of file
... ...
src/components/Profile.vue
Diff comments   View file @9dc773b
... ... @@ -1080,6 +1080,14 @@ export default {
1080 1080 url: "TwoScreenWithInsight",
1081 1081 tempId: "T7_za3c3sYgx7bVvtKzasdf",
1082 1082 },
  1083 + {
  1084 + url: "AuthorReadingNow",
  1085 + tempId: "T8_zb4d4fYgx7bVvtKzasdf",
  1086 + },
  1087 + {
  1088 + url: "AuthorReadingBreak",
  1089 + tempId: "T9_zb3e4fYgy7dVvfKdasdf",
  1090 + },
1083 1091 ];
1084 1092 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
1085 1093 return routes[i].url;
... ...
src/router/index.js
Diff comments   View file @9dc773b
... ... @@ -12,6 +12,7 @@ import ProductInsight from &#39;@/components/ProductInsight&#39;
12 12 import EpisodeIntro from '@/components/EpisodeIntro'
13 13 import AuthorIntro from '@/components/AuthorIntro'
14 14 import AuthorReadingNow from '@/components/AuthorReadingNow'
  15 +import AuthorReadingBreak from '@/components/AuthorReadingBreak'
15 16 import SingleAuthor from '@/components/SingleAuthor'
16 17 import Outro from '@/components/outro'
17 18 import SingleMobileInsight from '@/components/SingleMobileInsight'
... ... @@ -97,11 +98,16 @@ export default new Router({
97 98 component: AuthorIntro,
98 99 },
99 100 {
100   - path: '/author-reading-now',
  101 + path: '/author-reading-now/:caseStudyId/:slideId',
101 102 name: 'AuthorReadingNow',
102 103 component: AuthorReadingNow,
103 104 },
104 105 {
  106 + path: '/author-reading-break/:caseStudyId/:slideId',
  107 + name: 'AuthorReadingBreak',
  108 + component: AuthorReadingBreak,
  109 + },
  110 + {
105 111 path: '/single-author',
106 112 name: 'SingleAuthor',
107 113 component: SingleAuthor,
... ...