viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 5c9c1581cf54825f85a1f1565576703d06f23fd9

Authored by Digvijay Singh
1 parent 2b91d45ce4
Exists in master

new ui changes

Showing 22 changed files with 131 additions and 47 deletions   Show diff stats
src/assets/css/custom.css
Diff comments   View file @5c9c158
1 html, 1 html,
2 body { 2 body {
3 height: 100%; 3 height: 100%;
4 } 4 }
5 5
6 body { 6 body {
7 display: -ms-flexbox; 7 display: -ms-flexbox;
8 display: flex; 8 display: flex;
9 -ms-flex-align: center; 9 -ms-flex-align: center;
10 align-items: center; 10 align-items: center;
11 padding-top: 0px; 11 padding-top: 0px;
12 padding-bottom: 0px; 12 padding-bottom: 0px;
13 background-color:#DFE7EF; 13 background-color:#DFE7EF;
14 font-family: 'Montserrat', sans-serif;
14 } 15 }
15 #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;} 16 #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;}
16 /* heading */ 17 /* heading */
17 h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} 18 h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;}
18 19
19 /* spaces */ 20 /* spaces */
20 .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } 21 .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; }
21 22
22 23
23 .h-100{height: 100%;} 24 .h-100{height: 100%;}
24 .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; 25 .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px;
25 background-size: 45%;} 26 background-size: 45%;}
26 /* navbar */ 27 /* navbar */
27 .spotLight-nav{ padding-top: 20px; z-index: 5;} 28 .spotLight-nav{ padding-top: 20px; z-index: 5;}
28 .spotLight-nav li a{font-family: 'Montserrat', sans-serif; 29 .spotLight-nav li a{font-family: 'Montserrat', sans-serif;
29 font-size: 16px; 30 font-size: 16px;
30 font-style: normal; 31 font-style: normal;
31 font-weight: 400; 32 font-weight: 400;
32 line-height: 22px; 33 line-height: 22px;
33 letter-spacing: -0.7470597624778748px; 34 letter-spacing: -0.7470597624778748px;
34 text-align: left; color:#000; opacity: 0.6; 35 text-align: left; color:#000; opacity: 0.6;
35 } 36 }
36 .spotLight-nav li {margin-right: 14px;} 37 .spotLight-nav li {margin-right: 14px;}
37 .spotLight-nav li.active a{font-weight: 600; opacity: 1;} 38 .spotLight-nav li.active a{font-weight: 600; opacity: 1;}
38 .spotLight-nav li.spotLight-img a{opacity: 1;} 39 .spotLight-nav li.spotLight-img a{opacity: 1;}
39 .navbar-brand{ margin-right: 57px;} 40 .navbar-brand{ margin-right: 57px;}
40 41
41 /* ul list style */ 42 /* ul list style */
42 .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; 43 .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif;
43 font-size: 20px; 44 font-size: 20px;
44 font-style: normal; 45 font-style: normal;
45 font-weight: 500; 46 font-weight: 500;
46 line-height: 24px; float: left; margin-top: 24px; } 47 line-height: 24px; float: left; margin-top: 24px; }
47 .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} 48 .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;}
48 .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} 49 .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;}
49 .sign-in-up-list li span{ float: left;} 50 .sign-in-up-list li span{ float: left;}
50 /* form */ 51 /* form */
51 .form-layout{ width: 100%; display: block; float: left;} 52 .form-layout{ width: 100%; display: block; float: left;}
52 .form-layout form{ display:block; float: left; width: 100%;} 53 .form-layout form{ display:block; float: left; width: 100%;}
53 .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} 54 .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;}
54 .form-layout .social-login{ display: block; width: 339px; 55 .form-layout .social-login{ display: block; width: 339px;
55 margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } 56 margin: 0 auto; margin-top: 37px; margin-bottom: 37px; }
56 .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} 57 .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;}
57 .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} 58 .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;}
58 .form-layout .social-login ul li:nth-child(2){margin:0 37px;} 59 .form-layout .social-login ul li:nth-child(2){margin:0 37px;}
59 .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} 60 .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;}
60 61
61 form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; 62 form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000;
62 63
63 font-family: 'Montserrat', sans-serif; 64 font-family: 'Montserrat', sans-serif;
64 font-size: 13px; 65 font-size: 13px;
65 font-style: normal; 66 font-style: normal;
66 font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} 67 font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;}
67 form input:focus{ box-shadow:0px !important; outline: 0px !important;} 68 form input:focus{ box-shadow:0px !important; outline: 0px !important;}
68 69
69 /* placeholder */ 70 /* placeholder */
70 form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ 71 form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
71 line-height: 18px; 72 line-height: 18px;
72 color: #000000; 73 color: #000000;
73 opacity: 0.5; 74 opacity: 0.5;
74 font-family: 'Montserrat', sans-serif; 75 font-family: 'Montserrat', sans-serif;
75 font-size: 13px; 76 font-size: 13px;
76 font-style: normal; 77 font-style: normal;
77 font-weight: 600; 78 font-weight: 600;
78 } 79 }
79 80
80 form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 81 form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
81 line-height: 18px; 82 line-height: 18px;
82 color: #000000; 83 color: #000000;
83 opacity: 0.5; 84 opacity: 0.5;
84 font-family: 'Montserrat', sans-serif; 85 font-family: 'Montserrat', sans-serif;
85 font-size: 13px; 86 font-size: 13px;
86 font-style: normal; 87 font-style: normal;
87 font-weight: 600; 88 font-weight: 600;
88 } 89 }
89 90
90 form input::-ms-input-placeholder { /* Microsoft Edge */ 91 form input::-ms-input-placeholder { /* Microsoft Edge */
91 line-height: 18px; 92 line-height: 18px;
92 color: #000000; 93 color: #000000;
93 opacity: 0.5; 94 opacity: 0.5;
94 font-family: 'Montserrat', sans-serif; 95 font-family: 'Montserrat', sans-serif;
95 font-size: 13px; 96 font-size: 13px;
96 font-style: normal; 97 font-style: normal;
97 font-weight: 600; 98 font-weight: 600;
98 } 99 }
99 /* placeholder */ 100 /* placeholder */
100 .sb-button{ background: #514DA7; 101 .sb-button{ background: #514DA7;
101 height: 50px; 102 height: 50px;
102 line-height: 35px; 103 line-height: 35px;
103 color: #fff; 104 color: #fff;
104 font-family: 'Montserrat', sans-serif; 105 font-family: 'Montserrat', sans-serif;
105 font-size: 13px; 106 font-size: 13px;
106 font-style: normal; 107 font-style: normal;
107 font-weight: 600; 108 font-weight: 600;
108 width: 100%;} 109 width: 100%;}
109 .sb-button img{ margin-right: 10px; width: 20px;} 110 .sb-button img{ margin-right: 10px; width: 20px;}
110 .sb-button:hover{ color:#fff;} 111 .sb-button:hover{ color:#fff;}
111 .form-layout p{margin-top:17px ;} 112 .form-layout p{margin-top:17px ;}
112 .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} 113 .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;}
113 .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} 114 .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;}
114 .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 12px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} 115 .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 12px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;}
115 .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; 116 .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important;
116 } 117 }
117 .form-layout p a:hover{ color:#000;} 118 .form-layout p a:hover{ color:#000;}
118 .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} 119 .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;}
119 .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} 120 .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;}
120 .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} 121 .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;}
121 .welcome-hd-back{ 122 .welcome-hd-back{
122 font-family: 'Bebas Neue', cursive; 123 font-family: 'Bebas Neue', cursive;
123 font-style: normal; 124 font-style: normal;
124 font-weight: 600; 125 font-weight: 600;
125 font-size: 106px; 126 font-size: 106px;
126 line-height: 106px; 127 line-height: 106px;
127 color: #000000; 128 color: #000000;
128 } 129 }
129 .form-layout .go-back span{ font-weight: 500 !important;} 130 .form-layout .go-back span{ font-weight: 500 !important;}
130 .reset-pass-spc{ margin-top: 110px;} 131 .reset-pass-spc{ margin-top: 110px;}
131 132
132 /* profile */ 133 /* profile */
133 .inner-wrp { 134 .inner-wrp {
134 height: 100%; 135 height: 100%;
135 padding-left: 88px; 136 padding-left: 88px;
136 padding-right: 37px; 137 padding-right: 37px;
137 background:#fff;; 138 background:#fff;;
138 font-family: 'Montserrat', sans-serif; 139 font-family: 'Montserrat', sans-serif;
139 140
140 } 141 }
141 .user-profile-photo{ width: 40px; position: relative; display: block; 142 .user-profile-photo{ width: 40px; position: relative; display: block;
142 height: 40px; 143 height: 40px;
143 border-radius: 100px; 144 border-radius: 100px;
144 padding: 1px;} 145 padding: 1px;}
145 .user-profile-photo a, img{ width: 100%;} 146 .user-profile-photo a, img{ width: 100%;}
146 .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;} 147 .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;}
147 .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} 148 .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;}
148 .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} 149 .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;}
149 .user-profile{ display: block; 150 .user-profile{ display: block;
150 float: left; 151 float: left;
151 margin-left:30px; 152 margin-left:30px;
152 position: relative; 153 position: relative;
153 width: 760px;} 154 width: 760px;}
154 .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} 155 .user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;}
155 .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} 156 .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;}
156 .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} 157 .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;}
157 .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} 158 .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;}
158 .talk-to-me ul li{ display: block; float: left;margin-right:3px;} 159 .talk-to-me ul li{ display: block; float: left;margin-right:3px;}
159 .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} 160 .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;}
160 .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } 161 .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; }
161 .joined-info li a{ color:#000; opacity: 0.5;} 162 .joined-info li a{ color:#000; opacity: 0.5;}
162 .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} 163 .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;}
163 .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} 164 .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;}
164 .joined-info li{ float: left;} 165 .joined-info li{ float: left;}
165 166
166 /* list style */ 167 /* list style */
167 .list-style-group{ width: 100%; display: block; float: left;} 168 .list-style-group{ width: 100%; display: block; float: left;}
168 .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} 169 .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;}
169 .list-style{list-style-type: none; margin:0px; padding: 0px;} 170 .list-style{list-style-type: none; margin:0px; padding: 0px;}
170 .list-style li{ float: left;} 171 .list-style li{ float: left;}
171 .list-style li a{ display: block; float: left;} 172 .list-style li a{ display: block; float: left;}
172 .list-style li a img{ width: 48px; display: block; float: left; } 173 .list-style li a img{ width: 48px; display: block; float: left; }
173 .list-spc-top{ margin-top:15px ;} 174 .list-spc-top{ margin-top:15px ;}
174 175
175 /* social connects */ 176 /* social connects */
176 .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} 177 .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;}
177 .social-connects li{ float: left; margin-right:0px ;} 178 .social-connects li{ float: left; margin-right:0px ;}
178 .social-connects li a{ display: block; float: left; padding: 11px;} 179 .social-connects li a{ display: block; float: left; padding: 11px;}
179 .social-connects li a img.twitter{ margin-top:3px;} 180 .social-connects li a img.twitter{ margin-top:3px;}
180 .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} 181 .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
181 .social-connects li a img{ width: 19px; display: block; float: left;} 182 .social-connects li a img{ width: 19px; display: block; float: left;}
182 .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; 183 .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0;
183 float: left;} 184 float: left;}
184 .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} 185 .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;}
185 186
186 /* profile tab */ 187 /* profile tab */
187 .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} 188 .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;}
188 .top-brd{border-top: 1px solid #DFE7EF;} 189 .top-brd{border-top: 1px solid #DFE7EF;}
189 .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} 190 .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;}
190 .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} 191 .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;}
191 .profile-tab li.active{ border-bottom: 4px solid #ef484f;} 192 .profile-tab li.active{ border-bottom: 4px solid #ef484f;}
192 .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } 193 .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; }
193 194
194 /* profile data wrp */ 195 /* profile data wrp */
195 .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} 196 .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;}
196 .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 88px;} 197 .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;}
197 .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;} 198 .card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; 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;}
198 .company-detail{ width: 100%; 199 .company-detail{ width: 100%;
199 display: block; 200 display: block;
200 float: left; 201 float: left;
201 position: relative; 202 position: relative;
202 margin-top: -63px; 203 margin-top: -63px;
203 margin-bottom: 21px;} 204 margin-bottom: 21px;}
204 .company-detail .c-logo{ width: 82px; display: block; float: left;} 205 .company-detail .c-logo{ width: 82px; display: block; float: left;}
205 .company-detail .c-logo img{ width: 100%;} 206 .company-detail .c-logo img{ width: 100%;}
206 .company-detail .c-tag img{ width: 100%;} 207 .company-detail .c-tag img{ width: 100%;}
207 .company-detail .c-tag { width: 89px; display: block; float: right;} 208 .company-detail .c-tag { width: 89px; display: block; float: right;}
208 .card-warpper h1{width: 198px; padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} 209 .card-warpper h1{width: 260px; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;}
209 .card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;} 210 .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;}
210 .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} 211 .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;}
211 .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} 212 .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;}
212 .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } 213 .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 260px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; }
213 .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;} 214 .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;}
214 .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} 215 .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;}
215 .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} 216 .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;}
216 /* colors */ 217 /* colors */
217 .cape-honey{ background: #fde2a3;} 218 .cape-honey{ background: #fde2a3;}
218 .rose-bud{ background: #fba29a;} 219 .rose-bud{ background: #fba29a;}
219 .pattens-blue{ background: #ceeced;} 220 .pattens-blue{ background: #ceeced;}
220 221
221 .insight-design{ background: #FBC647;} 222 .insight-design{ background: #FBC647;}
222 .insight-product{ background: #9DDADB;} 223 .insight-product{ background: #9DDADB;}
223 .insight-marketing{ background: #F74536;} 224 .insight-marketing{ background: #F74536;}
224 .insight-pricing{ background: #C1C0FE;} 225 .insight-pricing{ background: #C1C0FE;}
225 .insight-psychology{ background: #477970;} 226 .insight-psychology{ background: #477970;}
226 .no-cursor{ 227 .no-cursor{
227 cursor: default !important; 228 cursor: default !important;
228 } 229 }
229 .no-underline{ 230 .no-underline{
230 text-decoration: none !important; 231 text-decoration: none !important;
231 } 232 }
232 .cursor-pointer{ 233 .cursor-pointer{
233 cursor: pointer !important; 234 cursor: pointer !important;
234 } 235 }
235 /* add new card */ 236 /* add new card */
236 .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} 237 .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;}
237 .add-card-warpper a{ display: block; 238 .add-card-warpper a{ display: block;
238 width: 86px; 239 width: 86px;
239 margin: 0 auto; 240 margin: 0 auto;
240 margin-top: 92px;} 241 margin-top: 92px;}
241 242
242 /* New Profile Buttons */ 243 /* New Profile Buttons */
243 .profile-buttons{ width: 261px; display: block; margin:0 auto;} 244 .profile-buttons{ width: 261px; display: block; margin:0 auto;}
244 /* button sm */ 245 /* button sm */
245 .profile-sm-bt{ width: 180px; 246 .profile-sm-bt{ width: 180px;
246 height: 54px; 247 height: 54px;
247 border-radius: 5px; 248 border-radius: 5px;
248 border: 1px solid #514DA7; 249 border: 1px solid #514DA7;
249 color: #514DA7; 250 color: #514DA7;
250 font-size: 16px; 251 font-size: 16px;
251 font-weight: 500; 252 font-weight: 500;
252 display: block; 253 display: block;
253 line-height: 55px; 254 line-height: 55px;
254 text-align: center;} 255 text-align: center;}
255 .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} 256 .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
256 /* button md */ 257 /* button md */
257 .profile-md-bt{ width:233px; 258 .profile-md-bt{ width:233px;
258 height: 54px; 259 height: 54px;
259 border-radius: 5px; 260 border-radius: 5px;
260 border: 1px solid #514DA7; 261 border: 1px solid #514DA7;
261 color: #514DA7; 262 color: #514DA7;
262 font-size: 16px; 263 font-size: 16px;
263 font-weight: 500; 264 font-weight: 500;
264 display: block; 265 display: block;
265 line-height: 55px; 266 line-height: 55px;
266 text-align: center;} 267 text-align: center;}
267 .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} 268 .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
268 /* button lg */ 269 /* button lg */
269 .profile-lg-bt{ width:261px; 270 .profile-lg-bt{ width:261px;
270 height: 54px; 271 height: 54px;
271 border-radius: 5px; 272 border-radius: 5px;
272 border: 1px solid #514DA7; 273 border: 1px solid #514DA7;
273 color: #514DA7; 274 color: #514DA7;
274 font-size: 16px; 275 font-size: 16px;
275 font-weight: 500; 276 font-weight: 500;
276 display: block; 277 display: block;
277 line-height: 55px; 278 line-height: 55px;
278 text-align: center;} 279 text-align: center;}
279 .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} 280 .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
280 .center-and-spc{ margin:0 auto; margin-bottom:15px;} 281 .center-and-spc{ margin:0 auto; margin-bottom:15px;}
281 .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} 282 .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;}
282 /* Replies */ 283 /* Replies */
283 .replies{ display: block; float: left;} 284 .replies{ display: block; float: left;}
284 .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} 285 .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;}
285 .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} 286 .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;}
286 .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; 287 .replies-wrp h1 span{font-family: 'Montserrat', sans-serif;
287 font-size: 12px; 288 font-size: 12px;
288 font-style: normal; 289 font-style: normal;
289 font-weight: 400; 290 font-weight: 400;
290 line-height: 14px; color:#000; opacity: 0.5;} 291 line-height: 14px; color:#000; opacity: 0.5;}
291 .comment-spc{ margin-left:9px ;} 292 .comment-spc{ margin-left:9px ;}
292 .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} 293 .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;}
293 .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} 294 .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;}
294 295
295 /* team */ 296 /* team */
296 .verified-team{ width: 129px; 297 .verified-team{ width: 129px;
297 display: inline-table; 298 display: inline-table;
298 margin-top: 7px; 299 margin-top: 7px;
299 position: absolute; 300 position: absolute;
300 margin-left: 10px;} 301 margin-left: 10px;}
301 .verified-team img{ width: 100%; display: block; float: left;} 302 .verified-team img{ width: 100%; display: block; float: left;}
302 .active-company{ border-bottom: 4px solid #ef484f;} 303 .active-company{ border-bottom: 4px solid #ef484f;}
303 .active-company a{ font-weight: 700 !important;} 304 .active-company a{ font-weight: 700 !important;}
304 .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} 305 .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;}
305 .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} 306 .active-company a img.c-icon{margin-right: 0px; margin-left:10px;}
306 .c-social li a img{ width: auto !important;} 307 .c-social li a img{ width: auto !important;}
307 .company-footer{ width: 100%; display: block; float: left;} 308 .company-footer{ width: 100%; display: block; float: left;}
308 .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} 309 .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;}
309 .company-footer ul li{float: left; margin-right: 10px;} 310 .company-footer ul li{float: left; margin-right: 10px;}
310 .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} 311 .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;}
311 .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} 312 .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;}
312 .company-footer .next{float: right; margin-top: -25px; 313 .company-footer .next{float: right; margin-top: -25px;
313 margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} 314 margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;}
314 .company-footer .next img{ width: 25px; 315 .company-footer .next img{ width: 25px;
315 margin-top: 17px; 316 margin-top: 17px;
316 margin-left: 16px;} 317 margin-left: 16px;}
317 .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} 318 .card-c-space-0{ padding: 0px !important; background-color: transparent !important;}
318 .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; 319 .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff;
319 border-radius: 4px; 320 border-radius: 4px;
320 padding: 23px; } 321 padding: 23px; }
321 /* members */ 322 /* members */
322 .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} 323 .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;}
323 .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} 324 .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;}
324 .members-wrp .member-list a{ display: block; float: left; width: 100%;} 325 .members-wrp .member-list a{ display: block; float: left; width: 100%;}
325 .members-wrp .member-list a img{ width: 20%;display:block; float: left;} 326 .members-wrp .member-list a img{ width: 20%;display:block; float: left;}
326 .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} 327 .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;}
327 .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} 328 .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;}
328 .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} 329 .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;}
329 .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} 330 .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;}
330 .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; 331 .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important;
331 margin-left: 8px !important; 332 margin-left: 8px !important;
332 margin-top: 6px; 333 margin-top: 6px;
333 border-radius: 5px;} 334 border-radius: 5px;}
334 335
335 /* popup */ 336 /* popup */
336 .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} 337 .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);}
337 .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} 338 .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;}
338 .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ 339 .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */
339 filter: blur(8px); 340 filter: blur(8px);
340 -webkit-filter: blur(8px);} 341 -webkit-filter: blur(8px);}
341 .popup-set{ width: 530px; 342 .popup-set{ width: 530px;
342 background-color: #fff; 343 background-color: #fff;
343 border-radius: 0 40px 40px 40px; 344 border-radius: 0 40px 40px 40px;
344 padding: 30px; 345 padding: 30px;
345 position: relative; 346 position: relative;
346 margin: 0 auto; 347 margin: 0 auto;
347 margin-top: 80px;} 348 margin-top: 80px;}
348 .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} 349 .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;}
349 .popup-header img{ width: 109px; display: block; float: left;} 350 .popup-header img{ width: 109px; display: block; float: left;}
350 .popup-header ul{ display: block; 351 .popup-header ul{ display: block;
351 list-style-type: none; 352 list-style-type: none;
352 margin: 0px; 353 margin: 0px;
353 padding: 0px; 354 padding: 0px;
354 margin-top: 75px; 355 margin-top: 75px;
355 margin-left: 20px; 356 margin-left: 20px;
356 float: left;} 357 float: left;}
357 .popup-header ul li{ float: left; margin-right: 31px;} 358 .popup-header ul li{ float: left; margin-right: 31px;}
358 .popup-header ul li a img{ width: 22px !important; float: left; display: block;} 359 .popup-header ul li a img{ width: 22px !important; float: left; display: block;}
359 .popup-header ul li a{color:#514DA7;} 360 .popup-header ul li a{color:#514DA7;}
360 .popup-header ul li a span{ display: block; 361 .popup-header ul li a span{ display: block;
361 float: left; 362 float: left;
362 margin-left: 10px; 363 margin-left: 10px;
363 width: 50px; 364 width: 50px;
364 font-size: 14px; 365 font-size: 14px;
365 line-height: 17px; 366 line-height: 17px;
366 margin-top: -10px;} 367 margin-top: -10px;}
367 .popup-body{ width: 100%; 368 .popup-body{ width: 100%;
368 display: block; 369 display: block;
369 float: left; 370 float: left;
370 max-height: 450px; 371 max-height: 450px;
371 overflow-y: auto; 372 overflow-y: auto;
372 padding-right: 16px;} 373 padding-right: 16px;}
373 .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} 374 .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;}
374 375
375 376
376 .popup-forms .floating-label label{font-size: 11px; 377 .popup-forms .floating-label label{font-size: 11px;
377 line-height: 19px; 378 line-height: 19px;
378 font-size: 16px; 379 font-size: 16px;
379 font-weight: 400; 380 font-weight: 400;
380 color: #000; 381 color: #000;
381 position: absolute; 382 position: absolute;
382 margin: 0px 10px 0 10px; 383 margin: 0px 10px 0 10px;
383 background: #fff; 384 background: #fff;
384 padding: 0 3px; 385 padding: 0 3px;
385 position: absolute; 386 position: absolute;
386 pointer-events: none; 387 pointer-events: none;
387 top: 15px; opacity: 0.5; 388 top: 15px; opacity: 0.5;
388 transition: 0.2s ease all; 389 transition: 0.2s ease all;
389 -moz-transition: 0.2s ease all; 390 -moz-transition: 0.2s ease all;
390 -webkit-transition: 0.2s ease all; 391 -webkit-transition: 0.2s ease all;
391 } 392 }
392 393
393 .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} 394 .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;}
394 .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} 395 .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;}
395 396
396 .popup-forms .floating-input input:focus{ outline: none;} 397 .popup-forms .floating-input input:focus{ outline: none;}
397 .popup-forms .floating-label input:focus~label{ 398 .popup-forms .floating-label input:focus~label{
398 top: -11px; 399 top: -11px;
399 color: #514DA7; 400 color: #514DA7;
400 font-size: 14px;background:#fff; 401 font-size: 14px;background:#fff;
401 opacity:1; 402 opacity:1;
402 } 403 }
403 .popup-forms .floating-label input:not(:placeholder-shown)~label { 404 .popup-forms .floating-label input:not(:placeholder-shown)~label {
404 position: absolute; 405 position: absolute;
405 top: -11px; 406 top: -11px;
406 background:#fff; 407 background:#fff;
407 408
408 font-size: 14px; 409 font-size: 14px;
409 color: #514DA7;opacity:1; 410 color: #514DA7;opacity:1;
410 } 411 }
411 /* textarea */ 412 /* textarea */
412 .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} 413 .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;}
413 .popup-forms .floating-input textarea:focus{ outline: none;} 414 .popup-forms .floating-input textarea:focus{ outline: none;}
414 .popup-forms .floating-label textarea:focus~label{ 415 .popup-forms .floating-label textarea:focus~label{
415 top: -11px; 416 top: -11px;
416 color: #514DA7; 417 color: #514DA7;
417 font-size: 14px;background:#fff; 418 font-size: 14px;background:#fff;
418 opacity:1; 419 opacity:1;
419 } 420 }
420 .popup-forms .floating-label textarea:not(:placeholder-shown)~label { 421 .popup-forms .floating-label textarea:not(:placeholder-shown)~label {
421 position: absolute; 422 position: absolute;
422 top: -11px; 423 top: -11px;
423 background:#fff; 424 background:#fff;
424 425
425 font-size: 14px; 426 font-size: 14px;
426 color: #514DA7;opacity:1; 427 color: #514DA7;opacity:1;
427 } 428 }
428 .popup-forms .form-group{ margin-bottom: 20px;} 429 .popup-forms .form-group{ margin-bottom: 20px;}
429 .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} 430 .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;}
430 .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} 431 .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;}
431 .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } 432 .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; }
432 .interests li{ float: left; margin-right: 20px; position: relative;} 433 .interests li{ float: left; margin-right: 20px; position: relative;}
433 .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; 434 .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left;
434 border-radius: 5px;} 435 border-radius: 5px;}
435 .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; 436 .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left;
436 border-radius: 5px; background-color: #fff !important; width: 125px;} 437 border-radius: 5px; background-color: #fff !important; width: 125px;}
437 .interests li a{ width: 20px; 438 .interests li a{ width: 20px;
438 display: block; 439 display: block;
439 float: right; 440 float: right;
440 margin: 6px 0px 0 114px; 441 margin: 6px 0px 0 114px;
441 position: absolute;} 442 position: absolute;}
442 /* color codes */ 443 /* color codes */
443 .silver{background-color: #C4C4C4;} 444 .silver{background-color: #C4C4C4;}
444 .milk-punch{background-color: #FFF6D7;} 445 .milk-punch{background-color: #FFF6D7;}
445 .french-pass{background-color: #BDDBFF;} 446 .french-pass{background-color: #BDDBFF;}
446 .cyan-french-pass{background-color: #C0FAFE;} 447 .cyan-french-pass{background-color: #C0FAFE;}
447 .cosmos{background-color: #FFDBDC;} 448 .cosmos{background-color: #FFDBDC;}
448 .cape-Honey{background-color: #FEE6AC;} 449 .cape-Honey{background-color: #FEE6AC;}
449 .snuff{background-color: #E5DFF0;} 450 .snuff{background-color: #E5DFF0;}
450 .catskillWhite{background-color: #DFE7EF;} 451 .catskillWhite{background-color: #DFE7EF;}
451 .white{background-color: #fff;} 452 .white{background-color: #fff;}
452 /* color codes */ 453 /* color codes */
453 .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} 454 .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;}
454 .colors li{ display: block; float: left; margin-right: 14px;} 455 .colors li{ display: block; float: left; margin-right: 14px;}
455 .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} 456 .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;}
456 .colors li a.active{border: 2px solid #514DA7;} 457 .colors li a.active{border: 2px solid #514DA7;}
457 .popup-forms .next-bt{ width: 99px; 458 .popup-forms .next-bt{ width: 99px;
458 height: 54px; 459 height: 54px;
459 background: #514DA7; 460 background: #514DA7;
460 display: block; 461 display: block;
461 text-align: center; 462 text-align: center;
462 border-radius: 5px; 463 border-radius: 5px;
463 color: #fff; 464 color: #fff;
464 font-size: 16px; 465 font-size: 16px;
465 line-height: 54px; 466 line-height: 54px;
466 font-weight: 600; 467 font-weight: 600;
467 position: absolute; 468 position: absolute;
468 right: 50px; 469 right: 50px;
469 bottom: -80px;} 470 bottom: -80px;}
470 .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} 471 .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;}
471 .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} 472 .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;}
472 .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; 473 .add-socail-ch span{ border-bottom: 2px solid #DFE7EF;
473 display: block; 474 display: block;
474 width: 270px; 475 width: 270px;
475 float: right; 476 float: right;
476 margin-top: 10px;} 477 margin-top: 10px;}
477 .select-arrow{ display: block; 478 .select-arrow{ display: block;
478 float: right; 479 float: right;
479 position: absolute; 480 position: absolute;
480 top: 13px; 481 top: 13px;
481 right: 17px; 482 right: 17px;
482 background: #fff; 483 background: #fff;
483 width: 31px; 484 width: 31px;
484 height: 17px;} 485 height: 17px;}
485 .select-arrow img{width: 15px;} 486 .select-arrow img{width: 15px;}
486 .popup-forms .save-bt{ width: 150px; 487 .popup-forms .save-bt{ width: 150px;
487 height: 54px; 488 height: 54px;
488 background: #514DA7; 489 background: #514DA7;
489 display: block; 490 display: block;
490 text-align: center; 491 text-align: center;
491 border-radius: 5px; 492 border-radius: 5px;
492 color: #fff; 493 color: #fff;
493 font-size: 16px; 494 font-size: 16px;
494 line-height: 54px; 495 line-height: 54px;
495 font-weight: 600; 496 font-weight: 600;
496 position: absolute; 497 position: absolute;
497 right: 50px; 498 right: 50px;
498 bottom: -80px;} 499 bottom: -80px;}
499 /* insights */ 500 /* insights */
500 .insights-wrp{ background-image: url(../images/insights-bg.svg); 501 .insights-wrp{ background-image: url(../images/insights-bg.svg);
501 background-color: #DFE7EF; 502 background-color: #DFE7EF;
502 height: 100%; 503 height: 100%;
503 background-repeat: no-repeat; 504 background-repeat: no-repeat;
504 background-position: top center; 505 background-position: top center;
505 background-size: contain; padding: 0 50px 0 100px;} 506 background-size: contain; padding: 0 50px 0 100px;}
506 .insights-profile{width: 32px; 507 .insights-profile{width: 32px;
507 height: 32px; 508 height: 32px;
508 float: right; 509 float: right;
509 display: block; 510 display: block;
510 position: absolute; 511 position: absolute;
511 right: 0;} 512 right: 0;}
512 .insights-searh a{ width: 21px; 513 .insights-searh a{ width: 21px;
513 height: 25px; 514 height: 25px;
514 display: block; 515 display: block;
515 position: absolute; 516 position: absolute;
516 right: 24px; 517 right: 24px;
517 top: 23px;} 518 top: 23px;}
518 .insights-searh a img{ width: 100%;} 519 .insights-searh a img{ width: 100%;}
519 .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} 520 .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;}
520 .insights-searh input::-webkit-input-placeholder { /* Edge */ 521 .insights-searh input::-webkit-input-placeholder { /* Edge */
521 font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; 522 font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000;
522 } 523 }
523 524
524 .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 525 .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */
525 font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; 526 font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000;
526 } 527 }
527 528
528 .insights-searh input::placeholder { 529 .insights-searh input::placeholder {
529 font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; 530 font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000;
530 } 531 }
531 .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} 532 .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;}
532 /* insights 2 */ 533 /* insights 2 */
533 .back-to-lib{ font-size: 12px; 534 .back-to-lib{ font-size: 12px;
534 line-height: 14px; 535 line-height: 14px;
535 color: #000000; 536 color: #000000;
536 font-weight: 500; 537 font-weight: 500;
537 display: block; 538 display: block;
538 float: left;} 539 float: left;}
539 .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} 540 .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;}
540 .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} 541 .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;}
541 .insights-list li{ display: block; float: left;} 542 .insights-list li{ display: block; float: left;}
542 .insights-list li a{ display: block; 543 .insights-list li a{ display: block;
543 float: left; 544 float: left;
544 margin: 0px; 545 margin: 0px;
545 padding: 5px 14px; 546 padding: 5px 14px;
546 background: #70A853; 547 background: #70A853;
547 font-size: 15px;text-transform:uppercase; 548 font-size: 15px;text-transform:uppercase;
548 font-weight: 700; 549 font-weight: 700;
549 font-style: normal; 550 font-style: normal;
550 color: #fff; 551 color: #fff;
551 border-radius: 50px;} 552 border-radius: 50px;}
552 .insights-details{ width: 850px;display:block; float: left;} 553 .insights-details{ width: 850px;display:block; float: left;}
553 .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} 554 .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;}
554 .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} 555 .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;}
555 .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} 556 .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;}
556 .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} 557 .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;}
557 .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} 558 .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;}
558 .features-group-list li a:hover{ text-decoration: none;} 559 .features-group-list li a:hover{ text-decoration: none;}
559 .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} 560 .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;}
560 .features-group-list li a img{ width: 9px; } 561 .features-group-list li a img{ width: 9px; }
561 .insights-rply img{ width: 14px;} 562 .insights-rply img{ width: 14px;}
562 .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} 563 .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;}
563 .insights-rply:hover{color: #70A853;} 564 .insights-rply:hover{color: #70A853;}
564 .active-green{border-bottom: 4px solid #70A853;} 565 .active-green{border-bottom: 4px solid #70A853;}
565 .insights-spc{padding: 0 100px;} 566 .insights-spc{padding: 0 100px;}
566 567
567 /* insight page 1 */ 568 /* insight page 1 */
568 .insights-border{height: 1px; 569 .insights-border{height: 1px;
569 text-align: center; 570 text-align: center;
570 display: block; 571 display: block;
571 background: #FFFFFF; 572 background: #FFFFFF;
572 clear: both; 573 clear: both;
573 width: 100%; 574 width: 100%;
574 margin-top: 30px;} 575 margin-top: 30px;}
575 .insights-border span{ text-align: center; 576 .insights-border span{ text-align: center;
576 position: relative; 577 position: relative;
577 top: -13px; 578 top: -13px;
578 background: #DFE7EF; 579 background: #DFE7EF;
579 margin: 0 11px; 580 margin: 0 11px;
580 padding: 0px 10px;} 581 padding: 0px 10px;}
581 .insights-list-filter{display:table;float:left;width:100%;} 582 .insights-list-filter{display:table;float:left;width:100%;}
582 .insights-list-filter ul{ list-style-type: none; text-align: center; 583 .insights-list-filter ul{ list-style-type: none; text-align: center;
583 margin-top:40px; 584 margin-top:40px;
584 padding: 0px; 585 padding: 0px;
585 display: block; 586 display: block;
586 float: left; 587 float: left;
587 width: 100%;} 588 width: 100%;}
588 .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} 589 .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;}
589 .insights-list-filter li a{padding: 5px 20px;color: #fff; 590 .insights-list-filter li a{padding: 5px 20px;color: #fff;
590 float: left; 591 float: left;
591 text-transform: uppercase; 592 text-transform: uppercase;
592 line-height: 26px; 593 line-height: 26px;
593 text-align: center; 594 text-align: center;
594 font-weight: 600; 595 font-weight: 600;
595 font-size: 20px; 596 font-size: 20px;
596 border-radius:30px; 597 border-radius:30px;
597 } 598 }
598 .insights-list-filter li a:hover{text-decoration:none;} 599 .insights-list-filter li a:hover{text-decoration:none;}
599 .insights-products{display:block;float:left;width:100%; background-color: #fff;} 600 .insights-products{display:block;float:left;width:100%; background-color: #fff;}
600 .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} 601 .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;}
601 .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} 602 .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;}
602 .insights-products p{font-size:15px; margin-bottom: 0px;} 603 .insights-products p{font-size:15px; margin-bottom: 0px;}
603 .insights-products span{float:right;} 604 .insights-products span{float:right;}
604 .insight-mb-spc{margin-bottom:34px;} 605 .insight-mb-spc{margin-bottom:34px;}
605 .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} 606 .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;}
606 .insights-products a{ width: 18px; display: block; float: right;} 607 .insights-products a{ width: 18px; display: block; float: right;}
607 608
608 /* colors */ 609 /* colors */
609 .lavender-blue-bg{background:#C1C0FE;} 610 .lavender-blue-bg{background:#C1C0FE;}
610 .golden-tainoi-bg{background:#FBC647;} 611 .golden-tainoi-bg{background:#FBC647;}
611 .red-orange-bg{background:#F74536;} 612 .red-orange-bg{background:#F74536;}
612 .morning-glory-bg{background:#9DDADB;} 613 .morning-glory-bg{background:#9DDADB;}
613 .dark-green-copper-bg{background:#477970;} 614 .dark-green-copper-bg{background:#477970;}
614 .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} 615 .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;}
615 .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} 616 .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;}
616 .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} 617 .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;}
617 .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} 618 .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;}
618 .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} 619 .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;}
619 .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} 620 .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;}
620 .radical-red-col{color:#EF484F;} 621 .radical-red-col{color:#EF484F;}
621 .selective-yellow-col{color:#FABB05;} 622 .selective-yellow-col{color:#FABB05;}
622 .lavender-blue-col{color:#C1C0FE;} 623 .lavender-blue-col{color:#C1C0FE;}
623 .dark-green-copper-col{color:#477970;} 624 .dark-green-copper-col{color:#477970;}
624 .purple-heart-col{color:#673AB7;} 625 .purple-heart-col{color:#673AB7;}
625 .silver-col{color:#C4C4C4;} 626 .silver-col{color:#C4C4C4;}
626 .radical-red-col:hover{color:#EF484F;text-decoration:none;} 627 .radical-red-col:hover{color:#EF484F;text-decoration:none;}
627 .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} 628 .selective-yellow-col:hover{color:#FABB05;text-decoration:none;}
628 .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} 629 .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;}
629 .dark-green-copper-col:hover{color:#477970;text-decoration:none;} 630 .dark-green-copper-col:hover{color:#477970;text-decoration:none;}
630 .purple-heart-col:hover{color:#673AB7;text-decoration:none;} 631 .purple-heart-col:hover{color:#673AB7;text-decoration:none;}
631 .silver-col:hover{color:#C4C4C4;text-decoration:none;} 632 .silver-col:hover{color:#C4C4C4;text-decoration:none;}
632 /* button */ 633 /* button */
633 .switch-btn { 634 .switch-btn {
634 position: relative; 635 position: relative;
635 display: inline-block; 636 display: inline-block;
636 width: 60px; 637 width: 60px;
637 height: 24px; 638 height: 24px;
638 } 639 }
639 .switch-btn input { 640 .switch-btn input {
640 opacity: 0; 641 opacity: 0;
641 width: 0; 642 width: 0;
642 height: 0; 643 height: 0;
643 } 644 }
644 .rounded-toggle { 645 .rounded-toggle {
645 position: absolute; 646 position: absolute;
646 cursor: pointer; 647 cursor: pointer;
647 top: 0; 648 top: 0;
648 left: 0; 649 left: 0;
649 right: 0; 650 right: 0;
650 bottom: 0; 651 bottom: 0;
651 background: #DFE7EF; 652 background: #DFE7EF;
652 -webkit-transition: .4s; 653 -webkit-transition: .4s;
653 transition: .4s; 654 transition: .4s;
654 border-radius: 34px; 655 border-radius: 34px;
655 } 656 }
656 .rounded-toggle:before { 657 .rounded-toggle:before {
657 position: absolute; 658 position: absolute;
658 content: ""; 659 content: "";
659 height: 14px; 660 height: 14px;
660 width: 13px; 661 width: 13px;
661 left: 10px; 662 left: 10px;
662 bottom: 5px; 663 bottom: 5px;
663 background-color: #514DA7; 664 background-color: #514DA7;
664 -webkit-transition: .4s; 665 -webkit-transition: .4s;
665 transition: .4s; 666 transition: .4s;
666 border-radius: 50%; 667 border-radius: 50%;
667 } 668 }
668 .toggle-btn:checked + .rounded-toggle { 669 .toggle-btn:checked + .rounded-toggle {
669 background: #DFE7EF; 670 background: #DFE7EF;
670 } 671 }
671 672
672 .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} 673 .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;}
673 .toggle-btn:focus + .rounded-toggle{ 674 .toggle-btn:focus + .rounded-toggle{
674 box-shadow: 0 0 1px #2196F3; 675 box-shadow: 0 0 1px #2196F3;
675 } 676 }
676 .toggle-btn:checked + .rounded-toggle:before { 677 .toggle-btn:checked + .rounded-toggle:before {
677 -webkit-transform: translateX(26px); 678 -webkit-transform: translateX(26px);
678 -ms-transform: translateX(26px); 679 -ms-transform: translateX(26px);
679 transform: translateX(26px); 680 transform: translateX(26px);
680 } 681 }
681 .switch-bt-wrp{margin-top: 15px; width: 111px; 682 .switch-bt-wrp{margin-top: 15px; width: 111px;
682 float: right; 683 float: right;
683 text-align: right; } 684 text-align: right; }
684 .switch-btn{float: left ;} 685 .switch-btn{float: left ;}
685 .onoff{ margin-top: -3px; float: right;} 686 .onoff{ margin-top: -3px; float: right;}
686 687
687 /* intro Episode */ 688 /* intro Episode */
688 .episode-intro{ padding: 0 50px 0 30px; height: 100%;} 689 .episode-intro{ padding: 0 50px 0 30px; height: 100%;}
689 .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; 690 .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute;
690 bottom: 50px; z-index: 2; 691 bottom: 50px; z-index: 2;
691 right: 0; 692 right: 0;
692 left: 0;} 693 left: 0;}
693 .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} 694 .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;}
694 .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; 695 .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto;
695 display: block; margin-top: 28px; 696 display: block; margin-top: 28px;
696 } 697 }
697 .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} 698 .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;}
698 .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;} 699 .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;}
699 .bottom-startup .title{ font-size: 48px; 700 .bottom-startup .title{ font-size: 48px;
700 font-family: 'Zuume'; 701 font-family: 'Zuume';
701 font-weight: 400; 702 font-weight: 400;
702 line-height: 144px; 703 line-height: 144px;
703 color: #514DA7; 704 color: #514DA7;
704 width: 440px; 705 width: 440px;
705 height: 100%; float: left; 706 height: 100%; float: left;
706 border-right: 0.8px solid #514DA7; 707 border-right: 0.8px solid #514DA7;
707 text-align: center;} 708 text-align: center;}
708 .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; 709 .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7;
709 } 710 }
710 .bottom-startup .author-sec .top{ width: 100%; 711 .bottom-startup .author-sec .top{ width: 100%;
711 display: block; 712 display: block;
712 float: left; 713 float: left;
713 padding: 20px 10px 10px 10px; 714 padding: 20px 10px 10px 10px;
714 height: 72px;} 715 height: 72px;}
715 .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} 716 .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;}
716 .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; 717 .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px;
717 font-family: 'Zuume'; 718 font-family: 'Zuume';
718 font-weight: 400;} 719 font-weight: 400;}
719 .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; 720 .bottom-startup .author-sec .bottom{ width: 100%; height: 100%;
720 border-top: 0.8px solid #514DA7; 721 border-top: 0.8px solid #514DA7;
721 display: block; 722 display: block;
722 float: left; 723 float: left;
723 padding: 0px 10px 0px 10px; 724 padding: 0px 10px 0px 10px;
724 height: 72px;} 725 height: 72px;}
725 .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} 726 .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;}
726 .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} 727 .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;}
727 .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} 728 .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;}
728 .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; 729 .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px;
729 font-family: 'Zuume'; 730 font-family: 'Zuume';
730 font-weight: 400;} 731 font-weight: 400;}
731 .bottom-startup .author-sec.info{ width: 90px;} 732 .bottom-startup .author-sec.info{ width: 90px;}
732 .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } 733 .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; }
733 .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} 734 .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;}
734 .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} 735 .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;}
735 .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} 736 .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;}
736 .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;} 737 .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;}
737 .bottom-startup .start a img{ width: 24px; 738 .bottom-startup .start a img{ width: 24px;
738 display: block; 739 display: block;
739 margin: 0 auto; 740 margin: 0 auto;
740 margin-bottom: 10px;} 741 margin-bottom: 10px;}
741 742
742 /* compare */ 743 /* compare */
743 .compare-c{ width: 475px; 744 .compare-c{ width: 475px;
744 display: block; 745 display: block;
745 margin: 0 auto; 746 margin: 0 auto;
746 bottom: 50%; 747 bottom: 50%;
747 position: absolute; 748 position: absolute;
748 left: 0; 749 left: 0;
749 right: 0; 750 right: 0;
750 z-index: 2;} 751 z-index: 2;}
751 .compare-c .logo-1{ width: 200px; display: block; float: left;} 752 .compare-c .logo-1{ width: 200px; display: block; float: left;}
752 .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; 753 .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center;
753 margin-top: 25px;} 754 margin-top: 25px;}
754 .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} 755 .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;}
755 .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} 756 .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;}
756 .epi-bg{ position: absolute; 757 .epi-bg{ position: absolute;
757 bottom: -152px; 758 bottom: -152px;
758 left: 18%; width: 1920px; 759 left: 18%; width: 1920px;
759 z-index: 1;} 760 z-index: 1;}
760 /* intro startup */ 761 /* intro startup */
761 .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } 762 .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; }
762 .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } 763 .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; }
763 .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} 764 .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;}
764 .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } 765 .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; }
765 .intro-startup .footer-bottom ul li{ height: 5px; 766 .intro-startup .footer-bottom ul li{ height: 5px;
766 display: block; 767 display: block;
767 float: left; 768 float: left;
768 width: 49%; 769 width: 49%;
769 background: #fff;} 770 background: #fff;}
770 .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} 771 .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;}
771 .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } 772 .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; }
772 .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} 773 .intro-startup .footer-top .top-intro-bt li{display: block; float: left;}
773 .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} 774 .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;}
774 .intro-startup .footer-top .top-intro-bt li a{ height: 30px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 15px; padding: 6px 10px; display: block; float: left;} 775 .intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 10px; display: block; float: left;}
775 .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 3px; margin-right: 4px;} 776 .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 4px;}
776 .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} 777 .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;}
777 .smasung-g-10wrp{ width: 404px; display: block; height: 838px; position: absolute; background-image:url('../images/Samsung-Galaxy-S10.svg'); background-repeat: no-repeat; left: 0; 778 .smasung-g-10wrp{ width: 404px; display: block; height: 695px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0;
778 right: 0; 779 right: 0;
779 margin: 0 auto; 780 margin: 0 auto;
780 bottom: 0; 781 bottom: 0;
781 top: unset; 782 top: unset;
782 background-position: bottom;} 783 background-position: bottom;}
783 .samsung-compare-c{ width: 211px; 784 .samsung-compare-c{ width: 382px;
784 display: block; 785 display: block;
785 margin: 0 auto; 786 margin: 0 auto;
786 position: absolute; 787 position: absolute;
787 bottom: 25%; 788 top: 21px;
788 left: 0; 789 left: 0;
789 right: 0;} 790 right: 0;
791 height: 671px;
792 overflow: hidden;}
790 .samsung-compare-c img{ width: 100%;} 793 .samsung-compare-c img{ width: 100%;}
791 .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;} 794 .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;}
792 795
793 /* comment wrapper */ 796 /* comment wrapper */
794 .smasung-g-10wrp .comment-box{ width: 428px; 797 .smasung-g-10wrp .comment-box{ width: 428px;
795 display: block; 798 display: block;
796 float: left; right: -394px; 799 float: left; right: -394px;
797 position: absolute; 800 position: absolute;
798 bottom: 50px;} 801 bottom: 50px;}
799 .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; 802 .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left;
800 border: 1px solid #201E6A; 803 border: 1px solid #201E6A;
801 box-sizing: border-box; 804 box-sizing: border-box;
802 box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); 805 box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743);
803 border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} 806 border-radius: 25px 25px 0px 25px; margin-bottom: 15px;}
804 .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;} 807 .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;}
805 .comment-box-s-1 .footer{background: #F7F9FB; 808 .comment-box-s-1 .footer{background: #F7F9FB;
806 border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; 809 border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px;
807 box-sizing: border-box; 810 box-sizing: border-box;
808 border-radius: 0px 0px 0px 25px;} 811 border-radius: 0px 0px 0px 25px;}
809 .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;} 812 .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;}
810 .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} 813 .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;}
811 .key-arrow{ width: 50px; float: left; margin-top:5px;} 814 .key-arrow{ width: 50px; float: left; margin-top:5px;}
812 .comment-w-397{ width: 397px; float: right;} 815 .comment-w-397{ width: 397px; float: right;}
813 .comment-box .user-photo{ width: 200px; display: block; float: right;} 816 .comment-box .user-photo{ width: 200px; display: block; float: right;}
814 .spot-light-top{ width: 927px; 817 .spot-light-top{ width: 927px;
815 height: 100%; position: absolute; 818 height: 100%; position: absolute;
816 top: 0px; 819 top: 0px;
817 overflow: hidden; 820 overflow: hidden;
818 left: -350px; 821 left: -350px;
819 right: 0; 822 right: 0;
820 margin: 0 auto; } 823 margin: 0 auto; }
821 .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); 824 .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5);
822 border: 1px solid #000000; 825 border: 1px solid #000000;
823 box-sizing: border-box; position: absolute; right: 0px; top: 198px;} 826 box-sizing: border-box; position: absolute; right: 0px; top: 198px;}
824 .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; 827 .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto;
825 margin-top: -63px;} 828 margin-top: -63px;}
826 .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;} 829 .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;}
827 .app-discovery h1{font-size: 60px; 830 .app-discovery h1{font-size: 60px;
828 font-family: 'Zuume'; margin-top: 136px; 831 font-family: 'Zuume'; margin-top: 136px;
829 font-weight: 400; 832 font-weight: 400;
830 line-height: 66px; width: 100%; display: block; text-align: center; 833 line-height: 66px; width: 100%; display: block; text-align: center;
831 color: #000;} 834 color: #000;}
832 .app-discovery h2{font-size: 60px; 835 .app-discovery h2{font-size: 60px;
833 font-family: 'Zuume'; 836 font-family: 'Zuume';
834 font-weight: 300; 837 font-weight: 300;
835 line-height: 66px; width: 100%; display: block; text-align: center; 838 line-height: 66px; width: 100%; display: block; text-align: center;
836 color: #000;} 839 color: #000;}
837 .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} 840 .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;}
838 .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;} 841 .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;}
839 .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } 842 .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; }
840 .intro-startup .footer-bottom ul li.active{ background: #514DA7;} 843 .intro-startup .footer-bottom ul li.active{ background: #514DA7;}
841 .ft-comments-group{display: block; 844 .ft-comments-group{display: block;
842 float: left; 845 float: left;
843 padding-top: 23px; width: 100%; 846 padding-top: 23px; width: 100%;
844 height: 100%; padding-right: 15px; 847 height: 100%; padding-right: 15px;
845 } 848 }
846 .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} 849 .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;}
847 .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} 850 .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;}
848 .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} 851 .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;}
852 .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;}
853 .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;}
854 .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;}
849 .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } 855 .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; }
850 .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} 856 .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;}
851 .ft-comments-group .comments-detail p{ margin-top: 2px; 857 .ft-comments-group .comments-detail p{ margin-top: 2px;
852 font-size: 12px; 858 font-size: 12px;
853 line-height: 14px; 859 line-height: 14px;
854 font-weight: 400; 860 font-weight: 400;
855 color: #000000; 861 color: #000000;
856 margin-bottom: 0px; 862 margin-bottom: 0px;
857 width: 100%; 863 width: 100%;
858 display: block; 864 display: block;
859 float: left;} 865 float: left;}
860 .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} 866 .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;}
861 .white-bg{ background-color: #fff;} 867 .white-bg{ background-color: #fff;}
862 .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} 868 .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;}
863 .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } 869 .comment-frm .frm-wdth{ width: 100%; display: block; float: left; }
864 .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } 870 .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; }
865 .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ 871 .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */
866 color: #514DA7; font-size: 12px; line-height: 14px; 872 color: #514DA7; font-size: 12px; line-height: 14px;
867 } 873 }
868 874
869 .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 875 .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */
870 color: #514DA7; font-size: 12px; line-height: 14px; 876 color: #514DA7; font-size: 12px; line-height: 14px;
871 } 877 }
872 878
873 .comment-frm .frm-wdth input::placeholder { 879 .comment-frm .frm-wdth input::placeholder {
874 color: #514DA7; font-size: 12px; line-height: 14px; 880 color: #514DA7; font-size: 12px; line-height: 14px;
875 } 881 }
876 .comment-frm .add-comment{background: #514DA7; 882 .comment-frm .add-comment{background: #514DA7;
877 border-radius: 5px; 883 border-radius: 5px;
878 font-size: 13px; 884 font-size: 13px;
879 line-height: 29px; 885 line-height: 29px;
880 color: #fff; 886 color: #fff;
881 padding: 5px 10px; 887 padding: 5px 10px;
882 display: block; 888 display: block;
883 width:111px; 889 width:111px;
884 float: right; text-align: center; 890 float: right; text-align: center;
885 height: 39px; 891 height: 39px;
886 } 892 }
887 .comment-frm .add-comment img{ width: 14px; 893 .comment-frm .add-comment img{ width: 14px;
888 894
889 } 895 }
890 .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} 896 .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;}
891 .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} 897 .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;}
892 .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} 898 .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;}
893 .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; 899 .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative;
894 border: 1px solid #201E6A; 900 border: 1px solid #201E6A;
895 box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); 901 box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743);
896 border-radius: 25px 25px 25px 0px; } 902 border-radius: 25px 25px 25px 0px; }
897 .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} 903 .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;}
898 .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} 904 .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;}
899 .rly-comment-set li{ float: left; margin-right: 15px;} 905 .rly-comment-set li{ float: left; margin-right: 15px;}
900 .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} 906 .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;}
901 .rly-comment-set li img{ width: 13px; 907 .rly-comment-set li img{ width: 13px;
902 float: left; 908 float: left;
903 display: block; 909 display: block;
904 margin-top: 8px; 910 margin-top: 8px;
905 margin-right: 6px;} 911 margin-right: 6px;}
906 .comments-a-wrp{ width: 629px; 912 .comments-a-wrp{ width: 629px;
907 display: block; 913 display: block;
908 float: right; 914 float: right;
909 position: absolute; 915 position: absolute;
910 bottom: 160px; 916 bottom: 160px;
911 right: 0;} 917 right: 0;}
912 /* thnaks Wrapper */ 918 /* thnaks Wrapper */
913 .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} 919 .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;}
914 .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } 920 .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; }
915 .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} 921 .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;}
916 .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; 922 .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C;
917 box-sizing: border-box; 923 box-sizing: border-box;
918 border-radius: 15px; position: relative; 924 border-radius: 15px; position: relative;
919 z-index: 2;} 925 z-index: 2;}
920 .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; 926 .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px;
921 margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;} 927 margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;}
922 .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} 928 .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;}
923 .thanks-pay-wrp ul{ display: block; 929 .thanks-pay-wrp ul{ display: block;
924 margin-top: 50px; 930 margin-top: 50px;
925 margin: 32px 0 0 67px; 931 margin: 32px 0 0 67px;
926 padding: 0px; 932 padding: 0px;
927 list-style-type: none; 933 list-style-type: none;
928 width: 370px; 934 width: 370px;
929 float: left;} 935 float: left;}
930 .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} 936 .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;}
931 .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} 937 .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;}
932 .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} 938 .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;}
933 .thanks-pay-wrp ul li a span img{ width: 8px; 939 .thanks-pay-wrp ul li a span img{ width: 8px;
934 display: block; 940 display: block;
935 float: left; 941 float: left;
936 margin-left: 3px; 942 margin-left: 3px;
937 margin-top: 4px; 943 margin-top: 4px;
938 margin-right: 5px;} 944 margin-right: 5px;}
939 .thanks-pay-wrp ul li a span{ font-size: 10px; 945 .thanks-pay-wrp ul li a span{ font-size: 10px;
940 line-height: 13px; 946 line-height: 13px;
941 color: #06034C; 947 color: #06034C;
942 width: 100%; 948 width: 100%;
943 display: block; 949 display: block;
944 float: left; 950 float: left;
945 margin-top: 4px;} 951 margin-top: 4px;}
946 .payments-spc-57{ margin:0 76px;} 952 .payments-spc-57{ margin:0 76px;}
947 .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} 953 .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;}
948 .thanks-r-section{ width: 444px; 954 .thanks-r-section{ width: 444px;
949 display: block; 955 display: block;
950 float: right; 956 float: right;
951 position: absolute; 957 position: absolute;
952 right: 0; 958 right: 0;
953 bottom: 70px;} 959 bottom: 70px;}
954 .logo-common-wrp { 960 .logo-common-wrp {
955 width: 101px; 961 width: 101px;
956 display: block; 962 display: block;
957 margin: 0 auto; 963 margin: 0 auto;
958 } 964 }
959 .logo-common-wrp a{ width: 100%; display: block;} 965 .logo-common-wrp a{ width: 100%; display: block;}
960 .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;} 966 .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;}
961 .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;} 967 .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;}
962 .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;} 968 .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;}
963 .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; 969 .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute;
964 left: -10px; 970 left: -10px;
965 top: -10px;} 971 top: -10px;}
966 .back-bt img{ width: 20px; margin-right: 5px;} 972 .back-bt img{ width: 20px; margin-right: 5px;}
967 .back-bt:hover{ text-decoration: none; color:#514DA7;} 973 .back-bt:hover{ text-decoration: none; color:#514DA7;}
968 .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; 974 .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute;
969 left: -10px; 975 left: -10px;
970 bottom: -10px;} 976 bottom: -10px;}
971 .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; 977 .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute;
972 right: -10px; 978 right: -10px;
973 bottom: -10px;} 979 bottom: -10px;}
974 .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; 980 .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute;
975 right: -10px; 981 right: -10px;
976 top: -10px;} 982 top: -10px;}
977 .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; 983 .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000;
978 box-sizing: border-box; margin-top: 25px;} 984 box-sizing: border-box; margin-top: 25px;}
979 .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} 985 .rating-section li{ width: 100%; display: block; float: left; padding: 15px;}
980 .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;} 986 .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;}
981 .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; 987 .rating-section li .publish{width: 82px; height: 33px; background: #514DA7;
982 border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} 988 border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;}
983 .rating-section li p.wdth{ width: 154px;} 989 .rating-section li p.wdth{ width: 154px;}
984 .rating-list{ display: block; float: right;} 990 .rating-list{ display: block; float: right;}
985 .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} 991 .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;}
986 .rating-section li:first-child{ border-bottom: 1px solid #000000;} 992 .rating-section li:first-child{ border-bottom: 1px solid #000000;}
987 .follow-us-py{width: 100%; display: block; float: left; padding:15px;} 993 .follow-us-py{width: 100%; display: block; float: left; padding:15px;}
988 .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} 994 .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;}
989 .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} 995 .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;}
990 .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} 996 .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;}
991 .p-follows li a{ width: 100%; display: block; float: left;} 997 .p-follows li a{ width: 100%; display: block; float: left;}
992 .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} 998 .p-users{ width: 108%; display: block; float: left; margin-top: 40px;}
993 .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } 999 .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; }
994 .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} 1000 .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;}
995 /* single mobile */ 1001 /* single mobile */
996 .single-mobileInsight{ width: 441px; display: block; height: 730px;position: absolute; background-image:url('../images/s-mobile.svg'); background-repeat: no-repeat; left: 0; 1002 .single-mobileInsight{ width: 441px; display: block; height: 730px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0;
997 right: 0; 1003 right: 0;
998 margin: 0 auto; 1004 margin: 0 auto;
999 bottom: 0; 1005 bottom: 0;
1000 top: unset;} 1006 top: unset;}
1001 .slide-img{ width: 402px; 1007 .slide-img{ width: 402px;
1002 position: absolute; 1008 position: absolute;
1003 bottom: 1px; 1009 bottom: 1px;
1004 left: 0; 1010 left: 0;
1005 right: 0; 1011 right: 0;
1006 margin: 0 auto;} 1012 margin: 0 auto;}
1007 1013
1008 .single-m-Insight-comments{ width: 423px; display: block; position: absolute; 1014 .single-m-Insight-comments{ width: 423px; display: block; position: absolute;
1009 top: 294px; 1015 top: 294px;
1010 right: -357px;} 1016 right: -357px;}
1011 .single-left-Insight-comments{position: absolute; 1017 .single-left-Insight-comments{position: absolute;
1012 width: 423px; 1018 width: 423px;
1013 display: block; 1019 display: block;
1014 top: 0; 1020 top: 0;
1015 left: -332px;} 1021 left: -332px;}
1016 .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; 1022 .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px;
1017 margin-bottom: -20px;} 1023 margin-bottom: -20px;}
1018 .custom-c-style{border-radius:0px 25px 25px 25px;} 1024 .custom-c-style{border-radius:0px 25px 25px 25px;}
1019 .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000; 1025 .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000;
1020 border-radius: 45px 45px 0 0; 1026 border-radius: 45px 45px 0 0;
1021 bottom: 0; 1027 bottom: 0;
1022 top: unset; 1028 top: unset;
1023 background-position: bottom;} 1029 background-position: bottom;}
1024 .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} 1030 .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;}
1025 .m-screen-comments{ width: 370px; 1031 .m-screen-comments{ width: 370px;
1026 display: block; 1032 display: block;
1027 position: absolute; 1033 position: absolute;
1028 left: 0; 1034 left: 0;
1029 z-index: 1; 1035 z-index: 1;
1030 margin-left: -230px; 1036 margin-left: -230px;
1031 margin-top: 50px;} 1037 margin-top: 50px;}
1032 .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} 1038 .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;}
1033 .p-left{ left: 0;} 1039 .p-left{ left: 0;}
1034 .p-right{ right: 0;} 1040 .p-right{ right: 0;}
1035 .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 792px; height: 100%; bottom: 2px;} 1041 .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 792px; height: 100%; bottom: 2px;}
1036 .m-screen-right { 1042 .m-screen-right {
1037 width: 370px; 1043 width: 370px;
1038 display: block; 1044 display: block;
1039 position: absolute; 1045 position: absolute;
1040 right: 0; 1046 right: 0;
1041 z-index: 1; 1047 z-index: 1;
1042 margin-right: -207px; 1048 margin-right: -207px;
1043 margin-top: 50px; 1049 margin-top: 50px;
1044 } 1050 }
1045 .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; 1051 .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px;
1046 bottom: 125px;} 1052 bottom: 125px;}
1047 /* no comments */ 1053 /* no comments */
1048 .no-comment-count{ width: 100%;} 1054 .no-comment-count{ width: 100%;}
1049 1055
1050 1056
1051 1057
1052 .no-comments-img{ width: 40px; display: block; float: left;} 1058 .no-comments-img{ width: 40px; display: block; float: left;}
1053 .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} 1059 .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;}
1054 .h-100p{ height: 100%;} 1060 .h-100p{ height: 100%;}
1055 .bord-r{ border-right: 1px solid #A8C2DC;} 1061 .bord-r{ border-right: 1px solid #A8C2DC;}
1056 .ft-comments-group .comments-detail{ position: absolute; 1062 .ft-comments-group .comments-detail{ position: absolute;
1057 padding-left: 50px;} 1063 padding-left: 50px;}
1058 .c-with-photos{ display: block; float: left; margin-left: -120px;} 1064 .c-with-photos{ display: block; float: left; margin-left: -120px;}
1059 .addfrm-spc{ padding-right: 50px;} 1065 .addfrm-spc{ padding-right: 50px;}
1060 .c-product-insight-wrp{ width: 350px; 1066 .c-product-insight-wrp{ width: 350px;
1061 display: block; 1067 display: block;
1062 float: right; 1068 float: right;
1063 position: absolute; 1069 position: absolute;
1064 top: unset; 1070 top: unset;
1065 bottom: 74px; 1071 bottom: 74px;
1066 right: -310px;} 1072 right: -310px;}
1067 .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} 1073 .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;}
1068 .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} 1074 .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;}
1069 .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} 1075 .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;}
1070 .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} 1076 .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;}
1071 .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} 1077 .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;}
1072 .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} 1078 .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;}
1073 .cit-16:hover{color: #EF484F;} 1079 .cit-16:hover{color: #EF484F;}
1074 .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} 1080 .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;}
1075 .ft-share img{ width: 14px; 1081 .ft-share img{ width: 14px;
1076 display: block; 1082 display: block;
1077 float: left; 1083 float: left;
1078 margin: 8px 7px 0 0px;} 1084 margin: 8px 7px 0 0px;}
1079 .ft-share:hover{color: #EF484F;} 1085 .ft-share:hover{color: #EF484F;}
1080 .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; 1086 .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0;
1081 left: 0;} 1087 left: 0;}
1082 /* single web screen */ 1088 /* single web screen */
1083 .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; 1089 .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute;
1084 left: 0; 1090 left: 0;
1085 right: 0; bottom: 210px; 1091 right: 0; bottom: 210px;
1086 margin: 0 auto;} 1092 margin: 0 auto;}
1087 .web-comment-spc{top: 63px;left: -206px;} 1093 .web-comment-spc{top: 63px;left: -206px;}
1088 .web-ps-insight-spc{ top: 130px; 1094 .web-ps-insight-spc{ top: 130px;
1089 right: -260px;} 1095 right: -260px;}
1090 1096
1091 /* screen grab */ 1097 /* screen grab */
1092 .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} 1098 .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;}
1093 .screengrab-lspc{top: 113px;} 1099 .screengrab-lspc{top: 113px;}
1094 .screengrab-rspc{top: 92px;right: -362px;} 1100 .screengrab-rspc{top: 92px;right: -362px;}
1095 .view-ticket-wrp-ps{ width: 302px; 1101 .view-ticket-wrp-ps{ width: 302px;
1096 position: absolute; 1102 position: absolute;
1097 z-index: 1; 1103 z-index: 1;
1098 right: -224px; 1104 right: -224px;
1099 top: 82px;} 1105 top: 82px;}
1100 .bc-transparent{ background-image: none !important; border: 0px;} 1106 .bc-transparent{ background-image: none !important; border: 0px;}
1101 .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} 1107 .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;}
1102 .comments-right-without-bc{ right: -255px;} 1108 .comments-right-without-bc{ right: -255px;}
1103 .screenGrb-comments-wrp{width: 752px;} 1109 .screenGrb-comments-wrp{width: 752px;}
1104 .spc-grbscreen1{ margin-top: 40px;} 1110 .spc-grbscreen1{ margin-top: 40px;}
1105 /* two webscreen */ 1111 /* two webscreen */
1106 .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0; 1112 .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0;
1107 right: 0; 1113 right: 0;
1108 margin: 0 auto; 1114 margin: 0 auto;
1109 bottom: 0; 1115 bottom: 0;
1110 top: unset; 1116 top: unset;
1111 background-position: top;} 1117 background-position: top;}
1112 .two-webs-l-spc{ margin-left: -342px; 1118 .two-webs-l-spc{ margin-left: -342px;
1113 margin-top: 37px;} 1119 margin-top: 37px;}
1114 .two-screen-user-photo-bottom { 1120 .two-screen-user-photo-bottom {
1115 width: 127px; 1121 width: 127px;
1116 display: block; 1122 display: block;
1117 position: absolute; 1123 position: absolute;
1118 bottom: 76px; 1124 bottom: 76px;
1119 left: -254px; 1125 left: -254px;
1120 } 1126 }
1121 .two-webscreen-r-insight { 1127 .two-webscreen-r-insight {
1122 width: 423px; 1128 width: 423px;
1123 display: block; 1129 display: block;
1124 position: absolute; 1130 position: absolute;
1125 top: 51px; 1131 top: 51px;
1126 right: 3px; 1132 right: 3px;
1127 } 1133 }
1128 .custom-selected-author-style { 1134 .custom-selected-author-style {
1129 border-radius: 0px 25px 25px 25px; 1135 border-radius: 0px 25px 25px 25px;
1130 border: 2px solid #F9CF35; position: relative; 1136 border: 2px solid #F9CF35; position: relative;
1131 } 1137 }
1132 .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} 1138 .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;}
1133 .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} 1139 .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;}
1134 .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} 1140 .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;}
1135 .custom-selected-author-style .rect { 1141 .custom-selected-author-style .rect {
1136 width: 25px; 1142 width: 25px;
1137 display: block; 1143 display: block;
1138 position: absolute; 1144 position: absolute;
1139 top: 0; 1145 top: 0;
1140 left: 0; 1146 left: 0;
1141 } 1147 }
1142 .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} 1148 .author-two{position: absolute; top: 240px; left: -363px; width: 428px;}
1143 .author-two .author-two-photo{ width: 200px; display: block;} 1149 .author-two .author-two-photo{ width: 200px; display: block;}
1144 .two-author-desktop{ width: 913px; 1150 .two-author-desktop{ width: 913px;
1145 display: block; 1151 display: block;
1146 height: 525px; 1152 height: 525px;
1147 position: absolute; 1153 position: absolute;
1148 background-image:url('../images/two-author-desktop.svg'); 1154 background-image:url('../images/two-author-desktop.svg');
1149 background-repeat: no-repeat; 1155 background-repeat: no-repeat;
1150 left: 0; 1156 left: 0;
1151 right: 0; 1157 right: 0;
1152 margin: 0 auto; 1158 margin: 0 auto;
1153 bottom: 0; 1159 bottom: 0;
1154 top: unset; 1160 top: unset;
1155 background-position: bottom;} 1161 background-position: bottom;}
1156 .author-two-desktop{ position: absolute; 1162 .author-two-desktop{ position: absolute;
1157 top: -130px; 1163 top: -130px;
1158 left: -134px; 1164 left: -134px;
1159 width: 428px;} 1165 width: 428px;}
1160 .author-two-desktop .author-two-photo{ width: 200px; display: block;} 1166 .author-two-desktop .author-two-photo{ width: 200px; display: block;}
1161 .author-one-desktop{ position: absolute; 1167 .author-one-desktop{ position: absolute;
1162 top: -163px; 1168 top: -163px;
1163 right: -201px; 1169 right: -201px;
1164 width: 428px;} 1170 width: 428px;}
1165 .custom-2-author{ border-radius: 25px 25px 25px 0px;} 1171 .custom-2-author{ border-radius: 25px 25px 25px 0px;}
1166 .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} 1172 .custom-2-author .footer { border-radius: 0px 0px 25px 0px;}
1167 .desktop-two-logo-spc{ bottom: 40%;} 1173 .desktop-two-logo-spc{ bottom: 40%;}
1168 .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} 1174 .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;}
1169 .author-two-head-spc{ margin-top: 56px !important;} 1175 .author-two-head-spc{ margin-top: 56px !important;}
1170 .sign-wrp{ width: 100%; display: block; float: left;} 1176 .sign-wrp{ width: 100%; display: block; float: left;}
1171 .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } 1177 .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; }
1172 .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} 1178 .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;}
1173 .cust-user2-style{ border-radius:25px 0 25px 25px} 1179 .cust-user2-style{ border-radius:25px 0 25px 25px}
1174 .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} 1180 .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;}
1175 .single-chat-c-left{left: -405px;} 1181 .single-chat-c-left{left: -405px;}
1176 .single-chat-c-right{top: 244px;right: -404px;} 1182 .single-chat-c-right{top: 244px;right: -404px;}
1177 .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} 1183 .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;}
1178 .help-view-ticket-right{display: block; 1184 .help-view-ticket-right{display: block;
1179 float: right; 1185 float: right;
1180 right: -84px; 1186 right: -84px;
1181 position: absolute; 1187 position: absolute;
1182 z-index: 1; 1188 z-index: 1;
1183 top: 51px; 1189 top: 51px;
1184 width: 423px;} 1190 width: 423px;}
1185 .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} 1191 .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;}
1186 .two-author-all-comments{width: 100%; display: block; float:left;} 1192 .two-author-all-comments{width: 100%; display: block; float:left;}
1187 .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} 1193 .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;}
1188 .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} 1194 .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;}
1189 .a2-set{ width: 282px; 1195 .a2-set{ width: 282px;
1190 height: 258px; 1196 height: 258px;
1191 position: absolute; 1197 position: absolute;
1192 left: -370px; 1198 left: -370px;
1193 bottom: -50px;} 1199 bottom: -50px;}
1194 .a2true-set{ width: 268px; 1200 .a2true-set{ width: 268px;
1195 height: 319px; 1201 height: 319px;
1196 position: absolute; 1202 position: absolute;
1197 right: -440px; 1203 right: -440px;
1198 bottom: -103px;} 1204 bottom: -103px;}
1199 .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} 1205 .add_comments-spc_r{ bottom: unset !important; top: 280px !important;}
1200 .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } 1206 .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; }
1201 .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; 1207 .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block;
1202 float: right;} 1208 float: right;}
1203 .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; 1209 .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50;
1204 transition-property: right; 1210 transition-property: right;
1205 -webkit-transition-property: right; 1211 -webkit-transition-property: right;
1206 -moz-transition-property: right; 1212 -moz-transition-property: right;
1207 -o-transition-property: right; 1213 -o-transition-property: right;
1208 1214
1209 transition-duration: 0.3s; 1215 transition-duration: 0.3s;
1210 -webkit-transition-duration: 0.3s; 1216 -webkit-transition-duration: 0.3s;
1211 -moz-transition-duration: 0.3s; 1217 -moz-transition-duration: 0.3s;
1212 -o-transition-duration: 0.3s; 1218 -o-transition-duration: 0.3s;
1213 1219
1214 transition-timing-function: linear; 1220 transition-timing-function: linear;
1215 -webkit-transition-timing-function: linear; 1221 -webkit-transition-timing-function: linear;
1216 -moz-transition-timing-function: linear; 1222 -moz-transition-timing-function: linear;
1217 -o-transition-timing-function: linear; 1223 -o-transition-timing-function: linear;
1218 right: -500px; 1224 right: -500px;
1219 1225
1220 } 1226 }
1221 .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} 1227 .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;}
1222 .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;} 1228 .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;}
1223 .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} 1229 .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;}
1224 .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} 1230 .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;}
1225 .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} 1231 .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;}
1226 .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} 1232 .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;}
1227 .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } 1233 .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; }
1228 .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} 1234 .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;}
1229 .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;} 1235 .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;}
1230 .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} 1236 .common_color{ overflow: hidden; background: transparent; border-radius: 100px;}
1231 .user-photo{width: 109px; 1237 .user-photo{width: 109px;
1232 display: block; 1238 display: block;
1233 float: left;} 1239 float: left;}
1234 .cat-minus{ right: -11px !important; 1240 .cat-minus{ right: -11px !important;
1235 margin-left: unset !important;} 1241 margin-left: unset !important;}
1236 .mt-50{ margin-top: 50px;} 1242 .mt-50{ margin-top: 50px;}
1237 .sub-menu-user{ width: 150px; 1243 .sub-menu-user{ width: 150px;
1238 display: block; 1244 display: block;
1239 position: absolute; 1245 position: absolute;
1240 background: #fff; 1246 background: #fff;
1241 right: 0px; 1247 right: 0px;
1242 border: 1px solid #eaeaea; 1248 border: 1px solid #eaeaea;
1243 border-radius: 5px; 1249 border-radius: 5px;
1244 padding: 5px; 1250 padding: 5px;
1245 -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); 1251 -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22);
1246 -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); 1252 -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22);
1247 box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); 1253 box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22);
1248 } 1254 }
1249 .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } 1255 .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; }
1250 .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} 1256 .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;}
1251 .sub-menu-user ul li:last-child{ border-bottom: 0px;} 1257 .sub-menu-user ul li:last-child{ border-bottom: 0px;}
1252 .sub-menu-user ul li a:hover{color:#514DA7;} 1258 .sub-menu-user ul li a:hover{color:#514DA7;}
1253 .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} 1259 .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;}
1254 .bounced-user-comments li{ display: block; float: left; position: relative;} 1260 .bounced-user-comments li{ display: block; float: left; position: relative;}
1255 .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} 1261 .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;}
1256 .bounced-user-comments .b-user-head img{ width: 26px; 1262 .bounced-user-comments .b-user-head img{ width: 26px;
1257 display: block; 1263 display: block;
1258 float: left; 1264 float: left;
1259 position: absolute; 1265 position: absolute;
1260 left:-13px;} 1266 left:-13px;}
1261 .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} 1267 .bounced-user-comments .b-user-head .head-content{ display: block; float: left;}
1262 .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} 1268 .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;}
1263 .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} 1269 .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;}
1264 .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} 1270 .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;}
1265 .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; 1271 .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px;
1266 height: 3px; 1272 height: 3px;
1267 display: block; 1273 display: block;
1268 background: #ccc; 1274 background: #ccc;
1269 float: left; 1275 float: left;
1270 } 1276 }
1271 .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; 1277 .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF;
1272 width: auto; 1278 width: auto;
1273 height: auto; 1279 height: auto;
1274 padding: 3px 7px; 1280 padding: 3px 7px;
1275 display: block; 1281 display: block;
1276 border-radius: 3px; 1282 border-radius: 3px;
1277 margin-top: -2px;} 1283 margin-top: -2px;}
1278 .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} 1284 .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;}
1279 .bc_border{} 1285 .bc_border{}
1280 .info_bc_spc{ float: left;} 1286 .info_bc_spc{ float: left;}
1281 .info_bc_spc li{ padding:0px; color: #514DA7;} 1287 .info_bc_spc li{ padding:0px; color: #514DA7;}
1282 .info_bc_spc li a{color: #514DA7; opacity: 1;} 1288 .info_bc_spc li a{color: #514DA7; opacity: 1;}
1283 .info_bc_spc li img{ margin-top: 4px;} 1289 .info_bc_spc li img{ margin-top: 4px;}
1284 .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} 1290 .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;}
1285 .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} 1291 .joined_wrapper .add_rply{ display: block; float: left; width: 73%;}
1286 .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;} 1292 .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;}
1287 .ft-normal{ font-weight: 500 !important;} 1293 .ft-normal{ font-weight: 500 !important;}
1288 .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} 1294 .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;}
1289 1295
1290 /* placeholder */ 1296 /* placeholder */
1291 .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ 1297 .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */
1292 font-size: 10px; color: #000; opacity: 0.7; 1298 font-size: 10px; color: #000; opacity: 0.7;
1293 } 1299 }
1294 1300
1295 .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 1301 .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */
1296 font-size: 10px; color: #000; opacity: 0.7; 1302 font-size: 10px; color: #000; opacity: 0.7;
1297 } 1303 }
1298 1304
1299 .joined_wrapper .add_rply input::placeholder { 1305 .joined_wrapper .add_rply input::placeholder {
1300 font-size: 10px; color: #000; opacity: 0.7; 1306 font-size: 10px; color: #000; opacity: 0.7;
1301 } 1307 }
1302 1308
1303 .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} 1309 .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;}
1304 .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } 1310 .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; }
1305 .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} 1311 .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;}
1306 .full-width{ width: 100%; display: block; float: left;} 1312 .full-width{ width: 100%; display: block; float: left;}
1307 .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;} 1313 .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;}
1308 .child-full-width .b-user-head{ padding-left: 70px;} 1314 .child-full-width .b-user-head{ padding-left: 70px;}
1309 .child-full-width .b-user-head img{ left:33px;} 1315 .child-full-width .b-user-head img{ left:33px;}
1310 .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} 1316 .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;}
1311 .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} 1317 .child-full-width .joined_wrapper{padding: 0 0px 0 40px;}
1312 .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} 1318 .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;}
1313 .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} 1319 .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;}
1314 .comments-footer{ width: 100%; display: block; float: left;} 1320 .comments-footer{ width: 100%; display: block; float: left;}
1315 .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;} 1321 .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;}
1316 .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;} 1322 .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;}
1317 .add_comments_chat img{ width: 15px;} 1323 .add_comments_chat img{ width: 15px;}
1318 .add_comments_chat:hover{ color:#fff; text-decoration: none;} 1324 .add_comments_chat:hover{ color:#fff; text-decoration: none;}
1319 .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} 1325 .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;}
1320 button:focus{ border:0px; outline: none;} 1326 button:focus{ border:0px; outline: none;}
1321 .short_by{left: -100px !important;} 1327 .short_by{left: -100px !important;}
1322 input:focus{ outline: none;} 1328 input:focus{ outline: none;}
1323 .comments-footer textarea:focus{ outline: none;} 1329 .comments-footer textarea:focus{ outline: none;}
1324 .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;} 1330 .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;}
1325 .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} 1331 .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;}
1326 .close_chat_bx:hover{ background-color: #ccc;} 1332 .close_chat_bx:hover{ background-color: #ccc;}
1327 /* chat box close */ 1333 /* chat box close */
1328 .cht_close{ 1334 .cht_close{
1329 transition-property: right; 1335 transition-property: right;
1330 -webkit-transition-property: right; 1336 -webkit-transition-property: right;
1331 -moz-transition-property: right; 1337 -moz-transition-property: right;
1332 -o-transition-property: right; 1338 -o-transition-property: right;
1333 1339
1334 transition-duration: 0.3s; 1340 transition-duration: 0.3s;
1335 -webkit-transition-duration: 0.3s; 1341 -webkit-transition-duration: 0.3s;
1336 -moz-transition-duration: 0.3s; 1342 -moz-transition-duration: 0.3s;
1337 -o-transition-duration: 0.3s; 1343 -o-transition-duration: 0.3s;
1338 1344
1339 transition-timing-function: linear; 1345 transition-timing-function: linear;
1340 -webkit-transition-timing-function: linear; 1346 -webkit-transition-timing-function: linear;
1341 -moz-transition-timing-function: linear; 1347 -moz-transition-timing-function: linear;
1342 -o-transition-timing-function: linear; 1348 -o-transition-timing-function: linear;
1343 right: 0px; 1349 right: 0px;
1344 } 1350 }
1345 .p-left-0{ padding-left:0px !important;} 1351 .p-left-0{ padding-left:0px !important;}
1346 .ps_right{ float: right !important; position: static !important;} 1352 .ps_right{ float: right !important; position: static !important;}
1347 .testi-photos-ct .c-with-photos{ margin-left: 0px; } 1353 .testi-photos-ct .c-with-photos{ margin-left: 0px; }
1348 .testi-photos-ct .comments-detail{padding-left: 165px !important;} 1354 .testi-photos-ct .comments-detail{padding-left: 165px !important;}
1349 .ct-width{ width: 400px;} 1355 .ct-width{ width: 400px;}
1350 .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} 1356 .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;}
1351 .testi-photos-ct .comments-detail{padding-right: 40px;} 1357 .testi-photos-ct .comments-detail{padding-right: 40px;}
1352 .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} 1358 .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;}
1353 .right-corner { border-radius: 25px 25px 2px 25px;} 1359 .right-corner { border-radius: 25px 25px 2px 25px;}
1354 .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} 1360 .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;}
1355 .dynamic-thoughts { width: 200px; display: block; } 1361 .dynamic-thoughts { width: 200px; display: block; }
1356 .two-screen-spc-top{ top: 100px; right: -286px;} 1362 .two-screen-spc-top{ top: 100px; right: -286px;}
1357 .joined_wrapper{ position: relative;} 1363 .joined_wrapper{ position: relative;}
1358 .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} 1364 .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;}
1359 .reply-Wdth{ width: 64px;} 1365 .reply-Wdth{ width: 64px;}
1360 .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} 1366 .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;}
1361 .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} 1367 .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;}
1362 .full-w-height-profile.ex-light p{font-weight: 500; font-weight: normal; font-size: 14px; line-height: 21px; color: #000; opacity: 0.7; width: 100%; display: block; text-align: center;} 1368 .full-w-height-profile.ex-light p{font-weight: 500; font-weight: normal; font-size: 14px; line-height: 21px; color: #000; opacity: 0.7; width: 100%; display: block; text-align: center;}
1363 .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } 1369 .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; }
1364 .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} 1370 .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;}
1365 .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} 1371 .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;}
1366 .full-w-height-profile.spotlight_bg {background-image:url('../images/spot-light-ps.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom -3px right 50px;} 1372 .full-w-height-profile.spotlight_bg {background-image:url('../images/spot-light-ps.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom -3px right 50px;}
1367 .update_profile{ margin-right: 15px; margin-top: 2px; z-index: 11; background: #514DA7; border-radius: 5px;width: 146px; text-transform: uppercase; color: #fff; text-align: center; height: 35px; font-weight: 600; font-size: 12px; font-style: normal; line-height: 14px;} 1373 .update_profile{ margin-right: 15px; margin-top: 2px; z-index: 11; background: #514DA7; border-radius: 5px;width: 146px; text-transform: uppercase; color: #fff; text-align: center; height: 35px; font-weight: 600; font-size: 12px; font-style: normal; line-height: 14px;}
1368 .update_profile span{width: 11px; 1374 .update_profile span{width: 11px;
1369 height: 11px; 1375 height: 11px;
1370 display: inline-block; 1376 display: inline-block;
1371 background: #EF484F; 1377 background: #EF484F;
1372 border-radius: 10px; 1378 border-radius: 10px;
1373 margin: 12px 0 0 0;} 1379 margin: 12px 0 0 0;}
1374 .update_profile:hover{ color: #fff; text-decoration: none;} 1380 .update_profile:hover{ color: #fff; text-decoration: none;}
1375 .top-area-blank{ width: 195px; height: 30px; display: block; margin: 0 auto; background: #DFE7EF; border-radius: 0px 0px 23.4986px 23.4986px; position: absolute; z-index: 1; left: 0; right: 0; top: 15px;} 1381 .top-area-blank{ width: 195px; height: 30px; display: block; margin: 0 auto; background: #DFE7EF; border-radius: 0px 0px 23.4986px 23.4986px; position: absolute; z-index: 1; left: 0; right: 0; top: 15px;}
1376 .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;}
1382 .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;}
1383 .talk-to-me-about{ width: 100%; display: block; float: left;}
1384 .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;}
1385 .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;}
1386 .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;}
1387 .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;}
1388 .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;}
1389 .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;}
1390 .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;}
1391 .user-views li img.spctp{ margin-top: 2px;}
1392 .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;}
1393 .action-set img{width: 21px;margin: 16px;}
1394 .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left;
1395 position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden;
1396 background-position: left bottom; }
1397 .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;}
1398 .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;}
1399 .insight-two-img{width: 403px; position: relative;}
src/assets/images/arrow-right-action.svg
Diff comments   View file @5c9c158
File was created 1 <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2 <path d="M4.79724 11.3535H17.2031" stroke="white" stroke-width="3.42785" stroke-linecap="round" stroke-linejoin="round"/>
3 <path d="M10.9994 5.15039L17.2023 11.3533L10.9994 17.5563" stroke="white" stroke-width="3.42785" stroke-linecap="round" stroke-linejoin="round"/>
4 </svg>
5
src/assets/images/calendar.svg
Diff comments   View file @5c9c158
File was created 1 <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 <path d="M11.4 2.2998H2.3C1.58203 2.2998 1 2.88183 1 3.5998V12.6998C1 13.4178 1.58203 13.9998 2.3 13.9998H11.4C12.118 13.9998 12.7 13.4178 12.7 12.6998V3.5998C12.7 2.88183 12.118 2.2998 11.4 2.2998Z" stroke="#979797" stroke-linecap="round" stroke-linejoin="round"/>
3 <path d="M9.44995 1V3.6" stroke="#979797" stroke-linecap="round" stroke-linejoin="round"/>
4 <path d="M4.25 1V3.6" stroke="#979797" stroke-linecap="round" stroke-linejoin="round"/>
5 <path d="M1 6.2002H12.7" stroke="#979797" stroke-linecap="round" stroke-linejoin="round"/>
6 </svg>
7
src/assets/images/facebook.png
Diff comments   View file @5c9c158

319 Bytes | W: | H:

533 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/read-m-b.svg
Diff comments   View file @5c9c158
File was created 1 <svg width="135" height="58" viewBox="0 0 135 58" fill="none" xmlns="http://www.w3.org/2000/svg">
2 <path d="M0 16.1957C0 7.25106 7.25104 0 16.1957 0L118.145 0C131.198 0 138.888 14.6514 131.474 25.3948L114.149 50.4981C111.126 54.879 106.143 57.4946 100.82 57.4946H16.1957C7.25106 57.4946 0 50.2435 0 41.2989V16.1957Z" fill="#F6F9FC"/>
3 </svg>
4
src/assets/images/star.svg
Diff comments   View file @5c9c158
File was created 1 <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2 <path d="M7.5 1L9.5085 5.069L14 5.7255L10.75 8.891L11.517 13.363L7.5 11.2505L3.483 13.363L4.25 8.891L1 5.7255L5.4915 5.069L7.5 1Z" stroke="#979797" stroke-linecap="round" stroke-linejoin="round"/>
3 </svg>
4
src/components/AuthorIntro.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <Header></Header> 5 <Header></Header>
6 6
7 <!-- menu wrapper --> 7 <!-- menu wrapper -->
8 <div class="intro-startup"> 8 <div class="intro-startup">
9 <div class="smasung-g-10wrp"> 9 <div class="smasung-g-10wrp">
10 <div class="top-area-blank"></div>
10 <div class="samsung-compare-c"> 11 <div class="samsung-compare-c">
11 <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div> 12 <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div>
12 13
13 </div> 14 </div>
14 <!-- <div class="samsung-compare-c"> 15 <!-- <div class="samsung-compare-c">
15 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> 16 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
16 <div class="vs">vs</div> 17 <div class="vs">vs</div>
17 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> 18 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
18 </div> --> 19 </div> -->
19 <div class="comment-box"> 20 <div class="comment-box">
20 <div class="comment-box-s-1"> 21 <div class="comment-box-s-1">
21 <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> --> 22 <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> -->
22 <p>{{currentSlideData.payload.metaData.textBox}}</p> 23 <p>{{currentSlideData.payload.metaData.textBox}}</p>
23 <div class="footer"> 24 <div class="footer">
24 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a> 25 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>
25 </div><!-- footer --> 26 </div><!-- footer -->
26 </div><!-- comment box 1 --> 27 </div><!-- comment box 1 -->
27 <!-- <div class="comment-box-s-1 comment-w-397"> 28 <!-- <div class="comment-box-s-1 comment-w-397">
28 <p> 29 <p>
29 Use arrow keys to navigate <br/> 30 Use arrow keys to navigate <br/>
30 <img src="../assets/images/key-arrow.jpg" class="key-arrow" /> 31 <img src="../assets/images/key-arrow.jpg" class="key-arrow" />
31 </p> 32 </p>
32 </div> --> 33 </div> -->
33 <!-- comment box 1 --> 34 <!-- comment box 1 -->
34 <div class="user-photo"> 35 <div class="user-photo">
35 <!-- <img src="../assets/images/comment-photo.png" /> --> 36 <!-- <img src="../assets/images/comment-photo.png" /> -->
36 <img :src="currentSlideData.payload.metaData.authorImage" /> 37 <img :src="currentSlideData.payload.metaData.authorImage" />
37 </div> 38 </div>
38 </div><!-- comment box --> 39 </div><!-- comment box -->
39 </div><!-- samsung g 10 --> 40 </div><!-- samsung g 10 -->
40 <div class="footer-nav"> 41 <div class="footer-nav">
41 <div class="footer-top"> 42 <div class="footer-top">
42 <ul class="top-intro-bt ps_right"> 43 <ul class="top-intro-bt ps_right">
43 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> 44 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
44 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> 45 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
45 </ul> 46 </ul>
46 </div><!-- footer top --> 47 </div><!-- footer top -->
47 <div class="footer-bottom"> 48 <div class="footer-bottom">
48 <ul> 49 <ul>
49 <li></li> 50 <li></li>
50 <li></li> 51 <li></li>
51 </ul> 52 </ul>
52 </div><!-- footer top --> 53 </div><!-- footer top -->
53 </div><!-- footer --> 54 </div><!-- footer -->
54 55
55 </div> 56 </div>
56 <!-- body wrapper --> 57 <!-- body wrapper -->
57 </div> 58 </div>
58 <!-- main wrapper --> 59 <!-- main wrapper -->
59 </main> 60 </main>
60 </template> 61 </template>
61 62
62 <script> 63 <script>
63 import Vue from "vue"; 64 import Vue from "vue";
64 import router from "../router"; 65 import router from "../router";
65 import Header from "./Header"; 66 import Header from "./Header";
66 67
67 export default { 68 export default {
68 components: { 69 components: {
69 Header: Header, 70 Header: Header,
70 }, 71 },
71 name: "AuthorIntro", 72 name: "AuthorIntro",
72 73
73 data() { 74 data() {
74 75
75 return { 76 return {
76 allSlide:[], 77 allSlide:[],
77 currentSlideIndex:null, 78 currentSlideIndex:null,
78 currentSlideData:null, 79 currentSlideData:null,
79 }; 80 };
80 }, 81 },
81 mounted() { 82 mounted() {
82 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); 83 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
83 if (allSlideData) { 84 if (allSlideData) {
84 this.allSlide = JSON.parse(allSlideData); 85 this.allSlide = JSON.parse(allSlideData);
85 this.getCurrentSlideData(); 86 this.getCurrentSlideData();
86 } 87 }
87 88
88 }, 89 },
89 methods: { 90 methods: {
90 getCurrentSlideData(){ 91 getCurrentSlideData(){
91 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); 92 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
92 this.currentSlideIndex = i; 93 this.currentSlideIndex = i;
93 this.currentSlideData = this.allSlide[i] 94 this.currentSlideData = this.allSlide[i]
94 console.log("currentSlideData",this.currentSlideData) 95 console.log("currentSlideData",this.currentSlideData)
95 96
96 }, 97 },
97 goNext(){ 98 goNext(){
98 this.currentSlideIndex++ 99 this.currentSlideIndex++
99 this.$router.push({ 100 this.$router.push({
100 name: this.allSlide[this.currentSlideIndex].ur, 101 name: this.allSlide[this.currentSlideIndex].ur,
101 params: { 102 params: {
102 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 103 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
103 slideId: this.allSlide[this.currentSlideIndex].slideId, 104 slideId: this.allSlide[this.currentSlideIndex].slideId,
104 }, 105 },
105 }); 106 });
106 107
107 }, 108 },
108 goBack(){ 109 goBack(){
109 this.currentSlideIndex-- 110 this.currentSlideIndex--
110 this.$router.push({ 111 this.$router.push({
111 name: this.allSlide[this.currentSlideIndex].ur, 112 name: this.allSlide[this.currentSlideIndex].ur,
112 params: { 113 params: {
113 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 114 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
114 slideId: this.allSlide[this.currentSlideIndex].slideId, 115 slideId: this.allSlide[this.currentSlideIndex].slideId,
115 }, 116 },
116 }); 117 });
117 118
118 }, 119 },
119 goToLogin() { 120 goToLogin() {
120 this.$router.push("/login"); 121 this.$router.push("/login");
121 }, 122 },
122 goToSignUp() { 123 goToSignUp() {
123 this.$router.push("/"); 124 this.$router.push("/");
124 }, 125 },
125 goToProfile() { 126 goToProfile() {
126 this.$router.push("/profile"); 127 this.$router.push("/profile");
127 }, 128 },
128 129
129 }, 130 },
130 }; 131 };
131 </script> 132 </script>
132 133
src/components/NoScreenshotSingleAuthor.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 <!-- chat box --> 8 <!-- chat box -->
9 <div class="bounce-board-wrp" id="cht_box_close"> 9 <div class="bounce-board-wrp" id="cht_box_close">
10 <div class="inner-wrp-bc"> 10 <div class="inner-wrp-bc">
11 <div class="bc-top-head"> 11 <div class="bc-top-head">
12 <span class="bc-head"> 12 <span class="bc-head">
13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
14 </span> 14 </span>
15 <div class="action-sort"> 15 <div class="action-sort">
16 <span class="sort-by">SORT BY</span> 16 <!-- <span class="sort-by">SORT BY</span>
17 <div class="btn-group"> 17 <div class="btn-group">
18 <button 18 <button
19 type="button" 19 type="button"
20 class="bc-sort-list dropdown-toggle" 20 class="bc-sort-list dropdown-toggle"
21 data-toggle="dropdown" 21 data-toggle="dropdown"
22 aria-haspopup="true" 22 aria-haspopup="true"
23 aria-expanded="false" 23 aria-expanded="false"
24 > 24 >
25 BEST 25 BEST
26 </button> 26 </button>
27 <div class="dropdown-menu short_by"> 27 <div class="dropdown-menu short_by">
28 <a class="dropdown-item" href="javasript:void(0);" 28 <a class="dropdown-item" href="javasript:void(0);"
29 >BEST 1</a 29 >BEST 1</a
30 > 30 >
31 <a class="dropdown-item" href="javasript:void(0);" 31 <a class="dropdown-item" href="javasript:void(0);"
32 >BEST 2</a 32 >BEST 2</a
33 > 33 >
34 <a class="dropdown-item" href="javasript:void(0);" 34 <a class="dropdown-item" href="javasript:void(0);"
35 >BEST 3</a 35 >BEST 3</a
36 > 36 >
37 </div> 37 </div>
38 </div> 38 </div> -->
39 <a 39 <a
40 href="javasript:void(0);" 40 href="javasript:void(0);"
41 @click="chtbox_close" 41 @click="chtbox_close"
42 class="close_chat_bx" 42 class="close_chat_bx"
43 ><img src="../assets/images/close.png" alt="close" /></a 43 ><img src="../assets/images/close.png" alt="close" /></a
44 ><!-- close --> 44 ><!-- close -->
45 </div> 45 </div>
46 <!-- action sort --> 46 <!-- action sort -->
47 </div> 47 </div>
48 <!-- top head --> 48 <!-- top head -->
49 <div class="bounce-board-body"> 49 <div class="bounce-board-body">
50 <!-- all user comments --> 50 <!-- all user comments -->
51 <ul class="bounced-user-comments"> 51 <ul class="bounced-user-comments">
52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53 <div class="bc_brd_l"></div> 53 <div class="bc_brd_l"></div>
54 <!-- border --> 54 <!-- border -->
55 <div class="parent-full-width" v-if="cmnt.comment"> 55 <div class="parent-full-width" v-if="cmnt.comment">
56 <div class="full-width"> 56 <div class="full-width">
57 <div class="b-user-head"> 57 <div class="b-user-head">
58 <img :src="cmnt.user.profilePic" /> 58 <img :src="cmnt.user.profilePic" />
59 <span class="head-content">{{ cmnt.user.name }} </span> 59 <span class="head-content">{{ cmnt.user.name }} </span>
60 <ul> 60 <ul>
61 <li> 61 <li>
62 <span></span 62 <span></span
63 ><img src="../assets/images/u-info-icon.png" />{{ 63 ><img src="../assets/images/u-info-icon.png" />{{
64 cmnt.user.karmaPoints 64 cmnt.user.karmaPoints
65 }}pts 65 }}pts
66 </li> 66 </li>
67 <li> 67 <li>
68 <span></span>{{ dateGenerator(cmnt.createdAt) }} 68 <span></span>{{ dateGenerator(cmnt.createdAt) }}
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </div> 71 </div>
72 <!-- header --> 72 <!-- header -->
73 <p> 73 <p>
74 {{ cmnt.comment }} 74 {{ cmnt.comment }}
75 </p> 75 </p>
76 <div class="joined_wrapper"> 76 <div class="joined_wrapper">
77 <ul class="joined-info info_bc_spc"> 77 <ul class="joined-info info_bc_spc">
78 <li> 78 <li>
79 <img 79 <img
80 src="../assets/images/heart.svg" 80 src="../assets/images/heart.svg"
81 v-if="cmnt.like == false" 81 v-if="cmnt.like == false"
82 @click="likeComment(true, cmnt._id)" 82 @click="likeComment(true, cmnt._id)"
83 class="cursor-pointer" 83 class="cursor-pointer"
84 /> 84 />
85 <img 85 <img
86 src="../assets/images/purple-heart.png" 86 src="../assets/images/purple-heart.png"
87 v-if="cmnt.like == true" 87 v-if="cmnt.like == true"
88 @click="likeComment(false, cmnt._id)" 88 @click="likeComment(false, cmnt._id)"
89 class="cursor-pointer" 89 class="cursor-pointer"
90 /> 90 />
91 </li> 91 </li>
92 <li> 92 <li>
93 <a href="javasript:void(0);"> 93 <a href="javasript:void(0);">
94 {{ cmnt.likes.length }}</a 94 {{ cmnt.likes.length }}</a
95 > 95 >
96 </li> 96 </li>
97 <li class="comment-spc"> 97 <li class="comment-spc">
98 <img src="../assets/images/purple-comment.png" /> 98 <img src="../assets/images/purple-comment.png" />
99 </li> 99 </li>
100 <li> 100 <li>
101 <a href="javasript:void(0);"> 101 <a href="javasript:void(0);">
102 {{ cmnt.children.length }}</a 102 {{ cmnt.children.length }}</a
103 > 103 >
104 </li> 104 </li>
105 </ul> 105 </ul>
106 <div class="add_rply" v-if="!cmnt.childInput"> 106 <div class="add_rply" v-if="!cmnt.childInput">
107 <input 107 <input
108 type="text" 108 type="text"
109 @click="eachRply(cmnt)" 109 @click="eachRply(cmnt)"
110 class="add_Rply_C" 110 class="add_Rply_C"
111 placeholder="Add your reply" 111 placeholder="Add your reply"
112 /> 112 />
113 </div> 113 </div>
114 <!-- rly form --> 114 <!-- rly form -->
115 </div> 115 </div>
116 <!-- joined wrapper --> 116 <!-- joined wrapper -->
117 </div> 117 </div>
118 <!-- full width --> 118 <!-- full width -->
119 </div> 119 </div>
120 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 120 <div class="comments-footer each-ft" v-if="cmnt.childInput">
121 <textarea v-model="comment" id="childInput"></textarea> 121 <textarea v-model="comment" id="childInput"></textarea>
122 <div class="comments-footer-wrp"> 122 <div class="comments-footer-wrp">
123 <a 123 <a
124 @click="createChildComment(cmnt)" 124 @click="createChildComment(cmnt)"
125 href="javasript:void(0);" 125 href="javasript:void(0);"
126 class="add_comments_chat reply-Wdth" 126 class="add_comments_chat reply-Wdth"
127 >Reply</a 127 >Reply</a
128 > 128 >
129 <a 129 <a
130 href="javasript:void(0);" 130 href="javasript:void(0);"
131 class="discard_bt" 131 class="discard_bt"
132 @click="discardRply(cmnt)" 132 @click="discardRply(cmnt)"
133 ><img src="../assets/images/discard.svg" 133 ><img src="../assets/images/discard.svg"
134 /></a> 134 /></a>
135 </div> 135 </div>
136 </div> 136 </div>
137 <!-- parent --> 137 <!-- parent -->
138 <div 138 <div
139 class="child-full-width" 139 class="child-full-width"
140 v-for="(childCmnt, i) in cmnt.children" 140 v-for="(childCmnt, i) in cmnt.children"
141 :key="i" 141 :key="i"
142 > 142 >
143 <div class="full-width"> 143 <div class="full-width">
144 <div class="b-user-head"> 144 <div class="b-user-head">
145 <img :src="childCmnt.user.profilePic" /> 145 <img :src="childCmnt.user.profilePic" />
146 <span class="head-content" 146 <span class="head-content"
147 >{{ childCmnt.user.name }} 147 >{{ childCmnt.user.name }}
148 </span> 148 </span>
149 <ul> 149 <ul>
150 <li> 150 <li>
151 <span></span 151 <span></span
152 ><img src="../assets/images/u-info-icon.png" />{{ 152 ><img src="../assets/images/u-info-icon.png" />{{
153 childCmnt.user.karmaPoints 153 childCmnt.user.karmaPoints
154 }}pts 154 }}pts
155 </li> 155 </li>
156 <li> 156 <li>
157 <span></span 157 <span></span
158 >{{ dateGenerator(childCmnt.createdAt) }} 158 >{{ dateGenerator(childCmnt.createdAt) }}
159 </li> 159 </li>
160 </ul> 160 </ul>
161 </div> 161 </div>
162 <p> 162 <p>
163 {{ childCmnt.comment }} 163 {{ childCmnt.comment }}
164 </p> 164 </p>
165 <div class="joined_wrapper"> 165 <div class="joined_wrapper">
166 <ul class="joined-info info_bc_spc"> 166 <ul class="joined-info info_bc_spc">
167 <li> 167 <li>
168 <img 168 <img
169 src="../assets/images/heart.svg" 169 src="../assets/images/heart.svg"
170 v-if="childCmnt.like == false" 170 v-if="childCmnt.like == false"
171 @click="likeComment(true, childCmnt._id)" 171 @click="likeComment(true, childCmnt._id)"
172 class="cursor-pointer" 172 class="cursor-pointer"
173 /> 173 />
174 <img 174 <img
175 src="../assets/images/purple-heart.png" 175 src="../assets/images/purple-heart.png"
176 v-if="childCmnt.like == true" 176 v-if="childCmnt.like == true"
177 @click="likeComment(false, childCmnt._id)" 177 @click="likeComment(false, childCmnt._id)"
178 class="cursor-pointer" 178 class="cursor-pointer"
179 /> 179 />
180 </li> 180 </li>
181 <li> 181 <li>
182 <a href="javasript:void(0);"> 182 <a href="javasript:void(0);">
183 {{ childCmnt.likes.length }}</a 183 {{ childCmnt.likes.length }}</a
184 > 184 >
185 </li> 185 </li>
186 </ul> 186 </ul>
187 </div> 187 </div>
188 </div> 188 </div>
189 </div> 189 </div>
190 <!-- eree --> 190 <!-- eree -->
191 191
192 <!-- comments footer --> 192 <!-- comments footer -->
193 </li> 193 </li>
194 </ul> 194 </ul>
195 </div> 195 </div>
196 <!-- bounce board body --> 196 <!-- bounce board body -->
197 <div class="comments-footer" v-if="parentInput"> 197 <div class="comments-footer" v-if="parentInput">
198 <textarea v-model="comment"></textarea> 198 <textarea v-model="comment"></textarea>
199 <div class="comments-footer-wrp"> 199 <div class="comments-footer-wrp">
200 <a 200 <a
201 href="javasript:void(0);" 201 href="javasript:void(0);"
202 class="add_comments_chat" 202 class="add_comments_chat"
203 @click="createComment" 203 @click="createComment"
204 ><img src="../assets/images/add-comment.svg" /> Comment</a 204 ><img src="../assets/images/add-comment.svg" /> Comment</a
205 > 205 >
206 </div> 206 </div>
207 </div> 207 </div>
208 <!-- comments footer --> 208 <!-- comments footer -->
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- bounceboard wrp --> 211 <!-- bounceboard wrp -->
212 <!-- chat box --> 212 <!-- chat box -->
213 213
214 214
215 <div class="single-author-comments"> 215 <div class="single-author-comments">
216 <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> 216 <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
217 <div class="ct-l-400"> 217 <div class="ct-l-400">
218 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 218 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
219 <div class="a-intro-comments right-corner"> 219 <div class="a-intro-comments right-corner">
220 <p> 220 <p>
221 {{commentList[0].comment}} 221 {{commentList[0].comment}}
222 </p> 222 </p>
223 <ul class="rly-comment-set"> 223 <ul class="rly-comment-set">
224 <!-- like/dislike --> 224 <!-- like/dislike -->
225 <li> 225 <li>
226 <img 226 <img
227 src="../assets/images/heart.svg" 227 src="../assets/images/heart.svg"
228 v-if="commentList[0].like == false" 228 v-if="commentList[0].like == false"
229 @click="likeComment(true, commentList[0]._id)" 229 @click="likeComment(true, commentList[0]._id)"
230 class="cursor-pointer" 230 class="cursor-pointer"
231 /> 231 />
232 <img 232 <img
233 src="../assets/images/purple-heart.png" 233 src="../assets/images/purple-heart.png"
234 v-if="commentList[0].like == true" 234 v-if="commentList[0].like == true"
235 @click="likeComment(false, commentList[0]._id)" 235 @click="likeComment(false, commentList[0]._id)"
236 class="cursor-pointer" 236 class="cursor-pointer"
237 /> 237 />
238 <a href="javascript:void(0);">{{ 238 <a href="javascript:void(0);">{{
239 commentList[0].likes.length 239 commentList[0].likes.length
240 }}</a> 240 }}</a>
241 </li> 241 </li>
242 <!-- like/dislike ends --> 242 <!-- like/dislike ends -->
243 <li> 243 <li>
244 <img src="../assets/images/rply.svg" /> 244 <img src="../assets/images/rply.svg" />
245 <a href="javascript:void(0);" @click="reply_cht_box(0)" 245 <a href="javascript:void(0);" @click="reply_cht_box(0)"
246 >Reply</a 246 >Reply</a
247 > 247 >
248 </li> 248 </li>
249 </ul> 249 </ul>
250 </div> 250 </div>
251 <!-- comments box --> 251 <!-- comments box -->
252 </div> 252 </div>
253 </div> 253 </div>
254 <img 254 <img
255 class="s-user-comments m-0" 255 class="s-user-comments m-0"
256 :src="currentSlideData.payload.metaData.authorImage" 256 :src="currentSlideData.payload.metaData.authorImage"
257 /> 257 />
258 <div class="comments-a-wrp ct-width"> 258 <div class="comments-a-wrp ct-width">
259 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 259 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
260 <div class="a-intro-comments"> 260 <div class="a-intro-comments">
261 <p> 261 <p>
262 {{commentList[1].comment}} 262 {{commentList[1].comment}}
263 </p> 263 </p>
264 <ul class="rly-comment-set"> 264 <ul class="rly-comment-set">
265 <!-- like/dislike --> 265 <!-- like/dislike -->
266 <li> 266 <li>
267 <img 267 <img
268 src="../assets/images/heart.svg" 268 src="../assets/images/heart.svg"
269 v-if="commentList[1].like == false" 269 v-if="commentList[1].like == false"
270 @click="likeComment(true, commentList[1]._id)" 270 @click="likeComment(true, commentList[1]._id)"
271 class="cursor-pointer" 271 class="cursor-pointer"
272 /> 272 />
273 <img 273 <img
274 src="../assets/images/purple-heart.png" 274 src="../assets/images/purple-heart.png"
275 v-if="commentList[1].like == true" 275 v-if="commentList[1].like == true"
276 @click="likeComment(false, commentList[1]._id)" 276 @click="likeComment(false, commentList[1]._id)"
277 class="cursor-pointer" 277 class="cursor-pointer"
278 /> 278 />
279 <a href="javascript:void(0);">{{ 279 <a href="javascript:void(0);">{{
280 commentList[1].likes.length 280 commentList[1].likes.length
281 }}</a> 281 }}</a>
282 </li> 282 </li>
283 <!-- like/dislike ends --> 283 <!-- like/dislike ends -->
284 <li> 284 <li>
285 <img src="../assets/images/rply.svg" /> 285 <img src="../assets/images/rply.svg" />
286 <a href="javascript:void(0);" @click="reply_cht_box(1)" 286 <a href="javascript:void(0);" @click="reply_cht_box(1)"
287 >Reply</a 287 >Reply</a
288 > 288 >
289 </li> 289 </li>
290 </ul> 290 </ul>
291 </div> 291 </div>
292 <!-- comments box --> 292 <!-- comments box -->
293 </div> 293 </div>
294 <!-- single author comments --> 294 <!-- single author comments -->
295 <div class="single-author-li-comments" v-if="commentExistCheck(2)"> 295 <div class="single-author-li-comments" v-if="commentExistCheck(2)">
296 <div class="a-intro-comments"> 296 <div class="a-intro-comments">
297 <p> 297 <p>
298 {{commentList[2].comment}} 298 {{commentList[2].comment}}
299 </p> 299 </p>
300 <ul class="rly-comment-set"> 300 <ul class="rly-comment-set">
301 <!-- like/dislike --> 301 <!-- like/dislike -->
302 <li> 302 <li>
303 <img 303 <img
304 src="../assets/images/heart.svg" 304 src="../assets/images/heart.svg"
305 v-if="commentList[2].like == false" 305 v-if="commentList[2].like == false"
306 @click="likeComment(true, commentList[2]._id)" 306 @click="likeComment(true, commentList[2]._id)"
307 class="cursor-pointer" 307 class="cursor-pointer"
308 /> 308 />
309 <img 309 <img
310 src="../assets/images/purple-heart.png" 310 src="../assets/images/purple-heart.png"
311 v-if="commentList[2].like == true" 311 v-if="commentList[2].like == true"
312 @click="likeComment(false, commentList[2]._id)" 312 @click="likeComment(false, commentList[2]._id)"
313 class="cursor-pointer" 313 class="cursor-pointer"
314 /> 314 />
315 <a href="javascript:void(0);">{{ 315 <a href="javascript:void(0);">{{
316 commentList[2].likes.length 316 commentList[2].likes.length
317 }}</a> 317 }}</a>
318 </li> 318 </li>
319 <!-- like/dislike ends --> 319 <!-- like/dislike ends -->
320 <li> 320 <li>
321 <img src="../assets/images/rply.svg" /> 321 <img src="../assets/images/rply.svg" />
322 <a href="javascript:void(0);" @click="reply_cht_box(2)" 322 <a href="javascript:void(0);" @click="reply_cht_box(2)"
323 >Reply</a 323 >Reply</a
324 > 324 >
325 </li> 325 </li>
326 </ul> 326 </ul>
327 </div> 327 </div>
328 <!-- comments box --> 328 <!-- comments box -->
329 </div> 329 </div>
330 <!-- coment box 3 --> 330 <!-- coment box 3 -->
331 <!-- <div class="single-author-li-comments" v-if="commentExistCheck(3)"> 331 <!-- <div class="single-author-li-comments" v-if="commentExistCheck(3)">
332 <div class="a-intro-comments"> 332 <div class="a-intro-comments">
333 <p> 333 <p>
334 {{commentList[3].comment}} 334 {{commentList[3].comment}}
335 </p> 335 </p>
336 <ul class="rly-comment-set"> 336 <ul class="rly-comment-set">
337 <li> 337 <li>
338 <img 338 <img
339 src="../assets/images/heart.svg" 339 src="../assets/images/heart.svg"
340 v-if="commentList[3].like == false" 340 v-if="commentList[3].like == false"
341 @click="likeComment(true, commentList[2]._id)" 341 @click="likeComment(true, commentList[2]._id)"
342 class="cursor-pointer" 342 class="cursor-pointer"
343 /> 343 />
344 <img 344 <img
345 src="../assets/images/purple-heart.png" 345 src="../assets/images/purple-heart.png"
346 v-if="commentList[3].like == true" 346 v-if="commentList[3].like == true"
347 @click="likeComment(false, commentList[3]._id)" 347 @click="likeComment(false, commentList[3]._id)"
348 class="cursor-pointer" 348 class="cursor-pointer"
349 /> 349 />
350 <a href="javascript:void(0);">{{ 350 <a href="javascript:void(0);">{{
351 commentList[3].likes.length 351 commentList[3].likes.length
352 }}</a> 352 }}</a>
353 </li> 353 </li>
354 <li> 354 <li>
355 <img src="../assets/images/rply.svg" /> 355 <img src="../assets/images/rply.svg" />
356 <a href="javascript:void(0);" @click="reply_cht_box(3)" 356 <a href="javascript:void(0);" @click="reply_cht_box(3)"
357 >Reply</a 357 >Reply</a
358 > 358 >
359 </li> 359 </li>
360 </ul> 360 </ul>
361 </div> 361 </div>
362 </div> --> 362 </div> -->
363 <!-- coment box 3 --> 363 <!-- coment box 3 -->
364 364
365 365
366 <!-- single author comments --> 366 <!-- single author comments -->
367 <!-- <div class="a-intro-comments custom-selected-author-style"> 367 <!-- <div class="a-intro-comments custom-selected-author-style">
368 <img src="../assets/images/org-rect.svg" class="rect" /> 368 <img src="../assets/images/org-rect.svg" class="rect" />
369 <div class="top-wrp"> 369 <div class="top-wrp">
370 Product Insight <a href="javascript:void(0);"><img src="../assets/images/org-link.svg" /></a> 370 Product Insight <a href="javascript:void(0);"><img src="../assets/images/org-link.svg" /></a>
371 </div> 371 </div>
372 <div class="top-head">Automate your customer support for better engagement</div> 372 <div class="top-head">Automate your customer support for better engagement</div>
373 <p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p> 373 <p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p>
374 374
375 375
376 </div> --> 376 </div> -->
377 <!-- comments box --> 377 <!-- comments box -->
378 </div> 378 </div>
379 </div> 379 </div>
380 <!-- single author comments --> 380 <!-- single author comments -->
381 <div class="footer-nav"> 381 <div class="footer-nav">
382 <div class="footer-top white-bg"> 382 <div class="footer-top white-bg">
383 <div class="row"> 383 <div class="row">
384 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 384 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
385 <div class="row h-100p"> 385 <div class="row h-100p">
386 <div 386 <div
387 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 387 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
388 > 388 >
389 <div class="ft-comments-group testi-photos-ct"> 389 <div class="ft-comments-group testi-photos-ct">
390 <div class="c-with-photos"> 390 <div class="c-with-photos">
391 <span class="count-comments" 391 <span class="count-comments"
392 >{{ getLastcomment("count", commentList) }}+ 392 >{{ getLastcomment("count", commentList) }}+
393 Comments</span 393 Comments</span
394 ><!-- count commets --> 394 ><!-- count commets -->
395 <ul class="comments-photos"> 395 <ul class="comments-photos">
396 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 396 <!-- <li><img src="../assets/images/c-photo-1.png" /></li>
397 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 397 <li><img src="../assets/images/c-photo-2.png" /></li>
398 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 398 <li><img src="../assets/images/c-photo-3.png" /></li> -->
399 </ul> 399 </ul>
400 <!-- comment photos --> 400 <!-- comment photos -->
401 </div> 401 </div>
402 <div class="comments-detail all-c-space"> 402 <div class="comments-detail all-c-space">
403 <span 403 <span
404 >{{ getLastcomment("name", commentList) }} 404 >{{ getLastcomment("name", commentList) }}
405 <a href="javascript:void(0);" @click="open_ct_box" 405 <a href="javascript:void(0);" @click="open_ct_box"
406 >View All</a 406 >View All</a
407 ></span 407 ></span
408 > 408 >
409 <p> 409 <p>
410 <!-- I wonder what the difference between “Dunzo Assistant” 410 <!-- I wonder what the difference between “Dunzo Assistant”
411 and “Pickup and Drop... --> 411 and “Pickup and Drop... -->
412 {{ getLastcomment("msg", commentList) }} 412 {{ getLastcomment("msg", commentList) }}
413 </p> 413 </p>
414 </div> 414 </div>
415 <!-- comments detail --> 415 <!-- comments detail -->
416 </div> 416 </div>
417 <!-- comments Group --> 417 <!-- comments Group -->
418 </div> 418 </div>
419 </div> 419 </div>
420 </div> 420 </div>
421 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 421 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
422 <div class="comment-frm no-c-frm"> 422 <div class="comment-frm no-c-frm">
423 <div class="row"> 423 <div class="row">
424 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 424 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
425 <div class="form-group frm-wdth addfrm-spc"> 425 <div class="form-group frm-wdth addfrm-spc">
426 <input 426 <input
427 type="text" 427 type="text"
428 class="form-control" 428 class="form-control"
429 placeholder="Something on your mind?" 429 placeholder="Something on your mind?"
430 id="open_ct_box" 430 id="open_ct_box"
431 v-model="comment" 431 v-model="comment"
432 /> 432 />
433 </div> 433 </div>
434 </div> 434 </div>
435 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 435 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
436 <a 436 <a
437 href="javascript:void(0);" 437 href="javascript:void(0);"
438 @click="createComment" 438 @click="createComment"
439 class="add-comment" 439 class="add-comment"
440 ><img src="../assets/images/add-comment.svg" /> 440 ><img src="../assets/images/add-comment.svg" />
441 Comment</a 441 Comment</a
442 > 442 >
443 </div> 443 </div>
444 </div> 444 </div>
445 <!-- comment from --> 445 <!-- comment from -->
446 </div> 446 </div>
447 </div> 447 </div>
448 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 448 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
449 <ul class="top-intro-bt"> 449 <ul class="top-intro-bt">
450 <li> 450 <li>
451 <a href="javascript:void(0);" @click="goBack" 451 <a href="javascript:void(0);" @click="goBack"
452 ><img src="../assets/images/skip-prev.svg" /> Prev</a 452 ><img src="../assets/images/skip-prev.svg" /> Prev</a
453 > 453 >
454 </li> 454 </li>
455 <li> 455 <li>
456 <a href="javascript:void(0);" @click="goNext" 456 <a href="javascript:void(0);" @click="goNext"
457 ><img src="../assets/images/skip-next.svg" /> Skip to next 457 ><img src="../assets/images/skip-next.svg" /> Skip to next
458 slide</a 458 slide</a
459 > 459 >
460 </li> 460 </li>
461 </ul> 461 </ul>
462 </div> 462 </div>
463 <!-- buttons list --> 463 <!-- buttons list -->
464 </div> 464 </div>
465 </div> 465 </div>
466 <!-- footer top --> 466 <!-- footer top -->
467 <div class="footer-bottom"> 467 <div class="footer-bottom">
468 <ul> 468 <ul>
469 <li class="active"></li> 469 <li class="active"></li>
470 <li></li> 470 <li></li>
471 </ul> 471 </ul>
472 </div> 472 </div>
473 <!-- footer top --> 473 <!-- footer top -->
474 </div> 474 </div>
475 <!-- footer --> 475 <!-- footer -->
476 </div> 476 </div>
477 <!-- body wrapper --> 477 <!-- body wrapper -->
478 </div> 478 </div>
479 <!-- main wrapper --> 479 <!-- main wrapper -->
480 </main> 480 </main>
481 </template> 481 </template>
482 482
483 <script> 483 <script>
484 import Vue from "vue"; 484 import Vue from "vue";
485 import router from "../router"; 485 import router from "../router";
486 import axios from "axios"; 486 import axios from "axios";
487 import moment from 'moment'; 487 import moment from 'moment';
488 import Header from "./Header"; 488 import Header from "./Header";
489 489
490 export default { 490 export default {
491 components: { 491 components: {
492 Header: Header, 492 Header: Header,
493 }, 493 },
494 name: "noscreenshotSingleautho", 494 name: "noscreenshotSingleautho",
495 495
496 data() { 496 data() {
497 return { 497 return {
498 allSlide: [], 498 allSlide: [],
499 currentSlideIndex: null, 499 currentSlideIndex: null,
500 currentSlideData: null, 500 currentSlideData: null,
501 // 501 //
502 usertoken: null, 502 usertoken: null,
503 commentList: [], 503 commentList: [],
504 comment: null, 504 comment: null,
505 parentInput:true, 505 parentInput:true,
506 }; 506 };
507 }, 507 },
508 mounted() { 508 mounted() {
509 var allSlideData = localStorage.getItem( 509 var allSlideData = localStorage.getItem(
510 "spotlight_slide" + this.$route.params.caseStudyId 510 "spotlight_slide" + this.$route.params.caseStudyId
511 ); 511 );
512 if (allSlideData) { 512 if (allSlideData) {
513 this.allSlide = JSON.parse(allSlideData); 513 this.allSlide = JSON.parse(allSlideData);
514 this.getCurrentSlideData(); 514 this.getCurrentSlideData();
515 } 515 }
516 var userdata = localStorage.getItem("spotlight_usertoken"); 516 var userdata = localStorage.getItem("spotlight_usertoken");
517 if (userdata) { 517 if (userdata) {
518 userdata = JSON.parse(userdata); 518 userdata = JSON.parse(userdata);
519 this.usertoken = userdata.token; 519 this.usertoken = userdata.token;
520 this.getComment(); 520 this.getComment();
521 } 521 }
522 }, 522 },
523 methods: { 523 methods: {
524 getCurrentSlideData() { 524 getCurrentSlideData() {
525 var i = this.allSlide.findIndex( 525 var i = this.allSlide.findIndex(
526 (slide_) => slide_.slideId == this.$route.params.slideId 526 (slide_) => slide_.slideId == this.$route.params.slideId
527 ); 527 );
528 this.currentSlideIndex = i; 528 this.currentSlideIndex = i;
529 this.currentSlideData = this.allSlide[i]; 529 this.currentSlideData = this.allSlide[i];
530 console.log("currentSlideData", this.currentSlideData); 530 console.log("currentSlideData", this.currentSlideData);
531 }, 531 },
532 goNext() { 532 goNext() {
533 this.currentSlideIndex++; 533 this.currentSlideIndex++;
534 this.$router.push({ 534 this.$router.push({
535 name: this.allSlide[this.currentSlideIndex].ur, 535 name: this.allSlide[this.currentSlideIndex].ur,
536 params: { 536 params: {
537 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 537 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
538 slideId: this.allSlide[this.currentSlideIndex].slideId, 538 slideId: this.allSlide[this.currentSlideIndex].slideId,
539 }, 539 },
540 }); 540 });
541 }, 541 },
542 goBack() { 542 goBack() {
543 this.currentSlideIndex--; 543 this.currentSlideIndex--;
544 this.$router.push({ 544 this.$router.push({
545 name: this.allSlide[this.currentSlideIndex].ur, 545 name: this.allSlide[this.currentSlideIndex].ur,
546 params: { 546 params: {
547 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 547 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
548 slideId: this.allSlide[this.currentSlideIndex].slideId, 548 slideId: this.allSlide[this.currentSlideIndex].slideId,
549 }, 549 },
550 }); 550 });
551 }, 551 },
552 createComment() { 552 createComment() {
553 console.log("===", this.comment); 553 console.log("===", this.comment);
554 var obj = { 554 var obj = {
555 caseStudyId: this.currentSlideData.caseStudyId, 555 caseStudyId: this.currentSlideData.caseStudyId,
556 slideId: this.currentSlideData.slideId, 556 slideId: this.currentSlideData.slideId,
557 comment: this.comment, 557 comment: this.comment,
558 558
559 }; 559 };
560 axios 560 axios
561 .post("/bounceBoard/comment", obj, { 561 .post("/bounceBoard/comment", obj, {
562 headers: { 562 headers: {
563 Authorization: "Bearer " + this.usertoken, 563 Authorization: "Bearer " + this.usertoken,
564 }, 564 },
565 }) 565 })
566 .then((response) => { 566 .then((response) => {
567 this.comment = null; 567 this.comment = null;
568 this.getComment(); 568 this.getComment();
569 console.log(response); 569 console.log(response);
570 }) 570 })
571 .catch((error) => { 571 .catch((error) => {
572 if (error.response) { 572 if (error.response) {
573 this.$toaster.error(error.response.data.message); 573 this.$toaster.error(error.response.data.message);
574 } 574 }
575 }); 575 });
576 }, 576 },
577 createChildComment(cmnt) { 577 createChildComment(cmnt) {
578 console.log(cmnt,"===", this.comment); 578 console.log(cmnt,"===", this.comment);
579 var obj = { 579 var obj = {
580 caseStudyId: this.currentSlideData.caseStudyId, 580 caseStudyId: this.currentSlideData.caseStudyId,
581 slideId: this.currentSlideData.slideId, 581 slideId: this.currentSlideData.slideId,
582 comment: this.comment, 582 comment: this.comment,
583 parentId: cmnt._id, 583 parentId: cmnt._id,
584 584
585 }; 585 };
586 axios 586 axios
587 .post("/bounceBoard/comment", obj, { 587 .post("/bounceBoard/comment", obj, {
588 headers: { 588 headers: {
589 Authorization: "Bearer " + this.usertoken, 589 Authorization: "Bearer " + this.usertoken,
590 }, 590 },
591 }) 591 })
592 .then((response) => { 592 .then((response) => {
593 this.comment = null; 593 this.comment = null;
594 this.discardRply(cmnt); 594 this.discardRply(cmnt);
595 this.getComment(); 595 this.getComment();
596 console.log(response); 596 console.log(response);
597 }) 597 })
598 .catch((error) => { 598 .catch((error) => {
599 if (error.response) { 599 if (error.response) {
600 this.$toaster.error(error.response.data.message); 600 this.$toaster.error(error.response.data.message);
601 } 601 }
602 }); 602 });
603 }, 603 },
604 getComment() { 604 getComment() {
605 axios 605 axios
606 .get( 606 .get(
607 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 607 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
608 { 608 {
609 headers: { 609 headers: {
610 Authorization: "Bearer " + this.usertoken, 610 Authorization: "Bearer " + this.usertoken,
611 }, 611 },
612 } 612 }
613 ) 613 )
614 .then((response) => { 614 .then((response) => {
615 console.log(response.data); 615 console.log(response.data);
616 var comments = []; 616 var comments = [];
617 var keys = Object.keys(response.data.data) 617 var keys = Object.keys(response.data.data)
618 response.data.data 618 response.data.data
619 keys.forEach((key_) => { 619 keys.forEach((key_) => {
620 comments.push(response.data.data[key_]) 620 comments.push(response.data.data[key_])
621 }); 621 });
622 comments.forEach((coment_)=>{ 622 comments.forEach((coment_)=>{
623 coment_.childInput = false; 623 coment_.childInput = false;
624 }); 624 });
625 console.log("comments",comments) 625 console.log("comments",comments)
626 this.commentList = comments; 626 this.commentList = comments;
627 }) 627 })
628 .catch((error) => console.log(error)); 628 .catch((error) => console.log(error));
629 }, 629 },
630 dateGenerator(curreDate){ 630 dateGenerator(curreDate){
631 var todayDate = moment(new Date(), "DD.MM.YYYY"); 631 var todayDate = moment(new Date(), "DD.MM.YYYY");
632 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 632 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
633 var result = todayDate.diff(endDate, 'days'); 633 var result = todayDate.diff(endDate, 'days');
634 return result; 634 return result;
635 }, 635 },
636 goToLogin() { 636 goToLogin() {
637 this.$router.push("/login"); 637 this.$router.push("/login");
638 }, 638 },
639 goToSignUp() { 639 goToSignUp() {
640 this.$router.push("/"); 640 this.$router.push("/");
641 }, 641 },
642 chtbox_close() { 642 chtbox_close() {
643 $("#cht_box_close").removeClass("cht_close"); 643 $("#cht_box_close").removeClass("cht_close");
644 $("#open_ct_box, .c_hide").show(); 644 $("#open_ct_box, .c_hide").show();
645 $(".footer-top").addClass("white-bg"); 645 $(".footer-top").addClass("white-bg");
646 }, 646 },
647 open_ct_box() { 647 open_ct_box() {
648 $("#cht_box_close").addClass("cht_close"); 648 $("#cht_box_close").addClass("cht_close");
649 $("#open_ct_box, .c_hide").hide(); 649 $("#open_ct_box, .c_hide").hide();
650 $(".footer-top").removeClass("white-bg"); 650 $(".footer-top").removeClass("white-bg");
651 }, 651 },
652 eachRply(cmnt) { 652 eachRply(cmnt) {
653 cmnt.childInput = true; 653 cmnt.childInput = true;
654 this.parentInput = false; 654 this.parentInput = false;
655 this.comment = null; 655 this.comment = null;
656 setTimeout(() => { 656 setTimeout(() => {
657 document.getElementById("childInput").focus(); 657 document.getElementById("childInput").focus();
658 }, 100); 658 }, 100);
659 }, 659 },
660 discardRply(cmnt) { 660 discardRply(cmnt) {
661 cmnt.childInput = false; 661 cmnt.childInput = false;
662 this.parentInput = true; 662 this.parentInput = true;
663 this.comment = null; 663 this.comment = null;
664 }, 664 },
665 reply_cht_box(i) { 665 reply_cht_box(i) {
666 console.log(this.commentList, "cmnt"); 666 console.log(this.commentList, "cmnt");
667 $("#cht_box_close").addClass("cht_close"); 667 $("#cht_box_close").addClass("cht_close");
668 $("#open_ct_box, .c_hide").hide(); 668 $("#open_ct_box, .c_hide").hide();
669 $(".footer-top").removeClass("white-bg"); 669 $(".footer-top").removeClass("white-bg");
670 this.commentList[i].childInput = true; 670 this.commentList[i].childInput = true;
671 this.parentInput = false; 671 this.parentInput = false;
672 this.comment = null; 672 this.comment = null;
673 setTimeout(() => { 673 setTimeout(() => {
674 document.getElementById("childInput").focus(); 674 document.getElementById("childInput").focus();
675 }, 100); 675 }, 100);
676 }, 676 },
677 likeComment(status, id) { 677 likeComment(status, id) {
678 console.log("===", this.comment); 678 console.log("===", this.comment);
679 var obj = { 679 var obj = {
680 commentId: id, 680 commentId: id,
681 like: status, 681 like: status,
682 }; 682 };
683 axios 683 axios
684 .post("/bounceBoard/like", obj, { 684 .post("/bounceBoard/like", obj, {
685 headers: { 685 headers: {
686 Authorization: "Bearer " + this.usertoken, 686 Authorization: "Bearer " + this.usertoken,
687 }, 687 },
688 }) 688 })
689 .then((response) => { 689 .then((response) => {
690 this.getComment(); 690 this.getComment();
691 console.log(response); 691 console.log(response);
692 }) 692 })
693 .catch((error) => { 693 .catch((error) => {
694 if (error.response) { 694 if (error.response) {
695 this.$toaster.error(error.response.data.message); 695 this.$toaster.error(error.response.data.message);
696 } 696 }
697 }); 697 });
698 }, 698 },
699 getLastcomment(flag, commentArray) { 699 getLastcomment(flag, commentArray) {
700 var finalComment = null; 700 var finalComment = null;
701 var totalMessage = 0; 701 var totalMessage = 0;
702 var name = null; 702 var name = null;
703 commentArray.forEach((comment_) => { 703 commentArray.forEach((comment_) => {
704 if (comment_.comment != null) { 704 if (comment_.comment != null) {
705 name = comment_.user.name; 705 name = comment_.user.name;
706 finalComment = comment_.comment; 706 finalComment = comment_.comment;
707 totalMessage++; 707 totalMessage++;
708 } 708 }
709 }); 709 });
710 if (flag == "count") { 710 if (flag == "count") {
711 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 711 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
712 } else if (flag =="name") { 712 } else if (flag =="name") {
713 return (name = name); 713 return (name = name);
714 } else { 714 } else {
715 return finalComment; 715 return finalComment;
716 } 716 }
717 }, 717 },
718 commentExistCheck(i) { 718 commentExistCheck(i) {
719 console.log(this.commentList[i].comment); 719 console.log(this.commentList[i].comment);
720 var returnValue = false; 720 var returnValue = false;
721 if (this.commentList[i].comment) { 721 if (this.commentList[i].comment) {
722 returnValue = true; 722 returnValue = true;
723 } 723 }
724 return returnValue; 724 return returnValue;
725 }, 725 },
726 }, 726 },
727 }; 727 };
728 // 728 //
729 729
730 </script> 730 </script>
731 731
src/components/Profile.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <!-- profile --> 3 <!-- profile -->
4 <div class="popup-wrp" style="display: none"> 4 <div class="popup-wrp" style="display: none">
5 <div class="overlay" @click="hideDialog"></div> 5 <div class="overlay" @click="hideDialog"></div>
6 <div class="popup-set" id="add-profile" style="display: none"> 6 <div class="popup-set" id="add-profile" style="display: none">
7 <div class="popup-header"> 7 <div class="popup-header">
8 <div class="user-photo common_color"> 8 <div class="user-photo common_color">
9 <img :src="userData.profilePic" /> 9 <img :src="userData.profilePic" />
10 </div> 10 </div>
11 <!-- header user --> 11 <!-- header user -->
12 12
13 <ul> 13 <ul>
14 <li> 14 <li>
15 <a href="javasript:void(0);" 15 <a href="javasript:void(0);"
16 ><img src="../assets/images/replace.svg" /><span 16 ><img src="../assets/images/replace.svg" /><span
17 >Replace Avatar</span 17 >Replace Avatar</span
18 ></a 18 ></a
19 > 19 >
20 </li> 20 </li>
21 <li> 21 <li>
22 <a href="javasript:void(0);" @click="getRandomAvatar()" 22 <a href="javasript:void(0);" @click="getRandomAvatar()"
23 ><img src="../assets/images/randomise.svg" /><span 23 ><img src="../assets/images/randomise.svg" /><span
24 >Randomise Avatar</span 24 >Randomise Avatar</span
25 ></a 25 ></a
26 > 26 >
27 </li> 27 </li>
28 </ul> 28 </ul>
29 </div> 29 </div>
30 <!-- header --> 30 <!-- header -->
31 <div class="popup-body"> 31 <div class="popup-body">
32 <form class="popup-forms"> 32 <form class="popup-forms">
33 <div class="row"> 33 <div class="row">
34 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 34 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
35 <div class="form-group floating-label"> 35 <div class="form-group floating-label">
36 <input 36 <input
37 type="text" 37 type="text"
38 class="form-control" 38 class="form-control"
39 v-model="userData.firstName" 39 v-model="userData.firstName"
40 placeholder=" " 40 placeholder=" "
41 id="fname" 41 id="fname"
42 /> 42 />
43 <label for="fname">First Name</label> 43 <label for="fname">First Name</label>
44 </div> 44 </div>
45 </div> 45 </div>
46 <!-- input --> 46 <!-- input -->
47 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 47 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
48 <div class="form-group floating-label"> 48 <div class="form-group floating-label">
49 <input 49 <input
50 type="text" 50 type="text"
51 class="form-control" 51 class="form-control"
52 value="" 52 value=""
53 placeholder=" " 53 placeholder=" "
54 id="lname" 54 id="lname"
55 v-model="userData.lastName" 55 v-model="userData.lastName"
56 /> 56 />
57 <label for="lname" class="lname">Last Name</label> 57 <label for="lname" class="lname">Last Name</label>
58 </div> 58 </div>
59 </div> 59 </div>
60 <!-- input --> 60 <!-- input -->
61 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> 61 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
62 <div class="form-group floating-label"> 62 <div class="form-group floating-label">
63 <input 63 <input
64 type="text" 64 type="text"
65 class="form-control" 65 class="form-control"
66 value="" 66 value=""
67 v-model="userData.designation" 67 v-model="userData.designation"
68 placeholder=" " 68 placeholder=" "
69 id="designation" 69 id="designation"
70 /> 70 />
71 <label for="designation">Designation</label> 71 <label for="designation">Designation</label>
72 </div> 72 </div>
73 </div> 73 </div>
74 <!-- input --> 74 <!-- input -->
75 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 75 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
76 <div class="form-group floating-label"> 76 <div class="form-group floating-label">
77 <input 77 <input
78 type="text" 78 type="text"
79 class="form-control" 79 class="form-control"
80 v-model="userData.organisation" 80 v-model="userData.organisation"
81 id="company" 81 id="company"
82 placeholder=" " 82 placeholder=" "
83 /> 83 />
84 <label for="company">Company</label> 84 <label for="company">Company</label>
85 </div> 85 </div>
86 </div> 86 </div>
87 <!-- input --> 87 <!-- input -->
88 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 88 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
89 <div class="form-group floating-label"> 89 <div class="form-group floating-label">
90 <textarea 90 <textarea
91 type="text" 91 type="text"
92 class="form-control" 92 class="form-control"
93 value="" 93 value=""
94 v-model="userData.bio" 94 v-model="userData.bio"
95 id="yourself" 95 id="yourself"
96 placeholder=" " 96 placeholder=" "
97 ></textarea> 97 ></textarea>
98 <label for="yourself" 98 <label for="yourself"
99 >Tell others a little about yourself</label 99 >Tell others a little about yourself</label
100 > 100 >
101 </div> 101 </div>
102 </div> 102 </div>
103 <!-- input --> 103 <!-- input -->
104 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 104 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
105 <p class="things">Three things that you talk more about</p> 105 <p class="things">Three things that you talk more about</p>
106 106
107 <ul class="interests"> 107 <ul class="interests">
108 <li v-for="(interest, i) in userData.interests" :key="i"> 108 <li v-for="(interest, i) in userData.interests" :key="i">
109 <span>{{ interest }}</span> 109 <span>{{ interest }}</span>
110 <a 110 <a
111 href="javascript:void(0);" 111 href="javascript:void(0);"
112 @click="removeInterest(i)" 112 @click="removeInterest(i)"
113 class="cat-minus" 113 class="cat-minus"
114 ><img src="../assets/images/minus.svg" 114 ><img src="../assets/images/minus.svg"
115 /></a> 115 /></a>
116 </li> 116 </li>
117 <li> 117 <li>
118 <input 118 <input
119 class="" 119 class=""
120 placeholder="Add interest" 120 placeholder="Add interest"
121 v-on:keyup.enter="addInterest" 121 v-on:keyup.enter="addInterest"
122 v-model="interestName" 122 v-model="interestName"
123 /> 123 />
124 <a href="javascript:void(0);" @click="addInterest()" 124 <a href="javascript:void(0);" @click="addInterest()"
125 ><img src="../assets/images/plus-circle.svg" 125 ><img src="../assets/images/plus-circle.svg"
126 /></a> 126 /></a>
127 </li> 127 </li>
128 </ul> 128 </ul>
129 </div> 129 </div>
130 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 130 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
131 <p class="things">Choose Background color</p> 131 <p class="things">Choose Background color</p>
132 132
133 <ul class="colors"> 133 <ul class="colors">
134 <li> 134 <li>
135 <a 135 <a
136 href="javascript:void(0);" 136 href="javascript:void(0);"
137 id="#C4C4C4" 137 id="#C4C4C4"
138 class="silver" 138 class="silver"
139 @click="changeColor('#C4C4C4')" 139 @click="changeColor('#C4C4C4')"
140 ></a> 140 ></a>
141 </li> 141 </li>
142 <li> 142 <li>
143 <a 143 <a
144 href="javascript:void(0);" 144 href="javascript:void(0);"
145 id="#FFF6D7" 145 id="#FFF6D7"
146 class="milk-punch" 146 class="milk-punch"
147 @click="changeColor('#FFF6D7')" 147 @click="changeColor('#FFF6D7')"
148 ></a> 148 ></a>
149 </li> 149 </li>
150 <li> 150 <li>
151 <a 151 <a
152 href="javascript:void(0);" 152 href="javascript:void(0);"
153 id="#BDDBFF" 153 id="#BDDBFF"
154 class="french-pass" 154 class="french-pass"
155 @click="changeColor('#BDDBFF')" 155 @click="changeColor('#BDDBFF')"
156 ></a> 156 ></a>
157 </li> 157 </li>
158 <li> 158 <li>
159 <a 159 <a
160 href="javascript:void(0);" 160 href="javascript:void(0);"
161 id="#C0FAFE" 161 id="#C0FAFE"
162 class="cyan-french-pass" 162 class="cyan-french-pass"
163 @click="changeColor('#C0FAFE')" 163 @click="changeColor('#C0FAFE')"
164 ></a> 164 ></a>
165 </li> 165 </li>
166 <li> 166 <li>
167 <a 167 <a
168 href="javascript:void(0);" 168 href="javascript:void(0);"
169 id="#FFDBDC" 169 id="#FFDBDC"
170 class="cosmos" 170 class="cosmos"
171 @click="changeColor('#FFDBDC')" 171 @click="changeColor('#FFDBDC')"
172 ></a> 172 ></a>
173 </li> 173 </li>
174 <li> 174 <li>
175 <a 175 <a
176 href="javascript:void(0);" 176 href="javascript:void(0);"
177 id="#FEE6AC" 177 id="#FEE6AC"
178 class="cape-Honey" 178 class="cape-Honey"
179 @click="changeColor('#FEE6AC')" 179 @click="changeColor('#FEE6AC')"
180 ></a> 180 ></a>
181 </li> 181 </li>
182 <li> 182 <li>
183 <a 183 <a
184 href="javascript:void(0);" 184 href="javascript:void(0);"
185 id="#E5DFF0" 185 id="#E5DFF0"
186 class="snuff" 186 class="snuff"
187 @click="changeColor('#E5DFF0')" 187 @click="changeColor('#E5DFF0')"
188 ></a> 188 ></a>
189 </li> 189 </li>
190 <li> 190 <li>
191 <a 191 <a
192 href="javascript:void(0);" 192 href="javascript:void(0);"
193 id="#DFE7EF" 193 id="#DFE7EF"
194 class="catskillWhite" 194 class="catskillWhite"
195 @click="changeColor('#DFE7EF')" 195 @click="changeColor('#DFE7EF')"
196 ></a> 196 ></a>
197 </li> 197 </li>
198 <li> 198 <li>
199 <a 199 <a
200 href="javascript:void(0);" 200 href="javascript:void(0);"
201 id="#FFF" 201 id="#FFF"
202 class="white" 202 class="white"
203 @click="changeColor('#FFF')" 203 @click="changeColor('#FFF')"
204 ></a> 204 ></a>
205 </li> 205 </li>
206 </ul> 206 </ul>
207 </div> 207 </div>
208 <div class="col-lg-12 mt-50"> 208 <div class="col-lg-12 mt-50">
209 <p class="notifications"> 209 <p class="notifications">
210 Recieve notifications when you recieve a comment/ Upvote 210 Recieve notifications when you recieve a comment/ Upvote
211 </p> 211 </p>
212 <div class="switch-bt-wrp"> 212 <div class="switch-bt-wrp">
213 <label class="switch-btn"> 213 <label class="switch-btn">
214 <input type="checkbox" class="toggle-btn" /> 214 <input type="checkbox" class="toggle-btn" />
215 <span class="rounded-toggle"></span> 215 <span class="rounded-toggle"></span>
216 </label> 216 </label>
217 <span class="onoff">on/off</span> 217 <span class="onoff">on/off</span>
218 </div> 218 </div>
219 </div> 219 </div>
220 <div class="col-lg-12"> 220 <div class="col-lg-12">
221 <p class="add-socail-ch"> 221 <p class="add-socail-ch">
222 Add your social Channels <span></span> 222 Add your social Channels <span></span>
223 </p> 223 </p>
224 </div> 224 </div>
225 225
226 <div 226 <div
227 class="row" 227 class="row"
228 style="width: 100%" 228 style="width: 100%"
229 v-for="(social, i) in selectedSocialLink" 229 v-for="(social, i) in selectedSocialLink"
230 :key="i" 230 :key="i"
231 > 231 >
232 <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> 232 <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">
233 <div class="form-group floating-label"> 233 <div class="form-group floating-label">
234 <select class="form-group"> 234 <select class="form-group">
235 <option value="Linkedin">{{ social.displayName }}</option> 235 <option value="Linkedin">{{ social.displayName }}</option>
236 </select> 236 </select>
237 <span class="select-arrow" 237 <span class="select-arrow"
238 ><img src="../assets/images/chevron-down.svg" 238 ><img src="../assets/images/chevron-down.svg"
239 /></span> 239 /></span>
240 </div> 240 </div>
241 </div> 241 </div>
242 <!-- input --> 242 <!-- input -->
243 <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> 243 <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">
244 <div class="form-group floating-label"> 244 <div class="form-group floating-label">
245 <input 245 <input
246 type="text" 246 type="text"
247 class="form-control" 247 class="form-control"
248 value="" 248 value=""
249 placeholder="Paste your profile URL here" 249 placeholder="Paste your profile URL here"
250 id="" 250 id=""
251 v-model="social.fieldValue" 251 v-model="social.fieldValue"
252 /> 252 />
253 </div> 253 </div>
254 </div> 254 </div>
255 <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> 255 <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">
256 <ul class="interests"> 256 <ul class="interests">
257 <li> 257 <li>
258 <a 258 <a
259 @click="removeSocialLink(i)" 259 @click="removeSocialLink(i)"
260 href="javascript:void(0);" 260 href="javascript:void(0);"
261 class="cat-minus" 261 class="cat-minus"
262 ><img src="../assets/images/minus.svg" 262 ><img src="../assets/images/minus.svg"
263 /></a> 263 /></a>
264 </li> 264 </li>
265 </ul> 265 </ul>
266 </div> 266 </div>
267 </div> 267 </div>
268 <!-- input --> 268 <!-- input -->
269 269
270 <!-- input --> 270 <!-- input -->
271 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 271 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
272 <div class="form-group floating-label"> 272 <div class="form-group floating-label">
273 <select 273 <select
274 class="form-group" 274 class="form-group"
275 v-model="currentLink" 275 v-model="currentLink"
276 v-on:change="addSocialLink(currentLink)" 276 v-on:change="addSocialLink(currentLink)"
277 > 277 >
278 <option value="null">Add another</option> 278 <option value="null">Add another</option>
279 <option 279 <option
280 v-for="(social, i) in socialLink" 280 v-for="(social, i) in socialLink"
281 :key="i" 281 :key="i"
282 :value="social.fieldName" 282 :value="social.fieldName"
283 > 283 >
284 {{ social.displayName }} 284 {{ social.displayName }}
285 </option> 285 </option>
286 </select> 286 </select>
287 <span class="select-arrow" 287 <span class="select-arrow"
288 ><img src="../assets/images/chevron-down.svg" 288 ><img src="../assets/images/chevron-down.svg"
289 /></span> 289 /></span>
290 </div> 290 </div>
291 </div> 291 </div>
292 <!-- input --> 292 <!-- input -->
293 </div> 293 </div>
294 <a href="javascript:void(0);" @click="saveProfile" class="next-bt" 294 <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
295 >Save</a 295 >Save</a
296 > 296 >
297 </form> 297 </form>
298 </div> 298 </div>
299 <div class="clearfix"></div> 299 <div class="clearfix"></div>
300 </div> 300 </div>
301 <!-- add profile --> 301 <!-- add profile -->
302 </div> 302 </div>
303 <!-- profile --> 303 <!-- profile -->
304 <div class="container-fluid inner-wrp"> 304 <div class="container-fluid inner-wrp">
305 <nav class="navbar navbar-expand-sm spotLight-nav"> 305 <nav class="navbar navbar-expand-sm spotLight-nav">
306 <a class="navbar-brand" href="javasript:void(0);" 306 <a class="navbar-brand" href="javasript:void(0);"
307 ><img src="../assets/images/logo.png" 307 ><img src="../assets/images/logo.png"
308 /></a> 308 /></a>
309 <button 309 <button
310 class="navbar-toggler" 310 class="navbar-toggler"
311 type="button" 311 type="button"
312 data-toggle="collapse" 312 data-toggle="collapse"
313 data-target="#navbarsExample03" 313 data-target="#navbarsExample03"
314 aria-controls="navbarsExample03" 314 aria-controls="navbarsExample03"
315 aria-expanded="false" 315 aria-expanded="false"
316 aria-label="Toggle navigation" 316 aria-label="Toggle navigation"
317 > 317 >
318 <span class="navbar-toggler-icon"></span> 318 <span class="navbar-toggler-icon"></span>
319 <span class="navbar-toggler-icon"></span> 319 <span class="navbar-toggler-icon"></span>
320 <span class="navbar-toggler-icon"></span> 320 <span class="navbar-toggler-icon"></span>
321 </button> 321 </button>
322 322
323 <div class="collapse navbar-collapse" id="navbarsExample03"> 323 <div class="collapse navbar-collapse" id="navbarsExample03">
324 <ul class="navbar-nav mr-auto"> 324 <ul class="navbar-nav mr-auto">
325 <li class="nav-item active"> 325 <li class="nav-item active">
326 <a class="nav-link" href="javasript:void(0);">About</a> 326 <a class="nav-link" href="javasript:void(0);">About</a>
327 </li> 327 </li>
328 <li class="nav-item"> 328 <li class="nav-item">
329 <a class="nav-link" href="javasript:void(0);">Masterclass</a> 329 <a class="nav-link" href="javasript:void(0);">Masterclass</a>
330 </li> 330 </li>
331 <li class="nav-item"> 331 <li class="nav-item">
332 <a class="nav-link" href="javasript:void(0);">Stories</a> 332 <a class="nav-link" href="javasript:void(0);">Stories</a>
333 </li> 333 </li>
334 <li class="nav-item"> 334 <li class="nav-item">
335 <a class="nav-link" href="javasript:void(0);">Library</a> 335 <a class="nav-link" href="javasript:void(0);">Library</a>
336 </li> 336 </li>
337 </ul> 337 </ul>
338 </div> 338 </div>
339 <a 339 <a
340 v-if="this.userData.firstLogin" 340 v-if="this.userData.firstLogin"
341 href="javasript:void(0);" 341 href="javasript:void(0);"
342 @click="addProfileDialog" 342 @click="addProfileDialog"
343 class="update_profile" 343 class="update_profile"
344 ><span></span> Update Profile</a 344 ><span></span> Update Profile</a
345 > 345 >
346 <div class=""> 346 <div class="">
347 <a 347 <a
348 href="javascript:void(0);" 348 href="javascript:void(0);"
349 class="user-profile-photo common_color" 349 class="user-profile-photo common_color"
350 @click="userprofileshowDialog" 350 @click="userprofileshowDialog"
351 ><img :src="userData.profilePic" 351 ><img :src="userData.profilePic"
352 /></a> 352 /></a>
353 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 353 <div class="sub-menu-user" id="userprofileshow" style="display: none">
354 <ul> 354 <ul>
355 <li> 355 <li>
356 <a href="javascript:void(0);" @click="addProfileDialog" 356 <a href="javascript:void(0);" @click="addProfileDialog"
357 >Edit Profile</a 357 >Edit Profile</a
358 > 358 >
359 </li> 359 </li>
360 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 360 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
361 </ul> 361 </ul>
362 </div> 362 </div>
363 </div> 363 </div>
364 </nav> 364 </nav>
365 365
366 <!-- <Header></Header> --> 366 <!-- <Header></Header> -->
367 <!-- menu wrapper --> 367 <!-- menu wrapper -->
368 <div class="row profile-tab-spc-top"> 368 <div class="row profile-tab-spc-top">
369 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> 369 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
370 <div class="inner-profile-ps common_color"> 370 <div class="inner-profile-ps common_color">
371 <img :src="userData.profilePic" class="" /> 371 <img :src="userData.profilePic" class="" />
372 </div> 372 </div>
373 <!-- user profile --> 373 <!-- user profile -->
374 374
375 <div class="user-profile"> 375 <div class="user-profile">
376 <h1> 376 <h1>
377 {{ userData.firstName }} {{ userData.lastName }} 377 {{ userData.firstName }} {{ userData.lastName }}
378 <span 378 <span
379 href="javasript:void(0);" 379 href="javasript:void(0);"
380 class="tags no-cursor no-underline" 380 class="tags no-cursor no-underline"
381 >{{ userData.role }}</span 381 >{{ userData.role }}</span
382 > 382 >
383 </h1> 383 </h1>
384 <ul class="joined-info"> 384 <ul class="joined-info">
385 <li> 385 <li>
386 <a 386 <a
387 href="javascript:void(0);" 387 href="javascript:void(0);"
388 v-if="!userData.designation && !userData.organisation" 388 v-if="!userData.designation && !userData.organisation"
389 @click="addProfileDialog" 389 @click="addProfileDialog"
390 >Add your work</a 390 >Add your work</a
391 > 391 >
392 <a 392 <a
393 class="no-cursor no-underline" 393 class="no-cursor no-underline"
394 href="javascript:void(0);" 394 href="javascript:void(0);"
395 v-if="userData.designation" 395 v-if="userData.designation"
396 >{{ userData.designation }}</a 396 >{{ userData.designation }}</a
397 > 397 >
398 <a 398 <a
399 class="no-cursor no-underline" 399 class="no-cursor no-underline"
400 href="javascript:void(0);" 400 href="javascript:void(0);"
401 v-if="userData.designation && userData.organisation" 401 v-if="userData.designation && userData.organisation"
402 >at</a 402 >at</a
403 > 403 >
404 <a 404 <a
405 class="no-cursor no-underline" 405 class="no-cursor no-underline"
406 href="javascript:void(0);" 406 href="javascript:void(0);"
407 v-if="userData.organisation" 407 v-if="userData.organisation"
408 >{{ userData.organisation }}</a 408 >{{ userData.organisation }}</a
409 > 409 >
410 <img src="../assets/images/u-info-icon.png" /> <span></span> 410 <img src="../assets/images/u-info-icon.png" /> <span></span>
411 </li> 411 </li>
412 <li> 412 <li>
413 <a href="javasript:void(0);" content="Karma Points" v-tippy> 413 <a href="javasript:void(0);" content="Karma Points" v-tippy>
414 {{ userData.karmaPoints }} Karma</a 414 {{ userData.karmaPoints }} Karma</a
415 > 415 >
416 <span></span> 416 <span></span>
417 </li> 417 </li>
418 <li> 418 <li>
419 <a href="javasript:void(0);" class="no-cursor no-underline" 419 <a href="javasript:void(0);" class="no-cursor no-underline"
420 >Joined on 420 >Joined on
421 {{ moment(userData.createdAt).format("MMM YYYY") }}</a 421 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
422 > 422 >
423 </li> 423 </li>
424 </ul> 424 </ul>
425 <p>{{ userData.bio }}</p> 425 <p>{{ userData.bio }}</p>
426 <div class="talk-to-me-about" v-if="userData.interests.length != 0">
427 <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong>
428 </div><!-- talk to me about -->
426 </div> 429 </div>
430
427 </div> 431 </div>
428 <!-- user profile --> 432 <!-- user profile -->
429 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> 433 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
430 <div class="list-style-group" v-if="userData.awards.views != null"> 434 <div class="list-style-group" v-if="userData.awards.views != null">
431 <p>Awards</p> 435 <p>Awards</p>
432 <ul class="list-style"> 436 <ul class="list-style">
433 <li> 437 <li>
434 <a href="javascript:void(0);" 438 <a href="javascript:void(0);"
435 ><img src="../assets/images/icon-1.png" 439 ><img src="../assets/images/icon-1.png"
436 /></a> 440 /></a>
437 </li> 441 </li>
438 </ul> 442 </ul>
439 </div> 443 </div>
440 <!-- list style --> 444 <!-- list style -->
441 </div> 445 </div>
442 </div> 446 </div>
443 <div class="clearfix"></div> 447 <div class="clearfix"></div>
444 <div class="row top-brd profile-tab-spc-top"> 448 <div class="row top-brd profile-tab-spc-top">
445 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 449 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
446 <ul class="profile-tab"> 450 <ul class="profile-tab">
447 <li class="active c-0"> 451 <li class="active c-0">
448 <a href="javascript:void(0);" @click="caseDialog" 452 <a href="javascript:void(0);" @click="caseDialog"
449 >Case-studies({{ caseStudies.length }})</a 453 >Case-studies({{ caseStudies.length }})</a
450 > 454 >
451 </li> 455 </li>
452 <li class="rp-all"> 456 <li class="rp-all">
453 <a href="javascript:void(0);" @click="repliesDialog" 457 <a href="javascript:void(0);" @click="repliesDialog"
454 >Comments/Replies(0)</a 458 >Comments/Replies(0)</a
455 > 459 >
456 </li> 460 </li>
457 </ul> 461 </ul>
458 </div> 462 </div>
459 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> 463 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right">
460 <ul class="social-connects" v-if="selectedSocialLink.length > 0"> 464 <ul class="social-connects" v-if="selectedSocialLink.length > 0">
461 <li><span>Follow</span></li> 465 <li><span>Follow</span></li>
462 <li v-for="(social, i) in selectedSocialLink" :key="i"> 466 <li v-for="(social, i) in selectedSocialLink" :key="i">
463 <a 467 <a
464 href="javascript:void(0);" 468 href="javascript:void(0);"
465 @click="openUrl(social.fieldValue)" 469 @click="openUrl(social.fieldValue)"
466 class="cursor-pointer" 470 class="cursor-pointer"
467 ><img :src="social.image" 471 ><img :src="social.image"
468 /></a> 472 /></a>
469 </li> 473 </li>
470 </ul> 474 </ul>
471 <ul class="social-connects" v-if="selectedSocialLink.length == 0"> 475 <ul class="social-connects" v-if="selectedSocialLink.length == 0">
472 <li> 476 <li>
473 <a 477 <a
474 href="javascript:void(0);" 478 href="javascript:void(0);"
475 @click="addProfileDialog" 479 @click="addProfileDialog"
476 class="active cursor-pointer" 480 class="active cursor-pointer"
477 ><img src="../assets/images/plus.png" 481 ><img src="../assets/images/plus.png"
478 /></a> 482 /></a>
479 <span class="connect-social-channel" 483 <span class="connect-social-channel"
480 >Connect your social channels</span 484 >Connect your social channels</span
481 > 485 >
482 </li> 486 </li>
483 </ul> 487 </ul>
484 </div> 488 </div>
485 </div> 489 </div>
486 <!-- tab style --> 490 <!-- tab style -->
487 <div class="profile-data-wrp"> 491 <div class="profile-data-wrp">
488 <div class="container-fluid data-wrp" id="case-study-0"> 492 <div class="container-fluid data-wrp" id="case-study-0">
489 <div class="row" v-if="caseStudies.length == 0"> 493 <div class="row" v-if="caseStudies.length == 0">
490 <div class="col-6 col-lg-6"> 494 <div class="col-6 col-lg-6">
491 <div class="full-w-height-profile ex-light seats_bg"> 495 <div class="full-w-height-profile ex-light seats_bg">
492 <a 496 <a
493 href="javasript:void(0);" 497 href="javasript:void(0);"
494 class="profile-md-bt center-and-spc bt-spc-top" 498 class="profile-md-bt center-and-spc bt-spc-top"
495 @click="openUrl('https://www.productgrowth.org/spotlight')" 499 @click="openUrl('https://www.productgrowth.org/spotlight')"
496 >Explore Spotlights</a 500 >Explore Spotlights</a
497 > 501 >
498 <p>Explore the spotlights others has put together</p> 502 <p>Explore the spotlights others has put together</p>
499 </div> 503 </div>
500 <!-- full width --> 504 <!-- full width -->
501 </div> 505 </div>
502 <!-- col 6 --> 506 <!-- col 6 -->
503 <div class="col-6 col-lg-6"> 507 <div class="col-6 col-lg-6">
504 <div class="full-w-height-profile ex-light spotlight_bg"> 508 <div class="full-w-height-profile ex-light spotlight_bg">
505 <img src="../assets/images/add-role.svg" class="add-role" /> 509 <img src="../assets/images/add-role.svg" class="add-role" />
506 <div class="clearfix"></div> 510 <div class="clearfix"></div>
507 <!-- clearfix --> 511 <!-- clearfix -->
508 <a 512 <a
509 href="javasript:void(0);" 513 href="javasript:void(0);"
510 class="profile-md-bt center-and-spc" 514 class="profile-md-bt center-and-spc"
511 @click=" 515 @click="
512 openUrl( 516 openUrl(
513 'https://www.productgrowth.org/spotlight#typeform-spotlight' 517 'https://www.productgrowth.org/spotlight#typeform-spotlight'
514 ) 518 )
515 " 519 "
516 >Publish Spotlight</a 520 >Publish Spotlight</a
517 > 521 >
518 <p>Share your own insights through Spotlight</p> 522 <p>Share your own insights through Spotlight</p>
519 </div> 523 </div>
520 <!-- full width --> 524 <!-- full width -->
521 </div> 525 </div>
522 <!-- col 6 --> 526 <!-- col 6 -->
523 </div> 527 </div>
524 528
525 <div class="profile-data-wrp" v-if="caseStudies.length != 0"> 529 <div class="profile-data-wrp" v-if="caseStudies.length != 0">
526 <div class="container-fluid data-wrp"> 530 <div class="container-fluid data-wrp">
527 <div class="row"> 531 <div class="row">
528 <div class="" v-for="(study, i) in caseStudies" :key="i"> 532 <div class="" v-for="(study, i) in caseStudies" :key="i">
529 <div class="card-warpper" @click="openStudy(study)"> 533 <div class="card-warpper" @click="openStudy(study)">
530 <div class="company-detail"> 534 <div class="company-detail">
531 <div class="c-logo"> 535 <div class="c-logo">
532 <!-- <img src="../assets/images/image 46.png" /> --> 536 <!-- <img src="../assets/images/image 46.png" /> -->
533 <img :src="study.intro.logoURL" /> 537 <img :src="study.intro.logoURL" />
534 </div> 538 </div>
535 <div class="c-tag"> 539 <div class="c-tag">
536 <img 540 <img
537 src="../assets/images/retake-blue.svg" 541 src="../assets/images/retake-blue.svg"
538 v-if="study.intro.type == 'Retake'" 542 v-if="study.intro.type == 'Retake'"
539 /> 543 />
540 <img 544 <img
541 src="../assets/images/behind-blue.svg" 545 src="../assets/images/behind-blue.svg"
542 v-if="study.intro.type == 'Behind-the-scenes'" 546 v-if="study.intro.type == 'Behind-the-scenes'"
543 /> 547 />
544 <img 548 <img
545 src="../assets/images/critique-blue.svg" 549 src="../assets/images/critique-blue.svg"
546 v-if="study.intro.type == 'Critique'" 550 v-if="study.intro.type == 'Critique'"
547 /> 551 />
548 <img 552 <img
549 src="../assets/images/juxtapose-blue.svg" 553 src="../assets/images/juxtapose-blue.svg"
550 v-if="study.intro.type == 'Juxtapose'" 554 v-if="study.intro.type == 'Juxtapose'"
551 /> 555 />
552 </div> 556 </div>
553 </div> 557 </div>
558
554 <!-- company detail--> 559 <!-- company detail-->
555 <h1>{{ study.intro.name }}</h1> 560 <h1>{{ study.intro.name }}</h1>
561 <div class="user-views">
562 <ul>
563 <li><img src="../assets/images/eye.svg" class="spctp" /> {{ study.views }} Views</li>
564 <li><img src="../assets/images/star.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
565 <li><img src="../assets/images/calendar.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
566 </ul>
567
568 </div><!-- user views -->
556 <div class="u-detail"> 569 <div class="u-detail">
557 <img src="../assets/images/user-2.png" /> 570 <img src="../assets/images/user-2.png" />
558 <h2 v-for="(name, j) in study.intro.authors" :key="j"> 571 <h2 v-for="(name, j) in study.intro.authors" :key="j">
559 {{ name }} 572 {{ name }}
560 </h2> 573 </h2>
574
561 </div> 575 </div>
562 <!-- user detail --> 576 <!-- user detail -->
563 <p> 577 <p>
564 <span v-for="(area, j) in study.focusAreas" :key="j"> 578 <span v-for="(area, j) in study.focusAreas" :key="j">
565 {{ area }} 579 {{ area }}
566 </span> 580 </span>
567 </p> 581 </p>
568 <ul class="tags-list"> 582 <ul class="tags-list">
569 <li v-for="(tags, j) in study.insightTags" :key="j"> 583 <li v-for="(tags, j) in study.insightTags" :key="j">
570 <a 584 <a
571 href="javasript:void(0);" 585 href="javasript:void(0);"
572 class="insight-design" 586 class="insight-design"
573 v-if="tags == 'Design'" 587 v-if="tags == 'Design'"
574 >Design</a 588 >Design</a
575 > 589 >
576 <a 590 <a
577 href="javasript:void(0);" 591 href="javasript:void(0);"
578 class="insight-product" 592 class="insight-product"
579 v-if="tags == 'Product'" 593 v-if="tags == 'Product'"
580 >Product</a 594 >Product</a
581 > 595 >
582 <a 596 <a
583 href="javasript:void(0);" 597 href="javasript:void(0);"
584 class="insight-marketing" 598 class="insight-marketing"
585 v-if="tags == 'Marketing'" 599 v-if="tags == 'Marketing'"
586 >Marketing</a 600 >Marketing</a
587 > 601 >
588 <a 602 <a
589 href="javasript:void(0);" 603 href="javasript:void(0);"
590 class="insight-pricing" 604 class="insight-pricing"
591 v-if="tags == 'Pricing'" 605 v-if="tags == 'Pricing'"
592 >Pricing</a 606 >Pricing</a
593 > 607 >
594 <a 608 <a
595 href="javasript:void(0);" 609 href="javasript:void(0);"
596 class="insight-psychology" 610 class="insight-psychology"
597 v-if="tags == 'Psychology'" 611 v-if="tags == 'Psychology'"
598 >Psychology</a 612 >Psychology</a
599 > 613 >
600 </li> 614 </li>
601 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> 615 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
602 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> 616 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
603 </ul> 617 </ul>
604 <div class="clearfix"></div> 618 <div class="clearfix"></div>
619 <a href="#" class="action-set">
620 <img src="../assets/images/arrow-right-action.svg" />
621 </a>
622 <div class="read-time">
623 <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a>
624 </div><!-- read time -->
605 </div> 625 </div>
606 <!-- card wrpper --> 626 <!-- card wrpper -->
607 <!-- card wrpper --> 627 <!-- card wrpper -->
608 </div> 628 </div>
609 <!-- all card wrpper --> 629 <!-- all card wrpper -->
610 </div> 630 </div>
611 </div> 631 </div>
612 </div> 632 </div>
613 <!-- data wrp --> 633 <!-- data wrp -->
614 </div> 634 </div>
615 <!-- case study 0 --> 635 <!-- case study 0 -->
616 <div 636 <div
617 class="container-fluid data-wrp" 637 class="container-fluid data-wrp"
618 id="all-replies" 638 id="all-replies"
619 style="display: none" 639 style="display: none"
620 > 640 >
621 <div class="row"> 641 <div class="row">
622 <div class="replies col-md-12"> 642 <div class="replies col-md-12">
623 <div class="replies-wrp"> 643 <div class="replies-wrp">
624 <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> 644 <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>
625 <ul class="joined-info"> 645 <ul class="joined-info">
626 <li><a href="javasript:void(0);">37D</a> <span></span></li> 646 <li><a href="javasript:void(0);">37D</a> <span></span></li>
627 <li><img src="../assets/images/heart.png" /></li> 647 <li><img src="../assets/images/heart.png" /></li>
628 <li><a href="javasript:void(0);"> 4</a></li> 648 <li><a href="javasript:void(0);"> 4</a></li>
629 <li class="comment-spc"> 649 <li class="comment-spc">
630 <img src="../assets/images/comment.svg" /> 650 <img src="../assets/images/comment.svg" />
631 </li> 651 </li>
632 <li><a href="javasript:void(0);"> 6</a></li> 652 <li><a href="javasript:void(0);"> 6</a></li>
633 </ul> 653 </ul>
634 <p> 654 <p>
635 I wonder what the difference between “<strong> 655 I wonder what the difference between “<strong>
636 Assistant</strong 656 Assistant</strong
637 >” and “<strong>Pickup and Drop</strong>” are. If they are the 657 >” and “<strong>Pickup and Drop</strong>” are. If they are the
638 same, there are two “call to actions” for the same workflow 658 same, there are two “call to actions” for the same workflow
639 </p> --> 659 </p> -->
640 </div> 660 </div>
641 <!-- replies wrapper --> 661 <!-- replies wrapper -->
642 </div> 662 </div>
643 <!-- all card wrpper --> 663 <!-- all card wrpper -->
644 </div> 664 </div>
645 </div> 665 </div>
646 <!-- all Relpies --> 666 <!-- all Relpies -->
647 </div> 667 </div>
648 <!-- data wrp --> 668 <!-- data wrp -->
649 <!-- body wrapper --> 669 <!-- body wrapper -->
650 </div> 670 </div>
651 </main> 671 </main>
652 </template> 672 </template>
653 673
654 <script> 674 <script>
655 import Vue from "vue"; 675 import Vue from "vue";
656 import router from "../router"; 676 import router from "../router";
657 import $ from "jquery"; 677 import $ from "jquery";
658 import axios from "axios"; 678 import axios from "axios";
659 import Header from "./Header"; 679 import Header from "./Header";
660 export default { 680 export default {
661 name: "Profile", 681 name: "Profile",
662 components: { 682 components: {
663 Header: Header, 683 Header: Header,
664 }, 684 },
665 data: () => ({ 685 data: () => ({
666 loggedinFlag: false, 686 loggedinFlag: false,
667 usertoken: null, 687 usertoken: null,
668 currentLink: null, 688 currentLink: null,
669 userData: { 689 userData: {
670 socialMediaProfiles: { 690 socialMediaProfiles: {
671 facebook: null, 691 facebook: null,
672 linkedin: null, 692 linkedin: null,
673 medium: null, 693 medium: null,
674 twitter: null, 694 twitter: null,
675 behance: null, 695 behance: null,
676 dribble: null, 696 dribble: null,
677 github: null, 697 github: null,
678 stackoverflow: null, 698 stackoverflow: null,
679 instagram: null, 699 instagram: null,
680 }, 700 },
681 awards: { 701 awards: {
682 views: null, 702 views: null,
683 likes: null, 703 likes: null,
684 comments: null, 704 comments: null,
685 }, 705 },
686 verified: true, 706 verified: true,
687 phoneNo: null, 707 phoneNo: null,
688 bio: null, 708 bio: null,
689 designation: null, 709 designation: null,
690 organisation: null, 710 organisation: null,
691 bgColor: null, 711 bgColor: null,
692 interests: [], 712 interests: [],
693 karmaPoints: null, 713 karmaPoints: null,
694 socialLogin: null, 714 socialLogin: null,
695 firstLogin: null, 715 firstLogin: null,
696 notification: null, 716 notification: null,
697 profilePic: null, 717 profilePic: null,
698 role: null, 718 role: null,
699 name: null, 719 name: null,
700 email: null, 720 email: null,
701 firstName: null, 721 firstName: null,
702 lastName: null, 722 lastName: null,
703 }, 723 },
704 caseStudies: [], 724 caseStudies: [],
705 interestName: null, 725 interestName: null,
706 oldId: null, 726 oldId: null,
707 currentSocialLinkName: null, 727 currentSocialLinkName: null,
708 showCompany: false, 728 showCompany: false,
709 showDesignation: false, 729 showDesignation: false,
710 socialLink: [ 730 socialLink: [
711 { 731 {
712 displayName: "Facebook", 732 displayName: "Facebook",
713 fieldName: "facebook", 733 fieldName: "facebook",
714 fieldValue: null, 734 fieldValue: null,
715 image: require(`../assets/images/facebook.png`), 735 image: require(`../assets/images/facebook.png`),
716 }, 736 },
717 { 737 {
718 displayName: "Linkedin", 738 displayName: "Linkedin",
719 fieldName: "linkedin", 739 fieldName: "linkedin",
720 fieldValue: null, 740 fieldValue: null,
721 image: require(`../assets/images/linkedin.png`), 741 image: require(`../assets/images/linkedin.png`),
722 }, 742 },
723 { 743 {
724 displayName: "Medium", 744 displayName: "Medium",
725 fieldName: "medium", 745 fieldName: "medium",
726 fieldValue: null, 746 fieldValue: null,
727 image: require(`../assets/images/medium.png`), 747 image: require(`../assets/images/medium.png`),
728 }, 748 },
729 { 749 {
730 displayName: "Twitter", 750 displayName: "Twitter",
731 fieldName: "twitter", 751 fieldName: "twitter",
732 fieldValue: null, 752 fieldValue: null,
733 image: require(`../assets/images/twitter.png`), 753 image: require(`../assets/images/twitter.png`),
734 }, 754 },
735 { 755 {
736 displayName: "Behance", 756 displayName: "Behance",
737 fieldName: "behance", 757 fieldName: "behance",
738 fieldValue: null, 758 fieldValue: null,
739 image: require(`../assets/images/behance.png`), 759 image: require(`../assets/images/behance.png`),
740 }, 760 },
741 { 761 {
742 displayName: "Dribble", 762 displayName: "Dribble",
743 fieldName: "dribble", 763 fieldName: "dribble",
744 fieldValue: null, 764 fieldValue: null,
745 image: require(`../assets/images/dribbble.png`), 765 image: require(`../assets/images/dribbble.png`),
746 }, 766 },
747 { 767 {
748 displayName: "Github", 768 displayName: "Github",
749 fieldName: "github", 769 fieldName: "github",
750 fieldValue: null, 770 fieldValue: null,
751 image: require(`../assets/images/github.png`), 771 image: require(`../assets/images/github.png`),
752 }, 772 },
753 { 773 {
754 displayName: "Stackoverflow", 774 displayName: "Stackoverflow",
755 fieldName: "stackoverflow", 775 fieldName: "stackoverflow",
756 fieldValue: null, 776 fieldValue: null,
757 image: require(`../assets/images/stack overflow.png`), 777 image: require(`../assets/images/stack overflow.png`),
758 }, 778 },
759 { 779 {
760 displayName: "Instagram", 780 displayName: "Instagram",
761 fieldName: "instagram", 781 fieldName: "instagram",
762 fieldValue: null, 782 fieldValue: null,
763 image: require(`../assets/images/instagram.png`), 783 image: require(`../assets/images/instagram.png`),
764 }, 784 },
765 ], 785 ],
766 selectedSocialLink: [], 786 selectedSocialLink: [],
767 }), 787 }),
768 788
769 mounted() { 789 mounted() {
770 this.userData = {}; 790 this.userData = {};
771 // this.socialLink = []; 791 // this.socialLink = [];
772 this.userData.interests = []; 792 this.userData.interests = [];
773 var userdata = localStorage.getItem("spotlight_usertoken"); 793 var userdata = localStorage.getItem("spotlight_usertoken");
774 if (userdata) { 794 if (userdata) {
775 userdata = JSON.parse(userdata); 795 userdata = JSON.parse(userdata);
776 this.usertoken = userdata.token; 796 this.usertoken = userdata.token;
777 this.getProfile(); 797 this.getProfile();
778 this.getCaseStudies(); 798 this.getCaseStudies();
779 } 799 }
780 }, 800 },
781 methods: { 801 methods: {
782 goToSignUp() { 802 goToSignUp() {
783 this.$router.push("/"); 803 this.$router.push("/");
784 }, 804 },
785 goToReset() { 805 goToReset() {
786 this.$router.push("/reset"); 806 this.$router.push("/reset");
787 }, 807 },
788 logout() { 808 logout() {
789 this.$router.push("/login"); 809 this.$router.push("/login");
790 }, 810 },
791 prefillSocialLink(links) { 811 prefillSocialLink(links) {
792 var keys = []; 812 var keys = [];
793 keys = Object.keys(links); 813 keys = Object.keys(links);
794 keys.forEach((link_) => { 814 keys.forEach((link_) => {
795 console.log(link_, ":", links[link_]); 815 console.log(link_, ":", links[link_]);
796 if (links[link_] != null) { 816 if (links[link_] != null) {
797 var i = this.socialLink.findIndex( 817 var i = this.socialLink.findIndex(
798 (links_) => links_.fieldName == link_ 818 (links_) => links_.fieldName == link_
799 ); 819 );
800 if (i != -1) { 820 if (i != -1) {
801 this.selectedSocialLink.push({ 821 this.selectedSocialLink.push({
802 displayName: this.socialLink[i].displayName, 822 displayName: this.socialLink[i].displayName,
803 fieldName: this.socialLink[i].fieldName, 823 fieldName: this.socialLink[i].fieldName,
804 image: this.socialLink[i].image, 824 image: this.socialLink[i].image,
805 fieldValue: links[link_], 825 fieldValue: links[link_],
806 }); 826 });
807 } 827 }
808 } 828 }
809 }); 829 });
810 console.log("links-- are--", links); 830 console.log("links-- are--", links);
811 }, 831 },
812 addSocialLink(id) { 832 addSocialLink(id) {
813 this.currentLink = null; 833 this.currentLink = null;
814 var i = this.selectedSocialLink.findIndex( 834 var i = this.selectedSocialLink.findIndex(
815 (link_) => link_.fieldName == id 835 (link_) => link_.fieldName == id
816 ); 836 );
817 var j = this.socialLink.findIndex((links_) => links_.fieldName == id); 837 var j = this.socialLink.findIndex((links_) => links_.fieldName == id);
818 if (i == -1) { 838 if (i == -1) {
819 this.selectedSocialLink.push({ 839 this.selectedSocialLink.push({
820 displayName: this.socialLink[j].displayName, 840 displayName: this.socialLink[j].displayName,
821 fieldName: this.socialLink[j].fieldName, 841 fieldName: this.socialLink[j].fieldName,
822 image: this.socialLink[j].image, 842 image: this.socialLink[j].image,
823 fieldValue: null, 843 fieldValue: null,
824 }); 844 });
825 } else { 845 } else {
826 this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); 846 this.$toaster.info(this.socialLink[j].displayName + " Already Exist");
827 } 847 }
828 }, 848 },
829 removeSocialLink(i) { 849 removeSocialLink(i) {
830 var name = this.selectedSocialLink[i].fieldName; 850 var name = this.selectedSocialLink[i].fieldName;
831 this.userData.socialMediaProfiles[name] = null; 851 this.userData.socialMediaProfiles[name] = null;
832 this.selectedSocialLink.splice(i, 1); 852 this.selectedSocialLink.splice(i, 1);
833 }, 853 },
834 854
835 addInterest() { 855 addInterest() {
836 console.log(this.userData.interests.length, "called", this.interestName); 856 console.log(this.userData.interests.length, "called", this.interestName);
837 if (this.userData.interests.length <= 2) { 857 if (this.userData.interests.length <= 2) {
838 this.userData.interests.push(this.interestName); 858 this.userData.interests.push(this.interestName);
839 this.interestName = null; 859 this.interestName = null;
840 } else { 860 } else {
841 this.$toaster.info("Only 3 interest are allowed"); 861 this.$toaster.info("Only 3 interest are allowed");
842 } 862 }
843 }, 863 },
844 removeInterest(i) { 864 removeInterest(i) {
845 console.log("i", i); 865 console.log("i", i);
846 this.userData.interests.splice(i, 1); 866 this.userData.interests.splice(i, 1);
847 console.log(" this.userData", this.userData.interests); 867 console.log(" this.userData", this.userData.interests);
848 }, 868 },
849 assignClass() { 869 assignClass() {
850 var element = document.getElementById(this.userData.bgColor); 870 var element = document.getElementById(this.userData.bgColor);
851 element.classList.add("active"); 871 element.classList.add("active");
852 var cols = document.getElementsByClassName("common_color"); 872 var cols = document.getElementsByClassName("common_color");
853 for (var i = 0; i < cols.length; i++) { 873 for (var i = 0; i < cols.length; i++) {
854 cols[i].style.backgroundColor = this.userData.bgColor; 874 cols[i].style.backgroundColor = this.userData.bgColor;
855 } 875 }
856 }, 876 },
877 createString(list){
878 var name = "";
879 list.forEach(element => {
880 name = name+','+element;
881 });
882
883 console.log("name is",name);
884 return name.substring(1);;
885 },
857 changeColor(clr) { 886 changeColor(clr) {
858 console.log(this.oldId, "clr", clr); 887 console.log(this.oldId, "clr", clr);
859 var element = document.getElementById(clr); 888 var element = document.getElementById(clr);
860 element.classList.add("active"); 889 element.classList.add("active");
861 var removeelement = document.getElementById(this.oldId); 890 var removeelement = document.getElementById(this.oldId);
862 removeelement.classList.remove("active"); 891 removeelement.classList.remove("active");
863 this.oldId = clr; 892 this.oldId = clr;
864 var cols = document.getElementsByClassName("common_color"); 893 var cols = document.getElementsByClassName("common_color");
865 for (var i = 0; i < cols.length; i++) { 894 for (var i = 0; i < cols.length; i++) {
866 cols[i].style.backgroundColor = clr; 895 cols[i].style.backgroundColor = clr;
867 } 896 }
868 this.userData.bgColor = clr; 897 this.userData.bgColor = clr;
869 }, 898 },
870 getProfile() { 899 getProfile() {
871 axios 900 axios
872 .get("/profile", { 901 .get("/profile", {
873 headers: { 902 headers: {
874 Authorization: "Bearer " + this.usertoken, 903 Authorization: "Bearer " + this.usertoken,
875 }, 904 },
876 }) 905 })
877 .then((response) => { 906 .then((response) => {
878 if (!response.data.data.socialMediaProfiles) { 907 if (!response.data.data.socialMediaProfiles) {
879 this.userData.socialMediaProfiles = {}; 908 this.userData.socialMediaProfiles = {};
880 } 909 }
881 this.userData = response.data.data; 910 this.userData = response.data.data;
882 911
883 // this.userData = response.data.data; 912 // this.userData = response.data.data;
884 this.oldId = this.userData.bgColor; 913 this.oldId = this.userData.bgColor;
885 console.log(this.oldId, "this.userData.", this.userData); 914 console.log(this.oldId, "this.userData.", this.userData);
886 console.log("this.userData.firstLogin ", this.userData.firstLogin); 915 console.log("this.userData.firstLogin ", this.userData.firstLogin);
887 this.prefillSocialLink(this.userData.socialMediaProfiles); 916 this.prefillSocialLink(this.userData.socialMediaProfiles);
888 if (this.userData.firstLogin == true) { 917 if (this.userData.firstLogin == true) {
889 this.addProfileDialog(); 918 this.addProfileDialog();
890 } 919 }
891 this.assignClass(); 920 this.assignClass();
892 console.log(response.data.data); 921 console.log(response.data.data);
893 }) 922 })
894 .catch((error) => console.log(error)); 923 .catch((error) => console.log(error));
895 }, 924 },
896 getRandomAvatar() { 925 getRandomAvatar() {
897 axios 926 axios
898 .get("/randomAvatar", { 927 .get("/randomAvatar", {
899 headers: { 928 headers: {
900 Authorization: "Bearer " + this.usertoken, 929 Authorization: "Bearer " + this.usertoken,
901 }, 930 },
902 }) 931 })
903 .then((response) => { 932 .then((response) => {
904 this.userData.profilePic = response.data.imageURL; 933 this.userData.profilePic = response.data.imageURL;
905 console.log(response.data.imageURL); 934 console.log(response.data.imageURL);
906 }) 935 })
907 .catch((error) => console.log(error)); 936 .catch((error) => console.log(error));
908 }, 937 },
909 getCaseStudies() { 938 getCaseStudies() {
910 axios 939 axios
911 .get("/caseStudy/all", { 940 .get("/caseStudy/all", {
912 headers: { 941 headers: {
913 Authorization: "Bearer " + this.usertoken, 942 Authorization: "Bearer " + this.usertoken,
914 }, 943 },
915 }) 944 })
916 .then((response) => { 945 .then((response) => {
917 console.log(response.data.data.caseStudies); 946 console.log(response.data.data.caseStudies);
918 this.caseStudies = response.data.data.caseStudies; 947 this.caseStudies = response.data.data.caseStudies;
919 }) 948 })
920 .catch((error) => console.log(error)); 949 .catch((error) => console.log(error));
921 }, 950 },
922 openStudy(payload) { 951 openStudy(payload) {
923 console.log("payload-", payload); 952 console.log("payload-", payload);
924 payload.intro.date = payload.createdAt; 953 payload.intro.date = payload.createdAt;
925 payload.intro.focusPoint = payload.focusAreas; 954 payload.intro.focusPoint = payload.focusAreas;
926 axios 955 axios
927 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 956 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
928 headers: { 957 headers: {
929 Authorization: "Bearer " + this.usertoken, 958 Authorization: "Bearer " + this.usertoken,
930 }, 959 },
931 }) 960 })
932 .then((response) => { 961 .then((response) => {
933 this.createSlide(payload, response.data.data); 962 this.createSlide(payload, response.data.data);
934 }) 963 })
935 .catch((error) => console.log(error)); 964 .catch((error) => console.log(error));
936 }, 965 },
937 966
938 createSlide(payload, slides) { 967 createSlide(payload, slides) {
939 var finalSlides = []; 968 var finalSlides = [];
940 slides.forEach((slides_) => { 969 slides.forEach((slides_) => {
941 var url = this.assignRoutes(slides_.templateId); 970 var url = this.assignRoutes(slides_.templateId);
942 var obj = { 971 var obj = {
943 forward: true, 972 forward: true,
944 backward: true, 973 backward: true,
945 ur: url, 974 ur: url,
946 slideId: slides_._id, 975 slideId: slides_._id,
947 caseStudyId: slides_.caseStudyId, 976 caseStudyId: slides_.caseStudyId,
948 payload: { 977 payload: {
949 metaData: slides_.metaData, 978 metaData: slides_.metaData,
950 comments: slides_.comments, 979 comments: slides_.comments,
951 insight: slides_.insight ? slides_.insight : null, 980 insight: slides_.insight ? slides_.insight : null,
952 }, 981 },
953 }; 982 };
954 // slides_ 983 // slides_
955 finalSlides.push(obj); 984 finalSlides.push(obj);
956 }); 985 });
957 console.log("payload", payload); 986 console.log("payload", payload);
958 // add first slide at begining 987 // add first slide at begining
959 finalSlides.unshift({ 988 finalSlides.unshift({
960 forward: true, 989 forward: true,
961 backward: false, 990 backward: false,
962 ur: "EpisodeIntro", 991 ur: "EpisodeIntro",
963 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 992 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
964 caseStudyId: payload._id, 993 caseStudyId: payload._id,
965 payload: { 994 payload: {
966 metaData: payload.intro, 995 metaData: payload.intro,
967 comments: [], 996 comments: [],
968 }, 997 },
969 }); 998 });
970 finalSlides.push({ 999 finalSlides.push({
971 forward: true, 1000 forward: true,
972 backward: false, 1001 backward: false,
973 ur: "Outro", 1002 ur: "Outro",
974 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 1003 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
975 caseStudyId: payload._id, 1004 caseStudyId: payload._id,
976 payload: { 1005 payload: {
977 metaData: payload.outro, 1006 metaData: payload.outro,
978 comments: [], 1007 comments: [],
979 }, 1008 },
980 }); 1009 });
981 1010
982 console.log(finalSlides); 1011 console.log(finalSlides);
983 console.log("payload", payload); 1012 console.log("payload", payload);
984 localStorage.setItem( 1013 localStorage.setItem(
985 "spotlight_slide" + payload._id, 1014 "spotlight_slide" + payload._id,
986 JSON.stringify(finalSlides) 1015 JSON.stringify(finalSlides)
987 ); 1016 );
988 this.$router.push({ 1017 this.$router.push({
989 name: "EpisodeIntro", 1018 name: "EpisodeIntro",
990 params: { 1019 params: {
991 caseStudyId: finalSlides[0].caseStudyId, 1020 caseStudyId: finalSlides[0].caseStudyId,
992 slideId: finalSlides[0].slideId, 1021 slideId: finalSlides[0].slideId,
993 }, 1022 },
994 }); 1023 });
995 }, 1024 },
996 assignRoutes(tempId) { 1025 assignRoutes(tempId) {
997 // /episode-intro 1026 // /episode-intro
998 // /outro 1027 // /outro
999 var routes = [ 1028 var routes = [
1000 { 1029 {
1001 url: "AuthorIntro", 1030 url: "AuthorIntro",
1002 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 1031 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
1003 }, 1032 },
1004 { 1033 {
1005 url: "NoScreenshotSingleAuthor", 1034 url: "NoScreenshotSingleAuthor",
1006 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 1035 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
1007 }, 1036 },
1008 { 1037 {
1009 url: "SingleMobileScreenInsightTwo", 1038 url: "SingleMobileScreenInsightTwo",
1010 tempId: "T3_cqNIf7tuqL4jyON63dA7", 1039 tempId: "T3_cqNIf7tuqL4jyON63dA7",
1011 }, 1040 },
1012 { 1041 {
1013 url: "TwoScreenWithoutInsight", 1042 url: "TwoScreenWithoutInsight",
1014 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 1043 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
1015 }, 1044 },
1016 { 1045 {
1017 url: "noscreenshotSingleautho", 1046 url: "noscreenshotSingleautho",
1018 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 1047 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
1019 }, 1048 },
1020 { 1049 {
1021 url: "SingleMobileScreenInsightOne", 1050 url: "SingleMobileScreenInsightOne",
1022 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 1051 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
1023 }, 1052 },
1024 { 1053 {
1025 url: "TwoScreenWithInsight", 1054 url: "TwoScreenWithInsight",
1026 tempId: "T7_za3c3sYgx7bVvtKzasdf", 1055 tempId: "T7_za3c3sYgx7bVvtKzasdf",
1027 }, 1056 },
1028 ]; 1057 ];
1029 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 1058 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
1030 return routes[i].url; 1059 return routes[i].url;
1031 }, 1060 },
1032 saveProfile() { 1061 saveProfile() {
1033 var obj = {}; 1062 var obj = {};
1034 if (this.userData.firstLogin == true) { 1063 if (this.userData.firstLogin == true) {
1035 this.userData.firstLogin = false; 1064 this.userData.firstLogin = false;
1036 } 1065 }
1037 this.userData.name = 1066 this.userData.name =
1038 this.userData.firstName + " " + this.userData.lastName; 1067 this.userData.firstName + " " + this.userData.lastName;
1039 obj = Object.assign(obj, this.userData); 1068 obj = Object.assign(obj, this.userData);
1040 // if(!obj.socialMediaProfiles){ 1069 // if(!obj.socialMediaProfiles){
1041 // obj.socialMediaProfiles = {}; 1070 // obj.socialMediaProfiles = {};
1042 // } 1071 // }
1043 this.selectedSocialLink.forEach((element) => { 1072 this.selectedSocialLink.forEach((element) => {
1044 var key = element.fieldName; 1073 var key = element.fieldName;
1045 obj.socialMediaProfiles[key] = element.fieldValue; 1074 obj.socialMediaProfiles[key] = element.fieldValue;
1046 }); 1075 });
1047 delete obj.createdAt; 1076 delete obj.createdAt;
1048 delete obj.email; 1077 delete obj.email;
1049 delete obj.role; 1078 delete obj.role;
1050 delete obj.verified; 1079 delete obj.verified;
1051 delete obj.updatedAt; 1080 delete obj.updatedAt;
1052 delete obj.__v; 1081 delete obj.__v;
1053 delete obj._id; 1082 delete obj._id;
1054 delete obj.karmaPoints; 1083 delete obj.karmaPoints;
1055 delete obj.awards; 1084 delete obj.awards;
1056 delete obj.socialLogin; 1085 delete obj.socialLogin;
1057 delete obj.phoneNo; 1086 delete obj.phoneNo;
1058 axios 1087 axios
1059 .put("/profile", obj, { 1088 .put("/profile", obj, {
1060 headers: { 1089 headers: {
1061 Authorization: "Bearer " + this.usertoken, 1090 Authorization: "Bearer " + this.usertoken,
1062 }, 1091 },
1063 }) 1092 })
1064 .then((response) => { 1093 .then((response) => {
1065 // this.userData = response.data.data; 1094 // this.userData = response.data.data;
1066 this.$toaster.success("Profile Updated"); 1095 this.$toaster.success("Profile Updated");
1067 this.closeDialog(); 1096 this.closeDialog();
1068 console.log(response.data.data); 1097 console.log(response.data.data);
1069 }) 1098 })
1070 .catch((error) => { 1099 .catch((error) => {
1071 if (error.response) { 1100 if (error.response) {
1072 this.$toaster.error(error.response.data.message); 1101 this.$toaster.error(error.response.data.message);
1073 } 1102 }
1074 }); 1103 });
1075 }, 1104 },
1076 addProfileDialog() { 1105 addProfileDialog() {
1077 $(".inner-wrp").addClass("body-blur"); 1106 $(".inner-wrp").addClass("body-blur");
1078 $("#add-social-links").hide(); 1107 $("#add-social-links").hide();
1079 $(".popup-wrp, #add-profile").show(); 1108 $(".popup-wrp, #add-profile").show();
1080 }, 1109 },
1081 nextProfileDialog() { 1110 nextProfileDialog() {
1082 $("#add-profile").hide(); 1111 $("#add-profile").hide();
1083 $("#add-social-links").show(); 1112 $("#add-social-links").show();
1084 this.saveProfile(); 1113 this.saveProfile();
1085 }, 1114 },
1086 closeDialog() { 1115 closeDialog() {
1087 $(".popup-wrp").hide(); 1116 $(".popup-wrp").hide();
1088 $(".inner-wrp").removeClass("body-blur"); 1117 $(".inner-wrp").removeClass("body-blur");
1089 // this.saveProfile(); 1118 // this.saveProfile();
1090 }, 1119 },
1091 hideDialog() { 1120 hideDialog() {
1092 $(".popup-wrp").hide(); 1121 $(".popup-wrp").hide();
1093 $(".inner-wrp").removeClass("body-blur"); 1122 $(".inner-wrp").removeClass("body-blur");
1094 }, 1123 },
1095 /// 1124 ///
1096 caseDialog() { 1125 caseDialog() {
1097 $(".rp-all").removeClass("active"); 1126 $(".rp-all").removeClass("active");
1098 $(".c-0").addClass("active"); 1127 $(".c-0").addClass("active");
1099 $("#all-replies").hide(); 1128 $("#all-replies").hide();
1100 $("#case-study-0").show(); 1129 $("#case-study-0").show();
1101 }, 1130 },
1102 repliesDialog() { 1131 repliesDialog() {
1103 $(".c-0").removeClass("active"); 1132 $(".c-0").removeClass("active");
1104 $(".rp-all").addClass("active"); 1133 $(".rp-all").addClass("active");
1105 $("#case-study-0").hide(); 1134 $("#case-study-0").hide();
1106 $("#all-replies").show(); 1135 $("#all-replies").show();
1107 }, 1136 },
1108 1137
1109 userprofileshowDialog() { 1138 userprofileshowDialog() {
1110 $("#userprofileshow").toggle(); 1139 $("#userprofileshow").toggle();
1111 }, 1140 },
1112 openUrl(url) { 1141 openUrl(url) {
1113 window.open(url); 1142 window.open(url);
1114 }, 1143 },
1115 }, 1144 },
1116 }; 1145 };
1117 </script> 1146 </script>
1118 <style> 1147 <style>
1119 .no-cursor { 1148 .no-cursor {
1120 cursor: default !important; 1149 cursor: default !important;
1121 } 1150 }
1122 .no-underline { 1151 .no-underline {
1123 text-decoration: none !important; 1152 text-decoration: none !important;
1124 } 1153 }
1125 .position-left { 1154 .position-left {
1126 left: 15px !important; 1155 left: 15px !important;
1127 } 1156 }
1128 .padding-right { 1157 .padding-right {
1129 padding-right: 0px !important; 1158 padding-right: 0px !important;
1130 } 1159 }
1131 1160
1132 .social-link-right { 1161 .social-link-right {
1133 display: flex; 1162 display: flex;
1134 flex-flow: column wrap; 1163 flex-flow: column wrap;
1135 align-content: flex-end; 1164 align-content: flex-end;
1136 } 1165 }
1137 </style> 1166 </style>
1138 1167
src/components/ReadingFlowBounceBoard.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="bounce-board-wrp"> 18 <div class="bounce-board-wrp">
19 <div class="inner-wrp-bc"> 19 <div class="inner-wrp-bc">
20 <div class="bc-top-head"> 20 <div class="bc-top-head">
21 <span class="bc-head"> 21 <span class="bc-head">
22 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 22 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
23 </span> 23 </span>
24 <div class="action-sort"> 24 <div class="action-sort">
25 <span class="sort-by">SORT BY</span> <div class="btn-group"> 25 <span class="sort-by">SORT BY</span> <div class="btn-group">
26 <button type="button" class="bc-sort-list dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 26 <button type="button" class="bc-sort-list dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
27 BEST 27 BEST
28 </button> 28 </button>
29 <div class="dropdown-menu"> 29 <div class="dropdown-menu">
30 <a class="dropdown-item" href="javascript:void(0);">BEST 1</a> 30 <a class="dropdown-item" href="javascript:void(0);">BEST 1</a>
31 <a class="dropdown-item" href="javascript:void(0);">BEST 2</a> 31 <a class="dropdown-item" href="javascript:void(0);">BEST 2</a>
32 <a class="dropdown-item" href="javascript:void(0);">BEST 3</a> 32 <a class="dropdown-item" href="javascript:void(0);">BEST 3</a>
33 </div> 33 </div>
34 </div> 34 </div>
35 </div><!-- action sort --> 35 </div><!-- action sort -->
36 </div><!-- top head --> 36 </div><!-- top head -->
37 <div class="bounce-board-body"> 37 <div class="bounce-board-body">
38 <div class="bc-empty">Empty State</div> 38 <div class="bc-empty">Empty State</div>
39 </div><!-- bounce board body --> 39 </div><!-- bounce board body -->
40 </div> 40 </div>
41 </div><!-- bounceboard wrp --> 41 </div><!-- bounceboard wrp -->
42 <div class="single-mobileInsight"> 42 <div class="single-mobileInsight">
43 <img src="../assets/images/slide.png" class="slide-img" /> 43 <img src="../assets/images/slide.png" class="slide-img" />
44 <div class="single-left-Insight-comments"> 44 <div class="single-left-Insight-comments">
45 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> 45 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
46 <div class="single-author-li-comments"> 46 <div class="single-author-li-comments">
47 <div class="a-intro-comments custom-c-style"> 47 <div class="a-intro-comments custom-c-style">
48 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 48 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
49 <ul class="rly-comment-set"> 49 <ul class="rly-comment-set">
50 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 50 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
51 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 51 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
52 </ul> 52 </ul>
53 </div><!-- comments box --> 53 </div><!-- comments box -->
54 </div><!-- single author comments --> 54 </div><!-- single author comments -->
55 <div class="single-author-li-comments"> 55 <div class="single-author-li-comments">
56 <div class="a-intro-comments custom-c-style"> 56 <div class="a-intro-comments custom-c-style">
57 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 57 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
58 <ul class="rly-comment-set"> 58 <ul class="rly-comment-set">
59 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 59 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
60 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 60 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
61 </ul> 61 </ul>
62 </div><!-- comments box --> 62 </div><!-- comments box -->
63 </div><!-- single author comments --> 63 </div><!-- single author comments -->
64 </div><!-- single mobile Left insight --> 64 </div><!-- single mobile Left insight -->
65 <div class="c-product-insight-wrp "> 65 <div class="c-product-insight-wrp ">
66 <div class="single-author-li-comments "> 66 <div class="single-author-li-comments ">
67 <div class="a-intro-comments custom-selected-style"> 67 <div class="a-intro-comments custom-selected-style">
68 <img src="../assets/images/rect.svg" class="rect" /> 68 <img src="../assets/images/rect.svg" class="rect" />
69 <div class="top-wrp"> 69 <div class="top-wrp">
70 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 70 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
71 </div> 71 </div>
72 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> 72 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
73 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. 73 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
74 <br><br> 74 <br><br>
75 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> 75 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
76 </p> 76 </p>
77 <div class="footer"> 77 <div class="footer">
78 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 78 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
79 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 79 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
80 </div><!-- footer --> 80 </div><!-- footer -->
81 81
82 </div><!-- comments box --> 82 </div><!-- comments box -->
83 </div><!-- single author comments --> 83 </div><!-- single author comments -->
84 84
85 </div><!-- single mobile Right insight --> 85 </div><!-- single mobile Right insight -->
86 </div><!-- Single Mobile Insight --> 86 </div><!-- Single Mobile Insight -->
87 <div class="footer-nav"> 87 <div class="footer-nav">
88 <div class="footer-top"> 88 <div class="footer-top">
89 <div class="row"> 89 <div class="row">
90 <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> 90 <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
91 <div class="row h-100p"> 91 <div class="row h-100p">
92 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> 92 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
93 <ul class="top-intro-bt"> 93 <ul class="top-intro-bt">
94 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 94 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
95 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li> 95 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>
96 </ul> 96 </ul>
97 </div> 97 </div>
98 98
99 </div> 99 </div>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div><!-- footer top --> 102 </div><!-- footer top -->
103 <div class="footer-bottom"> 103 <div class="footer-bottom">
104 <ul> 104 <ul>
105 <li class=""></li> 105 <li class=""></li>
106 <li></li> 106 <li></li>
107 </ul> 107 </ul>
108 </div><!-- footer top --> 108 </div><!-- footer top -->
109 </div><!-- footer --> 109 </div><!-- footer -->
110 110
111 </div> 111 </div>
112 <!-- body wrapper --> 112 <!-- body wrapper -->
113 </div> 113 </div>
114 <!-- main wrapper --> 114 <!-- main wrapper -->
115 </main> 115 </main>
116 </template> 116 </template>
117 117
118 <script> 118 <script>
119 import Vue from "vue"; 119 import Vue from "vue";
120 import router from "../router"; 120 import router from "../router";
121 121
122 export default { 122 export default {
123 name: "ReadingFlowBounceBoard", 123 name: "ReadingFlowBounceBoard",
124 124
125 data() { 125 data() {
126 return {}; 126 return {};
127 }, 127 },
128 mounted() {}, 128 mounted() {},
129 methods: { 129 methods: {
130 goToLogin() { 130 goToLogin() {
131 this.$router.push("/login"); 131 this.$router.push("/login");
132 }, 132 },
133 goToSignUp() { 133 goToSignUp() {
134 this.$router.push("/"); 134 this.$router.push("/");
135 }, 135 },
136 136
137 }, 137 },
138 }; 138 };
139 </script> 139 </script>
140 140
src/components/ReadingFlowBounceBoard_chat.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="bounce-board-wrp"> 18 <div class="bounce-board-wrp">
19 <div class="inner-wrp-bc"> 19 <div class="inner-wrp-bc">
20 <div class="bc-top-head"> 20 <div class="bc-top-head">
21 <span class="bc-head"> 21 <span class="bc-head">
22 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 22 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
23 </span> 23 </span>
24 <div class="action-sort"> 24 <div class="action-sort">
25 <span class="sort-by">SORT BY</span> <div class="btn-group"> 25 <span class="sort-by">SORT BY</span> <div class="btn-group">
26 <button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 26 <button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
27 BEST 27 BEST
28 </button> 28 </button>
29 <div class="dropdown-menu short_by"> 29 <div class="dropdown-menu short_by">
30 <a class="dropdown-item" href="javascript:void(0);">BEST 1</a> 30 <a class="dropdown-item" href="javascript:void(0);">BEST 1</a>
31 <a class="dropdown-item" href="javascript:void(0);">BEST 2</a> 31 <a class="dropdown-item" href="javascript:void(0);">BEST 2</a>
32 <a class="dropdown-item" href="javascript:void(0);">BEST 3</a> 32 <a class="dropdown-item" href="javascript:void(0);">BEST 3</a>
33 </div> 33 </div>
34 </div> 34 </div>
35 </div><!-- action sort --> 35 </div><!-- action sort -->
36 </div><!-- top head --> 36 </div><!-- top head -->
37 <div class="bounce-board-body"> 37 <div class="bounce-board-body">
38 <ul class="bounced-user-comments"> 38 <ul class="bounced-user-comments">
39 <li class="bc_border"> 39 <li class="bc_border">
40 <div class="lbord"></div><!-- border --> 40 <div class="lbord"></div><!-- border -->
41 <div class="parent-full-width parent_bg"> 41 <div class="parent-full-width parent_bg">
42 <div class="full-width"> 42 <div class="full-width">
43 <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 43 <div class="b-user-head"><img src="../assets/images/b-user1.png" />
44 <span class="head-content">wanderingirl </span> 44 <span class="head-content">wanderingirl </span>
45 <ul> 45 <ul>
46 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> 46 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
47 <li> <span></span>3days ago</li> 47 <li> <span></span>3days ago</li>
48 <li> <span class="au">Author</span></li> 48 <li> <span class="au">Author</span></li>
49 </ul> 49 </ul>
50 50
51 51
52 </div><!-- header --> 52 </div><!-- header -->
53 <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p> 53 <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
54 <div class="joined_wrapper"> 54 <div class="joined_wrapper">
55 <ul class="joined-info info_bc_spc"> 55 <ul class="joined-info info_bc_spc">
56 <li> <img src="../assets/images/purple-heart.png"> </li> 56 <li> <img src="../assets/images/purple-heart.png"> </li>
57 <li> <a href="javascript:void(0);"> 4</a> </li> 57 <li> <a href="javascript:void(0);"> 4</a> </li>
58 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> 58 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
59 <li> <a href="javascript:void(0);"> 6</a> </li> 59 <li> <a href="javascript:void(0);"> 6</a> </li>
60 </ul> 60 </ul>
61 <div class="add_rply"> 61 <div class="add_rply">
62 <input type="text" placeholder="Add your reply" /> 62 <input type="text" placeholder="Add your reply" />
63 </div><!-- rly form --> 63 </div><!-- rly form -->
64 </div><!-- joined wrapper --> 64 </div><!-- joined wrapper -->
65 </div><!-- full width --> 65 </div><!-- full width -->
66 </div><!-- parent --> 66 </div><!-- parent -->
67 <div class="child-full-width"> 67 <div class="child-full-width">
68 <div class="full-width"> 68 <div class="full-width">
69 <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 69 <div class="b-user-head"><img src="../assets/images/b-user1.png" />
70 <span class="head-content">Onenoisyboi </span> 70 <span class="head-content">Onenoisyboi </span>
71 <ul> 71 <ul>
72 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> 72 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
73 <li> <span></span>3days ago</li> 73 <li> <span></span>3days ago</li>
74 <li> <span class="red">Mod</span></li> 74 <li> <span class="red">Mod</span></li>
75 </ul> 75 </ul>
76 76
77 77
78 </div><!-- header --> 78 </div><!-- header -->
79 <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> 79 <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
80 <div class="joined_wrapper"> 80 <div class="joined_wrapper">
81 <ul class="joined-info info_bc_spc"> 81 <ul class="joined-info info_bc_spc">
82 <li> <img src="../assets/images/purple-heart.png"> </li> 82 <li> <img src="../assets/images/purple-heart.png"> </li>
83 <li> <a href="javascript:void(0);"> 4</a> </li> 83 <li> <a href="javascript:void(0);"> 4</a> </li>
84 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> 84 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
85 <li> <a href="javascript:void(0);"> 6</a> </li> 85 <li> <a href="javascript:void(0);"> 6</a> </li>
86 </ul> 86 </ul>
87 <div class="add_rply"> 87 <div class="add_rply">
88 <input type="text" placeholder="Add your reply" /> 88 <input type="text" placeholder="Add your reply" />
89 </div><!-- rly form --> 89 </div><!-- rly form -->
90 </div><!-- joined wrapper --> 90 </div><!-- joined wrapper -->
91 </div><!-- full width --> 91 </div><!-- full width -->
92 </div><!-- child wrapper --> 92 </div><!-- child wrapper -->
93 </li> 93 </li>
94 94
95 </ul><!-- all user comments --> 95 </ul><!-- all user comments -->
96 <ul class="bounced-user-comments"> 96 <ul class="bounced-user-comments">
97 <li class="bc_border"> 97 <li class="bc_border">
98 <div class="bc_brd_l"></div><!-- border --> 98 <div class="bc_brd_l"></div><!-- border -->
99 <div class="parent-full-width "> 99 <div class="parent-full-width ">
100 <div class="full-width"> 100 <div class="full-width">
101 <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 101 <div class="b-user-head"><img src="../assets/images/b-user1.png" />
102 <span class="head-content">wanderingirl </span> 102 <span class="head-content">wanderingirl </span>
103 <ul> 103 <ul>
104 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> 104 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
105 <li> <span></span>3days ago</li> 105 <li> <span></span>3days ago</li>
106 106
107 </ul> 107 </ul>
108 108
109 109
110 </div><!-- header --> 110 </div><!-- header -->
111 <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p> 111 <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
112 <div class="joined_wrapper"> 112 <div class="joined_wrapper">
113 <ul class="joined-info info_bc_spc"> 113 <ul class="joined-info info_bc_spc">
114 <li> <img src="../assets/images/purple-heart.png"> </li> 114 <li> <img src="../assets/images/purple-heart.png"> </li>
115 <li> <a href="javascript:void(0);"> 4</a> </li> 115 <li> <a href="javascript:void(0);"> 4</a> </li>
116 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> 116 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
117 <li> <a href="javascript:void(0);"> 6</a> </li> 117 <li> <a href="javascript:void(0);"> 6</a> </li>
118 </ul> 118 </ul>
119 <div class="add_rply"> 119 <div class="add_rply">
120 <input type="text" placeholder="Add your reply" /> 120 <input type="text" placeholder="Add your reply" />
121 </div><!-- rly form --> 121 </div><!-- rly form -->
122 </div><!-- joined wrapper --> 122 </div><!-- joined wrapper -->
123 </div><!-- full width --> 123 </div><!-- full width -->
124 </div><!-- parent --> 124 </div><!-- parent -->
125 <div class="child-full-width"> 125 <div class="child-full-width">
126 <div class="full-width"> 126 <div class="full-width">
127 <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 127 <div class="b-user-head"><img src="../assets/images/b-user1.png" />
128 <span class="head-content">Onenoisyboi </span> 128 <span class="head-content">Onenoisyboi </span>
129 <ul> 129 <ul>
130 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> 130 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
131 <li> <span></span>3days ago</li> 131 <li> <span></span>3days ago</li>
132 132
133 </ul> 133 </ul>
134 134
135 135
136 </div><!-- header --> 136 </div><!-- header -->
137 <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> 137 <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
138 <div class="joined_wrapper"> 138 <div class="joined_wrapper">
139 <ul class="joined-info info_bc_spc"> 139 <ul class="joined-info info_bc_spc">
140 <li> <img src="../assets/images/purple-heart.png"> </li> 140 <li> <img src="../assets/images/purple-heart.png"> </li>
141 <li> <a href="javascript:void(0);"> 4</a> </li> 141 <li> <a href="javascript:void(0);"> 4</a> </li>
142 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> 142 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
143 <li> <a href="javascript:void(0);"> 6</a> </li> 143 <li> <a href="javascript:void(0);"> 6</a> </li>
144 </ul> 144 </ul>
145 <div class="add_rply"> 145 <div class="add_rply">
146 <input type="text" placeholder="Add your reply" /> 146 <input type="text" placeholder="Add your reply" />
147 </div><!-- rly form --> 147 </div><!-- rly form -->
148 </div><!-- joined wrapper --> 148 </div><!-- joined wrapper -->
149 </div><!-- full width --> 149 </div><!-- full width -->
150 </div><!-- child wrapper --> 150 </div><!-- child wrapper -->
151 <div class="child-full-width"> 151 <div class="child-full-width">
152 <div class="full-width"> 152 <div class="full-width">
153 <div class="b-user-head"><img src="../assets/images/b-user1.png" /> 153 <div class="b-user-head"><img src="../assets/images/b-user1.png" />
154 <span class="head-content">Onenoisyboi </span> 154 <span class="head-content">Onenoisyboi </span>
155 <ul> 155 <ul>
156 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li> 156 <li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
157 <li> <span></span>3days ago</li> 157 <li> <span></span>3days ago</li>
158 158
159 </ul> 159 </ul>
160 160
161 161
162 </div><!-- header --> 162 </div><!-- header -->
163 <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p> 163 <p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
164 <div class="joined_wrapper"> 164 <div class="joined_wrapper">
165 <ul class="joined-info info_bc_spc"> 165 <ul class="joined-info info_bc_spc">
166 <li> <img src="../assets/images/purple-heart.png"> </li> 166 <li> <img src="../assets/images/purple-heart.png"> </li>
167 <li> <a href="javascript:void(0);"> 4</a> </li> 167 <li> <a href="javascript:void(0);"> 4</a> </li>
168 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li> 168 <li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
169 <li> <a href="javascript:void(0);"> 6</a> </li> 169 <li> <a href="javascript:void(0);"> 6</a> </li>
170 </ul> 170 </ul>
171 <div class="add_rply"> 171 <div class="add_rply">
172 <input type="text" placeholder="Add your reply" /> 172 <input type="text" placeholder="Add your reply" />
173 </div><!-- rly form --> 173 </div><!-- rly form -->
174 </div><!-- joined wrapper --> 174 </div><!-- joined wrapper -->
175 </div><!-- full width --> 175 </div><!-- full width -->
176 </div><!-- child wrapper --> 176 </div><!-- child wrapper -->
177 </li> 177 </li>
178 178
179 </ul><!-- all user comments --> 179 </ul><!-- all user comments -->
180 </div><!-- bounce board body --> 180 </div><!-- bounce board body -->
181 <div class="comments-footer"> 181 <div class="comments-footer">
182 <textarea></textarea> 182 <textarea></textarea>
183 <div class="comments-footer-wrp"> 183 <div class="comments-footer-wrp">
184 <a href="javascript:void(0);" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a> 184 <a href="javascript:void(0);" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a>
185 </div> 185 </div>
186 </div><!-- comments footer --> 186 </div><!-- comments footer -->
187 </div> 187 </div>
188 </div><!-- bounceboard wrp --> 188 </div><!-- bounceboard wrp -->
189 <div class="single-mobileInsight"> 189 <div class="single-mobileInsight">
190 <img src="../assets/images/slide.png" class="slide-img" /> 190 <img src="../assets/images/slide.png" class="slide-img" />
191 <div class="single-left-Insight-comments"> 191 <div class="single-left-Insight-comments">
192 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> 192 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
193 <div class="single-author-li-comments"> 193 <div class="single-author-li-comments">
194 <div class="a-intro-comments custom-c-style"> 194 <div class="a-intro-comments custom-c-style">
195 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 195 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
196 <ul class="rly-comment-set"> 196 <ul class="rly-comment-set">
197 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 197 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
198 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 198 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
199 </ul> 199 </ul>
200 </div><!-- comments box --> 200 </div><!-- comments box -->
201 </div><!-- single author comments --> 201 </div><!-- single author comments -->
202 <div class="single-author-li-comments"> 202 <div class="single-author-li-comments">
203 <div class="a-intro-comments custom-c-style"> 203 <div class="a-intro-comments custom-c-style">
204 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 204 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
205 <ul class="rly-comment-set"> 205 <ul class="rly-comment-set">
206 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 206 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
207 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 207 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
208 </ul> 208 </ul>
209 </div><!-- comments box --> 209 </div><!-- comments box -->
210 </div><!-- single author comments --> 210 </div><!-- single author comments -->
211 </div><!-- single mobile Left insight --> 211 </div><!-- single mobile Left insight -->
212 <div class="c-product-insight-wrp "> 212 <div class="c-product-insight-wrp ">
213 <div class="single-author-li-comments "> 213 <div class="single-author-li-comments ">
214 <div class="a-intro-comments custom-selected-style"> 214 <div class="a-intro-comments custom-selected-style">
215 <img src="../assets/images/rect.svg" class="rect" /> 215 <img src="../assets/images/rect.svg" class="rect" />
216 <div class="top-wrp"> 216 <div class="top-wrp">
217 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 217 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
218 </div> 218 </div>
219 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> 219 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
220 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. 220 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
221 <br><br> 221 <br><br>
222 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> 222 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
223 </p> 223 </p>
224 <div class="footer"> 224 <div class="footer">
225 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 225 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
226 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 226 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
227 </div><!-- footer --> 227 </div><!-- footer -->
228 228
229 </div><!-- comments box --> 229 </div><!-- comments box -->
230 </div><!-- single author comments --> 230 </div><!-- single author comments -->
231 231
232 </div><!-- single mobile Right insight --> 232 </div><!-- single mobile Right insight -->
233 </div><!-- Single Mobile Insight --> 233 </div><!-- Single Mobile Insight -->
234 <div class="footer-nav"> 234 <div class="footer-nav">
235 <div class="footer-top"> 235 <div class="footer-top">
236 <div class="row"> 236 <div class="row">
237 <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> 237 <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
238 <div class="row h-100p"> 238 <div class="row h-100p">
239 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> 239 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
240 <ul class="top-intro-bt"> 240 <ul class="top-intro-bt">
241 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 241 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
242 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li> 242 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>
243 </ul> 243 </ul>
244 </div> 244 </div>
245 245
246 </div> 246 </div>
247 </div> 247 </div>
248 </div> 248 </div>
249 </div><!-- footer top --> 249 </div><!-- footer top -->
250 <div class="footer-bottom"> 250 <div class="footer-bottom">
251 <ul> 251 <ul>
252 <li class=""></li> 252 <li class=""></li>
253 <li></li> 253 <li></li>
254 </ul> 254 </ul>
255 </div><!-- footer top --> 255 </div><!-- footer top -->
256 </div><!-- footer --> 256 </div><!-- footer -->
257 257
258 </div> 258 </div>
259 <!-- body wrapper --> 259 <!-- body wrapper -->
260 </div> 260 </div>
261 <!-- main wrapper --> 261 <!-- main wrapper -->
262 </main> 262 </main>
263 </template> 263 </template>
264 264
265 <script> 265 <script>
266 import Vue from "vue"; 266 import Vue from "vue";
267 import router from "../router"; 267 import router from "../router";
268 268
269 export default { 269 export default {
270 name: "ReadingFlowBounceBoard_chat", 270 name: "ReadingFlowBounceBoard_chat",
271 271
272 data() { 272 data() {
273 return {}; 273 return {};
274 }, 274 },
275 mounted() {}, 275 mounted() {},
276 methods: { 276 methods: {
277 goToLogin() { 277 goToLogin() {
278 this.$router.push("/login"); 278 this.$router.push("/login");
279 }, 279 },
280 goToSignUp() { 280 goToSignUp() {
281 this.$router.push("/"); 281 this.$router.push("/");
282 }, 282 },
283 best_sort(){ 283 best_sort(){
284 $(".short_by").toggle(); 284 $(".short_by").toggle();
285 }, 285 },
286 }, 286 },
287 }; 287 };
288 </script> 288 </script>
289 289
src/components/SingleMobileScreenInsightOne.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 8
9 <!-- chat box --> 9 <!-- chat box -->
10 <div class="bounce-board-wrp" id="cht_box_close"> 10 <div class="bounce-board-wrp" id="cht_box_close">
11 <div class="inner-wrp-bc"> 11 <div class="inner-wrp-bc">
12 <div class="bc-top-head"> 12 <div class="bc-top-head">
13 <span class="bc-head"> 13 <span class="bc-head">
14 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 14 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
15 </span> 15 </span>
16 <div class="action-sort"> 16 <div class="action-sort">
17 <span class="sort-by">SORT BY</span> 17 <!-- <span class="sort-by">SORT BY</span>
18 <div class="btn-group"> 18 <div class="btn-group">
19 <button 19 <button
20 type="button" 20 type="button"
21 class="bc-sort-list dropdown-toggle" 21 class="bc-sort-list dropdown-toggle"
22 data-toggle="dropdown" 22 data-toggle="dropdown"
23 aria-haspopup="true" 23 aria-haspopup="true"
24 aria-expanded="false" 24 aria-expanded="false"
25 > 25 >
26 BEST 26 BEST
27 </button> 27 </button>
28 <div class="dropdown-menu short_by"> 28 <div class="dropdown-menu short_by">
29 <a class="dropdown-item" href="javasript:void(0);" 29 <a class="dropdown-item" href="javasript:void(0);"
30 >BEST 1</a 30 >BEST 1</a
31 > 31 >
32 <a class="dropdown-item" href="javasript:void(0);" 32 <a class="dropdown-item" href="javasript:void(0);"
33 >BEST 2</a 33 >BEST 2</a
34 > 34 >
35 <a class="dropdown-item" href="javasript:void(0);" 35 <a class="dropdown-item" href="javasript:void(0);"
36 >BEST 3</a 36 >BEST 3</a
37 > 37 >
38 </div> 38 </div>
39 </div> 39 </div> -->
40 <a 40 <a
41 href="javasript:void(0);" 41 href="javasript:void(0);"
42 @click="chtbox_close" 42 @click="chtbox_close"
43 class="close_chat_bx" 43 class="close_chat_bx"
44 ><img src="../assets/images/close.png" alt="close" /></a 44 ><img src="../assets/images/close.png" alt="close" /></a
45 ><!-- close --> 45 ><!-- close -->
46 </div> 46 </div>
47 <!-- action sort --> 47 <!-- action sort -->
48 </div> 48 </div>
49 <!-- top head --> 49 <!-- top head -->
50 <div class="bounce-board-body"> 50 <div class="bounce-board-body">
51 <!-- all user comments --> 51 <!-- all user comments -->
52 <ul class="bounced-user-comments"> 52 <ul class="bounced-user-comments">
53 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 53 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
54 <div class="bc_brd_l"></div> 54 <div class="bc_brd_l"></div>
55 <!-- border --> 55 <!-- border -->
56 <div class="parent-full-width" v-if="cmnt.comment"> 56 <div class="parent-full-width" v-if="cmnt.comment">
57 <div class="full-width"> 57 <div class="full-width">
58 <div class="b-user-head"> 58 <div class="b-user-head">
59 <img :src="cmnt.user.profilePic" /> 59 <img :src="cmnt.user.profilePic" />
60 <span class="head-content">{{ cmnt.user.name }} </span> 60 <span class="head-content">{{ cmnt.user.name }} </span>
61 <ul> 61 <ul>
62 <li> 62 <li>
63 <span></span 63 <span></span
64 ><img src="../assets/images/u-info-icon.png" />{{ 64 ><img src="../assets/images/u-info-icon.png" />{{
65 cmnt.user.karmaPoints 65 cmnt.user.karmaPoints
66 }}pts 66 }}pts
67 </li> 67 </li>
68 <li> 68 <li>
69 <span></span>{{ dateGenerator(cmnt.createdAt) }} 69 <span></span>{{ dateGenerator(cmnt.createdAt) }}
70 </li> 70 </li>
71 </ul> 71 </ul>
72 </div> 72 </div>
73 <!-- header --> 73 <!-- header -->
74 <p> 74 <p>
75 {{ cmnt.comment }} 75 {{ cmnt.comment }}
76 </p> 76 </p>
77 <div class="joined_wrapper"> 77 <div class="joined_wrapper">
78 <ul class="joined-info info_bc_spc"> 78 <ul class="joined-info info_bc_spc">
79 <li> 79 <li>
80 <img 80 <img
81 src="../assets/images/heart.svg" 81 src="../assets/images/heart.svg"
82 v-if="cmnt.like == false" 82 v-if="cmnt.like == false"
83 @click="likeComment(true, cmnt._id)" 83 @click="likeComment(true, cmnt._id)"
84 class="cursor-pointer" 84 class="cursor-pointer"
85 /> 85 />
86 <img 86 <img
87 src="../assets/images/purple-heart.png" 87 src="../assets/images/purple-heart.png"
88 v-if="cmnt.like == true" 88 v-if="cmnt.like == true"
89 @click="likeComment(false, cmnt._id)" 89 @click="likeComment(false, cmnt._id)"
90 class="cursor-pointer" 90 class="cursor-pointer"
91 /> 91 />
92 </li> 92 </li>
93 <li> 93 <li>
94 <a href="javasript:void(0);"> 94 <a href="javasript:void(0);">
95 {{ cmnt.likes.length }}</a 95 {{ cmnt.likes.length }}</a
96 > 96 >
97 </li> 97 </li>
98 <li class="comment-spc"> 98 <li class="comment-spc">
99 <img src="../assets/images/purple-comment.png" /> 99 <img src="../assets/images/purple-comment.png" />
100 </li> 100 </li>
101 <li> 101 <li>
102 <a href="javasript:void(0);"> 102 <a href="javasript:void(0);">
103 {{ cmnt.children.length }}</a 103 {{ cmnt.children.length }}</a
104 > 104 >
105 </li> 105 </li>
106 </ul> 106 </ul>
107 <div class="add_rply" v-if="!cmnt.childInput"> 107 <div class="add_rply" v-if="!cmnt.childInput">
108 <input 108 <input
109 type="text" 109 type="text"
110 @click="eachRply(cmnt)" 110 @click="eachRply(cmnt)"
111 class="add_Rply_C" 111 class="add_Rply_C"
112 placeholder="Add your reply" 112 placeholder="Add your reply"
113 /> 113 />
114 </div> 114 </div>
115 <!-- rly form --> 115 <!-- rly form -->
116 </div> 116 </div>
117 <!-- joined wrapper --> 117 <!-- joined wrapper -->
118 </div> 118 </div>
119 <!-- full width --> 119 <!-- full width -->
120 </div> 120 </div>
121 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 121 <div class="comments-footer each-ft" v-if="cmnt.childInput">
122 <textarea v-model="comment" id="childInput"></textarea> 122 <textarea v-model="comment" id="childInput"></textarea>
123 <div class="comments-footer-wrp"> 123 <div class="comments-footer-wrp">
124 <a 124 <a
125 @click="createChildComment(cmnt)" 125 @click="createChildComment(cmnt)"
126 href="javasript:void(0);" 126 href="javasript:void(0);"
127 class="add_comments_chat reply-Wdth" 127 class="add_comments_chat reply-Wdth"
128 >Reply</a 128 >Reply</a
129 > 129 >
130 <a 130 <a
131 href="javasript:void(0);" 131 href="javasript:void(0);"
132 class="discard_bt" 132 class="discard_bt"
133 @click="discardRply(cmnt)" 133 @click="discardRply(cmnt)"
134 ><img src="../assets/images/discard.svg" 134 ><img src="../assets/images/discard.svg"
135 /></a> 135 /></a>
136 </div> 136 </div>
137 </div> 137 </div>
138 <!-- parent --> 138 <!-- parent -->
139 <div 139 <div
140 class="child-full-width" 140 class="child-full-width"
141 v-for="(childCmnt, i) in cmnt.children" 141 v-for="(childCmnt, i) in cmnt.children"
142 :key="i" 142 :key="i"
143 > 143 >
144 <div class="full-width"> 144 <div class="full-width">
145 <div class="b-user-head"> 145 <div class="b-user-head">
146 <img :src="childCmnt.user.profilePic" /> 146 <img :src="childCmnt.user.profilePic" />
147 <span class="head-content" 147 <span class="head-content"
148 >{{ childCmnt.user.name }} 148 >{{ childCmnt.user.name }}
149 </span> 149 </span>
150 <ul> 150 <ul>
151 <li> 151 <li>
152 <span></span 152 <span></span
153 ><img src="../assets/images/u-info-icon.png" />{{ 153 ><img src="../assets/images/u-info-icon.png" />{{
154 childCmnt.user.karmaPoints 154 childCmnt.user.karmaPoints
155 }}pts 155 }}pts
156 </li> 156 </li>
157 <li> 157 <li>
158 <span></span 158 <span></span
159 >{{ dateGenerator(childCmnt.createdAt) }} 159 >{{ dateGenerator(childCmnt.createdAt) }}
160 </li> 160 </li>
161 </ul> 161 </ul>
162 </div> 162 </div>
163 <p> 163 <p>
164 {{ childCmnt.comment }} 164 {{ childCmnt.comment }}
165 </p> 165 </p>
166 <div class="joined_wrapper"> 166 <div class="joined_wrapper">
167 <ul class="joined-info info_bc_spc"> 167 <ul class="joined-info info_bc_spc">
168 <li> 168 <li>
169 <img 169 <img
170 src="../assets/images/heart.svg" 170 src="../assets/images/heart.svg"
171 v-if="childCmnt.like == false" 171 v-if="childCmnt.like == false"
172 @click="likeComment(true, childCmnt._id)" 172 @click="likeComment(true, childCmnt._id)"
173 class="cursor-pointer" 173 class="cursor-pointer"
174 /> 174 />
175 <img 175 <img
176 src="../assets/images/purple-heart.png" 176 src="../assets/images/purple-heart.png"
177 v-if="childCmnt.like == true" 177 v-if="childCmnt.like == true"
178 @click="likeComment(false, childCmnt._id)" 178 @click="likeComment(false, childCmnt._id)"
179 class="cursor-pointer" 179 class="cursor-pointer"
180 /> 180 />
181 </li> 181 </li>
182 <li> 182 <li>
183 <a href="javasript:void(0);"> 183 <a href="javasript:void(0);">
184 {{ childCmnt.likes.length }}</a 184 {{ childCmnt.likes.length }}</a
185 > 185 >
186 </li> 186 </li>
187 </ul> 187 </ul>
188 </div> 188 </div>
189 </div> 189 </div>
190 </div> 190 </div>
191 <!-- eree --> 191 <!-- eree -->
192 192
193 <!-- comments footer --> 193 <!-- comments footer -->
194 </li> 194 </li>
195 </ul> 195 </ul>
196 </div> 196 </div>
197 <!-- bounce board body --> 197 <!-- bounce board body -->
198 <div class="comments-footer" v-if="parentInput"> 198 <div class="comments-footer" v-if="parentInput">
199 <textarea v-model="comment"></textarea> 199 <textarea v-model="comment"></textarea>
200 <div class="comments-footer-wrp"> 200 <div class="comments-footer-wrp">
201 <a 201 <a
202 href="javasript:void(0);" 202 href="javasript:void(0);"
203 class="add_comments_chat" 203 class="add_comments_chat"
204 @click="createComment" 204 @click="createComment"
205 ><img src="../assets/images/add-comment.svg" /> Comment</a 205 ><img src="../assets/images/add-comment.svg" /> Comment</a
206 > 206 >
207 </div> 207 </div>
208 </div> 208 </div>
209 <!-- comments footer --> 209 <!-- comments footer -->
210 </div> 210 </div>
211 </div> 211 </div>
212 <!-- bounceboard wrp --> 212 <!-- bounceboard wrp -->
213 <!-- chat box --> 213 <!-- chat box -->
214 214
215 <div class="single-mobileInsight"> 215 <div class="single-mobileInsight">
216 <div class="m-screen-hidden">
216 <div class="top-area-blank"></div> 217 <div class="top-area-blank"></div>
217 <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" /> 218 <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" />
219 </div>
218 <div class="single-left-Insight-comments"> 220 <div class="single-left-Insight-comments">
219 <div class="author-thoughts"> 221 <div class="author-thoughts">
220 222
221 <img 223 <img
222 src="../assets/images/thoughts-upper.svg" 224 src="../assets/images/thoughts-upper.svg"
223 class="upper-th" 225 class="upper-th"
224 /> 226 />
225 <img 227 <img
226 :src="currentSlideData.payload.metaData.authorImage" 228 :src="currentSlideData.payload.metaData.authorImage"
227 class="dynamic-thoughts" 229 class="dynamic-thoughts"
228 /> 230 />
229 </div><!-- user thoughts --> 231 </div><!-- user thoughts -->
230 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 232 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
231 <div class="a-intro-comments custom-c-style"> 233 <div class="a-intro-comments custom-c-style">
232 <p> 234 <p>
233 {{commentList[0].comment}} 235 {{commentList[0].comment}}
234 </p> 236 </p>
235 <ul class="rly-comment-set"> 237 <ul class="rly-comment-set">
236 <!-- like/dislike --> 238 <!-- like/dislike -->
237 <li> 239 <li>
238 <img 240 <img
239 src="../assets/images/heart.svg" 241 src="../assets/images/heart.svg"
240 v-if="commentList[0].like == false" 242 v-if="commentList[0].like == false"
241 @click="likeComment(true, commentList[0]._id)" 243 @click="likeComment(true, commentList[0]._id)"
242 class="cursor-pointer" 244 class="cursor-pointer"
243 /> 245 />
244 <img 246 <img
245 src="../assets/images/purple-heart.png" 247 src="../assets/images/purple-heart.png"
246 v-if="commentList[0].like == true" 248 v-if="commentList[0].like == true"
247 @click="likeComment(false, commentList[0]._id)" 249 @click="likeComment(false, commentList[0]._id)"
248 class="cursor-pointer" 250 class="cursor-pointer"
249 /> 251 />
250 <a href="javascript:void(0);">{{ 252 <a href="javascript:void(0);">{{
251 commentList[0].likes.length 253 commentList[0].likes.length
252 }}</a> 254 }}</a>
253 </li> 255 </li>
254 <!-- like/dislike ends --> 256 <!-- like/dislike ends -->
255 <li> 257 <li>
256 <img src="../assets/images/rply.svg" /> 258 <img src="../assets/images/rply.svg" />
257 <a href="javascript:void(0);" @click="reply_cht_box(0)" 259 <a href="javascript:void(0);" @click="reply_cht_box(0)"
258 >Reply</a 260 >Reply</a
259 > 261 >
260 </li> 262 </li>
261 </ul> 263 </ul>
262 </div> 264 </div>
263 <!-- comments box --> 265 <!-- comments box -->
264 </div> 266 </div>
265 <!-- single author comments --> 267 <!-- single author comments -->
266 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 268 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
267 <div class="a-intro-comments custom-c-style"> 269 <div class="a-intro-comments custom-c-style">
268 <p> 270 <p>
269 {{commentList[1].comment}} 271 {{commentList[1].comment}}
270 </p> 272 </p>
271 <ul class="rly-comment-set"> 273 <ul class="rly-comment-set">
272 <!-- like/dislike --> 274 <!-- like/dislike -->
273 <li> 275 <li>
274 <img 276 <img
275 src="../assets/images/heart.svg" 277 src="../assets/images/heart.svg"
276 v-if="commentList[1].like == false" 278 v-if="commentList[1].like == false"
277 @click="likeComment(true, commentList[1]._id)" 279 @click="likeComment(true, commentList[1]._id)"
278 class="cursor-pointer" 280 class="cursor-pointer"
279 /> 281 />
280 <img 282 <img
281 src="../assets/images/purple-heart.png" 283 src="../assets/images/purple-heart.png"
282 v-if="commentList[1].like == true" 284 v-if="commentList[1].like == true"
283 @click="likeComment(false, commentList[1]._id)" 285 @click="likeComment(false, commentList[1]._id)"
284 class="cursor-pointer" 286 class="cursor-pointer"
285 /> 287 />
286 <a href="javascript:void(0);">{{ 288 <a href="javascript:void(0);">{{
287 commentList[1].likes.length 289 commentList[1].likes.length
288 }}</a> 290 }}</a>
289 </li> 291 </li>
290 <!-- like/dislike ends --> 292 <!-- like/dislike ends -->
291 <li> 293 <li>
292 <img src="../assets/images/rply.svg" /> 294 <img src="../assets/images/rply.svg" />
293 <a href="javascript:void(0);" @click="reply_cht_box(1)" 295 <a href="javascript:void(0);" @click="reply_cht_box(1)"
294 >Reply</a 296 >Reply</a
295 > 297 >
296 </li> 298 </li>
297 </ul> 299 </ul>
298 </div> 300 </div>
299 <!-- comments box --> 301 <!-- comments box -->
300 </div> 302 </div>
301 <!-- single author comments --> 303 <!-- single author comments -->
302 </div> 304 </div>
303 <!-- single mobile Left insight --> 305 <!-- single mobile Left insight -->
304 <div class="c-product-insight-wrp"> 306 <div class="c-product-insight-wrp">
305 <div class="single-author-li-comments"> 307 <div class="single-author-li-comments">
306 <div class="a-intro-comments custom-selected-style"> 308 <div class="a-intro-comments custom-selected-style">
307 <img src="../assets/images/rect.svg" class="rect" /> 309 <img src="../assets/images/rect.svg" class="rect" />
308 <div class="top-wrp"> 310 <div class="top-wrp">
309 {{currentSlideData.payload.insight.tag}} Insight 311 {{currentSlideData.payload.insight.tag}} Insight
310 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
311 </div> 313 </div>
312 <!-- <div class="top-head"> 314 <!-- <div class="top-head">
313 Decide on using multiple call to action vs single call to 315 Decide on using multiple call to action vs single call to
314 action depending on the stage of the user journey 316 action depending on the stage of the user journey
315 </div> 317 </div>
316 <p> 318 <p>
317 Marketing 101 teaches us to use one single, call to action 319 Marketing 101 teaches us to use one single, call to action
318 (CTA) at the top of the funnel before the uer has shown 320 (CTA) at the top of the funnel before the uer has shown
319 interest in the product. <br /><br /> 321 interest in the product. <br /><br />
320 When the user is already onboarded and is in the 322 When the user is already onboarded and is in the
321 <strong> engage stage </strong>, it may be better to use a 323 <strong> engage stage </strong>, it may be better to use a
322 single CTA for each use case in order to 324 single CTA for each use case in order to
323 <strong> avoid ambiguity.</strong> 325 <strong> avoid ambiguity.</strong>
324 </p> --> 326 </p> -->
325 <div class="top-head">{{currentSlideData.payload.insight.title}}</div> 327 <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
326 <p>{{currentSlideData.payload.insight.description}} 328 <p>{{currentSlideData.payload.insight.description}}
327 <div class="footer"> 329 <div class="footer">
328 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a> 330 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
329 <a href="javascript:void(0);" class="ft-share" 331 <!-- <a href="javascript:void(0);" class="ft-share"
330 ><img src="../assets/images/reply-red.svg" /> Share from 332 ><img src="../assets/images/reply-red.svg" /> Share from
331 library</a 333 library</a
332 > 334 > -->
333 </div> 335 </div>
334 <!-- footer --> 336 <!-- footer -->
335 </div> 337 </div>
336 <!-- comments box --> 338 <!-- comments box -->
337 </div> 339 </div>
338 <!-- single author comments --> 340 <!-- single author comments -->
339 </div> 341 </div>
340 <!-- single mobile Right insight --> 342 <!-- single mobile Right insight -->
341 </div> 343 </div>
342 <!-- Single Mobile Insight --> 344 <!-- Single Mobile Insight -->
343 <!-- single author comments --> 345 <!-- single author comments -->
344 <div class="footer-nav"> 346 <div class="footer-nav">
345 <div class="footer-top white-bg"> 347 <div class="footer-top white-bg">
346 <div class="row"> 348 <div class="row">
347 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 349 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
348 <div class="row h-100p"> 350 <div class="row h-100p">
349 <div 351 <div
350 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 352 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
351 > 353 >
352 <div class="ft-comments-group testi-photos-ct"> 354 <div class="ft-comments-group testi-photos-ct">
353 <div class="c-with-photos"> 355 <div class="c-with-photos">
354 <span class="count-comments" 356 <span class="count-comments"
355 >{{ getLastcomment("count", commentList) }}+ 357 >{{ getLastcomment("count", commentList) }}+
356 Comments</span 358 Comments</span
357 ><!-- count commets --> 359 ><!-- count commets -->
358 <ul class="comments-photos"> 360 <ul class="comments-photos">
359 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 361 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
360 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 362 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
361 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 363 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
362 </ul> 364 </ul>
363 <!-- comment photos --> 365 <!-- comment photos -->
364 </div> 366 </div>
365 <div class="comments-detail all-c-space"> 367 <div class="comments-detail all-c-space">
366 <span 368 <span
367 >{{ getLastcomment("name", commentList) }} 369 >{{ getLastcomment("name", commentList) }}
368 <a href="javascript:void(0);" @click="open_ct_box" 370 <a href="javascript:void(0);" @click="open_ct_box"
369 >View All</a 371 >View All</a
370 ></span 372 ></span
371 > 373 >
372 <p> 374 <p>
373 <!-- I wonder what the difference between “Dunzo Assistant” 375 <!-- I wonder what the difference between “Dunzo Assistant”
374 and “Pickup and Drop... --> 376 and “Pickup and Drop... -->
375 {{ getLastcomment("msg", commentList) }} 377 {{ getLastcomment("msg", commentList) }}
376 </p> 378 </p>
377 </div> 379 </div>
378 <!-- comments detail --> 380 <!-- comments detail -->
379 </div> 381 </div>
380 <!-- comments Group --> 382 <!-- comments Group -->
381 </div> 383 </div>
382 </div> 384 </div>
383 </div> 385 </div>
384 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 386 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
385 <div class="comment-frm no-c-frm"> 387 <div class="comment-frm no-c-frm">
386 <div class="row"> 388 <div class="row">
387 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 389 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
388 <div class="form-group frm-wdth addfrm-spc"> 390 <div class="form-group frm-wdth addfrm-spc">
389 <input 391 <input
390 type="text" 392 type="text"
391 class="form-control" 393 class="form-control"
392 placeholder="Something on your mind?" 394 placeholder="Something on your mind?"
393 id="open_ct_box" 395 id="open_ct_box"
394 v-model="comment" 396 v-model="comment"
395 /> 397 />
396 </div> 398 </div>
397 </div> 399 </div>
398 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 400 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
399 <a 401 <a
400 href="javascript:void(0);" 402 href="javascript:void(0);"
401 @click="createComment" 403 @click="createComment"
402 class="add-comment" 404 class="add-comment"
403 ><img src="../assets/images/add-comment.svg" /> 405 ><img src="../assets/images/add-comment.svg" />
404 Comment</a 406 Comment</a
405 > 407 >
406 </div> 408 </div>
407 </div> 409 </div>
408 <!-- comment from --> 410 <!-- comment from -->
409 </div> 411 </div>
410 </div> 412 </div>
411 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 413 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
412 <ul class="top-intro-bt"> 414 <ul class="top-intro-bt">
413 <li> 415 <li>
414 <a href="javascript:void(0);" @click="goBack" 416 <a href="javascript:void(0);" @click="goBack"
415 ><img src="../assets/images/skip-prev.svg" /> Prev</a 417 ><img src="../assets/images/skip-prev.svg" /> Prev</a
416 > 418 >
417 </li> 419 </li>
418 <li> 420 <li>
419 <a href="javascript:void(0);" @click="goNext" 421 <a href="javascript:void(0);" @click="goNext"
420 ><img src="../assets/images/skip-next.svg" /> Skip to next 422 ><img src="../assets/images/skip-next.svg" /> Skip to next
421 slide</a 423 slide</a
422 > 424 >
423 </li> 425 </li>
424 </ul> 426 </ul>
425 </div> 427 </div>
426 <!-- buttons list --> 428 <!-- buttons list -->
427 </div> 429 </div>
428 </div> 430 </div>
429 <!-- footer top --> 431 <!-- footer top -->
430 <div class="footer-bottom"> 432 <div class="footer-bottom">
431 <ul> 433 <ul>
432 <li class="active"></li> 434 <li class="active"></li>
433 <li></li> 435 <li></li>
434 </ul> 436 </ul>
435 </div> 437 </div>
436 <!-- footer top --> 438 <!-- footer top -->
437 </div> 439 </div>
438 <!-- footer --> 440 <!-- footer -->
439 </div> 441 </div>
440 <!-- body wrapper --> 442 <!-- body wrapper -->
441 </div> 443 </div>
442 <!-- main wrapper --> 444 <!-- main wrapper -->
443 </main> 445 </main>
444 </template> 446 </template>
445 447
446 <script> 448 <script>
447 import Vue from "vue"; 449 import Vue from "vue";
448 import router from "../router"; 450 import router from "../router";
449 import axios from "axios"; 451 import axios from "axios";
450 import moment from 'moment'; 452 import moment from 'moment';
451 import Header from "./Header"; 453 import Header from "./Header";
452 454
453 export default { 455 export default {
454 components: { 456 components: {
455 Header: Header, 457 Header: Header,
456 }, 458 },
457 name: "SingleMobileScreenInsightOne", 459 name: "SingleMobileScreenInsightOne",
458 460
459 data() { 461 data() {
460 return { 462 return {
461 allSlide: [], 463 allSlide: [],
462 currentSlideIndex: null, 464 currentSlideIndex: null,
463 currentSlideData: null, 465 currentSlideData: null,
464 // 466 //
465 usertoken: null, 467 usertoken: null,
466 commentList: [], 468 commentList: [],
467 comment: null, 469 comment: null,
468 parentInput: true, 470 parentInput: true,
469 }; 471 };
470 }, 472 },
471 mounted() { 473 mounted() {
472 var allSlideData = localStorage.getItem( 474 var allSlideData = localStorage.getItem(
473 "spotlight_slide" + this.$route.params.caseStudyId 475 "spotlight_slide" + this.$route.params.caseStudyId
474 ); 476 );
475 if (allSlideData) { 477 if (allSlideData) {
476 this.allSlide = JSON.parse(allSlideData); 478 this.allSlide = JSON.parse(allSlideData);
477 this.getCurrentSlideData(); 479 this.getCurrentSlideData();
478 } 480 }
479 var userdata = localStorage.getItem("spotlight_usertoken"); 481 var userdata = localStorage.getItem("spotlight_usertoken");
480 if (userdata) { 482 if (userdata) {
481 userdata = JSON.parse(userdata); 483 userdata = JSON.parse(userdata);
482 this.usertoken = userdata.token; 484 this.usertoken = userdata.token;
483 this.getComment(); 485 this.getComment();
484 } 486 }
485 }, 487 },
486 methods: { 488 methods: {
487 getCurrentSlideData() { 489 getCurrentSlideData() {
488 var i = this.allSlide.findIndex( 490 var i = this.allSlide.findIndex(
489 (slide_) => slide_.slideId == this.$route.params.slideId 491 (slide_) => slide_.slideId == this.$route.params.slideId
490 ); 492 );
491 this.currentSlideIndex = i; 493 this.currentSlideIndex = i;
492 this.currentSlideData = this.allSlide[i]; 494 this.currentSlideData = this.allSlide[i];
493 console.log("currentSlideData", this.currentSlideData); 495 console.log("currentSlideData", this.currentSlideData);
494 }, 496 },
495 goNext() { 497 goNext() {
496 this.currentSlideIndex++; 498 this.currentSlideIndex++;
497 this.$router.push({ 499 this.$router.push({
498 name: this.allSlide[this.currentSlideIndex].ur, 500 name: this.allSlide[this.currentSlideIndex].ur,
499 params: { 501 params: {
500 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 502 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
501 slideId: this.allSlide[this.currentSlideIndex].slideId, 503 slideId: this.allSlide[this.currentSlideIndex].slideId,
502 }, 504 },
503 }); 505 });
504 }, 506 },
505 goBack() { 507 goBack() {
506 this.currentSlideIndex--; 508 this.currentSlideIndex--;
507 this.$router.push({ 509 this.$router.push({
508 name: this.allSlide[this.currentSlideIndex].ur, 510 name: this.allSlide[this.currentSlideIndex].ur,
509 params: { 511 params: {
510 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 512 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
511 slideId: this.allSlide[this.currentSlideIndex].slideId, 513 slideId: this.allSlide[this.currentSlideIndex].slideId,
512 }, 514 },
513 }); 515 });
514 }, 516 },
515 createComment() { 517 createComment() {
516 console.log("===", this.comment); 518 console.log("===", this.comment);
517 var obj = { 519 var obj = {
518 caseStudyId: this.currentSlideData.caseStudyId, 520 caseStudyId: this.currentSlideData.caseStudyId,
519 slideId: this.currentSlideData.slideId, 521 slideId: this.currentSlideData.slideId,
520 comment: this.comment, 522 comment: this.comment,
521 523
522 }; 524 };
523 axios 525 axios
524 .post("/bounceBoard/comment", obj, { 526 .post("/bounceBoard/comment", obj, {
525 headers: { 527 headers: {
526 Authorization: "Bearer " + this.usertoken, 528 Authorization: "Bearer " + this.usertoken,
527 }, 529 },
528 }) 530 })
529 .then((response) => { 531 .then((response) => {
530 this.comment = null; 532 this.comment = null;
531 this.getComment(); 533 this.getComment();
532 console.log(response); 534 console.log(response);
533 }) 535 })
534 .catch((error) => { 536 .catch((error) => {
535 if (error.response) { 537 if (error.response) {
536 this.$toaster.error(error.response.data.message); 538 this.$toaster.error(error.response.data.message);
537 } 539 }
538 }); 540 });
539 }, 541 },
540 createChildComment(cmnt) { 542 createChildComment(cmnt) {
541 console.log(cmnt,"===", this.comment); 543 console.log(cmnt,"===", this.comment);
542 var obj = { 544 var obj = {
543 caseStudyId: this.currentSlideData.caseStudyId, 545 caseStudyId: this.currentSlideData.caseStudyId,
544 slideId: this.currentSlideData.slideId, 546 slideId: this.currentSlideData.slideId,
545 comment: this.comment, 547 comment: this.comment,
546 parentId: cmnt._id, 548 parentId: cmnt._id,
547 549
548 }; 550 };
549 axios 551 axios
550 .post("/bounceBoard/comment", obj, { 552 .post("/bounceBoard/comment", obj, {
551 headers: { 553 headers: {
552 Authorization: "Bearer " + this.usertoken, 554 Authorization: "Bearer " + this.usertoken,
553 }, 555 },
554 }) 556 })
555 .then((response) => { 557 .then((response) => {
556 this.comment = null; 558 this.comment = null;
557 this.discardRply(cmnt); 559 this.discardRply(cmnt);
558 this.getComment(); 560 this.getComment();
559 console.log(response); 561 console.log(response);
560 }) 562 })
561 .catch((error) => { 563 .catch((error) => {
562 if (error.response) { 564 if (error.response) {
563 this.$toaster.error(error.response.data.message); 565 this.$toaster.error(error.response.data.message);
564 } 566 }
565 }); 567 });
566 }, 568 },
567 getComment() { 569 getComment() {
568 axios 570 axios
569 .get( 571 .get(
570 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 572 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
571 { 573 {
572 headers: { 574 headers: {
573 Authorization: "Bearer " + this.usertoken, 575 Authorization: "Bearer " + this.usertoken,
574 }, 576 },
575 } 577 }
576 ) 578 )
577 .then((response) => { 579 .then((response) => {
578 console.log(response.data); 580 console.log(response.data);
579 var comments = []; 581 var comments = [];
580 var keys = Object.keys(response.data.data) 582 var keys = Object.keys(response.data.data)
581 response.data.data 583 response.data.data
582 keys.forEach((key_) => { 584 keys.forEach((key_) => {
583 comments.push(response.data.data[key_]) 585 comments.push(response.data.data[key_])
584 }); 586 });
585 comments.forEach((coment_)=>{ 587 comments.forEach((coment_)=>{
586 coment_.childInput = false; 588 coment_.childInput = false;
587 }); 589 });
588 console.log("comments",comments) 590 console.log("comments",comments)
589 this.commentList = comments; 591 this.commentList = comments;
590 }) 592 })
591 .catch((error) => console.log(error)); 593 .catch((error) => console.log(error));
592 }, 594 },
593 dateGenerator(curreDate){ 595 dateGenerator(curreDate){
594 var todayDate = moment(new Date(), "DD.MM.YYYY"); 596 var todayDate = moment(new Date(), "DD.MM.YYYY");
595 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 597 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
596 var result = todayDate.diff(endDate, 'days'); 598 var result = todayDate.diff(endDate, 'days');
597 return result; 599 return result;
598 }, 600 },
599 goToLogin() { 601 goToLogin() {
600 this.$router.push("/login"); 602 this.$router.push("/login");
601 }, 603 },
602 goToSignUp() { 604 goToSignUp() {
603 this.$router.push("/"); 605 this.$router.push("/");
604 }, 606 },
605 open(url){ 607 open(url){
606 window.open(url); 608 window.open(url);
607 }, 609 },
608 chtbox_close() { 610 chtbox_close() {
609 $("#cht_box_close").removeClass("cht_close"); 611 $("#cht_box_close").removeClass("cht_close");
610 $("#open_ct_box, .c_hide").show(); 612 $("#open_ct_box, .c_hide").show();
611 $(".footer-top").addClass("white-bg"); 613 $(".footer-top").addClass("white-bg");
612 }, 614 },
613 open_ct_box() { 615 open_ct_box() {
614 $("#cht_box_close").addClass("cht_close"); 616 $("#cht_box_close").addClass("cht_close");
615 $("#open_ct_box, .c_hide").hide(); 617 $("#open_ct_box, .c_hide").hide();
616 $(".footer-top").removeClass("white-bg"); 618 $(".footer-top").removeClass("white-bg");
617 }, 619 },
618 eachRply(cmnt) { 620 eachRply(cmnt) {
619 cmnt.childInput = true; 621 cmnt.childInput = true;
620 this.parentInput = false; 622 this.parentInput = false;
621 this.comment = null; 623 this.comment = null;
622 setTimeout(() => { 624 setTimeout(() => {
623 document.getElementById("childInput").focus(); 625 document.getElementById("childInput").focus();
624 }, 100); 626 }, 100);
625 }, 627 },
626 discardRply(cmnt) { 628 discardRply(cmnt) {
627 cmnt.childInput = false; 629 cmnt.childInput = false;
628 this.parentInput = true; 630 this.parentInput = true;
629 this.comment = null; 631 this.comment = null;
630 }, 632 },
631 reply_cht_box(i) { 633 reply_cht_box(i) {
632 console.log(this.commentList, "cmnt"); 634 console.log(this.commentList, "cmnt");
633 $("#cht_box_close").addClass("cht_close"); 635 $("#cht_box_close").addClass("cht_close");
634 $("#open_ct_box, .c_hide").hide(); 636 $("#open_ct_box, .c_hide").hide();
635 $(".footer-top").removeClass("white-bg"); 637 $(".footer-top").removeClass("white-bg");
636 this.commentList[i].childInput = true; 638 this.commentList[i].childInput = true;
637 this.parentInput = false; 639 this.parentInput = false;
638 this.comment = null; 640 this.comment = null;
639 setTimeout(() => { 641 setTimeout(() => {
640 document.getElementById("childInput").focus(); 642 document.getElementById("childInput").focus();
641 }, 100); 643 }, 100);
642 }, 644 },
643 likeComment(status, id) { 645 likeComment(status, id) {
644 console.log("===", this.comment); 646 console.log("===", this.comment);
645 var obj = { 647 var obj = {
646 commentId: id, 648 commentId: id,
647 like: status, 649 like: status,
648 }; 650 };
649 axios 651 axios
650 .post("/bounceBoard/like", obj, { 652 .post("/bounceBoard/like", obj, {
651 headers: { 653 headers: {
652 Authorization: "Bearer " + this.usertoken, 654 Authorization: "Bearer " + this.usertoken,
653 }, 655 },
654 }) 656 })
655 .then((response) => { 657 .then((response) => {
656 this.getComment(); 658 this.getComment();
657 console.log(response); 659 console.log(response);
658 }) 660 })
659 .catch((error) => { 661 .catch((error) => {
660 if (error.response) { 662 if (error.response) {
661 this.$toaster.error(error.response.data.message); 663 this.$toaster.error(error.response.data.message);
662 } 664 }
663 }); 665 });
664 }, 666 },
665 getLastcomment(flag, commentArray) { 667 getLastcomment(flag, commentArray) {
666 var finalComment = null; 668 var finalComment = null;
667 var totalMessage = 0; 669 var totalMessage = 0;
668 var name = null; 670 var name = null;
669 commentArray.forEach((comment_) => { 671 commentArray.forEach((comment_) => {
670 if (comment_.comment != null) { 672 if (comment_.comment != null) {
671 name = comment_.user.name; 673 name = comment_.user.name;
672 finalComment = comment_.comment; 674 finalComment = comment_.comment;
673 totalMessage++; 675 totalMessage++;
674 } 676 }
675 }); 677 });
676 if (flag == "count") { 678 if (flag == "count") {
677 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 679 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
678 } else if (flag =="name") { 680 } else if (flag =="name") {
679 return (name = name); 681 return (name = name);
680 } else { 682 } else {
681 return finalComment; 683 return finalComment;
682 } 684 }
683 }, 685 },
684 commentExistCheck(i) { 686 commentExistCheck(i) {
685 console.log(this.commentList[i].comment); 687 console.log(this.commentList[i].comment);
686 var returnValue = false; 688 var returnValue = false;
687 if (this.commentList[i].comment) { 689 if (this.commentList[i].comment) {
688 returnValue = true; 690 returnValue = true;
689 } 691 }
690 return returnValue; 692 return returnValue;
691 }, 693 },
692 }, 694 },
693 }; 695 };
694 // 696 //
695 </script> 697 </script>
696 698
src/components/SingleMobileScreenInsightTwo.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> --> 4 <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> -->
5 <!-- <a class="navbar-brand" href="javascript:void(0);" 5 <!-- <a class="navbar-brand" href="javascript:void(0);"
6 ><img src="../assets/images/logo.png" 6 ><img src="../assets/images/logo.png"
7 /></a> 7 /></a>
8 <button 8 <button
9 class="navbar-toggler" 9 class="navbar-toggler"
10 type="button" 10 type="button"
11 data-toggle="collapse" 11 data-toggle="collapse"
12 data-target="#navbarsExample03" 12 data-target="#navbarsExample03"
13 aria-controls="navbarsExample03" 13 aria-controls="navbarsExample03"
14 aria-expanded="false" 14 aria-expanded="false"
15 aria-label="Toggle navigation" 15 aria-label="Toggle navigation"
16 > 16 >
17 <span class="navbar-toggler-icon"></span> 17 <span class="navbar-toggler-icon"></span>
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 </button> 20 </button>
21 <div class="user-profile-photo insights-profile"> 21 <div class="user-profile-photo insights-profile">
22 <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> 22 <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23 </div> --> 23 </div> -->
24 <Header></Header> 24 <Header></Header>
25 25
26 <!-- </nav> --> 26 <!-- </nav> -->
27 <!-- menu wrapper --> 27 <!-- menu wrapper -->
28 <div class="intro-startup"> 28 <div class="intro-startup">
29 <!-- chat box --> 29 <!-- chat box -->
30 <div class="bounce-board-wrp" id="cht_box_close"> 30 <div class="bounce-board-wrp" id="cht_box_close">
31 <div class="inner-wrp-bc"> 31 <div class="inner-wrp-bc">
32 <div class="bc-top-head"> 32 <div class="bc-top-head">
33 <span class="bc-head"> 33 <span class="bc-head">
34 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 34 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
35 </span> 35 </span>
36 <div class="action-sort"> 36 <div class="action-sort">
37 <span class="sort-by">SORT BY</span> 37 <!-- <span class="sort-by">SORT BY</span>
38 <div class="btn-group"> 38 <div class="btn-group">
39 <button 39 <button
40 type="button" 40 type="button"
41 class="bc-sort-list dropdown-toggle" 41 class="bc-sort-list dropdown-toggle"
42 data-toggle="dropdown" 42 data-toggle="dropdown"
43 aria-haspopup="true" 43 aria-haspopup="true"
44 aria-expanded="false" 44 aria-expanded="false"
45 > 45 >
46 BEST 46 BEST
47 </button> 47 </button>
48 <div class="dropdown-menu short_by"> 48 <div class="dropdown-menu short_by">
49 <a class="dropdown-item" href="javasript:void(0);" 49 <a class="dropdown-item" href="javasript:void(0);"
50 >BEST 1</a 50 >BEST 1</a
51 > 51 >
52 <a class="dropdown-item" href="javasript:void(0);" 52 <a class="dropdown-item" href="javasript:void(0);"
53 >BEST 2</a 53 >BEST 2</a
54 > 54 >
55 <a class="dropdown-item" href="javasript:void(0);" 55 <a class="dropdown-item" href="javasript:void(0);"
56 >BEST 3</a 56 >BEST 3</a
57 > 57 >
58 </div> 58 </div>
59 </div> 59 </div> -->
60 <a 60 <a
61 href="javasript:void(0);" 61 href="javasript:void(0);"
62 @click="chtbox_close" 62 @click="chtbox_close"
63 class="close_chat_bx" 63 class="close_chat_bx"
64 ><img src="../assets/images/close.png" alt="close" /></a 64 ><img src="../assets/images/close.png" alt="close" /></a
65 ><!-- close --> 65 ><!-- close -->
66 </div> 66 </div>
67 <!-- action sort --> 67 <!-- action sort -->
68 </div> 68 </div>
69 <!-- top head --> 69 <!-- top head -->
70 <div class="bounce-board-body"> 70 <div class="bounce-board-body">
71 <!-- all user comments --> 71 <!-- all user comments -->
72 <ul class="bounced-user-comments"> 72 <ul class="bounced-user-comments">
73 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 73 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
74 <div class="bc_brd_l"></div> 74 <div class="bc_brd_l"></div>
75 <!-- border --> 75 <!-- border -->
76 <div class="parent-full-width" v-if="cmnt.comment"> 76 <div class="parent-full-width" v-if="cmnt.comment">
77 <div class="full-width"> 77 <div class="full-width">
78 <div class="b-user-head"> 78 <div class="b-user-head">
79 <img :src="cmnt.user.profilePic" /> 79 <img :src="cmnt.user.profilePic" />
80 <span class="head-content">{{ cmnt.user.name }} </span> 80 <span class="head-content">{{ cmnt.user.name }} </span>
81 <ul> 81 <ul>
82 <li> 82 <li>
83 <span></span 83 <span></span
84 ><img src="../assets/images/u-info-icon.png" />{{ 84 ><img src="../assets/images/u-info-icon.png" />{{
85 cmnt.user.karmaPoints 85 cmnt.user.karmaPoints
86 }}pts 86 }}pts
87 </li> 87 </li>
88 <li> 88 <li>
89 <span></span>{{ dateGenerator(cmnt.createdAt) }} 89 <span></span>{{ dateGenerator(cmnt.createdAt) }}
90 </li> 90 </li>
91 </ul> 91 </ul>
92 </div> 92 </div>
93 <!-- header --> 93 <!-- header -->
94 <p> 94 <p>
95 {{ cmnt.comment }} 95 {{ cmnt.comment }}
96 </p> 96 </p>
97 <div class="joined_wrapper"> 97 <div class="joined_wrapper">
98 <ul class="joined-info info_bc_spc"> 98 <ul class="joined-info info_bc_spc">
99 <li> 99 <li>
100 <img 100 <img
101 src="../assets/images/heart.svg" 101 src="../assets/images/heart.svg"
102 v-if="cmnt.like == false" 102 v-if="cmnt.like == false"
103 @click="likeComment(true, cmnt._id)" 103 @click="likeComment(true, cmnt._id)"
104 class="cursor-pointer" 104 class="cursor-pointer"
105 /> 105 />
106 <img 106 <img
107 src="../assets/images/purple-heart.png" 107 src="../assets/images/purple-heart.png"
108 v-if="cmnt.like == true" 108 v-if="cmnt.like == true"
109 @click="likeComment(false, cmnt._id)" 109 @click="likeComment(false, cmnt._id)"
110 class="cursor-pointer" 110 class="cursor-pointer"
111 /> 111 />
112 </li> 112 </li>
113 <li> 113 <li>
114 <a href="javasript:void(0);"> 114 <a href="javasript:void(0);">
115 {{ cmnt.likes.length }}</a 115 {{ cmnt.likes.length }}</a
116 > 116 >
117 </li> 117 </li>
118 <li class="comment-spc"> 118 <li class="comment-spc">
119 <img src="../assets/images/purple-comment.png" /> 119 <img src="../assets/images/purple-comment.png" />
120 </li> 120 </li>
121 <li> 121 <li>
122 <a href="javasript:void(0);"> 122 <a href="javasript:void(0);">
123 {{ cmnt.children.length }}</a 123 {{ cmnt.children.length }}</a
124 > 124 >
125 </li> 125 </li>
126 </ul> 126 </ul>
127 <div class="add_rply" v-if="!cmnt.childInput"> 127 <div class="add_rply" v-if="!cmnt.childInput">
128 <input 128 <input
129 type="text" 129 type="text"
130 @click="eachRply(cmnt)" 130 @click="eachRply(cmnt)"
131 class="add_Rply_C" 131 class="add_Rply_C"
132 placeholder="Add your reply" 132 placeholder="Add your reply"
133 /> 133 />
134 </div> 134 </div>
135 <!-- rly form --> 135 <!-- rly form -->
136 </div> 136 </div>
137 <!-- joined wrapper --> 137 <!-- joined wrapper -->
138 </div> 138 </div>
139 <!-- full width --> 139 <!-- full width -->
140 </div> 140 </div>
141 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 141 <div class="comments-footer each-ft" v-if="cmnt.childInput">
142 <textarea v-model="comment" id="childInput"></textarea> 142 <textarea v-model="comment" id="childInput"></textarea>
143 <div class="comments-footer-wrp"> 143 <div class="comments-footer-wrp">
144 <a 144 <a
145 @click="createChildComment(cmnt)" 145 @click="createChildComment(cmnt)"
146 href="javasript:void(0);" 146 href="javasript:void(0);"
147 class="add_comments_chat reply-Wdth" 147 class="add_comments_chat reply-Wdth"
148 >Reply</a 148 >Reply</a
149 > 149 >
150 <a 150 <a
151 href="javasript:void(0);" 151 href="javasript:void(0);"
152 class="discard_bt" 152 class="discard_bt"
153 @click="discardRply(cmnt)" 153 @click="discardRply(cmnt)"
154 ><img src="../assets/images/discard.svg" 154 ><img src="../assets/images/discard.svg"
155 /></a> 155 /></a>
156 </div> 156 </div>
157 </div> 157 </div>
158 <!-- parent --> 158 <!-- parent -->
159 <div 159 <div
160 class="child-full-width" 160 class="child-full-width"
161 v-for="(childCmnt, i) in cmnt.children" 161 v-for="(childCmnt, i) in cmnt.children"
162 :key="i" 162 :key="i"
163 > 163 >
164 <div class="full-width"> 164 <div class="full-width">
165 <div class="b-user-head"> 165 <div class="b-user-head">
166 <img :src="childCmnt.user.profilePic" /> 166 <img :src="childCmnt.user.profilePic" />
167 <span class="head-content" 167 <span class="head-content"
168 >{{ childCmnt.user.name }} 168 >{{ childCmnt.user.name }}
169 </span> 169 </span>
170 <ul> 170 <ul>
171 <li> 171 <li>
172 <span></span 172 <span></span
173 ><img src="../assets/images/u-info-icon.png" />{{ 173 ><img src="../assets/images/u-info-icon.png" />{{
174 childCmnt.user.karmaPoints 174 childCmnt.user.karmaPoints
175 }}pts 175 }}pts
176 </li> 176 </li>
177 <li> 177 <li>
178 <span></span 178 <span></span
179 >{{ dateGenerator(childCmnt.createdAt) }} 179 >{{ dateGenerator(childCmnt.createdAt) }}
180 </li> 180 </li>
181 </ul> 181 </ul>
182 </div> 182 </div>
183 <p> 183 <p>
184 {{ childCmnt.comment }} 184 {{ childCmnt.comment }}
185 </p> 185 </p>
186 <div class="joined_wrapper"> 186 <div class="joined_wrapper">
187 <ul class="joined-info info_bc_spc"> 187 <ul class="joined-info info_bc_spc">
188 <li> 188 <li>
189 <img 189 <img
190 src="../assets/images/heart.svg" 190 src="../assets/images/heart.svg"
191 v-if="childCmnt.like == false" 191 v-if="childCmnt.like == false"
192 @click="likeComment(true, childCmnt._id)" 192 @click="likeComment(true, childCmnt._id)"
193 class="cursor-pointer" 193 class="cursor-pointer"
194 /> 194 />
195 <img 195 <img
196 src="../assets/images/purple-heart.png" 196 src="../assets/images/purple-heart.png"
197 v-if="childCmnt.like == true" 197 v-if="childCmnt.like == true"
198 @click="likeComment(false, childCmnt._id)" 198 @click="likeComment(false, childCmnt._id)"
199 class="cursor-pointer" 199 class="cursor-pointer"
200 /> 200 />
201 </li> 201 </li>
202 <li> 202 <li>
203 <a href="javasript:void(0);"> 203 <a href="javasript:void(0);">
204 {{ childCmnt.likes.length }}</a 204 {{ childCmnt.likes.length }}</a
205 > 205 >
206 </li> 206 </li>
207 </ul> 207 </ul>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- eree --> 211 <!-- eree -->
212 212
213 <!-- comments footer --> 213 <!-- comments footer -->
214 </li> 214 </li>
215 </ul> 215 </ul>
216 </div> 216 </div>
217 <!-- bounce board body --> 217 <!-- bounce board body -->
218 <div class="comments-footer" v-if="parentInput"> 218 <div class="comments-footer" v-if="parentInput">
219 <textarea v-model="comment"></textarea> 219 <textarea v-model="comment"></textarea>
220 <div class="comments-footer-wrp"> 220 <div class="comments-footer-wrp">
221 <a 221 <a
222 href="javasript:void(0);" 222 href="javasript:void(0);"
223 class="add_comments_chat" 223 class="add_comments_chat"
224 @click="createComment" 224 @click="createComment"
225 ><img src="../assets/images/add-comment.svg" /> Comment</a 225 ><img src="../assets/images/add-comment.svg" /> Comment</a
226 > 226 >
227 </div> 227 </div>
228 </div> 228 </div>
229 <!-- comments footer --> 229 <!-- comments footer -->
230 </div> 230 </div>
231 </div> 231 </div>
232 <!-- bounceboard wrp --> 232 <!-- bounceboard wrp -->
233 <!-- chat box --> 233 <!-- chat box -->
234 234
235 <div class="single-mobileInsight"> 235 <div class="single-mobileInsight">
236 <div class="m-screen-hidden">
236 <div class="top-area-blank"></div> 237 <div class="top-area-blank"></div>
237 <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> 238 <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->
238 <img 239 <img
239 :src="currentSlideData.payload.metaData.mobileImage" 240 :src="currentSlideData.payload.metaData.mobileImage"
240 class="m-screen" 241 class="m-screen insight-two-img"
241 /> 242 />
243 </div>
242 <div class="single-left-Insight-comments"> 244 <div class="single-left-Insight-comments">
243 <div class="author-thoughts"> 245 <div class="author-thoughts">
244 <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> 246 <img src="../assets/images/thoughts-upper.svg" class="upper-th" />
245 <img 247 <img
246 :src="currentSlideData.payload.metaData.authorImage" 248 :src="currentSlideData.payload.metaData.authorImage"
247 class="dynamic-thoughts" 249 class="dynamic-thoughts"
248 /> 250 />
249 </div> 251 </div>
250 <!-- user thoughts --> 252 <!-- user thoughts -->
251 253
252 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 254 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
253 <div class="a-intro-comments custom-c-style"> 255 <div class="a-intro-comments custom-c-style">
254 <!-- <p> 256 <!-- <p>
255 I wonder what the difference between “ 257 I wonder what the difference between “
256 <strong>Dunzo Assistant </strong>” and “<strong 258 <strong>Dunzo Assistant </strong>” and “<strong
257 >Pickup and Drop </strong 259 >Pickup and Drop </strong
258 >” are. If they are the same, there are two “call to actions” 260 >” are. If they are the same, there are two “call to actions”
259 for the same workflow 261 for the same workflow
260 </p> --> 262 </p> -->
261 <p>{{ commentList[0].comment }}</p> 263 <p>{{ commentList[0].comment }}</p>
262 <ul class="rly-comment-set"> 264 <ul class="rly-comment-set">
263 <!-- like/dislike --> 265 <!-- like/dislike -->
264 <li> 266 <li>
265 <img 267 <img
266 src="../assets/images/heart.svg" 268 src="../assets/images/heart.svg"
267 v-if="commentList[0].like == false" 269 v-if="commentList[0].like == false"
268 @click="likeComment(true, commentList[0]._id)" 270 @click="likeComment(true, commentList[0]._id)"
269 class="cursor-pointer" 271 class="cursor-pointer"
270 /> 272 />
271 <img 273 <img
272 src="../assets/images/purple-heart.png" 274 src="../assets/images/purple-heart.png"
273 v-if="commentList[0].like == true" 275 v-if="commentList[0].like == true"
274 @click="likeComment(false, commentList[0]._id)" 276 @click="likeComment(false, commentList[0]._id)"
275 class="cursor-pointer" 277 class="cursor-pointer"
276 /> 278 />
277 <a href="javascript:void(0);">{{ 279 <a href="javascript:void(0);">{{
278 commentList[0].likes.length 280 commentList[0].likes.length
279 }}</a> 281 }}</a>
280 </li> 282 </li>
281 <!-- like/dislike ends --> 283 <!-- like/dislike ends -->
282 <li> 284 <li>
283 <img src="../assets/images/rply.svg" /> 285 <img src="../assets/images/rply.svg" />
284 <a href="javascript:void(0);" @click="reply_cht_box(0)" 286 <a href="javascript:void(0);" @click="reply_cht_box(0)"
285 >Reply</a 287 >Reply</a
286 > 288 >
287 </li> 289 </li>
288 </ul> 290 </ul>
289 </div> 291 </div>
290 <!-- comments box --> 292 <!-- comments box -->
291 </div> 293 </div>
292 <!-- single author comments --> 294 <!-- single author comments -->
293 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 295 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
294 <div class="a-intro-comments custom-c-style"> 296 <div class="a-intro-comments custom-c-style">
295 <p> 297 <p>
296 {{ commentList[1].comment }} 298 {{ commentList[1].comment }}
297 </p> 299 </p>
298 <ul class="rly-comment-set"> 300 <ul class="rly-comment-set">
299 <!-- like/dislike --> 301 <!-- like/dislike -->
300 <li> 302 <li>
301 <img 303 <img
302 src="../assets/images/heart.svg" 304 src="../assets/images/heart.svg"
303 v-if="commentList[1].like == false" 305 v-if="commentList[1].like == false"
304 @click="likeComment(true, commentList[1]._id)" 306 @click="likeComment(true, commentList[1]._id)"
305 class="cursor-pointer" 307 class="cursor-pointer"
306 /> 308 />
307 <img 309 <img
308 src="../assets/images/purple-heart.png" 310 src="../assets/images/purple-heart.png"
309 v-if="commentList[1].like == true" 311 v-if="commentList[1].like == true"
310 @click="likeComment(false, commentList[1]._id)" 312 @click="likeComment(false, commentList[1]._id)"
311 class="cursor-pointer" 313 class="cursor-pointer"
312 /> 314 />
313 <a href="javascript:void(0);">{{ 315 <a href="javascript:void(0);">{{
314 commentList[1].likes.length 316 commentList[1].likes.length
315 }}</a> 317 }}</a>
316 </li> 318 </li>
317 <!-- like/dislike ends --> 319 <!-- like/dislike ends -->
318 <li> 320 <li>
319 <img src="../assets/images/rply.svg" /> 321 <img src="../assets/images/rply.svg" />
320 <a href="javascript:void(0);" @click="reply_cht_box(1)" 322 <a href="javascript:void(0);" @click="reply_cht_box(1)"
321 >Reply</a 323 >Reply</a
322 > 324 >
323 </li> 325 </li>
324 </ul> 326 </ul>
325 </div> 327 </div>
326 <!-- comments box --> 328 <!-- comments box -->
327 </div> 329 </div>
328 <!-- single author comments --> 330 <!-- single author comments -->
329 </div> 331 </div>
330 <!-- single mobile Left insight --> 332 <!-- single mobile Left insight -->
331 <div 333 <div
332 class="c-product-insight-wrp two-screen-spc-top" 334 class="c-product-insight-wrp two-screen-spc-top"
333 v-if="commentExistCheck(2)" 335 v-if="commentExistCheck(2)"
334 > 336 >
335 <div class="single-author-li-comments"> 337 <div class="single-author-li-comments">
336 <div class="a-intro-comments"> 338 <div class="a-intro-comments">
337 <p> 339 <p>
338 {{ commentList[2].comment }} 340 {{ commentList[2].comment }}
339 </p> 341 </p>
340 <ul class="rly-comment-set"> 342 <ul class="rly-comment-set">
341 <!-- like/dislike --> 343 <!-- like/dislike -->
342 <li> 344 <li>
343 <img 345 <img
344 src="../assets/images/heart.svg" 346 src="../assets/images/heart.svg"
345 v-if="commentList[2].like == false" 347 v-if="commentList[2].like == false"
346 @click="likeComment(true, commentList[2]._id)" 348 @click="likeComment(true, commentList[2]._id)"
347 class="cursor-pointer" 349 class="cursor-pointer"
348 /> 350 />
349 <img 351 <img
350 src="../assets/images/purple-heart.png" 352 src="../assets/images/purple-heart.png"
351 v-if="commentList[2].like == true" 353 v-if="commentList[2].like == true"
352 @click="likeComment(false, commentList[2]._id)" 354 @click="likeComment(false, commentList[2]._id)"
353 class="cursor-pointer" 355 class="cursor-pointer"
354 /> 356 />
355 <a href="javascript:void(0);">{{ 357 <a href="javascript:void(0);">{{
356 commentList[2].likes.length 358 commentList[2].likes.length
357 }}</a> 359 }}</a>
358 </li> 360 </li>
359 <!-- like/dislike ends --> 361 <!-- like/dislike ends -->
360 <li> 362 <li>
361 <img src="../assets/images/rply.svg" /> 363 <img src="../assets/images/rply.svg" />
362 <a href="javascript:void(0);" @click="reply_cht_box(2)" 364 <a href="javascript:void(0);" @click="reply_cht_box(2)"
363 >Reply</a 365 >Reply</a
364 > 366 >
365 </li> 367 </li>
366 </ul> 368 </ul>
367 </div> 369 </div>
368 <!-- comments box --> 370 <!-- comments box -->
369 </div> 371 </div>
370 <div class="single-author-li-comments" v-if="commentExistCheck(3)"> 372 <div class="single-author-li-comments" v-if="commentExistCheck(3)">
371 <div class="a-intro-comments"> 373 <div class="a-intro-comments">
372 <p> 374 <p>
373 {{ commentList[3].comment }} 375 {{ commentList[3].comment }}
374 </p> 376 </p>
375 <ul class="rly-comment-set"> 377 <ul class="rly-comment-set">
376 <!-- like/dislike --> 378 <!-- like/dislike -->
377 <li> 379 <li>
378 <img 380 <img
379 src="../assets/images/heart.svg" 381 src="../assets/images/heart.svg"
380 v-if="commentList[3].like == false" 382 v-if="commentList[3].like == false"
381 @click="likeComment(true, commentList[3]._id)" 383 @click="likeComment(true, commentList[3]._id)"
382 class="cursor-pointer" 384 class="cursor-pointer"
383 /> 385 />
384 <img 386 <img
385 src="../assets/images/purple-heart.png" 387 src="../assets/images/purple-heart.png"
386 v-if="commentList[3].like == true" 388 v-if="commentList[3].like == true"
387 @click="likeComment(false, commentList[3]._id)" 389 @click="likeComment(false, commentList[3]._id)"
388 class="cursor-pointer" 390 class="cursor-pointer"
389 /> 391 />
390 <a href="javascript:void(0);">{{ 392 <a href="javascript:void(0);">{{
391 commentList[3].likes.length 393 commentList[3].likes.length
392 }}</a> 394 }}</a>
393 </li> 395 </li>
394 <!-- like/dislike ends --> 396 <!-- like/dislike ends -->
395 <li> 397 <li>
396 <img src="../assets/images/rply.svg" /> 398 <img src="../assets/images/rply.svg" />
397 <a href="javascript:void(0);" @click="reply_cht_box(3)" 399 <a href="javascript:void(0);" @click="reply_cht_box(3)"
398 >Reply</a 400 >Reply</a
399 > 401 >
400 </li> 402 </li>
401 </ul> 403 </ul>
402 </div> 404 </div>
403 <!-- comments box --> 405 <!-- comments box -->
404 </div> 406 </div>
405 <!-- single author comments --> 407 <!-- single author comments -->
406 </div> 408 </div>
407 <!-- single mobile Right insight --> 409 <!-- single mobile Right insight -->
408 </div> 410 </div>
409 <!-- single author comments --> 411 <!-- single author comments -->
410 <div class="footer-nav"> 412 <div class="footer-nav">
411 <div class="footer-top white-bg"> 413 <div class="footer-top white-bg">
412 <div class="row"> 414 <div class="row">
413 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 415 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
414 <div class="row h-100p"> 416 <div class="row h-100p">
415 <div 417 <div
416 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 418 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
417 > 419 >
418 <div class="ft-comments-group testi-photos-ct"> 420 <div class="ft-comments-group testi-photos-ct">
419 <div class="c-with-photos"> 421 <div class="c-with-photos">
420 <span class="count-comments" 422 <span class="count-comments"
421 >{{ getLastcomment("count", commentList) }}+ 423 >{{ getLastcomment("count", commentList) }}+
422 Comments</span 424 Comments</span
423 ><!-- count commets --> 425 ><!-- count commets -->
424 <ul class="comments-photos"> 426 <ul class="comments-photos">
425 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> 427 <!-- <li><img src="../assets/images/c-photo-1.png" /></li>
426 <li><img src="../assets/images/c-photo-2.png" /></li> 428 <li><img src="../assets/images/c-photo-2.png" /></li>
427 <li><img src="../assets/images/c-photo-3.png" /></li> --> 429 <li><img src="../assets/images/c-photo-3.png" /></li> -->
428 </ul> 430 </ul>
429 <!-- comment photos --> 431 <!-- comment photos -->
430 </div> 432 </div>
431 <div class="comments-detail all-c-space"> 433 <div class="comments-detail all-c-space">
432 <span 434 <span
433 >{{ getLastcomment("name", commentList) }} 435 >{{ getLastcomment("name", commentList) }}
434 <a href="javascript:void(0);" @click="open_ct_box" 436 <a href="javascript:void(0);" @click="open_ct_box"
435 >View All</a 437 >View All</a
436 ></span 438 ></span
437 > 439 >
438 <p> 440 <p>
439 <!-- I wonder what the difference between “Dunzo Assistant” 441 <!-- I wonder what the difference between “Dunzo Assistant”
440 and “Pickup and Drop... --> 442 and “Pickup and Drop... -->
441 {{ getLastcomment("msg", commentList) }} 443 {{ getLastcomment("msg", commentList) }}
442 </p> 444 </p>
443 </div> 445 </div>
444 <!-- comments detail --> 446 <!-- comments detail -->
445 </div> 447 </div>
446 <!-- comments Group --> 448 <!-- comments Group -->
447 </div> 449 </div>
448 </div> 450 </div>
449 </div> 451 </div>
450 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 452 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
451 <div class="comment-frm no-c-frm"> 453 <div class="comment-frm no-c-frm">
452 <div class="row"> 454 <div class="row">
453 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 455 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
454 <div class="form-group frm-wdth addfrm-spc"> 456 <div class="form-group frm-wdth addfrm-spc">
455 <input 457 <input
456 type="text" 458 type="text"
457 class="form-control" 459 class="form-control"
458 placeholder="Something on your mind?" 460 placeholder="Something on your mind?"
459 id="open_ct_box" 461 id="open_ct_box"
460 v-model="comment" 462 v-model="comment"
461 /> 463 />
462 </div> 464 </div>
463 </div> 465 </div>
464 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 466 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
465 <a 467 <a
466 href="javascript:void(0);" 468 href="javascript:void(0);"
467 @click="createComment" 469 @click="createComment"
468 class="add-comment" 470 class="add-comment"
469 ><img src="../assets/images/add-comment.svg" /> 471 ><img src="../assets/images/add-comment.svg" />
470 Comment</a 472 Comment</a
471 > 473 >
472 </div> 474 </div>
473 </div> 475 </div>
474 <!-- comment from --> 476 <!-- comment from -->
475 </div> 477 </div>
476 </div> 478 </div>
477 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 479 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
478 <ul class="top-intro-bt"> 480 <ul class="top-intro-bt">
479 <li> 481 <li>
480 <a href="javascript:void(0);" @click="goBack" 482 <a href="javascript:void(0);" @click="goBack"
481 ><img src="../assets/images/skip-prev.svg" /> Prev</a 483 ><img src="../assets/images/skip-prev.svg" /> Prev</a
482 > 484 >
483 </li> 485 </li>
484 <li> 486 <li>
485 <a href="javascript:void(0);" @click="goNext" 487 <a href="javascript:void(0);" @click="goNext"
486 ><img src="../assets/images/skip-next.svg" /> Skip to next 488 ><img src="../assets/images/skip-next.svg" /> Skip to next
487 slide</a 489 slide</a
488 > 490 >
489 </li> 491 </li>
490 </ul> 492 </ul>
491 </div> 493 </div>
492 <!-- buttons list --> 494 <!-- buttons list -->
493 </div> 495 </div>
494 </div> 496 </div>
495 <!-- footer top --> 497 <!-- footer top -->
496 <div class="footer-bottom"> 498 <div class="footer-bottom">
497 <ul> 499 <ul>
498 <li class="active"></li> 500 <li class="active"></li>
499 <li></li> 501 <li></li>
500 </ul> 502 </ul>
501 </div> 503 </div>
502 <!-- footer top --> 504 <!-- footer top -->
503 </div> 505 </div>
504 <!-- footer --> 506 <!-- footer -->
505 </div> 507 </div>
506 <!-- body wrapper --> 508 <!-- body wrapper -->
507 </div> 509 </div>
508 <!-- main wrapper --> 510 <!-- main wrapper -->
509 </main> 511 </main>
510 </template> 512 </template>
511 513
512 <script> 514 <script>
513 import Vue from "vue"; 515 import Vue from "vue";
514 import router from "../router"; 516 import router from "../router";
515 import axios from "axios"; 517 import axios from "axios";
516 import moment from "moment"; 518 import moment from "moment";
517 import Header from "./Header"; 519 import Header from "./Header";
518 520
519 export default { 521 export default {
520 components: { 522 components: {
521 Header: Header, 523 Header: Header,
522 }, 524 },
523 name: "SingleMobileScreenInsightTwo", 525 name: "SingleMobileScreenInsightTwo",
524 data() { 526 data() {
525 return { 527 return {
526 allSlide: [], 528 allSlide: [],
527 currentSlideIndex: null, 529 currentSlideIndex: null,
528 currentSlideData: null, 530 currentSlideData: null,
529 // 531 //
530 usertoken: null, 532 usertoken: null,
531 commentList: [], 533 commentList: [],
532 comment: null, 534 comment: null,
533 parentInput: true, 535 parentInput: true,
534 }; 536 };
535 }, 537 },
536 mounted() { 538 mounted() {
537 var allSlideData = localStorage.getItem( 539 var allSlideData = localStorage.getItem(
538 "spotlight_slide" + this.$route.params.caseStudyId 540 "spotlight_slide" + this.$route.params.caseStudyId
539 ); 541 );
540 var userdata = localStorage.getItem("spotlight_usertoken"); 542 var userdata = localStorage.getItem("spotlight_usertoken");
541 if (allSlideData) { 543 if (allSlideData) {
542 this.allSlide = JSON.parse(allSlideData); 544 this.allSlide = JSON.parse(allSlideData);
543 this.getCurrentSlideData(); 545 this.getCurrentSlideData();
544 } 546 }
545 if (userdata) { 547 if (userdata) {
546 userdata = JSON.parse(userdata); 548 userdata = JSON.parse(userdata);
547 this.usertoken = userdata.token; 549 this.usertoken = userdata.token;
548 this.getComment(); 550 this.getComment();
549 } 551 }
550 }, 552 },
551 methods: { 553 methods: {
552 getCurrentSlideData() { 554 getCurrentSlideData() {
553 var i = this.allSlide.findIndex( 555 var i = this.allSlide.findIndex(
554 (slide_) => slide_.slideId == this.$route.params.slideId 556 (slide_) => slide_.slideId == this.$route.params.slideId
555 ); 557 );
556 this.currentSlideIndex = i; 558 this.currentSlideIndex = i;
557 this.currentSlideData = this.allSlide[i]; 559 this.currentSlideData = this.allSlide[i];
558 console.log("currentSlideData", this.currentSlideData); 560 console.log("currentSlideData", this.currentSlideData);
559 }, 561 },
560 goNext() { 562 goNext() {
561 this.currentSlideIndex++; 563 this.currentSlideIndex++;
562 this.$router.push({ 564 this.$router.push({
563 name: this.allSlide[this.currentSlideIndex].ur, 565 name: this.allSlide[this.currentSlideIndex].ur,
564 params: { 566 params: {
565 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 567 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
566 slideId: this.allSlide[this.currentSlideIndex].slideId, 568 slideId: this.allSlide[this.currentSlideIndex].slideId,
567 }, 569 },
568 }); 570 });
569 }, 571 },
570 goBack() { 572 goBack() {
571 this.currentSlideIndex--; 573 this.currentSlideIndex--;
572 this.$router.push({ 574 this.$router.push({
573 name: this.allSlide[this.currentSlideIndex].ur, 575 name: this.allSlide[this.currentSlideIndex].ur,
574 params: { 576 params: {
575 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 577 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
576 slideId: this.allSlide[this.currentSlideIndex].slideId, 578 slideId: this.allSlide[this.currentSlideIndex].slideId,
577 }, 579 },
578 }); 580 });
579 }, 581 },
580 createComment() { 582 createComment() {
581 console.log("===", this.comment); 583 console.log("===", this.comment);
582 var obj = { 584 var obj = {
583 caseStudyId: this.currentSlideData.caseStudyId, 585 caseStudyId: this.currentSlideData.caseStudyId,
584 slideId: this.currentSlideData.slideId, 586 slideId: this.currentSlideData.slideId,
585 comment: this.comment, 587 comment: this.comment,
586 }; 588 };
587 axios 589 axios
588 .post("/bounceBoard/comment", obj, { 590 .post("/bounceBoard/comment", obj, {
589 headers: { 591 headers: {
590 Authorization: "Bearer " + this.usertoken, 592 Authorization: "Bearer " + this.usertoken,
591 }, 593 },
592 }) 594 })
593 .then((response) => { 595 .then((response) => {
594 this.comment = null; 596 this.comment = null;
595 this.getComment(); 597 this.getComment();
596 console.log(response); 598 console.log(response);
597 }) 599 })
598 .catch((error) => { 600 .catch((error) => {
599 if (error.response) { 601 if (error.response) {
600 this.$toaster.error(error.response.data.message); 602 this.$toaster.error(error.response.data.message);
601 } 603 }
602 }); 604 });
603 }, 605 },
604 606
605 createChildComment(cmnt) { 607 createChildComment(cmnt) {
606 console.log(cmnt, "===", this.comment); 608 console.log(cmnt, "===", this.comment);
607 var obj = { 609 var obj = {
608 caseStudyId: this.currentSlideData.caseStudyId, 610 caseStudyId: this.currentSlideData.caseStudyId,
609 slideId: this.currentSlideData.slideId, 611 slideId: this.currentSlideData.slideId,
610 comment: this.comment, 612 comment: this.comment,
611 parentId: cmnt._id, 613 parentId: cmnt._id,
612 }; 614 };
613 axios 615 axios
614 .post("/bounceBoard/comment", obj, { 616 .post("/bounceBoard/comment", obj, {
615 headers: { 617 headers: {
616 Authorization: "Bearer " + this.usertoken, 618 Authorization: "Bearer " + this.usertoken,
617 }, 619 },
618 }) 620 })
619 .then((response) => { 621 .then((response) => {
620 this.comment = null; 622 this.comment = null;
621 this.discardRply(cmnt); 623 this.discardRply(cmnt);
622 this.getComment(); 624 this.getComment();
623 console.log(response); 625 console.log(response);
624 }) 626 })
625 .catch((error) => { 627 .catch((error) => {
626 if (error.response) { 628 if (error.response) {
627 this.$toaster.error(error.response.data.message); 629 this.$toaster.error(error.response.data.message);
628 } 630 }
629 }); 631 });
630 }, 632 },
631 getComment() { 633 getComment() {
632 axios 634 axios
633 .get( 635 .get(
634 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 636 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
635 { 637 {
636 headers: { 638 headers: {
637 Authorization: "Bearer " + this.usertoken, 639 Authorization: "Bearer " + this.usertoken,
638 }, 640 },
639 } 641 }
640 ) 642 )
641 .then((response) => { 643 .then((response) => {
642 console.log(response.data); 644 console.log(response.data);
643 var comments = []; 645 var comments = [];
644 var keys = Object.keys(response.data.data); 646 var keys = Object.keys(response.data.data);
645 response.data.data; 647 response.data.data;
646 keys.forEach((key_) => { 648 keys.forEach((key_) => {
647 comments.push(response.data.data[key_]); 649 comments.push(response.data.data[key_]);
648 }); 650 });
649 comments.forEach((coment_) => { 651 comments.forEach((coment_) => {
650 coment_.childInput = false; 652 coment_.childInput = false;
651 }); 653 });
652 console.log("comments", comments); 654 console.log("comments", comments);
653 this.commentList = comments; 655 this.commentList = comments;
654 }) 656 })
655 .catch((error) => console.log(error)); 657 .catch((error) => console.log(error));
656 }, 658 },
657 dateGenerator(curreDate) { 659 dateGenerator(curreDate) {
658 var todayDate = moment(new Date(), "DD.MM.YYYY"); 660 var todayDate = moment(new Date(), "DD.MM.YYYY");
659 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 661 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
660 var result = todayDate.diff(endDate, "days"); 662 var result = todayDate.diff(endDate, "days");
661 var date = null; 663 var date = null;
662 if (result == 0) { 664 if (result == 0) {
663 date = "Today"; 665 date = "Today";
664 } else { 666 } else {
665 date = result + " days ago"; 667 date = result + " days ago";
666 } 668 }
667 return date; 669 return date;
668 }, 670 },
669 goToLogin() { 671 goToLogin() {
670 this.$router.push("/login"); 672 this.$router.push("/login");
671 }, 673 },
672 goToSignUp() { 674 goToSignUp() {
673 this.$router.push("/"); 675 this.$router.push("/");
674 }, 676 },
675 chtbox_close() { 677 chtbox_close() {
676 $("#cht_box_close").removeClass("cht_close"); 678 $("#cht_box_close").removeClass("cht_close");
677 $("#open_ct_box, .c_hide").show(); 679 $("#open_ct_box, .c_hide").show();
678 $(".footer-top").addClass("white-bg"); 680 $(".footer-top").addClass("white-bg");
679 }, 681 },
680 open_ct_box() { 682 open_ct_box() {
681 $("#cht_box_close").addClass("cht_close"); 683 $("#cht_box_close").addClass("cht_close");
682 $("#open_ct_box, .c_hide").hide(); 684 $("#open_ct_box, .c_hide").hide();
683 $(".footer-top").removeClass("white-bg"); 685 $(".footer-top").removeClass("white-bg");
684 }, 686 },
685 eachRply(cmnt) { 687 eachRply(cmnt) {
686 cmnt.childInput = true; 688 cmnt.childInput = true;
687 this.parentInput = false; 689 this.parentInput = false;
688 this.comment = null; 690 this.comment = null;
689 setTimeout(() => { 691 setTimeout(() => {
690 document.getElementById("childInput").focus(); 692 document.getElementById("childInput").focus();
691 }, 100); 693 }, 100);
692 }, 694 },
693 discardRply(cmnt) { 695 discardRply(cmnt) {
694 cmnt.childInput = false; 696 cmnt.childInput = false;
695 this.parentInput = true; 697 this.parentInput = true;
696 this.comment = null; 698 this.comment = null;
697 }, 699 },
698 reply_cht_box(i) { 700 reply_cht_box(i) {
699 console.log(this.commentList, "cmnt"); 701 console.log(this.commentList, "cmnt");
700 $("#cht_box_close").addClass("cht_close"); 702 $("#cht_box_close").addClass("cht_close");
701 $("#open_ct_box, .c_hide").hide(); 703 $("#open_ct_box, .c_hide").hide();
702 $(".footer-top").removeClass("white-bg"); 704 $(".footer-top").removeClass("white-bg");
703 this.commentList[i].childInput = true; 705 this.commentList[i].childInput = true;
704 this.parentInput = false; 706 this.parentInput = false;
705 this.comment = null; 707 this.comment = null;
706 setTimeout(() => { 708 setTimeout(() => {
707 document.getElementById("childInput").focus(); 709 document.getElementById("childInput").focus();
708 }, 100); 710 }, 100);
709 }, 711 },
710 likeComment(status, id) { 712 likeComment(status, id) {
711 console.log("===", this.comment); 713 console.log("===", this.comment);
712 var obj = { 714 var obj = {
713 commentId: id, 715 commentId: id,
714 like: status, 716 like: status,
715 }; 717 };
716 axios 718 axios
717 .post("/bounceBoard/like", obj, { 719 .post("/bounceBoard/like", obj, {
718 headers: { 720 headers: {
719 Authorization: "Bearer " + this.usertoken, 721 Authorization: "Bearer " + this.usertoken,
720 }, 722 },
721 }) 723 })
722 .then((response) => { 724 .then((response) => {
723 this.getComment(); 725 this.getComment();
724 console.log(response); 726 console.log(response);
725 }) 727 })
726 .catch((error) => { 728 .catch((error) => {
727 if (error.response) { 729 if (error.response) {
728 this.$toaster.error(error.response.data.message); 730 this.$toaster.error(error.response.data.message);
729 } 731 }
730 }); 732 });
731 }, 733 },
732 getLastcomment(flag, commentArray) { 734 getLastcomment(flag, commentArray) {
733 var finalComment = null; 735 var finalComment = null;
734 var totalMessage = 0; 736 var totalMessage = 0;
735 var name = null; 737 var name = null;
736 commentArray.forEach((comment_) => { 738 commentArray.forEach((comment_) => {
737 if (comment_.comment != null) { 739 if (comment_.comment != null) {
738 name = comment_.user.name; 740 name = comment_.user.name;
739 finalComment = comment_.comment; 741 finalComment = comment_.comment;
740 totalMessage++; 742 totalMessage++;
741 } 743 }
742 }); 744 });
743 if (flag == "count") { 745 if (flag == "count") {
744 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 746 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
745 } else if (flag == "name") { 747 } else if (flag == "name") {
746 return (name = name); 748 return (name = name);
747 } else { 749 } else {
748 return finalComment; 750 return finalComment;
749 } 751 }
750 }, 752 },
751 commentExistCheck(i) { 753 commentExistCheck(i) {
752 console.log(this.commentList[i].comment); 754 console.log(this.commentList[i].comment);
753 var returnValue = false; 755 var returnValue = false;
754 if (this.commentList[i].comment) { 756 if (this.commentList[i].comment) {
755 returnValue = true; 757 returnValue = true;
756 } 758 }
757 return returnValue; 759 return returnValue;
758 }, 760 },
759 }, 761 },
760 }; 762 };
761 // 763 //
762 </script> 764 </script>
763 765
src/components/SingleScreengrabOneInsight.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="screengrab-wrp"> 18 <div class="screengrab-wrp">
19 <img src="../assets/images/saved-for-letter.png" /> 19 <img src="../assets/images/saved-for-letter.png" />
20 <div class="single-left-Insight-comments screengrab-lspc"> 20 <div class="single-left-Insight-comments screengrab-lspc">
21 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> 21 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22 <div class="single-author-li-comments"> 22 <div class="single-author-li-comments">
23 <div class="a-intro-comments custom-c-style"> 23 <div class="a-intro-comments custom-c-style">
24 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 24 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
25 <ul class="rly-comment-set"> 25 <ul class="rly-comment-set">
26 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 26 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 27 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28 </ul> 28 </ul>
29 </div><!-- comments box --> 29 </div><!-- comments box -->
30 </div><!-- single author comments --> 30 </div><!-- single author comments -->
31 31
32 </div><!-- single mobile Left insight --> 32 </div><!-- single mobile Left insight -->
33 <div class="c-product-insight-wrp screengrab-rspc"> 33 <div class="c-product-insight-wrp screengrab-rspc">
34 <div class="single-author-li-comments "> 34 <div class="single-author-li-comments ">
35 <div class="a-intro-comments custom-selected-style"> 35 <div class="a-intro-comments custom-selected-style">
36 <img src="../assets/images/rect.svg" class="rect" /> 36 <img src="../assets/images/rect.svg" class="rect" />
37 <div class="top-wrp"> 37 <div class="top-wrp">
38 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 38 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
39 </div> 39 </div>
40 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> 40 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
41 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. 41 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
42 <br><br> 42 <br><br>
43 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> 43 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
44 </p> 44 </p>
45 <div class="footer"> 45 <div class="footer">
46 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 46 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
47 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 47 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
48 </div><!-- footer --> 48 </div><!-- footer -->
49 49
50 </div><!-- comments box --> 50 </div><!-- comments box -->
51 </div><!-- single author comments --> 51 </div><!-- single author comments -->
52 52
53 </div><!-- single mobile Right insight --> 53 </div><!-- single mobile Right insight -->
54 </div><!-- Single Mobile Insight --> 54 </div><!-- Single Mobile Insight -->
55 <div class="footer-nav"> 55 <div class="footer-nav">
56 <div class="footer-top white-bg"> 56 <div class="footer-top white-bg">
57 <div class="row"> 57 <div class="row">
58 <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> 58 <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
59 <div class="row h-100p"> 59 <div class="row h-100p">
60 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> 60 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
61 <ul class="top-intro-bt"> 61 <ul class="top-intro-bt">
62 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 62 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
63 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> 63 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> 66 <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
67 <div class="ft-comments-group no-comment-count"> 67 <div class="ft-comments-group no-comment-count">
68 <div class="row"> 68 <div class="row">
69 69
70 <div class="col-12"> 70 <div class="col-12">
71 <img src="../assets/images/u-comments.svg" class="no-comments-img" /> 71 <img src="../assets/images/u-comments.svg" class="no-comments-img" />
72 <div class="comments-detail"> 72 <div class="comments-detail">
73 <span class="no-c-yet">No comments yet</span> 73 <span class="no-c-yet">No comments yet</span>
74 <p>Be the first one to post a comment to start a discussion</p> 74 <p>Be the first one to post a comment to start a discussion</p>
75 </div><!-- comments detail --> 75 </div><!-- comments detail -->
76 </div> </div> 76 </div> </div>
77 </div><!-- comments Group --> 77 </div><!-- comments Group -->
78 </div></div> 78 </div></div>
79 </div> 79 </div>
80 <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> 80 <div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
81 81
82 <div class="comment-frm no-c-frm"> 82 <div class="comment-frm no-c-frm">
83 <div class="row"> 83 <div class="row">
84 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 84 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
85 <div class="form-group frm-wdth"> 85 <div class="form-group frm-wdth">
86 <input type="text" class="form-control" placeholder="Something on your mind?" id=""> 86 <input type="text" class="form-control" placeholder="Something on your mind?" id="">
87 </div></div> 87 </div></div>
88 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 88 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
89 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> 89 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
90 </div> 90 </div>
91 </div><!-- comment from --> 91 </div><!-- comment from -->
92 </div> </div></div> 92 </div> </div></div>
93 </div><!-- footer top --> 93 </div><!-- footer top -->
94 <div class="footer-bottom"> 94 <div class="footer-bottom">
95 <ul> 95 <ul>
96 <li class="active"></li> 96 <li class="active"></li>
97 <li></li> 97 <li></li>
98 </ul> 98 </ul>
99 </div><!-- footer top --> 99 </div><!-- footer top -->
100 </div><!-- footer --> 100 </div><!-- footer -->
101 101
102 </div> 102 </div>
103 <!-- body wrapper --> 103 <!-- body wrapper -->
104 </div> 104 </div>
105 <!-- main wrapper --> 105 <!-- main wrapper -->
106 </main> 106 </main>
107 </template> 107 </template>
108 108
109 <script> 109 <script>
110 import Vue from "vue"; 110 import Vue from "vue";
111 import router from "../router"; 111 import router from "../router";
112 112
113 export default { 113 export default {
114 name: "SingleScreengrabOneInsight", 114 name: "SingleScreengrabOneInsight",
115 115
116 data() { 116 data() {
117 return {}; 117 return {};
118 }, 118 },
119 mounted() {}, 119 mounted() {},
120 methods: { 120 methods: {
121 goToLogin() { 121 goToLogin() {
122 this.$router.push("/login"); 122 this.$router.push("/login");
123 }, 123 },
124 goToSignUp() { 124 goToSignUp() {
125 this.$router.push("/"); 125 this.$router.push("/");
126 }, 126 },
127 127
128 }, 128 },
129 }; 129 };
130 </script> 130 </script>
131 131
src/components/SingleWebScreenInsightOne.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="s-web-screen-wrp"> 18 <div class="s-web-screen-wrp">
19 19
20 <div class="single-left-Insight-comments web-comment-spc"> 20 <div class="single-left-Insight-comments web-comment-spc">
21 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> 21 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22 <div class="single-author-li-comments "> 22 <div class="single-author-li-comments ">
23 <div class="a-intro-comments custom-c-style"> 23 <div class="a-intro-comments custom-c-style">
24 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 24 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
25 <ul class="rly-comment-set"> 25 <ul class="rly-comment-set">
26 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 26 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 27 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28 </ul> 28 </ul>
29 </div><!-- comments box --> 29 </div><!-- comments box -->
30 </div><!-- single author comments --> 30 </div><!-- single author comments -->
31 31
32 </div><!-- single mobile Left insight --> 32 </div><!-- single mobile Left insight -->
33 <div class="c-product-insight-wrp web-ps-insight-spc"> 33 <div class="c-product-insight-wrp web-ps-insight-spc">
34 <div class="single-author-li-comments "> 34 <div class="single-author-li-comments ">
35 <div class="a-intro-comments custom-selected-style"> 35 <div class="a-intro-comments custom-selected-style">
36 <img src="../assets/images/rect.svg" class="rect" /> 36 <img src="../assets/images/rect.svg" class="rect" />
37 <div class="top-wrp"> 37 <div class="top-wrp">
38 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 38 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
39 </div> 39 </div>
40 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> 40 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
41 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. 41 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
42 <br><br> 42 <br><br>
43 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> 43 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
44 </p> 44 </p>
45 <div class="footer"> 45 <div class="footer">
46 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 46 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
47 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 47 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
48 </div><!-- footer --> 48 </div><!-- footer -->
49 49
50 </div><!-- comments box --> 50 </div><!-- comments box -->
51 </div><!-- single author comments --> 51 </div><!-- single author comments -->
52 52
53 </div><!-- single mobile Right insight --> 53 </div><!-- single mobile Right insight -->
54 </div><!-- Single Mobile Insight --> 54 </div><!-- Single Mobile Insight -->
55 <div class="footer-nav"> 55 <div class="footer-nav">
56 <div class="footer-top white-bg"> 56 <div class="footer-top white-bg">
57 <div class="row"> 57 <div class="row">
58 <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> 58 <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
59 <div class="row h-100p"> 59 <div class="row h-100p">
60 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> 60 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
61 <ul class="top-intro-bt"> 61 <ul class="top-intro-bt">
62 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 62 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
63 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> 63 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
64 </ul> 64 </ul>
65 </div> 65 </div>
66 <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> 66 <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
67 <div class="ft-comments-group no-comment-count"> 67 <div class="ft-comments-group no-comment-count">
68 <div class="row"> 68 <div class="row">
69 69
70 <div class="col-12"> 70 <div class="col-12">
71 <img src="../assets/images/u-comments.svg" class="no-comments-img" /> 71 <img src="../assets/images/u-comments.svg" class="no-comments-img" />
72 <div class="comments-detail"> 72 <div class="comments-detail">
73 <span class="no-c-yet">No comments yet</span> 73 <span class="no-c-yet">No comments yet</span>
74 <p>Be the first one to post a comment to start a discussion</p> 74 <p>Be the first one to post a comment to start a discussion</p>
75 </div><!-- comments detail --> 75 </div><!-- comments detail -->
76 </div> </div> 76 </div> </div>
77 </div><!-- comments Group --> 77 </div><!-- comments Group -->
78 </div></div> 78 </div></div>
79 </div> 79 </div>
80 <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> 80 <div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
81 81
82 <div class="comment-frm no-c-frm"> 82 <div class="comment-frm no-c-frm">
83 <div class="row"> 83 <div class="row">
84 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 84 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
85 <div class="form-group frm-wdth"> 85 <div class="form-group frm-wdth">
86 <input type="text" class="form-control" placeholder="Something on your mind?" id=""> 86 <input type="text" class="form-control" placeholder="Something on your mind?" id="">
87 </div></div> 87 </div></div>
88 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 88 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
89 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> 89 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
90 </div> 90 </div>
91 </div><!-- comment from --> 91 </div><!-- comment from -->
92 </div> </div></div> 92 </div> </div></div>
93 </div><!-- footer top --> 93 </div><!-- footer top -->
94 <div class="footer-bottom"> 94 <div class="footer-bottom">
95 <ul> 95 <ul>
96 <li class="active"></li> 96 <li class="active"></li>
97 <li></li> 97 <li></li>
98 </ul> 98 </ul>
99 </div><!-- footer top --> 99 </div><!-- footer top -->
100 </div><!-- footer --> 100 </div><!-- footer -->
101 101
102 </div> 102 </div>
103 <!-- body wrapper --> 103 <!-- body wrapper -->
104 </div> 104 </div>
105 <!-- main wrapper --> 105 <!-- main wrapper -->
106 </main> 106 </main>
107 </template> 107 </template>
108 108
109 <script> 109 <script>
110 import Vue from "vue"; 110 import Vue from "vue";
111 import router from "../router"; 111 import router from "../router";
112 112
113 export default { 113 export default {
114 name: "SingleWebScreenInsightOne", 114 name: "SingleWebScreenInsightOne",
115 115
116 data() { 116 data() {
117 return {}; 117 return {};
118 }, 118 },
119 mounted() {}, 119 mounted() {},
120 methods: { 120 methods: {
121 goToLogin() { 121 goToLogin() {
122 this.$router.push("/login"); 122 this.$router.push("/login");
123 }, 123 },
124 goToSignUp() { 124 goToSignUp() {
125 this.$router.push("/"); 125 this.$router.push("/");
126 }, 126 },
127 127
128 }, 128 },
129 }; 129 };
130 </script> 130 </script>
131 131
src/components/ToAddYourComment.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="single-mobileInsight"> 18 <div class="single-mobileInsight">
19 <img src="../assets/images/slide.png" class="slide-img" /> 19 <img src="../assets/images/slide.png" class="slide-img" />
20 <div class="single-left-Insight-comments"> 20 <div class="single-left-Insight-comments">
21 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" /> 21 <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22 <div class="single-author-li-comments"> 22 <div class="single-author-li-comments">
23 <div class="a-intro-comments custom-c-style"> 23 <div class="a-intro-comments custom-c-style">
24 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 24 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
25 <ul class="rly-comment-set"> 25 <ul class="rly-comment-set">
26 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 26 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 27 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28 </ul> 28 </ul>
29 </div><!-- comments box --> 29 </div><!-- comments box -->
30 </div><!-- single author comments --> 30 </div><!-- single author comments -->
31 <div class="single-author-li-comments"> 31 <div class="single-author-li-comments">
32 <div class="a-intro-comments custom-c-style"> 32 <div class="a-intro-comments custom-c-style">
33 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p> 33 <p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
34 <ul class="rly-comment-set"> 34 <ul class="rly-comment-set">
35 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 35 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
36 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 36 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
37 </ul> 37 </ul>
38 </div><!-- comments box --> 38 </div><!-- comments box -->
39 </div><!-- single author comments --> 39 </div><!-- single author comments -->
40 </div><!-- single mobile Left insight --> 40 </div><!-- single mobile Left insight -->
41 <div class="c-product-insight-wrp add_comments-spc_r"> 41 <div class="c-product-insight-wrp add_comments-spc_r">
42 <div class="single-author-li-comments "> 42 <div class="single-author-li-comments ">
43 <div class="a-intro-comments custom-selected-style"> 43 <div class="a-intro-comments custom-selected-style">
44 <img src="../assets/images/rect.svg" class="rect" /> 44 <img src="../assets/images/rect.svg" class="rect" />
45 <div class="top-wrp"> 45 <div class="top-wrp">
46 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 46 PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
47 </div> 47 </div>
48 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div> 48 <div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
49 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product. 49 <p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
50 <br><br> 50 <br><br>
51 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong> 51 When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
52 </p> 52 </p>
53 <div class="footer"> 53 <div class="footer">
54 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 54 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
55 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 55 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
56 </div><!-- footer --> 56 </div><!-- footer -->
57 57
58 </div><!-- comments box --> 58 </div><!-- comments box -->
59 </div><!-- single author comments --> 59 </div><!-- single author comments -->
60 <a href="javascript:void(0);" class="add-comments-bt"><img src="../assets/images/rotate.svg" /> To add your comment</a> 60 <a href="javascript:void(0);" class="add-comments-bt"><img src="../assets/images/rotate.svg" /> To add your comment</a>
61 </div><!-- single mobile Right insight --> 61 </div><!-- single mobile Right insight -->
62 </div><!-- Single Mobile Insight --> 62 </div><!-- Single Mobile Insight -->
63 <div class="footer-nav"> 63 <div class="footer-nav">
64 <div class="footer-top"> 64 <div class="footer-top">
65 <div class="row"> 65 <div class="row">
66 <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> 66 <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
67 <div class="row h-100p"> 67 <div class="row h-100p">
68 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> 68 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
69 <ul class="top-intro-bt"> 69 <ul class="top-intro-bt">
70 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 70 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
71 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Next</a></li> 71 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Next</a></li>
72 </ul> 72 </ul>
73 </div> 73 </div>
74 74
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div><!-- footer top --> 78 </div><!-- footer top -->
79 <div class="footer-bottom"> 79 <div class="footer-bottom">
80 <ul> 80 <ul>
81 <li class=""></li> 81 <li class=""></li>
82 <li></li> 82 <li></li>
83 </ul> 83 </ul>
84 </div><!-- footer top --> 84 </div><!-- footer top -->
85 </div><!-- footer --> 85 </div><!-- footer -->
86 86
87 </div> 87 </div>
88 <!-- body wrapper --> 88 <!-- body wrapper -->
89 </div> 89 </div>
90 <!-- main wrapper --> 90 <!-- main wrapper -->
91 </main> 91 </main>
92 </template> 92 </template>
93 93
94 <script> 94 <script>
95 import Vue from "vue"; 95 import Vue from "vue";
96 import router from "../router"; 96 import router from "../router";
97 97
98 export default { 98 export default {
99 name: "ToAddYourComment", 99 name: "ToAddYourComment",
100 100
101 data() { 101 data() {
102 return {}; 102 return {};
103 }, 103 },
104 mounted() {}, 104 mounted() {},
105 methods: { 105 methods: {
106 goToLogin() { 106 goToLogin() {
107 this.$router.push("/login"); 107 this.$router.push("/login");
108 }, 108 },
109 goToSignUp() { 109 goToSignUp() {
110 this.$router.push("/"); 110 this.$router.push("/");
111 }, 111 },
112 112
113 }, 113 },
114 }; 114 };
115 </script> 115 </script>
116 116
src/components/TwoScreenWithInsight.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 <!-- chat box --> 8 <!-- chat box -->
9 <div class="bounce-board-wrp" id="cht_box_close"> 9 <div class="bounce-board-wrp" id="cht_box_close">
10 <div class="inner-wrp-bc"> 10 <div class="inner-wrp-bc">
11 <div class="bc-top-head"> 11 <div class="bc-top-head">
12 <span class="bc-head"> 12 <span class="bc-head">
13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
14 </span> 14 </span>
15 <div class="action-sort"> 15 <div class="action-sort">
16 <span class="sort-by">SORT BY</span> 16 <!-- <span class="sort-by">SORT BY</span>
17 <div class="btn-group"> 17 <div class="btn-group">
18 <button 18 <button
19 type="button" 19 type="button"
20 class="bc-sort-list dropdown-toggle" 20 class="bc-sort-list dropdown-toggle"
21 data-toggle="dropdown" 21 data-toggle="dropdown"
22 aria-haspopup="true" 22 aria-haspopup="true"
23 aria-expanded="false" 23 aria-expanded="false"
24 > 24 >
25 BEST 25 BEST
26 </button> 26 </button>
27 <div class="dropdown-menu short_by"> 27 <div class="dropdown-menu short_by">
28 <a class="dropdown-item" href="javasript:void(0);" 28 <a class="dropdown-item" href="javasript:void(0);"
29 >BEST 1</a 29 >BEST 1</a
30 > 30 >
31 <a class="dropdown-item" href="javasript:void(0);" 31 <a class="dropdown-item" href="javasript:void(0);"
32 >BEST 2</a 32 >BEST 2</a
33 > 33 >
34 <a class="dropdown-item" href="javasript:void(0);" 34 <a class="dropdown-item" href="javasript:void(0);"
35 >BEST 3</a 35 >BEST 3</a
36 > 36 >
37 </div> 37 </div>
38 </div> 38 </div> -->
39 <a 39 <a
40 href="javasript:void(0);" 40 href="javasript:void(0);"
41 @click="chtbox_close" 41 @click="chtbox_close"
42 class="close_chat_bx" 42 class="close_chat_bx"
43 ><img src="../assets/images/close.png" alt="close" /></a 43 ><img src="../assets/images/close.png" alt="close" /></a
44 ><!-- close --> 44 ><!-- close -->
45 </div> 45 </div>
46 <!-- action sort --> 46 <!-- action sort -->
47 </div> 47 </div>
48 <!-- top head --> 48 <!-- top head -->
49 <div class="bounce-board-body"> 49 <div class="bounce-board-body">
50 <!-- all user comments --> 50 <!-- all user comments -->
51 <ul class="bounced-user-comments"> 51 <ul class="bounced-user-comments">
52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53 <div class="bc_brd_l"></div> 53 <div class="bc_brd_l"></div>
54 <!-- border --> 54 <!-- border -->
55 <div class="parent-full-width" v-if="cmnt.comment"> 55 <div class="parent-full-width" v-if="cmnt.comment">
56 <div class="full-width"> 56 <div class="full-width">
57 <div class="b-user-head"> 57 <div class="b-user-head">
58 <img :src="cmnt.user.profilePic" /> 58 <img :src="cmnt.user.profilePic" />
59 <span class="head-content">{{ cmnt.user.name }} </span> 59 <span class="head-content">{{ cmnt.user.name }} </span>
60 <ul> 60 <ul>
61 <li> 61 <li>
62 <span></span 62 <span></span
63 ><img src="../assets/images/u-info-icon.png" />{{ 63 ><img src="../assets/images/u-info-icon.png" />{{
64 cmnt.user.karmaPoints 64 cmnt.user.karmaPoints
65 }}pts 65 }}pts
66 </li> 66 </li>
67 <li> 67 <li>
68 <span></span>{{ dateGenerator(cmnt.createdAt) }} 68 <span></span>{{ dateGenerator(cmnt.createdAt) }}
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </div> 71 </div>
72 <!-- header --> 72 <!-- header -->
73 <p> 73 <p>
74 {{ cmnt.comment }} 74 {{ cmnt.comment }}
75 </p> 75 </p>
76 <div class="joined_wrapper"> 76 <div class="joined_wrapper">
77 <ul class="joined-info info_bc_spc"> 77 <ul class="joined-info info_bc_spc">
78 <li> 78 <li>
79 <img 79 <img
80 src="../assets/images/heart.svg" 80 src="../assets/images/heart.svg"
81 v-if="cmnt.like == false" 81 v-if="cmnt.like == false"
82 @click="likeComment(true, cmnt._id)" 82 @click="likeComment(true, cmnt._id)"
83 class="cursor-pointer" 83 class="cursor-pointer"
84 /> 84 />
85 <img 85 <img
86 src="../assets/images/purple-heart.png" 86 src="../assets/images/purple-heart.png"
87 v-if="cmnt.like == true" 87 v-if="cmnt.like == true"
88 @click="likeComment(false, cmnt._id)" 88 @click="likeComment(false, cmnt._id)"
89 class="cursor-pointer" 89 class="cursor-pointer"
90 /> 90 />
91 </li> 91 </li>
92 <li> 92 <li>
93 <a href="javasript:void(0);"> 93 <a href="javasript:void(0);">
94 {{ cmnt.likes.length }}</a 94 {{ cmnt.likes.length }}</a
95 > 95 >
96 </li> 96 </li>
97 <li class="comment-spc"> 97 <li class="comment-spc">
98 <img src="../assets/images/purple-comment.png" /> 98 <img src="../assets/images/purple-comment.png" />
99 </li> 99 </li>
100 <li> 100 <li>
101 <a href="javasript:void(0);"> 101 <a href="javasript:void(0);">
102 {{ cmnt.children.length }}</a 102 {{ cmnt.children.length }}</a
103 > 103 >
104 </li> 104 </li>
105 </ul> 105 </ul>
106 <div class="add_rply" v-if="!cmnt.childInput"> 106 <div class="add_rply" v-if="!cmnt.childInput">
107 <input 107 <input
108 type="text" 108 type="text"
109 @click="eachRply(cmnt)" 109 @click="eachRply(cmnt)"
110 class="add_Rply_C" 110 class="add_Rply_C"
111 placeholder="Add your reply" 111 placeholder="Add your reply"
112 /> 112 />
113 </div> 113 </div>
114 <!-- rly form --> 114 <!-- rly form -->
115 </div> 115 </div>
116 <!-- joined wrapper --> 116 <!-- joined wrapper -->
117 </div> 117 </div>
118 <!-- full width --> 118 <!-- full width -->
119 </div> 119 </div>
120 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 120 <div class="comments-footer each-ft" v-if="cmnt.childInput">
121 <textarea v-model="comment" id="childInput"></textarea> 121 <textarea v-model="comment" id="childInput"></textarea>
122 <div class="comments-footer-wrp"> 122 <div class="comments-footer-wrp">
123 <a 123 <a
124 @click="createChildComment(cmnt)" 124 @click="createChildComment(cmnt)"
125 href="javasript:void(0);" 125 href="javasript:void(0);"
126 class="add_comments_chat reply-Wdth" 126 class="add_comments_chat reply-Wdth"
127 >Reply</a 127 >Reply</a
128 > 128 >
129 <a 129 <a
130 href="javasript:void(0);" 130 href="javasript:void(0);"
131 class="discard_bt" 131 class="discard_bt"
132 @click="discardRply(cmnt)" 132 @click="discardRply(cmnt)"
133 ><img src="../assets/images/discard.svg" 133 ><img src="../assets/images/discard.svg"
134 /></a> 134 /></a>
135 </div> 135 </div>
136 </div> 136 </div>
137 <!-- parent --> 137 <!-- parent -->
138 <div 138 <div
139 class="child-full-width" 139 class="child-full-width"
140 v-for="(childCmnt, i) in cmnt.children" 140 v-for="(childCmnt, i) in cmnt.children"
141 :key="i" 141 :key="i"
142 > 142 >
143 <div class="full-width"> 143 <div class="full-width">
144 <div class="b-user-head"> 144 <div class="b-user-head">
145 <img :src="childCmnt.user.profilePic" /> 145 <img :src="childCmnt.user.profilePic" />
146 <span class="head-content" 146 <span class="head-content"
147 >{{ childCmnt.user.name }} 147 >{{ childCmnt.user.name }}
148 </span> 148 </span>
149 <ul> 149 <ul>
150 <li> 150 <li>
151 <span></span 151 <span></span
152 ><img src="../assets/images/u-info-icon.png" />{{ 152 ><img src="../assets/images/u-info-icon.png" />{{
153 childCmnt.user.karmaPoints 153 childCmnt.user.karmaPoints
154 }}pts 154 }}pts
155 </li> 155 </li>
156 <li> 156 <li>
157 <span></span 157 <span></span
158 >{{ dateGenerator(childCmnt.createdAt) }} 158 >{{ dateGenerator(childCmnt.createdAt) }}
159 </li> 159 </li>
160 </ul> 160 </ul>
161 </div> 161 </div>
162 <p> 162 <p>
163 {{ childCmnt.comment }} 163 {{ childCmnt.comment }}
164 </p> 164 </p>
165 <div class="joined_wrapper"> 165 <div class="joined_wrapper">
166 <ul class="joined-info info_bc_spc"> 166 <ul class="joined-info info_bc_spc">
167 <li> 167 <li>
168 <img 168 <img
169 src="../assets/images/heart.svg" 169 src="../assets/images/heart.svg"
170 v-if="childCmnt.like == false" 170 v-if="childCmnt.like == false"
171 @click="likeComment(true, childCmnt._id)" 171 @click="likeComment(true, childCmnt._id)"
172 class="cursor-pointer" 172 class="cursor-pointer"
173 /> 173 />
174 <img 174 <img
175 src="../assets/images/purple-heart.png" 175 src="../assets/images/purple-heart.png"
176 v-if="childCmnt.like == true" 176 v-if="childCmnt.like == true"
177 @click="likeComment(false, childCmnt._id)" 177 @click="likeComment(false, childCmnt._id)"
178 class="cursor-pointer" 178 class="cursor-pointer"
179 /> 179 />
180 </li> 180 </li>
181 <li> 181 <li>
182 <a href="javasript:void(0);"> 182 <a href="javasript:void(0);">
183 {{ childCmnt.likes.length }}</a 183 {{ childCmnt.likes.length }}</a
184 > 184 >
185 </li> 185 </li>
186 </ul> 186 </ul>
187 </div> 187 </div>
188 </div> 188 </div>
189 </div> 189 </div>
190 <!-- eree --> 190 <!-- eree -->
191 191
192 <!-- comments footer --> 192 <!-- comments footer -->
193 </li> 193 </li>
194 </ul> 194 </ul>
195 </div> 195 </div>
196 <!-- bounce board body --> 196 <!-- bounce board body -->
197 <div class="comments-footer" v-if="parentInput"> 197 <div class="comments-footer" v-if="parentInput">
198 <textarea v-model="comment"></textarea> 198 <textarea v-model="comment"></textarea>
199 <div class="comments-footer-wrp"> 199 <div class="comments-footer-wrp">
200 <a 200 <a
201 href="javasript:void(0);" 201 href="javasript:void(0);"
202 class="add_comments_chat" 202 class="add_comments_chat"
203 @click="createComment" 203 @click="createComment"
204 ><img src="../assets/images/add-comment.svg" /> Comment</a 204 ><img src="../assets/images/add-comment.svg" /> Comment</a
205 > 205 >
206 </div> 206 </div>
207 </div> 207 </div>
208 <!-- comments footer --> 208 <!-- comments footer -->
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- bounceboard wrp --> 211 <!-- bounceboard wrp -->
212 <!-- chat box --> 212 <!-- chat box -->
213 213
214 <div class="allMWrp"> 214 <div class="allMWrp">
215 <div class="mobile-screen-one p-left"> 215 <div class="mobile-screen-one p-left">
216 <div class="top-area-blank"></div> 216 <div class="top-area-blank"></div>
217 <div class="m-screen-comments"> 217 <div class="m-screen-comments">
218 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 218 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
219 <div class="a-intro-comments"> 219 <div class="a-intro-comments">
220 <p> 220 <p>
221 {{commentList[0].comment}} 221 {{commentList[0].comment}}
222 </p> 222 </p>
223 <ul class="rly-comment-set"> 223 <ul class="rly-comment-set">
224 <!-- like/dislike --> 224 <!-- like/dislike -->
225 <li> 225 <li>
226 <img 226 <img
227 src="../assets/images/heart.svg" 227 src="../assets/images/heart.svg"
228 v-if="commentList[0].like == false" 228 v-if="commentList[0].like == false"
229 @click="likeComment(true, commentList[0]._id)" 229 @click="likeComment(true, commentList[0]._id)"
230 class="cursor-pointer" 230 class="cursor-pointer"
231 /> 231 />
232 <img 232 <img
233 src="../assets/images/purple-heart.png" 233 src="../assets/images/purple-heart.png"
234 v-if="commentList[0].like == true" 234 v-if="commentList[0].like == true"
235 @click="likeComment(false, commentList[0]._id)" 235 @click="likeComment(false, commentList[0]._id)"
236 class="cursor-pointer" 236 class="cursor-pointer"
237 /> 237 />
238 <a href="javascript:void(0);">{{ 238 <a href="javascript:void(0);">{{
239 commentList[0].likes.length 239 commentList[0].likes.length
240 }}</a> 240 }}</a>
241 </li> 241 </li>
242 <!-- like/dislike ends --> 242 <!-- like/dislike ends -->
243 <li> 243 <li>
244 <img src="../assets/images/rply.svg" /> 244 <img src="../assets/images/rply.svg" />
245 <a href="javascript:void(0);" @click="reply_cht_box(0)" 245 <a href="javascript:void(0);" @click="reply_cht_box(0)"
246 >Reply</a 246 >Reply</a
247 > 247 >
248 </li> 248 </li>
249 </ul> 249 </ul>
250 </div> 250 </div>
251 <!-- comments box --> 251 <!-- comments box -->
252 </div> 252 </div>
253 <!-- single author comments --> 253 <!-- single author comments -->
254 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 254 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
255 <div class="a-intro-comments"> 255 <div class="a-intro-comments">
256 <p> 256 <p>
257 {{commentList[1].comment}} 257 {{commentList[1].comment}}
258 </p> 258 </p>
259 <ul class="rly-comment-set"> 259 <ul class="rly-comment-set">
260 <!-- like/dislike --> 260 <!-- like/dislike -->
261 <li> 261 <li>
262 <img 262 <img
263 src="../assets/images/heart.svg" 263 src="../assets/images/heart.svg"
264 v-if="commentList[1].like == false" 264 v-if="commentList[1].like == false"
265 @click="likeComment(true, commentList[1]._id)" 265 @click="likeComment(true, commentList[1]._id)"
266 class="cursor-pointer" 266 class="cursor-pointer"
267 /> 267 />
268 <img 268 <img
269 src="../assets/images/purple-heart.png" 269 src="../assets/images/purple-heart.png"
270 v-if="commentList[1].like == true" 270 v-if="commentList[1].like == true"
271 @click="likeComment(false, commentList[1]._id)" 271 @click="likeComment(false, commentList[1]._id)"
272 class="cursor-pointer" 272 class="cursor-pointer"
273 /> 273 />
274 <a href="javascript:void(0);">{{ 274 <a href="javascript:void(0);">{{
275 commentList[1].likes.length 275 commentList[1].likes.length
276 }}</a> 276 }}</a>
277 </li> 277 </li>
278 <!-- like/dislike ends --> 278 <!-- like/dislike ends -->
279 <li> 279 <li>
280 <img src="../assets/images/rply.svg" /> 280 <img src="../assets/images/rply.svg" />
281 <a href="javascript:void(0);" @click="reply_cht_box(1)" 281 <a href="javascript:void(0);" @click="reply_cht_box(1)"
282 >Reply</a 282 >Reply</a
283 > 283 >
284 </li> 284 </li>
285 </ul> 285 </ul>
286 </div> 286 </div>
287 <!-- comments box --> 287 <!-- comments box -->
288 </div> 288 </div>
289 <!-- single author comments --> 289 <!-- single author comments -->
290 </div> 290 </div>
291 <!-- comments --> 291 <!-- comments -->
292 <img 292 <img
293 :src="currentSlideData.payload.metaData.mobileImage1" 293 :src="currentSlideData.payload.metaData.mobileImage1"
294 class="m-screen" 294 class="m-screen"
295 /> 295 />
296 <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> --> 296 <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->
297 <img 297 <img
298 :src="currentSlideData.payload.metaData.authorImage" 298 :src="currentSlideData.payload.metaData.authorImage"
299 class="user-photo-bottom" 299 class="user-photo-bottom"
300 /> 300 />
301 </div> 301 </div>
302 <!-- mobile screen one --> 302 <!-- mobile screen one -->
303 <div class="mobile-screen-one p-right"> 303 <div class="mobile-screen-one p-right">
304 <div class="top-area-blank"></div> 304 <div class="top-area-blank"></div>
305 <div class="view-ticket-wrp-ps"> 305 <div class="view-ticket-wrp-ps">
306 <div class="single-author-li-comments"> 306 <div class="single-author-li-comments">
307 <div class="a-intro-comments custom-selected-style"> 307 <div class="a-intro-comments custom-selected-style">
308 <img src="../assets/images/rect.svg" class="rect" /> 308 <img src="../assets/images/rect.svg" class="rect" />
309 309
310 <div class="top-wrp"> 310 <div class="top-wrp">
311 {{ currentSlideData.payload.insight.tag }} Insight 311 {{ currentSlideData.payload.insight.tag }} Insight
312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 312 <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
313 </div> 313 </div>
314 <div class="top-head"> 314 <div class="top-head">
315 {{ currentSlideData.payload.insight.title }} 315 {{ currentSlideData.payload.insight.title }}
316 </div> 316 </div>
317 <p>{{ currentSlideData.payload.insight.description }}</p> 317 <p>{{ currentSlideData.payload.insight.description }}</p>
318 <div class="footer"> 318 <div class="footer">
319 <a href="javascript:void(0);" class="cit-16" 319 <a href="javascript:void(0);" class="cit-16"
320 >{{ 320 >{{
321 currentSlideData.payload.insight.citations.length 321 currentSlideData.payload.insight.citations.length
322 }} 322 }}
323 Citations</a 323 Citations</a
324 > 324 >
325 <a href="javascript:void(0);" class="ft-share" 325 <!-- <a href="javascript:void(0);" class="ft-share"
326 ><img src="../assets/images/reply-red.svg" /> Share from 326 ><img src="../assets/images/reply-red.svg" /> Share from
327 library</a 327 library</a
328 > 328 > -->
329 </div> 329 </div>
330 <!-- footer --> 330 <!-- footer -->
331 </div> 331 </div>
332 <!-- comments box --> 332 <!-- comments box -->
333 </div> 333 </div>
334 <!-- single author comments --> 334 <!-- single author comments -->
335 </div> 335 </div>
336 <!-- comments --> 336 <!-- comments -->
337 <!-- <img src="../assets/images/slide2.png" class="m-screen" /> --> 337 <!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->
338 <img 338 <img
339 :src="currentSlideData.payload.metaData.mobileImage2" 339 :src="currentSlideData.payload.metaData.mobileImage2"
340 class="m-screen" 340 class="m-screen"
341 /> 341 />
342 </div> 342 </div>
343 <!-- mobile screen Two --> 343 <!-- mobile screen Two -->
344 </div> 344 </div>
345 <div class="footer-nav"> 345 <div class="footer-nav">
346 <div class="footer-top white-bg"> 346 <div class="footer-top white-bg">
347 <div class="row"> 347 <div class="row">
348 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 348 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
349 <div class="row h-100p"> 349 <div class="row h-100p">
350 <div 350 <div
351 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 351 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
352 > 352 >
353 <div class="ft-comments-group testi-photos-ct"> 353 <div class="ft-comments-group testi-photos-ct">
354 <div class="c-with-photos"> 354 <div class="c-with-photos">
355 <span class="count-comments" 355 <span class="count-comments"
356 >{{ getLastcomment("count", commentList) }}+ 356 >{{ getLastcomment("count", commentList) }}+
357 Comments</span 357 Comments</span
358 ><!-- count commets --> 358 ><!-- count commets -->
359 <ul class="comments-photos"> 359 <ul class="comments-photos">
360 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 360 <li><img src="../assets/images/c-photo-1.png" /></li>
361 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 361 <li><img src="../assets/images/c-photo-2.png" /></li>
362 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 362 <li><img src="../assets/images/c-photo-3.png" /></li>
363 </ul> 363 </ul>
364 <!-- comment photos --> 364 <!-- comment photos -->
365 </div> 365 </div>
366 <div class="comments-detail all-c-space"> 366 <div class="comments-detail all-c-space">
367 <span 367 <span
368 >{{ getLastcomment("name", commentList) }} 368 >{{ getLastcomment("name", commentList) }}
369 <a href="javascript:void(0);" @click="open_ct_box" 369 <a href="javascript:void(0);" @click="open_ct_box"
370 >View All</a 370 >View All</a
371 ></span 371 ></span
372 > 372 >
373 <p> 373 <p>
374 <!-- I wonder what the difference between “Dunzo Assistant” 374 <!-- I wonder what the difference between “Dunzo Assistant”
375 and “Pickup and Drop... --> 375 and “Pickup and Drop... -->
376 {{ getLastcomment("msg", commentList) }} 376 {{ getLastcomment("msg", commentList) }}
377 </p> 377 </p>
378 </div> 378 </div>
379 <!-- comments detail --> 379 <!-- comments detail -->
380 </div> 380 </div>
381 <!-- comments Group --> 381 <!-- comments Group -->
382 </div> 382 </div>
383 </div> 383 </div>
384 </div> 384 </div>
385 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 385 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
386 <div class="comment-frm no-c-frm"> 386 <div class="comment-frm no-c-frm">
387 <div class="row"> 387 <div class="row">
388 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 388 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
389 <div class="form-group frm-wdth addfrm-spc"> 389 <div class="form-group frm-wdth addfrm-spc">
390 <input 390 <input
391 type="text" 391 type="text"
392 class="form-control" 392 class="form-control"
393 placeholder="Something on your mind?" 393 placeholder="Something on your mind?"
394 id="open_ct_box" 394 id="open_ct_box"
395 v-model="comment" 395 v-model="comment"
396 /> 396 />
397 </div> 397 </div>
398 </div> 398 </div>
399 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 399 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
400 <a 400 <a
401 href="javascript:void(0);" 401 href="javascript:void(0);"
402 @click="createComment" 402 @click="createComment"
403 class="add-comment" 403 class="add-comment"
404 ><img src="../assets/images/add-comment.svg" /> 404 ><img src="../assets/images/add-comment.svg" />
405 Comment</a 405 Comment</a
406 > 406 >
407 </div> 407 </div>
408 </div> 408 </div>
409 <!-- comment from --> 409 <!-- comment from -->
410 </div> 410 </div>
411 </div> 411 </div>
412 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 412 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
413 <ul class="top-intro-bt"> 413 <ul class="top-intro-bt">
414 <li> 414 <li>
415 <a href="javascript:void(0);" @click="goBack" 415 <a href="javascript:void(0);" @click="goBack"
416 ><img src="../assets/images/skip-prev.svg" /> Prev</a 416 ><img src="../assets/images/skip-prev.svg" /> Prev</a
417 > 417 >
418 </li> 418 </li>
419 <li> 419 <li>
420 <a href="javascript:void(0);" @click="goNext" 420 <a href="javascript:void(0);" @click="goNext"
421 ><img src="../assets/images/skip-next.svg" /> Skip to next 421 ><img src="../assets/images/skip-next.svg" /> Skip to next
422 slide</a 422 slide</a
423 > 423 >
424 </li> 424 </li>
425 </ul> 425 </ul>
426 </div> 426 </div>
427 <!-- buttons list --> 427 <!-- buttons list -->
428 </div> 428 </div>
429 </div> 429 </div>
430 <!-- footer top --> 430 <!-- footer top -->
431 <div class="footer-bottom"> 431 <div class="footer-bottom">
432 <ul> 432 <ul>
433 <li class="active"></li> 433 <li class="active"></li>
434 <li></li> 434 <li></li>
435 </ul> 435 </ul>
436 </div> 436 </div>
437 <!-- footer top --> 437 <!-- footer top -->
438 </div> 438 </div>
439 <!-- footer --> 439 <!-- footer -->
440 </div> 440 </div>
441 <!-- body wrapper --> 441 <!-- body wrapper -->
442 </div> 442 </div>
443 <!-- main wrapper --> 443 <!-- main wrapper -->
444 </main> 444 </main>
445 </template> 445 </template>
446 446
447 <script> 447 <script>
448 import Vue from "vue"; 448 import Vue from "vue";
449 import router from "../router"; 449 import router from "../router";
450 import axios from "axios"; 450 import axios from "axios";
451 import moment from "moment"; 451 import moment from "moment";
452 import Header from "./Header"; 452 import Header from "./Header";
453 453
454 export default { 454 export default {
455 components: { 455 components: {
456 Header: Header, 456 Header: Header,
457 }, 457 },
458 name: "TwoScreenWithInsight", 458 name: "TwoScreenWithInsight",
459 data() { 459 data() {
460 return { 460 return {
461 allSlide: [], 461 allSlide: [],
462 currentSlideIndex: null, 462 currentSlideIndex: null,
463 currentSlideData: null, 463 currentSlideData: null,
464 // 464 //
465 usertoken: null, 465 usertoken: null,
466 commentList: [], 466 commentList: [],
467 comment: null, 467 comment: null,
468 parentInput: true, 468 parentInput: true,
469 }; 469 };
470 }, 470 },
471 mounted() { 471 mounted() {
472 var allSlideData = localStorage.getItem( 472 var allSlideData = localStorage.getItem(
473 "spotlight_slide" + this.$route.params.caseStudyId 473 "spotlight_slide" + this.$route.params.caseStudyId
474 ); 474 );
475 if (allSlideData) { 475 if (allSlideData) {
476 this.allSlide = JSON.parse(allSlideData); 476 this.allSlide = JSON.parse(allSlideData);
477 this.getCurrentSlideData(); 477 this.getCurrentSlideData();
478 } 478 }
479 var userdata = localStorage.getItem("spotlight_usertoken"); 479 var userdata = localStorage.getItem("spotlight_usertoken");
480 if (userdata) { 480 if (userdata) {
481 userdata = JSON.parse(userdata); 481 userdata = JSON.parse(userdata);
482 this.usertoken = userdata.token; 482 this.usertoken = userdata.token;
483 this.getComment(); 483 this.getComment();
484 } 484 }
485 }, 485 },
486 methods: { 486 methods: {
487 getCurrentSlideData() { 487 getCurrentSlideData() {
488 var i = this.allSlide.findIndex( 488 var i = this.allSlide.findIndex(
489 (slide_) => slide_.slideId == this.$route.params.slideId 489 (slide_) => slide_.slideId == this.$route.params.slideId
490 ); 490 );
491 this.currentSlideIndex = i; 491 this.currentSlideIndex = i;
492 this.currentSlideData = this.allSlide[i]; 492 this.currentSlideData = this.allSlide[i];
493 console.log("currentSlideData", this.currentSlideData); 493 console.log("currentSlideData", this.currentSlideData);
494 }, 494 },
495 goNext() { 495 goNext() {
496 this.currentSlideIndex++; 496 this.currentSlideIndex++;
497 this.$router.push({ 497 this.$router.push({
498 name: this.allSlide[this.currentSlideIndex].ur, 498 name: this.allSlide[this.currentSlideIndex].ur,
499 params: { 499 params: {
500 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 500 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
501 slideId: this.allSlide[this.currentSlideIndex].slideId, 501 slideId: this.allSlide[this.currentSlideIndex].slideId,
502 }, 502 },
503 }); 503 });
504 }, 504 },
505 goBack() { 505 goBack() {
506 this.currentSlideIndex--; 506 this.currentSlideIndex--;
507 this.$router.push({ 507 this.$router.push({
508 name: this.allSlide[this.currentSlideIndex].ur, 508 name: this.allSlide[this.currentSlideIndex].ur,
509 params: { 509 params: {
510 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 510 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
511 slideId: this.allSlide[this.currentSlideIndex].slideId, 511 slideId: this.allSlide[this.currentSlideIndex].slideId,
512 }, 512 },
513 }); 513 });
514 }, 514 },
515 createComment() { 515 createComment() {
516 console.log("===", this.comment); 516 console.log("===", this.comment);
517 var obj = { 517 var obj = {
518 caseStudyId: this.currentSlideData.caseStudyId, 518 caseStudyId: this.currentSlideData.caseStudyId,
519 slideId: this.currentSlideData.slideId, 519 slideId: this.currentSlideData.slideId,
520 comment: this.comment, 520 comment: this.comment,
521 }; 521 };
522 axios 522 axios
523 .post("/bounceBoard/comment", obj, { 523 .post("/bounceBoard/comment", obj, {
524 headers: { 524 headers: {
525 Authorization: "Bearer " + this.usertoken, 525 Authorization: "Bearer " + this.usertoken,
526 }, 526 },
527 }) 527 })
528 .then((response) => { 528 .then((response) => {
529 this.comment = null; 529 this.comment = null;
530 this.getComment(); 530 this.getComment();
531 console.log(response); 531 console.log(response);
532 }) 532 })
533 .catch((error) => { 533 .catch((error) => {
534 if (error.response) { 534 if (error.response) {
535 this.$toaster.error(error.response.data.message); 535 this.$toaster.error(error.response.data.message);
536 } 536 }
537 }); 537 });
538 }, 538 },
539 createChildComment(cmnt) { 539 createChildComment(cmnt) {
540 console.log(cmnt, "===", this.comment); 540 console.log(cmnt, "===", this.comment);
541 var obj = { 541 var obj = {
542 caseStudyId: this.currentSlideData.caseStudyId, 542 caseStudyId: this.currentSlideData.caseStudyId,
543 slideId: this.currentSlideData.slideId, 543 slideId: this.currentSlideData.slideId,
544 comment: this.comment, 544 comment: this.comment,
545 parentId: cmnt._id, 545 parentId: cmnt._id,
546 }; 546 };
547 axios 547 axios
548 .post("/bounceBoard/comment", obj, { 548 .post("/bounceBoard/comment", obj, {
549 headers: { 549 headers: {
550 Authorization: "Bearer " + this.usertoken, 550 Authorization: "Bearer " + this.usertoken,
551 }, 551 },
552 }) 552 })
553 .then((response) => { 553 .then((response) => {
554 this.comment = null; 554 this.comment = null;
555 this.discardRply(cmnt); 555 this.discardRply(cmnt);
556 this.getComment(); 556 this.getComment();
557 console.log(response); 557 console.log(response);
558 }) 558 })
559 .catch((error) => { 559 .catch((error) => {
560 if (error.response) { 560 if (error.response) {
561 this.$toaster.error(error.response.data.message); 561 this.$toaster.error(error.response.data.message);
562 } 562 }
563 }); 563 });
564 }, 564 },
565 getComment() { 565 getComment() {
566 axios 566 axios
567 .get( 567 .get(
568 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 568 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
569 { 569 {
570 headers: { 570 headers: {
571 Authorization: "Bearer " + this.usertoken, 571 Authorization: "Bearer " + this.usertoken,
572 }, 572 },
573 } 573 }
574 ) 574 )
575 .then((response) => { 575 .then((response) => {
576 console.log(response.data); 576 console.log(response.data);
577 var comments = []; 577 var comments = [];
578 var keys = Object.keys(response.data.data); 578 var keys = Object.keys(response.data.data);
579 response.data.data; 579 response.data.data;
580 keys.forEach((key_) => { 580 keys.forEach((key_) => {
581 comments.push(response.data.data[key_]); 581 comments.push(response.data.data[key_]);
582 }); 582 });
583 comments.forEach((coment_) => { 583 comments.forEach((coment_) => {
584 coment_.childInput = false; 584 coment_.childInput = false;
585 }); 585 });
586 console.log("comments", comments); 586 console.log("comments", comments);
587 this.commentList = comments; 587 this.commentList = comments;
588 }) 588 })
589 .catch((error) => console.log(error)); 589 .catch((error) => console.log(error));
590 }, 590 },
591 dateGenerator(curreDate) { 591 dateGenerator(curreDate) {
592 var todayDate = moment(new Date(), "DD.MM.YYYY"); 592 var todayDate = moment(new Date(), "DD.MM.YYYY");
593 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 593 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
594 var result = todayDate.diff(endDate, "days"); 594 var result = todayDate.diff(endDate, "days");
595 return result; 595 return result;
596 }, 596 },
597 goToLogin() { 597 goToLogin() {
598 this.$router.push("/login"); 598 this.$router.push("/login");
599 }, 599 },
600 goToSignUp() { 600 goToSignUp() {
601 this.$router.push("/"); 601 this.$router.push("/");
602 }, 602 },
603 open(url){ 603 open(url){
604 window.open(url); 604 window.open(url);
605 }, 605 },
606 chtbox_close() { 606 chtbox_close() {
607 $("#cht_box_close").removeClass("cht_close"); 607 $("#cht_box_close").removeClass("cht_close");
608 $("#open_ct_box, .c_hide").show(); 608 $("#open_ct_box, .c_hide").show();
609 $(".footer-top").addClass("white-bg"); 609 $(".footer-top").addClass("white-bg");
610 }, 610 },
611 open_ct_box() { 611 open_ct_box() {
612 $("#cht_box_close").addClass("cht_close"); 612 $("#cht_box_close").addClass("cht_close");
613 $("#open_ct_box, .c_hide").hide(); 613 $("#open_ct_box, .c_hide").hide();
614 $(".footer-top").removeClass("white-bg"); 614 $(".footer-top").removeClass("white-bg");
615 }, 615 },
616 eachRply(cmnt) { 616 eachRply(cmnt) {
617 cmnt.childInput = true; 617 cmnt.childInput = true;
618 this.parentInput = false; 618 this.parentInput = false;
619 this.comment = null; 619 this.comment = null;
620 setTimeout(() => { 620 setTimeout(() => {
621 document.getElementById("childInput").focus(); 621 document.getElementById("childInput").focus();
622 }, 100); 622 }, 100);
623 }, 623 },
624 discardRply(cmnt) { 624 discardRply(cmnt) {
625 cmnt.childInput = false; 625 cmnt.childInput = false;
626 this.parentInput = true; 626 this.parentInput = true;
627 this.comment = null; 627 this.comment = null;
628 }, 628 },
629 reply_cht_box(i) { 629 reply_cht_box(i) {
630 console.log(this.commentList, "cmnt"); 630 console.log(this.commentList, "cmnt");
631 $("#cht_box_close").addClass("cht_close"); 631 $("#cht_box_close").addClass("cht_close");
632 $("#open_ct_box, .c_hide").hide(); 632 $("#open_ct_box, .c_hide").hide();
633 $(".footer-top").removeClass("white-bg"); 633 $(".footer-top").removeClass("white-bg");
634 this.commentList[i].childInput = true; 634 this.commentList[i].childInput = true;
635 this.parentInput = false; 635 this.parentInput = false;
636 this.comment = null; 636 this.comment = null;
637 setTimeout(() => { 637 setTimeout(() => {
638 document.getElementById("childInput").focus(); 638 document.getElementById("childInput").focus();
639 }, 100); 639 }, 100);
640 }, 640 },
641 likeComment(status, id) { 641 likeComment(status, id) {
642 console.log("===", this.comment); 642 console.log("===", this.comment);
643 var obj = { 643 var obj = {
644 commentId: id, 644 commentId: id,
645 like: status, 645 like: status,
646 }; 646 };
647 axios 647 axios
648 .post("/bounceBoard/like", obj, { 648 .post("/bounceBoard/like", obj, {
649 headers: { 649 headers: {
650 Authorization: "Bearer " + this.usertoken, 650 Authorization: "Bearer " + this.usertoken,
651 }, 651 },
652 }) 652 })
653 .then((response) => { 653 .then((response) => {
654 this.getComment(); 654 this.getComment();
655 console.log(response); 655 console.log(response);
656 }) 656 })
657 .catch((error) => { 657 .catch((error) => {
658 if (error.response) { 658 if (error.response) {
659 this.$toaster.error(error.response.data.message); 659 this.$toaster.error(error.response.data.message);
660 } 660 }
661 }); 661 });
662 }, 662 },
663 getLastcomment(flag, commentArray) { 663 getLastcomment(flag, commentArray) {
664 var finalComment = null; 664 var finalComment = null;
665 var totalMessage = 0; 665 var totalMessage = 0;
666 var name = null; 666 var name = null;
667 commentArray.forEach((comment_) => { 667 commentArray.forEach((comment_) => {
668 if (comment_.comment != null) { 668 if (comment_.comment != null) {
669 name = comment_.user.name; 669 name = comment_.user.name;
670 finalComment = comment_.comment; 670 finalComment = comment_.comment;
671 totalMessage++; 671 totalMessage++;
672 } 672 }
673 }); 673 });
674 if (flag == "count") { 674 if (flag == "count") {
675 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 675 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
676 } else if (flag =="name") { 676 } else if (flag =="name") {
677 return (name = name); 677 return (name = name);
678 } else { 678 } else {
679 return finalComment; 679 return finalComment;
680 } 680 }
681 }, 681 },
682 commentExistCheck(i) { 682 commentExistCheck(i) {
683 console.log(this.commentList[i].comment); 683 console.log(this.commentList[i].comment);
684 var returnValue = false; 684 var returnValue = false;
685 if (this.commentList[i].comment) { 685 if (this.commentList[i].comment) {
686 returnValue = true; 686 returnValue = true;
687 } 687 }
688 return returnValue; 688 return returnValue;
689 }, 689 },
690 }, 690 },
691 }; 691 };
692 // 692 //
693 </script> 693 </script>
694 694
src/components/TwoScreenWithoutInsight.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 <!-- chat box --> 8 <!-- chat box -->
9 <div class="bounce-board-wrp" id="cht_box_close"> 9 <div class="bounce-board-wrp" id="cht_box_close">
10 <div class="inner-wrp-bc"> 10 <div class="inner-wrp-bc">
11 <div class="bc-top-head"> 11 <div class="bc-top-head">
12 <span class="bc-head"> 12 <span class="bc-head">
13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
14 </span> 14 </span>
15 <div class="action-sort"> 15 <div class="action-sort">
16 <span class="sort-by">SORT BY</span> 16 <!-- <span class="sort-by">SORT BY</span>
17 <div class="btn-group"> 17 <div class="btn-group">
18 <button 18 <button
19 type="button" 19 type="button"
20 class="bc-sort-list dropdown-toggle" 20 class="bc-sort-list dropdown-toggle"
21 data-toggle="dropdown" 21 data-toggle="dropdown"
22 aria-haspopup="true" 22 aria-haspopup="true"
23 aria-expanded="false" 23 aria-expanded="false"
24 > 24 >
25 BEST 25 BEST
26 </button> 26 </button>
27 <div class="dropdown-menu short_by"> 27 <div class="dropdown-menu short_by">
28 <a class="dropdown-item" href="javasript:void(0);" 28 <a class="dropdown-item" href="javasript:void(0);"
29 >BEST 1</a 29 >BEST 1</a
30 > 30 >
31 <a class="dropdown-item" href="javasript:void(0);" 31 <a class="dropdown-item" href="javasript:void(0);"
32 >BEST 2</a 32 >BEST 2</a
33 > 33 >
34 <a class="dropdown-item" href="javasript:void(0);" 34 <a class="dropdown-item" href="javasript:void(0);"
35 >BEST 3</a 35 >BEST 3</a
36 > 36 >
37 </div> 37 </div>
38 </div> 38 </div> -->
39 <a 39 <a
40 href="javasript:void(0);" 40 href="javasript:void(0);"
41 @click="chtbox_close" 41 @click="chtbox_close"
42 class="close_chat_bx" 42 class="close_chat_bx"
43 ><img src="../assets/images/close.png" alt="close" /></a 43 ><img src="../assets/images/close.png" alt="close" /></a
44 ><!-- close --> 44 ><!-- close -->
45 </div> 45 </div>
46 <!-- action sort --> 46 <!-- action sort -->
47 </div> 47 </div>
48 <!-- top head --> 48 <!-- top head -->
49 <div class="bounce-board-body"> 49 <div class="bounce-board-body">
50 <!-- all user comments --> 50 <!-- all user comments -->
51 <ul class="bounced-user-comments"> 51 <ul class="bounced-user-comments">
52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53 <div class="bc_brd_l"></div> 53 <div class="bc_brd_l"></div>
54 <!-- border --> 54 <!-- border -->
55 <div class="parent-full-width" v-if="cmnt.comment"> 55 <div class="parent-full-width" v-if="cmnt.comment">
56 <div class="full-width"> 56 <div class="full-width">
57 <div class="b-user-head"> 57 <div class="b-user-head">
58 <img :src="cmnt.user.profilePic" /> 58 <img :src="cmnt.user.profilePic" />
59 <span class="head-content">{{ cmnt.user.name }} </span> 59 <span class="head-content">{{ cmnt.user.name }} </span>
60 <ul> 60 <ul>
61 <li> 61 <li>
62 <span></span 62 <span></span
63 ><img src="../assets/images/u-info-icon.png" />{{ 63 ><img src="../assets/images/u-info-icon.png" />{{
64 cmnt.user.karmaPoints 64 cmnt.user.karmaPoints
65 }}pts 65 }}pts
66 </li> 66 </li>
67 <li> 67 <li>
68 <span></span>{{ dateGenerator(cmnt.createdAt) }} 68 <span></span>{{ dateGenerator(cmnt.createdAt) }}
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </div> 71 </div>
72 <!-- header --> 72 <!-- header -->
73 <p> 73 <p>
74 {{ cmnt.comment }} 74 {{ cmnt.comment }}
75 </p> 75 </p>
76 <div class="joined_wrapper"> 76 <div class="joined_wrapper">
77 <ul class="joined-info info_bc_spc"> 77 <ul class="joined-info info_bc_spc">
78 <li> 78 <li>
79 <img 79 <img
80 src="../assets/images/heart.svg" 80 src="../assets/images/heart.svg"
81 v-if="cmnt.like == false" 81 v-if="cmnt.like == false"
82 @click="likeComment(true, cmnt._id)" 82 @click="likeComment(true, cmnt._id)"
83 class="cursor-pointer" 83 class="cursor-pointer"
84 /> 84 />
85 <img 85 <img
86 src="../assets/images/purple-heart.png" 86 src="../assets/images/purple-heart.png"
87 v-if="cmnt.like == true" 87 v-if="cmnt.like == true"
88 @click="likeComment(false, cmnt._id)" 88 @click="likeComment(false, cmnt._id)"
89 class="cursor-pointer" 89 class="cursor-pointer"
90 /> 90 />
91 </li> 91 </li>
92 <li> 92 <li>
93 <a href="javasript:void(0);"> 93 <a href="javasript:void(0);">
94 {{ cmnt.likes.length }}</a 94 {{ cmnt.likes.length }}</a
95 > 95 >
96 </li> 96 </li>
97 <li class="comment-spc"> 97 <li class="comment-spc">
98 <img src="../assets/images/purple-comment.png" /> 98 <img src="../assets/images/purple-comment.png" />
99 </li> 99 </li>
100 <li> 100 <li>
101 <a href="javasript:void(0);"> 101 <a href="javasript:void(0);">
102 {{ cmnt.children.length }}</a 102 {{ cmnt.children.length }}</a
103 > 103 >
104 </li> 104 </li>
105 </ul> 105 </ul>
106 <div class="add_rply" v-if="!cmnt.childInput"> 106 <div class="add_rply" v-if="!cmnt.childInput">
107 <input 107 <input
108 type="text" 108 type="text"
109 @click="eachRply(cmnt)" 109 @click="eachRply(cmnt)"
110 class="add_Rply_C" 110 class="add_Rply_C"
111 placeholder="Add your reply" 111 placeholder="Add your reply"
112 /> 112 />
113 </div> 113 </div>
114 <!-- rly form --> 114 <!-- rly form -->
115 </div> 115 </div>
116 <!-- joined wrapper --> 116 <!-- joined wrapper -->
117 </div> 117 </div>
118 <!-- full width --> 118 <!-- full width -->
119 </div> 119 </div>
120 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 120 <div class="comments-footer each-ft" v-if="cmnt.childInput">
121 <textarea v-model="comment" id="childInput"></textarea> 121 <textarea v-model="comment" id="childInput"></textarea>
122 <div class="comments-footer-wrp"> 122 <div class="comments-footer-wrp">
123 <a 123 <a
124 @click="createChildComment(cmnt)" 124 @click="createChildComment(cmnt)"
125 href="javasript:void(0);" 125 href="javasript:void(0);"
126 class="add_comments_chat reply-Wdth" 126 class="add_comments_chat reply-Wdth"
127 >Reply</a 127 >Reply</a
128 > 128 >
129 <a 129 <a
130 href="javasript:void(0);" 130 href="javasript:void(0);"
131 class="discard_bt" 131 class="discard_bt"
132 @click="discardRply(cmnt)" 132 @click="discardRply(cmnt)"
133 ><img src="../assets/images/discard.svg" 133 ><img src="../assets/images/discard.svg"
134 /></a> 134 /></a>
135 </div> 135 </div>
136 </div> 136 </div>
137 <!-- parent --> 137 <!-- parent -->
138 <div 138 <div
139 class="child-full-width" 139 class="child-full-width"
140 v-for="(childCmnt, i) in cmnt.children" 140 v-for="(childCmnt, i) in cmnt.children"
141 :key="i" 141 :key="i"
142 > 142 >
143 <div class="full-width"> 143 <div class="full-width">
144 <div class="b-user-head"> 144 <div class="b-user-head">
145 <img :src="childCmnt.user.profilePic" /> 145 <img :src="childCmnt.user.profilePic" />
146 <span class="head-content" 146 <span class="head-content"
147 >{{ childCmnt.user.name }} 147 >{{ childCmnt.user.name }}
148 </span> 148 </span>
149 <ul> 149 <ul>
150 <li> 150 <li>
151 <span></span 151 <span></span
152 ><img src="../assets/images/u-info-icon.png" />{{ 152 ><img src="../assets/images/u-info-icon.png" />{{
153 childCmnt.user.karmaPoints 153 childCmnt.user.karmaPoints
154 }}pts 154 }}pts
155 </li> 155 </li>
156 <li> 156 <li>
157 <span></span 157 <span></span
158 >{{ dateGenerator(childCmnt.createdAt) }} 158 >{{ dateGenerator(childCmnt.createdAt) }}
159 </li> 159 </li>
160 </ul> 160 </ul>
161 </div> 161 </div>
162 <p> 162 <p>
163 {{ childCmnt.comment }} 163 {{ childCmnt.comment }}
164 </p> 164 </p>
165 <div class="joined_wrapper"> 165 <div class="joined_wrapper">
166 <ul class="joined-info info_bc_spc"> 166 <ul class="joined-info info_bc_spc">
167 <li> 167 <li>
168 <img 168 <img
169 src="../assets/images/heart.svg" 169 src="../assets/images/heart.svg"
170 v-if="childCmnt.like == false" 170 v-if="childCmnt.like == false"
171 @click="likeComment(true, childCmnt._id)" 171 @click="likeComment(true, childCmnt._id)"
172 class="cursor-pointer" 172 class="cursor-pointer"
173 /> 173 />
174 <img 174 <img
175 src="../assets/images/purple-heart.png" 175 src="../assets/images/purple-heart.png"
176 v-if="childCmnt.like == true" 176 v-if="childCmnt.like == true"
177 @click="likeComment(false, childCmnt._id)" 177 @click="likeComment(false, childCmnt._id)"
178 class="cursor-pointer" 178 class="cursor-pointer"
179 /> 179 />
180 </li> 180 </li>
181 <li> 181 <li>
182 <a href="javasript:void(0);"> 182 <a href="javasript:void(0);">
183 {{ childCmnt.likes.length }}</a 183 {{ childCmnt.likes.length }}</a
184 > 184 >
185 </li> 185 </li>
186 </ul> 186 </ul>
187 </div> 187 </div>
188 </div> 188 </div>
189 </div> 189 </div>
190 <!-- eree --> 190 <!-- eree -->
191 191
192 <!-- comments footer --> 192 <!-- comments footer -->
193 </li> 193 </li>
194 </ul> 194 </ul>
195 </div> 195 </div>
196 <!-- bounce board body --> 196 <!-- bounce board body -->
197 <div class="comments-footer" v-if="parentInput"> 197 <div class="comments-footer" v-if="parentInput">
198 <textarea v-model="comment"></textarea> 198 <textarea v-model="comment"></textarea>
199 <div class="comments-footer-wrp"> 199 <div class="comments-footer-wrp">
200 <a 200 <a
201 href="javasript:void(0);" 201 href="javasript:void(0);"
202 class="add_comments_chat" 202 class="add_comments_chat"
203 @click="createComment" 203 @click="createComment"
204 ><img src="../assets/images/add-comment.svg" /> Comment</a 204 ><img src="../assets/images/add-comment.svg" /> Comment</a
205 > 205 >
206 </div> 206 </div>
207 </div> 207 </div>
208 <!-- comments footer --> 208 <!-- comments footer -->
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- bounceboard wrp --> 211 <!-- bounceboard wrp -->
212 <!-- chat box --> 212 <!-- chat box -->
213 213
214 <div class="allMWrp"> 214 <div class="allMWrp">
215 <div class="mobile-screen-one p-left"> 215 <div class="mobile-screen-one p-left">
216 <div class="top-area-blank"></div> 216 <div class="top-area-blank"></div>
217 <!-- fixed area --> 217 <!-- fixed area -->
218 <div class="m-screen-comments"> 218 <div class="m-screen-comments">
219 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 219 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
220 <div class="a-intro-comments"> 220 <div class="a-intro-comments">
221 <p> 221 <p>
222 {{commentList[0].comment}} 222 {{commentList[0].comment}}
223 </p> 223 </p>
224 <ul class="rly-comment-set"> 224 <ul class="rly-comment-set">
225 <!-- like/dislike --> 225 <!-- like/dislike -->
226 <li> 226 <li>
227 <img 227 <img
228 src="../assets/images/heart.svg" 228 src="../assets/images/heart.svg"
229 v-if="commentList[0].like == false" 229 v-if="commentList[0].like == false"
230 @click="likeComment(true, commentList[0]._id)" 230 @click="likeComment(true, commentList[0]._id)"
231 class="cursor-pointer" 231 class="cursor-pointer"
232 /> 232 />
233 <img 233 <img
234 src="../assets/images/purple-heart.png" 234 src="../assets/images/purple-heart.png"
235 v-if="commentList[0].like == true" 235 v-if="commentList[0].like == true"
236 @click="likeComment(false, commentList[0]._id)" 236 @click="likeComment(false, commentList[0]._id)"
237 class="cursor-pointer" 237 class="cursor-pointer"
238 /> 238 />
239 <a href="javascript:void(0);">{{ 239 <a href="javascript:void(0);">{{
240 commentList[0].likes.length 240 commentList[0].likes.length
241 }}</a> 241 }}</a>
242 </li> 242 </li>
243 <!-- like/dislike ends --> 243 <!-- like/dislike ends -->
244 <li> 244 <li>
245 <img src="../assets/images/rply.svg" /> 245 <img src="../assets/images/rply.svg" />
246 <a href="javascript:void(0);" @click="reply_cht_box(0)" 246 <a href="javascript:void(0);" @click="reply_cht_box(0)"
247 >Reply</a 247 >Reply</a
248 > 248 >
249 </li> 249 </li>
250 </ul> 250 </ul>
251 </div> 251 </div>
252 <!-- comments box --> 252 <!-- comments box -->
253 </div> 253 </div>
254 <!-- single author comments --> 254 <!-- single author comments -->
255 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 255 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
256 <div class="a-intro-comments"> 256 <div class="a-intro-comments">
257 <p> 257 <p>
258 {{commentList[1].comment}} 258 {{commentList[1].comment}}
259 </p> 259 </p>
260 <ul class="rly-comment-set"> 260 <ul class="rly-comment-set">
261 <!-- like/dislike --> 261 <!-- like/dislike -->
262 <li> 262 <li>
263 <img 263 <img
264 src="../assets/images/heart.svg" 264 src="../assets/images/heart.svg"
265 v-if="commentList[1].like == false" 265 v-if="commentList[1].like == false"
266 @click="likeComment(true, commentList[1]._id)" 266 @click="likeComment(true, commentList[1]._id)"
267 class="cursor-pointer" 267 class="cursor-pointer"
268 /> 268 />
269 <img 269 <img
270 src="../assets/images/purple-heart.png" 270 src="../assets/images/purple-heart.png"
271 v-if="commentList[1].like == true" 271 v-if="commentList[1].like == true"
272 @click="likeComment(false, commentList[1]._id)" 272 @click="likeComment(false, commentList[1]._id)"
273 class="cursor-pointer" 273 class="cursor-pointer"
274 /> 274 />
275 <a href="javascript:void(0);">{{ 275 <a href="javascript:void(0);">{{
276 commentList[1].likes.length 276 commentList[1].likes.length
277 }}</a> 277 }}</a>
278 </li> 278 </li>
279 <!-- like/dislike ends --> 279 <!-- like/dislike ends -->
280 <li> 280 <li>
281 <img src="../assets/images/rply.svg" /> 281 <img src="../assets/images/rply.svg" />
282 <a href="javascript:void(0);" @click="reply_cht_box(1)" 282 <a href="javascript:void(0);" @click="reply_cht_box(1)"
283 >Reply</a 283 >Reply</a
284 > 284 >
285 </li> 285 </li>
286 </ul> 286 </ul>
287 </div> 287 </div>
288 <!-- comments box --> 288 <!-- comments box -->
289 </div> 289 </div>
290 <!-- single author comments --> 290 <!-- single author comments -->
291 </div> 291 </div>
292 <!-- comments --> 292 <!-- comments -->
293 <img 293 <img
294 :src="currentSlideData.payload.metaData.mobileImage1" 294 :src="currentSlideData.payload.metaData.mobileImage1"
295 class="m-screen" 295 class="m-screen"
296 /> 296 />
297 <img 297 <img
298 :src="currentSlideData.payload.metaData.authorImage" 298 :src="currentSlideData.payload.metaData.authorImage"
299 class="user-photo-bottom" 299 class="user-photo-bottom"
300 /> 300 />
301 </div> 301 </div>
302 <!-- mobile screen one --> 302 <!-- mobile screen one -->
303 <div class="mobile-screen-one p-right"> 303 <div class="mobile-screen-one p-right">
304 <div class="top-area-blank"></div> 304 <div class="top-area-blank"></div>
305 <!-- fixed area --> 305 <!-- fixed area -->
306 <div class="m-screen-right"> 306 <div class="m-screen-right">
307 <div class="single-author-li-comments" v-if="commentExistCheck(2)"> 307 <div class="single-author-li-comments" v-if="commentExistCheck(2)">
308 <div class="a-intro-comments"> 308 <div class="a-intro-comments">
309 <p> 309 <p>
310 {{commentList[2].comment}} 310 {{commentList[2].comment}}
311 </p> 311 </p>
312 <ul class="rly-comment-set"> 312 <ul class="rly-comment-set">
313 <!-- like/dislike --> 313 <!-- like/dislike -->
314 <li> 314 <li>
315 <img 315 <img
316 src="../assets/images/heart.svg" 316 src="../assets/images/heart.svg"
317 v-if="commentList[2].like == false" 317 v-if="commentList[2].like == false"
318 @click="likeComment(true, commentList[2]._id)" 318 @click="likeComment(true, commentList[2]._id)"
319 class="cursor-pointer" 319 class="cursor-pointer"
320 /> 320 />
321 <img 321 <img
322 src="../assets/images/purple-heart.png" 322 src="../assets/images/purple-heart.png"
323 v-if="commentList[2].like == true" 323 v-if="commentList[2].like == true"
324 @click="likeComment(false, commentList[2]._id)" 324 @click="likeComment(false, commentList[2]._id)"
325 class="cursor-pointer" 325 class="cursor-pointer"
326 /> 326 />
327 <a href="javascript:void(0);">{{ 327 <a href="javascript:void(0);">{{
328 commentList[2].likes.length 328 commentList[2].likes.length
329 }}</a> 329 }}</a>
330 </li> 330 </li>
331 <!-- like/dislike ends --> 331 <!-- like/dislike ends -->
332 <li> 332 <li>
333 <img src="../assets/images/rply.svg" /> 333 <img src="../assets/images/rply.svg" />
334 <a href="javascript:void(0);" @click="reply_cht_box(2)" 334 <a href="javascript:void(0);" @click="reply_cht_box(2)"
335 >Reply</a 335 >Reply</a
336 > 336 >
337 </li> 337 </li>
338 </ul> 338 </ul>
339 </div> 339 </div>
340 <!-- comments box --> 340 <!-- comments box -->
341 </div> 341 </div>
342 <!-- single author comments --> 342 <!-- single author comments -->
343 <div class="single-author-li-comments" v-if="commentExistCheck(3)"> 343 <div class="single-author-li-comments" v-if="commentExistCheck(3)">
344 <div class="a-intro-comments"> 344 <div class="a-intro-comments">
345 <p> 345 <p>
346 {{commentList[3].comment}} 346 {{commentList[3].comment}}
347 </p> 347 </p>
348 <ul class="rly-comment-set"> 348 <ul class="rly-comment-set">
349 <!-- like/dislike --> 349 <!-- like/dislike -->
350 <li> 350 <li>
351 <img 351 <img
352 src="../assets/images/heart.svg" 352 src="../assets/images/heart.svg"
353 v-if="commentList[3].like == false" 353 v-if="commentList[3].like == false"
354 @click="likeComment(true, commentList[3]._id)" 354 @click="likeComment(true, commentList[3]._id)"
355 class="cursor-pointer" 355 class="cursor-pointer"
356 /> 356 />
357 <img 357 <img
358 src="../assets/images/purple-heart.png" 358 src="../assets/images/purple-heart.png"
359 v-if="commentList[3].like == true" 359 v-if="commentList[3].like == true"
360 @click="likeComment(false, commentList[3]._id)" 360 @click="likeComment(false, commentList[3]._id)"
361 class="cursor-pointer" 361 class="cursor-pointer"
362 /> 362 />
363 <a href="javascript:void(0);">{{ 363 <a href="javascript:void(0);">{{
364 commentList[3].likes.length 364 commentList[3].likes.length
365 }}</a> 365 }}</a>
366 </li> 366 </li>
367 <!-- like/dislike ends --> 367 <!-- like/dislike ends -->
368 <li> 368 <li>
369 <img src="../assets/images/rply.svg" /> 369 <img src="../assets/images/rply.svg" />
370 <a href="javascript:void(0);" @click="reply_cht_box(3)" 370 <a href="javascript:void(0);" @click="reply_cht_box(3)"
371 >Reply</a 371 >Reply</a
372 > 372 >
373 </li> 373 </li>
374 </ul> 374 </ul>
375 </div> 375 </div>
376 <!-- comments box --> 376 <!-- comments box -->
377 </div> 377 </div>
378 <!-- single author comments --> 378 <!-- single author comments -->
379 </div> 379 </div>
380 <!-- comments --> 380 <!-- comments -->
381 <img 381 <img
382 :src="currentSlideData.payload.metaData.mobileImage2" 382 :src="currentSlideData.payload.metaData.mobileImage2"
383 class="m-screen" 383 class="m-screen"
384 /> 384 />
385 <img 385 <img
386 :src="currentSlideData.payload.metaData.authorImage" 386 :src="currentSlideData.payload.metaData.authorImage"
387 class="user-photo-bottom-r" 387 class="user-photo-bottom-r"
388 /> 388 />
389 </div> 389 </div>
390 <!-- mobile screen Two --> 390 <!-- mobile screen Two -->
391 </div> 391 </div>
392 392
393 <!-- single author comments --> 393 <!-- single author comments -->
394 <div class="footer-nav"> 394 <div class="footer-nav">
395 <div class="footer-top white-bg"> 395 <div class="footer-top white-bg">
396 <div class="row"> 396 <div class="row">
397 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 397 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
398 <div class="row h-100p"> 398 <div class="row h-100p">
399 <div 399 <div
400 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 400 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
401 > 401 >
402 <div class="ft-comments-group testi-photos-ct"> 402 <div class="ft-comments-group testi-photos-ct">
403 <div class="c-with-photos"> 403 <div class="c-with-photos">
404 <span class="count-comments" 404 <span class="count-comments"
405 >{{ getLastcomment("count", commentList) }}+ 405 >{{ getLastcomment("count", commentList) }}+
406 Comments</span 406 Comments</span
407 ><!-- count commets --> 407 ><!-- count commets -->
408 <ul class="comments-photos"> 408 <ul class="comments-photos">
409 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 409 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
410 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 410 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
411 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 411 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
412 </ul> 412 </ul>
413 <!-- comment photos --> 413 <!-- comment photos -->
414 </div> 414 </div>
415 <div class="comments-detail all-c-space"> 415 <div class="comments-detail all-c-space">
416 <span 416 <span
417 >{{ getLastcomment("name", commentList) }} 417 >{{ getLastcomment("name", commentList) }}
418 <a href="javascript:void(0);" @click="open_ct_box" 418 <a href="javascript:void(0);" @click="open_ct_box"
419 >View All</a 419 >View All</a
420 ></span 420 ></span
421 > 421 >
422 <p> 422 <p>
423 <!-- I wonder what the difference between “Dunzo Assistant” 423 <!-- I wonder what the difference between “Dunzo Assistant”
424 and “Pickup and Drop... --> 424 and “Pickup and Drop... -->
425 {{ getLastcomment("msg", commentList) }} 425 {{ getLastcomment("msg", commentList) }}
426 </p> 426 </p>
427 </div> 427 </div>
428 <!-- comments detail --> 428 <!-- comments detail -->
429 </div> 429 </div>
430 <!-- comments Group --> 430 <!-- comments Group -->
431 </div> 431 </div>
432 </div> 432 </div>
433 </div> 433 </div>
434 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 434 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
435 <div class="comment-frm no-c-frm"> 435 <div class="comment-frm no-c-frm">
436 <div class="row"> 436 <div class="row">
437 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 437 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
438 <div class="form-group frm-wdth addfrm-spc"> 438 <div class="form-group frm-wdth addfrm-spc">
439 <input 439 <input
440 type="text" 440 type="text"
441 class="form-control" 441 class="form-control"
442 placeholder="Something on your mind?" 442 placeholder="Something on your mind?"
443 id="open_ct_box" 443 id="open_ct_box"
444 v-model="comment" 444 v-model="comment"
445 /> 445 />
446 </div> 446 </div>
447 </div> 447 </div>
448 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 448 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
449 <a 449 <a
450 href="javascript:void(0);" 450 href="javascript:void(0);"
451 @click="createComment" 451 @click="createComment"
452 class="add-comment" 452 class="add-comment"
453 ><img src="../assets/images/add-comment.svg" /> 453 ><img src="../assets/images/add-comment.svg" />
454 Comment</a 454 Comment</a
455 > 455 >
456 </div> 456 </div>
457 </div> 457 </div>
458 <!-- comment from --> 458 <!-- comment from -->
459 </div> 459 </div>
460 </div> 460 </div>
461 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 461 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
462 <ul class="top-intro-bt"> 462 <ul class="top-intro-bt">
463 <li> 463 <li>
464 <a href="javascript:void(0);" @click="goBack" 464 <a href="javascript:void(0);" @click="goBack"
465 ><img src="../assets/images/skip-prev.svg" /> Prev</a 465 ><img src="../assets/images/skip-prev.svg" /> Prev</a
466 > 466 >
467 </li> 467 </li>
468 <li> 468 <li>
469 <a href="javascript:void(0);" @click="goNext" 469 <a href="javascript:void(0);" @click="goNext"
470 ><img src="../assets/images/skip-next.svg" /> Skip to next 470 ><img src="../assets/images/skip-next.svg" /> Skip to next
471 slide</a 471 slide</a
472 > 472 >
473 </li> 473 </li>
474 </ul> 474 </ul>
475 </div> 475 </div>
476 <!-- buttons list --> 476 <!-- buttons list -->
477 </div> 477 </div>
478 </div> 478 </div>
479 <!-- footer top --> 479 <!-- footer top -->
480 <div class="footer-bottom"> 480 <div class="footer-bottom">
481 <ul> 481 <ul>
482 <li class="active"></li> 482 <li class="active"></li>
483 <li></li> 483 <li></li>
484 </ul> 484 </ul>
485 </div> 485 </div>
486 <!-- footer top --> 486 <!-- footer top -->
487 </div> 487 </div>
488 <!-- footer --> 488 <!-- footer -->
489 </div> 489 </div>
490 <!-- body wrapper --> 490 <!-- body wrapper -->
491 </div> 491 </div>
492 <!-- main wrapper --> 492 <!-- main wrapper -->
493 </main> 493 </main>
494 </template> 494 </template>
495 495
496 <script> 496 <script>
497 import Vue from "vue"; 497 import Vue from "vue";
498 import router from "../router"; 498 import router from "../router";
499 import axios from "axios"; 499 import axios from "axios";
500 import moment from 'moment'; 500 import moment from 'moment';
501 import Header from "./Header"; 501 import Header from "./Header";
502 502
503 export default { 503 export default {
504 components: { 504 components: {
505 Header: Header, 505 Header: Header,
506 }, 506 },
507 name: "TwoScreenWithoutInsight", 507 name: "TwoScreenWithoutInsight",
508 508
509 data() { 509 data() {
510 return { 510 return {
511 allSlide: [], 511 allSlide: [],
512 currentSlideIndex: null, 512 currentSlideIndex: null,
513 currentSlideData: null, 513 currentSlideData: null,
514 // 514 //
515 usertoken: null, 515 usertoken: null,
516 commentList: [], 516 commentList: [],
517 comment: null, 517 comment: null,
518 parentInput: true, 518 parentInput: true,
519 }; 519 };
520 }, 520 },
521 mounted() { 521 mounted() {
522 var allSlideData = localStorage.getItem( 522 var allSlideData = localStorage.getItem(
523 "spotlight_slide" + this.$route.params.caseStudyId 523 "spotlight_slide" + this.$route.params.caseStudyId
524 ); 524 );
525 if (allSlideData) { 525 if (allSlideData) {
526 this.allSlide = JSON.parse(allSlideData); 526 this.allSlide = JSON.parse(allSlideData);
527 this.getCurrentSlideData(); 527 this.getCurrentSlideData();
528 } 528 }
529 var userdata = localStorage.getItem("spotlight_usertoken"); 529 var userdata = localStorage.getItem("spotlight_usertoken");
530 if (userdata) { 530 if (userdata) {
531 userdata = JSON.parse(userdata); 531 userdata = JSON.parse(userdata);
532 this.usertoken = userdata.token; 532 this.usertoken = userdata.token;
533 this.getComment(); 533 this.getComment();
534 } 534 }
535 }, 535 },
536 methods: { 536 methods: {
537 getCurrentSlideData() { 537 getCurrentSlideData() {
538 var i = this.allSlide.findIndex( 538 var i = this.allSlide.findIndex(
539 (slide_) => slide_.slideId == this.$route.params.slideId 539 (slide_) => slide_.slideId == this.$route.params.slideId
540 ); 540 );
541 this.currentSlideIndex = i; 541 this.currentSlideIndex = i;
542 this.currentSlideData = this.allSlide[i]; 542 this.currentSlideData = this.allSlide[i];
543 console.log(this.currentSlideData, "this.usertoken", this.usertoken); 543 console.log(this.currentSlideData, "this.usertoken", this.usertoken);
544 console.log("currentSlideData", this.currentSlideData); 544 console.log("currentSlideData", this.currentSlideData);
545 }, 545 },
546 goNext() { 546 goNext() {
547 this.currentSlideIndex++; 547 this.currentSlideIndex++;
548 this.$router.push({ 548 this.$router.push({
549 name: this.allSlide[this.currentSlideIndex].ur, 549 name: this.allSlide[this.currentSlideIndex].ur,
550 params: { 550 params: {
551 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 551 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
552 slideId: this.allSlide[this.currentSlideIndex].slideId, 552 slideId: this.allSlide[this.currentSlideIndex].slideId,
553 }, 553 },
554 }); 554 });
555 }, 555 },
556 goBack() { 556 goBack() {
557 this.currentSlideIndex--; 557 this.currentSlideIndex--;
558 this.$router.push({ 558 this.$router.push({
559 name: this.allSlide[this.currentSlideIndex].ur, 559 name: this.allSlide[this.currentSlideIndex].ur,
560 params: { 560 params: {
561 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 561 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
562 slideId: this.allSlide[this.currentSlideIndex].slideId, 562 slideId: this.allSlide[this.currentSlideIndex].slideId,
563 }, 563 },
564 }); 564 });
565 }, 565 },
566 566
567 createComment() { 567 createComment() {
568 console.log("===", this.comment); 568 console.log("===", this.comment);
569 var obj = { 569 var obj = {
570 caseStudyId: this.currentSlideData.caseStudyId, 570 caseStudyId: this.currentSlideData.caseStudyId,
571 slideId: this.currentSlideData.slideId, 571 slideId: this.currentSlideData.slideId,
572 comment: this.comment, 572 comment: this.comment,
573 573
574 }; 574 };
575 axios 575 axios
576 .post("/bounceBoard/comment", obj, { 576 .post("/bounceBoard/comment", obj, {
577 headers: { 577 headers: {
578 Authorization: "Bearer " + this.usertoken, 578 Authorization: "Bearer " + this.usertoken,
579 }, 579 },
580 }) 580 })
581 .then((response) => { 581 .then((response) => {
582 this.comment = null; 582 this.comment = null;
583 this.getComment(); 583 this.getComment();
584 console.log(response); 584 console.log(response);
585 }) 585 })
586 .catch((error) => { 586 .catch((error) => {
587 if (error.response) { 587 if (error.response) {
588 this.$toaster.error(error.response.data.message); 588 this.$toaster.error(error.response.data.message);
589 } 589 }
590 }); 590 });
591 }, 591 },
592 createChildComment(cmnt) { 592 createChildComment(cmnt) {
593 console.log(cmnt,"===", this.comment); 593 console.log(cmnt,"===", this.comment);
594 var obj = { 594 var obj = {
595 caseStudyId: this.currentSlideData.caseStudyId, 595 caseStudyId: this.currentSlideData.caseStudyId,
596 slideId: this.currentSlideData.slideId, 596 slideId: this.currentSlideData.slideId,
597 comment: this.comment, 597 comment: this.comment,
598 parentId: cmnt._id, 598 parentId: cmnt._id,
599 599
600 }; 600 };
601 axios 601 axios
602 .post("/bounceBoard/comment", obj, { 602 .post("/bounceBoard/comment", obj, {
603 headers: { 603 headers: {
604 Authorization: "Bearer " + this.usertoken, 604 Authorization: "Bearer " + this.usertoken,
605 }, 605 },
606 }) 606 })
607 .then((response) => { 607 .then((response) => {
608 this.comment = null; 608 this.comment = null;
609 this.discardRply(cmnt); 609 this.discardRply(cmnt);
610 this.getComment(); 610 this.getComment();
611 console.log(response); 611 console.log(response);
612 }) 612 })
613 .catch((error) => { 613 .catch((error) => {
614 if (error.response) { 614 if (error.response) {
615 this.$toaster.error(error.response.data.message); 615 this.$toaster.error(error.response.data.message);
616 } 616 }
617 }); 617 });
618 }, 618 },
619 getComment() { 619 getComment() {
620 axios 620 axios
621 .get( 621 .get(
622 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 622 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
623 { 623 {
624 headers: { 624 headers: {
625 Authorization: "Bearer " + this.usertoken, 625 Authorization: "Bearer " + this.usertoken,
626 }, 626 },
627 } 627 }
628 ) 628 )
629 .then((response) => { 629 .then((response) => {
630 console.log(response.data); 630 console.log(response.data);
631 var comments = []; 631 var comments = [];
632 var keys = Object.keys(response.data.data) 632 var keys = Object.keys(response.data.data)
633 response.data.data 633 response.data.data
634 keys.forEach((key_) => { 634 keys.forEach((key_) => {
635 comments.push(response.data.data[key_]) 635 comments.push(response.data.data[key_])
636 }); 636 });
637 comments.forEach((coment_)=>{ 637 comments.forEach((coment_)=>{
638 coment_.childInput = false; 638 coment_.childInput = false;
639 }); 639 });
640 console.log("comments",comments) 640 console.log("comments",comments)
641 this.commentList = comments; 641 this.commentList = comments;
642 }) 642 })
643 .catch((error) => console.log(error)); 643 .catch((error) => console.log(error));
644 }, 644 },
645 dateGenerator(curreDate){ 645 dateGenerator(curreDate){
646 var todayDate = moment(new Date(), "DD.MM.YYYY"); 646 var todayDate = moment(new Date(), "DD.MM.YYYY");
647 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 647 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
648 var result = todayDate.diff(endDate, 'days'); 648 var result = todayDate.diff(endDate, 'days');
649 return result; 649 return result;
650 }, 650 },
651 goToLogin() { 651 goToLogin() {
652 this.$router.push("/login"); 652 this.$router.push("/login");
653 }, 653 },
654 goToSignUp() { 654 goToSignUp() {
655 this.$router.push("/"); 655 this.$router.push("/");
656 }, 656 },
657 chtbox_close() { 657 chtbox_close() {
658 $("#cht_box_close").removeClass("cht_close"); 658 $("#cht_box_close").removeClass("cht_close");
659 $("#open_ct_box, .c_hide").show(); 659 $("#open_ct_box, .c_hide").show();
660 $(".footer-top").addClass("white-bg"); 660 $(".footer-top").addClass("white-bg");
661 }, 661 },
662 open_ct_box() { 662 open_ct_box() {
663 $("#cht_box_close").addClass("cht_close"); 663 $("#cht_box_close").addClass("cht_close");
664 $("#open_ct_box, .c_hide").hide(); 664 $("#open_ct_box, .c_hide").hide();
665 $(".footer-top").removeClass("white-bg"); 665 $(".footer-top").removeClass("white-bg");
666 }, 666 },
667 eachRply(cmnt) { 667 eachRply(cmnt) {
668 cmnt.childInput = true; 668 cmnt.childInput = true;
669 this.parentInput = false; 669 this.parentInput = false;
670 this.comment = null; 670 this.comment = null;
671 setTimeout(() => { 671 setTimeout(() => {
672 document.getElementById("childInput").focus(); 672 document.getElementById("childInput").focus();
673 }, 100); 673 }, 100);
674 }, 674 },
675 discardRply(cmnt) { 675 discardRply(cmnt) {
676 cmnt.childInput = false; 676 cmnt.childInput = false;
677 this.parentInput = true; 677 this.parentInput = true;
678 this.comment = null; 678 this.comment = null;
679 }, 679 },
680 reply_cht_box(i) { 680 reply_cht_box(i) {
681 console.log(this.commentList, "cmnt"); 681 console.log(this.commentList, "cmnt");
682 $("#cht_box_close").addClass("cht_close"); 682 $("#cht_box_close").addClass("cht_close");
683 $("#open_ct_box, .c_hide").hide(); 683 $("#open_ct_box, .c_hide").hide();
684 $(".footer-top").removeClass("white-bg"); 684 $(".footer-top").removeClass("white-bg");
685 this.commentList[i].childInput = true; 685 this.commentList[i].childInput = true;
686 this.parentInput = false; 686 this.parentInput = false;
687 this.comment = null; 687 this.comment = null;
688 setTimeout(() => { 688 setTimeout(() => {
689 document.getElementById("childInput").focus(); 689 document.getElementById("childInput").focus();
690 }, 100); 690 }, 100);
691 }, 691 },
692 likeComment(status, id) { 692 likeComment(status, id) {
693 console.log("===", this.comment); 693 console.log("===", this.comment);
694 var obj = { 694 var obj = {
695 commentId: id, 695 commentId: id,
696 like: status, 696 like: status,
697 }; 697 };
698 axios 698 axios
699 .post("/bounceBoard/like", obj, { 699 .post("/bounceBoard/like", obj, {
700 headers: { 700 headers: {
701 Authorization: "Bearer " + this.usertoken, 701 Authorization: "Bearer " + this.usertoken,
702 }, 702 },
703 }) 703 })
704 .then((response) => { 704 .then((response) => {
705 this.getComment(); 705 this.getComment();
706 console.log(response); 706 console.log(response);
707 }) 707 })
708 .catch((error) => { 708 .catch((error) => {
709 if (error.response) { 709 if (error.response) {
710 this.$toaster.error(error.response.data.message); 710 this.$toaster.error(error.response.data.message);
711 } 711 }
712 }); 712 });
713 }, 713 },
714 getLastcomment(flag, commentArray) { 714 getLastcomment(flag, commentArray) {
715 var finalComment = null; 715 var finalComment = null;
716 var totalMessage = 0; 716 var totalMessage = 0;
717 var name = null; 717 var name = null;
718 commentArray.forEach((comment_) => { 718 commentArray.forEach((comment_) => {
719 if (comment_.comment != null) { 719 if (comment_.comment != null) {
720 name = comment_.user.name; 720 name = comment_.user.name;
721 finalComment = comment_.comment; 721 finalComment = comment_.comment;
722 totalMessage++; 722 totalMessage++;
723 } 723 }
724 }); 724 });
725 if (flag == "count") { 725 if (flag == "count") {
726 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 726 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
727 } else if (flag =="name") { 727 } else if (flag =="name") {
728 return (name = name); 728 return (name = name);
729 } else { 729 } else {
730 return finalComment; 730 return finalComment;
731 } 731 }
732 }, 732 },
733 commentExistCheck(i) { 733 commentExistCheck(i) {
734 console.log(this.commentList[i].comment); 734 console.log(this.commentList[i].comment);
735 var returnValue = false; 735 var returnValue = false;
736 if (this.commentList[i].comment) { 736 if (this.commentList[i].comment) {
737 returnValue = true; 737 returnValue = true;
738 } 738 }
739 return returnValue; 739 return returnValue;
740 }, 740 },
741 }, 741 },
742 }; 742 };
743 // 743 //
744 </script> 744 </script>
745 745
src/components/TwoScreengrabWithComments.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="allMWrp screenGrb-comments-wrp"> 18 <div class="allMWrp screenGrb-comments-wrp">
19 <div class="mobile-screen-one p-left bc-transparent"> 19 <div class="mobile-screen-one p-left bc-transparent">
20 <div class="m-screen-comments comments-left-without-bc"> 20 <div class="m-screen-comments comments-left-without-bc">
21 <div class="single-author-li-comments"> 21 <div class="single-author-li-comments">
22 <div class="a-intro-comments"> 22 <div class="a-intro-comments">
23 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> 23 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
24 <ul class="rly-comment-set"> 24 <ul class="rly-comment-set">
25 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 25 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
26 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 26 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
27 </ul> 27 </ul>
28 </div><!-- comments box --> 28 </div><!-- comments box -->
29 </div><!-- single author comments --> 29 </div><!-- single author comments -->
30 <div class="single-author-li-comments"> 30 <div class="single-author-li-comments">
31 <div class="a-intro-comments"> 31 <div class="a-intro-comments">
32 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> 32 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
33 <ul class="rly-comment-set"> 33 <ul class="rly-comment-set">
34 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 34 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
35 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 35 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
36 </ul> 36 </ul>
37 </div><!-- comments box --> 37 </div><!-- comments box -->
38 </div><!-- single author comments --> 38 </div><!-- single author comments -->
39 </div><!-- comments --> 39 </div><!-- comments -->
40 <img src="../assets/images/comment-grab.png" class="m-screen spc-grbscreen1" /> 40 <img src="../assets/images/comment-grab.png" class="m-screen spc-grbscreen1" />
41 <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> 41 <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />
42 </div><!-- mobile screen one --> 42 </div><!-- mobile screen one -->
43 <div class="mobile-screen-one p-right bc-transparent"> 43 <div class="mobile-screen-one p-right bc-transparent">
44 <div class="view-ticket-wrp-ps comments-right-without-bc"> 44 <div class="view-ticket-wrp-ps comments-right-without-bc">
45 <div class="single-author-li-comments "> 45 <div class="single-author-li-comments ">
46 <div class="a-intro-comments custom-selected-style"> 46 <div class="a-intro-comments custom-selected-style">
47 <img src="../assets/images/rect.svg" class="rect" /> 47 <img src="../assets/images/rect.svg" class="rect" />
48 <div class="top-wrp"> 48 <div class="top-wrp">
49 Design Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 49 Design Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
50 </div> 50 </div>
51 <div class="top-head">Jakob’s law</div> 51 <div class="top-head">Jakob’s law</div>
52 <p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p> 52 <p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>
53 <div class="footer"> 53 <div class="footer">
54 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 54 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
55 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 55 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
56 </div><!-- footer --> 56 </div><!-- footer -->
57 57
58 </div><!-- comments box --> 58 </div><!-- comments box -->
59 </div><!-- single author comments --> 59 </div><!-- single author comments -->
60 </div><!-- comments --> 60 </div><!-- comments -->
61 <img src="../assets/images/grab2.png" class="m-screen" /> 61 <img src="../assets/images/grab2.png" class="m-screen" />
62 62
63 </div><!-- mobile screen Two --> 63 </div><!-- mobile screen Two -->
64 </div> 64 </div>
65 <div class="footer-nav"> 65 <div class="footer-nav">
66 <div class="footer-top white-bg"> 66 <div class="footer-top white-bg">
67 <div class="row"> 67 <div class="row">
68 <div class="col-6 col-sm-7 col-md-7 col-lg-6 "> 68 <div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
69 <div class="row h-100p"> 69 <div class="row h-100p">
70 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4"> 70 <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
71 <ul class="top-intro-bt"> 71 <ul class="top-intro-bt">
72 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 72 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
73 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> 73 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
74 </ul> 74 </ul>
75 </div> 75 </div>
76 <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r"> 76 <div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
77 <div class="ft-comments-group no-comment-count"> 77 <div class="ft-comments-group no-comment-count">
78 <div class="row"> 78 <div class="row">
79 79
80 <div class="col-12"> 80 <div class="col-12">
81 <img src="../assets/images/u-comments.svg" class="no-comments-img" /> 81 <img src="../assets/images/u-comments.svg" class="no-comments-img" />
82 <div class="comments-detail"> 82 <div class="comments-detail">
83 <span class="no-c-yet">No comments yet</span> 83 <span class="no-c-yet">No comments yet</span>
84 <p>Be the first one to post a comment to start a discussion</p> 84 <p>Be the first one to post a comment to start a discussion</p>
85 </div><!-- comments detail --> 85 </div><!-- comments detail -->
86 </div> </div> 86 </div> </div>
87 </div><!-- comments Group --> 87 </div><!-- comments Group -->
88 </div></div> 88 </div></div>
89 </div> 89 </div>
90 <div class="col-6 col-sm-5 col-md-6 col-lg-6 "> 90 <div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
91 91
92 <div class="comment-frm no-c-frm"> 92 <div class="comment-frm no-c-frm">
93 <div class="row"> 93 <div class="row">
94 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 94 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
95 <div class="form-group frm-wdth"> 95 <div class="form-group frm-wdth">
96 <input type="text" class="form-control" placeholder="Something on your mind?" id=""> 96 <input type="text" class="form-control" placeholder="Something on your mind?" id="">
97 </div></div> 97 </div></div>
98 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 98 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
99 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> 99 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
100 </div> 100 </div>
101 </div><!-- comment from --> 101 </div><!-- comment from -->
102 </div> </div></div> 102 </div> </div></div>
103 </div><!-- footer top --> 103 </div><!-- footer top -->
104 <div class="footer-bottom"> 104 <div class="footer-bottom">
105 <ul> 105 <ul>
106 <li class="active"></li> 106 <li class="active"></li>
107 <li></li> 107 <li></li>
108 </ul> 108 </ul>
109 </div><!-- footer top --> 109 </div><!-- footer top -->
110 </div><!-- footer --> 110 </div><!-- footer -->
111 </div> 111 </div>
112 <!-- body wrapper --> 112 <!-- body wrapper -->
113 </div> 113 </div>
114 <!-- main wrapper --> 114 <!-- main wrapper -->
115 </main> 115 </main>
116 </template> 116 </template>
117 117
118 <script> 118 <script>
119 import Vue from "vue"; 119 import Vue from "vue";
120 import router from "../router"; 120 import router from "../router";
121 121
122 export default { 122 export default {
123 name: "TwoScreengrabWithComments", 123 name: "TwoScreengrabWithComments",
124 124
125 data() { 125 data() {
126 return {}; 126 return {};
127 }, 127 },
128 mounted() {}, 128 mounted() {},
129 methods: { 129 methods: {
130 goToLogin() { 130 goToLogin() {
131 this.$router.push("/login"); 131 this.$router.push("/login");
132 }, 132 },
133 goToSignUp() { 133 goToSignUp() {
134 this.$router.push("/"); 134 this.$router.push("/");
135 }, 135 },
136 136
137 }, 137 },
138 }; 138 };
139 </script> 139 </script>
140 140
src/components/TwoWebScreenWithInsight.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <nav class="navbar navbar-expand-sm spotLight-nav"> 5 <nav class="navbar navbar-expand-sm spotLight-nav">
6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> 6 <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> 7 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8 <span class="navbar-toggler-icon"></span> 8 <span class="navbar-toggler-icon"></span>
9 <span class="navbar-toggler-icon"></span> 9 <span class="navbar-toggler-icon"></span>
10 <span class="navbar-toggler-icon"></span> 10 <span class="navbar-toggler-icon"></span>
11 </button> 11 </button>
12 <div class="user-profile-photo insights-profile"> 12 <div class="user-profile-photo insights-profile">
13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a> 13 <a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14 </div> 14 </div>
15 </nav> 15 </nav>
16 <!-- menu wrapper --> 16 <!-- menu wrapper -->
17 <div class="intro-startup"> 17 <div class="intro-startup">
18 <div class="two-webscreen-insight"> 18 <div class="two-webscreen-insight">
19 <div class="mobile-screen-one p-left bc-transparent"> 19 <div class="mobile-screen-one p-left bc-transparent">
20 <div class="m-screen-comments two-webs-l-spc"> 20 <div class="m-screen-comments two-webs-l-spc">
21 <div class="single-author-li-comments"> 21 <div class="single-author-li-comments">
22 <div class="a-intro-comments"> 22 <div class="a-intro-comments">
23 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> 23 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
24 <ul class="rly-comment-set"> 24 <ul class="rly-comment-set">
25 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 25 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
26 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 26 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
27 </ul> 27 </ul>
28 </div><!-- comments box --> 28 </div><!-- comments box -->
29 </div><!-- single author comments --> 29 </div><!-- single author comments -->
30 <div class="single-author-li-comments"> 30 <div class="single-author-li-comments">
31 <div class="a-intro-comments"> 31 <div class="a-intro-comments">
32 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p> 32 <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
33 <ul class="rly-comment-set"> 33 <ul class="rly-comment-set">
34 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li> 34 <li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
35 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li> 35 <li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
36 </ul> 36 </ul>
37 </div><!-- comments box --> 37 </div><!-- comments box -->
38 </div><!-- single author comments --> 38 </div><!-- single author comments -->
39 </div><!-- comments --> 39 </div><!-- comments -->
40 40
41 <img src="../assets/images/top-user-demo.svg" class="two-screen-user-photo-bottom" /> 41 <img src="../assets/images/top-user-demo.svg" class="two-screen-user-photo-bottom" />
42 </div><!-- mobile screen one --> 42 </div><!-- mobile screen one -->
43 <div class="two-webscreen-r-insight"> 43 <div class="two-webscreen-r-insight">
44 <div class="view-ticket-wrp-ps comments-right-without-bc"> 44 <div class="view-ticket-wrp-ps comments-right-without-bc">
45 <div class="single-author-li-comments "> 45 <div class="single-author-li-comments ">
46 <div class="a-intro-comments custom-selected-style"> 46 <div class="a-intro-comments custom-selected-style">
47 <img src="../assets/images/rect.svg" class="rect" /> 47 <img src="../assets/images/rect.svg" class="rect" />
48 <div class="top-wrp"> 48 <div class="top-wrp">
49 Design Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 49 Design Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
50 </div> 50 </div>
51 <div class="top-head">Jakob’s law</div> 51 <div class="top-head">Jakob’s law</div>
52 <p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p> 52 <p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>
53 <div class="footer"> 53 <div class="footer">
54 <a href="javascript:void(0);" class="cit-16">16 Citations</a> 54 <a href="javascript:void(0);" class="cit-16">16 Citations</a>
55 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 55 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
56 </div><!-- footer --> 56 </div><!-- footer -->
57 57
58 </div><!-- comments box --> 58 </div><!-- comments box -->
59 </div><!-- single author comments --> 59 </div><!-- single author comments -->
60 </div><!-- comments --> 60 </div><!-- comments -->
61 </div><!-- single mobile Right insight --> 61 </div><!-- single mobile Right insight -->
62 </div><!-- Single Mobile Insight --> 62 </div><!-- Single Mobile Insight -->
63 <div class="footer-nav"> 63 <div class="footer-nav">
64 <div class="footer-top white-bg"> 64 <div class="footer-top white-bg">
65 <div class="row"> 65 <div class="row">
66 <div class="col-8 col-sm-8 col-md-8 col-lg-8 "> 66 <div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
67 <div class="row h-100p"> 67 <div class="row h-100p">
68 <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"> 68 <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
69 <ul class="top-intro-bt"> 69 <ul class="top-intro-bt">
70 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li> 70 <li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
71 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li> 71 <li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
72 </ul> 72 </ul>
73 </div> 73 </div>
74 <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r"> 74 <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
75 <div class="ft-comments-group"> 75 <div class="ft-comments-group">
76 <div class="c-with-photos"> 76 <div class="c-with-photos">
77 <span class="count-comments">16+ Comments</span><!-- count commets --> 77 <span class="count-comments">16+ Comments</span><!-- count commets -->
78 <ul class="comments-photos"> 78 <ul class="comments-photos">
79 <li><img src="../assets/images/c-photo-1.png" /></li> 79 <li><img src="../assets/images/c-photo-1.png" /></li>
80 <li><img src="../assets/images/c-photo-2.png" /></li> 80 <li><img src="../assets/images/c-photo-2.png" /></li>
81 <li><img src="../assets/images/c-photo-3.png" /></li> 81 <li><img src="../assets/images/c-photo-3.png" /></li>
82 </ul><!-- comment photos --> 82 </ul><!-- comment photos -->
83 </div> 83 </div>
84 <div class="comments-detail all-c-space"> 84 <div class="comments-detail all-c-space">
85 <span>Saudrika commented <a href="javascript:void(0);">View All</a></span> 85 <span>Saudrika commented <a href="javascript:void(0);">View All</a></span>
86 <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p> 86 <p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>
87 </div><!-- comments detail --> 87 </div><!-- comments detail -->
88 88
89 </div><!-- comments Group --> 89 </div><!-- comments Group -->
90 </div></div> 90 </div></div>
91 </div> 91 </div>
92 <div class="col-4 col-sm-4 col-md-4 col-lg-4 "> 92 <div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
93 93
94 <div class="comment-frm no-c-frm"> 94 <div class="comment-frm no-c-frm">
95 <div class="row"> 95 <div class="row">
96 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 96 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
97 <div class="form-group frm-wdth addfrm-spc"> 97 <div class="form-group frm-wdth addfrm-spc">
98 <input type="text" class="form-control" placeholder="Something on your mind?" id=""> 98 <input type="text" class="form-control" placeholder="Something on your mind?" id="">
99 </div></div> 99 </div></div>
100 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 100 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
101 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a> 101 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
102 </div> 102 </div>
103 </div><!-- comment from --> 103 </div><!-- comment from -->
104 </div> </div></div> 104 </div> </div></div>
105 </div><!-- footer top --> 105 </div><!-- footer top -->
106 <div class="footer-bottom"> 106 <div class="footer-bottom">
107 <ul> 107 <ul>
108 <li class="active"></li> 108 <li class="active"></li>
109 <li></li> 109 <li></li>
110 </ul> 110 </ul>
111 </div><!-- footer top --> 111 </div><!-- footer top -->
112 </div><!-- footer --> 112 </div><!-- footer -->
113 113
114 </div> 114 </div>
115 <!-- body wrapper --> 115 <!-- body wrapper -->
116 </div> 116 </div>
117 <!-- main wrapper --> 117 <!-- main wrapper -->
118 </main> 118 </main>
119 </template> 119 </template>
120 120
121 <script> 121 <script>
122 import Vue from "vue"; 122 import Vue from "vue";
123 import router from "../router"; 123 import router from "../router";
124 124
125 export default { 125 export default {
126 name: "TwoWebScreenWithInsight", 126 name: "TwoWebScreenWithInsight",
127 127
128 data() { 128 data() {
129 return {}; 129 return {};
130 }, 130 },
131 mounted() {}, 131 mounted() {},
132 methods: { 132 methods: {
133 goToLogin() { 133 goToLogin() {
134 this.$router.push("/login"); 134 this.$router.push("/login");
135 }, 135 },
136 goToSignUp() { 136 goToSignUp() {
137 this.$router.push("/"); 137 this.$router.push("/");
138 }, 138 },
139 139
140 }, 140 },
141 }; 141 };
142 </script> 142 </script>
143 143
src/components/noscreenshotSingleautho.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 <!-- menu wrapper --> 5 <!-- menu wrapper -->
6 <div class="intro-startup"> 6 <div class="intro-startup">
7 7
8 <!-- chat box --> 8 <!-- chat box -->
9 <div class="bounce-board-wrp" id="cht_box_close"> 9 <div class="bounce-board-wrp" id="cht_box_close">
10 <div class="inner-wrp-bc"> 10 <div class="inner-wrp-bc">
11 <div class="bc-top-head"> 11 <div class="bc-top-head">
12 <span class="bc-head"> 12 <span class="bc-head">
13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board 13 <img src="../assets/images/bounce-icon.svg" /> Bounce Board
14 </span> 14 </span>
15 <div class="action-sort"> 15 <div class="action-sort">
16 <span class="sort-by">SORT BY</span> 16 <!-- <span class="sort-by">SORT BY</span>
17 <div class="btn-group"> 17 <div class="btn-group">
18 <button 18 <button
19 type="button" 19 type="button"
20 class="bc-sort-list dropdown-toggle" 20 class="bc-sort-list dropdown-toggle"
21 data-toggle="dropdown" 21 data-toggle="dropdown"
22 aria-haspopup="true" 22 aria-haspopup="true"
23 aria-expanded="false" 23 aria-expanded="false"
24 > 24 >
25 BEST 25 BEST
26 </button> 26 </button>
27 <div class="dropdown-menu short_by"> 27 <div class="dropdown-menu short_by">
28 <a class="dropdown-item" href="javasript:void(0);" 28 <a class="dropdown-item" href="javasript:void(0);"
29 >BEST 1</a 29 >BEST 1</a
30 > 30 >
31 <a class="dropdown-item" href="javasript:void(0);" 31 <a class="dropdown-item" href="javasript:void(0);"
32 >BEST 2</a 32 >BEST 2</a
33 > 33 >
34 <a class="dropdown-item" href="javasript:void(0);" 34 <a class="dropdown-item" href="javasript:void(0);"
35 >BEST 3</a 35 >BEST 3</a
36 > 36 >
37 </div> 37 </div>
38 </div> 38 </div> -->
39 <a 39 <a
40 href="javasript:void(0);" 40 href="javasript:void(0);"
41 @click="chtbox_close" 41 @click="chtbox_close"
42 class="close_chat_bx" 42 class="close_chat_bx"
43 ><img src="../assets/images/close.png" alt="close" /></a 43 ><img src="../assets/images/close.png" alt="close" /></a
44 ><!-- close --> 44 ><!-- close -->
45 </div> 45 </div>
46 <!-- action sort --> 46 <!-- action sort -->
47 </div> 47 </div>
48 <!-- top head --> 48 <!-- top head -->
49 <div class="bounce-board-body"> 49 <div class="bounce-board-body">
50 <!-- all user comments --> 50 <!-- all user comments -->
51 <ul class="bounced-user-comments"> 51 <ul class="bounced-user-comments">
52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> 52 <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
53 <div class="bc_brd_l"></div> 53 <div class="bc_brd_l"></div>
54 <!-- border --> 54 <!-- border -->
55 <div class="parent-full-width" v-if="cmnt.comment"> 55 <div class="parent-full-width" v-if="cmnt.comment">
56 <div class="full-width"> 56 <div class="full-width">
57 <div class="b-user-head"> 57 <div class="b-user-head">
58 <img :src="cmnt.user.profilePic" /> 58 <img :src="cmnt.user.profilePic" />
59 <span class="head-content">{{ cmnt.user.name }} </span> 59 <span class="head-content">{{ cmnt.user.name }} </span>
60 <ul> 60 <ul>
61 <li> 61 <li>
62 <span></span 62 <span></span
63 ><img src="../assets/images/u-info-icon.png" />{{ 63 ><img src="../assets/images/u-info-icon.png" />{{
64 cmnt.user.karmaPoints 64 cmnt.user.karmaPoints
65 }}pts 65 }}pts
66 </li> 66 </li>
67 <li> 67 <li>
68 <span></span>{{ dateGenerator(cmnt.createdAt) }} 68 <span></span>{{ dateGenerator(cmnt.createdAt) }}
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </div> 71 </div>
72 <!-- header --> 72 <!-- header -->
73 <p> 73 <p>
74 {{ cmnt.comment }} 74 {{ cmnt.comment }}
75 </p> 75 </p>
76 <div class="joined_wrapper"> 76 <div class="joined_wrapper">
77 <ul class="joined-info info_bc_spc"> 77 <ul class="joined-info info_bc_spc">
78 <li> 78 <li>
79 <img 79 <img
80 src="../assets/images/heart.svg" 80 src="../assets/images/heart.svg"
81 v-if="cmnt.like == false" 81 v-if="cmnt.like == false"
82 @click="likeComment(true, cmnt._id)" 82 @click="likeComment(true, cmnt._id)"
83 class="cursor-pointer" 83 class="cursor-pointer"
84 /> 84 />
85 <img 85 <img
86 src="../assets/images/purple-heart.png" 86 src="../assets/images/purple-heart.png"
87 v-if="cmnt.like == true" 87 v-if="cmnt.like == true"
88 @click="likeComment(false, cmnt._id)" 88 @click="likeComment(false, cmnt._id)"
89 class="cursor-pointer" 89 class="cursor-pointer"
90 /> 90 />
91 </li> 91 </li>
92 <li> 92 <li>
93 <a href="javasript:void(0);"> 93 <a href="javasript:void(0);">
94 {{ cmnt.likes.length }}</a 94 {{ cmnt.likes.length }}</a
95 > 95 >
96 </li> 96 </li>
97 <li class="comment-spc"> 97 <li class="comment-spc">
98 <img src="../assets/images/purple-comment.png" /> 98 <img src="../assets/images/purple-comment.png" />
99 </li> 99 </li>
100 <li> 100 <li>
101 <a href="javasript:void(0);"> 101 <a href="javasript:void(0);">
102 {{ cmnt.children.length }}</a 102 {{ cmnt.children.length }}</a
103 > 103 >
104 </li> 104 </li>
105 </ul> 105 </ul>
106 <div class="add_rply" v-if="!cmnt.childInput"> 106 <div class="add_rply" v-if="!cmnt.childInput">
107 <input 107 <input
108 type="text" 108 type="text"
109 @click="eachRply(cmnt)" 109 @click="eachRply(cmnt)"
110 class="add_Rply_C" 110 class="add_Rply_C"
111 placeholder="Add your reply" 111 placeholder="Add your reply"
112 /> 112 />
113 </div> 113 </div>
114 <!-- rly form --> 114 <!-- rly form -->
115 </div> 115 </div>
116 <!-- joined wrapper --> 116 <!-- joined wrapper -->
117 </div> 117 </div>
118 <!-- full width --> 118 <!-- full width -->
119 </div> 119 </div>
120 <div class="comments-footer each-ft" v-if="cmnt.childInput"> 120 <div class="comments-footer each-ft" v-if="cmnt.childInput">
121 <textarea v-model="comment" id="childInput"></textarea> 121 <textarea v-model="comment" id="childInput"></textarea>
122 <div class="comments-footer-wrp"> 122 <div class="comments-footer-wrp">
123 <a 123 <a
124 @click="createChildComment(cmnt)" 124 @click="createChildComment(cmnt)"
125 href="javasript:void(0);" 125 href="javasript:void(0);"
126 class="add_comments_chat reply-Wdth" 126 class="add_comments_chat reply-Wdth"
127 >Reply</a 127 >Reply</a
128 > 128 >
129 <a 129 <a
130 href="javasript:void(0);" 130 href="javasript:void(0);"
131 class="discard_bt" 131 class="discard_bt"
132 @click="discardRply(cmnt)" 132 @click="discardRply(cmnt)"
133 ><img src="../assets/images/discard.svg" 133 ><img src="../assets/images/discard.svg"
134 /></a> 134 /></a>
135 </div> 135 </div>
136 </div> 136 </div>
137 <!-- parent --> 137 <!-- parent -->
138 <div 138 <div
139 class="child-full-width" 139 class="child-full-width"
140 v-for="(childCmnt, i) in cmnt.children" 140 v-for="(childCmnt, i) in cmnt.children"
141 :key="i" 141 :key="i"
142 > 142 >
143 <div class="full-width"> 143 <div class="full-width">
144 <div class="b-user-head"> 144 <div class="b-user-head">
145 <img :src="childCmnt.user.profilePic" /> 145 <img :src="childCmnt.user.profilePic" />
146 <span class="head-content" 146 <span class="head-content"
147 >{{ childCmnt.user.name }} 147 >{{ childCmnt.user.name }}
148 </span> 148 </span>
149 <ul> 149 <ul>
150 <li> 150 <li>
151 <span></span 151 <span></span
152 ><img src="../assets/images/u-info-icon.png" />{{ 152 ><img src="../assets/images/u-info-icon.png" />{{
153 childCmnt.user.karmaPoints 153 childCmnt.user.karmaPoints
154 }}pts 154 }}pts
155 </li> 155 </li>
156 <li> 156 <li>
157 <span></span 157 <span></span
158 >{{ dateGenerator(childCmnt.createdAt) }} 158 >{{ dateGenerator(childCmnt.createdAt) }}
159 </li> 159 </li>
160 </ul> 160 </ul>
161 </div> 161 </div>
162 <p> 162 <p>
163 {{ childCmnt.comment }} 163 {{ childCmnt.comment }}
164 </p> 164 </p>
165 <div class="joined_wrapper"> 165 <div class="joined_wrapper">
166 <ul class="joined-info info_bc_spc"> 166 <ul class="joined-info info_bc_spc">
167 <li> 167 <li>
168 <img 168 <img
169 src="../assets/images/heart.svg" 169 src="../assets/images/heart.svg"
170 v-if="childCmnt.like == false" 170 v-if="childCmnt.like == false"
171 @click="likeComment(true, childCmnt._id)" 171 @click="likeComment(true, childCmnt._id)"
172 class="cursor-pointer" 172 class="cursor-pointer"
173 /> 173 />
174 <img 174 <img
175 src="../assets/images/purple-heart.png" 175 src="../assets/images/purple-heart.png"
176 v-if="childCmnt.like == true" 176 v-if="childCmnt.like == true"
177 @click="likeComment(false, childCmnt._id)" 177 @click="likeComment(false, childCmnt._id)"
178 class="cursor-pointer" 178 class="cursor-pointer"
179 /> 179 />
180 </li> 180 </li>
181 <li> 181 <li>
182 <a href="javasript:void(0);"> 182 <a href="javasript:void(0);">
183 {{ childCmnt.likes.length }}</a 183 {{ childCmnt.likes.length }}</a
184 > 184 >
185 </li> 185 </li>
186 </ul> 186 </ul>
187 </div> 187 </div>
188 </div> 188 </div>
189 </div> 189 </div>
190 <!-- eree --> 190 <!-- eree -->
191 191
192 <!-- comments footer --> 192 <!-- comments footer -->
193 </li> 193 </li>
194 </ul> 194 </ul>
195 </div> 195 </div>
196 <!-- bounce board body --> 196 <!-- bounce board body -->
197 <div class="comments-footer" v-if="parentInput"> 197 <div class="comments-footer" v-if="parentInput">
198 <textarea v-model="comment"></textarea> 198 <textarea v-model="comment"></textarea>
199 <div class="comments-footer-wrp"> 199 <div class="comments-footer-wrp">
200 <a 200 <a
201 href="javasript:void(0);" 201 href="javasript:void(0);"
202 class="add_comments_chat" 202 class="add_comments_chat"
203 @click="createComment" 203 @click="createComment"
204 ><img src="../assets/images/add-comment.svg" /> Comment</a 204 ><img src="../assets/images/add-comment.svg" /> Comment</a
205 > 205 >
206 </div> 206 </div>
207 </div> 207 </div>
208 <!-- comments footer --> 208 <!-- comments footer -->
209 </div> 209 </div>
210 </div> 210 </div>
211 <!-- bounceboard wrp --> 211 <!-- bounceboard wrp -->
212 <!-- chat box --> 212 <!-- chat box -->
213 213
214 <div class="single-author-comments"> 214 <div class="single-author-comments">
215 <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> 215 <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
216 <div class="ct-l-400"> 216 <div class="ct-l-400">
217 <div class="single-author-li-comments" v-if="commentExistCheck(0)"> 217 <div class="single-author-li-comments" v-if="commentExistCheck(0)">
218 <div class="a-intro-comments right-corner"> 218 <div class="a-intro-comments right-corner">
219 <p> 219 <p>
220 {{commentList[0].comment}} 220 {{commentList[0].comment}}
221 </p> 221 </p>
222 <ul class="rly-comment-set"> 222 <ul class="rly-comment-set">
223 <!-- like/dislike --> 223 <!-- like/dislike -->
224 <li> 224 <li>
225 <img 225 <img
226 src="../assets/images/heart.svg" 226 src="../assets/images/heart.svg"
227 v-if="commentList[0].like == false" 227 v-if="commentList[0].like == false"
228 @click="likeComment(true, commentList[0]._id)" 228 @click="likeComment(true, commentList[0]._id)"
229 class="cursor-pointer" 229 class="cursor-pointer"
230 /> 230 />
231 <img 231 <img
232 src="../assets/images/purple-heart.png" 232 src="../assets/images/purple-heart.png"
233 v-if="commentList[0].like == true" 233 v-if="commentList[0].like == true"
234 @click="likeComment(false, commentList[0]._id)" 234 @click="likeComment(false, commentList[0]._id)"
235 class="cursor-pointer" 235 class="cursor-pointer"
236 /> 236 />
237 <a href="javascript:void(0);">{{ 237 <a href="javascript:void(0);">{{
238 commentList[0].likes.length 238 commentList[0].likes.length
239 }}</a> 239 }}</a>
240 </li> 240 </li>
241 <!-- like/dislike ends --> 241 <!-- like/dislike ends -->
242 <li> 242 <li>
243 <img src="../assets/images/rply.svg" /> 243 <img src="../assets/images/rply.svg" />
244 <a href="javascript:void(0);" @click="reply_cht_box(0)" 244 <a href="javascript:void(0);" @click="reply_cht_box(0)"
245 >Reply</a 245 >Reply</a
246 > 246 >
247 </li> 247 </li>
248 </ul> 248 </ul>
249 </div> 249 </div>
250 250
251 </div> <!-- comments box --> 251 </div> <!-- comments box -->
252 <div class="single-author-li-comments" v-if="commentExistCheck(1)"> 252 <div class="single-author-li-comments" v-if="commentExistCheck(1)">
253 <div class="a-intro-comments right-corner"> 253 <div class="a-intro-comments right-corner">
254 <p> 254 <p>
255 {{commentList[1].comment}} 255 {{commentList[1].comment}}
256 </p> 256 </p>
257 <ul class="rly-comment-set"> 257 <ul class="rly-comment-set">
258 <!-- like/dislike --> 258 <!-- like/dislike -->
259 <li> 259 <li>
260 <img 260 <img
261 src="../assets/images/heart.svg" 261 src="../assets/images/heart.svg"
262 v-if="commentList[1].like == false" 262 v-if="commentList[1].like == false"
263 @click="likeComment(true, commentList[1]._id)" 263 @click="likeComment(true, commentList[1]._id)"
264 class="cursor-pointer" 264 class="cursor-pointer"
265 /> 265 />
266 <img 266 <img
267 src="../assets/images/purple-heart.png" 267 src="../assets/images/purple-heart.png"
268 v-if="commentList[1].like == true" 268 v-if="commentList[1].like == true"
269 @click="likeComment(false, commentList[1]._id)" 269 @click="likeComment(false, commentList[1]._id)"
270 class="cursor-pointer" 270 class="cursor-pointer"
271 /> 271 />
272 <a href="javascript:void(0);">{{ 272 <a href="javascript:void(0);">{{
273 commentList[1].likes.length 273 commentList[1].likes.length
274 }}</a> 274 }}</a>
275 </li> 275 </li>
276 <!-- like/dislike ends --> 276 <!-- like/dislike ends -->
277 <li> 277 <li>
278 <img src="../assets/images/rply.svg" /> 278 <img src="../assets/images/rply.svg" />
279 <a href="javascript:void(0);" @click="reply_cht_box(1)" 279 <a href="javascript:void(0);" @click="reply_cht_box(1)"
280 >Reply</a 280 >Reply</a
281 > 281 >
282 </li> 282 </li>
283 </ul> 283 </ul>
284 </div> 284 </div>
285 285
286 </div> <!-- comments box --> 286 </div> <!-- comments box -->
287 </div> 287 </div>
288 <img 288 <img
289 class="s-user-comments m-0" 289 class="s-user-comments m-0"
290 :src="currentSlideData.payload.metaData.authorImage" 290 :src="currentSlideData.payload.metaData.authorImage"
291 /> 291 />
292 <div class="comments-a-wrp ct-width"> 292 <div class="comments-a-wrp ct-width">
293 <div class="single-author-li-comments "> 293 <div class="single-author-li-comments ">
294 <div class="a-intro-comments custom-selected-style custom-selected-style-2"> 294 <div class="a-intro-comments custom-selected-style custom-selected-style-2">
295 295
296 <div class="top-wrp"> 296 <div class="top-wrp">
297 {{currentSlideData.payload.insight.tag}} Insight <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> 297 {{currentSlideData.payload.insight.tag}} Insight <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
298 </div> 298 </div>
299 <div class="top-head">{{currentSlideData.payload.insight.title}}</div> 299 <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
300 <p>{{currentSlideData.payload.insight.description}} 300 <p>{{currentSlideData.payload.insight.description}}
301 </p> 301 </p>
302 <div class="footer"> 302 <div class="footer">
303 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a> 303 <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
304 <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> 304 <!-- <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a> -->
305 </div><!-- footer --> 305 </div><!-- footer -->
306 306
307 </div><!-- comments box --> 307 </div><!-- comments box -->
308 </div><!-- single author comments --> 308 </div><!-- single author comments -->
309 <!-- single author comments --> 309 <!-- single author comments -->
310 310
311 </div> 311 </div>
312 </div> 312 </div>
313 <!-- single author comments --> 313 <!-- single author comments -->
314 <div class="footer-nav"> 314 <div class="footer-nav">
315 <div class="footer-top white-bg"> 315 <div class="footer-top white-bg">
316 <div class="row"> 316 <div class="row">
317 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> 317 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
318 <div class="row h-100p"> 318 <div class="row h-100p">
319 <div 319 <div
320 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" 320 class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
321 > 321 >
322 <div class="ft-comments-group testi-photos-ct"> 322 <div class="ft-comments-group testi-photos-ct">
323 <div class="c-with-photos"> 323 <div class="c-with-photos">
324 <span class="count-comments" 324 <span class="count-comments"
325 >{{ getLastcomment("count", commentList) }}+ 325 >{{ getLastcomment("count", commentList) }}+
326 Comments</span 326 Comments</span
327 ><!-- count commets --> 327 ><!-- count commets -->
328 <ul class="comments-photos"> 328 <ul class="comments-photos">
329 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> 329 <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
330 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> 330 <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
331 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> 331 <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
332 </ul> 332 </ul>
333 <!-- comment photos --> 333 <!-- comment photos -->
334 </div> 334 </div>
335 <div class="comments-detail all-c-space"> 335 <div class="comments-detail all-c-space">
336 <span 336 <span
337 >{{ getLastcomment("name", commentList) }} 337 >{{ getLastcomment("name", commentList) }}
338 <a href="javascript:void(0);" @click="open_ct_box" 338 <a href="javascript:void(0);" @click="open_ct_box"
339 >View All</a 339 >View All</a
340 ></span 340 ></span
341 > 341 >
342 <p> 342 <p>
343 <!-- I wonder what the difference between “Dunzo Assistant” 343 <!-- I wonder what the difference between “Dunzo Assistant”
344 and “Pickup and Drop... --> 344 and “Pickup and Drop... -->
345 {{ getLastcomment("msg", commentList) }} 345 {{ getLastcomment("msg", commentList) }}
346 </p> 346 </p>
347 </div> 347 </div>
348 <!-- comments detail --> 348 <!-- comments detail -->
349 </div> 349 </div>
350 <!-- comments Group --> 350 <!-- comments Group -->
351 </div> 351 </div>
352 </div> 352 </div>
353 </div> 353 </div>
354 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> 354 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
355 <div class="comment-frm no-c-frm"> 355 <div class="comment-frm no-c-frm">
356 <div class="row"> 356 <div class="row">
357 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> 357 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
358 <div class="form-group frm-wdth addfrm-spc"> 358 <div class="form-group frm-wdth addfrm-spc">
359 <input 359 <input
360 type="text" 360 type="text"
361 class="form-control" 361 class="form-control"
362 placeholder="Something on your mind?" 362 placeholder="Something on your mind?"
363 id="open_ct_box" 363 id="open_ct_box"
364 v-model="comment" 364 v-model="comment"
365 /> 365 />
366 </div> 366 </div>
367 </div> 367 </div>
368 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> 368 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
369 <a 369 <a
370 href="javascript:void(0);" 370 href="javascript:void(0);"
371 @click="createComment" 371 @click="createComment"
372 class="add-comment" 372 class="add-comment"
373 ><img src="../assets/images/add-comment.svg" /> 373 ><img src="../assets/images/add-comment.svg" />
374 Comment</a 374 Comment</a
375 > 375 >
376 </div> 376 </div>
377 </div> 377 </div>
378 <!-- comment from --> 378 <!-- comment from -->
379 </div> 379 </div>
380 </div> 380 </div>
381 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> 381 <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
382 <ul class="top-intro-bt"> 382 <ul class="top-intro-bt">
383 <li> 383 <li>
384 <a href="javascript:void(0);" @click="goBack" 384 <a href="javascript:void(0);" @click="goBack"
385 ><img src="../assets/images/skip-prev.svg" /> Prev</a 385 ><img src="../assets/images/skip-prev.svg" /> Prev</a
386 > 386 >
387 </li> 387 </li>
388 <li> 388 <li>
389 <a href="javascript:void(0);" @click="goNext" 389 <a href="javascript:void(0);" @click="goNext"
390 ><img src="../assets/images/skip-next.svg" /> Skip to next 390 ><img src="../assets/images/skip-next.svg" /> Skip to next
391 slide</a 391 slide</a
392 > 392 >
393 </li> 393 </li>
394 </ul> 394 </ul>
395 </div> 395 </div>
396 <!-- buttons list --> 396 <!-- buttons list -->
397 </div> 397 </div>
398 </div> 398 </div>
399 <!-- footer top --> 399 <!-- footer top -->
400 <div class="footer-bottom"> 400 <div class="footer-bottom">
401 <ul> 401 <ul>
402 <li class="active"></li> 402 <li class="active"></li>
403 <li></li> 403 <li></li>
404 </ul> 404 </ul>
405 </div> 405 </div>
406 <!-- footer top --> 406 <!-- footer top -->
407 </div> 407 </div>
408 <!-- footer --> 408 <!-- footer -->
409 </div> 409 </div>
410 <!-- body wrapper --> 410 <!-- body wrapper -->
411 </div> 411 </div>
412 <!-- main wrapper --> 412 <!-- main wrapper -->
413 </main> 413 </main>
414 </template> 414 </template>
415 415
416 <script> 416 <script>
417 import Vue from "vue"; 417 import Vue from "vue";
418 import router from "../router"; 418 import router from "../router";
419 import axios from "axios"; 419 import axios from "axios";
420 import moment from 'moment'; 420 import moment from 'moment';
421 import Header from "./Header"; 421 import Header from "./Header";
422 422
423 export default { 423 export default {
424 components: { 424 components: {
425 Header: Header, 425 Header: Header,
426 }, 426 },
427 name: "noscreenshotSingleautho", 427 name: "noscreenshotSingleautho",
428 data() { 428 data() {
429 return { 429 return {
430 allSlide: [], 430 allSlide: [],
431 currentSlideIndex: null, 431 currentSlideIndex: null,
432 currentSlideData: null, 432 currentSlideData: null,
433 // 433 //
434 usertoken: null, 434 usertoken: null,
435 commentList: [], 435 commentList: [],
436 comment: null, 436 comment: null,
437 parentInput: true, 437 parentInput: true,
438 }; 438 };
439 }, 439 },
440 mounted() { 440 mounted() {
441 var allSlideData = localStorage.getItem( 441 var allSlideData = localStorage.getItem(
442 "spotlight_slide" + this.$route.params.caseStudyId 442 "spotlight_slide" + this.$route.params.caseStudyId
443 ); 443 );
444 if (allSlideData) { 444 if (allSlideData) {
445 this.allSlide = JSON.parse(allSlideData); 445 this.allSlide = JSON.parse(allSlideData);
446 this.getCurrentSlideData(); 446 this.getCurrentSlideData();
447 } 447 }
448 var userdata = localStorage.getItem("spotlight_usertoken"); 448 var userdata = localStorage.getItem("spotlight_usertoken");
449 if (userdata) { 449 if (userdata) {
450 userdata = JSON.parse(userdata); 450 userdata = JSON.parse(userdata);
451 this.usertoken = userdata.token; 451 this.usertoken = userdata.token;
452 this.getComment(); 452 this.getComment();
453 } 453 }
454 }, 454 },
455 methods: { 455 methods: {
456 getCurrentSlideData() { 456 getCurrentSlideData() {
457 var i = this.allSlide.findIndex( 457 var i = this.allSlide.findIndex(
458 (slide_) => slide_.slideId == this.$route.params.slideId 458 (slide_) => slide_.slideId == this.$route.params.slideId
459 ); 459 );
460 this.currentSlideIndex = i; 460 this.currentSlideIndex = i;
461 this.currentSlideData = this.allSlide[i]; 461 this.currentSlideData = this.allSlide[i];
462 console.log("currentSlideData", this.currentSlideData); 462 console.log("currentSlideData", this.currentSlideData);
463 }, 463 },
464 goNext() { 464 goNext() {
465 this.currentSlideIndex++; 465 this.currentSlideIndex++;
466 this.$router.push({ 466 this.$router.push({
467 name: this.allSlide[this.currentSlideIndex].ur, 467 name: this.allSlide[this.currentSlideIndex].ur,
468 params: { 468 params: {
469 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 469 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
470 slideId: this.allSlide[this.currentSlideIndex].slideId, 470 slideId: this.allSlide[this.currentSlideIndex].slideId,
471 }, 471 },
472 }); 472 });
473 }, 473 },
474 goBack() { 474 goBack() {
475 this.currentSlideIndex--; 475 this.currentSlideIndex--;
476 this.$router.push({ 476 this.$router.push({
477 name: this.allSlide[this.currentSlideIndex].ur, 477 name: this.allSlide[this.currentSlideIndex].ur,
478 params: { 478 params: {
479 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 479 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
480 slideId: this.allSlide[this.currentSlideIndex].slideId, 480 slideId: this.allSlide[this.currentSlideIndex].slideId,
481 }, 481 },
482 }); 482 });
483 }, 483 },
484 createComment() { 484 createComment() {
485 console.log("===", this.comment); 485 console.log("===", this.comment);
486 var obj = { 486 var obj = {
487 caseStudyId: this.currentSlideData.caseStudyId, 487 caseStudyId: this.currentSlideData.caseStudyId,
488 slideId: this.currentSlideData.slideId, 488 slideId: this.currentSlideData.slideId,
489 comment: this.comment, 489 comment: this.comment,
490 490
491 }; 491 };
492 axios 492 axios
493 .post("/bounceBoard/comment", obj, { 493 .post("/bounceBoard/comment", obj, {
494 headers: { 494 headers: {
495 Authorization: "Bearer " + this.usertoken, 495 Authorization: "Bearer " + this.usertoken,
496 }, 496 },
497 }) 497 })
498 .then((response) => { 498 .then((response) => {
499 this.comment = null; 499 this.comment = null;
500 this.getComment(); 500 this.getComment();
501 console.log(response); 501 console.log(response);
502 }) 502 })
503 .catch((error) => { 503 .catch((error) => {
504 if (error.response) { 504 if (error.response) {
505 this.$toaster.error(error.response.data.message); 505 this.$toaster.error(error.response.data.message);
506 } 506 }
507 }); 507 });
508 }, 508 },
509 createChildComment(cmnt) { 509 createChildComment(cmnt) {
510 console.log(cmnt,"===", this.comment); 510 console.log(cmnt,"===", this.comment);
511 var obj = { 511 var obj = {
512 caseStudyId: this.currentSlideData.caseStudyId, 512 caseStudyId: this.currentSlideData.caseStudyId,
513 slideId: this.currentSlideData.slideId, 513 slideId: this.currentSlideData.slideId,
514 comment: this.comment, 514 comment: this.comment,
515 parentId: cmnt._id, 515 parentId: cmnt._id,
516 516
517 }; 517 };
518 axios 518 axios
519 .post("/bounceBoard/comment", obj, { 519 .post("/bounceBoard/comment", obj, {
520 headers: { 520 headers: {
521 Authorization: "Bearer " + this.usertoken, 521 Authorization: "Bearer " + this.usertoken,
522 }, 522 },
523 }) 523 })
524 .then((response) => { 524 .then((response) => {
525 this.comment = null; 525 this.comment = null;
526 this.discardRply(cmnt); 526 this.discardRply(cmnt);
527 this.getComment(); 527 this.getComment();
528 console.log(response); 528 console.log(response);
529 }) 529 })
530 .catch((error) => { 530 .catch((error) => {
531 if (error.response) { 531 if (error.response) {
532 this.$toaster.error(error.response.data.message); 532 this.$toaster.error(error.response.data.message);
533 } 533 }
534 }); 534 });
535 }, 535 },
536 getComment() { 536 getComment() {
537 axios 537 axios
538 .get( 538 .get(
539 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, 539 `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
540 { 540 {
541 headers: { 541 headers: {
542 Authorization: "Bearer " + this.usertoken, 542 Authorization: "Bearer " + this.usertoken,
543 }, 543 },
544 } 544 }
545 ) 545 )
546 .then((response) => { 546 .then((response) => {
547 console.log(response.data); 547 console.log(response.data);
548 var comments = []; 548 var comments = [];
549 var keys = Object.keys(response.data.data) 549 var keys = Object.keys(response.data.data)
550 response.data.data 550 response.data.data
551 keys.forEach((key_) => { 551 keys.forEach((key_) => {
552 comments.push(response.data.data[key_]) 552 comments.push(response.data.data[key_])
553 }); 553 });
554 comments.forEach((coment_)=>{ 554 comments.forEach((coment_)=>{
555 coment_.childInput = false; 555 coment_.childInput = false;
556 }); 556 });
557 console.log("comments",comments) 557 console.log("comments",comments)
558 this.commentList = comments; 558 this.commentList = comments;
559 }) 559 })
560 .catch((error) => console.log(error)); 560 .catch((error) => console.log(error));
561 }, 561 },
562 dateGenerator(curreDate){ 562 dateGenerator(curreDate){
563 var todayDate = moment(new Date(), "DD.MM.YYYY"); 563 var todayDate = moment(new Date(), "DD.MM.YYYY");
564 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 564 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
565 var result = todayDate.diff(endDate, 'days'); 565 var result = todayDate.diff(endDate, 'days');
566 return result; 566 return result;
567 }, 567 },
568 goToLogin() { 568 goToLogin() {
569 this.$router.push("/login"); 569 this.$router.push("/login");
570 }, 570 },
571 goToSignUp() { 571 goToSignUp() {
572 this.$router.push("/"); 572 this.$router.push("/");
573 }, 573 },
574 open(url){ 574 open(url){
575 window.open(url); 575 window.open(url);
576 }, 576 },
577 chtbox_close() { 577 chtbox_close() {
578 $("#cht_box_close").removeClass("cht_close"); 578 $("#cht_box_close").removeClass("cht_close");
579 $("#open_ct_box, .c_hide").show(); 579 $("#open_ct_box, .c_hide").show();
580 $(".footer-top").addClass("white-bg"); 580 $(".footer-top").addClass("white-bg");
581 }, 581 },
582 open_ct_box() { 582 open_ct_box() {
583 $("#cht_box_close").addClass("cht_close"); 583 $("#cht_box_close").addClass("cht_close");
584 $("#open_ct_box, .c_hide").hide(); 584 $("#open_ct_box, .c_hide").hide();
585 $(".footer-top").removeClass("white-bg"); 585 $(".footer-top").removeClass("white-bg");
586 }, 586 },
587 eachRply(cmnt) { 587 eachRply(cmnt) {
588 cmnt.childInput = true; 588 cmnt.childInput = true;
589 this.parentInput = false; 589 this.parentInput = false;
590 this.comment = null; 590 this.comment = null;
591 setTimeout(() => { 591 setTimeout(() => {
592 document.getElementById("childInput").focus(); 592 document.getElementById("childInput").focus();
593 }, 100); 593 }, 100);
594 }, 594 },
595 discardRply(cmnt) { 595 discardRply(cmnt) {
596 cmnt.childInput = false; 596 cmnt.childInput = false;
597 this.parentInput = true; 597 this.parentInput = true;
598 this.comment = null; 598 this.comment = null;
599 }, 599 },
600 reply_cht_box(i) { 600 reply_cht_box(i) {
601 console.log(this.commentList, "cmnt"); 601 console.log(this.commentList, "cmnt");
602 $("#cht_box_close").addClass("cht_close"); 602 $("#cht_box_close").addClass("cht_close");
603 $("#open_ct_box, .c_hide").hide(); 603 $("#open_ct_box, .c_hide").hide();
604 $(".footer-top").removeClass("white-bg"); 604 $(".footer-top").removeClass("white-bg");
605 this.commentList[i].childInput = true; 605 this.commentList[i].childInput = true;
606 this.parentInput = false; 606 this.parentInput = false;
607 this.comment = null; 607 this.comment = null;
608 setTimeout(() => { 608 setTimeout(() => {
609 document.getElementById("childInput").focus(); 609 document.getElementById("childInput").focus();
610 }, 100); 610 }, 100);
611 }, 611 },
612 likeComment(status, id) { 612 likeComment(status, id) {
613 console.log("===", this.comment); 613 console.log("===", this.comment);
614 var obj = { 614 var obj = {
615 commentId: id, 615 commentId: id,
616 like: status, 616 like: status,
617 }; 617 };
618 axios 618 axios
619 .post("/bounceBoard/like", obj, { 619 .post("/bounceBoard/like", obj, {
620 headers: { 620 headers: {
621 Authorization: "Bearer " + this.usertoken, 621 Authorization: "Bearer " + this.usertoken,
622 }, 622 },
623 }) 623 })
624 .then((response) => { 624 .then((response) => {
625 this.getComment(); 625 this.getComment();
626 console.log(response); 626 console.log(response);
627 }) 627 })
628 .catch((error) => { 628 .catch((error) => {
629 if (error.response) { 629 if (error.response) {
630 this.$toaster.error(error.response.data.message); 630 this.$toaster.error(error.response.data.message);
631 } 631 }
632 }); 632 });
633 }, 633 },
634 getLastcomment(flag, commentArray) { 634 getLastcomment(flag, commentArray) {
635 var finalComment = null; 635 var finalComment = null;
636 var totalMessage = 0; 636 var totalMessage = 0;
637 var name = null; 637 var name = null;
638 commentArray.forEach((comment_) => { 638 commentArray.forEach((comment_) => {
639 if (comment_.comment != null) { 639 if (comment_.comment != null) {
640 name = comment_.user.name; 640 name = comment_.user.name;
641 finalComment = comment_.comment; 641 finalComment = comment_.comment;
642 totalMessage++; 642 totalMessage++;
643 } 643 }
644 }); 644 });
645 if (flag == "count") { 645 if (flag == "count") {
646 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); 646 return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
647 } else if (flag =="name") { 647 } else if (flag =="name") {
648 return (name = name); 648 return (name = name);
649 } else { 649 } else {
650 return finalComment; 650 return finalComment;
651 } 651 }
652 }, 652 },
653 commentExistCheck(i) { 653 commentExistCheck(i) {
654 console.log(this.commentList[i].comment); 654 console.log(this.commentList[i].comment);
655 var returnValue = false; 655 var returnValue = false;
656 if (this.commentList[i].comment) { 656 if (this.commentList[i].comment) {
657 returnValue = true; 657 returnValue = true;
658 } 658 }
659 return returnValue; 659 return returnValue;
660 }, 660 },
661 }, 661 },
662 }; 662 };
663 // 663 //
664 </script> 664 </script>
665 665
src/components/outro.vue
Diff comments   View file @5c9c158
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid episode-intro"> 3 <div class="container-fluid episode-intro">
4 <Header></Header> 4 <Header></Header>
5 5
6 <!-- menu wrapper --> 6 <!-- menu wrapper -->
7 <div class="intro-startup"> 7 <div class="intro-startup">
8 <div class="thanks-wrapper"> 8 <div class="thanks-wrapper">
9 <div class="thanks-l-wrp"> 9 <div class="thanks-l-wrp">
10 <div class="thanks-pay-wrp"> 10 <div class="thanks-pay-wrp">
11 <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> --> 11 <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->
12 <img 12 <img
13 :src="currentSlideData.payload.metaData.authorImage[0]" 13 :src="currentSlideData.payload.metaData.authorImage[0]"
14 class="thanks-img" 14 class="thanks-img"
15 /> 15 />
16 <div class="blacktext-wrp"> 16 <div class="blacktext-wrp">
17 CHeck out other case studies here 17 CHeck out other case studies here
18 <img src="../assets/images/arrow-bottom.svg" /> 18 <img src="../assets/images/arrow-bottom.svg" />
19 </div> 19 </div>
20 <ul class=""> 20 <ul class="">
21 <li v-for="(study, i) in caseStudies" :key="i"> 21 <li v-for="(study, i) in caseStudies" :key="i">
22 <a href="javascript:void(0);"> 22 <a href="javascript:void(0);">
23 <img :src="study.intro.logoURL" /> 23 <img :src="study.intro.logoURL" />
24 <span 24 <span
25 ><img src="../assets/images/p-eye.svg" /> 0 Views</span 25 ><img src="../assets/images/p-eye.svg" /> 0 Views</span
26 > 26 >
27 </a> 27 </a>
28 </li> 28 </li>
29 29
30 <!-- <li class="payments-spc-57"> 30 <!-- <li class="payments-spc-57">
31 <a href="javascript:void(0);"> 31 <a href="javascript:void(0);">
32 <img src="../assets/images/g-pay.svg" /> 32 <img src="../assets/images/g-pay.svg" />
33 <span 33 <span
34 ><img src="../assets/images/p-eye.svg" /> 19.4k 34 ><img src="../assets/images/p-eye.svg" /> 19.4k
35 Views</span 35 Views</span
36 > 36 >
37 </a> 37 </a>
38 </li> 38 </li>
39 <li> 39 <li>
40 <a href="javascript:void(0);"> 40 <a href="javascript:void(0);">
41 <img src="../assets/images/bb.svg" /> 41 <img src="../assets/images/bb.svg" />
42 <span 42 <span
43 ><img src="../assets/images/p-eye.svg" /> 19.4k 43 ><img src="../assets/images/p-eye.svg" /> 19.4k
44 Views</span 44 Views</span
45 > 45 >
46 </a> 46 </a>
47 </li> --> 47 </li> -->
48 </ul> 48 </ul>
49 <!-- payments options --> 49 <!-- payments options -->
50 <!-- <ul class=""> 50 <!-- <ul class="">
51 <li> 51 <li>
52 <a href="javascript:void(0);"> 52 <a href="javascript:void(0);">
53 <img src="../assets/images/payment.svg" /> 53 <img src="../assets/images/payment.svg" />
54 <span 54 <span
55 ><img src="../assets/images/p-eye.svg" /> 19.4k 55 ><img src="../assets/images/p-eye.svg" /> 19.4k
56 Views</span 56 Views</span
57 > 57 >
58 </a> 58 </a>
59 </li> 59 </li>
60 <li class="payments-spc-57"> 60 <li class="payments-spc-57">
61 <a href="javascript:void(0);"> 61 <a href="javascript:void(0);">
62 <img src="../assets/images/uc.svg" /> 62 <img src="../assets/images/uc.svg" />
63 <span 63 <span
64 ><img src="../assets/images/p-eye.svg" /> 19.4k 64 ><img src="../assets/images/p-eye.svg" /> 19.4k
65 Views</span 65 Views</span
66 > 66 >
67 </a> 67 </a>
68 </li> 68 </li>
69 </ul> --> 69 </ul> -->
70 <!-- payments options --> 70 <!-- payments options -->
71 </div> 71 </div>
72 <!-- thanks pay wrp --> 72 <!-- thanks pay wrp -->
73 <img 73 <img
74 src="../assets/images/spot-light-bt.svg" 74 src="../assets/images/spot-light-bt.svg"
75 class="payment-spot-light-bt" 75 class="payment-spot-light-bt"
76 /> 76 />
77 </div> 77 </div>
78 <!-- thanks left wrp --> 78 <!-- thanks left wrp -->
79 <div class="thanks-r-section"> 79 <div class="thanks-r-section">
80 <div class="logo-common-wrp"> 80 <div class="logo-common-wrp">
81 <a href="javascript:void(0);" 81 <a href="javascript:void(0);"
82 ><img src="../assets/images/ps-growth.svg" /> 82 ><img src="../assets/images/ps-growth.svg" />
83 <span>Product Growth</span> 83 <span>Product Growth</span>
84 </a> 84 </a>
85 </div> 85 </div>
86 <!-- logo wrp --> 86 <!-- logo wrp -->
87 <div class="clearfix"></div> 87 <div class="clearfix"></div>
88 <p> 88 <p>
89 Don’t forget to <strong> join the discussion </strong> by 89 Don’t forget to <strong> join the discussion </strong> by
90 scrolling back and adding your comments! 90 scrolling back and adding your comments!
91 </p> 91 </p>
92 <div class="clearfix"></div> 92 <div class="clearfix"></div>
93 <a href="javascript:void(0);" class="back-bt" @click="goToProfile"> 93 <a href="javascript:void(0);" class="back-bt" @click="goHome">
94 <span class="s1"></span> 94 <span class="s1"></span>
95 <span class="s2"></span> 95 <span class="s2"></span>
96 <span class="s3"></span> 96 <span class="s3"></span>
97 <span class="s4"></span> 97 <span class="s4"></span>
98 <img src="../assets/images/refresh.svg" /> Back to home 98 <img src="../assets/images/refresh.svg" /> Back to home
99 </a> 99 </a>
100 <ul class="rating-section"> 100 <ul class="rating-section">
101 <li> 101 <li>
102 <p> 102 <p>
103 Excited to <strong> create case studies</strong> or help build 103 Excited to <strong> create case studies</strong> or help build
104 Product Growth? 104 Product Growth?
105 </p> 105 </p>
106 <a href="javascript:void(0);" class="publish">Publish</a> 106 <a href="javascript:void(0);" class="publish">Publish</a>
107 </li> 107 </li>
108 <li> 108 <li>
109 <p class="wdth">How would you rate this case study?</p> 109 <p class="wdth">How would you rate this case study?</p>
110 <span class="rating-list"> 110 <span class="rating-list">
111 <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6"> 111 <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">
112 </star-rating> 112 </star-rating>
113 <!-- <a href="javascript:void(0);" 113 <!-- <a href="javascript:void(0);"
114 ><img src="../assets/images/f-review.svg" 114 ><img src="../assets/images/f-review.svg"
115 /></a> 115 /></a>
116 <a href="javascript:void(0);" 116 <a href="javascript:void(0);"
117 ><img src="../assets/images/f-review.svg" 117 ><img src="../assets/images/f-review.svg"
118 /></a> 118 /></a>
119 <a href="javascript:void(0);" 119 <a href="javascript:void(0);"
120 ><img src="../assets/images/e-review.svg" 120 ><img src="../assets/images/e-review.svg"
121 /></a> --> 121 /></a> -->
122 </span> 122 </span>
123 </li> 123 </li>
124 </ul> 124 </ul>
125 <div class="follow-us-py"> 125 <div class="follow-us-py">
126 <span>Follow us at</span> 126 <span>Follow us at</span>
127 <ul class="p-follows"> 127 <ul class="p-follows">
128 <li> 128 <li>
129 <a href="javascript:void(0);"> 129 <a href="javascript:void(0);">
130 <img src="../assets/images/p-rss.svg" /> 130 <img src="../assets/images/p-rss.svg" />
131 </a> 131 </a>
132 </li> 132 </li>
133 <li> 133 <li>
134 <a href="javascript:void(0);"> 134 <a href="javascript:void(0);">
135 <img src="../assets/images/p-linkedin.svg" /> 135 <img src="../assets/images/p-linkedin.svg" />
136 </a> 136 </a>
137 </li> 137 </li>
138 <li> 138 <li>
139 <a href="javascript:void(0);"> 139 <a href="javascript:void(0);">
140 <img src="../assets/images/p-twitter.svg" /> 140 <img src="../assets/images/p-twitter.svg" />
141 </a> 141 </a>
142 </li> 142 </li>
143 </ul> 143 </ul>
144 </div> 144 </div>
145 <!-- <star-rating v-model="rating"></star-rating> --> 145 <!-- <star-rating v-model="rating"></star-rating> -->
146 146
147 <!-- follow us --> 147 <!-- follow us -->
148 <div class="p-users"> 148 <div class="p-users">
149 <span>Author</span> 149 <span>Author</span>
150 <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1> 150 <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>
151 <!-- <span>Author</span> 151 <!-- <span>Author</span>
152 <h1>Pramod</h1> 152 <h1>Pramod</h1>
153 <span>Author</span> 153 <span>Author</span>
154 <h1>Sarthak</h1> --> 154 <h1>Sarthak</h1> -->
155 <span v-if="currentSlideData.payload.metaData.designer" 155 <span v-if="currentSlideData.payload.metaData.designer"
156 >Designer</span 156 >Designer</span
157 > 157 >
158 <h1>{{ currentSlideData.payload.metaData.designer }}</h1> 158 <h1>{{ currentSlideData.payload.metaData.designer }}</h1>
159 <span v-if="currentSlideData.payload.metaData.illustrations" 159 <span v-if="currentSlideData.payload.metaData.illustrations"
160 >Illustrations</span 160 >Illustrations</span
161 > 161 >
162 <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1> 162 <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>
163 </div> 163 </div>
164 <!-- users --> 164 <!-- users -->
165 </div> 165 </div>
166 <!-- thanks payment right section --> 166 <!-- thanks payment right section -->
167 </div> 167 </div>
168 <!--- thanks wrapper --> 168 <!--- thanks wrapper -->
169 <div class="footer-nav"> 169 <div class="footer-nav">
170 <div class="footer-top"> 170 <div class="footer-top">
171 <ul class="top-intro-bt ps_right"> 171 <ul class="top-intro-bt ps_right">
172 <li> 172 <li>
173 <a href="javascript:void(0);" @click="goBack" 173 <a href="javascript:void(0);" @click="goBack"
174 ><img src="../assets/images/skip-prev.svg" /> Prev</a 174 ><img src="../assets/images/skip-prev.svg" /> Prev</a
175 > 175 >
176 </li> 176 </li>
177 </ul> 177 </ul>
178 </div> 178 </div>
179 <!-- footer top --> 179 <!-- footer top -->
180 <div class="footer-bottom"> 180 <div class="footer-bottom">
181 <ul> 181 <ul>
182 <li class="active"></li> 182 <li class="active"></li>
183 <li class="active"></li> 183 <li class="active"></li>
184 </ul> 184 </ul>
185 </div> 185 </div>
186 <!-- footer top --> 186 <!-- footer top -->
187 </div> 187 </div>
188 <!-- footer --> 188 <!-- footer -->
189 </div> 189 </div>
190 <!-- body wrapper --> 190 <!-- body wrapper -->
191 </div> 191 </div>
192 <!-- main wrapper --> 192 <!-- main wrapper -->
193 </main> 193 </main>
194 </template> 194 </template>
195 195
196 <script> 196 <script>
197 import Vue from "vue"; 197 import Vue from "vue";
198 import router from "../router"; 198 import router from "../router";
199 import axios from "axios"; 199 import axios from "axios";
200 import Header from "./Header"; 200 import Header from "./Header";
201 201
202 export default { 202 export default {
203 components: { 203 components: {
204 Header: Header, 204 Header: Header,
205 }, 205 },
206 name: "Outro", 206 name: "Outro",
207 207
208 data() { 208 data() {
209 return { 209 return {
210 caseStudies: [], 210 caseStudies: [],
211 allSlide: [], 211 allSlide: [],
212 currentSlideIndex: null, 212 currentSlideIndex: null,
213 currentSlideData: null, 213 currentSlideData: null,
214 rating: 0, 214 rating: 0,
215 }; 215 };
216 }, 216 },
217 mounted() { 217 mounted() {
218 var allSlideData = localStorage.getItem( 218 var allSlideData = localStorage.getItem(
219 "spotlight_slide" + this.$route.params.caseStudyId 219 "spotlight_slide" + this.$route.params.caseStudyId
220 ); 220 );
221 if (allSlideData) { 221 if (allSlideData) {
222 this.allSlide = JSON.parse(allSlideData); 222 this.allSlide = JSON.parse(allSlideData);
223 this.getCurrentSlideData(); 223 this.getCurrentSlideData();
224 this.getCaseStudies(); 224 this.getCaseStudies();
225 this.getRating(); 225 this.getRating();
226 } 226 }
227 }, 227 },
228 methods: { 228 methods: {
229 getCurrentSlideData() { 229 getCurrentSlideData() {
230 var i = this.allSlide.findIndex( 230 var i = this.allSlide.findIndex(
231 (slide_) => slide_.slideId == this.$route.params.slideId 231 (slide_) => slide_.slideId == this.$route.params.slideId
232 ); 232 );
233 this.currentSlideIndex = i; 233 this.currentSlideIndex = i;
234 this.currentSlideData = this.allSlide[i]; 234 this.currentSlideData = this.allSlide[i];
235 console.log("currentSlideData", this.currentSlideData); 235 console.log("currentSlideData", this.currentSlideData);
236 }, 236 },
237 goNext() { 237 goNext() {
238 this.currentSlideIndex++; 238 this.currentSlideIndex++;
239 this.$router.push({ 239 this.$router.push({
240 name: this.allSlide[this.currentSlideIndex].ur, 240 name: this.allSlide[this.currentSlideIndex].ur,
241 params: { 241 params: {
242 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 242 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
243 slideId: this.allSlide[this.currentSlideIndex].slideId, 243 slideId: this.allSlide[this.currentSlideIndex].slideId,
244 }, 244 },
245 }); 245 });
246 }, 246 },
247 goBack() { 247 goBack() {
248 this.currentSlideIndex--; 248 this.currentSlideIndex--;
249 this.$router.push({ 249 this.$router.push({
250 name: this.allSlide[this.currentSlideIndex].ur, 250 name: this.allSlide[this.currentSlideIndex].ur,
251 params: { 251 params: {
252 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 252 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
253 slideId: this.allSlide[this.currentSlideIndex].slideId, 253 slideId: this.allSlide[this.currentSlideIndex].slideId,
254 }, 254 },
255 }); 255 });
256 }, 256 },
257 goHome() {
258 this.currentSlideIndex--;
259 this.$router.push({
260 name: this.allSlide[0].ur,
261 params: {
262 caseStudyId: this.allSlide[0].caseStudyId,
263 slideId: this.allSlide[0].slideId,
264 },
265 });
266 },
257 267
258 getCaseStudies() { 268 getCaseStudies() {
259 var userdata = localStorage.getItem("spotlight_usertoken"); 269 var userdata = localStorage.getItem("spotlight_usertoken");
260 if (userdata) { 270 if (userdata) {
261 userdata = JSON.parse(userdata); 271 userdata = JSON.parse(userdata);
262 axios 272 axios
263 .get("/caseStudy/all", { 273 .get("/caseStudy/all", {
264 headers: { 274 headers: {
265 Authorization: "Bearer " + userdata.token, 275 Authorization: "Bearer " + userdata.token,
266 }, 276 },
267 }) 277 })
268 .then((response) => { 278 .then((response) => {
269 console.log(response.data.data.caseStudies); 279 console.log(response.data.data.caseStudies);
270 this.caseStudies = response.data.data.caseStudies; 280 this.caseStudies = response.data.data.caseStudies;
271 }) 281 })
272 .catch((error) => console.log(error)); 282 .catch((error) => console.log(error));
273 } 283 }
274 }, 284 },
275 285
276 getRating() { 286 getRating() {
277 var userdata = localStorage.getItem("spotlight_usertoken"); 287 var userdata = localStorage.getItem("spotlight_usertoken");
278 if (userdata) { 288 if (userdata) {
279 userdata = JSON.parse(userdata); 289 userdata = JSON.parse(userdata);
280 axios 290 axios
281 .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, { 291 .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {
282 headers: { 292 headers: {
283 Authorization: "Bearer " + userdata.token, 293 Authorization: "Bearer " + userdata.token,
284 }, 294 },
285 }) 295 })
286 .then((response) => { 296 .then((response) => {
287 this.rating = response.data.data.Avgrating; 297 this.rating = response.data.data.Avgrating;
288 }) 298 })
289 .catch((error) => console.log(error)); 299 .catch((error) => console.log(error));
290 } 300 }
291 }, 301 },
292 updateRating() { 302 updateRating() {
293 var userdata = localStorage.getItem("spotlight_usertoken"); 303 var userdata = localStorage.getItem("spotlight_usertoken");
294 if (userdata) { 304 if (userdata) {
295 userdata = JSON.parse(userdata); 305 userdata = JSON.parse(userdata);
296 var obj = { 306 var obj = {
297 "caseStudyId":this.$route.params.caseStudyId, 307 "caseStudyId":this.$route.params.caseStudyId,
298 "rating":this.rating 308 "rating":this.rating
299 } 309 }
300 axios 310 axios
301 .post("/caseStudy/rating",obj, { 311 .post("/caseStudy/rating",obj, {
302 headers: { 312 headers: {
303 Authorization: "Bearer " + userdata.token, 313 Authorization: "Bearer " + userdata.token,
304 }, 314 },
305 }) 315 })
306 .then((response) => { 316 .then((response) => {
307 console.log("response",response) 317 console.log("response",response)
308 // this.rating = response.data.data.Avgrating; 318 // this.rating = response.data.data.Avgrating;
309 }) 319 })
310 .catch((error) => console.log(error)); 320 .catch((error) => console.log(error));
311 } 321 }
312 }, 322 },
313 goToLogin() { 323 goToLogin() {
314 this.$router.push("/login"); 324 this.$router.push("/login");
315 }, 325 },
316 goToSignUp() { 326 goToSignUp() {
317 this.$router.push("/"); 327 this.$router.push("/");
318 }, 328 },
319 goToProfile() { 329 goToProfile() {
320 this.$router.push("/profile"); 330 this.$router.push("/profile");
321 }, 331 },
322 }, 332 },
323 }; 333 };
324 </script> 334 </script>
325 <style> 335 <style>
326 .vue-star-rating-rating-text[data-v-fde73a0c] { 336 .vue-star-rating-rating-text[data-v-fde73a0c] {
327 margin-left: 7px; 337 margin-left: 7px;
328 display: none; 338 display: none;
329 } 339 }
330 </style> 340 </style>
331 341