Commit 13fc2e78df8d592a2a0a6953c3106cc7392b12d3
1 parent
a57bb0addc
Exists in
master
change in layout
Showing
8 changed files
with
69 additions
and
47 deletions
Show diff stats
src/assets/css/custom.css
| 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 | font-family: 'Montserrat', sans-serif; |
| 15 | } | 15 | } |
| 16 | #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;} |
| 17 | /* heading */ | 17 | /* heading */ |
| 18 | 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;} |
| 19 | 19 | ||
| 20 | /* spaces */ | 20 | /* spaces */ |
| 21 | .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } | 21 | .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } |
| 22 | 22 | ||
| 23 | 23 | ||
| 24 | .h-100{height: 100%;} | 24 | .h-100{height: 100%;} |
| 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 | .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; |
| 26 | background-size: 45%;} | 26 | background-size: 45%;} |
| 27 | /* navbar */ | 27 | /* navbar */ |
| 28 | .spotLight-nav{ padding-top: 20px; z-index: 5;} | 28 | .spotLight-nav{ padding-top: 20px; z-index: 5;} |
| 29 | .spotLight-nav li a{font-family: 'Montserrat', sans-serif; | 29 | .spotLight-nav li a{font-family: 'Montserrat', sans-serif; |
| 30 | font-size: 16px; | 30 | font-size: 16px; |
| 31 | font-style: normal; | 31 | font-style: normal; |
| 32 | font-weight: 400; | 32 | font-weight: 400; |
| 33 | line-height: 22px; | 33 | line-height: 22px; |
| 34 | letter-spacing: -0.7470597624778748px; | 34 | letter-spacing: -0.7470597624778748px; |
| 35 | text-align: left; color:#000; opacity: 0.6; | 35 | text-align: left; color:#000; opacity: 0.6; |
| 36 | } | 36 | } |
| 37 | .spotLight-nav li {margin-right: 14px;} | 37 | .spotLight-nav li {margin-right: 14px;} |
| 38 | .spotLight-nav li.active a{font-weight: 600; opacity: 1;} | 38 | .spotLight-nav li.active a{font-weight: 600; opacity: 1;} |
| 39 | .spotLight-nav li.spotLight-img a{opacity: 1;} | 39 | .spotLight-nav li.spotLight-img a{opacity: 1;} |
| 40 | .navbar-brand{ margin-right: 57px;} | 40 | .navbar-brand{ margin-right: 57px;} |
| 41 | 41 | ||
| 42 | /* ul list style */ | 42 | /* ul list style */ |
| 43 | .sign-in-up-list{ width:450px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; | 43 | .sign-in-up-list{ width:450px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; |
| 44 | font-size: 20px; | 44 | font-size: 20px; |
| 45 | font-style: normal; | 45 | font-style: normal; |
| 46 | font-weight: 500; | 46 | font-weight: 500; |
| 47 | line-height: 24px; float: left; margin-top: 24px; } | 47 | line-height: 24px; float: left; margin-top: 24px; } |
| 48 | .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;} |
| 49 | .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;} |
| 50 | .sign-in-up-list li span{ float: left;} | 50 | .sign-in-up-list li span{ float: left;} |
| 51 | /* form */ | 51 | /* form */ |
| 52 | .form-layout{ width: 100%; display: block; float: left;} | 52 | .form-layout{ width: 100%; display: block; float: left;} |
| 53 | .form-layout form{ display:block; float: left; width: 100%;} | 53 | .form-layout form{ display:block; float: left; width: 100%;} |
| 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 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;} |
| 55 | .form-layout .social-login{ display: block; width: 339px; | 55 | .form-layout .social-login{ display: block; width: 339px; |
| 56 | margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } | 56 | margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } |
| 57 | .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;} |
| 58 | .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;} |
| 59 | .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;} |
| 60 | .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 ;} |
| 61 | 61 | ||
| 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 | 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; |
| 63 | 63 | ||
| 64 | font-family: 'Montserrat', sans-serif; | 64 | font-family: 'Montserrat', sans-serif; |
| 65 | font-size: 13px; | 65 | font-size: 13px; |
| 66 | font-style: normal; | 66 | font-style: normal; |
| 67 | font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} | 67 | font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} |
| 68 | form input:focus{ box-shadow:0px !important; outline: 0px !important;} | 68 | form input:focus{ box-shadow:0px !important; outline: 0px !important;} |
| 69 | 69 | ||
| 70 | /* placeholder */ | 70 | /* placeholder */ |
| 71 | form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ | 71 | form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ |
| 72 | line-height: 18px; | 72 | line-height: 18px; |
| 73 | color: #000000; | 73 | color: #000000; |
| 74 | opacity: 0.5; | 74 | opacity: 0.5; |
| 75 | font-family: 'Montserrat', sans-serif; | 75 | font-family: 'Montserrat', sans-serif; |
| 76 | font-size: 13px; | 76 | font-size: 13px; |
| 77 | font-style: normal; | 77 | font-style: normal; |
| 78 | font-weight: 600; | 78 | font-weight: 600; |
| 79 | } | 79 | } |
| 80 | 80 | ||
| 81 | form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 81 | form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 82 | line-height: 18px; | 82 | line-height: 18px; |
| 83 | color: #000000; | 83 | color: #000000; |
| 84 | opacity: 0.5; | 84 | opacity: 0.5; |
| 85 | font-family: 'Montserrat', sans-serif; | 85 | font-family: 'Montserrat', sans-serif; |
| 86 | font-size: 13px; | 86 | font-size: 13px; |
| 87 | font-style: normal; | 87 | font-style: normal; |
| 88 | font-weight: 600; | 88 | font-weight: 600; |
| 89 | } | 89 | } |
| 90 | 90 | ||
| 91 | form input::-ms-input-placeholder { /* Microsoft Edge */ | 91 | form input::-ms-input-placeholder { /* Microsoft Edge */ |
| 92 | line-height: 18px; | 92 | line-height: 18px; |
| 93 | color: #000000; | 93 | color: #000000; |
| 94 | opacity: 0.5; | 94 | opacity: 0.5; |
| 95 | font-family: 'Montserrat', sans-serif; | 95 | font-family: 'Montserrat', sans-serif; |
| 96 | font-size: 13px; | 96 | font-size: 13px; |
| 97 | font-style: normal; | 97 | font-style: normal; |
| 98 | font-weight: 600; | 98 | font-weight: 600; |
| 99 | } | 99 | } |
| 100 | /* placeholder */ | 100 | /* placeholder */ |
| 101 | .sb-button{ background: #514DA7; | 101 | .sb-button{ background: #514DA7; |
| 102 | height: 50px; | 102 | height: 50px; |
| 103 | line-height: 35px; | 103 | line-height: 35px; |
| 104 | color: #fff; | 104 | color: #fff; |
| 105 | font-family: 'Montserrat', sans-serif; | 105 | font-family: 'Montserrat', sans-serif; |
| 106 | font-size: 13px; | 106 | font-size: 13px; |
| 107 | font-style: normal; | 107 | font-style: normal; |
| 108 | font-weight: 600; | 108 | font-weight: 600; |
| 109 | width: 100%;} | 109 | width: 100%;} |
| 110 | .sb-button img{ margin-right: 10px; width: 20px;} | 110 | .sb-button img{ margin-right: 10px; width: 20px;} |
| 111 | .sb-button:hover{ color:#fff;} | 111 | .sb-button:hover{ color:#fff;} |
| 112 | .form-layout p{margin-top:17px ;} | 112 | .form-layout p{margin-top:17px ;} |
| 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{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;} |
| 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 p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} |
| 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{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;} |
| 116 | .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; |
| 117 | } | 117 | } |
| 118 | .form-layout p a:hover{ color:#000;} | 118 | .form-layout p a:hover{ color:#000;} |
| 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{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;} |
| 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 h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} |
| 121 | .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;} |
| 122 | .welcome-hd-back{ | 122 | .welcome-hd-back{ |
| 123 | font-family: 'Bebas Neue', cursive; | 123 | font-family: 'Bebas Neue', cursive; |
| 124 | font-style: normal; | 124 | font-style: normal; |
| 125 | font-weight: 600; | 125 | font-weight: 600; |
| 126 | font-size: 106px; | 126 | font-size: 106px; |
| 127 | line-height: 106px; | 127 | line-height: 106px; |
| 128 | color: #000000; | 128 | color: #000000; |
| 129 | } | 129 | } |
| 130 | .form-layout .go-back span{ font-weight: 500 !important;} | 130 | .form-layout .go-back span{ font-weight: 500 !important;} |
| 131 | .reset-pass-spc{ margin-top: 110px;} | 131 | .reset-pass-spc{ margin-top: 110px;} |
| 132 | 132 | ||
| 133 | /* profile */ | 133 | /* profile */ |
| 134 | .inner-wrp { | 134 | .inner-wrp { |
| 135 | height: 100%; | 135 | height: 100%; |
| 136 | padding-left: 37px; | 136 | padding-left: 37px; |
| 137 | padding-right: 37px; | 137 | padding-right: 37px; |
| 138 | background:#fff;; | 138 | background:#fff;; |
| 139 | font-family: 'Montserrat', sans-serif; | 139 | font-family: 'Montserrat', sans-serif; |
| 140 | 140 | ||
| 141 | } | 141 | } |
| 142 | .user-profile-photo{ width: 40px; position: relative; display: block; | 142 | .user-profile-photo{ width: 40px; position: relative; display: block; |
| 143 | height: 40px; | 143 | height: 40px; |
| 144 | border-radius: 100px; | 144 | border-radius: 100px; |
| 145 | padding: 1px;} | 145 | padding: 1px;} |
| 146 | .user-profile-photo a, img{ width: 100%;} | 146 | .user-profile-photo a, img{ width: 100%;} |
| 147 | .inner-profile-ps{ width: 120px; height: 120px; float: left; display: block;} | 147 | .inner-profile-ps{ width: 120px; height: 120px; float: left; display: block;} |
| 148 | .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;} |
| 149 | .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;} |
| 150 | .user-profile{ display: block; | 150 | .user-profile{ display: block; |
| 151 | float: left; | 151 | float: left; |
| 152 | margin-left:30px; | 152 | margin-left:30px; |
| 153 | position: relative; | 153 | position: relative; |
| 154 | width: 760px;} | 154 | width: 760px;} |
| 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 | .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;} |
| 156 | .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;} |
| 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 span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} |
| 158 | .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;} |
| 159 | .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;} |
| 160 | .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;} |
| 161 | .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; } |
| 162 | .joined-info li a{ color:#000; opacity: 0.5;} | 162 | .joined-info li a{ color:#000; 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 span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} |
| 164 | .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;} |
| 165 | .joined-info li{ float: left;} | 165 | .joined-info li{ float: left;} |
| 166 | 166 | ||
| 167 | /* list style */ | 167 | /* list style */ |
| 168 | .list-style-group{ width: 100%; display: block; float: left;} | 168 | .list-style-group{ width: 100%; display: block; float: left;} |
| 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-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} |
| 170 | .list-style{list-style-type: none; margin:0px; padding: 0px;} | 170 | .list-style{list-style-type: none; margin:0px; padding: 0px;} |
| 171 | .list-style li{ float: left;} | 171 | .list-style li{ float: left;} |
| 172 | .list-style li a{ display: block; float: left;} | 172 | .list-style li a{ display: block; float: left;} |
| 173 | .list-style li a img{ width: 48px; display: block; float: left; } | 173 | .list-style li a img{ width: 48px; display: block; float: left; } |
| 174 | .list-spc-top{ margin-top:15px ;} | 174 | .list-spc-top{ margin-top:15px ;} |
| 175 | 175 | ||
| 176 | /* social connects */ | 176 | /* social connects */ |
| 177 | .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;} |
| 178 | .social-connects li{ float: left; margin-right:0px ; margin-left: 6px;} | 178 | .social-connects li{ float: left; margin-right:0px ; margin-left: 6px;} |
| 179 | .social-connects li a{ display: block; float: left; padding: 11px;} | 179 | .social-connects li a{ display: block; float: left; padding: 11px;} |
| 180 | .social-connects li a img.twitter{ margin-top:3px;} | 180 | .social-connects li a img.twitter{ margin-top:3px;} |
| 181 | .social-connects li a{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} | 181 | .social-connects li a{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} |
| 182 | .social-connects li a:hover{background: #EF484F;} | 182 | .social-connects li a:hover{background: #EF484F;} |
| 183 | .social-connects li a:hover img{ | 183 | .social-connects li a:hover img{ |
| 184 | -webkit-filter: brightness(15); | 184 | -webkit-filter: brightness(15); |
| 185 | filter:brightness(15); | 185 | filter:brightness(15); |
| 186 | } | 186 | } |
| 187 | .social-connects li a img{ width: 19px; display: block; float: left;} | 187 | .social-connects li a img{ width: 19px; display: block; float: left;} |
| 188 | .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; | 188 | .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; |
| 189 | float: left;} | 189 | float: left;} |
| 190 | .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;} | 190 | .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;} |
| 191 | 191 | ||
| 192 | /* profile tab */ | 192 | /* profile tab */ |
| 193 | .profile-tab-spc-top{margin-top:25px ; padding-top: 15px;} | 193 | .profile-tab-spc-top{margin-top:25px ; padding-top: 15px;} |
| 194 | .top-brd{border-top: 1px solid #DFE7EF;} | 194 | .top-brd{border-top: 1px solid #DFE7EF;} |
| 195 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} | 195 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} |
| 196 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} | 196 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} |
| 197 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} | 197 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} |
| 198 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } | 198 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } |
| 199 | 199 | ||
| 200 | /* profile data wrp */ | 200 | /* profile data wrp */ |
| 201 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} | 201 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} |
| 202 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} | 202 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} |
| 203 | .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-1.png'); background-repeat: no-repeat; background-position: top 0 right 20px; float: left; margin-right: 68px;} | 203 | .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-1.png'); background-repeat: no-repeat; background-position: top 0 right 20px; float: left; margin-right: 68px;} |
| 204 | .company-detail{ width: 100%; | 204 | .company-detail{ width: 100%; |
| 205 | display: block; | 205 | display: block; |
| 206 | float: left; | 206 | float: left; |
| 207 | position: relative; | 207 | position: relative; |
| 208 | margin-top: -63px; | 208 | margin-top: -63px; |
| 209 | margin-bottom: 21px;} | 209 | margin-bottom: 21px;} |
| 210 | .company-detail .c-logo{ width: 82px; display: block; float: left;} | 210 | .company-detail .c-logo{ width: 82px; display: block; float: left;} |
| 211 | .company-detail .c-logo img{ width: 100%;} | 211 | .company-detail .c-logo img{ width: 100%;} |
| 212 | .company-detail .c-tag img{ width: 100%;} | 212 | .company-detail .c-tag img{ width: 100%;} |
| 213 | .company-detail .c-tag { width: 89px; display: block; float: right;} | 213 | .company-detail .c-tag { width: 89px; display: block; float: right;} |
| 214 | .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;} | 214 | .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;} |
| 215 | .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;} | 215 | .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;} |
| 216 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} | 216 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} |
| 217 | .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;} | 217 | .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;} |
| 218 | .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; } | 218 | .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; } |
| 219 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} | 219 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} |
| 220 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} | 220 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} |
| 221 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 100px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} | 221 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 100px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} |
| 222 | /* colors */ | 222 | /* colors */ |
| 223 | .cape-honey{ background: #fde2a3;} | 223 | .cape-honey{ background: #fde2a3;} |
| 224 | .rose-bud{ background: #fba29a;} | 224 | .rose-bud{ background: #fba29a;} |
| 225 | .pattens-blue{ background: #ceeced;} | 225 | .pattens-blue{ background: #ceeced;} |
| 226 | 226 | ||
| 227 | .insight-design{ background: #FBC647;} | 227 | .insight-design{ background: #FBC647;} |
| 228 | .insight-product{ background: #9DDADB;} | 228 | .insight-product{ background: #9DDADB;} |
| 229 | .insight-marketing{ background: #F74536;} | 229 | .insight-marketing{ background: #F74536;} |
| 230 | .insight-pricing{ background: #C1C0FE;} | 230 | .insight-pricing{ background: #C1C0FE;} |
| 231 | .insight-psychology{ background: #477970;} | 231 | .insight-psychology{ background: #477970;} |
| 232 | .no-cursor{ | 232 | .no-cursor{ |
| 233 | cursor: default !important; | 233 | cursor: default !important; |
| 234 | } | 234 | } |
| 235 | .no-underline{ | 235 | .no-underline{ |
| 236 | text-decoration: none !important; | 236 | text-decoration: none !important; |
| 237 | } | 237 | } |
| 238 | .cursor-pointer{ | 238 | .cursor-pointer{ |
| 239 | cursor: pointer !important; | 239 | cursor: pointer !important; |
| 240 | } | 240 | } |
| 241 | /* add new card */ | 241 | /* add new card */ |
| 242 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} | 242 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} |
| 243 | .add-card-warpper a{ display: block; | 243 | .add-card-warpper a{ display: block; |
| 244 | width: 86px; | 244 | width: 86px; |
| 245 | margin: 0 auto; | 245 | margin: 0 auto; |
| 246 | margin-top: 92px;} | 246 | margin-top: 92px;} |
| 247 | 247 | ||
| 248 | /* New Profile Buttons */ | 248 | /* New Profile Buttons */ |
| 249 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} | 249 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} |
| 250 | /* button sm */ | 250 | /* button sm */ |
| 251 | .profile-sm-bt{ width: 180px; | 251 | .profile-sm-bt{ width: 180px; |
| 252 | height: 54px; | 252 | height: 54px; |
| 253 | border-radius: 5px; | 253 | border-radius: 5px; |
| 254 | border: 1px solid #514DA7; | 254 | border: 1px solid #514DA7; |
| 255 | color: #514DA7; | 255 | color: #514DA7; |
| 256 | font-size: 16px; | 256 | font-size: 16px; |
| 257 | font-weight: 500; | 257 | font-weight: 500; |
| 258 | display: block; | 258 | display: block; |
| 259 | line-height: 55px; | 259 | line-height: 55px; |
| 260 | text-align: center;} | 260 | text-align: center;} |
| 261 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 261 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 262 | /* button md */ | 262 | /* button md */ |
| 263 | .profile-md-bt{ width:233px; | 263 | .profile-md-bt{ width:233px; |
| 264 | height: 54px; | 264 | height: 54px; |
| 265 | border-radius: 5px; | 265 | border-radius: 5px; |
| 266 | border: 1px solid #514DA7; | 266 | border: 1px solid #514DA7; |
| 267 | color: #514DA7; | 267 | color: #514DA7; |
| 268 | font-size: 16px; | 268 | font-size: 16px; |
| 269 | font-weight: 500; | 269 | font-weight: 500; |
| 270 | display: block; | 270 | display: block; |
| 271 | line-height: 55px; | 271 | line-height: 55px; |
| 272 | text-align: center;} | 272 | text-align: center;} |
| 273 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 273 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 274 | /* button lg */ | 274 | /* button lg */ |
| 275 | .profile-lg-bt{ width:261px; | 275 | .profile-lg-bt{ width:261px; |
| 276 | height: 54px; | 276 | height: 54px; |
| 277 | border-radius: 5px; | 277 | border-radius: 5px; |
| 278 | border: 1px solid #514DA7; | 278 | border: 1px solid #514DA7; |
| 279 | color: #514DA7; | 279 | color: #514DA7; |
| 280 | font-size: 16px; | 280 | font-size: 16px; |
| 281 | font-weight: 500; | 281 | font-weight: 500; |
| 282 | display: block; | 282 | display: block; |
| 283 | line-height: 55px; | 283 | line-height: 55px; |
| 284 | text-align: center;} | 284 | text-align: center;} |
| 285 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 285 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 286 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} | 286 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} |
| 287 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} | 287 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 288 | /* Replies */ | 288 | /* Replies */ |
| 289 | .replies{ display: block; float: left;} | 289 | .replies{ display: block; float: left;} |
| 290 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} | 290 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} |
| 291 | .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;} | 291 | .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;} |
| 292 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; | 292 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; |
| 293 | font-size: 12px; | 293 | font-size: 12px; |
| 294 | font-style: normal; | 294 | font-style: normal; |
| 295 | font-weight: 400; | 295 | font-weight: 400; |
| 296 | line-height: 14px; color:#000; opacity: 0.5;} | 296 | line-height: 14px; color:#000; opacity: 0.5;} |
| 297 | .comment-spc{ margin-left:9px ;} | 297 | .comment-spc{ margin-left:9px ;} |
| 298 | .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;} | 298 | .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;} |
| 299 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} | 299 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} |
| 300 | 300 | ||
| 301 | /* team */ | 301 | /* team */ |
| 302 | .verified-team{ width: 129px; | 302 | .verified-team{ width: 129px; |
| 303 | display: inline-table; | 303 | display: inline-table; |
| 304 | margin-top: 7px; | 304 | margin-top: 7px; |
| 305 | position: absolute; | 305 | position: absolute; |
| 306 | margin-left: 10px;} | 306 | margin-left: 10px;} |
| 307 | .verified-team img{ width: 100%; display: block; float: left;} | 307 | .verified-team img{ width: 100%; display: block; float: left;} |
| 308 | .active-company{ border-bottom: 4px solid #ef484f;} | 308 | .active-company{ border-bottom: 4px solid #ef484f;} |
| 309 | .active-company a{ font-weight: 700 !important;} | 309 | .active-company a{ font-weight: 700 !important;} |
| 310 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} | 310 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} |
| 311 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} | 311 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} |
| 312 | .c-social li a img{ width: auto !important;} | 312 | .c-social li a img{ width: auto !important;} |
| 313 | .company-footer{ width: 100%; display: block; float: left;} | 313 | .company-footer{ width: 100%; display: block; float: left;} |
| 314 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} | 314 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} |
| 315 | .company-footer ul li{float: left; margin-right: 10px;} | 315 | .company-footer ul li{float: left; margin-right: 10px;} |
| 316 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} | 316 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} |
| 317 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} | 317 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} |
| 318 | .company-footer .next{float: right; margin-top: -25px; | 318 | .company-footer .next{float: right; margin-top: -25px; |
| 319 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} | 319 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} |
| 320 | .company-footer .next img{ width: 25px; | 320 | .company-footer .next img{ width: 25px; |
| 321 | margin-top: 17px; | 321 | margin-top: 17px; |
| 322 | margin-left: 16px;} | 322 | margin-left: 16px;} |
| 323 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} | 323 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} |
| 324 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; | 324 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; |
| 325 | border-radius: 4px; | 325 | border-radius: 4px; |
| 326 | padding: 23px; } | 326 | padding: 23px; } |
| 327 | /* members */ | 327 | /* members */ |
| 328 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} | 328 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} |
| 329 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} | 329 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} |
| 330 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} | 330 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} |
| 331 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} | 331 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} |
| 332 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} | 332 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} |
| 333 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} | 333 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} |
| 334 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} | 334 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} |
| 335 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} | 335 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} |
| 336 | .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; | 336 | .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; |
| 337 | margin-left: 8px !important; | 337 | margin-left: 8px !important; |
| 338 | margin-top: 6px; | 338 | margin-top: 6px; |
| 339 | border-radius: 5px;} | 339 | border-radius: 5px;} |
| 340 | 340 | ||
| 341 | /* popup */ | 341 | /* popup */ |
| 342 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} | 342 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} |
| 343 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} | 343 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} |
| 344 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ | 344 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ |
| 345 | filter: blur(8px); | 345 | filter: blur(8px); |
| 346 | -webkit-filter: blur(8px);} | 346 | -webkit-filter: blur(8px);} |
| 347 | .popup-set{ width: 530px; | 347 | .popup-set{ width: 530px; |
| 348 | background-color: #fff; | 348 | background-color: #fff; |
| 349 | border-radius: 0 40px 40px 40px; | 349 | border-radius: 0 40px 40px 40px; |
| 350 | padding: 30px; | 350 | padding: 30px; |
| 351 | position: relative; | 351 | position: relative; |
| 352 | margin: 0 auto; | 352 | margin: 0 auto; |
| 353 | margin-top: 80px;} | 353 | margin-top: 80px;} |
| 354 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} | 354 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} |
| 355 | .popup-header img{ width: 109px; display: block; float: left;} | 355 | .popup-header img{ width: 109px; display: block; float: left;} |
| 356 | .popup-header ul{ display: block; | 356 | .popup-header ul{ display: block; |
| 357 | list-style-type: none; | 357 | list-style-type: none; |
| 358 | margin: 0px; | 358 | margin: 0px; |
| 359 | padding: 0px; | 359 | padding: 0px; |
| 360 | margin-top: 75px; | 360 | margin-top: 75px; |
| 361 | margin-left: 20px; | 361 | margin-left: 20px; |
| 362 | float: left;} | 362 | float: left;} |
| 363 | .popup-header ul li{ float: left; margin-right: 31px;} | 363 | .popup-header ul li{ float: left; margin-right: 31px;} |
| 364 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} | 364 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} |
| 365 | .popup-header ul li a{color:#514DA7;} | 365 | .popup-header ul li a{color:#514DA7;} |
| 366 | .popup-header ul li a span{ display: block; | 366 | .popup-header ul li a span{ display: block; |
| 367 | float: left; | 367 | float: left; |
| 368 | margin-left: 10px; | 368 | margin-left: 10px; |
| 369 | width: 50px; | 369 | width: 50px; |
| 370 | font-size: 14px; | 370 | font-size: 14px; |
| 371 | line-height: 17px; | 371 | line-height: 17px; |
| 372 | margin-top: -10px;} | 372 | margin-top: -10px;} |
| 373 | .popup-body{ width: 100%; | 373 | .popup-body{ width: 100%; |
| 374 | display: block; | 374 | display: block; |
| 375 | float: left; | 375 | float: left; |
| 376 | max-height: 450px; | 376 | max-height: 450px; |
| 377 | overflow-y: auto; | 377 | overflow-y: auto; |
| 378 | padding-right: 16px;} | 378 | padding-right: 16px;} |
| 379 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} | 379 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} |
| 380 | 380 | ||
| 381 | 381 | ||
| 382 | .popup-forms .floating-label label{font-size: 11px; | 382 | .popup-forms .floating-label label{font-size: 11px; |
| 383 | line-height: 19px; | 383 | line-height: 19px; |
| 384 | font-size: 16px; | 384 | font-size: 16px; |
| 385 | font-weight: 400; | 385 | font-weight: 400; |
| 386 | color: #000; | 386 | color: #000; |
| 387 | position: absolute; | 387 | position: absolute; |
| 388 | margin: 0px 10px 0 10px; | 388 | margin: 0px 10px 0 10px; |
| 389 | background: #fff; | 389 | background: #fff; |
| 390 | padding: 0 3px; | 390 | padding: 0 3px; |
| 391 | position: absolute; | 391 | position: absolute; |
| 392 | pointer-events: none; | 392 | pointer-events: none; |
| 393 | top: 15px; opacity: 0.5; | 393 | top: 15px; opacity: 0.5; |
| 394 | transition: 0.2s ease all; | 394 | transition: 0.2s ease all; |
| 395 | -moz-transition: 0.2s ease all; | 395 | -moz-transition: 0.2s ease all; |
| 396 | -webkit-transition: 0.2s ease all; | 396 | -webkit-transition: 0.2s ease all; |
| 397 | } | 397 | } |
| 398 | 398 | ||
| 399 | .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;} | 399 | .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;} |
| 400 | .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;} | 400 | .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;} |
| 401 | 401 | ||
| 402 | .popup-forms .floating-input input:focus{ outline: none;} | 402 | .popup-forms .floating-input input:focus{ outline: none;} |
| 403 | .popup-forms .floating-label input:focus~label{ | 403 | .popup-forms .floating-label input:focus~label{ |
| 404 | top: -11px; | 404 | top: -11px; |
| 405 | color: #514DA7; | 405 | color: #514DA7; |
| 406 | font-size: 14px;background:#fff; | 406 | font-size: 14px;background:#fff; |
| 407 | opacity:1; | 407 | opacity:1; |
| 408 | } | 408 | } |
| 409 | .popup-forms .floating-label input:not(:placeholder-shown)~label { | 409 | .popup-forms .floating-label input:not(:placeholder-shown)~label { |
| 410 | position: absolute; | 410 | position: absolute; |
| 411 | top: -11px; | 411 | top: -11px; |
| 412 | background:#fff; | 412 | background:#fff; |
| 413 | 413 | ||
| 414 | font-size: 14px; | 414 | font-size: 14px; |
| 415 | color: #514DA7;opacity:1; | 415 | color: #514DA7;opacity:1; |
| 416 | } | 416 | } |
| 417 | /* textarea */ | 417 | /* textarea */ |
| 418 | .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;} | 418 | .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;} |
| 419 | .popup-forms .floating-input textarea:focus{ outline: none;} | 419 | .popup-forms .floating-input textarea:focus{ outline: none;} |
| 420 | .popup-forms .floating-label textarea:focus~label{ | 420 | .popup-forms .floating-label textarea:focus~label{ |
| 421 | top: -11px; | 421 | top: -11px; |
| 422 | color: #514DA7; | 422 | color: #514DA7; |
| 423 | font-size: 14px;background:#fff; | 423 | font-size: 14px;background:#fff; |
| 424 | opacity:1; | 424 | opacity:1; |
| 425 | } | 425 | } |
| 426 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { | 426 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { |
| 427 | position: absolute; | 427 | position: absolute; |
| 428 | top: -11px; | 428 | top: -11px; |
| 429 | background:#fff; | 429 | background:#fff; |
| 430 | 430 | ||
| 431 | font-size: 14px; | 431 | font-size: 14px; |
| 432 | color: #514DA7;opacity:1; | 432 | color: #514DA7;opacity:1; |
| 433 | } | 433 | } |
| 434 | .popup-forms .form-group{ margin-bottom: 20px;} | 434 | .popup-forms .form-group{ margin-bottom: 20px;} |
| 435 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} | 435 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} |
| 436 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} | 436 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} |
| 437 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } | 437 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } |
| 438 | .interests li{ float: left; margin-right: 20px; position: relative;} | 438 | .interests li{ float: left; margin-right: 20px; position: relative;} |
| 439 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; | 439 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; |
| 440 | border-radius: 5px;} | 440 | border-radius: 5px;} |
| 441 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; | 441 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; |
| 442 | border-radius: 5px; background-color: #fff !important; width: 125px;} | 442 | border-radius: 5px; background-color: #fff !important; width: 125px;} |
| 443 | .interests li a{ width: 20px; | 443 | .interests li a{ width: 20px; |
| 444 | display: block; | 444 | display: block; |
| 445 | float: right; | 445 | float: right; |
| 446 | margin: 6px 0px 0 114px; | 446 | margin: 6px 0px 0 114px; |
| 447 | position: absolute;} | 447 | position: absolute;} |
| 448 | /* color codes */ | 448 | /* color codes */ |
| 449 | .silver{background-color: #C4C4C4;} | 449 | .silver{background-color: #C4C4C4;} |
| 450 | .milk-punch{background-color: #FFF6D7;} | 450 | .milk-punch{background-color: #FFF6D7;} |
| 451 | .french-pass{background-color: #BDDBFF;} | 451 | .french-pass{background-color: #BDDBFF;} |
| 452 | .cyan-french-pass{background-color: #C0FAFE;} | 452 | .cyan-french-pass{background-color: #C0FAFE;} |
| 453 | .cosmos{background-color: #FFDBDC;} | 453 | .cosmos{background-color: #FFDBDC;} |
| 454 | .cape-Honey{background-color: #FEE6AC;} | 454 | .cape-Honey{background-color: #FEE6AC;} |
| 455 | .snuff{background-color: #E5DFF0;} | 455 | .snuff{background-color: #E5DFF0;} |
| 456 | .catskillWhite{background-color: #DFE7EF;} | 456 | .catskillWhite{background-color: #DFE7EF;} |
| 457 | .white{background-color: #fff;} | 457 | .white{background-color: #fff;} |
| 458 | /* color codes */ | 458 | /* color codes */ |
| 459 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 459 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 460 | .colors li{ display: block; float: left; margin-right: 14px;} | 460 | .colors li{ display: block; float: left; margin-right: 14px;} |
| 461 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} | 461 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} |
| 462 | .colors li a.active{border: 2px solid #514DA7;} | 462 | .colors li a.active{border: 2px solid #514DA7;} |
| 463 | .popup-forms .next-bt{ width: 99px; | 463 | .popup-forms .next-bt{ width: 99px; |
| 464 | height: 54px; | 464 | height: 54px; |
| 465 | background: #514DA7; | 465 | background: #514DA7; |
| 466 | display: block; | 466 | display: block; |
| 467 | text-align: center; | 467 | text-align: center; |
| 468 | border-radius: 5px; | 468 | border-radius: 5px; |
| 469 | color: #fff; | 469 | color: #fff; |
| 470 | font-size: 16px; | 470 | font-size: 16px; |
| 471 | line-height: 54px; | 471 | line-height: 54px; |
| 472 | font-weight: 600; | 472 | font-weight: 600; |
| 473 | position: absolute; | 473 | position: absolute; |
| 474 | right: 50px; | 474 | right: 50px; |
| 475 | bottom: -80px;} | 475 | bottom: -80px;} |
| 476 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} | 476 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} |
| 477 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} | 477 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} |
| 478 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; | 478 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; |
| 479 | display: block; | 479 | display: block; |
| 480 | width: 270px; | 480 | width: 270px; |
| 481 | float: right; | 481 | float: right; |
| 482 | margin-top: 10px;} | 482 | margin-top: 10px;} |
| 483 | .select-arrow{ display: block; | 483 | .select-arrow{ display: block; |
| 484 | float: right; | 484 | float: right; |
| 485 | position: absolute; | 485 | position: absolute; |
| 486 | top: 13px; | 486 | top: 13px; |
| 487 | right: 17px; | 487 | right: 17px; |
| 488 | background: #fff; | 488 | background: #fff; |
| 489 | width: 31px; | 489 | width: 31px; |
| 490 | height: 17px;} | 490 | height: 17px;} |
| 491 | .select-arrow img{width: 15px;} | 491 | .select-arrow img{width: 15px;} |
| 492 | .popup-forms .save-bt{ width: 150px; | 492 | .popup-forms .save-bt{ width: 150px; |
| 493 | height: 54px; | 493 | height: 54px; |
| 494 | background: #514DA7; | 494 | background: #514DA7; |
| 495 | display: block; | 495 | display: block; |
| 496 | text-align: center; | 496 | text-align: center; |
| 497 | border-radius: 5px; | 497 | border-radius: 5px; |
| 498 | color: #fff; | 498 | color: #fff; |
| 499 | font-size: 16px; | 499 | font-size: 16px; |
| 500 | line-height: 54px; | 500 | line-height: 54px; |
| 501 | font-weight: 600; | 501 | font-weight: 600; |
| 502 | position: absolute; | 502 | position: absolute; |
| 503 | right: 50px; | 503 | right: 50px; |
| 504 | bottom: -80px;} | 504 | bottom: -80px;} |
| 505 | /* insights */ | 505 | /* insights */ |
| 506 | .insights-wrp{ background-image: url(../images/insights-bg.svg); | 506 | .insights-wrp{ background-image: url(../images/insights-bg.svg); |
| 507 | background-color: #DFE7EF; | 507 | background-color: #DFE7EF; |
| 508 | height: 100%; | 508 | height: 100%; |
| 509 | background-repeat: no-repeat; | 509 | background-repeat: no-repeat; |
| 510 | background-position: top center; | 510 | background-position: top center; |
| 511 | background-size: contain; padding: 0 50px 0 100px;} | 511 | background-size: contain; padding: 0 50px 0 100px;} |
| 512 | .insights-profile{width: 32px; | 512 | .insights-profile{width: 32px; |
| 513 | height: 32px; | 513 | height: 32px; |
| 514 | float: right; | 514 | float: right; |
| 515 | display: block; | 515 | display: block; |
| 516 | position: absolute; | 516 | position: absolute; |
| 517 | right: 0;} | 517 | right: 0;} |
| 518 | .insights-searh a{ width: 21px; | 518 | .insights-searh a{ width: 21px; |
| 519 | height: 25px; | 519 | height: 25px; |
| 520 | display: block; | 520 | display: block; |
| 521 | position: absolute; | 521 | position: absolute; |
| 522 | right: 24px; | 522 | right: 24px; |
| 523 | top: 23px;} | 523 | top: 23px;} |
| 524 | .insights-searh a img{ width: 100%;} | 524 | .insights-searh a img{ width: 100%;} |
| 525 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} | 525 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} |
| 526 | .insights-searh input::-webkit-input-placeholder { /* Edge */ | 526 | .insights-searh input::-webkit-input-placeholder { /* Edge */ |
| 527 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 527 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 528 | } | 528 | } |
| 529 | 529 | ||
| 530 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 530 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 531 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 531 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 532 | } | 532 | } |
| 533 | 533 | ||
| 534 | .insights-searh input::placeholder { | 534 | .insights-searh input::placeholder { |
| 535 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 535 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 536 | } | 536 | } |
| 537 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} | 537 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} |
| 538 | /* insights 2 */ | 538 | /* insights 2 */ |
| 539 | .back-to-lib{ font-size: 12px; | 539 | .back-to-lib{ font-size: 12px; |
| 540 | line-height: 14px; | 540 | line-height: 14px; |
| 541 | color: #000000; | 541 | color: #000000; |
| 542 | font-weight: 500; | 542 | font-weight: 500; |
| 543 | display: block; | 543 | display: block; |
| 544 | float: left;} | 544 | float: left;} |
| 545 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} | 545 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} |
| 546 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} | 546 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} |
| 547 | .insights-list li{ display: block; float: left;} | 547 | .insights-list li{ display: block; float: left;} |
| 548 | .insights-list li a{ display: block; | 548 | .insights-list li a{ display: block; |
| 549 | float: left; | 549 | float: left; |
| 550 | margin: 0px; | 550 | margin: 0px; |
| 551 | padding: 5px 14px; | 551 | padding: 5px 14px; |
| 552 | background: #70A853; | 552 | background: #70A853; |
| 553 | font-size: 15px;text-transform:uppercase; | 553 | font-size: 15px;text-transform:uppercase; |
| 554 | font-weight: 700; | 554 | font-weight: 700; |
| 555 | font-style: normal; | 555 | font-style: normal; |
| 556 | color: #fff; | 556 | color: #fff; |
| 557 | border-radius: 50px;} | 557 | border-radius: 50px;} |
| 558 | .insights-details{ width: 850px;display:block; float: left;} | 558 | .insights-details{ width: 850px;display:block; float: left;} |
| 559 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} | 559 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} |
| 560 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} | 560 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} |
| 561 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} | 561 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} |
| 562 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} | 562 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} |
| 563 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} | 563 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} |
| 564 | .features-group-list li a:hover{ text-decoration: none;} | 564 | .features-group-list li a:hover{ text-decoration: none;} |
| 565 | .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;} | 565 | .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;} |
| 566 | .features-group-list li a img{ width: 9px; } | 566 | .features-group-list li a img{ width: 9px; } |
| 567 | .insights-rply img{ width: 14px;} | 567 | .insights-rply img{ width: 14px;} |
| 568 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} | 568 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} |
| 569 | .insights-rply:hover{color: #70A853;} | 569 | .insights-rply:hover{color: #70A853;} |
| 570 | .active-green{border-bottom: 4px solid #70A853;} | 570 | .active-green{border-bottom: 4px solid #70A853;} |
| 571 | .insights-spc{padding: 0 100px;} | 571 | .insights-spc{padding: 0 100px;} |
| 572 | 572 | ||
| 573 | /* insight page 1 */ | 573 | /* insight page 1 */ |
| 574 | .insights-border{height: 1px; | 574 | .insights-border{height: 1px; |
| 575 | text-align: center; | 575 | text-align: center; |
| 576 | display: block; | 576 | display: block; |
| 577 | background: #FFFFFF; | 577 | background: #FFFFFF; |
| 578 | clear: both; | 578 | clear: both; |
| 579 | width: 100%; | 579 | width: 100%; |
| 580 | margin-top: 30px;} | 580 | margin-top: 30px;} |
| 581 | .insights-border span{ text-align: center; | 581 | .insights-border span{ text-align: center; |
| 582 | position: relative; | 582 | position: relative; |
| 583 | top: -13px; | 583 | top: -13px; |
| 584 | background: #DFE7EF; | 584 | background: #DFE7EF; |
| 585 | margin: 0 11px; | 585 | margin: 0 11px; |
| 586 | padding: 0px 10px;} | 586 | padding: 0px 10px;} |
| 587 | .insights-list-filter{display:table;float:left;width:100%;} | 587 | .insights-list-filter{display:table;float:left;width:100%;} |
| 588 | .insights-list-filter ul{ list-style-type: none; text-align: center; | 588 | .insights-list-filter ul{ list-style-type: none; text-align: center; |
| 589 | margin-top:40px; | 589 | margin-top:40px; |
| 590 | padding: 0px; | 590 | padding: 0px; |
| 591 | display: block; | 591 | display: block; |
| 592 | float: left; | 592 | float: left; |
| 593 | width: 100%;} | 593 | width: 100%;} |
| 594 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} | 594 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} |
| 595 | .insights-list-filter li a{padding: 5px 20px;color: #fff; | 595 | .insights-list-filter li a{padding: 5px 20px;color: #fff; |
| 596 | float: left; | 596 | float: left; |
| 597 | text-transform: uppercase; | 597 | text-transform: uppercase; |
| 598 | line-height: 26px; | 598 | line-height: 26px; |
| 599 | text-align: center; | 599 | text-align: center; |
| 600 | font-weight: 600; | 600 | font-weight: 600; |
| 601 | font-size: 20px; | 601 | font-size: 20px; |
| 602 | border-radius:30px; | 602 | border-radius:30px; |
| 603 | } | 603 | } |
| 604 | .insights-list-filter li a:hover{text-decoration:none;} | 604 | .insights-list-filter li a:hover{text-decoration:none;} |
| 605 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} | 605 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} |
| 606 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} | 606 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} |
| 607 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} | 607 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} |
| 608 | .insights-products p{font-size:15px; margin-bottom: 0px;} | 608 | .insights-products p{font-size:15px; margin-bottom: 0px;} |
| 609 | .insights-products span{float:right;} | 609 | .insights-products span{float:right;} |
| 610 | .insight-mb-spc{margin-bottom:34px;} | 610 | .insight-mb-spc{margin-bottom:34px;} |
| 611 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} | 611 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} |
| 612 | .insights-products a{ width: 18px; display: block; float: right;} | 612 | .insights-products a{ width: 18px; display: block; float: right;} |
| 613 | 613 | ||
| 614 | /* colors */ | 614 | /* colors */ |
| 615 | .lavender-blue-bg{background:#C1C0FE;} | 615 | .lavender-blue-bg{background:#C1C0FE;} |
| 616 | .golden-tainoi-bg{background:#FBC647;} | 616 | .golden-tainoi-bg{background:#FBC647;} |
| 617 | .red-orange-bg{background:#F74536;} | 617 | .red-orange-bg{background:#F74536;} |
| 618 | .morning-glory-bg{background:#9DDADB;} | 618 | .morning-glory-bg{background:#9DDADB;} |
| 619 | .dark-green-copper-bg{background:#477970;} | 619 | .dark-green-copper-bg{background:#477970;} |
| 620 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} | 620 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} |
| 621 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} | 621 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} |
| 622 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} | 622 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} |
| 623 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} | 623 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} |
| 624 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} | 624 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} |
| 625 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} | 625 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} |
| 626 | .radical-red-col{color:#EF484F;} | 626 | .radical-red-col{color:#EF484F;} |
| 627 | .selective-yellow-col{color:#FABB05;} | 627 | .selective-yellow-col{color:#FABB05;} |
| 628 | .lavender-blue-col{color:#C1C0FE;} | 628 | .lavender-blue-col{color:#C1C0FE;} |
| 629 | .dark-green-copper-col{color:#477970;} | 629 | .dark-green-copper-col{color:#477970;} |
| 630 | .purple-heart-col{color:#673AB7;} | 630 | .purple-heart-col{color:#673AB7;} |
| 631 | .silver-col{color:#C4C4C4;} | 631 | .silver-col{color:#C4C4C4;} |
| 632 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} | 632 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} |
| 633 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} | 633 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} |
| 634 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} | 634 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} |
| 635 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} | 635 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} |
| 636 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} | 636 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} |
| 637 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} | 637 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} |
| 638 | /* button */ | 638 | /* button */ |
| 639 | .switch-btn { | 639 | .switch-btn { |
| 640 | position: relative; | 640 | position: relative; |
| 641 | display: inline-block; | 641 | display: inline-block; |
| 642 | width: 44px; | 642 | width: 44px; |
| 643 | height: 24px; | 643 | height: 24px; |
| 644 | } | 644 | } |
| 645 | .switch-btn input { | 645 | .switch-btn input { |
| 646 | opacity: 0; | 646 | opacity: 0; |
| 647 | width: 0; | 647 | width: 0; |
| 648 | height: 0; | 648 | height: 0; |
| 649 | } | 649 | } |
| 650 | .rounded-toggle { | 650 | .rounded-toggle { |
| 651 | position: absolute; | 651 | position: absolute; |
| 652 | cursor: pointer; | 652 | cursor: pointer; |
| 653 | top: 0; | 653 | top: 0; |
| 654 | left: 0; | 654 | left: 0; |
| 655 | right: 0; | 655 | right: 0; |
| 656 | bottom: 0; | 656 | bottom: 0; |
| 657 | background: #DFE7EF; | 657 | background: #DFE7EF; |
| 658 | -webkit-transition: .4s; | 658 | -webkit-transition: .4s; |
| 659 | transition: .4s; | 659 | transition: .4s; |
| 660 | border-radius: 34px; | 660 | border-radius: 34px; |
| 661 | } | 661 | } |
| 662 | .rounded-toggle:before { | 662 | .rounded-toggle:before { |
| 663 | position: absolute; | 663 | position: absolute; |
| 664 | content: ""; | 664 | content: ""; |
| 665 | height: 14px; | 665 | height: 14px; |
| 666 | width: 13px; | 666 | width: 13px; |
| 667 | left: 6px; | 667 | left: 6px; |
| 668 | bottom: 5px; | 668 | bottom: 5px; |
| 669 | background-color: #514DA7; | 669 | background-color: #514DA7; |
| 670 | -webkit-transition: .4s; | 670 | -webkit-transition: .4s; |
| 671 | transition: .4s; | 671 | transition: .4s; |
| 672 | border-radius: 50%; | 672 | border-radius: 50%; |
| 673 | } | 673 | } |
| 674 | .toggle-btn:checked + .rounded-toggle { | 674 | .toggle-btn:checked + .rounded-toggle { |
| 675 | background: #DFE7EF; | 675 | background: #DFE7EF; |
| 676 | } | 676 | } |
| 677 | 677 | ||
| 678 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} | 678 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} |
| 679 | .toggle-btn:focus + .rounded-toggle{ | 679 | .toggle-btn:focus + .rounded-toggle{ |
| 680 | box-shadow: 0 0 1px #2196F3; | 680 | box-shadow: 0 0 1px #2196F3; |
| 681 | } | 681 | } |
| 682 | .toggle-btn:checked + .rounded-toggle:before { | 682 | .toggle-btn:checked + .rounded-toggle:before { |
| 683 | -webkit-transform: translateX(19px); | 683 | -webkit-transform: translateX(19px); |
| 684 | -ms-transform: translateX(19px); | 684 | -ms-transform: translateX(19px); |
| 685 | transform: translateX(19px); | 685 | transform: translateX(19px); |
| 686 | } | 686 | } |
| 687 | .switch-bt-wrp{margin-top: 15px; width: 100px; | 687 | .switch-bt-wrp{margin-top: 15px; width: 100px; |
| 688 | float: right; | 688 | float: right; |
| 689 | text-align: right; } | 689 | text-align: right; } |
| 690 | .switch-btn{float: left ;} | 690 | .switch-btn{float: left ;} |
| 691 | .onoff{ margin-top: -3px; float: right;} | 691 | .onoff{ margin-top: -3px; float: right;} |
| 692 | 692 | ||
| 693 | /* intro Episode */ | 693 | /* intro Episode */ |
| 694 | .episode-intro{ padding: 0 30px 0 30px; height: 100%;} | 694 | .episode-intro{ padding: 0 30px 0 30px; height: 100%;} |
| 695 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; | 695 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; |
| 696 | bottom: 50px; z-index: 2; | 696 | bottom: 50px; z-index: 2; |
| 697 | right: 0; | 697 | right: 0; |
| 698 | left: 0;} | 698 | left: 0;} |
| 699 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} | 699 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} |
| 700 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; | 700 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; |
| 701 | display: block; margin-top: 28px; | 701 | display: block; margin-top: 28px; |
| 702 | } | 702 | } |
| 703 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} | 703 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} |
| 704 | .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;} | 704 | .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;} |
| 705 | .bottom-startup .title{ font-size: 48px; | 705 | .bottom-startup .title{ font-size: 48px; |
| 706 | font-family: 'Zuume'; | 706 | font-family: 'Zuume'; |
| 707 | font-weight: 400; | 707 | font-weight: 400; |
| 708 | line-height: 144px; | 708 | line-height: 144px; |
| 709 | color: #514DA7; | 709 | color: #514DA7; |
| 710 | width: 440px; | 710 | width: 440px; |
| 711 | height: 100%; float: left; | 711 | height: 100%; float: left; |
| 712 | border-right: 0.8px solid #514DA7; | 712 | border-right: 0.8px solid #514DA7; |
| 713 | text-align: center;} | 713 | text-align: center;} |
| 714 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; | 714 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; |
| 715 | } | 715 | } |
| 716 | .bottom-startup .author-sec .top{ width: 100%; | 716 | .bottom-startup .author-sec .top{ width: 100%; |
| 717 | display: block; | 717 | display: block; |
| 718 | float: left; | 718 | float: left; |
| 719 | padding: 20px 10px 10px 10px; | 719 | padding: 20px 10px 10px 10px; |
| 720 | height: 72px;} | 720 | height: 72px;} |
| 721 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 721 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 722 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; | 722 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; |
| 723 | font-family: 'Zuume'; | 723 | font-family: 'Zuume'; |
| 724 | font-weight: 400;} | 724 | font-weight: 400;} |
| 725 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; | 725 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; |
| 726 | border-top: 0.8px solid #514DA7; | 726 | border-top: 0.8px solid #514DA7; |
| 727 | display: block; | 727 | display: block; |
| 728 | float: left; | 728 | float: left; |
| 729 | padding: 0px 10px 0px 10px; | 729 | padding: 0px 10px 0px 10px; |
| 730 | height: 72px;} | 730 | height: 72px;} |
| 731 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} | 731 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} |
| 732 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} | 732 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} |
| 733 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 733 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 734 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; | 734 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; |
| 735 | font-family: 'Zuume'; | 735 | font-family: 'Zuume'; |
| 736 | font-weight: 400;} | 736 | font-weight: 400;} |
| 737 | .bottom-startup .author-sec.info{ width: 90px;} | 737 | .bottom-startup .author-sec.info{ width: 90px;} |
| 738 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } | 738 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } |
| 739 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} | 739 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} |
| 740 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} | 740 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} |
| 741 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} | 741 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} |
| 742 | .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;} | 742 | .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;} |
| 743 | .bottom-startup .start a img{ width: 24px; | 743 | .bottom-startup .start a img{ width: 24px; |
| 744 | display: block; | 744 | display: block; |
| 745 | margin: 0 auto; | 745 | margin: 0 auto; |
| 746 | margin-bottom: 10px;} | 746 | margin-bottom: 10px;} |
| 747 | 747 | ||
| 748 | /* compare */ | 748 | /* compare */ |
| 749 | .compare-c{ width: 475px; | 749 | .compare-c{ width: 475px; |
| 750 | display: block; | 750 | display: block; |
| 751 | margin: 0 auto; | 751 | margin: 0 auto; |
| 752 | bottom: 50%; | 752 | bottom: 50%; |
| 753 | position: absolute; | 753 | position: absolute; |
| 754 | left: 0; | 754 | left: 0; |
| 755 | right: 0; | 755 | right: 0; |
| 756 | z-index: 2;} | 756 | z-index: 2;} |
| 757 | .compare-c .logo-1{ width: 200px; display: block; float: left;} | 757 | .compare-c .logo-1{ width: 200px; display: block; float: left;} |
| 758 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; | 758 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; |
| 759 | margin-top: 25px;} | 759 | margin-top: 25px;} |
| 760 | .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} | 760 | .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} |
| 761 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} | 761 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} |
| 762 | .epi-bg{ position: absolute; | 762 | .epi-bg{ position: absolute; |
| 763 | bottom: -152px; | 763 | bottom: -152px; |
| 764 | left: 18%; width: 1920px; | 764 | left: 18%; width: 1920px; |
| 765 | z-index: 1;} | 765 | z-index: 1;} |
| 766 | /* intro startup */ | 766 | /* intro startup */ |
| 767 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } | 767 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } |
| 768 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } | 768 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } |
| 769 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} | 769 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} |
| 770 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } | 770 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } |
| 771 | .intro-startup .footer-bottom ul li{ height: 5px; | 771 | .intro-startup .footer-bottom ul li{ height: 5px; |
| 772 | display: block; | 772 | display: block; |
| 773 | float: left; | 773 | float: left; |
| 774 | width: 49%; | 774 | width: 49%; |
| 775 | background: #fff;} | 775 | background: #fff;} |
| 776 | .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} | 776 | .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} |
| 777 | .intro-startup .footer-top .top-intro-bt{ width: 240px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } | 777 | .intro-startup .footer-top .top-intro-bt{ width: 240px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } |
| 778 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} | 778 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} |
| 779 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} | 779 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} |
| 780 | .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 12px; display: block; float: left;} | 780 | .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 12px; display: block; float: left;} |
| 781 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;} | 781 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;} |
| 782 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} | 782 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} |
| 783 | .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; | 783 | .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; |
| 784 | right: 0; | 784 | right: 0; |
| 785 | margin: 0 auto; | 785 | margin: 0 auto; |
| 786 | bottom: 0; | 786 | bottom: 0; |
| 787 | top: unset; | 787 | top: unset; |
| 788 | background-position: bottom;} | 788 | background-position: bottom;} |
| 789 | .samsung-compare-c{ width: 382px; | 789 | .samsung-compare-c{ width: 382px; |
| 790 | display: block; | 790 | display: block; |
| 791 | margin: 0 auto; | 791 | margin: 0 auto; |
| 792 | position: absolute; | 792 | position: absolute; |
| 793 | top: 13px; | 793 | top: 13px; |
| 794 | left: 0; | 794 | left: 0; |
| 795 | right: 0; overflow: hidden; | 795 | right: 0; overflow: hidden; |
| 796 | height: 702px;} | 796 | height: 702px;} |
| 797 | .samsung-compare-c img{ width: 100%;} | 797 | .samsung-compare-c img{ width: 100%;} |
| 798 | .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;} | 798 | .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;} |
| 799 | 799 | ||
| 800 | /* comment wrapper */ | 800 | /* comment wrapper */ |
| 801 | .smasung-g-10wrp .comment-box{ width: 428px; | 801 | .smasung-g-10wrp .comment-box{ width: 428px; |
| 802 | display: block; | 802 | display: block; |
| 803 | float: left; right: -394px; | 803 | float: left; right: -394px; |
| 804 | position: absolute; | 804 | position: absolute; |
| 805 | bottom: 100px;} | 805 | bottom: 100px;} |
| 806 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; | 806 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; |
| 807 | border: 1px solid #201E6A; | 807 | border: 1px solid #201E6A; |
| 808 | box-sizing: border-box; | 808 | box-sizing: border-box; |
| 809 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 809 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 810 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} | 810 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} |
| 811 | .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;} | 811 | .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;} |
| 812 | .comment-box-s-1 .footer{background: #F7F9FB; | 812 | .comment-box-s-1 .footer{background: #F7F9FB; |
| 813 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; | 813 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; |
| 814 | box-sizing: border-box; | 814 | box-sizing: border-box; |
| 815 | border-radius: 0px 0px 0px 25px;} | 815 | border-radius: 0px 0px 0px 25px;} |
| 816 | .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;} | 816 | .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;} |
| 817 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} | 817 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} |
| 818 | .key-arrow{ width: 50px; float: left; margin-top:5px;} | 818 | .key-arrow{ width: 50px; float: left; margin-top:5px;} |
| 819 | .comment-w-397{ width: 397px; float: right;} | 819 | .comment-w-397{ width: 397px; float: right;} |
| 820 | .comment-box .user-photo{ width: 200px; display: block; float: right;} | 820 | .comment-box .user-photo{ width: 200px; display: block; float: right;} |
| 821 | .spot-light-top{ width: 927px; | 821 | .spot-light-top{ width: 927px; |
| 822 | height: 100%; position: absolute; | 822 | height: 100%; position: absolute; |
| 823 | top: 0px; | 823 | top: 0px; |
| 824 | overflow: hidden; | 824 | overflow: hidden; |
| 825 | left: -350px; | 825 | left: -350px; |
| 826 | right: 0; | 826 | right: 0; |
| 827 | margin: 0 auto; } | 827 | margin: 0 auto; } |
| 828 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); | 828 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); |
| 829 | border: 1px solid #000000; | 829 | border: 1px solid #000000; |
| 830 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} | 830 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} |
| 831 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; | 831 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; |
| 832 | margin-top: -63px;} | 832 | margin-top: -63px;} |
| 833 | .app-discovery .top-user img{ width:100px; display: block; margin:0 auto; margin-top: 20px;} | 833 | .app-discovery .top-user img{ width:100px; display: block; margin:0 auto; margin-top: 20px;} |
| 834 | .app-discovery h1{font-size: 60px; | 834 | .app-discovery h1{font-size: 60px; |
| 835 | font-family: 'Zuume'; margin-top: 136px; | 835 | font-family: 'Zuume'; margin-top: 136px; |
| 836 | font-weight: 400; | 836 | font-weight: 400; |
| 837 | line-height: 66px; width: 100%; display: block; text-align: center; | 837 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 838 | color: #000;} | 838 | color: #000;} |
| 839 | .app-discovery h2{font-size: 60px; | 839 | .app-discovery h2{font-size: 60px; |
| 840 | font-family: 'Zuume'; | 840 | font-family: 'Zuume'; |
| 841 | font-weight: 300; | 841 | font-weight: 300; |
| 842 | line-height: 66px; width: 100%; display: block; text-align: center; | 842 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 843 | color: #000;} | 843 | color: #000;} |
| 844 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} | 844 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} |
| 845 | .popcorn-set{ position: absolute; width: 120px; display: block; left: 50px; bottom: 0;} | 845 | .popcorn-set{ position: absolute; width: 120px; display: block; left: 50px; bottom: 0;} |
| 846 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } | 846 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } |
| 847 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} | 847 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} |
| 848 | .ft-comments-group{display: block; | 848 | .ft-comments-group{display: block; |
| 849 | float: left; | 849 | float: left; |
| 850 | padding-top: 23px; width: 100%; | 850 | padding-top: 23px; width: 100%; |
| 851 | height: 100%; padding-right: 15px; | 851 | height: 100%; padding-right: 15px; |
| 852 | } | 852 | } |
| 853 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} | 853 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} |
| 854 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 854 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 855 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} | 855 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} |
| 856 | .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;} | 856 | .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;} |
| 857 | .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;} | 857 | .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;} |
| 858 | .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;} | 858 | .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;} |
| 859 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } | 859 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } |
| 860 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} | 860 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} |
| 861 | .ft-comments-group .comments-detail p{ margin-top: 2px; | 861 | .ft-comments-group .comments-detail p{ margin-top: 2px; |
| 862 | font-size: 12px; | 862 | font-size: 12px; |
| 863 | line-height: 14px; | 863 | line-height: 14px; |
| 864 | font-weight: 400; | 864 | font-weight: 400; |
| 865 | color: #000000; | 865 | color: #000000; |
| 866 | margin-bottom: 0px; | 866 | margin-bottom: 0px; |
| 867 | width: 100%; | 867 | width: 100%; |
| 868 | display: block; | 868 | display: block; |
| 869 | float: left;} | 869 | float: left;} |
| 870 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} | 870 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} |
| 871 | .white-bg{ background-color: #fff;} | 871 | .white-bg{ background-color: #fff;} |
| 872 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} | 872 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} |
| 873 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } | 873 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } |
| 874 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } | 874 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } |
| 875 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ | 875 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ |
| 876 | color: #514DA7; font-size: 12px; line-height: 14px; | 876 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 877 | } | 877 | } |
| 878 | 878 | ||
| 879 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 879 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 880 | color: #514DA7; font-size: 12px; line-height: 14px; | 880 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 881 | } | 881 | } |
| 882 | 882 | ||
| 883 | .comment-frm .frm-wdth input::placeholder { | 883 | .comment-frm .frm-wdth input::placeholder { |
| 884 | color: #514DA7; font-size: 12px; line-height: 14px; | 884 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 885 | } | 885 | } |
| 886 | .comment-frm .add-comment{background: #514DA7; | 886 | .comment-frm .add-comment{background: #514DA7; |
| 887 | border-radius: 5px; | 887 | border-radius: 5px; |
| 888 | font-size: 13px; | 888 | font-size: 13px; |
| 889 | line-height: 29px; | 889 | line-height: 29px; |
| 890 | color: #fff; | 890 | color: #fff; |
| 891 | padding: 5px 10px; | 891 | padding: 5px 10px; |
| 892 | display: block; | 892 | display: block; |
| 893 | width:111px; | 893 | width:111px; |
| 894 | float: right; text-align: center; | 894 | float: right; text-align: center; |
| 895 | height: 39px; | 895 | height: 39px; |
| 896 | } | 896 | } |
| 897 | .comment-frm .add-comment img{ width: 14px; | 897 | .comment-frm .add-comment img{ width: 14px; |
| 898 | 898 | ||
| 899 | } | 899 | } |
| 900 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} | 900 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} |
| 901 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} | 901 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} |
| 902 | .s-user-comment { display: block; position: absolute; bottom: 37px; width: 300px;padding:50px} | ||
| 902 | .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} | 903 | .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} |
| 903 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; | 904 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; |
| 904 | border: 1px solid #201E6A; | 905 | border: 1px solid #201E6A; |
| 905 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 906 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 906 | border-radius: 25px 25px 25px 0px; } | 907 | border-radius: 25px 25px 25px 0px; } |
| 907 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} | 908 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} |
| 908 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} | 909 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} |
| 909 | .rly-comment-set li{ float: left; margin-right: 15px;} | 910 | .rly-comment-set li{ float: left; margin-right: 15px;} |
| 910 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} | 911 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} |
| 911 | .rly-comment-set li img{ width: 13px; | 912 | .rly-comment-set li img{ width: 13px; |
| 912 | float: left; | 913 | float: left; |
| 913 | display: block; | 914 | display: block; |
| 914 | margin-top: 8px; | 915 | margin-top: 8px; |
| 915 | margin-right: 6px;} | 916 | margin-right: 6px;} |
| 916 | .comments-a-wrp{ width: 629px; | 917 | .comments-a-wrp{ width: 629px; |
| 917 | display: block; | 918 | display: block; |
| 918 | float: right; | 919 | float: right; |
| 919 | position: absolute; | 920 | position: absolute; |
| 920 | bottom: 160px; | 921 | bottom: 160px; |
| 921 | right: 0;} | 922 | right: 0;} |
| 922 | /* thnaks Wrapper */ | 923 | /* thnaks Wrapper */ |
| 923 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} | 924 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} |
| 924 | .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } | 925 | .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } |
| 925 | .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} | 926 | .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} |
| 926 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; | 927 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; |
| 927 | box-sizing: border-box; | 928 | box-sizing: border-box; |
| 928 | border-radius: 15px; position: relative; | 929 | border-radius: 15px; position: relative; |
| 929 | z-index: 2;} | 930 | z-index: 2;} |
| 930 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; | 931 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; |
| 931 | 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;} | 932 | 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;} |
| 932 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} | 933 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} |
| 933 | .thanks-pay-wrp ul{ display: block; | 934 | .thanks-pay-wrp ul{ display: block; |
| 934 | margin-top: 50px; | 935 | margin-top: 50px; |
| 935 | margin: 32px 0 0 67px; | 936 | margin: 32px 0 0 67px; |
| 936 | padding: 0px; | 937 | padding: 0px; |
| 937 | list-style-type: none; | 938 | list-style-type: none; |
| 938 | width: 370px; | 939 | width: 370px; |
| 939 | float: left;} | 940 | float: left;} |
| 940 | .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} | 941 | .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} |
| 941 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} | 942 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} |
| 942 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} | 943 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} |
| 943 | .thanks-pay-wrp ul li a span img{ width: 8px; | 944 | .thanks-pay-wrp ul li a span img{ width: 8px; |
| 944 | display: block; | 945 | display: block; |
| 945 | float: left; | 946 | float: left; |
| 946 | margin-left: 3px; | 947 | margin-left: 3px; |
| 947 | margin-top: 4px; | 948 | margin-top: 4px; |
| 948 | margin-right: 5px;} | 949 | margin-right: 5px;} |
| 949 | .thanks-pay-wrp ul li a span{ font-size: 10px; | 950 | .thanks-pay-wrp ul li a span{ font-size: 10px; |
| 950 | line-height: 13px; | 951 | line-height: 13px; |
| 951 | color: #06034C; | 952 | color: #06034C; |
| 952 | width: 100%; | 953 | width: 100%; |
| 953 | display: block; | 954 | display: block; |
| 954 | float: left; | 955 | float: left; |
| 955 | margin-top: 4px;} | 956 | margin-top: 4px;} |
| 956 | .payments-spc-57{ margin:0 76px;} | 957 | .payments-spc-57{ margin:0 76px;} |
| 957 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} | 958 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} |
| 958 | .thanks-r-section{ width: 444px; | 959 | .thanks-r-section{ width: 444px; |
| 959 | display: block; | 960 | display: block; |
| 960 | float: right; | 961 | float: right; |
| 961 | position: absolute; | 962 | position: absolute; |
| 962 | right: 0; | 963 | right: 0; |
| 963 | bottom: 70px;} | 964 | bottom: 70px;} |
| 964 | .logo-common-wrp { | 965 | .logo-common-wrp { |
| 965 | width: 101px; | 966 | width: 101px; |
| 966 | display: block; | 967 | display: block; |
| 967 | margin: 0 auto; | 968 | margin: 0 auto; |
| 968 | } | 969 | } |
| 969 | .logo-common-wrp a{ width: 100%; display: block;} | 970 | .logo-common-wrp a{ width: 100%; display: block;} |
| 970 | .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;} | 971 | .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;} |
| 971 | .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;} | 972 | .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;} |
| 972 | .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;} | 973 | .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;} |
| 973 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 974 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 974 | left: -10px; | 975 | left: -10px; |
| 975 | top: -10px;} | 976 | top: -10px;} |
| 976 | .back-bt img{ width: 20px; margin-right: 5px;} | 977 | .back-bt img{ width: 20px; margin-right: 5px;} |
| 977 | .back-bt:hover{ text-decoration: none; color:#514DA7;} | 978 | .back-bt:hover{ text-decoration: none; color:#514DA7;} |
| 978 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 979 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 979 | left: -10px; | 980 | left: -10px; |
| 980 | bottom: -10px;} | 981 | bottom: -10px;} |
| 981 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 982 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 982 | right: -10px; | 983 | right: -10px; |
| 983 | bottom: -10px;} | 984 | bottom: -10px;} |
| 984 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 985 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 985 | right: -10px; | 986 | right: -10px; |
| 986 | top: -10px;} | 987 | top: -10px;} |
| 987 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; | 988 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; |
| 988 | box-sizing: border-box; margin-top: 25px;} | 989 | box-sizing: border-box; margin-top: 25px;} |
| 989 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} | 990 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} |
| 990 | .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;} | 991 | .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;} |
| 991 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; | 992 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; |
| 992 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} | 993 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} |
| 993 | .rating-section li p.wdth{ width: 154px;} | 994 | .rating-section li p.wdth{ width: 154px;} |
| 994 | .rating-list{ display: block; float: right;} | 995 | .rating-list{ display: block; float: right;} |
| 995 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} | 996 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} |
| 996 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} | 997 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} |
| 997 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} | 998 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} |
| 998 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} | 999 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} |
| 999 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} | 1000 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} |
| 1000 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} | 1001 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} |
| 1001 | .p-follows li a{ width: 100%; display: block; float: left;} | 1002 | .p-follows li a{ width: 100%; display: block; float: left;} |
| 1002 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} | 1003 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} |
| 1003 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } | 1004 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } |
| 1004 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} | 1005 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} |
| 1005 | /* single mobile */ | 1006 | /* single mobile */ |
| 1006 | .single-mobileInsight{ width: 404px; display: block; height: 721px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0; | 1007 | .single-mobileInsight{ width: 404px; display: block; height: 721px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0; |
| 1007 | right: 0; | 1008 | right: 0; |
| 1008 | margin: 0 auto; | 1009 | margin: 0 auto; |
| 1009 | bottom: 0; | 1010 | bottom: 0; |
| 1010 | top: unset;} | 1011 | top: unset;} |
| 1011 | .slide-img{ width: 402px; | 1012 | .slide-img{ width: 402px; |
| 1012 | position: absolute; | 1013 | position: absolute; |
| 1013 | bottom: 1px; | 1014 | bottom: 1px; |
| 1014 | left: 0; | 1015 | left: 0; |
| 1015 | right: 0; | 1016 | right: 0; |
| 1016 | margin: 0 auto;} | 1017 | margin: 0 auto;} |
| 1017 | 1018 | ||
| 1018 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; | 1019 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; |
| 1019 | top: 294px; | 1020 | top: 294px; |
| 1020 | right: -357px;} | 1021 | right: -357px;} |
| 1021 | .single-left-Insight-comments{position: absolute; | 1022 | .single-left-Insight-comments{position: absolute; |
| 1022 | width: 423px; | 1023 | width: 423px; |
| 1023 | display: block; | 1024 | display: block; |
| 1024 | top: 0; | 1025 | top: 0; |
| 1025 | left: -332px;} | 1026 | left: -332px;} |
| 1026 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; | 1027 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; |
| 1027 | margin-bottom: -20px;} | 1028 | margin-bottom: -20px;} |
| 1028 | .custom-c-style{border-radius:0px 25px 25px 25px;} | 1029 | .custom-c-style{border-radius:0px 25px 25px 25px;} |
| 1029 | .mobile-screen-one{ width: 404px; display: block;height:721px;position: absolute; border: 1px solid #000000; | 1030 | .mobile-screen-one{ width: 404px; display: block;height:721px;position: absolute; border: 1px solid #000000; |
| 1030 | border-radius: 45px 45px 0 0; | 1031 | border-radius: 45px 45px 0 0; |
| 1031 | bottom: 0; | 1032 | bottom: 0; |
| 1032 | top: unset; | 1033 | top: unset; |
| 1033 | background-position: bottom;} | 1034 | background-position: bottom;} |
| 1034 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} | 1035 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} |
| 1035 | .m-screen-comments{ width: 370px; | 1036 | .m-screen-comments{ width: 370px; |
| 1036 | display: block; | 1037 | display: block; |
| 1037 | position: absolute; | 1038 | position: absolute; |
| 1038 | left: 0; | 1039 | left: 0; |
| 1039 | z-index: 1; | 1040 | z-index: 1; |
| 1040 | margin-left: -230px; | 1041 | margin-left: -230px; |
| 1041 | margin-top: 50px;} | 1042 | margin-top: 50px;} |
| 1042 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} | 1043 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} |
| 1043 | .p-left{ left: 0;} | 1044 | .p-left{ left: 0;} |
| 1044 | .p-right{ right: 0;} | 1045 | .p-right{ right: 0;} |
| 1045 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 840px; height: 100%; bottom: 2px;} | 1046 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 840px; height: 100%; bottom: 2px;} |
| 1046 | .m-screen-right { | 1047 | .m-screen-right { |
| 1047 | width: 370px; | 1048 | width: 370px; |
| 1048 | display: block; | 1049 | display: block; |
| 1049 | position: absolute; | 1050 | position: absolute; |
| 1050 | right: 0; | 1051 | right: 0; |
| 1051 | z-index: 1; | 1052 | z-index: 1; |
| 1052 | margin-right: -207px; | 1053 | margin-right: -207px; |
| 1053 | margin-top: 50px; | 1054 | margin-top: 50px; |
| 1054 | } | 1055 | } |
| 1055 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; | 1056 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; |
| 1056 | bottom: 125px;} | 1057 | bottom: 125px;} |
| 1057 | /* no comments */ | 1058 | /* no comments */ |
| 1058 | .no-comment-count{ width: 100%;} | 1059 | .no-comment-count{ width: 100%;} |
| 1059 | 1060 | ||
| 1060 | 1061 | ||
| 1061 | 1062 | ||
| 1062 | .no-comments-img{ width: 40px; display: block; float: left;} | 1063 | .no-comments-img{ width: 40px; display: block; float: left;} |
| 1063 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} | 1064 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} |
| 1064 | .h-100p{ height: 100%;} | 1065 | .h-100p{ height: 100%;} |
| 1065 | .bord-r{ border-right: 1px solid #A8C2DC;} | 1066 | .bord-r{ border-right: 1px solid #A8C2DC;} |
| 1066 | .ft-comments-group .comments-detail{ position: absolute; | 1067 | .ft-comments-group .comments-detail{ position: absolute; |
| 1067 | padding-left: 50px;} | 1068 | padding-left: 50px;} |
| 1068 | .c-with-photos{ display: block; float: left; margin-left: -120px;} | 1069 | .c-with-photos{ display: block; float: left; margin-left: -120px;} |
| 1069 | .addfrm-spc{ padding-right: 50px;} | 1070 | .addfrm-spc{ padding-right: 50px;} |
| 1070 | .c-product-insight-wrp{ width: 350px; | 1071 | .c-product-insight-wrp{ width: 350px; |
| 1071 | display: block; | 1072 | display: block; |
| 1072 | float: right; | 1073 | float: right; |
| 1073 | position: absolute; | 1074 | position: absolute; |
| 1074 | top: unset; | 1075 | top: unset; |
| 1075 | bottom: 122px; | 1076 | bottom: 122px; |
| 1076 | right: -310px;} | 1077 | right: -310px;} |
| 1077 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} | 1078 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} |
| 1078 | .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;} | 1079 | .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;} |
| 1079 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} | 1080 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1080 | .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;} | 1081 | .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;} |
| 1081 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} | 1082 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} |
| 1082 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} | 1083 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} |
| 1083 | .cit-16:hover{color: #EF484F;} | 1084 | .cit-16:hover{color: #EF484F;} |
| 1084 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} | 1085 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} |
| 1085 | .ft-share img{ width: 14px; | 1086 | .ft-share img{ width: 14px; |
| 1086 | display: block; | 1087 | display: block; |
| 1087 | float: left; | 1088 | float: left; |
| 1088 | margin: 8px 7px 0 0px;} | 1089 | margin: 8px 7px 0 0px;} |
| 1089 | .ft-share:hover{color: #EF484F;} | 1090 | .ft-share:hover{color: #EF484F;} |
| 1090 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; | 1091 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; |
| 1091 | left: 0;} | 1092 | left: 0;} |
| 1092 | /* single web screen */ | 1093 | /* single web screen */ |
| 1093 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; | 1094 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; |
| 1094 | left: 0; | 1095 | left: 0; |
| 1095 | right: 0; bottom: 210px; | 1096 | right: 0; bottom: 210px; |
| 1096 | margin: 0 auto;} | 1097 | margin: 0 auto;} |
| 1097 | .web-comment-spc{top: 63px;left: -206px;} | 1098 | .web-comment-spc{top: 63px;left: -206px;} |
| 1098 | .web-ps-insight-spc{ top: 130px; | 1099 | .web-ps-insight-spc{ top: 130px; |
| 1099 | right: -260px;} | 1100 | right: -260px;} |
| 1100 | 1101 | ||
| 1101 | /* screen grab */ | 1102 | /* screen grab */ |
| 1102 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} | 1103 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} |
| 1103 | .screengrab-lspc{top: 113px;} | 1104 | .screengrab-lspc{top: 113px;} |
| 1104 | .screengrab-rspc{top: 92px;right: -362px;} | 1105 | .screengrab-rspc{top: 92px;right: -362px;} |
| 1105 | .view-ticket-wrp-ps{ width: 302px; | 1106 | .view-ticket-wrp-ps{ width: 302px; |
| 1106 | position: absolute; | 1107 | position: absolute; |
| 1107 | z-index: 1; | 1108 | z-index: 1; |
| 1108 | right: -224px; | 1109 | right: -224px; |
| 1109 | top: 82px;} | 1110 | top: 82px;} |
| 1110 | .bc-transparent{ background-image: none !important; border: 0px;} | 1111 | .bc-transparent{ background-image: none !important; border: 0px;} |
| 1111 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} | 1112 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} |
| 1112 | .comments-right-without-bc{ right: -255px;} | 1113 | .comments-right-without-bc{ right: -255px;} |
| 1113 | .screenGrb-comments-wrp{width: 752px;} | 1114 | .screenGrb-comments-wrp{width: 752px;} |
| 1114 | .spc-grbscreen1{ margin-top: 40px;} | 1115 | .spc-grbscreen1{ margin-top: 40px;} |
| 1115 | /* two webscreen */ | 1116 | /* two webscreen */ |
| 1116 | .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; | 1117 | .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; |
| 1117 | right: 0; | 1118 | right: 0; |
| 1118 | margin: 0 auto; | 1119 | margin: 0 auto; |
| 1119 | bottom: 0; | 1120 | bottom: 0; |
| 1120 | top: unset; | 1121 | top: unset; |
| 1121 | background-position: top;} | 1122 | background-position: top;} |
| 1122 | .two-webs-l-spc{ margin-left: -342px; | 1123 | .two-webs-l-spc{ margin-left: -342px; |
| 1123 | margin-top: 37px;} | 1124 | margin-top: 37px;} |
| 1124 | .two-screen-user-photo-bottom { | 1125 | .two-screen-user-photo-bottom { |
| 1125 | width: 127px; | 1126 | width: 127px; |
| 1126 | display: block; | 1127 | display: block; |
| 1127 | position: absolute; | 1128 | position: absolute; |
| 1128 | bottom: 76px; | 1129 | bottom: 76px; |
| 1129 | left: -254px; | 1130 | left: -254px; |
| 1130 | } | 1131 | } |
| 1131 | .two-webscreen-r-insight { | 1132 | .two-webscreen-r-insight { |
| 1132 | width: 423px; | 1133 | width: 423px; |
| 1133 | display: block; | 1134 | display: block; |
| 1134 | position: absolute; | 1135 | position: absolute; |
| 1135 | top: 51px; | 1136 | top: 51px; |
| 1136 | right: 3px; | 1137 | right: 3px; |
| 1137 | } | 1138 | } |
| 1138 | .custom-selected-author-style { | 1139 | .custom-selected-author-style { |
| 1139 | border-radius: 0px 25px 25px 25px; | 1140 | border-radius: 0px 25px 25px 25px; |
| 1140 | border: 2px solid #F9CF35; position: relative; | 1141 | border: 2px solid #F9CF35; position: relative; |
| 1141 | } | 1142 | } |
| 1142 | .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;} | 1143 | .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;} |
| 1143 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} | 1144 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1144 | .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;} | 1145 | .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;} |
| 1145 | .custom-selected-author-style .rect { | 1146 | .custom-selected-author-style .rect { |
| 1146 | width: 25px; | 1147 | width: 25px; |
| 1147 | display: block; | 1148 | display: block; |
| 1148 | position: absolute; | 1149 | position: absolute; |
| 1149 | top: 0; | 1150 | top: 0; |
| 1150 | left: 0; | 1151 | left: 0; |
| 1151 | } | 1152 | } |
| 1152 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} | 1153 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} |
| 1153 | .author-two .author-two-photo{ width: 200px; display: block;} | 1154 | .author-two .author-two-photo{ width: 200px; display: block;} |
| 1154 | .two-author-desktop{ width: 913px; | 1155 | .two-author-desktop{ width: 913px; |
| 1155 | display: block; | 1156 | display: block; |
| 1156 | height: 525px; | 1157 | height: 525px; |
| 1157 | position: absolute; | 1158 | position: absolute; |
| 1158 | background-image:url('../images/two-author-desktop.svg'); | 1159 | background-image:url('../images/two-author-desktop.svg'); |
| 1159 | background-repeat: no-repeat; | 1160 | background-repeat: no-repeat; |
| 1160 | left: 0; | 1161 | left: 0; |
| 1161 | right: 0; | 1162 | right: 0; |
| 1162 | margin: 0 auto; | 1163 | margin: 0 auto; |
| 1163 | bottom: 0; | 1164 | bottom: 0; |
| 1164 | top: unset; | 1165 | top: unset; |
| 1165 | background-position: bottom;} | 1166 | background-position: bottom;} |
| 1166 | .author-two-desktop{ position: absolute; | 1167 | .author-two-desktop{ position: absolute; |
| 1167 | top: -130px; | 1168 | top: -130px; |
| 1168 | left: -134px; | 1169 | left: -134px; |
| 1169 | width: 428px;} | 1170 | width: 428px;} |
| 1170 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} | 1171 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} |
| 1171 | .author-one-desktop{ position: absolute; | 1172 | .author-one-desktop{ position: absolute; |
| 1172 | top: -163px; | 1173 | top: -163px; |
| 1173 | right: -201px; | 1174 | right: -201px; |
| 1174 | width: 428px;} | 1175 | width: 428px;} |
| 1175 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} | 1176 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} |
| 1176 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} | 1177 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} |
| 1177 | .desktop-two-logo-spc{ bottom: 40%;} | 1178 | .desktop-two-logo-spc{ bottom: 40%;} |
| 1178 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} | 1179 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} |
| 1179 | .author-two-head-spc{ margin-top: 56px !important;} | 1180 | .author-two-head-spc{ margin-top: 56px !important;} |
| 1180 | .sign-wrp{ width: 100%; display: block; float: left;} | 1181 | .sign-wrp{ width: 100%; display: block; float: left;} |
| 1181 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } | 1182 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } |
| 1182 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} | 1183 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} |
| 1183 | .cust-user2-style{ border-radius:25px 0 25px 25px} | 1184 | .cust-user2-style{ border-radius:25px 0 25px 25px} |
| 1184 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} | 1185 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} |
| 1185 | .single-chat-c-left{left: -405px;} | 1186 | .single-chat-c-left{left: -405px;} |
| 1186 | .single-chat-c-right{top: 244px;right: -404px;} | 1187 | .single-chat-c-right{top: 244px;right: -404px;} |
| 1187 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} | 1188 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} |
| 1188 | .help-view-ticket-right{display: block; | 1189 | .help-view-ticket-right{display: block; |
| 1189 | float: right; | 1190 | float: right; |
| 1190 | right: -84px; | 1191 | right: -84px; |
| 1191 | position: absolute; | 1192 | position: absolute; |
| 1192 | z-index: 1; | 1193 | z-index: 1; |
| 1193 | top: 51px; | 1194 | top: 51px; |
| 1194 | width: 423px;} | 1195 | width: 423px;} |
| 1195 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} | 1196 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} |
| 1196 | .two-author-all-comments{width: 100%; display: block; float:left;} | 1197 | .two-author-all-comments{width: 100%; display: block; float:left;} |
| 1197 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} | 1198 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} |
| 1198 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} | 1199 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} |
| 1199 | .a2-set{ width: 282px; | 1200 | .a2-set{ width: 282px; |
| 1200 | height: 258px; | 1201 | height: 258px; |
| 1201 | position: absolute; | 1202 | position: absolute; |
| 1202 | left: -370px; | 1203 | left: -370px; |
| 1203 | bottom: -50px;} | 1204 | bottom: -50px;} |
| 1204 | .a2true-set{ width: 268px; | 1205 | .a2true-set{ width: 268px; |
| 1205 | height: 319px; | 1206 | height: 319px; |
| 1206 | position: absolute; | 1207 | position: absolute; |
| 1207 | right: -440px; | 1208 | right: -440px; |
| 1208 | bottom: -103px;} | 1209 | bottom: -103px;} |
| 1209 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} | 1210 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} |
| 1210 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } | 1211 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } |
| 1211 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; | 1212 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; |
| 1212 | float: right;} | 1213 | float: right;} |
| 1213 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; | 1214 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; |
| 1214 | transition-property: right; | 1215 | transition-property: right; |
| 1215 | -webkit-transition-property: right; | 1216 | -webkit-transition-property: right; |
| 1216 | -moz-transition-property: right; | 1217 | -moz-transition-property: right; |
| 1217 | -o-transition-property: right; | 1218 | -o-transition-property: right; |
| 1218 | 1219 | ||
| 1219 | transition-duration: 0.3s; | 1220 | transition-duration: 0.3s; |
| 1220 | -webkit-transition-duration: 0.3s; | 1221 | -webkit-transition-duration: 0.3s; |
| 1221 | -moz-transition-duration: 0.3s; | 1222 | -moz-transition-duration: 0.3s; |
| 1222 | -o-transition-duration: 0.3s; | 1223 | -o-transition-duration: 0.3s; |
| 1223 | 1224 | ||
| 1224 | transition-timing-function: linear; | 1225 | transition-timing-function: linear; |
| 1225 | -webkit-transition-timing-function: linear; | 1226 | -webkit-transition-timing-function: linear; |
| 1226 | -moz-transition-timing-function: linear; | 1227 | -moz-transition-timing-function: linear; |
| 1227 | -o-transition-timing-function: linear; | 1228 | -o-transition-timing-function: linear; |
| 1228 | right: -500px; | 1229 | right: -500px; |
| 1229 | 1230 | ||
| 1230 | } | 1231 | } |
| 1231 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} | 1232 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} |
| 1232 | .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;} | 1233 | .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;} |
| 1233 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} | 1234 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} |
| 1234 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} | 1235 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} |
| 1235 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} | 1236 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} |
| 1236 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} | 1237 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} |
| 1237 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } | 1238 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } |
| 1238 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} | 1239 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} |
| 1239 | .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;} | 1240 | .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;} |
| 1240 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} | 1241 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} |
| 1241 | .user-photo{width: 109px; | 1242 | .user-photo{width: 109px; |
| 1242 | display: block; | 1243 | display: block; |
| 1243 | float: left;} | 1244 | float: left;} |
| 1244 | .cat-minus{ right: -11px !important; | 1245 | .cat-minus{ right: -11px !important; |
| 1245 | margin-left: unset !important;} | 1246 | margin-left: unset !important;} |
| 1246 | .mt-50{ margin-top: 50px;} | 1247 | .mt-50{ margin-top: 50px;} |
| 1247 | .sub-menu-user{ width: 150px; | 1248 | .sub-menu-user{ width: 150px; |
| 1248 | display: block; | 1249 | display: block; |
| 1249 | position: absolute; | 1250 | position: absolute; |
| 1250 | background: #fff; | 1251 | background: #fff; |
| 1251 | right: 0px; | 1252 | right: 0px; |
| 1252 | border: 1px solid #eaeaea; | 1253 | border: 1px solid #eaeaea; |
| 1253 | border-radius: 5px; | 1254 | border-radius: 5px; |
| 1254 | padding: 5px; | 1255 | padding: 5px; |
| 1255 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1256 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1256 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1257 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1257 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1258 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1258 | } | 1259 | } |
| 1259 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } | 1260 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } |
| 1260 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} | 1261 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} |
| 1261 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} | 1262 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} |
| 1262 | .sub-menu-user ul li a:hover{color:#514DA7;} | 1263 | .sub-menu-user ul li a:hover{color:#514DA7;} |
| 1263 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} | 1264 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} |
| 1264 | .bounced-user-comments li{ display: block; float: left; position: relative;} | 1265 | .bounced-user-comments li{ display: block; float: left; position: relative;} |
| 1265 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} | 1266 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} |
| 1266 | .bounced-user-comments .b-user-head img{ width: 26px; | 1267 | .bounced-user-comments .b-user-head img{ width: 26px; |
| 1267 | display: block; | 1268 | display: block; |
| 1268 | float: left; | 1269 | float: left; |
| 1269 | position: absolute; | 1270 | position: absolute; |
| 1270 | left:-13px;} | 1271 | left:-13px;} |
| 1271 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} | 1272 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} |
| 1272 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} | 1273 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} |
| 1273 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} | 1274 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} |
| 1274 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} | 1275 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} |
| 1275 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; | 1276 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; |
| 1276 | height: 3px; | 1277 | height: 3px; |
| 1277 | display: block; | 1278 | display: block; |
| 1278 | background: #ccc; | 1279 | background: #ccc; |
| 1279 | float: left; | 1280 | float: left; |
| 1280 | } | 1281 | } |
| 1281 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; | 1282 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; |
| 1282 | width: auto; | 1283 | width: auto; |
| 1283 | height: auto; | 1284 | height: auto; |
| 1284 | padding: 3px 7px; | 1285 | padding: 3px 7px; |
| 1285 | display: block; | 1286 | display: block; |
| 1286 | border-radius: 3px; | 1287 | border-radius: 3px; |
| 1287 | margin-top: -2px;} | 1288 | margin-top: -2px;} |
| 1288 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} | 1289 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} |
| 1289 | .bc_border{} | 1290 | .bc_border{} |
| 1290 | .info_bc_spc{ float: left;} | 1291 | .info_bc_spc{ float: left;} |
| 1291 | .info_bc_spc li{ padding:0px; color: #514DA7;} | 1292 | .info_bc_spc li{ padding:0px; color: #514DA7;} |
| 1292 | .info_bc_spc li a{color: #514DA7; opacity: 1;} | 1293 | .info_bc_spc li a{color: #514DA7; opacity: 1;} |
| 1293 | .info_bc_spc li img{ margin-top: 4px;} | 1294 | .info_bc_spc li img{ margin-top: 4px;} |
| 1294 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} | 1295 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} |
| 1295 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} | 1296 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} |
| 1296 | .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;} | 1297 | .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;} |
| 1297 | .ft-normal{ font-weight: 500 !important;} | 1298 | .ft-normal{ font-weight: 500 !important;} |
| 1298 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} | 1299 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} |
| 1299 | 1300 | ||
| 1300 | /* placeholder */ | 1301 | /* placeholder */ |
| 1301 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ | 1302 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ |
| 1302 | font-size: 10px; color: #000; opacity: 0.7; | 1303 | font-size: 10px; color: #000; opacity: 0.7; |
| 1303 | } | 1304 | } |
| 1304 | 1305 | ||
| 1305 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 1306 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 1306 | font-size: 10px; color: #000; opacity: 0.7; | 1307 | font-size: 10px; color: #000; opacity: 0.7; |
| 1307 | } | 1308 | } |
| 1308 | 1309 | ||
| 1309 | .joined_wrapper .add_rply input::placeholder { | 1310 | .joined_wrapper .add_rply input::placeholder { |
| 1310 | font-size: 10px; color: #000; opacity: 0.7; | 1311 | font-size: 10px; color: #000; opacity: 0.7; |
| 1311 | } | 1312 | } |
| 1312 | 1313 | ||
| 1313 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} | 1314 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} |
| 1314 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } | 1315 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } |
| 1315 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} | 1316 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} |
| 1316 | .full-width{ width: 100%; display: block; float: left;} | 1317 | .full-width{ width: 100%; display: block; float: left;} |
| 1317 | .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;} | 1318 | .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;} |
| 1318 | .child-full-width .b-user-head{ padding-left: 70px;} | 1319 | .child-full-width .b-user-head{ padding-left: 70px;} |
| 1319 | .child-full-width .b-user-head img{ left:33px;} | 1320 | .child-full-width .b-user-head img{ left:33px;} |
| 1320 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} | 1321 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} |
| 1321 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} | 1322 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} |
| 1322 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} | 1323 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} |
| 1323 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} | 1324 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} |
| 1324 | .comments-footer{ width: 100%; display: block; float: left;} | 1325 | .comments-footer{ width: 100%; display: block; float: left;} |
| 1325 | .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;} | 1326 | .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;} |
| 1326 | .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;} | 1327 | .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;} |
| 1327 | .add_comments_chat img{ width: 15px;} | 1328 | .add_comments_chat img{ width: 15px;} |
| 1328 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} | 1329 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} |
| 1329 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} | 1330 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} |
| 1330 | button:focus{ border:0px; outline: none;} | 1331 | button:focus{ border:0px; outline: none;} |
| 1331 | .short_by{left: -100px !important;} | 1332 | .short_by{left: -100px !important;} |
| 1332 | input:focus{ outline: none;} | 1333 | input:focus{ outline: none;} |
| 1333 | .comments-footer textarea:focus{ outline: none;} | 1334 | .comments-footer textarea:focus{ outline: none;} |
| 1334 | .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;} | 1335 | .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;} |
| 1335 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} | 1336 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} |
| 1336 | .close_chat_bx:hover{ background-color: #ccc;} | 1337 | .close_chat_bx:hover{ background-color: #ccc;} |
| 1337 | /* chat box close */ | 1338 | /* chat box close */ |
| 1338 | .cht_close{ | 1339 | .cht_close{ |
| 1339 | transition-property: right; | 1340 | transition-property: right; |
| 1340 | -webkit-transition-property: right; | 1341 | -webkit-transition-property: right; |
| 1341 | -moz-transition-property: right; | 1342 | -moz-transition-property: right; |
| 1342 | -o-transition-property: right; | 1343 | -o-transition-property: right; |
| 1343 | 1344 | ||
| 1344 | transition-duration: 0.3s; | 1345 | transition-duration: 0.3s; |
| 1345 | -webkit-transition-duration: 0.3s; | 1346 | -webkit-transition-duration: 0.3s; |
| 1346 | -moz-transition-duration: 0.3s; | 1347 | -moz-transition-duration: 0.3s; |
| 1347 | -o-transition-duration: 0.3s; | 1348 | -o-transition-duration: 0.3s; |
| 1348 | 1349 | ||
| 1349 | transition-timing-function: linear; | 1350 | transition-timing-function: linear; |
| 1350 | -webkit-transition-timing-function: linear; | 1351 | -webkit-transition-timing-function: linear; |
| 1351 | -moz-transition-timing-function: linear; | 1352 | -moz-transition-timing-function: linear; |
| 1352 | -o-transition-timing-function: linear; | 1353 | -o-transition-timing-function: linear; |
| 1353 | right: 0px; | 1354 | right: 0px; |
| 1354 | } | 1355 | } |
| 1355 | .p-left-0{ padding-left:0px !important;} | 1356 | .p-left-0{ padding-left:0px !important;} |
| 1356 | .ps_right{ float: right !important; position: static !important;} | 1357 | .ps_right{ float: right !important; position: static !important;} |
| 1357 | .testi-photos-ct .c-with-photos{ margin-left: 0px; } | 1358 | .testi-photos-ct .c-with-photos{ margin-left: 0px; } |
| 1358 | .testi-photos-ct .comments-detail{padding-left: 165px !important;} | 1359 | .testi-photos-ct .comments-detail{padding-left: 165px !important;} |
| 1359 | .ct-width{ width: 400px;} | 1360 | .ct-width{ width: 400px;} |
| 1360 | .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} | 1361 | .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} |
| 1361 | .testi-photos-ct .comments-detail{padding-right: 40px;} | 1362 | .testi-photos-ct .comments-detail{padding-right: 40px;} |
| 1362 | .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} | 1363 | .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} |
| 1363 | .right-corner { border-radius: 25px 25px 2px 25px;} | 1364 | .right-corner { border-radius: 25px 25px 2px 25px;} |
| 1364 | .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} | 1365 | .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} |
| 1365 | .dynamic-thoughts { width: 200px; display: block; } | 1366 | .dynamic-thoughts { width: 200px; display: block; } |
| 1366 | .two-screen-spc-top{ top: 100px; right: -286px;} | 1367 | .two-screen-spc-top{ top: 100px; right: -286px;} |
| 1367 | .joined_wrapper{ position: relative;} | 1368 | .joined_wrapper{ position: relative;} |
| 1368 | .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} | 1369 | .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} |
| 1369 | .reply-Wdth{ width: 64px;} | 1370 | .reply-Wdth{ width: 64px;} |
| 1370 | .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} | 1371 | .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} |
| 1371 | .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} | 1372 | .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} |
| 1372 | .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;} | 1373 | .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;} |
| 1373 | .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } | 1374 | .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } |
| 1374 | .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} | 1375 | .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} |
| 1375 | .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} | 1376 | .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} |
| 1376 | .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;} | 1377 | .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;} |
| 1377 | .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;} | 1378 | .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;} |
| 1378 | .update_profile span{width: 11px; | 1379 | .update_profile span{width: 11px; |
| 1379 | height: 11px; | 1380 | height: 11px; |
| 1380 | display: inline-block; | 1381 | display: inline-block; |
| 1381 | background: #EF484F; | 1382 | background: #EF484F; |
| 1382 | border-radius: 10px; | 1383 | border-radius: 10px; |
| 1383 | margin: 12px 0 0 0;} | 1384 | margin: 12px 0 0 0;} |
| 1384 | .update_profile:hover{ color: #fff; text-decoration: none;} | 1385 | .update_profile:hover{ color: #fff; text-decoration: none;} |
| 1385 | .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: 13px;} | 1386 | .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: 13px;} |
| 1386 | .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;} | 1387 | .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;} |
| 1387 | .talk-to-me-about{ width: 100%; display: block; float: left;} | 1388 | .talk-to-me-about{ width: 100%; display: block; float: left;} |
| 1388 | .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;} | 1389 | .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;} |
| 1389 | .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;} | 1390 | .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;} |
| 1390 | .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;} | 1391 | .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;} |
| 1391 | .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;} | 1392 | .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;} |
| 1392 | .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} | 1393 | .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} |
| 1393 | .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;} | 1394 | .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;} |
| 1394 | .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} | 1395 | .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} |
| 1395 | .user-views li img.spctp{ margin-top: 2px;} | 1396 | .user-views li img.spctp{ margin-top: 2px;} |
| 1396 | .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;} | 1397 | .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;} |
| 1397 | .action-set img{width: 21px;margin: 16px;} | 1398 | .action-set img{width: 21px;margin: 16px;} |
| 1398 | .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left; | 1399 | .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left; |
| 1399 | position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden; | 1400 | position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden; |
| 1400 | background-position: left bottom; } | 1401 | background-position: left bottom; } |
| 1401 | .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;} | 1402 | .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;} |
| 1402 | .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;} | 1403 | .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;} |
| 1403 | .insight-two-img{width: 100%; position: relative;} | 1404 | .insight-two-img{width: 100%; position: relative;border-top-right-radius: 25px;border-top-left-radius: 25px;} |
| 1404 | .m-screen-hidden{width: 382px;overflow: hidden; height:702px;margin: 0 auto;} | 1405 | .m-screen-hidden{width: 382px;overflow: hidden; height:702px;margin: 0 auto;} |
| 1405 | .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;} | 1406 | .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;} |
| 1406 | .s-l-right-section{ width: 300px; display: block; float: left;} | 1407 | .s-l-right-section{ width: 300px; display: block; float: left;} |
| 1407 | .sign-login-wrp{ display: block;width: 900px; margin: 0 auto; margin-top: 10%;} | 1408 | .sign-login-wrp{ display: block;width: 900px; margin: 0 auto; margin-top: 10%;} |
| 1408 | .reset-pass{margin-top: 118px;} | 1409 | .reset-pass{margin-top: 118px;} |
| 1409 | 1410 |
src/components/AuthorReadingBreak.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <div class="container-fluid episode-intro app-discovery-bg"> | 3 | <div class="container-fluid episode-intro app-discovery-bg"> |
| 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 | 9 | ||
| 10 | <div class="single-author-comments"> | 10 | <div class="single-author-comments"> |
| 11 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> | 11 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> |
| 12 | <div class="ct-l-400"> | 12 | <div class="ct-l-400"> |
| 13 | <!-- <div class="single-author-li-comments" > --> | 13 | <!-- <div class="single-author-li-comments" > --> |
| 14 | <div class="right-corner font-style"> | 14 | <div class="right-corner font-style"> |
| 15 | <p> | 15 | <p> |
| 16 | {{ currentSlideData.payload.metaData.description }} | 16 | {{ currentSlideData.payload.metaData.description }} |
| 17 | </p> | 17 | </p> |
| 18 | 18 | ||
| 19 | </div> | 19 | </div> |
| 20 | <!-- comments box --> | 20 | <!-- comments box --> |
| 21 | <!-- </div> --> | 21 | <!-- </div> --> |
| 22 | </div> | 22 | </div> |
| 23 | <img | 23 | <img |
| 24 | class="s-user-comments m-0" | 24 | class="s-user-comment m-0" |
| 25 | :src="currentSlideData.payload.metaData.authorImage" | 25 | :src="currentSlideData.payload.metaData.authorImage" |
| 26 | /> | 26 | /> |
| 27 | <div class="comments-a-wrp ct-width"> | 27 | <div class="comments-a-wrp ct-width"> |
| 28 | <div class="single-author-li-comments" > | 28 | <div class="single-author-li-comments" v-if="currentSlideData.payload.comments[0].comment"> |
| 29 | <div class="a-intro-comments"> | 29 | <div class="a-intro-comments"> |
| 30 | <p> | 30 | <p> |
| 31 | {{ currentSlideData.payload.comments[0].comment }} | 31 | {{ currentSlideData.payload.comments[0].comment }} |
| 32 | </p> | 32 | </p> |
| 33 | <ul class="rly-comment-set"> | 33 | <ul class="rly-comment-set"> |
| 34 | 34 | ||
| 35 | </ul> | 35 | </ul> |
| 36 | </div> | 36 | </div> |
| 37 | <!-- comments box --> | 37 | <!-- comments box --> |
| 38 | </div> | 38 | </div> |
| 39 | <!-- single author comments --> | 39 | <!-- single author comments --> |
| 40 | <div class="single-author-li-comments" > | 40 | <div class="single-author-li-comments" v-if="currentSlideData.payload.comments[1].comment"> |
| 41 | <div class="a-intro-comments"> | 41 | <div class="a-intro-comments"> |
| 42 | <p> | 42 | <p> |
| 43 | {{ currentSlideData.payload.comments[1].comment }} | 43 | {{ currentSlideData.payload.comments[1].comment }} |
| 44 | </p> | 44 | </p> |
| 45 | <ul class="rly-comment-set"> | 45 | <ul class="rly-comment-set"> |
| 46 | 46 | ||
| 47 | </ul> | 47 | </ul> |
| 48 | </div> | 48 | </div> |
| 49 | </div> | 49 | </div> |
| 50 | </div> | 50 | </div> |
| 51 | </div> | 51 | </div> |
| 52 | 52 | ||
| 53 | <div class="footer-nav"> | 53 | <div class="footer-nav"> |
| 54 | <div class="footer-top"> | 54 | <div class="footer-top"> |
| 55 | <ul class="top-intro-bt ps_right"> | 55 | <ul class="top-intro-bt ps_right"> |
| 56 | <li> | 56 | <li> |
| 57 | <a href="javascript:void(0);" @click="goBack" | 57 | <a href="javascript:void(0);" @click="goBack" |
| 58 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 58 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 59 | > | 59 | > |
| 60 | </li> | 60 | </li> |
| 61 | <li> | 61 | <li> |
| 62 | <a href="javascript:void(0);" @click="goNext" | 62 | <a href="javascript:void(0);" @click="goNext" |
| 63 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 63 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 64 | slide</a | 64 | slide</a |
| 65 | > | 65 | > |
| 66 | </li> | 66 | </li> |
| 67 | </ul> | 67 | </ul> |
| 68 | </div> | 68 | </div> |
| 69 | <!-- footer top --> | 69 | <!-- footer top --> |
| 70 | <div class="footer-bottom"> | 70 | <div class="footer-bottom"> |
| 71 | <ul> | 71 | <ul> |
| 72 | <li></li> | 72 | <li></li> |
| 73 | <li></li> | 73 | <li></li> |
| 74 | </ul> | 74 | </ul> |
| 75 | </div> | 75 | </div> |
| 76 | <!-- footer top --> | 76 | <!-- footer top --> |
| 77 | </div> | 77 | </div> |
| 78 | <!-- footer --> | 78 | <!-- footer --> |
| 79 | </div> | 79 | </div> |
| 80 | <!-- body wrapper --> | 80 | <!-- body wrapper --> |
| 81 | </div> | 81 | </div> |
| 82 | <!-- main wrapper --> | 82 | <!-- main wrapper --> |
| 83 | </main> | 83 | </main> |
| 84 | </template> | 84 | </template> |
| 85 | 85 | ||
| 86 | <script> | 86 | <script> |
| 87 | import Vue from "vue"; | 87 | import Vue from "vue"; |
| 88 | import router from "../router"; | 88 | import router from "../router"; |
| 89 | import Header from "./Header"; | 89 | import Header from "./Header"; |
| 90 | import axios from "axios"; | 90 | import axios from "axios"; |
| 91 | 91 | ||
| 92 | export default { | 92 | export default { |
| 93 | components: { | 93 | components: { |
| 94 | Header: Header, | 94 | Header: Header, |
| 95 | }, | 95 | }, |
| 96 | name: "AuthorReadingBreak", | 96 | name: "AuthorReadingBreak", |
| 97 | 97 | ||
| 98 | data() { | 98 | data() { |
| 99 | return { | 99 | return { |
| 100 | allSlide: [], | 100 | allSlide: [], |
| 101 | currentSlideIndex: null, | 101 | currentSlideIndex: null, |
| 102 | currentSlideData: null, | 102 | currentSlideData: null, |
| 103 | }; | 103 | }; |
| 104 | }, | 104 | }, |
| 105 | mounted() { | 105 | mounted() { |
| 106 | var allSlideData = localStorage.getItem( | 106 | var allSlideData = localStorage.getItem( |
| 107 | "spotlight_slide" + this.$route.params.caseStudyId | 107 | "spotlight_slide" + this.$route.params.caseStudyId |
| 108 | ); | 108 | ); |
| 109 | if (allSlideData) { | 109 | if (allSlideData) { |
| 110 | this.allSlide = JSON.parse(allSlideData); | 110 | this.allSlide = JSON.parse(allSlideData); |
| 111 | this.getCurrentSlideData(); | 111 | this.getCurrentSlideData(); |
| 112 | }else{ | 112 | }else{ |
| 113 | this.generatecaseStudies(); | 113 | this.generatecaseStudies(); |
| 114 | } | 114 | } |
| 115 | 115 | ||
| 116 | }, | 116 | }, |
| 117 | methods: { | 117 | methods: { |
| 118 | generatecaseStudies(){ | 118 | generatecaseStudies(){ |
| 119 | axios | 119 | axios |
| 120 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 120 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 121 | headers: { | 121 | headers: { |
| 122 | Authorization: "Bearer " + this.usertoken, | 122 | Authorization: "Bearer " + this.usertoken, |
| 123 | }, | 123 | }, |
| 124 | }) | 124 | }) |
| 125 | .then((response) => { | 125 | .then((response) => { |
| 126 | 126 | ||
| 127 | console.log('response',response.data.data); | 127 | console.log('response',response.data.data); |
| 128 | this.openStudy(response.data.data); | 128 | this.openStudy(response.data.data); |
| 129 | }) | 129 | }) |
| 130 | .catch((error) => console.log(error)); | 130 | .catch((error) => console.log(error)); |
| 131 | }, | 131 | }, |
| 132 | 132 | ||
| 133 | 133 | ||
| 134 | 134 | ||
| 135 | openStudy(payload) { | 135 | openStudy(payload) { |
| 136 | console.log("payload-", payload); | 136 | console.log("payload-", payload); |
| 137 | payload.intro.date = payload.createdAt; | 137 | payload.intro.date = payload.createdAt; |
| 138 | payload.intro.focusPoint = payload.focusAreas; | 138 | payload.intro.focusPoint = payload.focusAreas; |
| 139 | axios | 139 | axios |
| 140 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 140 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 141 | headers: { | 141 | headers: { |
| 142 | Authorization: "Bearer " + this.usertoken, | 142 | Authorization: "Bearer " + this.usertoken, |
| 143 | }, | 143 | }, |
| 144 | }) | 144 | }) |
| 145 | .then((response) => { | 145 | .then((response) => { |
| 146 | this.createSlide(payload, response.data.data); | 146 | this.createSlide(payload, response.data.data); |
| 147 | }) | 147 | }) |
| 148 | .catch((error) => console.log(error)); | 148 | .catch((error) => console.log(error)); |
| 149 | }, | 149 | }, |
| 150 | 150 | ||
| 151 | createSlide(payload, slides) { | 151 | createSlide(payload, slides) { |
| 152 | var finalSlides = []; | 152 | var finalSlides = []; |
| 153 | slides.forEach((slides_) => { | 153 | slides.forEach((slides_) => { |
| 154 | var url = this.assignRoutes(slides_.templateId); | 154 | var url = this.assignRoutes(slides_.templateId); |
| 155 | var obj = { | 155 | var obj = { |
| 156 | forward: true, | 156 | forward: true, |
| 157 | backward: true, | 157 | backward: true, |
| 158 | ur: url, | 158 | ur: url, |
| 159 | slideId: slides_._id, | 159 | slideId: slides_._id, |
| 160 | caseStudyId: slides_.caseStudyId, | 160 | caseStudyId: slides_.caseStudyId, |
| 161 | payload: { | 161 | payload: { |
| 162 | metaData: slides_.metaData, | 162 | metaData: slides_.metaData, |
| 163 | comments: slides_.comments, | 163 | comments: slides_.comments, |
| 164 | insight: slides_.insight ? slides_.insight : null, | 164 | insight: slides_.insight ? slides_.insight : null, |
| 165 | }, | 165 | }, |
| 166 | }; | 166 | }; |
| 167 | // slides_ | 167 | // slides_ |
| 168 | finalSlides.push(obj); | 168 | finalSlides.push(obj); |
| 169 | }); | 169 | }); |
| 170 | console.log("payload", payload); | 170 | console.log("payload", payload); |
| 171 | // add first slide at begining | 171 | // add first slide at begining |
| 172 | finalSlides.unshift({ | 172 | finalSlides.unshift({ |
| 173 | forward: true, | 173 | forward: true, |
| 174 | backward: false, | 174 | backward: false, |
| 175 | ur: "EpisodeIntro", | 175 | ur: "EpisodeIntro", |
| 176 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 176 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 177 | caseStudyId: payload._id, | 177 | caseStudyId: payload._id, |
| 178 | payload: { | 178 | payload: { |
| 179 | metaData: payload.intro, | 179 | metaData: payload.intro, |
| 180 | comments: [], | 180 | comments: [], |
| 181 | }, | 181 | }, |
| 182 | }); | 182 | }); |
| 183 | finalSlides.push({ | 183 | finalSlides.push({ |
| 184 | forward: true, | 184 | forward: true, |
| 185 | backward: false, | 185 | backward: false, |
| 186 | ur: "Outro", | 186 | ur: "Outro", |
| 187 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 187 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 188 | caseStudyId: payload._id, | 188 | caseStudyId: payload._id, |
| 189 | payload: { | 189 | payload: { |
| 190 | metaData: payload.outro, | 190 | metaData: payload.outro, |
| 191 | comments: [], | 191 | comments: [], |
| 192 | }, | 192 | }, |
| 193 | }); | 193 | }); |
| 194 | 194 | ||
| 195 | console.log(finalSlides); | 195 | console.log(finalSlides); |
| 196 | console.log("payload", payload); | 196 | console.log("payload", payload); |
| 197 | localStorage.setItem( | 197 | localStorage.setItem( |
| 198 | "spotlight_slide" + payload._id, | 198 | "spotlight_slide" + payload._id, |
| 199 | JSON.stringify(finalSlides) | 199 | JSON.stringify(finalSlides) |
| 200 | ); | 200 | ); |
| 201 | this.allSlide = finalSlides; | 201 | this.allSlide = finalSlides; |
| 202 | this.getCurrentSlideData(); | 202 | this.getCurrentSlideData(); |
| 203 | }, | 203 | }, |
| 204 | assignRoutes(tempId) { | 204 | assignRoutes(tempId) { |
| 205 | // /episode-intro | 205 | // /episode-intro |
| 206 | // /outro | 206 | // /outro |
| 207 | var routes = [ | 207 | var routes = [ |
| 208 | { | 208 | { |
| 209 | url: "AuthorIntro", | 209 | url: "AuthorIntro", |
| 210 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 210 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 211 | }, | 211 | }, |
| 212 | { | 212 | { |
| 213 | url: "NoScreenshotSingleAuthor", | 213 | url: "NoScreenshotSingleAuthor", |
| 214 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 214 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 215 | }, | 215 | }, |
| 216 | { | 216 | { |
| 217 | url: "SingleMobileScreenInsightTwo", | 217 | url: "SingleMobileScreenInsightTwo", |
| 218 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 218 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 219 | }, | 219 | }, |
| 220 | { | 220 | { |
| 221 | url: "TwoScreenWithoutInsight", | 221 | url: "TwoScreenWithoutInsight", |
| 222 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 222 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 223 | }, | 223 | }, |
| 224 | { | 224 | { |
| 225 | url: "noscreenshotSingleautho", | 225 | url: "noscreenshotSingleautho", |
| 226 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 226 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 227 | }, | 227 | }, |
| 228 | { | 228 | { |
| 229 | url: "SingleMobileScreenInsightOne", | 229 | url: "SingleMobileScreenInsightOne", |
| 230 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 230 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 231 | }, | 231 | }, |
| 232 | { | 232 | { |
| 233 | url: "TwoScreenWithInsight", | 233 | url: "TwoScreenWithInsight", |
| 234 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 234 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 235 | }, | 235 | }, |
| 236 | { | 236 | { |
| 237 | url: "AuthorReadingNow", | 237 | url: "AuthorReadingNow", |
| 238 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 238 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 239 | }, | 239 | }, |
| 240 | { | 240 | { |
| 241 | url: "AuthorReadingBreak", | 241 | url: "AuthorReadingBreak", |
| 242 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 242 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 243 | }, | 243 | }, |
| 244 | ]; | 244 | ]; |
| 245 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 245 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 246 | return routes[i].url; | 246 | return routes[i].url; |
| 247 | }, | 247 | }, |
| 248 | 248 | ||
| 249 | getCurrentSlideData() { | 249 | getCurrentSlideData() { |
| 250 | var i = this.allSlide.findIndex( | 250 | var i = this.allSlide.findIndex( |
| 251 | (slide_) => slide_.slideId == this.$route.params.slideId | 251 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 252 | ); | 252 | ); |
| 253 | this.currentSlideIndex = i; | 253 | this.currentSlideIndex = i; |
| 254 | this.currentSlideData = this.allSlide[i]; | 254 | this.currentSlideData = this.allSlide[i]; |
| 255 | console.log( "currentSlideData", this.currentSlideData); | 255 | console.log( "currentSlideData", this.currentSlideData); |
| 256 | }, | 256 | }, |
| 257 | goNext() { | 257 | goNext() { |
| 258 | this.currentSlideIndex++; | 258 | this.currentSlideIndex++; |
| 259 | this.$router.push({ | 259 | this.$router.push({ |
| 260 | name: this.allSlide[this.currentSlideIndex].ur, | 260 | name: this.allSlide[this.currentSlideIndex].ur, |
| 261 | params: { | 261 | params: { |
| 262 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 262 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 263 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 263 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 264 | }, | 264 | }, |
| 265 | }); | 265 | }); |
| 266 | }, | 266 | }, |
| 267 | goBack() { | 267 | goBack() { |
| 268 | this.currentSlideIndex--; | 268 | this.currentSlideIndex--; |
| 269 | this.$router.push({ | 269 | this.$router.push({ |
| 270 | name: this.allSlide[this.currentSlideIndex].ur, | 270 | name: this.allSlide[this.currentSlideIndex].ur, |
| 271 | params: { | 271 | params: { |
| 272 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 272 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 273 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 273 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 274 | }, | 274 | }, |
| 275 | }); | 275 | }); |
| 276 | }, | 276 | }, |
| 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 | goToProfile() { | 283 | goToProfile() { |
| 284 | this.$router.push("/profile"); | 284 | this.$router.push("/profile"); |
| 285 | }, | 285 | }, |
| 286 | 286 | ||
| 287 | 287 | ||
| 288 | }, | 288 | }, |
| 289 | }; | 289 | }; |
| 290 | </script> | 290 | </script> |
| 291 | <style > | 291 | <style > |
| 292 | .font-style{ | 292 | .font-style{ |
| 293 | color:#35338C; | 293 | color:#35338C; |
| 294 | font-size:2rem; | 294 | font-size:2rem; |
| 295 | } | 295 | } |
| 296 | 296 | ||
| 297 | </style> | 297 | </style> |
src/components/NoScreenshotSingleAuthor.vue
| 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 | }else{ | 515 | }else{ |
| 516 | this.getCurrentSlideData(); | 516 | this.getCurrentSlideData(); |
| 517 | 517 | ||
| 518 | } | 518 | } |
| 519 | var userdata = localStorage.getItem("spotlight_usertoken"); | 519 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 520 | if (userdata) { | 520 | if (userdata) { |
| 521 | userdata = JSON.parse(userdata); | 521 | userdata = JSON.parse(userdata); |
| 522 | this.usertoken = userdata.token; | 522 | this.usertoken = userdata.token; |
| 523 | this.getComment(); | 523 | this.getComment(); |
| 524 | }else{ | 524 | }else{ |
| 525 | this.getComment(); | 525 | this.getComment(); |
| 526 | } | 526 | } |
| 527 | }, | 527 | }, |
| 528 | methods: { | 528 | methods: { |
| 529 | 529 | ||
| 530 | generatecaseStudies(){ | 530 | generatecaseStudies(){ |
| 531 | axios | 531 | axios |
| 532 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 532 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 533 | headers: { | 533 | headers: { |
| 534 | Authorization: "Bearer " + this.usertoken, | 534 | Authorization: "Bearer " + this.usertoken, |
| 535 | }, | 535 | }, |
| 536 | }) | 536 | }) |
| 537 | .then((response) => { | 537 | .then((response) => { |
| 538 | 538 | ||
| 539 | console.log('response',response.data.data); | 539 | console.log('response',response.data.data); |
| 540 | this.openStudy(response.data.data); | 540 | this.openStudy(response.data.data); |
| 541 | }) | 541 | }) |
| 542 | .catch((error) => console.log(error)); | 542 | .catch((error) => console.log(error)); |
| 543 | }, | 543 | }, |
| 544 | 544 | ||
| 545 | 545 | ||
| 546 | 546 | ||
| 547 | openStudy(payload) { | 547 | openStudy(payload) { |
| 548 | console.log("payload-", payload); | 548 | console.log("payload-", payload); |
| 549 | payload.intro.date = payload.createdAt; | 549 | payload.intro.date = payload.createdAt; |
| 550 | payload.intro.focusPoint = payload.focusAreas; | 550 | payload.intro.focusPoint = payload.focusAreas; |
| 551 | axios | 551 | axios |
| 552 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 552 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 553 | headers: { | 553 | headers: { |
| 554 | Authorization: "Bearer " + this.usertoken, | 554 | Authorization: "Bearer " + this.usertoken, |
| 555 | }, | 555 | }, |
| 556 | }) | 556 | }) |
| 557 | .then((response) => { | 557 | .then((response) => { |
| 558 | this.createSlide(payload, response.data.data); | 558 | this.createSlide(payload, response.data.data); |
| 559 | }) | 559 | }) |
| 560 | .catch((error) => console.log(error)); | 560 | .catch((error) => console.log(error)); |
| 561 | }, | 561 | }, |
| 562 | 562 | ||
| 563 | createSlide(payload, slides) { | 563 | createSlide(payload, slides) { |
| 564 | var finalSlides = []; | 564 | var finalSlides = []; |
| 565 | slides.forEach((slides_) => { | 565 | slides.forEach((slides_) => { |
| 566 | var url = this.assignRoutes(slides_.templateId); | 566 | var url = this.assignRoutes(slides_.templateId); |
| 567 | var obj = { | 567 | var obj = { |
| 568 | forward: true, | 568 | forward: true, |
| 569 | backward: true, | 569 | backward: true, |
| 570 | ur: url, | 570 | ur: url, |
| 571 | slideId: slides_._id, | 571 | slideId: slides_._id, |
| 572 | caseStudyId: slides_.caseStudyId, | 572 | caseStudyId: slides_.caseStudyId, |
| 573 | payload: { | 573 | payload: { |
| 574 | metaData: slides_.metaData, | 574 | metaData: slides_.metaData, |
| 575 | comments: slides_.comments, | 575 | comments: slides_.comments, |
| 576 | insight: slides_.insight ? slides_.insight : null, | 576 | insight: slides_.insight ? slides_.insight : null, |
| 577 | }, | 577 | }, |
| 578 | }; | 578 | }; |
| 579 | // slides_ | 579 | // slides_ |
| 580 | finalSlides.push(obj); | 580 | finalSlides.push(obj); |
| 581 | }); | 581 | }); |
| 582 | console.log("payload", payload); | 582 | console.log("payload", payload); |
| 583 | // add first slide at begining | 583 | // add first slide at begining |
| 584 | finalSlides.unshift({ | 584 | finalSlides.unshift({ |
| 585 | forward: true, | 585 | forward: true, |
| 586 | backward: false, | 586 | backward: false, |
| 587 | ur: "EpisodeIntro", | 587 | ur: "EpisodeIntro", |
| 588 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 588 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 589 | caseStudyId: payload._id, | 589 | caseStudyId: payload._id, |
| 590 | payload: { | 590 | payload: { |
| 591 | metaData: payload.intro, | 591 | metaData: payload.intro, |
| 592 | comments: [], | 592 | comments: [], |
| 593 | }, | 593 | }, |
| 594 | }); | 594 | }); |
| 595 | finalSlides.push({ | 595 | finalSlides.push({ |
| 596 | forward: true, | 596 | forward: true, |
| 597 | backward: false, | 597 | backward: false, |
| 598 | ur: "Outro", | 598 | ur: "Outro", |
| 599 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 599 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 600 | caseStudyId: payload._id, | 600 | caseStudyId: payload._id, |
| 601 | payload: { | 601 | payload: { |
| 602 | metaData: payload.outro, | 602 | metaData: payload.outro, |
| 603 | comments: [], | 603 | comments: [], |
| 604 | }, | 604 | }, |
| 605 | }); | 605 | }); |
| 606 | 606 | ||
| 607 | console.log(finalSlides); | 607 | console.log(finalSlides); |
| 608 | console.log("payload", payload); | 608 | console.log("payload", payload); |
| 609 | localStorage.setItem( | 609 | localStorage.setItem( |
| 610 | "spotlight_slide" + payload._id, | 610 | "spotlight_slide" + payload._id, |
| 611 | JSON.stringify(finalSlides) | 611 | JSON.stringify(finalSlides) |
| 612 | ); | 612 | ); |
| 613 | this.allSlide = finalSlides; | 613 | this.allSlide = finalSlides; |
| 614 | this.getCurrentSlideData(); | 614 | this.getCurrentSlideData(); |
| 615 | }, | 615 | }, |
| 616 | assignRoutes(tempId) { | 616 | assignRoutes(tempId) { |
| 617 | // /episode-intro | 617 | // /episode-intro |
| 618 | // /outro | 618 | // /outro |
| 619 | var routes = [ | 619 | var routes = [ |
| 620 | { | 620 | { |
| 621 | url: "AuthorIntro", | 621 | url: "AuthorIntro", |
| 622 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 622 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 623 | }, | 623 | }, |
| 624 | { | 624 | { |
| 625 | url: "NoScreenshotSingleAuthor", | 625 | url: "NoScreenshotSingleAuthor", |
| 626 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 626 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 627 | }, | 627 | }, |
| 628 | { | 628 | { |
| 629 | url: "SingleMobileScreenInsightTwo", | 629 | url: "SingleMobileScreenInsightTwo", |
| 630 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 630 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 631 | }, | 631 | }, |
| 632 | { | 632 | { |
| 633 | url: "TwoScreenWithoutInsight", | 633 | url: "TwoScreenWithoutInsight", |
| 634 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 634 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 635 | }, | 635 | }, |
| 636 | { | 636 | { |
| 637 | url: "noscreenshotSingleautho", | 637 | url: "noscreenshotSingleautho", |
| 638 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 638 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 639 | }, | 639 | }, |
| 640 | { | 640 | { |
| 641 | url: "SingleMobileScreenInsightOne", | 641 | url: "SingleMobileScreenInsightOne", |
| 642 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 642 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 643 | }, | 643 | }, |
| 644 | { | 644 | { |
| 645 | url: "TwoScreenWithInsight", | 645 | url: "TwoScreenWithInsight", |
| 646 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 646 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 647 | }, | 647 | }, |
| 648 | { | 648 | { |
| 649 | url: "AuthorReadingNow", | 649 | url: "AuthorReadingNow", |
| 650 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 650 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 651 | }, | 651 | }, |
| 652 | { | 652 | { |
| 653 | url: "AuthorReadingBreak", | 653 | url: "AuthorReadingBreak", |
| 654 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 654 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 655 | }, | 655 | }, |
| 656 | ]; | 656 | ]; |
| 657 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 657 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 658 | return routes[i].url; | 658 | return routes[i].url; |
| 659 | }, | 659 | }, |
| 660 | 660 | ||
| 661 | getCurrentSlideData() { | 661 | getCurrentSlideData() { |
| 662 | var i = this.allSlide.findIndex( | 662 | var i = this.allSlide.findIndex( |
| 663 | (slide_) => slide_.slideId == this.$route.params.slideId | 663 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 664 | ); | 664 | ); |
| 665 | this.currentSlideIndex = i; | 665 | this.currentSlideIndex = i; |
| 666 | this.currentSlideData = this.allSlide[i]; | 666 | this.currentSlideData = this.allSlide[i]; |
| 667 | console.log("currentSlideData", this.currentSlideData); | 667 | console.log("currentSlideData", this.currentSlideData); |
| 668 | }, | 668 | }, |
| 669 | goNext() { | 669 | goNext() { |
| 670 | this.currentSlideIndex++; | 670 | this.currentSlideIndex++; |
| 671 | this.$router.push({ | 671 | this.$router.push({ |
| 672 | name: this.allSlide[this.currentSlideIndex].ur, | 672 | name: this.allSlide[this.currentSlideIndex].ur, |
| 673 | params: { | 673 | params: { |
| 674 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 674 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 675 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 675 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 676 | }, | 676 | }, |
| 677 | }); | 677 | }); |
| 678 | }, | 678 | }, |
| 679 | goBack() { | 679 | goBack() { |
| 680 | this.currentSlideIndex--; | 680 | this.currentSlideIndex--; |
| 681 | this.$router.push({ | 681 | this.$router.push({ |
| 682 | name: this.allSlide[this.currentSlideIndex].ur, | 682 | name: this.allSlide[this.currentSlideIndex].ur, |
| 683 | params: { | 683 | params: { |
| 684 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 684 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 685 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 685 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 686 | }, | 686 | }, |
| 687 | }); | 687 | }); |
| 688 | }, | 688 | }, |
| 689 | createComment() { | 689 | createComment() { |
| 690 | console.log("===", this.comment); | 690 | console.log("===", this.comment); |
| 691 | if(!this.usertoken){ | ||
| 692 | this.goToLogin(); | ||
| 693 | } | ||
| 691 | var obj = { | 694 | var obj = { |
| 692 | caseStudyId: this.currentSlideData.caseStudyId, | 695 | caseStudyId: this.currentSlideData.caseStudyId, |
| 693 | slideId: this.currentSlideData.slideId, | 696 | slideId: this.currentSlideData.slideId, |
| 694 | comment: this.comment, | 697 | comment: this.comment, |
| 695 | 698 | ||
| 696 | }; | 699 | }; |
| 697 | axios | 700 | axios |
| 698 | .post("/bounceBoard/comment", obj, { | 701 | .post("/bounceBoard/comment", obj, { |
| 699 | headers: { | 702 | headers: { |
| 700 | Authorization: "Bearer " + this.usertoken, | 703 | Authorization: "Bearer " + this.usertoken, |
| 701 | }, | 704 | }, |
| 702 | }) | 705 | }) |
| 703 | .then((response) => { | 706 | .then((response) => { |
| 704 | this.comment = null; | 707 | this.comment = null; |
| 705 | this.getComment(); | 708 | this.getComment(); |
| 706 | console.log(response); | 709 | console.log(response); |
| 707 | }) | 710 | }) |
| 708 | .catch((error) => { | 711 | .catch((error) => { |
| 709 | if (error.response) { | 712 | if (error.response) { |
| 710 | this.$toaster.error(error.response.data.message); | 713 | this.$toaster.error(error.response.data.message); |
| 711 | } | 714 | } |
| 712 | }); | 715 | }); |
| 713 | }, | 716 | }, |
| 714 | createChildComment(cmnt) { | 717 | createChildComment(cmnt) { |
| 715 | console.log(cmnt,"===", this.comment); | 718 | if(!this.usertoken){ |
| 719 | this.goToLogin(); | ||
| 720 | } console.log(cmnt,"===", this.comment); | ||
| 716 | var obj = { | 721 | var obj = { |
| 717 | caseStudyId: this.currentSlideData.caseStudyId, | 722 | caseStudyId: this.currentSlideData.caseStudyId, |
| 718 | slideId: this.currentSlideData.slideId, | 723 | slideId: this.currentSlideData.slideId, |
| 719 | comment: this.comment, | 724 | comment: this.comment, |
| 720 | parentId: cmnt._id, | 725 | parentId: cmnt._id, |
| 721 | 726 | ||
| 722 | }; | 727 | }; |
| 723 | axios | 728 | axios |
| 724 | .post("/bounceBoard/comment", obj, { | 729 | .post("/bounceBoard/comment", obj, { |
| 725 | headers: { | 730 | headers: { |
| 726 | Authorization: "Bearer " + this.usertoken, | 731 | Authorization: "Bearer " + this.usertoken, |
| 727 | }, | 732 | }, |
| 728 | }) | 733 | }) |
| 729 | .then((response) => { | 734 | .then((response) => { |
| 730 | this.comment = null; | 735 | this.comment = null; |
| 731 | this.discardRply(cmnt); | 736 | this.discardRply(cmnt); |
| 732 | this.getComment(); | 737 | this.getComment(); |
| 733 | console.log(response); | 738 | console.log(response); |
| 734 | }) | 739 | }) |
| 735 | .catch((error) => { | 740 | .catch((error) => { |
| 736 | if (error.response) { | 741 | if (error.response) { |
| 737 | this.$toaster.error(error.response.data.message); | 742 | this.$toaster.error(error.response.data.message); |
| 738 | } | 743 | } |
| 739 | }); | 744 | }); |
| 740 | }, | 745 | }, |
| 741 | getComment() { | 746 | getComment() { |
| 742 | axios | 747 | axios |
| 743 | .get( | 748 | .get( |
| 744 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 749 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 745 | { | 750 | { |
| 746 | headers: { | 751 | headers: { |
| 747 | Authorization: "Bearer " + this.usertoken, | 752 | Authorization: "Bearer " + this.usertoken, |
| 748 | }, | 753 | }, |
| 749 | } | 754 | } |
| 750 | ) | 755 | ) |
| 751 | .then((response) => { | 756 | .then((response) => { |
| 752 | console.log(response.data); | 757 | console.log(response.data); |
| 753 | var comments = []; | 758 | var comments = []; |
| 754 | var keys = Object.keys(response.data.data) | 759 | var keys = Object.keys(response.data.data) |
| 755 | response.data.data | 760 | response.data.data |
| 756 | keys.forEach((key_) => { | 761 | keys.forEach((key_) => { |
| 757 | comments.push(response.data.data[key_]) | 762 | comments.push(response.data.data[key_]) |
| 758 | }); | 763 | }); |
| 759 | comments.forEach((coment_)=>{ | 764 | comments.forEach((coment_)=>{ |
| 760 | coment_.childInput = false; | 765 | coment_.childInput = false; |
| 761 | }); | 766 | }); |
| 762 | console.log("comments",comments) | 767 | console.log("comments",comments) |
| 763 | this.commentList = comments; | 768 | this.commentList = comments; |
| 764 | }) | 769 | }) |
| 765 | .catch((error) => console.log(error)); | 770 | .catch((error) => console.log(error)); |
| 766 | }, | 771 | }, |
| 767 | dateGenerator(curreDate){ | 772 | dateGenerator(curreDate){ |
| 768 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 773 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 769 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 774 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 770 | var result = todayDate.diff(endDate, 'days'); | 775 | var result = todayDate.diff(endDate, 'days'); |
| 771 | return result; | 776 | return result; |
| 772 | }, | 777 | }, |
| 773 | goToLogin() { | 778 | goToLogin() { |
| 774 | this.$router.push("/login"); | 779 | this.$router.push("/login"); |
| 775 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); | 780 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); |
| 776 | 781 | ||
| 777 | }, | 782 | }, |
| 778 | goToSignUp() { | 783 | goToSignUp() { |
| 779 | this.$router.push("/"); | 784 | this.$router.push("/"); |
| 780 | }, | 785 | }, |
| 781 | chtbox_close() { | 786 | chtbox_close() { |
| 782 | $("#cht_box_close").removeClass("cht_close"); | 787 | $("#cht_box_close").removeClass("cht_close"); |
| 783 | $("#open_ct_box, .c_hide").show(); | 788 | $("#open_ct_box, .c_hide").show(); |
| 784 | $(".footer-top").addClass("white-bg"); | 789 | $(".footer-top").addClass("white-bg"); |
| 785 | }, | 790 | }, |
| 786 | open_ct_box() { | 791 | open_ct_box() { |
| 787 | if(!this.usertoken){ | 792 | |
| 788 | this.goToLogin(); | ||
| 789 | } | ||
| 790 | $("#cht_box_close").addClass("cht_close"); | 793 | $("#cht_box_close").addClass("cht_close"); |
| 791 | $("#open_ct_box, .c_hide").hide(); | 794 | $("#open_ct_box, .c_hide").hide(); |
| 792 | $(".footer-top").removeClass("white-bg"); | 795 | $(".footer-top").removeClass("white-bg"); |
| 793 | }, | 796 | }, |
| 794 | eachRply(cmnt) { | 797 | eachRply(cmnt) { |
| 795 | cmnt.childInput = true; | 798 | cmnt.childInput = true; |
| 796 | this.parentInput = false; | 799 | this.parentInput = false; |
| 797 | this.comment = null; | 800 | this.comment = null; |
| 798 | setTimeout(() => { | 801 | setTimeout(() => { |
| 799 | document.getElementById("childInput").focus(); | 802 | document.getElementById("childInput").focus(); |
| 800 | }, 100); | 803 | }, 100); |
| 801 | }, | 804 | }, |
| 802 | discardRply(cmnt) { | 805 | discardRply(cmnt) { |
| 803 | cmnt.childInput = false; | 806 | cmnt.childInput = false; |
| 804 | this.parentInput = true; | 807 | this.parentInput = true; |
| 805 | this.comment = null; | 808 | this.comment = null; |
| 806 | }, | 809 | }, |
| 807 | reply_cht_box(i) { | 810 | reply_cht_box(i) { |
| 808 | if(!this.usertoken){ | 811 | if(!this.usertoken){ |
| 809 | this.goToLogin(); | 812 | this.goToLogin(); |
| 810 | } | 813 | } |
| 811 | console.log(this.commentList, "cmnt"); | 814 | console.log(this.commentList, "cmnt"); |
| 812 | $("#cht_box_close").addClass("cht_close"); | 815 | $("#cht_box_close").addClass("cht_close"); |
| 813 | $("#open_ct_box, .c_hide").hide(); | 816 | $("#open_ct_box, .c_hide").hide(); |
| 814 | $(".footer-top").removeClass("white-bg"); | 817 | $(".footer-top").removeClass("white-bg"); |
| 815 | this.commentList[i].childInput = true; | 818 | this.commentList[i].childInput = true; |
| 816 | this.parentInput = false; | 819 | this.parentInput = false; |
| 817 | this.comment = null; | 820 | this.comment = null; |
| 818 | setTimeout(() => { | 821 | setTimeout(() => { |
| 819 | document.getElementById("childInput").focus(); | 822 | document.getElementById("childInput").focus(); |
| 820 | }, 100); | 823 | }, 100); |
| 821 | }, | 824 | }, |
| 822 | likeComment(status, id) { | 825 | likeComment(status, id) { |
| 823 | if(!this.usertoken){ | 826 | if(!this.usertoken){ |
| 824 | this.goToLogin(); | 827 | this.goToLogin(); |
| 825 | } | 828 | } |
| 826 | console.log("===", this.comment); | 829 | console.log("===", this.comment); |
| 827 | var obj = { | 830 | var obj = { |
| 828 | commentId: id, | 831 | commentId: id, |
| 829 | like: status, | 832 | like: status, |
| 830 | }; | 833 | }; |
| 831 | axios | 834 | axios |
| 832 | .post("/bounceBoard/like", obj, { | 835 | .post("/bounceBoard/like", obj, { |
| 833 | headers: { | 836 | headers: { |
| 834 | Authorization: "Bearer " + this.usertoken, | 837 | Authorization: "Bearer " + this.usertoken, |
| 835 | }, | 838 | }, |
| 836 | }) | 839 | }) |
| 837 | .then((response) => { | 840 | .then((response) => { |
| 838 | this.getComment(); | 841 | this.getComment(); |
| 839 | console.log(response); | 842 | console.log(response); |
| 840 | }) | 843 | }) |
| 841 | .catch((error) => { | 844 | .catch((error) => { |
| 842 | if (error.response) { | 845 | if (error.response) { |
| 843 | this.$toaster.error(error.response.data.message); | 846 | this.$toaster.error(error.response.data.message); |
| 844 | } | 847 | } |
| 845 | }); | 848 | }); |
| 846 | }, | 849 | }, |
| 847 | getLastcomment(flag, commentArray) { | 850 | getLastcomment(flag, commentArray) { |
| 848 | var finalComment = null; | 851 | var finalComment = null; |
| 849 | var totalMessage = 0; | 852 | var totalMessage = 0; |
| 850 | var name = null; | 853 | var name = null; |
| 851 | commentArray.forEach((comment_) => { | 854 | commentArray.forEach((comment_) => { |
| 852 | if (comment_.comment != null) { | 855 | if (comment_.comment != null) { |
| 853 | name = comment_.user.name; | 856 | name = comment_.user.name; |
| 854 | finalComment = comment_.comment; | 857 | finalComment = comment_.comment; |
| 855 | totalMessage++; | 858 | totalMessage++; |
| 856 | } | 859 | } |
| 857 | }); | 860 | }); |
| 858 | if (flag == "count") { | 861 | if (flag == "count") { |
| 859 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 862 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 860 | } else if (flag =="name") { | 863 | } else if (flag =="name") { |
| 861 | return (name = name); | 864 | return (name = name); |
| 862 | } else { | 865 | } else { |
| 863 | return finalComment; | 866 | return finalComment; |
| 864 | } | 867 | } |
| 865 | }, | 868 | }, |
| 866 | commentExistCheck(i) { | 869 | commentExistCheck(i) { |
| 867 | console.log(this.commentList[i].comment); | 870 | console.log(this.commentList[i].comment); |
| 868 | var returnValue = false; | 871 | var returnValue = false; |
| 869 | if (this.commentList[i].comment) { | 872 | if (this.commentList[i].comment) { |
| 870 | returnValue = true; | 873 | returnValue = true; |
| 871 | } | 874 | } |
| 872 | return returnValue; | 875 | return returnValue; |
| 873 | }, | 876 | }, |
| 874 | }, | 877 | }, |
| 875 | }; | 878 | }; |
| 876 | // | 879 | // |
| 877 | 880 |
src/components/SingleMobileScreenInsightOne.vue
| 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="m-screen-hidden"> |
| 217 | <div class="top-area-blank"></div> | 217 | <div class="top-area-blank"></div> |
| 218 | <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" /> | 218 | <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" /> |
| 219 | </div> | 219 | </div> |
| 220 | <div class="single-left-Insight-comments"> | 220 | <div class="single-left-Insight-comments"> |
| 221 | <div class="author-thoughts"> | 221 | <div class="author-thoughts"> |
| 222 | 222 | ||
| 223 | <img | 223 | <img |
| 224 | src="../assets/images/thoughts-upper.svg" | 224 | src="../assets/images/thoughts-upper.svg" |
| 225 | class="upper-th" | 225 | class="upper-th" |
| 226 | /> | 226 | /> |
| 227 | <img | 227 | <img |
| 228 | :src="currentSlideData.payload.metaData.authorImage" | 228 | :src="currentSlideData.payload.metaData.authorImage" |
| 229 | class="dynamic-thoughts" | 229 | class="dynamic-thoughts" |
| 230 | /> | 230 | /> |
| 231 | </div><!-- user thoughts --> | 231 | </div><!-- user thoughts --> |
| 232 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | 232 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 233 | <div class="a-intro-comments custom-c-style"> | 233 | <div class="a-intro-comments custom-c-style"> |
| 234 | <p> | 234 | <p> |
| 235 | {{commentList[0].comment}} | 235 | {{commentList[0].comment}} |
| 236 | </p> | 236 | </p> |
| 237 | <ul class="rly-comment-set"> | 237 | <ul class="rly-comment-set"> |
| 238 | <!-- like/dislike --> | 238 | <!-- like/dislike --> |
| 239 | <li> | 239 | <li> |
| 240 | <img | 240 | <img |
| 241 | src="../assets/images/heart.svg" | 241 | src="../assets/images/heart.svg" |
| 242 | v-if="commentList[0].like == false" | 242 | v-if="commentList[0].like == false" |
| 243 | @click="likeComment(true, commentList[0]._id)" | 243 | @click="likeComment(true, commentList[0]._id)" |
| 244 | class="cursor-pointer" | 244 | class="cursor-pointer" |
| 245 | /> | 245 | /> |
| 246 | <img | 246 | <img |
| 247 | src="../assets/images/purple-heart.png" | 247 | src="../assets/images/purple-heart.png" |
| 248 | v-if="commentList[0].like == true" | 248 | v-if="commentList[0].like == true" |
| 249 | @click="likeComment(false, commentList[0]._id)" | 249 | @click="likeComment(false, commentList[0]._id)" |
| 250 | class="cursor-pointer" | 250 | class="cursor-pointer" |
| 251 | /> | 251 | /> |
| 252 | <a href="javascript:void(0);">{{ | 252 | <a href="javascript:void(0);">{{ |
| 253 | commentList[0].likes.length | 253 | commentList[0].likes.length |
| 254 | }}</a> | 254 | }}</a> |
| 255 | </li> | 255 | </li> |
| 256 | <!-- like/dislike ends --> | 256 | <!-- like/dislike ends --> |
| 257 | <li> | 257 | <li> |
| 258 | <img src="../assets/images/rply.svg" /> | 258 | <img src="../assets/images/rply.svg" /> |
| 259 | <a href="javascript:void(0);" @click="reply_cht_box(0)" | 259 | <a href="javascript:void(0);" @click="reply_cht_box(0)" |
| 260 | >Reply</a | 260 | >Reply</a |
| 261 | > | 261 | > |
| 262 | </li> | 262 | </li> |
| 263 | </ul> | 263 | </ul> |
| 264 | </div> | 264 | </div> |
| 265 | <!-- comments box --> | 265 | <!-- comments box --> |
| 266 | </div> | 266 | </div> |
| 267 | <!-- single author comments --> | 267 | <!-- single author comments --> |
| 268 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | 268 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 269 | <div class="a-intro-comments custom-c-style"> | 269 | <div class="a-intro-comments custom-c-style"> |
| 270 | <p> | 270 | <p> |
| 271 | {{commentList[1].comment}} | 271 | {{commentList[1].comment}} |
| 272 | </p> | 272 | </p> |
| 273 | <ul class="rly-comment-set"> | 273 | <ul class="rly-comment-set"> |
| 274 | <!-- like/dislike --> | 274 | <!-- like/dislike --> |
| 275 | <li> | 275 | <li> |
| 276 | <img | 276 | <img |
| 277 | src="../assets/images/heart.svg" | 277 | src="../assets/images/heart.svg" |
| 278 | v-if="commentList[1].like == false" | 278 | v-if="commentList[1].like == false" |
| 279 | @click="likeComment(true, commentList[1]._id)" | 279 | @click="likeComment(true, commentList[1]._id)" |
| 280 | class="cursor-pointer" | 280 | class="cursor-pointer" |
| 281 | /> | 281 | /> |
| 282 | <img | 282 | <img |
| 283 | src="../assets/images/purple-heart.png" | 283 | src="../assets/images/purple-heart.png" |
| 284 | v-if="commentList[1].like == true" | 284 | v-if="commentList[1].like == true" |
| 285 | @click="likeComment(false, commentList[1]._id)" | 285 | @click="likeComment(false, commentList[1]._id)" |
| 286 | class="cursor-pointer" | 286 | class="cursor-pointer" |
| 287 | /> | 287 | /> |
| 288 | <a href="javascript:void(0);">{{ | 288 | <a href="javascript:void(0);">{{ |
| 289 | commentList[1].likes.length | 289 | commentList[1].likes.length |
| 290 | }}</a> | 290 | }}</a> |
| 291 | </li> | 291 | </li> |
| 292 | <!-- like/dislike ends --> | 292 | <!-- like/dislike ends --> |
| 293 | <li> | 293 | <li> |
| 294 | <img src="../assets/images/rply.svg" /> | 294 | <img src="../assets/images/rply.svg" /> |
| 295 | <a href="javascript:void(0);" @click="reply_cht_box(1)" | 295 | <a href="javascript:void(0);" @click="reply_cht_box(1)" |
| 296 | >Reply</a | 296 | >Reply</a |
| 297 | > | 297 | > |
| 298 | </li> | 298 | </li> |
| 299 | </ul> | 299 | </ul> |
| 300 | </div> | 300 | </div> |
| 301 | <!-- comments box --> | 301 | <!-- comments box --> |
| 302 | </div> | 302 | </div> |
| 303 | <!-- single author comments --> | 303 | <!-- single author comments --> |
| 304 | </div> | 304 | </div> |
| 305 | <!-- single mobile Left insight --> | 305 | <!-- single mobile Left insight --> |
| 306 | <div class="c-product-insight-wrp"> | 306 | <div class="c-product-insight-wrp"> |
| 307 | <div class="single-author-li-comments"> | 307 | <div class="single-author-li-comments"> |
| 308 | <div class="a-intro-comments custom-selected-style"> | 308 | <div class="a-intro-comments custom-selected-style"> |
| 309 | <img src="../assets/images/rect.svg" class="rect" /> | 309 | <img src="../assets/images/rect.svg" class="rect" /> |
| 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 | Decide on using multiple call to action vs single call to | 315 | Decide on using multiple call to action vs single call to |
| 316 | action depending on the stage of the user journey | 316 | action depending on the stage of the user journey |
| 317 | </div> | 317 | </div> |
| 318 | <p> | 318 | <p> |
| 319 | Marketing 101 teaches us to use one single, call to action | 319 | Marketing 101 teaches us to use one single, call to action |
| 320 | (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 |
| 321 | interest in the product. <br /><br /> | 321 | interest in the product. <br /><br /> |
| 322 | When the user is already onboarded and is in the | 322 | When the user is already onboarded and is in the |
| 323 | <strong> engage stage </strong>, it may be better to use a | 323 | <strong> engage stage </strong>, it may be better to use a |
| 324 | single CTA for each use case in order to | 324 | single CTA for each use case in order to |
| 325 | <strong> avoid ambiguity.</strong> | 325 | <strong> avoid ambiguity.</strong> |
| 326 | </p> --> | 326 | </p> --> |
| 327 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> | 327 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> |
| 328 | <p>{{currentSlideData.payload.insight.description}} | 328 | <p>{{currentSlideData.payload.insight.description}} |
| 329 | <div class="footer"> | 329 | <div class="footer"> |
| 330 | <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> |
| 331 | <!-- <a href="javascript:void(0);" class="ft-share" | 331 | <!-- <a href="javascript:void(0);" class="ft-share" |
| 332 | ><img src="../assets/images/reply-red.svg" /> Share from | 332 | ><img src="../assets/images/reply-red.svg" /> Share from |
| 333 | library</a | 333 | library</a |
| 334 | > --> | 334 | > --> |
| 335 | </div> | 335 | </div> |
| 336 | <!-- footer --> | 336 | <!-- footer --> |
| 337 | </div> | 337 | </div> |
| 338 | <!-- comments box --> | 338 | <!-- comments box --> |
| 339 | </div> | 339 | </div> |
| 340 | <!-- single author comments --> | 340 | <!-- single author comments --> |
| 341 | </div> | 341 | </div> |
| 342 | <!-- single mobile Right insight --> | 342 | <!-- single mobile Right insight --> |
| 343 | </div> | 343 | </div> |
| 344 | <!-- Single Mobile Insight --> | 344 | <!-- Single Mobile Insight --> |
| 345 | <!-- single author comments --> | 345 | <!-- single author comments --> |
| 346 | <div class="footer-nav"> | 346 | <div class="footer-nav"> |
| 347 | <div class="footer-top white-bg"> | 347 | <div class="footer-top white-bg"> |
| 348 | <div class="row"> | 348 | <div class="row"> |
| 349 | <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"> |
| 350 | <div class="row h-100p"> | 350 | <div class="row h-100p"> |
| 351 | <div | 351 | <div |
| 352 | 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" |
| 353 | > | 353 | > |
| 354 | <div class="ft-comments-group testi-photos-ct"> | 354 | <div class="ft-comments-group testi-photos-ct"> |
| 355 | <div class="c-with-photos"> | 355 | <div class="c-with-photos"> |
| 356 | <span class="count-comments" | 356 | <span class="count-comments" |
| 357 | >{{ getLastcomment("count", commentList) }}+ | 357 | >{{ getLastcomment("count", commentList) }}+ |
| 358 | Comments</span | 358 | Comments</span |
| 359 | ><!-- count commets --> | 359 | ><!-- count commets --> |
| 360 | <ul class="comments-photos"> | 360 | <ul class="comments-photos"> |
| 361 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | 361 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 362 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | 362 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 363 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | 363 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 364 | </ul> | 364 | </ul> |
| 365 | <!-- comment photos --> | 365 | <!-- comment photos --> |
| 366 | </div> | 366 | </div> |
| 367 | <div class="comments-detail all-c-space"> | 367 | <div class="comments-detail all-c-space"> |
| 368 | <span | 368 | <span |
| 369 | >{{ getLastcomment("name", commentList) }} | 369 | >{{ getLastcomment("name", commentList) }} |
| 370 | <a href="javascript:void(0);" @click="open_ct_box" | 370 | <a href="javascript:void(0);" @click="open_ct_box" |
| 371 | >View All</a | 371 | >View All</a |
| 372 | ></span | 372 | ></span |
| 373 | > | 373 | > |
| 374 | <p> | 374 | <p> |
| 375 | <!-- I wonder what the difference between “Dunzo Assistant” | 375 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 376 | and “Pickup and Drop... --> | 376 | and “Pickup and Drop... --> |
| 377 | {{ getLastcomment("msg", commentList) }} | 377 | {{ getLastcomment("msg", commentList) }} |
| 378 | </p> | 378 | </p> |
| 379 | </div> | 379 | </div> |
| 380 | <!-- comments detail --> | 380 | <!-- comments detail --> |
| 381 | </div> | 381 | </div> |
| 382 | <!-- comments Group --> | 382 | <!-- comments Group --> |
| 383 | </div> | 383 | </div> |
| 384 | </div> | 384 | </div> |
| 385 | </div> | 385 | </div> |
| 386 | <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"> |
| 387 | <div class="comment-frm no-c-frm"> | 387 | <div class="comment-frm no-c-frm"> |
| 388 | <div class="row"> | 388 | <div class="row"> |
| 389 | <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"> |
| 390 | <div class="form-group frm-wdth addfrm-spc"> | 390 | <div class="form-group frm-wdth addfrm-spc"> |
| 391 | <input | 391 | <input |
| 392 | type="text" | 392 | type="text" |
| 393 | class="form-control" | 393 | class="form-control" |
| 394 | placeholder="Something on your mind?" | 394 | placeholder="Something on your mind?" |
| 395 | id="open_ct_box" | 395 | id="open_ct_box" |
| 396 | v-model="comment" | 396 | v-model="comment" |
| 397 | /> | 397 | /> |
| 398 | </div> | 398 | </div> |
| 399 | </div> | 399 | </div> |
| 400 | <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"> |
| 401 | <a | 401 | <a |
| 402 | href="javascript:void(0);" | 402 | href="javascript:void(0);" |
| 403 | @click="createComment" | 403 | @click="createComment" |
| 404 | class="add-comment" | 404 | class="add-comment" |
| 405 | ><img src="../assets/images/add-comment.svg" /> | 405 | ><img src="../assets/images/add-comment.svg" /> |
| 406 | Comment</a | 406 | Comment</a |
| 407 | > | 407 | > |
| 408 | </div> | 408 | </div> |
| 409 | </div> | 409 | </div> |
| 410 | <!-- comment from --> | 410 | <!-- comment from --> |
| 411 | </div> | 411 | </div> |
| 412 | </div> | 412 | </div> |
| 413 | <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"> |
| 414 | <ul class="top-intro-bt"> | 414 | <ul class="top-intro-bt"> |
| 415 | <li> | 415 | <li> |
| 416 | <a href="javascript:void(0);" @click="goBack" | 416 | <a href="javascript:void(0);" @click="goBack" |
| 417 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 417 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 418 | > | 418 | > |
| 419 | </li> | 419 | </li> |
| 420 | <li> | 420 | <li> |
| 421 | <a href="javascript:void(0);" @click="goNext" | 421 | <a href="javascript:void(0);" @click="goNext" |
| 422 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 422 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 423 | slide</a | 423 | slide</a |
| 424 | > | 424 | > |
| 425 | </li> | 425 | </li> |
| 426 | </ul> | 426 | </ul> |
| 427 | </div> | 427 | </div> |
| 428 | <!-- buttons list --> | 428 | <!-- buttons list --> |
| 429 | </div> | 429 | </div> |
| 430 | </div> | 430 | </div> |
| 431 | <!-- footer top --> | 431 | <!-- footer top --> |
| 432 | <div class="footer-bottom"> | 432 | <div class="footer-bottom"> |
| 433 | <ul> | 433 | <ul> |
| 434 | <li class="active"></li> | 434 | <li class="active"></li> |
| 435 | <li></li> | 435 | <li></li> |
| 436 | </ul> | 436 | </ul> |
| 437 | </div> | 437 | </div> |
| 438 | <!-- footer top --> | 438 | <!-- footer top --> |
| 439 | </div> | 439 | </div> |
| 440 | <!-- footer --> | 440 | <!-- footer --> |
| 441 | </div> | 441 | </div> |
| 442 | <!-- body wrapper --> | 442 | <!-- body wrapper --> |
| 443 | </div> | 443 | </div> |
| 444 | <!-- main wrapper --> | 444 | <!-- main wrapper --> |
| 445 | </main> | 445 | </main> |
| 446 | </template> | 446 | </template> |
| 447 | 447 | ||
| 448 | <script> | 448 | <script> |
| 449 | import Vue from "vue"; | 449 | import Vue from "vue"; |
| 450 | import router from "../router"; | 450 | import router from "../router"; |
| 451 | import axios from "axios"; | 451 | import axios from "axios"; |
| 452 | import moment from 'moment'; | 452 | import moment from 'moment'; |
| 453 | import Header from "./Header"; | 453 | import Header from "./Header"; |
| 454 | 454 | ||
| 455 | export default { | 455 | export default { |
| 456 | components: { | 456 | components: { |
| 457 | Header: Header, | 457 | Header: Header, |
| 458 | }, | 458 | }, |
| 459 | name: "SingleMobileScreenInsightOne", | 459 | name: "SingleMobileScreenInsightOne", |
| 460 | 460 | ||
| 461 | data() { | 461 | data() { |
| 462 | return { | 462 | return { |
| 463 | allSlide: [], | 463 | allSlide: [], |
| 464 | currentSlideIndex: null, | 464 | currentSlideIndex: null, |
| 465 | currentSlideData: null, | 465 | currentSlideData: null, |
| 466 | // | 466 | // |
| 467 | usertoken: null, | 467 | usertoken: null, |
| 468 | commentList: [], | 468 | commentList: [], |
| 469 | comment: null, | 469 | comment: null, |
| 470 | parentInput: true, | 470 | parentInput: true, |
| 471 | }; | 471 | }; |
| 472 | }, | 472 | }, |
| 473 | mounted() { | 473 | mounted() { |
| 474 | var allSlideData = localStorage.getItem( | 474 | var allSlideData = localStorage.getItem( |
| 475 | "spotlight_slide" + this.$route.params.caseStudyId | 475 | "spotlight_slide" + this.$route.params.caseStudyId |
| 476 | ); | 476 | ); |
| 477 | if (allSlideData) { | 477 | if (allSlideData) { |
| 478 | this.allSlide = JSON.parse(allSlideData); | 478 | this.allSlide = JSON.parse(allSlideData); |
| 479 | this.getCurrentSlideData(); | 479 | this.getCurrentSlideData(); |
| 480 | }else{ | 480 | }else{ |
| 481 | this.getCurrentSlideData(); | 481 | this.getCurrentSlideData(); |
| 482 | 482 | ||
| 483 | } | 483 | } |
| 484 | var userdata = localStorage.getItem("spotlight_usertoken"); | 484 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 485 | if (userdata) { | 485 | if (userdata) { |
| 486 | userdata = JSON.parse(userdata); | 486 | userdata = JSON.parse(userdata); |
| 487 | this.usertoken = userdata.token; | 487 | this.usertoken = userdata.token; |
| 488 | this.getComment(); | 488 | this.getComment(); |
| 489 | }else{ | 489 | }else{ |
| 490 | this.getComment(); | 490 | this.getComment(); |
| 491 | } | 491 | } |
| 492 | }, | 492 | }, |
| 493 | methods: { | 493 | methods: { |
| 494 | 494 | ||
| 495 | generatecaseStudies(){ | 495 | generatecaseStudies(){ |
| 496 | axios | 496 | axios |
| 497 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 497 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 498 | headers: { | 498 | headers: { |
| 499 | Authorization: "Bearer " + this.usertoken, | 499 | Authorization: "Bearer " + this.usertoken, |
| 500 | }, | 500 | }, |
| 501 | }) | 501 | }) |
| 502 | .then((response) => { | 502 | .then((response) => { |
| 503 | 503 | ||
| 504 | console.log('response',response.data.data); | 504 | console.log('response',response.data.data); |
| 505 | this.openStudy(response.data.data); | 505 | this.openStudy(response.data.data); |
| 506 | }) | 506 | }) |
| 507 | .catch((error) => console.log(error)); | 507 | .catch((error) => console.log(error)); |
| 508 | }, | 508 | }, |
| 509 | 509 | ||
| 510 | 510 | ||
| 511 | 511 | ||
| 512 | openStudy(payload) { | 512 | openStudy(payload) { |
| 513 | console.log("payload-", payload); | 513 | console.log("payload-", payload); |
| 514 | payload.intro.date = payload.createdAt; | 514 | payload.intro.date = payload.createdAt; |
| 515 | payload.intro.focusPoint = payload.focusAreas; | 515 | payload.intro.focusPoint = payload.focusAreas; |
| 516 | axios | 516 | axios |
| 517 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 517 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 518 | headers: { | 518 | headers: { |
| 519 | Authorization: "Bearer " + this.usertoken, | 519 | Authorization: "Bearer " + this.usertoken, |
| 520 | }, | 520 | }, |
| 521 | }) | 521 | }) |
| 522 | .then((response) => { | 522 | .then((response) => { |
| 523 | this.createSlide(payload, response.data.data); | 523 | this.createSlide(payload, response.data.data); |
| 524 | }) | 524 | }) |
| 525 | .catch((error) => console.log(error)); | 525 | .catch((error) => console.log(error)); |
| 526 | }, | 526 | }, |
| 527 | 527 | ||
| 528 | createSlide(payload, slides) { | 528 | createSlide(payload, slides) { |
| 529 | var finalSlides = []; | 529 | var finalSlides = []; |
| 530 | slides.forEach((slides_) => { | 530 | slides.forEach((slides_) => { |
| 531 | var url = this.assignRoutes(slides_.templateId); | 531 | var url = this.assignRoutes(slides_.templateId); |
| 532 | var obj = { | 532 | var obj = { |
| 533 | forward: true, | 533 | forward: true, |
| 534 | backward: true, | 534 | backward: true, |
| 535 | ur: url, | 535 | ur: url, |
| 536 | slideId: slides_._id, | 536 | slideId: slides_._id, |
| 537 | caseStudyId: slides_.caseStudyId, | 537 | caseStudyId: slides_.caseStudyId, |
| 538 | payload: { | 538 | payload: { |
| 539 | metaData: slides_.metaData, | 539 | metaData: slides_.metaData, |
| 540 | comments: slides_.comments, | 540 | comments: slides_.comments, |
| 541 | insight: slides_.insight ? slides_.insight : null, | 541 | insight: slides_.insight ? slides_.insight : null, |
| 542 | }, | 542 | }, |
| 543 | }; | 543 | }; |
| 544 | // slides_ | 544 | // slides_ |
| 545 | finalSlides.push(obj); | 545 | finalSlides.push(obj); |
| 546 | }); | 546 | }); |
| 547 | console.log("payload", payload); | 547 | console.log("payload", payload); |
| 548 | // add first slide at begining | 548 | // add first slide at begining |
| 549 | finalSlides.unshift({ | 549 | finalSlides.unshift({ |
| 550 | forward: true, | 550 | forward: true, |
| 551 | backward: false, | 551 | backward: false, |
| 552 | ur: "EpisodeIntro", | 552 | ur: "EpisodeIntro", |
| 553 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 553 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 554 | caseStudyId: payload._id, | 554 | caseStudyId: payload._id, |
| 555 | payload: { | 555 | payload: { |
| 556 | metaData: payload.intro, | 556 | metaData: payload.intro, |
| 557 | comments: [], | 557 | comments: [], |
| 558 | }, | 558 | }, |
| 559 | }); | 559 | }); |
| 560 | finalSlides.push({ | 560 | finalSlides.push({ |
| 561 | forward: true, | 561 | forward: true, |
| 562 | backward: false, | 562 | backward: false, |
| 563 | ur: "Outro", | 563 | ur: "Outro", |
| 564 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 564 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 565 | caseStudyId: payload._id, | 565 | caseStudyId: payload._id, |
| 566 | payload: { | 566 | payload: { |
| 567 | metaData: payload.outro, | 567 | metaData: payload.outro, |
| 568 | comments: [], | 568 | comments: [], |
| 569 | }, | 569 | }, |
| 570 | }); | 570 | }); |
| 571 | 571 | ||
| 572 | console.log(finalSlides); | 572 | console.log(finalSlides); |
| 573 | console.log("payload", payload); | 573 | console.log("payload", payload); |
| 574 | localStorage.setItem( | 574 | localStorage.setItem( |
| 575 | "spotlight_slide" + payload._id, | 575 | "spotlight_slide" + payload._id, |
| 576 | JSON.stringify(finalSlides) | 576 | JSON.stringify(finalSlides) |
| 577 | ); | 577 | ); |
| 578 | this.allSlide = finalSlides; | 578 | this.allSlide = finalSlides; |
| 579 | this.getCurrentSlideData(); | 579 | this.getCurrentSlideData(); |
| 580 | }, | 580 | }, |
| 581 | assignRoutes(tempId) { | 581 | assignRoutes(tempId) { |
| 582 | // /episode-intro | 582 | // /episode-intro |
| 583 | // /outro | 583 | // /outro |
| 584 | var routes = [ | 584 | var routes = [ |
| 585 | { | 585 | { |
| 586 | url: "AuthorIntro", | 586 | url: "AuthorIntro", |
| 587 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 587 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 588 | }, | 588 | }, |
| 589 | { | 589 | { |
| 590 | url: "NoScreenshotSingleAuthor", | 590 | url: "NoScreenshotSingleAuthor", |
| 591 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 591 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 592 | }, | 592 | }, |
| 593 | { | 593 | { |
| 594 | url: "SingleMobileScreenInsightTwo", | 594 | url: "SingleMobileScreenInsightTwo", |
| 595 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 595 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 596 | }, | 596 | }, |
| 597 | { | 597 | { |
| 598 | url: "TwoScreenWithoutInsight", | 598 | url: "TwoScreenWithoutInsight", |
| 599 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 599 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 600 | }, | 600 | }, |
| 601 | { | 601 | { |
| 602 | url: "noscreenshotSingleautho", | 602 | url: "noscreenshotSingleautho", |
| 603 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 603 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 604 | }, | 604 | }, |
| 605 | { | 605 | { |
| 606 | url: "SingleMobileScreenInsightOne", | 606 | url: "SingleMobileScreenInsightOne", |
| 607 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 607 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 608 | }, | 608 | }, |
| 609 | { | 609 | { |
| 610 | url: "TwoScreenWithInsight", | 610 | url: "TwoScreenWithInsight", |
| 611 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 611 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 612 | }, | 612 | }, |
| 613 | { | 613 | { |
| 614 | url: "AuthorReadingNow", | 614 | url: "AuthorReadingNow", |
| 615 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 615 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 616 | }, | 616 | }, |
| 617 | { | 617 | { |
| 618 | url: "AuthorReadingBreak", | 618 | url: "AuthorReadingBreak", |
| 619 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 619 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 620 | }, | 620 | }, |
| 621 | ]; | 621 | ]; |
| 622 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 622 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 623 | return routes[i].url; | 623 | return routes[i].url; |
| 624 | }, | 624 | }, |
| 625 | 625 | ||
| 626 | getCurrentSlideData() { | 626 | getCurrentSlideData() { |
| 627 | var i = this.allSlide.findIndex( | 627 | var i = this.allSlide.findIndex( |
| 628 | (slide_) => slide_.slideId == this.$route.params.slideId | 628 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 629 | ); | 629 | ); |
| 630 | this.currentSlideIndex = i; | 630 | this.currentSlideIndex = i; |
| 631 | this.currentSlideData = this.allSlide[i]; | 631 | this.currentSlideData = this.allSlide[i]; |
| 632 | console.log("currentSlideData", this.currentSlideData); | 632 | console.log("currentSlideData", this.currentSlideData); |
| 633 | }, | 633 | }, |
| 634 | goNext() { | 634 | goNext() { |
| 635 | this.currentSlideIndex++; | 635 | this.currentSlideIndex++; |
| 636 | this.$router.push({ | 636 | this.$router.push({ |
| 637 | name: this.allSlide[this.currentSlideIndex].ur, | 637 | name: this.allSlide[this.currentSlideIndex].ur, |
| 638 | params: { | 638 | params: { |
| 639 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 639 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 640 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 640 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 641 | }, | 641 | }, |
| 642 | }); | 642 | }); |
| 643 | }, | 643 | }, |
| 644 | goBack() { | 644 | goBack() { |
| 645 | this.currentSlideIndex--; | 645 | this.currentSlideIndex--; |
| 646 | this.$router.push({ | 646 | this.$router.push({ |
| 647 | name: this.allSlide[this.currentSlideIndex].ur, | 647 | name: this.allSlide[this.currentSlideIndex].ur, |
| 648 | params: { | 648 | params: { |
| 649 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 649 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 650 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 650 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 651 | }, | 651 | }, |
| 652 | }); | 652 | }); |
| 653 | }, | 653 | }, |
| 654 | createComment() { | 654 | createComment() { |
| 655 | console.log("===", this.comment); | 655 | console.log("===", this.comment); |
| 656 | if(!this.usertoken){ | ||
| 657 | this.goToLogin(); | ||
| 658 | } | ||
| 656 | var obj = { | 659 | var obj = { |
| 657 | caseStudyId: this.currentSlideData.caseStudyId, | 660 | caseStudyId: this.currentSlideData.caseStudyId, |
| 658 | slideId: this.currentSlideData.slideId, | 661 | slideId: this.currentSlideData.slideId, |
| 659 | comment: this.comment, | 662 | comment: this.comment, |
| 660 | 663 | ||
| 661 | }; | 664 | }; |
| 662 | axios | 665 | axios |
| 663 | .post("/bounceBoard/comment", obj, { | 666 | .post("/bounceBoard/comment", obj, { |
| 664 | headers: { | 667 | headers: { |
| 665 | Authorization: "Bearer " + this.usertoken, | 668 | Authorization: "Bearer " + this.usertoken, |
| 666 | }, | 669 | }, |
| 667 | }) | 670 | }) |
| 668 | .then((response) => { | 671 | .then((response) => { |
| 669 | this.comment = null; | 672 | this.comment = null; |
| 670 | this.getComment(); | 673 | this.getComment(); |
| 671 | console.log(response); | 674 | console.log(response); |
| 672 | }) | 675 | }) |
| 673 | .catch((error) => { | 676 | .catch((error) => { |
| 674 | if (error.response) { | 677 | if (error.response) { |
| 675 | this.$toaster.error(error.response.data.message); | 678 | this.$toaster.error(error.response.data.message); |
| 676 | } | 679 | } |
| 677 | }); | 680 | }); |
| 678 | }, | 681 | }, |
| 679 | createChildComment(cmnt) { | 682 | createChildComment(cmnt) { |
| 680 | console.log(cmnt,"===", this.comment); | 683 | if(!this.usertoken){ |
| 684 | this.goToLogin(); | ||
| 685 | } console.log(cmnt,"===", this.comment); | ||
| 681 | var obj = { | 686 | var obj = { |
| 682 | caseStudyId: this.currentSlideData.caseStudyId, | 687 | caseStudyId: this.currentSlideData.caseStudyId, |
| 683 | slideId: this.currentSlideData.slideId, | 688 | slideId: this.currentSlideData.slideId, |
| 684 | comment: this.comment, | 689 | comment: this.comment, |
| 685 | parentId: cmnt._id, | 690 | parentId: cmnt._id, |
| 686 | 691 | ||
| 687 | }; | 692 | }; |
| 688 | axios | 693 | axios |
| 689 | .post("/bounceBoard/comment", obj, { | 694 | .post("/bounceBoard/comment", obj, { |
| 690 | headers: { | 695 | headers: { |
| 691 | Authorization: "Bearer " + this.usertoken, | 696 | Authorization: "Bearer " + this.usertoken, |
| 692 | }, | 697 | }, |
| 693 | }) | 698 | }) |
| 694 | .then((response) => { | 699 | .then((response) => { |
| 695 | this.comment = null; | 700 | this.comment = null; |
| 696 | this.discardRply(cmnt); | 701 | this.discardRply(cmnt); |
| 697 | this.getComment(); | 702 | this.getComment(); |
| 698 | console.log(response); | 703 | console.log(response); |
| 699 | }) | 704 | }) |
| 700 | .catch((error) => { | 705 | .catch((error) => { |
| 701 | if (error.response) { | 706 | if (error.response) { |
| 702 | this.$toaster.error(error.response.data.message); | 707 | this.$toaster.error(error.response.data.message); |
| 703 | } | 708 | } |
| 704 | }); | 709 | }); |
| 705 | }, | 710 | }, |
| 706 | getComment() { | 711 | getComment() { |
| 707 | axios | 712 | axios |
| 708 | .get( | 713 | .get( |
| 709 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 714 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 710 | { | 715 | { |
| 711 | headers: { | 716 | headers: { |
| 712 | Authorization: "Bearer " + this.usertoken, | 717 | Authorization: "Bearer " + this.usertoken, |
| 713 | }, | 718 | }, |
| 714 | } | 719 | } |
| 715 | ) | 720 | ) |
| 716 | .then((response) => { | 721 | .then((response) => { |
| 717 | console.log(response.data); | 722 | console.log(response.data); |
| 718 | var comments = []; | 723 | var comments = []; |
| 719 | var keys = Object.keys(response.data.data) | 724 | var keys = Object.keys(response.data.data) |
| 720 | response.data.data | 725 | response.data.data |
| 721 | keys.forEach((key_) => { | 726 | keys.forEach((key_) => { |
| 722 | comments.push(response.data.data[key_]) | 727 | comments.push(response.data.data[key_]) |
| 723 | }); | 728 | }); |
| 724 | comments.forEach((coment_)=>{ | 729 | comments.forEach((coment_)=>{ |
| 725 | coment_.childInput = false; | 730 | coment_.childInput = false; |
| 726 | }); | 731 | }); |
| 727 | console.log("comments",comments) | 732 | console.log("comments",comments) |
| 728 | this.commentList = comments; | 733 | this.commentList = comments; |
| 729 | }) | 734 | }) |
| 730 | .catch((error) => console.log(error)); | 735 | .catch((error) => console.log(error)); |
| 731 | }, | 736 | }, |
| 732 | dateGenerator(curreDate){ | 737 | dateGenerator(curreDate){ |
| 733 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 738 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 734 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 739 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 735 | var result = todayDate.diff(endDate, 'days'); | 740 | var result = todayDate.diff(endDate, 'days'); |
| 736 | return result; | 741 | return result; |
| 737 | }, | 742 | }, |
| 738 | goToLogin() { | 743 | goToLogin() { |
| 739 | this.$router.push("/login"); | 744 | this.$router.push("/login"); |
| 740 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); | 745 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); |
| 741 | 746 | ||
| 742 | }, | 747 | }, |
| 743 | goToSignUp() { | 748 | goToSignUp() { |
| 744 | this.$router.push("/"); | 749 | this.$router.push("/"); |
| 745 | }, | 750 | }, |
| 746 | open(url){ | 751 | open(url){ |
| 747 | window.open(url); | 752 | window.open(url); |
| 748 | }, | 753 | }, |
| 749 | chtbox_close() { | 754 | chtbox_close() { |
| 750 | $("#cht_box_close").removeClass("cht_close"); | 755 | $("#cht_box_close").removeClass("cht_close"); |
| 751 | $("#open_ct_box, .c_hide").show(); | 756 | $("#open_ct_box, .c_hide").show(); |
| 752 | $(".footer-top").addClass("white-bg"); | 757 | $(".footer-top").addClass("white-bg"); |
| 753 | }, | 758 | }, |
| 754 | open_ct_box() { | 759 | open_ct_box() { |
| 755 | if(!this.usertoken){ | 760 | |
| 756 | this.goToLogin(); | ||
| 757 | } | ||
| 758 | $("#cht_box_close").addClass("cht_close"); | 761 | $("#cht_box_close").addClass("cht_close"); |
| 759 | $("#open_ct_box, .c_hide").hide(); | 762 | $("#open_ct_box, .c_hide").hide(); |
| 760 | $(".footer-top").removeClass("white-bg"); | 763 | $(".footer-top").removeClass("white-bg"); |
| 761 | }, | 764 | }, |
| 762 | eachRply(cmnt) { | 765 | eachRply(cmnt) { |
| 763 | cmnt.childInput = true; | 766 | cmnt.childInput = true; |
| 764 | this.parentInput = false; | 767 | this.parentInput = false; |
| 765 | this.comment = null; | 768 | this.comment = null; |
| 766 | setTimeout(() => { | 769 | setTimeout(() => { |
| 767 | document.getElementById("childInput").focus(); | 770 | document.getElementById("childInput").focus(); |
| 768 | }, 100); | 771 | }, 100); |
| 769 | }, | 772 | }, |
| 770 | discardRply(cmnt) { | 773 | discardRply(cmnt) { |
| 771 | cmnt.childInput = false; | 774 | cmnt.childInput = false; |
| 772 | this.parentInput = true; | 775 | this.parentInput = true; |
| 773 | this.comment = null; | 776 | this.comment = null; |
| 774 | }, | 777 | }, |
| 775 | reply_cht_box(i) { | 778 | reply_cht_box(i) { |
| 776 | if(!this.usertoken){ | 779 | if(!this.usertoken){ |
| 777 | this.goToLogin(); | 780 | this.goToLogin(); |
| 778 | } | 781 | } |
| 779 | console.log(this.commentList, "cmnt"); | 782 | console.log(this.commentList, "cmnt"); |
| 780 | $("#cht_box_close").addClass("cht_close"); | 783 | $("#cht_box_close").addClass("cht_close"); |
| 781 | $("#open_ct_box, .c_hide").hide(); | 784 | $("#open_ct_box, .c_hide").hide(); |
| 782 | $(".footer-top").removeClass("white-bg"); | 785 | $(".footer-top").removeClass("white-bg"); |
| 783 | this.commentList[i].childInput = true; | 786 | this.commentList[i].childInput = true; |
| 784 | this.parentInput = false; | 787 | this.parentInput = false; |
| 785 | this.comment = null; | 788 | this.comment = null; |
| 786 | setTimeout(() => { | 789 | setTimeout(() => { |
| 787 | document.getElementById("childInput").focus(); | 790 | document.getElementById("childInput").focus(); |
| 788 | }, 100); | 791 | }, 100); |
| 789 | }, | 792 | }, |
| 790 | likeComment(status, id) { | 793 | likeComment(status, id) { |
| 791 | if(!this.usertoken){ | 794 | if(!this.usertoken){ |
| 792 | this.goToLogin(); | 795 | this.goToLogin(); |
| 793 | } | 796 | } |
| 794 | console.log("===", this.comment); | 797 | console.log("===", this.comment); |
| 795 | var obj = { | 798 | var obj = { |
| 796 | commentId: id, | 799 | commentId: id, |
| 797 | like: status, | 800 | like: status, |
| 798 | }; | 801 | }; |
| 799 | axios | 802 | axios |
| 800 | .post("/bounceBoard/like", obj, { | 803 | .post("/bounceBoard/like", obj, { |
| 801 | headers: { | 804 | headers: { |
| 802 | Authorization: "Bearer " + this.usertoken, | 805 | Authorization: "Bearer " + this.usertoken, |
| 803 | }, | 806 | }, |
| 804 | }) | 807 | }) |
| 805 | .then((response) => { | 808 | .then((response) => { |
| 806 | this.getComment(); | 809 | this.getComment(); |
| 807 | console.log(response); | 810 | console.log(response); |
| 808 | }) | 811 | }) |
| 809 | .catch((error) => { | 812 | .catch((error) => { |
| 810 | if (error.response) { | 813 | if (error.response) { |
| 811 | this.$toaster.error(error.response.data.message); | 814 | this.$toaster.error(error.response.data.message); |
| 812 | } | 815 | } |
| 813 | }); | 816 | }); |
| 814 | }, | 817 | }, |
| 815 | getLastcomment(flag, commentArray) { | 818 | getLastcomment(flag, commentArray) { |
| 816 | var finalComment = null; | 819 | var finalComment = null; |
| 817 | var totalMessage = 0; | 820 | var totalMessage = 0; |
| 818 | var name = null; | 821 | var name = null; |
| 819 | commentArray.forEach((comment_) => { | 822 | commentArray.forEach((comment_) => { |
| 820 | if (comment_.comment != null) { | 823 | if (comment_.comment != null) { |
| 821 | name = comment_.user.name; | 824 | name = comment_.user.name; |
| 822 | finalComment = comment_.comment; | 825 | finalComment = comment_.comment; |
| 823 | totalMessage++; | 826 | totalMessage++; |
| 824 | } | 827 | } |
| 825 | }); | 828 | }); |
| 826 | if (flag == "count") { | 829 | if (flag == "count") { |
| 827 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 830 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 828 | } else if (flag =="name") { | 831 | } else if (flag =="name") { |
| 829 | return (name = name); | 832 | return (name = name); |
| 830 | } else { | 833 | } else { |
| 831 | return finalComment; | 834 | return finalComment; |
| 832 | } | 835 | } |
| 833 | }, | 836 | }, |
| 834 | commentExistCheck(i) { | 837 | commentExistCheck(i) { |
| 835 | console.log(this.commentList[i].comment); | 838 | console.log(this.commentList[i].comment); |
| 836 | var returnValue = false; | 839 | var returnValue = false; |
| 837 | if (this.commentList[i].comment) { | 840 | if (this.commentList[i].comment) { |
| 838 | returnValue = true; | 841 | returnValue = true; |
| 839 | } | 842 | } |
| 840 | return returnValue; | 843 | return returnValue; |
| 841 | }, | 844 | }, |
| 842 | }, | 845 | }, |
| 843 | }; | 846 | }; |
| 844 | // | 847 | // |
src/components/SingleMobileScreenInsightTwo.vue
| 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="m-screen-hidden"> |
| 237 | <div class="top-area-blank"></div> | 237 | <div class="top-area-blank"></div> |
| 238 | <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> | 238 | <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> |
| 239 | <img | 239 | <img |
| 240 | :src="currentSlideData.payload.metaData.mobileImage" | 240 | :src="currentSlideData.payload.metaData.mobileImage" |
| 241 | class="m-screen insight-two-img" | 241 | class="m-screen insight-two-img" |
| 242 | /> | 242 | /> |
| 243 | </div> | 243 | </div> |
| 244 | <div class="single-left-Insight-comments"> | 244 | <div class="single-left-Insight-comments"> |
| 245 | <div class="author-thoughts"> | 245 | <div class="author-thoughts"> |
| 246 | <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> | 246 | <img src="../assets/images/thoughts-upper.svg" class="upper-th" /> |
| 247 | <img | 247 | <img |
| 248 | :src="currentSlideData.payload.metaData.authorImage" | 248 | :src="currentSlideData.payload.metaData.authorImage" |
| 249 | class="dynamic-thoughts" | 249 | class="dynamic-thoughts" |
| 250 | /> | 250 | /> |
| 251 | </div> | 251 | </div> |
| 252 | <!-- user thoughts --> | 252 | <!-- user thoughts --> |
| 253 | 253 | ||
| 254 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | 254 | <div class="single-author-li-comments" v-if="commentExistCheck(0)"> |
| 255 | <div class="a-intro-comments custom-c-style"> | 255 | <div class="a-intro-comments custom-c-style"> |
| 256 | <!-- <p> | 256 | <!-- <p> |
| 257 | I wonder what the difference between “ | 257 | I wonder what the difference between “ |
| 258 | <strong>Dunzo Assistant </strong>” and “<strong | 258 | <strong>Dunzo Assistant </strong>” and “<strong |
| 259 | >Pickup and Drop </strong | 259 | >Pickup and Drop </strong |
| 260 | >” 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” |
| 261 | for the same workflow | 261 | for the same workflow |
| 262 | </p> --> | 262 | </p> --> |
| 263 | <p>{{ commentList[0].comment }}</p> | 263 | <p>{{ commentList[0].comment }}</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[0].like == false" | 269 | v-if="commentList[0].like == false" |
| 270 | @click="likeComment(true, commentList[0]._id)" | 270 | @click="likeComment(true, commentList[0]._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[0].like == true" | 275 | v-if="commentList[0].like == true" |
| 276 | @click="likeComment(false, commentList[0]._id)" | 276 | @click="likeComment(false, commentList[0]._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[0].likes.length | 280 | commentList[0].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(0)" | 286 | <a href="javascript:void(0);" @click="reply_cht_box(0)" |
| 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(1)"> | 295 | <div class="single-author-li-comments" v-if="commentExistCheck(1)"> |
| 296 | <div class="a-intro-comments custom-c-style"> | 296 | <div class="a-intro-comments custom-c-style"> |
| 297 | <p> | 297 | <p> |
| 298 | {{ commentList[1].comment }} | 298 | {{ commentList[1].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[1].like == false" | 305 | v-if="commentList[1].like == false" |
| 306 | @click="likeComment(true, commentList[1]._id)" | 306 | @click="likeComment(true, commentList[1]._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[1].like == true" | 311 | v-if="commentList[1].like == true" |
| 312 | @click="likeComment(false, commentList[1]._id)" | 312 | @click="likeComment(false, commentList[1]._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[1].likes.length | 316 | commentList[1].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(1)" | 322 | <a href="javascript:void(0);" @click="reply_cht_box(1)" |
| 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 | <!-- single author comments --> | 330 | <!-- single author comments --> |
| 331 | </div> | 331 | </div> |
| 332 | <!-- single mobile Left insight --> | 332 | <!-- single mobile Left insight --> |
| 333 | <div | 333 | <div |
| 334 | class="c-product-insight-wrp two-screen-spc-top" | 334 | class="c-product-insight-wrp two-screen-spc-top" |
| 335 | v-if="commentExistCheck(2)" | 335 | v-if="commentExistCheck(2)" |
| 336 | > | 336 | > |
| 337 | <div class="single-author-li-comments"> | 337 | <div class="single-author-li-comments"> |
| 338 | <div class="a-intro-comments"> | 338 | <div class="a-intro-comments"> |
| 339 | <p> | 339 | <p> |
| 340 | {{ commentList[2].comment }} | 340 | {{ commentList[2].comment }} |
| 341 | </p> | 341 | </p> |
| 342 | <ul class="rly-comment-set"> | 342 | <ul class="rly-comment-set"> |
| 343 | <!-- like/dislike --> | 343 | <!-- like/dislike --> |
| 344 | <li> | 344 | <li> |
| 345 | <img | 345 | <img |
| 346 | src="../assets/images/heart.svg" | 346 | src="../assets/images/heart.svg" |
| 347 | v-if="commentList[2].like == false" | 347 | v-if="commentList[2].like == false" |
| 348 | @click="likeComment(true, commentList[2]._id)" | 348 | @click="likeComment(true, commentList[2]._id)" |
| 349 | class="cursor-pointer" | 349 | class="cursor-pointer" |
| 350 | /> | 350 | /> |
| 351 | <img | 351 | <img |
| 352 | src="../assets/images/purple-heart.png" | 352 | src="../assets/images/purple-heart.png" |
| 353 | v-if="commentList[2].like == true" | 353 | v-if="commentList[2].like == true" |
| 354 | @click="likeComment(false, commentList[2]._id)" | 354 | @click="likeComment(false, commentList[2]._id)" |
| 355 | class="cursor-pointer" | 355 | class="cursor-pointer" |
| 356 | /> | 356 | /> |
| 357 | <a href="javascript:void(0);">{{ | 357 | <a href="javascript:void(0);">{{ |
| 358 | commentList[2].likes.length | 358 | commentList[2].likes.length |
| 359 | }}</a> | 359 | }}</a> |
| 360 | </li> | 360 | </li> |
| 361 | <!-- like/dislike ends --> | 361 | <!-- like/dislike ends --> |
| 362 | <li> | 362 | <li> |
| 363 | <img src="../assets/images/rply.svg" /> | 363 | <img src="../assets/images/rply.svg" /> |
| 364 | <a href="javascript:void(0);" @click="reply_cht_box(2)" | 364 | <a href="javascript:void(0);" @click="reply_cht_box(2)" |
| 365 | >Reply</a | 365 | >Reply</a |
| 366 | > | 366 | > |
| 367 | </li> | 367 | </li> |
| 368 | </ul> | 368 | </ul> |
| 369 | </div> | 369 | </div> |
| 370 | <!-- comments box --> | 370 | <!-- comments box --> |
| 371 | </div> | 371 | </div> |
| 372 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | 372 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> |
| 373 | <div class="a-intro-comments"> | 373 | <div class="a-intro-comments"> |
| 374 | <p> | 374 | <p> |
| 375 | {{ commentList[3].comment }} | 375 | {{ commentList[3].comment }} |
| 376 | </p> | 376 | </p> |
| 377 | <ul class="rly-comment-set"> | 377 | <ul class="rly-comment-set"> |
| 378 | <!-- like/dislike --> | 378 | <!-- like/dislike --> |
| 379 | <li> | 379 | <li> |
| 380 | <img | 380 | <img |
| 381 | src="../assets/images/heart.svg" | 381 | src="../assets/images/heart.svg" |
| 382 | v-if="commentList[3].like == false" | 382 | v-if="commentList[3].like == false" |
| 383 | @click="likeComment(true, commentList[3]._id)" | 383 | @click="likeComment(true, commentList[3]._id)" |
| 384 | class="cursor-pointer" | 384 | class="cursor-pointer" |
| 385 | /> | 385 | /> |
| 386 | <img | 386 | <img |
| 387 | src="../assets/images/purple-heart.png" | 387 | src="../assets/images/purple-heart.png" |
| 388 | v-if="commentList[3].like == true" | 388 | v-if="commentList[3].like == true" |
| 389 | @click="likeComment(false, commentList[3]._id)" | 389 | @click="likeComment(false, commentList[3]._id)" |
| 390 | class="cursor-pointer" | 390 | class="cursor-pointer" |
| 391 | /> | 391 | /> |
| 392 | <a href="javascript:void(0);">{{ | 392 | <a href="javascript:void(0);">{{ |
| 393 | commentList[3].likes.length | 393 | commentList[3].likes.length |
| 394 | }}</a> | 394 | }}</a> |
| 395 | </li> | 395 | </li> |
| 396 | <!-- like/dislike ends --> | 396 | <!-- like/dislike ends --> |
| 397 | <li> | 397 | <li> |
| 398 | <img src="../assets/images/rply.svg" /> | 398 | <img src="../assets/images/rply.svg" /> |
| 399 | <a href="javascript:void(0);" @click="reply_cht_box(3)" | 399 | <a href="javascript:void(0);" @click="reply_cht_box(3)" |
| 400 | >Reply</a | 400 | >Reply</a |
| 401 | > | 401 | > |
| 402 | </li> | 402 | </li> |
| 403 | </ul> | 403 | </ul> |
| 404 | </div> | 404 | </div> |
| 405 | <!-- comments box --> | 405 | <!-- comments box --> |
| 406 | </div> | 406 | </div> |
| 407 | <!-- single author comments --> | 407 | <!-- single author comments --> |
| 408 | </div> | 408 | </div> |
| 409 | <!-- single mobile Right insight --> | 409 | <!-- single mobile Right insight --> |
| 410 | </div> | 410 | </div> |
| 411 | <!-- single author comments --> | 411 | <!-- single author comments --> |
| 412 | <div class="footer-nav"> | 412 | <div class="footer-nav"> |
| 413 | <div class="footer-top white-bg"> | 413 | <div class="footer-top white-bg"> |
| 414 | <div class="row"> | 414 | <div class="row"> |
| 415 | <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"> |
| 416 | <div class="row h-100p"> | 416 | <div class="row h-100p"> |
| 417 | <div | 417 | <div |
| 418 | 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" |
| 419 | > | 419 | > |
| 420 | <div class="ft-comments-group testi-photos-ct"> | 420 | <div class="ft-comments-group testi-photos-ct"> |
| 421 | <div class="c-with-photos"> | 421 | <div class="c-with-photos"> |
| 422 | <span class="count-comments" | 422 | <span class="count-comments" |
| 423 | >{{ getLastcomment("count", commentList) }}+ | 423 | >{{ getLastcomment("count", commentList) }}+ |
| 424 | Comments</span | 424 | Comments</span |
| 425 | ><!-- count commets --> | 425 | ><!-- count commets --> |
| 426 | <ul class="comments-photos"> | 426 | <ul class="comments-photos"> |
| 427 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> | 427 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> |
| 428 | <li><img src="../assets/images/c-photo-2.png" /></li> | 428 | <li><img src="../assets/images/c-photo-2.png" /></li> |
| 429 | <li><img src="../assets/images/c-photo-3.png" /></li> --> | 429 | <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 430 | </ul> | 430 | </ul> |
| 431 | <!-- comment photos --> | 431 | <!-- comment photos --> |
| 432 | </div> | 432 | </div> |
| 433 | <div class="comments-detail all-c-space"> | 433 | <div class="comments-detail all-c-space"> |
| 434 | <span | 434 | <span |
| 435 | >{{ getLastcomment("name", commentList) }} | 435 | >{{ getLastcomment("name", commentList) }} |
| 436 | <a href="javascript:void(0);" @click="open_ct_box" | 436 | <a href="javascript:void(0);" @click="open_ct_box" |
| 437 | >View All</a | 437 | >View All</a |
| 438 | ></span | 438 | ></span |
| 439 | > | 439 | > |
| 440 | <p> | 440 | <p> |
| 441 | <!-- I wonder what the difference between “Dunzo Assistant” | 441 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 442 | and “Pickup and Drop... --> | 442 | and “Pickup and Drop... --> |
| 443 | {{ getLastcomment("msg", commentList) }} | 443 | {{ getLastcomment("msg", commentList) }} |
| 444 | </p> | 444 | </p> |
| 445 | </div> | 445 | </div> |
| 446 | <!-- comments detail --> | 446 | <!-- comments detail --> |
| 447 | </div> | 447 | </div> |
| 448 | <!-- comments Group --> | 448 | <!-- comments Group --> |
| 449 | </div> | 449 | </div> |
| 450 | </div> | 450 | </div> |
| 451 | </div> | 451 | </div> |
| 452 | <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"> |
| 453 | <div class="comment-frm no-c-frm"> | 453 | <div class="comment-frm no-c-frm"> |
| 454 | <div class="row"> | 454 | <div class="row"> |
| 455 | <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"> |
| 456 | <div class="form-group frm-wdth addfrm-spc"> | 456 | <div class="form-group frm-wdth addfrm-spc"> |
| 457 | <input | 457 | <input |
| 458 | type="text" | 458 | type="text" |
| 459 | class="form-control" | 459 | class="form-control" |
| 460 | placeholder="Something on your mind?" | 460 | placeholder="Something on your mind?" |
| 461 | id="open_ct_box" | 461 | id="open_ct_box" |
| 462 | v-model="comment" | 462 | v-model="comment" |
| 463 | /> | 463 | /> |
| 464 | </div> | 464 | </div> |
| 465 | </div> | 465 | </div> |
| 466 | <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"> |
| 467 | <a | 467 | <a |
| 468 | href="javascript:void(0);" | 468 | href="javascript:void(0);" |
| 469 | @click="createComment" | 469 | @click="createComment" |
| 470 | class="add-comment" | 470 | class="add-comment" |
| 471 | ><img src="../assets/images/add-comment.svg" /> | 471 | ><img src="../assets/images/add-comment.svg" /> |
| 472 | Comment</a | 472 | Comment</a |
| 473 | > | 473 | > |
| 474 | </div> | 474 | </div> |
| 475 | </div> | 475 | </div> |
| 476 | <!-- comment from --> | 476 | <!-- comment from --> |
| 477 | </div> | 477 | </div> |
| 478 | </div> | 478 | </div> |
| 479 | <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"> |
| 480 | <ul class="top-intro-bt"> | 480 | <ul class="top-intro-bt"> |
| 481 | <li> | 481 | <li> |
| 482 | <a href="javascript:void(0);" @click="goBack" | 482 | <a href="javascript:void(0);" @click="goBack" |
| 483 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 483 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 484 | > | 484 | > |
| 485 | </li> | 485 | </li> |
| 486 | <li> | 486 | <li> |
| 487 | <a href="javascript:void(0);" @click="goNext" | 487 | <a href="javascript:void(0);" @click="goNext" |
| 488 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 488 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 489 | slide</a | 489 | slide</a |
| 490 | > | 490 | > |
| 491 | </li> | 491 | </li> |
| 492 | </ul> | 492 | </ul> |
| 493 | </div> | 493 | </div> |
| 494 | <!-- buttons list --> | 494 | <!-- buttons list --> |
| 495 | </div> | 495 | </div> |
| 496 | </div> | 496 | </div> |
| 497 | <!-- footer top --> | 497 | <!-- footer top --> |
| 498 | <div class="footer-bottom"> | 498 | <div class="footer-bottom"> |
| 499 | <ul> | 499 | <ul> |
| 500 | <li class="active"></li> | 500 | <li class="active"></li> |
| 501 | <li></li> | 501 | <li></li> |
| 502 | </ul> | 502 | </ul> |
| 503 | </div> | 503 | </div> |
| 504 | <!-- footer top --> | 504 | <!-- footer top --> |
| 505 | </div> | 505 | </div> |
| 506 | <!-- footer --> | 506 | <!-- footer --> |
| 507 | </div> | 507 | </div> |
| 508 | <!-- body wrapper --> | 508 | <!-- body wrapper --> |
| 509 | </div> | 509 | </div> |
| 510 | <!-- main wrapper --> | 510 | <!-- main wrapper --> |
| 511 | </main> | 511 | </main> |
| 512 | </template> | 512 | </template> |
| 513 | 513 | ||
| 514 | <script> | 514 | <script> |
| 515 | import Vue from "vue"; | 515 | import Vue from "vue"; |
| 516 | import router from "../router"; | 516 | import router from "../router"; |
| 517 | import axios from "axios"; | 517 | import axios from "axios"; |
| 518 | import moment from "moment"; | 518 | import moment from "moment"; |
| 519 | import Header from "./Header"; | 519 | import Header from "./Header"; |
| 520 | 520 | ||
| 521 | export default { | 521 | export default { |
| 522 | components: { | 522 | components: { |
| 523 | Header: Header, | 523 | Header: Header, |
| 524 | }, | 524 | }, |
| 525 | name: "SingleMobileScreenInsightTwo", | 525 | name: "SingleMobileScreenInsightTwo", |
| 526 | data() { | 526 | data() { |
| 527 | return { | 527 | return { |
| 528 | allSlide: [], | 528 | allSlide: [], |
| 529 | currentSlideIndex: null, | 529 | currentSlideIndex: null, |
| 530 | currentSlideData: null, | 530 | currentSlideData: null, |
| 531 | // | 531 | // |
| 532 | usertoken: null, | 532 | usertoken: null, |
| 533 | commentList: [], | 533 | commentList: [], |
| 534 | comment: null, | 534 | comment: null, |
| 535 | parentInput: true, | 535 | parentInput: true, |
| 536 | }; | 536 | }; |
| 537 | }, | 537 | }, |
| 538 | mounted() { | 538 | mounted() { |
| 539 | var allSlideData = localStorage.getItem( | 539 | var allSlideData = localStorage.getItem( |
| 540 | "spotlight_slide" + this.$route.params.caseStudyId | 540 | "spotlight_slide" + this.$route.params.caseStudyId |
| 541 | ); | 541 | ); |
| 542 | var userdata = localStorage.getItem("spotlight_usertoken"); | 542 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 543 | if (allSlideData) { | 543 | if (allSlideData) { |
| 544 | this.allSlide = JSON.parse(allSlideData); | 544 | this.allSlide = JSON.parse(allSlideData); |
| 545 | this.getCurrentSlideData(); | 545 | this.getCurrentSlideData(); |
| 546 | }else{ | 546 | }else{ |
| 547 | this.getCurrentSlideData(); | 547 | this.getCurrentSlideData(); |
| 548 | 548 | ||
| 549 | } | 549 | } |
| 550 | var userdata = localStorage.getItem("spotlight_usertoken"); | 550 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 551 | if (userdata) { | 551 | if (userdata) { |
| 552 | userdata = JSON.parse(userdata); | 552 | userdata = JSON.parse(userdata); |
| 553 | this.usertoken = userdata.token; | 553 | this.usertoken = userdata.token; |
| 554 | this.getComment(); | 554 | this.getComment(); |
| 555 | }else{ | 555 | }else{ |
| 556 | this.getComment(); | 556 | this.getComment(); |
| 557 | } | 557 | } |
| 558 | }, | 558 | }, |
| 559 | methods: { | 559 | methods: { |
| 560 | 560 | ||
| 561 | generatecaseStudies(){ | 561 | generatecaseStudies(){ |
| 562 | axios | 562 | axios |
| 563 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 563 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 564 | headers: { | 564 | headers: { |
| 565 | Authorization: "Bearer " + this.usertoken, | 565 | Authorization: "Bearer " + this.usertoken, |
| 566 | }, | 566 | }, |
| 567 | }) | 567 | }) |
| 568 | .then((response) => { | 568 | .then((response) => { |
| 569 | 569 | ||
| 570 | console.log('response',response.data.data); | 570 | console.log('response',response.data.data); |
| 571 | this.openStudy(response.data.data); | 571 | this.openStudy(response.data.data); |
| 572 | }) | 572 | }) |
| 573 | .catch((error) => console.log(error)); | 573 | .catch((error) => console.log(error)); |
| 574 | }, | 574 | }, |
| 575 | 575 | ||
| 576 | 576 | ||
| 577 | 577 | ||
| 578 | openStudy(payload) { | 578 | openStudy(payload) { |
| 579 | console.log("payload-", payload); | 579 | console.log("payload-", payload); |
| 580 | payload.intro.date = payload.createdAt; | 580 | payload.intro.date = payload.createdAt; |
| 581 | payload.intro.focusPoint = payload.focusAreas; | 581 | payload.intro.focusPoint = payload.focusAreas; |
| 582 | axios | 582 | axios |
| 583 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 583 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 584 | headers: { | 584 | headers: { |
| 585 | Authorization: "Bearer " + this.usertoken, | 585 | Authorization: "Bearer " + this.usertoken, |
| 586 | }, | 586 | }, |
| 587 | }) | 587 | }) |
| 588 | .then((response) => { | 588 | .then((response) => { |
| 589 | this.createSlide(payload, response.data.data); | 589 | this.createSlide(payload, response.data.data); |
| 590 | }) | 590 | }) |
| 591 | .catch((error) => console.log(error)); | 591 | .catch((error) => console.log(error)); |
| 592 | }, | 592 | }, |
| 593 | 593 | ||
| 594 | createSlide(payload, slides) { | 594 | createSlide(payload, slides) { |
| 595 | var finalSlides = []; | 595 | var finalSlides = []; |
| 596 | slides.forEach((slides_) => { | 596 | slides.forEach((slides_) => { |
| 597 | var url = this.assignRoutes(slides_.templateId); | 597 | var url = this.assignRoutes(slides_.templateId); |
| 598 | var obj = { | 598 | var obj = { |
| 599 | forward: true, | 599 | forward: true, |
| 600 | backward: true, | 600 | backward: true, |
| 601 | ur: url, | 601 | ur: url, |
| 602 | slideId: slides_._id, | 602 | slideId: slides_._id, |
| 603 | caseStudyId: slides_.caseStudyId, | 603 | caseStudyId: slides_.caseStudyId, |
| 604 | payload: { | 604 | payload: { |
| 605 | metaData: slides_.metaData, | 605 | metaData: slides_.metaData, |
| 606 | comments: slides_.comments, | 606 | comments: slides_.comments, |
| 607 | insight: slides_.insight ? slides_.insight : null, | 607 | insight: slides_.insight ? slides_.insight : null, |
| 608 | }, | 608 | }, |
| 609 | }; | 609 | }; |
| 610 | // slides_ | 610 | // slides_ |
| 611 | finalSlides.push(obj); | 611 | finalSlides.push(obj); |
| 612 | }); | 612 | }); |
| 613 | console.log("payload", payload); | 613 | console.log("payload", payload); |
| 614 | // add first slide at begining | 614 | // add first slide at begining |
| 615 | finalSlides.unshift({ | 615 | finalSlides.unshift({ |
| 616 | forward: true, | 616 | forward: true, |
| 617 | backward: false, | 617 | backward: false, |
| 618 | ur: "EpisodeIntro", | 618 | ur: "EpisodeIntro", |
| 619 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 619 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 620 | caseStudyId: payload._id, | 620 | caseStudyId: payload._id, |
| 621 | payload: { | 621 | payload: { |
| 622 | metaData: payload.intro, | 622 | metaData: payload.intro, |
| 623 | comments: [], | 623 | comments: [], |
| 624 | }, | 624 | }, |
| 625 | }); | 625 | }); |
| 626 | finalSlides.push({ | 626 | finalSlides.push({ |
| 627 | forward: true, | 627 | forward: true, |
| 628 | backward: false, | 628 | backward: false, |
| 629 | ur: "Outro", | 629 | ur: "Outro", |
| 630 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 630 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 631 | caseStudyId: payload._id, | 631 | caseStudyId: payload._id, |
| 632 | payload: { | 632 | payload: { |
| 633 | metaData: payload.outro, | 633 | metaData: payload.outro, |
| 634 | comments: [], | 634 | comments: [], |
| 635 | }, | 635 | }, |
| 636 | }); | 636 | }); |
| 637 | 637 | ||
| 638 | console.log(finalSlides); | 638 | console.log(finalSlides); |
| 639 | console.log("payload", payload); | 639 | console.log("payload", payload); |
| 640 | localStorage.setItem( | 640 | localStorage.setItem( |
| 641 | "spotlight_slide" + payload._id, | 641 | "spotlight_slide" + payload._id, |
| 642 | JSON.stringify(finalSlides) | 642 | JSON.stringify(finalSlides) |
| 643 | ); | 643 | ); |
| 644 | this.allSlide = finalSlides; | 644 | this.allSlide = finalSlides; |
| 645 | this.getCurrentSlideData(); | 645 | this.getCurrentSlideData(); |
| 646 | }, | 646 | }, |
| 647 | assignRoutes(tempId) { | 647 | assignRoutes(tempId) { |
| 648 | // /episode-intro | 648 | // /episode-intro |
| 649 | // /outro | 649 | // /outro |
| 650 | var routes = [ | 650 | var routes = [ |
| 651 | { | 651 | { |
| 652 | url: "AuthorIntro", | 652 | url: "AuthorIntro", |
| 653 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 653 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 654 | }, | 654 | }, |
| 655 | { | 655 | { |
| 656 | url: "NoScreenshotSingleAuthor", | 656 | url: "NoScreenshotSingleAuthor", |
| 657 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 657 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 658 | }, | 658 | }, |
| 659 | { | 659 | { |
| 660 | url: "SingleMobileScreenInsightTwo", | 660 | url: "SingleMobileScreenInsightTwo", |
| 661 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 661 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 662 | }, | 662 | }, |
| 663 | { | 663 | { |
| 664 | url: "TwoScreenWithoutInsight", | 664 | url: "TwoScreenWithoutInsight", |
| 665 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 665 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 666 | }, | 666 | }, |
| 667 | { | 667 | { |
| 668 | url: "noscreenshotSingleautho", | 668 | url: "noscreenshotSingleautho", |
| 669 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 669 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 670 | }, | 670 | }, |
| 671 | { | 671 | { |
| 672 | url: "SingleMobileScreenInsightOne", | 672 | url: "SingleMobileScreenInsightOne", |
| 673 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 673 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 674 | }, | 674 | }, |
| 675 | { | 675 | { |
| 676 | url: "TwoScreenWithInsight", | 676 | url: "TwoScreenWithInsight", |
| 677 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 677 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 678 | }, | 678 | }, |
| 679 | { | 679 | { |
| 680 | url: "AuthorReadingNow", | 680 | url: "AuthorReadingNow", |
| 681 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 681 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 682 | }, | 682 | }, |
| 683 | { | 683 | { |
| 684 | url: "AuthorReadingBreak", | 684 | url: "AuthorReadingBreak", |
| 685 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 685 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 686 | }, | 686 | }, |
| 687 | ]; | 687 | ]; |
| 688 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 688 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 689 | return routes[i].url; | 689 | return routes[i].url; |
| 690 | }, | 690 | }, |
| 691 | 691 | ||
| 692 | getCurrentSlideData() { | 692 | getCurrentSlideData() { |
| 693 | var i = this.allSlide.findIndex( | 693 | var i = this.allSlide.findIndex( |
| 694 | (slide_) => slide_.slideId == this.$route.params.slideId | 694 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 695 | ); | 695 | ); |
| 696 | this.currentSlideIndex = i; | 696 | this.currentSlideIndex = i; |
| 697 | this.currentSlideData = this.allSlide[i]; | 697 | this.currentSlideData = this.allSlide[i]; |
| 698 | console.log("currentSlideData", this.currentSlideData); | 698 | console.log("currentSlideData", this.currentSlideData); |
| 699 | }, | 699 | }, |
| 700 | goNext() { | 700 | goNext() { |
| 701 | this.currentSlideIndex++; | 701 | this.currentSlideIndex++; |
| 702 | this.$router.push({ | 702 | this.$router.push({ |
| 703 | name: this.allSlide[this.currentSlideIndex].ur, | 703 | name: this.allSlide[this.currentSlideIndex].ur, |
| 704 | params: { | 704 | params: { |
| 705 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 705 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 706 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 706 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 707 | }, | 707 | }, |
| 708 | }); | 708 | }); |
| 709 | }, | 709 | }, |
| 710 | goBack() { | 710 | goBack() { |
| 711 | this.currentSlideIndex--; | 711 | this.currentSlideIndex--; |
| 712 | this.$router.push({ | 712 | this.$router.push({ |
| 713 | name: this.allSlide[this.currentSlideIndex].ur, | 713 | name: this.allSlide[this.currentSlideIndex].ur, |
| 714 | params: { | 714 | params: { |
| 715 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 715 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 716 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 716 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 717 | }, | 717 | }, |
| 718 | }); | 718 | }); |
| 719 | }, | 719 | }, |
| 720 | createComment() { | 720 | createComment() { |
| 721 | console.log("===", this.comment); | 721 | console.log("===", this.comment); |
| 722 | if(!this.usertoken){ | ||
| 723 | this.goToLogin(); | ||
| 724 | } | ||
| 722 | var obj = { | 725 | var obj = { |
| 723 | caseStudyId: this.currentSlideData.caseStudyId, | 726 | caseStudyId: this.currentSlideData.caseStudyId, |
| 724 | slideId: this.currentSlideData.slideId, | 727 | slideId: this.currentSlideData.slideId, |
| 725 | comment: this.comment, | 728 | comment: this.comment, |
| 726 | }; | 729 | }; |
| 727 | axios | 730 | axios |
| 728 | .post("/bounceBoard/comment", obj, { | 731 | .post("/bounceBoard/comment", obj, { |
| 729 | headers: { | 732 | headers: { |
| 730 | Authorization: "Bearer " + this.usertoken, | 733 | Authorization: "Bearer " + this.usertoken, |
| 731 | }, | 734 | }, |
| 732 | }) | 735 | }) |
| 733 | .then((response) => { | 736 | .then((response) => { |
| 734 | this.comment = null; | 737 | this.comment = null; |
| 735 | this.getComment(); | 738 | this.getComment(); |
| 736 | console.log(response); | 739 | console.log(response); |
| 737 | }) | 740 | }) |
| 738 | .catch((error) => { | 741 | .catch((error) => { |
| 739 | if (error.response) { | 742 | if (error.response) { |
| 740 | this.$toaster.error(error.response.data.message); | 743 | this.$toaster.error(error.response.data.message); |
| 741 | } | 744 | } |
| 742 | }); | 745 | }); |
| 743 | }, | 746 | }, |
| 744 | 747 | ||
| 745 | createChildComment(cmnt) { | 748 | createChildComment(cmnt) { |
| 746 | console.log(cmnt, "===", this.comment); | 749 | if(!this.usertoken){ |
| 750 | this.goToLogin(); | ||
| 751 | } console.log(cmnt, "===", this.comment); | ||
| 747 | var obj = { | 752 | var obj = { |
| 748 | caseStudyId: this.currentSlideData.caseStudyId, | 753 | caseStudyId: this.currentSlideData.caseStudyId, |
| 749 | slideId: this.currentSlideData.slideId, | 754 | slideId: this.currentSlideData.slideId, |
| 750 | comment: this.comment, | 755 | comment: this.comment, |
| 751 | parentId: cmnt._id, | 756 | parentId: cmnt._id, |
| 752 | }; | 757 | }; |
| 753 | axios | 758 | axios |
| 754 | .post("/bounceBoard/comment", obj, { | 759 | .post("/bounceBoard/comment", obj, { |
| 755 | headers: { | 760 | headers: { |
| 756 | Authorization: "Bearer " + this.usertoken, | 761 | Authorization: "Bearer " + this.usertoken, |
| 757 | }, | 762 | }, |
| 758 | }) | 763 | }) |
| 759 | .then((response) => { | 764 | .then((response) => { |
| 760 | this.comment = null; | 765 | this.comment = null; |
| 761 | this.discardRply(cmnt); | 766 | this.discardRply(cmnt); |
| 762 | this.getComment(); | 767 | this.getComment(); |
| 763 | console.log(response); | 768 | console.log(response); |
| 764 | }) | 769 | }) |
| 765 | .catch((error) => { | 770 | .catch((error) => { |
| 766 | if (error.response) { | 771 | if (error.response) { |
| 767 | this.$toaster.error(error.response.data.message); | 772 | this.$toaster.error(error.response.data.message); |
| 768 | } | 773 | } |
| 769 | }); | 774 | }); |
| 770 | }, | 775 | }, |
| 771 | getComment() { | 776 | getComment() { |
| 772 | axios | 777 | axios |
| 773 | .get( | 778 | .get( |
| 774 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 779 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 775 | { | 780 | { |
| 776 | headers: { | 781 | headers: { |
| 777 | Authorization: "Bearer " + this.usertoken, | 782 | Authorization: "Bearer " + this.usertoken, |
| 778 | }, | 783 | }, |
| 779 | } | 784 | } |
| 780 | ) | 785 | ) |
| 781 | .then((response) => { | 786 | .then((response) => { |
| 782 | console.log(response.data); | 787 | console.log(response.data); |
| 783 | var comments = []; | 788 | var comments = []; |
| 784 | var keys = Object.keys(response.data.data); | 789 | var keys = Object.keys(response.data.data); |
| 785 | response.data.data; | 790 | response.data.data; |
| 786 | keys.forEach((key_) => { | 791 | keys.forEach((key_) => { |
| 787 | comments.push(response.data.data[key_]); | 792 | comments.push(response.data.data[key_]); |
| 788 | }); | 793 | }); |
| 789 | comments.forEach((coment_) => { | 794 | comments.forEach((coment_) => { |
| 790 | coment_.childInput = false; | 795 | coment_.childInput = false; |
| 791 | }); | 796 | }); |
| 792 | console.log("comments", comments); | 797 | console.log("comments", comments); |
| 793 | this.commentList = comments; | 798 | this.commentList = comments; |
| 794 | }) | 799 | }) |
| 795 | .catch((error) => console.log(error)); | 800 | .catch((error) => console.log(error)); |
| 796 | }, | 801 | }, |
| 797 | dateGenerator(curreDate) { | 802 | dateGenerator(curreDate) { |
| 798 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 803 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 799 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 804 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 800 | var result = todayDate.diff(endDate, "days"); | 805 | var result = todayDate.diff(endDate, "days"); |
| 801 | var date = null; | 806 | var date = null; |
| 802 | if (result == 0) { | 807 | if (result == 0) { |
| 803 | date = "Today"; | 808 | date = "Today"; |
| 804 | } else { | 809 | } else { |
| 805 | date = result + " days ago"; | 810 | date = result + " days ago"; |
| 806 | } | 811 | } |
| 807 | return date; | 812 | return date; |
| 808 | }, | 813 | }, |
| 809 | goToLogin() { | 814 | goToLogin() { |
| 810 | this.$router.push("/login"); | 815 | this.$router.push("/login"); |
| 811 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); | 816 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); |
| 812 | 817 | ||
| 813 | }, | 818 | }, |
| 814 | goToSignUp() { | 819 | goToSignUp() { |
| 815 | this.$router.push("/"); | 820 | this.$router.push("/"); |
| 816 | }, | 821 | }, |
| 817 | chtbox_close() { | 822 | chtbox_close() { |
| 818 | $("#cht_box_close").removeClass("cht_close"); | 823 | $("#cht_box_close").removeClass("cht_close"); |
| 819 | $("#open_ct_box, .c_hide").show(); | 824 | $("#open_ct_box, .c_hide").show(); |
| 820 | $(".footer-top").addClass("white-bg"); | 825 | $(".footer-top").addClass("white-bg"); |
| 821 | }, | 826 | }, |
| 822 | open_ct_box() { | 827 | open_ct_box() { |
| 823 | if(!this.usertoken){ | 828 | |
| 824 | this.goToLogin(); | ||
| 825 | } | ||
| 826 | $("#cht_box_close").addClass("cht_close"); | 829 | $("#cht_box_close").addClass("cht_close"); |
| 827 | $("#open_ct_box, .c_hide").hide(); | 830 | $("#open_ct_box, .c_hide").hide(); |
| 828 | $(".footer-top").removeClass("white-bg"); | 831 | $(".footer-top").removeClass("white-bg"); |
| 829 | }, | 832 | }, |
| 830 | eachRply(cmnt) { | 833 | eachRply(cmnt) { |
| 831 | cmnt.childInput = true; | 834 | cmnt.childInput = true; |
| 832 | this.parentInput = false; | 835 | this.parentInput = false; |
| 833 | this.comment = null; | 836 | this.comment = null; |
| 834 | setTimeout(() => { | 837 | setTimeout(() => { |
| 835 | document.getElementById("childInput").focus(); | 838 | document.getElementById("childInput").focus(); |
| 836 | }, 100); | 839 | }, 100); |
| 837 | }, | 840 | }, |
| 838 | discardRply(cmnt) { | 841 | discardRply(cmnt) { |
| 839 | cmnt.childInput = false; | 842 | cmnt.childInput = false; |
| 840 | this.parentInput = true; | 843 | this.parentInput = true; |
| 841 | this.comment = null; | 844 | this.comment = null; |
| 842 | }, | 845 | }, |
| 843 | reply_cht_box(i) { | 846 | reply_cht_box(i) { |
| 844 | if(!this.usertoken){ | 847 | if(!this.usertoken){ |
| 845 | this.goToLogin(); | 848 | this.goToLogin(); |
| 846 | } | 849 | } |
| 847 | if(!this.usertoken){ | 850 | if(!this.usertoken){ |
| 848 | this.goToLogin(); | 851 | this.goToLogin(); |
| 849 | } | 852 | } |
| 850 | console.log(this.commentList, "cmnt"); | 853 | console.log(this.commentList, "cmnt"); |
| 851 | $("#cht_box_close").addClass("cht_close"); | 854 | $("#cht_box_close").addClass("cht_close"); |
| 852 | $("#open_ct_box, .c_hide").hide(); | 855 | $("#open_ct_box, .c_hide").hide(); |
| 853 | $(".footer-top").removeClass("white-bg"); | 856 | $(".footer-top").removeClass("white-bg"); |
| 854 | this.commentList[i].childInput = true; | 857 | this.commentList[i].childInput = true; |
| 855 | this.parentInput = false; | 858 | this.parentInput = false; |
| 856 | this.comment = null; | 859 | this.comment = null; |
| 857 | setTimeout(() => { | 860 | setTimeout(() => { |
| 858 | document.getElementById("childInput").focus(); | 861 | document.getElementById("childInput").focus(); |
| 859 | }, 100); | 862 | }, 100); |
| 860 | }, | 863 | }, |
| 861 | likeComment(status, id) { | 864 | likeComment(status, id) { |
| 862 | if(!this.usertoken){ | 865 | if(!this.usertoken){ |
| 863 | this.goToLogin(); | 866 | this.goToLogin(); |
| 864 | } | 867 | } |
| 865 | console.log("===", this.comment); | 868 | console.log("===", this.comment); |
| 866 | var obj = { | 869 | var obj = { |
| 867 | commentId: id, | 870 | commentId: id, |
| 868 | like: status, | 871 | like: status, |
| 869 | }; | 872 | }; |
| 870 | axios | 873 | axios |
| 871 | .post("/bounceBoard/like", obj, { | 874 | .post("/bounceBoard/like", obj, { |
| 872 | headers: { | 875 | headers: { |
| 873 | Authorization: "Bearer " + this.usertoken, | 876 | Authorization: "Bearer " + this.usertoken, |
| 874 | }, | 877 | }, |
| 875 | }) | 878 | }) |
| 876 | .then((response) => { | 879 | .then((response) => { |
| 877 | this.getComment(); | 880 | this.getComment(); |
| 878 | console.log(response); | 881 | console.log(response); |
| 879 | }) | 882 | }) |
| 880 | .catch((error) => { | 883 | .catch((error) => { |
| 881 | if (error.response) { | 884 | if (error.response) { |
| 882 | this.$toaster.error(error.response.data.message); | 885 | this.$toaster.error(error.response.data.message); |
| 883 | } | 886 | } |
| 884 | }); | 887 | }); |
| 885 | }, | 888 | }, |
| 886 | getLastcomment(flag, commentArray) { | 889 | getLastcomment(flag, commentArray) { |
| 887 | var finalComment = null; | 890 | var finalComment = null; |
| 888 | var totalMessage = 0; | 891 | var totalMessage = 0; |
| 889 | var name = null; | 892 | var name = null; |
| 890 | commentArray.forEach((comment_) => { | 893 | commentArray.forEach((comment_) => { |
| 891 | if (comment_.comment != null) { | 894 | if (comment_.comment != null) { |
| 892 | name = comment_.user.name; | 895 | name = comment_.user.name; |
| 893 | finalComment = comment_.comment; | 896 | finalComment = comment_.comment; |
| 894 | totalMessage++; | 897 | totalMessage++; |
| 895 | } | 898 | } |
| 896 | }); | 899 | }); |
| 897 | if (flag == "count") { | 900 | if (flag == "count") { |
| 898 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 901 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 899 | } else if (flag == "name") { | 902 | } else if (flag == "name") { |
| 900 | return (name = name); | 903 | return (name = name); |
| 901 | } else { | 904 | } else { |
| 902 | return finalComment; | 905 | return finalComment; |
| 903 | } | 906 | } |
| 904 | }, | 907 | }, |
| 905 | commentExistCheck(i) { | 908 | commentExistCheck(i) { |
| 906 | console.log(this.commentList[i].comment); | 909 | console.log(this.commentList[i].comment); |
| 907 | var returnValue = false; | 910 | var returnValue = false; |
| 908 | if (this.commentList[i].comment) { | 911 | if (this.commentList[i].comment) { |
| 909 | returnValue = true; | 912 | returnValue = true; |
| 910 | } | 913 | } |
| 911 | return returnValue; | 914 | return returnValue; |
| 912 | }, | 915 | }, |
| 913 | }, | 916 | }, |
| 914 | }; | 917 | }; |
| 915 | // | 918 | // |
src/components/TwoScreenWithInsight.vue
| 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 | 216 | ||
| 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 | <div class="m-screen-hidden"> | 292 | <div class="m-screen-hidden"> |
| 293 | <div class="top-area-blank"></div> | 293 | <div class="top-area-blank"></div> |
| 294 | <img | 294 | <img |
| 295 | :src="currentSlideData.payload.metaData.mobileImage1" | 295 | :src="currentSlideData.payload.metaData.mobileImage1" |
| 296 | class="m-screen insight-two-img" | 296 | class="m-screen insight-two-img" |
| 297 | /> | 297 | /> |
| 298 | </div> | 298 | </div> |
| 299 | <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> --> | 299 | <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> --> |
| 300 | <img | 300 | <img |
| 301 | :src="currentSlideData.payload.metaData.authorImage" | 301 | :src="currentSlideData.payload.metaData.authorImage" |
| 302 | class="user-photo-bottom" | 302 | class="user-photo-bottom" |
| 303 | /> | 303 | /> |
| 304 | </div> | 304 | </div> |
| 305 | <!-- mobile screen one --> | 305 | <!-- mobile screen one --> |
| 306 | <div class="mobile-screen-one p-right"> | 306 | <div class="mobile-screen-one p-right"> |
| 307 | <div class="view-ticket-wrp-ps"> | 307 | <div class="view-ticket-wrp-ps"> |
| 308 | <div class="single-author-li-comments"> | 308 | <div class="single-author-li-comments"> |
| 309 | <div class="a-intro-comments custom-selected-style"> | 309 | <div class="a-intro-comments custom-selected-style"> |
| 310 | <img src="../assets/images/rect.svg" class="rect" /> | 310 | <img src="../assets/images/rect.svg" class="rect" /> |
| 311 | 311 | ||
| 312 | <div class="top-wrp"> | 312 | <div class="top-wrp"> |
| 313 | {{ currentSlideData.payload.insight.tag }} Insight | 313 | {{ currentSlideData.payload.insight.tag }} Insight |
| 314 | <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | 314 | <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> |
| 315 | </div> | 315 | </div> |
| 316 | <div class="top-head"> | 316 | <div class="top-head"> |
| 317 | {{ currentSlideData.payload.insight.title }} | 317 | {{ currentSlideData.payload.insight.title }} |
| 318 | </div> | 318 | </div> |
| 319 | <p>{{ currentSlideData.payload.insight.description }}</p> | 319 | <p>{{ currentSlideData.payload.insight.description }}</p> |
| 320 | <div class="footer"> | 320 | <div class="footer"> |
| 321 | <a href="javascript:void(0);" class="cit-16" | 321 | <a href="javascript:void(0);" class="cit-16" |
| 322 | >{{ | 322 | >{{ |
| 323 | currentSlideData.payload.insight.citations.length | 323 | currentSlideData.payload.insight.citations.length |
| 324 | }} | 324 | }} |
| 325 | Citations</a | 325 | Citations</a |
| 326 | > | 326 | > |
| 327 | <!-- <a href="javascript:void(0);" class="ft-share" | 327 | <!-- <a href="javascript:void(0);" class="ft-share" |
| 328 | ><img src="../assets/images/reply-red.svg" /> Share from | 328 | ><img src="../assets/images/reply-red.svg" /> Share from |
| 329 | library</a | 329 | library</a |
| 330 | > --> | 330 | > --> |
| 331 | </div> | 331 | </div> |
| 332 | <!-- footer --> | 332 | <!-- footer --> |
| 333 | </div> | 333 | </div> |
| 334 | <!-- comments box --> | 334 | <!-- comments box --> |
| 335 | </div> | 335 | </div> |
| 336 | <!-- single author comments --> | 336 | <!-- single author comments --> |
| 337 | </div> | 337 | </div> |
| 338 | <!-- comments --> | 338 | <!-- comments --> |
| 339 | <!-- <img src="../assets/images/slide2.png" class="m-screen" /> --> | 339 | <!-- <img src="../assets/images/slide2.png" class="m-screen" /> --> |
| 340 | <div class="m-screen-hidden"> | 340 | <div class="m-screen-hidden"> |
| 341 | <div class="top-area-blank"></div> | 341 | <div class="top-area-blank"></div> |
| 342 | <img | 342 | <img |
| 343 | :src="currentSlideData.payload.metaData.mobileImage2" | 343 | :src="currentSlideData.payload.metaData.mobileImage2" |
| 344 | class="m-screen insight-two-img" | 344 | class="m-screen insight-two-img" |
| 345 | /> | 345 | /> |
| 346 | </div> | 346 | </div> |
| 347 | </div> | 347 | </div> |
| 348 | <!-- mobile screen Two --> | 348 | <!-- mobile screen Two --> |
| 349 | </div> | 349 | </div> |
| 350 | <div class="footer-nav"> | 350 | <div class="footer-nav"> |
| 351 | <div class="footer-top white-bg"> | 351 | <div class="footer-top white-bg"> |
| 352 | <div class="row"> | 352 | <div class="row"> |
| 353 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> | 353 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| 354 | <div class="row h-100p"> | 354 | <div class="row h-100p"> |
| 355 | <div | 355 | <div |
| 356 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" | 356 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" |
| 357 | > | 357 | > |
| 358 | <div class="ft-comments-group testi-photos-ct"> | 358 | <div class="ft-comments-group testi-photos-ct"> |
| 359 | <div class="c-with-photos"> | 359 | <div class="c-with-photos"> |
| 360 | <span class="count-comments" | 360 | <span class="count-comments" |
| 361 | >{{ getLastcomment("count", commentList) }}+ | 361 | >{{ getLastcomment("count", commentList) }}+ |
| 362 | Comments</span | 362 | Comments</span |
| 363 | ><!-- count commets --> | 363 | ><!-- count commets --> |
| 364 | <ul class="comments-photos"> | 364 | <ul class="comments-photos"> |
| 365 | <li><img src="../assets/images/c-photo-1.png" /></li> | 365 | <li><img src="../assets/images/c-photo-1.png" /></li> |
| 366 | <li><img src="../assets/images/c-photo-2.png" /></li> | 366 | <li><img src="../assets/images/c-photo-2.png" /></li> |
| 367 | <li><img src="../assets/images/c-photo-3.png" /></li> | 367 | <li><img src="../assets/images/c-photo-3.png" /></li> |
| 368 | </ul> | 368 | </ul> |
| 369 | <!-- comment photos --> | 369 | <!-- comment photos --> |
| 370 | </div> | 370 | </div> |
| 371 | <div class="comments-detail all-c-space"> | 371 | <div class="comments-detail all-c-space"> |
| 372 | <span | 372 | <span |
| 373 | >{{ getLastcomment("name", commentList) }} | 373 | >{{ getLastcomment("name", commentList) }} |
| 374 | <a href="javascript:void(0);" @click="open_ct_box" | 374 | <a href="javascript:void(0);" @click="open_ct_box" |
| 375 | >View All</a | 375 | >View All</a |
| 376 | ></span | 376 | ></span |
| 377 | > | 377 | > |
| 378 | <p> | 378 | <p> |
| 379 | <!-- I wonder what the difference between “Dunzo Assistant” | 379 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 380 | and “Pickup and Drop... --> | 380 | and “Pickup and Drop... --> |
| 381 | {{ getLastcomment("msg", commentList) }} | 381 | {{ getLastcomment("msg", commentList) }} |
| 382 | </p> | 382 | </p> |
| 383 | </div> | 383 | </div> |
| 384 | <!-- comments detail --> | 384 | <!-- comments detail --> |
| 385 | </div> | 385 | </div> |
| 386 | <!-- comments Group --> | 386 | <!-- comments Group --> |
| 387 | </div> | 387 | </div> |
| 388 | </div> | 388 | </div> |
| 389 | </div> | 389 | </div> |
| 390 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> | 390 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> |
| 391 | <div class="comment-frm no-c-frm"> | 391 | <div class="comment-frm no-c-frm"> |
| 392 | <div class="row"> | 392 | <div class="row"> |
| 393 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 393 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 394 | <div class="form-group frm-wdth addfrm-spc"> | 394 | <div class="form-group frm-wdth addfrm-spc"> |
| 395 | <input | 395 | <input |
| 396 | type="text" | 396 | type="text" |
| 397 | class="form-control" | 397 | class="form-control" |
| 398 | placeholder="Something on your mind?" | 398 | placeholder="Something on your mind?" |
| 399 | id="open_ct_box" | 399 | id="open_ct_box" |
| 400 | v-model="comment" | 400 | v-model="comment" |
| 401 | /> | 401 | /> |
| 402 | </div> | 402 | </div> |
| 403 | </div> | 403 | </div> |
| 404 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 404 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 405 | <a | 405 | <a |
| 406 | href="javascript:void(0);" | 406 | href="javascript:void(0);" |
| 407 | @click="createComment" | 407 | @click="createComment" |
| 408 | class="add-comment" | 408 | class="add-comment" |
| 409 | ><img src="../assets/images/add-comment.svg" /> | 409 | ><img src="../assets/images/add-comment.svg" /> |
| 410 | Comment</a | 410 | Comment</a |
| 411 | > | 411 | > |
| 412 | </div> | 412 | </div> |
| 413 | </div> | 413 | </div> |
| 414 | <!-- comment from --> | 414 | <!-- comment from --> |
| 415 | </div> | 415 | </div> |
| 416 | </div> | 416 | </div> |
| 417 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> | 417 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> |
| 418 | <ul class="top-intro-bt"> | 418 | <ul class="top-intro-bt"> |
| 419 | <li> | 419 | <li> |
| 420 | <a href="javascript:void(0);" @click="goBack" | 420 | <a href="javascript:void(0);" @click="goBack" |
| 421 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 421 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 422 | > | 422 | > |
| 423 | </li> | 423 | </li> |
| 424 | <li> | 424 | <li> |
| 425 | <a href="javascript:void(0);" @click="goNext" | 425 | <a href="javascript:void(0);" @click="goNext" |
| 426 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 426 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 427 | slide</a | 427 | slide</a |
| 428 | > | 428 | > |
| 429 | </li> | 429 | </li> |
| 430 | </ul> | 430 | </ul> |
| 431 | </div> | 431 | </div> |
| 432 | <!-- buttons list --> | 432 | <!-- buttons list --> |
| 433 | </div> | 433 | </div> |
| 434 | </div> | 434 | </div> |
| 435 | <!-- footer top --> | 435 | <!-- footer top --> |
| 436 | <div class="footer-bottom"> | 436 | <div class="footer-bottom"> |
| 437 | <ul> | 437 | <ul> |
| 438 | <li class="active"></li> | 438 | <li class="active"></li> |
| 439 | <li></li> | 439 | <li></li> |
| 440 | </ul> | 440 | </ul> |
| 441 | </div> | 441 | </div> |
| 442 | <!-- footer top --> | 442 | <!-- footer top --> |
| 443 | </div> | 443 | </div> |
| 444 | <!-- footer --> | 444 | <!-- footer --> |
| 445 | </div> | 445 | </div> |
| 446 | <!-- body wrapper --> | 446 | <!-- body wrapper --> |
| 447 | </div> | 447 | </div> |
| 448 | <!-- main wrapper --> | 448 | <!-- main wrapper --> |
| 449 | </main> | 449 | </main> |
| 450 | </template> | 450 | </template> |
| 451 | 451 | ||
| 452 | <script> | 452 | <script> |
| 453 | import Vue from "vue"; | 453 | import Vue from "vue"; |
| 454 | import router from "../router"; | 454 | import router from "../router"; |
| 455 | import axios from "axios"; | 455 | import axios from "axios"; |
| 456 | import moment from "moment"; | 456 | import moment from "moment"; |
| 457 | import Header from "./Header"; | 457 | import Header from "./Header"; |
| 458 | 458 | ||
| 459 | export default { | 459 | export default { |
| 460 | components: { | 460 | components: { |
| 461 | Header: Header, | 461 | Header: Header, |
| 462 | }, | 462 | }, |
| 463 | name: "TwoScreenWithInsight", | 463 | name: "TwoScreenWithInsight", |
| 464 | data() { | 464 | data() { |
| 465 | return { | 465 | return { |
| 466 | allSlide: [], | 466 | allSlide: [], |
| 467 | currentSlideIndex: null, | 467 | currentSlideIndex: null, |
| 468 | currentSlideData: null, | 468 | currentSlideData: null, |
| 469 | // | 469 | // |
| 470 | usertoken: null, | 470 | usertoken: null, |
| 471 | commentList: [], | 471 | commentList: [], |
| 472 | comment: null, | 472 | comment: null, |
| 473 | parentInput: true, | 473 | parentInput: true, |
| 474 | }; | 474 | }; |
| 475 | }, | 475 | }, |
| 476 | mounted() { | 476 | mounted() { |
| 477 | var allSlideData = localStorage.getItem( | 477 | var allSlideData = localStorage.getItem( |
| 478 | "spotlight_slide" + this.$route.params.caseStudyId | 478 | "spotlight_slide" + this.$route.params.caseStudyId |
| 479 | ); | 479 | ); |
| 480 | if (allSlideData) { | 480 | if (allSlideData) { |
| 481 | this.allSlide = JSON.parse(allSlideData); | 481 | this.allSlide = JSON.parse(allSlideData); |
| 482 | this.getCurrentSlideData(); | 482 | this.getCurrentSlideData(); |
| 483 | }else{ | 483 | }else{ |
| 484 | this.getCurrentSlideData(); | 484 | this.getCurrentSlideData(); |
| 485 | 485 | ||
| 486 | } | 486 | } |
| 487 | var userdata = localStorage.getItem("spotlight_usertoken"); | 487 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 488 | if (userdata) { | 488 | if (userdata) { |
| 489 | userdata = JSON.parse(userdata); | 489 | userdata = JSON.parse(userdata); |
| 490 | this.usertoken = userdata.token; | 490 | this.usertoken = userdata.token; |
| 491 | this.getComment(); | 491 | this.getComment(); |
| 492 | }else{ | 492 | }else{ |
| 493 | this.getComment(); | 493 | this.getComment(); |
| 494 | } | 494 | } |
| 495 | }, | 495 | }, |
| 496 | methods: { | 496 | methods: { |
| 497 | 497 | ||
| 498 | generatecaseStudies(){ | 498 | generatecaseStudies(){ |
| 499 | axios | 499 | axios |
| 500 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 500 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 501 | headers: { | 501 | headers: { |
| 502 | Authorization: "Bearer " + this.usertoken, | 502 | Authorization: "Bearer " + this.usertoken, |
| 503 | }, | 503 | }, |
| 504 | }) | 504 | }) |
| 505 | .then((response) => { | 505 | .then((response) => { |
| 506 | 506 | ||
| 507 | console.log('response',response.data.data); | 507 | console.log('response',response.data.data); |
| 508 | this.openStudy(response.data.data); | 508 | this.openStudy(response.data.data); |
| 509 | }) | 509 | }) |
| 510 | .catch((error) => console.log(error)); | 510 | .catch((error) => console.log(error)); |
| 511 | }, | 511 | }, |
| 512 | 512 | ||
| 513 | 513 | ||
| 514 | 514 | ||
| 515 | openStudy(payload) { | 515 | openStudy(payload) { |
| 516 | console.log("payload-", payload); | 516 | console.log("payload-", payload); |
| 517 | payload.intro.date = payload.createdAt; | 517 | payload.intro.date = payload.createdAt; |
| 518 | payload.intro.focusPoint = payload.focusAreas; | 518 | payload.intro.focusPoint = payload.focusAreas; |
| 519 | axios | 519 | axios |
| 520 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 520 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 521 | headers: { | 521 | headers: { |
| 522 | Authorization: "Bearer " + this.usertoken, | 522 | Authorization: "Bearer " + this.usertoken, |
| 523 | }, | 523 | }, |
| 524 | }) | 524 | }) |
| 525 | .then((response) => { | 525 | .then((response) => { |
| 526 | this.createSlide(payload, response.data.data); | 526 | this.createSlide(payload, response.data.data); |
| 527 | }) | 527 | }) |
| 528 | .catch((error) => console.log(error)); | 528 | .catch((error) => console.log(error)); |
| 529 | }, | 529 | }, |
| 530 | 530 | ||
| 531 | createSlide(payload, slides) { | 531 | createSlide(payload, slides) { |
| 532 | var finalSlides = []; | 532 | var finalSlides = []; |
| 533 | slides.forEach((slides_) => { | 533 | slides.forEach((slides_) => { |
| 534 | var url = this.assignRoutes(slides_.templateId); | 534 | var url = this.assignRoutes(slides_.templateId); |
| 535 | var obj = { | 535 | var obj = { |
| 536 | forward: true, | 536 | forward: true, |
| 537 | backward: true, | 537 | backward: true, |
| 538 | ur: url, | 538 | ur: url, |
| 539 | slideId: slides_._id, | 539 | slideId: slides_._id, |
| 540 | caseStudyId: slides_.caseStudyId, | 540 | caseStudyId: slides_.caseStudyId, |
| 541 | payload: { | 541 | payload: { |
| 542 | metaData: slides_.metaData, | 542 | metaData: slides_.metaData, |
| 543 | comments: slides_.comments, | 543 | comments: slides_.comments, |
| 544 | insight: slides_.insight ? slides_.insight : null, | 544 | insight: slides_.insight ? slides_.insight : null, |
| 545 | }, | 545 | }, |
| 546 | }; | 546 | }; |
| 547 | // slides_ | 547 | // slides_ |
| 548 | finalSlides.push(obj); | 548 | finalSlides.push(obj); |
| 549 | }); | 549 | }); |
| 550 | console.log("payload", payload); | 550 | console.log("payload", payload); |
| 551 | // add first slide at begining | 551 | // add first slide at begining |
| 552 | finalSlides.unshift({ | 552 | finalSlides.unshift({ |
| 553 | forward: true, | 553 | forward: true, |
| 554 | backward: false, | 554 | backward: false, |
| 555 | ur: "EpisodeIntro", | 555 | ur: "EpisodeIntro", |
| 556 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 556 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 557 | caseStudyId: payload._id, | 557 | caseStudyId: payload._id, |
| 558 | payload: { | 558 | payload: { |
| 559 | metaData: payload.intro, | 559 | metaData: payload.intro, |
| 560 | comments: [], | 560 | comments: [], |
| 561 | }, | 561 | }, |
| 562 | }); | 562 | }); |
| 563 | finalSlides.push({ | 563 | finalSlides.push({ |
| 564 | forward: true, | 564 | forward: true, |
| 565 | backward: false, | 565 | backward: false, |
| 566 | ur: "Outro", | 566 | ur: "Outro", |
| 567 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 567 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 568 | caseStudyId: payload._id, | 568 | caseStudyId: payload._id, |
| 569 | payload: { | 569 | payload: { |
| 570 | metaData: payload.outro, | 570 | metaData: payload.outro, |
| 571 | comments: [], | 571 | comments: [], |
| 572 | }, | 572 | }, |
| 573 | }); | 573 | }); |
| 574 | 574 | ||
| 575 | console.log(finalSlides); | 575 | console.log(finalSlides); |
| 576 | console.log("payload", payload); | 576 | console.log("payload", payload); |
| 577 | localStorage.setItem( | 577 | localStorage.setItem( |
| 578 | "spotlight_slide" + payload._id, | 578 | "spotlight_slide" + payload._id, |
| 579 | JSON.stringify(finalSlides) | 579 | JSON.stringify(finalSlides) |
| 580 | ); | 580 | ); |
| 581 | this.allSlide = finalSlides; | 581 | this.allSlide = finalSlides; |
| 582 | this.getCurrentSlideData(); | 582 | this.getCurrentSlideData(); |
| 583 | }, | 583 | }, |
| 584 | assignRoutes(tempId) { | 584 | assignRoutes(tempId) { |
| 585 | // /episode-intro | 585 | // /episode-intro |
| 586 | // /outro | 586 | // /outro |
| 587 | var routes = [ | 587 | var routes = [ |
| 588 | { | 588 | { |
| 589 | url: "AuthorIntro", | 589 | url: "AuthorIntro", |
| 590 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 590 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 591 | }, | 591 | }, |
| 592 | { | 592 | { |
| 593 | url: "NoScreenshotSingleAuthor", | 593 | url: "NoScreenshotSingleAuthor", |
| 594 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 594 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 595 | }, | 595 | }, |
| 596 | { | 596 | { |
| 597 | url: "SingleMobileScreenInsightTwo", | 597 | url: "SingleMobileScreenInsightTwo", |
| 598 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 598 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 599 | }, | 599 | }, |
| 600 | { | 600 | { |
| 601 | url: "TwoScreenWithoutInsight", | 601 | url: "TwoScreenWithoutInsight", |
| 602 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 602 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 603 | }, | 603 | }, |
| 604 | { | 604 | { |
| 605 | url: "noscreenshotSingleautho", | 605 | url: "noscreenshotSingleautho", |
| 606 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 606 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 607 | }, | 607 | }, |
| 608 | { | 608 | { |
| 609 | url: "SingleMobileScreenInsightOne", | 609 | url: "SingleMobileScreenInsightOne", |
| 610 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 610 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 611 | }, | 611 | }, |
| 612 | { | 612 | { |
| 613 | url: "TwoScreenWithInsight", | 613 | url: "TwoScreenWithInsight", |
| 614 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 614 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 615 | }, | 615 | }, |
| 616 | { | 616 | { |
| 617 | url: "AuthorReadingNow", | 617 | url: "AuthorReadingNow", |
| 618 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 618 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 619 | }, | 619 | }, |
| 620 | { | 620 | { |
| 621 | url: "AuthorReadingBreak", | 621 | url: "AuthorReadingBreak", |
| 622 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 622 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 623 | }, | 623 | }, |
| 624 | ]; | 624 | ]; |
| 625 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 625 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 626 | return routes[i].url; | 626 | return routes[i].url; |
| 627 | }, | 627 | }, |
| 628 | 628 | ||
| 629 | getCurrentSlideData() { | 629 | getCurrentSlideData() { |
| 630 | var i = this.allSlide.findIndex( | 630 | var i = this.allSlide.findIndex( |
| 631 | (slide_) => slide_.slideId == this.$route.params.slideId | 631 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 632 | ); | 632 | ); |
| 633 | this.currentSlideIndex = i; | 633 | this.currentSlideIndex = i; |
| 634 | this.currentSlideData = this.allSlide[i]; | 634 | this.currentSlideData = this.allSlide[i]; |
| 635 | console.log("currentSlideData", this.currentSlideData); | 635 | console.log("currentSlideData", this.currentSlideData); |
| 636 | }, | 636 | }, |
| 637 | goNext() { | 637 | goNext() { |
| 638 | this.currentSlideIndex++; | 638 | this.currentSlideIndex++; |
| 639 | this.$router.push({ | 639 | this.$router.push({ |
| 640 | name: this.allSlide[this.currentSlideIndex].ur, | 640 | name: this.allSlide[this.currentSlideIndex].ur, |
| 641 | params: { | 641 | params: { |
| 642 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 642 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 643 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 643 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 644 | }, | 644 | }, |
| 645 | }); | 645 | }); |
| 646 | }, | 646 | }, |
| 647 | goBack() { | 647 | goBack() { |
| 648 | this.currentSlideIndex--; | 648 | this.currentSlideIndex--; |
| 649 | this.$router.push({ | 649 | this.$router.push({ |
| 650 | name: this.allSlide[this.currentSlideIndex].ur, | 650 | name: this.allSlide[this.currentSlideIndex].ur, |
| 651 | params: { | 651 | params: { |
| 652 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 652 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 653 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 653 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 654 | }, | 654 | }, |
| 655 | }); | 655 | }); |
| 656 | }, | 656 | }, |
| 657 | createComment() { | 657 | createComment() { |
| 658 | console.log("===", this.comment); | 658 | console.log("===", this.comment); |
| 659 | if(!this.usertoken){ | ||
| 660 | this.goToLogin(); | ||
| 661 | } | ||
| 659 | var obj = { | 662 | var obj = { |
| 660 | caseStudyId: this.currentSlideData.caseStudyId, | 663 | caseStudyId: this.currentSlideData.caseStudyId, |
| 661 | slideId: this.currentSlideData.slideId, | 664 | slideId: this.currentSlideData.slideId, |
| 662 | comment: this.comment, | 665 | comment: this.comment, |
| 663 | }; | 666 | }; |
| 664 | axios | 667 | axios |
| 665 | .post("/bounceBoard/comment", obj, { | 668 | .post("/bounceBoard/comment", obj, { |
| 666 | headers: { | 669 | headers: { |
| 667 | Authorization: "Bearer " + this.usertoken, | 670 | Authorization: "Bearer " + this.usertoken, |
| 668 | }, | 671 | }, |
| 669 | }) | 672 | }) |
| 670 | .then((response) => { | 673 | .then((response) => { |
| 671 | this.comment = null; | 674 | this.comment = null; |
| 672 | this.getComment(); | 675 | this.getComment(); |
| 673 | console.log(response); | 676 | console.log(response); |
| 674 | }) | 677 | }) |
| 675 | .catch((error) => { | 678 | .catch((error) => { |
| 676 | if (error.response) { | 679 | if (error.response) { |
| 677 | this.$toaster.error(error.response.data.message); | 680 | this.$toaster.error(error.response.data.message); |
| 678 | } | 681 | } |
| 679 | }); | 682 | }); |
| 680 | }, | 683 | }, |
| 681 | createChildComment(cmnt) { | 684 | createChildComment(cmnt) { |
| 682 | console.log(cmnt, "===", this.comment); | 685 | if(!this.usertoken){ |
| 686 | this.goToLogin(); | ||
| 687 | } console.log(cmnt, "===", this.comment); | ||
| 683 | var obj = { | 688 | var obj = { |
| 684 | caseStudyId: this.currentSlideData.caseStudyId, | 689 | caseStudyId: this.currentSlideData.caseStudyId, |
| 685 | slideId: this.currentSlideData.slideId, | 690 | slideId: this.currentSlideData.slideId, |
| 686 | comment: this.comment, | 691 | comment: this.comment, |
| 687 | parentId: cmnt._id, | 692 | parentId: cmnt._id, |
| 688 | }; | 693 | }; |
| 689 | axios | 694 | axios |
| 690 | .post("/bounceBoard/comment", obj, { | 695 | .post("/bounceBoard/comment", obj, { |
| 691 | headers: { | 696 | headers: { |
| 692 | Authorization: "Bearer " + this.usertoken, | 697 | Authorization: "Bearer " + this.usertoken, |
| 693 | }, | 698 | }, |
| 694 | }) | 699 | }) |
| 695 | .then((response) => { | 700 | .then((response) => { |
| 696 | this.comment = null; | 701 | this.comment = null; |
| 697 | this.discardRply(cmnt); | 702 | this.discardRply(cmnt); |
| 698 | this.getComment(); | 703 | this.getComment(); |
| 699 | console.log(response); | 704 | console.log(response); |
| 700 | }) | 705 | }) |
| 701 | .catch((error) => { | 706 | .catch((error) => { |
| 702 | if (error.response) { | 707 | if (error.response) { |
| 703 | this.$toaster.error(error.response.data.message); | 708 | this.$toaster.error(error.response.data.message); |
| 704 | } | 709 | } |
| 705 | }); | 710 | }); |
| 706 | }, | 711 | }, |
| 707 | getComment() { | 712 | getComment() { |
| 708 | axios | 713 | axios |
| 709 | .get( | 714 | .get( |
| 710 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 715 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 711 | { | 716 | { |
| 712 | headers: { | 717 | headers: { |
| 713 | Authorization: "Bearer " + this.usertoken, | 718 | Authorization: "Bearer " + this.usertoken, |
| 714 | }, | 719 | }, |
| 715 | } | 720 | } |
| 716 | ) | 721 | ) |
| 717 | .then((response) => { | 722 | .then((response) => { |
| 718 | console.log(response.data); | 723 | console.log(response.data); |
| 719 | var comments = []; | 724 | var comments = []; |
| 720 | var keys = Object.keys(response.data.data); | 725 | var keys = Object.keys(response.data.data); |
| 721 | response.data.data; | 726 | response.data.data; |
| 722 | keys.forEach((key_) => { | 727 | keys.forEach((key_) => { |
| 723 | comments.push(response.data.data[key_]); | 728 | comments.push(response.data.data[key_]); |
| 724 | }); | 729 | }); |
| 725 | comments.forEach((coment_) => { | 730 | comments.forEach((coment_) => { |
| 726 | coment_.childInput = false; | 731 | coment_.childInput = false; |
| 727 | }); | 732 | }); |
| 728 | console.log("comments", comments); | 733 | console.log("comments", comments); |
| 729 | this.commentList = comments; | 734 | this.commentList = comments; |
| 730 | }) | 735 | }) |
| 731 | .catch((error) => console.log(error)); | 736 | .catch((error) => console.log(error)); |
| 732 | }, | 737 | }, |
| 733 | dateGenerator(curreDate) { | 738 | dateGenerator(curreDate) { |
| 734 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 739 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 735 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 740 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 736 | var result = todayDate.diff(endDate, "days"); | 741 | var result = todayDate.diff(endDate, "days"); |
| 737 | return result; | 742 | return result; |
| 738 | }, | 743 | }, |
| 739 | goToLogin() { | 744 | goToLogin() { |
| 740 | this.$router.push("/login"); | 745 | this.$router.push("/login"); |
| 741 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); | 746 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); |
| 742 | }, | 747 | }, |
| 743 | goToSignUp() { | 748 | goToSignUp() { |
| 744 | this.$router.push("/"); | 749 | this.$router.push("/"); |
| 745 | }, | 750 | }, |
| 746 | open(url){ | 751 | open(url){ |
| 747 | window.open(url); | 752 | window.open(url); |
| 748 | }, | 753 | }, |
| 749 | chtbox_close() { | 754 | chtbox_close() { |
| 750 | $("#cht_box_close").removeClass("cht_close"); | 755 | $("#cht_box_close").removeClass("cht_close"); |
| 751 | $("#open_ct_box, .c_hide").show(); | 756 | $("#open_ct_box, .c_hide").show(); |
| 752 | $(".footer-top").addClass("white-bg"); | 757 | $(".footer-top").addClass("white-bg"); |
| 753 | }, | 758 | }, |
| 754 | open_ct_box() { | 759 | open_ct_box() { |
| 755 | if(!this.usertoken){ | 760 | |
| 756 | this.goToLogin(); | ||
| 757 | } | ||
| 758 | $("#cht_box_close").addClass("cht_close"); | 761 | $("#cht_box_close").addClass("cht_close"); |
| 759 | $("#open_ct_box, .c_hide").hide(); | 762 | $("#open_ct_box, .c_hide").hide(); |
| 760 | $(".footer-top").removeClass("white-bg"); | 763 | $(".footer-top").removeClass("white-bg"); |
| 761 | }, | 764 | }, |
| 762 | eachRply(cmnt) { | 765 | eachRply(cmnt) { |
| 763 | cmnt.childInput = true; | 766 | cmnt.childInput = true; |
| 764 | this.parentInput = false; | 767 | this.parentInput = false; |
| 765 | this.comment = null; | 768 | this.comment = null; |
| 766 | setTimeout(() => { | 769 | setTimeout(() => { |
| 767 | document.getElementById("childInput").focus(); | 770 | document.getElementById("childInput").focus(); |
| 768 | }, 100); | 771 | }, 100); |
| 769 | }, | 772 | }, |
| 770 | discardRply(cmnt) { | 773 | discardRply(cmnt) { |
| 771 | cmnt.childInput = false; | 774 | cmnt.childInput = false; |
| 772 | this.parentInput = true; | 775 | this.parentInput = true; |
| 773 | this.comment = null; | 776 | this.comment = null; |
| 774 | }, | 777 | }, |
| 775 | reply_cht_box(i) { | 778 | reply_cht_box(i) { |
| 776 | if(!this.usertoken){ | 779 | if(!this.usertoken){ |
| 777 | this.goToLogin(); | 780 | this.goToLogin(); |
| 778 | } | 781 | } |
| 779 | console.log(this.commentList, "cmnt"); | 782 | console.log(this.commentList, "cmnt"); |
| 780 | $("#cht_box_close").addClass("cht_close"); | 783 | $("#cht_box_close").addClass("cht_close"); |
| 781 | $("#open_ct_box, .c_hide").hide(); | 784 | $("#open_ct_box, .c_hide").hide(); |
| 782 | $(".footer-top").removeClass("white-bg"); | 785 | $(".footer-top").removeClass("white-bg"); |
| 783 | this.commentList[i].childInput = true; | 786 | this.commentList[i].childInput = true; |
| 784 | this.parentInput = false; | 787 | this.parentInput = false; |
| 785 | this.comment = null; | 788 | this.comment = null; |
| 786 | setTimeout(() => { | 789 | setTimeout(() => { |
| 787 | document.getElementById("childInput").focus(); | 790 | document.getElementById("childInput").focus(); |
| 788 | }, 100); | 791 | }, 100); |
| 789 | }, | 792 | }, |
| 790 | likeComment(status, id) { | 793 | likeComment(status, id) { |
| 791 | if(!this.usertoken){ | 794 | if(!this.usertoken){ |
| 792 | this.goToLogin(); | 795 | this.goToLogin(); |
| 793 | } | 796 | } |
| 794 | console.log("===", this.comment); | 797 | console.log("===", this.comment); |
| 795 | var obj = { | 798 | var obj = { |
| 796 | commentId: id, | 799 | commentId: id, |
| 797 | like: status, | 800 | like: status, |
| 798 | }; | 801 | }; |
| 799 | axios | 802 | axios |
| 800 | .post("/bounceBoard/like", obj, { | 803 | .post("/bounceBoard/like", obj, { |
| 801 | headers: { | 804 | headers: { |
| 802 | Authorization: "Bearer " + this.usertoken, | 805 | Authorization: "Bearer " + this.usertoken, |
| 803 | }, | 806 | }, |
| 804 | }) | 807 | }) |
| 805 | .then((response) => { | 808 | .then((response) => { |
| 806 | this.getComment(); | 809 | this.getComment(); |
| 807 | console.log(response); | 810 | console.log(response); |
| 808 | }) | 811 | }) |
| 809 | .catch((error) => { | 812 | .catch((error) => { |
| 810 | if (error.response) { | 813 | if (error.response) { |
| 811 | this.$toaster.error(error.response.data.message); | 814 | this.$toaster.error(error.response.data.message); |
| 812 | } | 815 | } |
| 813 | }); | 816 | }); |
| 814 | }, | 817 | }, |
| 815 | getLastcomment(flag, commentArray) { | 818 | getLastcomment(flag, commentArray) { |
| 816 | var finalComment = null; | 819 | var finalComment = null; |
| 817 | var totalMessage = 0; | 820 | var totalMessage = 0; |
| 818 | var name = null; | 821 | var name = null; |
| 819 | commentArray.forEach((comment_) => { | 822 | commentArray.forEach((comment_) => { |
| 820 | if (comment_.comment != null) { | 823 | if (comment_.comment != null) { |
| 821 | name = comment_.user.name; | 824 | name = comment_.user.name; |
| 822 | finalComment = comment_.comment; | 825 | finalComment = comment_.comment; |
| 823 | totalMessage++; | 826 | totalMessage++; |
| 824 | } | 827 | } |
| 825 | }); | 828 | }); |
| 826 | if (flag == "count") { | 829 | if (flag == "count") { |
| 827 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 830 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 828 | } else if (flag =="name") { | 831 | } else if (flag =="name") { |
| 829 | return (name = name); | 832 | return (name = name); |
| 830 | } else { | 833 | } else { |
| 831 | return finalComment; | 834 | return finalComment; |
| 832 | } | 835 | } |
| 833 | }, | 836 | }, |
| 834 | commentExistCheck(i) { | 837 | commentExistCheck(i) { |
| 835 | console.log(this.commentList[i].comment); | 838 | console.log(this.commentList[i].comment); |
| 836 | var returnValue = false; | 839 | var returnValue = false; |
| 837 | if (this.commentList[i].comment) { | 840 | if (this.commentList[i].comment) { |
| 838 | returnValue = true; | 841 | returnValue = true; |
| 839 | } | 842 | } |
| 840 | return returnValue; | 843 | return returnValue; |
| 841 | }, | 844 | }, |
| 842 | }, | 845 | }, |
| 843 | }; | 846 | }; |
| 844 | // | 847 | // |
src/components/TwoScreenWithoutInsight.vue
| 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 | 216 | ||
| 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 | <div class="m-screen-hidden"> | 293 | <div class="m-screen-hidden"> |
| 294 | <div class="top-area-blank"></div> | 294 | <div class="top-area-blank"></div> |
| 295 | <img | 295 | <img |
| 296 | :src="currentSlideData.payload.metaData.mobileImage1" | 296 | :src="currentSlideData.payload.metaData.mobileImage1" |
| 297 | class="m-screen insight-two-img" | 297 | class="m-screen insight-two-img" |
| 298 | /> | 298 | /> |
| 299 | </div> | 299 | </div> |
| 300 | <img | 300 | <img |
| 301 | :src="currentSlideData.payload.metaData.authorImage" | 301 | :src="currentSlideData.payload.metaData.authorImage" |
| 302 | class="user-photo-bottom" | 302 | class="user-photo-bottom" |
| 303 | /> | 303 | /> |
| 304 | </div> | 304 | </div> |
| 305 | <!-- mobile screen one --> | 305 | <!-- mobile screen one --> |
| 306 | <div class="mobile-screen-one p-right"> | 306 | <div class="mobile-screen-one p-right"> |
| 307 | 307 | ||
| 308 | <!-- fixed area --> | 308 | <!-- fixed area --> |
| 309 | <div class="m-screen-right"> | 309 | <div class="m-screen-right"> |
| 310 | <div class="single-author-li-comments" v-if="commentExistCheck(2)"> | 310 | <div class="single-author-li-comments" v-if="commentExistCheck(2)"> |
| 311 | <div class="a-intro-comments"> | 311 | <div class="a-intro-comments"> |
| 312 | <p> | 312 | <p> |
| 313 | {{commentList[2].comment}} | 313 | {{commentList[2].comment}} |
| 314 | </p> | 314 | </p> |
| 315 | <ul class="rly-comment-set"> | 315 | <ul class="rly-comment-set"> |
| 316 | <!-- like/dislike --> | 316 | <!-- like/dislike --> |
| 317 | <li> | 317 | <li> |
| 318 | <img | 318 | <img |
| 319 | src="../assets/images/heart.svg" | 319 | src="../assets/images/heart.svg" |
| 320 | v-if="commentList[2].like == false" | 320 | v-if="commentList[2].like == false" |
| 321 | @click="likeComment(true, commentList[2]._id)" | 321 | @click="likeComment(true, commentList[2]._id)" |
| 322 | class="cursor-pointer" | 322 | class="cursor-pointer" |
| 323 | /> | 323 | /> |
| 324 | <img | 324 | <img |
| 325 | src="../assets/images/purple-heart.png" | 325 | src="../assets/images/purple-heart.png" |
| 326 | v-if="commentList[2].like == true" | 326 | v-if="commentList[2].like == true" |
| 327 | @click="likeComment(false, commentList[2]._id)" | 327 | @click="likeComment(false, commentList[2]._id)" |
| 328 | class="cursor-pointer" | 328 | class="cursor-pointer" |
| 329 | /> | 329 | /> |
| 330 | <a href="javascript:void(0);">{{ | 330 | <a href="javascript:void(0);">{{ |
| 331 | commentList[2].likes.length | 331 | commentList[2].likes.length |
| 332 | }}</a> | 332 | }}</a> |
| 333 | </li> | 333 | </li> |
| 334 | <!-- like/dislike ends --> | 334 | <!-- like/dislike ends --> |
| 335 | <li> | 335 | <li> |
| 336 | <img src="../assets/images/rply.svg" /> | 336 | <img src="../assets/images/rply.svg" /> |
| 337 | <a href="javascript:void(0);" @click="reply_cht_box(2)" | 337 | <a href="javascript:void(0);" @click="reply_cht_box(2)" |
| 338 | >Reply</a | 338 | >Reply</a |
| 339 | > | 339 | > |
| 340 | </li> | 340 | </li> |
| 341 | </ul> | 341 | </ul> |
| 342 | </div> | 342 | </div> |
| 343 | <!-- comments box --> | 343 | <!-- comments box --> |
| 344 | </div> | 344 | </div> |
| 345 | <!-- single author comments --> | 345 | <!-- single author comments --> |
| 346 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | 346 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> |
| 347 | <div class="a-intro-comments"> | 347 | <div class="a-intro-comments"> |
| 348 | <p> | 348 | <p> |
| 349 | {{commentList[3].comment}} | 349 | {{commentList[3].comment}} |
| 350 | </p> | 350 | </p> |
| 351 | <ul class="rly-comment-set"> | 351 | <ul class="rly-comment-set"> |
| 352 | <!-- like/dislike --> | 352 | <!-- like/dislike --> |
| 353 | <li> | 353 | <li> |
| 354 | <img | 354 | <img |
| 355 | src="../assets/images/heart.svg" | 355 | src="../assets/images/heart.svg" |
| 356 | v-if="commentList[3].like == false" | 356 | v-if="commentList[3].like == false" |
| 357 | @click="likeComment(true, commentList[3]._id)" | 357 | @click="likeComment(true, commentList[3]._id)" |
| 358 | class="cursor-pointer" | 358 | class="cursor-pointer" |
| 359 | /> | 359 | /> |
| 360 | <img | 360 | <img |
| 361 | src="../assets/images/purple-heart.png" | 361 | src="../assets/images/purple-heart.png" |
| 362 | v-if="commentList[3].like == true" | 362 | v-if="commentList[3].like == true" |
| 363 | @click="likeComment(false, commentList[3]._id)" | 363 | @click="likeComment(false, commentList[3]._id)" |
| 364 | class="cursor-pointer" | 364 | class="cursor-pointer" |
| 365 | /> | 365 | /> |
| 366 | <a href="javascript:void(0);">{{ | 366 | <a href="javascript:void(0);">{{ |
| 367 | commentList[3].likes.length | 367 | commentList[3].likes.length |
| 368 | }}</a> | 368 | }}</a> |
| 369 | </li> | 369 | </li> |
| 370 | <!-- like/dislike ends --> | 370 | <!-- like/dislike ends --> |
| 371 | <li> | 371 | <li> |
| 372 | <img src="../assets/images/rply.svg" /> | 372 | <img src="../assets/images/rply.svg" /> |
| 373 | <a href="javascript:void(0);" @click="reply_cht_box(3)" | 373 | <a href="javascript:void(0);" @click="reply_cht_box(3)" |
| 374 | >Reply</a | 374 | >Reply</a |
| 375 | > | 375 | > |
| 376 | </li> | 376 | </li> |
| 377 | </ul> | 377 | </ul> |
| 378 | </div> | 378 | </div> |
| 379 | <!-- comments box --> | 379 | <!-- comments box --> |
| 380 | </div> | 380 | </div> |
| 381 | <!-- single author comments --> | 381 | <!-- single author comments --> |
| 382 | </div> | 382 | </div> |
| 383 | <!-- comments --> | 383 | <!-- comments --> |
| 384 | <div class="m-screen-hidden"> | 384 | <div class="m-screen-hidden"> |
| 385 | <div class="top-area-blank"></div> | 385 | <div class="top-area-blank"></div> |
| 386 | <img | 386 | <img |
| 387 | :src="currentSlideData.payload.metaData.mobileImage2" | 387 | :src="currentSlideData.payload.metaData.mobileImage2" |
| 388 | class="m-screen insight-two-img" | 388 | class="m-screen insight-two-img" |
| 389 | /> | 389 | /> |
| 390 | </div> | 390 | </div> |
| 391 | <img | 391 | <!-- <img |
| 392 | :src="currentSlideData.payload.metaData.authorImage" | 392 | :src="currentSlideData.payload.metaData.authorImage" |
| 393 | class="user-photo-bottom-r" | 393 | class="user-photo-bottom-r" |
| 394 | /> | 394 | /> --> |
| 395 | </div> | 395 | </div> |
| 396 | <!-- mobile screen Two --> | 396 | <!-- mobile screen Two --> |
| 397 | </div> | 397 | </div> |
| 398 | 398 | ||
| 399 | <!-- single author comments --> | 399 | <!-- single author comments --> |
| 400 | <div class="footer-nav"> | 400 | <div class="footer-nav"> |
| 401 | <div class="footer-top white-bg"> | 401 | <div class="footer-top white-bg"> |
| 402 | <div class="row"> | 402 | <div class="row"> |
| 403 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> | 403 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| 404 | <div class="row h-100p"> | 404 | <div class="row h-100p"> |
| 405 | <div | 405 | <div |
| 406 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" | 406 | class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r" |
| 407 | > | 407 | > |
| 408 | <div class="ft-comments-group testi-photos-ct"> | 408 | <div class="ft-comments-group testi-photos-ct"> |
| 409 | <div class="c-with-photos"> | 409 | <div class="c-with-photos"> |
| 410 | <span class="count-comments" | 410 | <span class="count-comments" |
| 411 | >{{ getLastcomment("count", commentList) }}+ | 411 | >{{ getLastcomment("count", commentList) }}+ |
| 412 | Comments</span | 412 | Comments</span |
| 413 | ><!-- count commets --> | 413 | ><!-- count commets --> |
| 414 | <ul class="comments-photos"> | 414 | <ul class="comments-photos"> |
| 415 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | 415 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 416 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | 416 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 417 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | 417 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 418 | </ul> | 418 | </ul> |
| 419 | <!-- comment photos --> | 419 | <!-- comment photos --> |
| 420 | </div> | 420 | </div> |
| 421 | <div class="comments-detail all-c-space"> | 421 | <div class="comments-detail all-c-space"> |
| 422 | <span | 422 | <span |
| 423 | >{{ getLastcomment("name", commentList) }} | 423 | >{{ getLastcomment("name", commentList) }} |
| 424 | <a href="javascript:void(0);" @click="open_ct_box" | 424 | <a href="javascript:void(0);" @click="open_ct_box" |
| 425 | >View All</a | 425 | >View All</a |
| 426 | ></span | 426 | ></span |
| 427 | > | 427 | > |
| 428 | <p> | 428 | <p> |
| 429 | <!-- I wonder what the difference between “Dunzo Assistant” | 429 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 430 | and “Pickup and Drop... --> | 430 | and “Pickup and Drop... --> |
| 431 | {{ getLastcomment("msg", commentList) }} | 431 | {{ getLastcomment("msg", commentList) }} |
| 432 | </p> | 432 | </p> |
| 433 | </div> | 433 | </div> |
| 434 | <!-- comments detail --> | 434 | <!-- comments detail --> |
| 435 | </div> | 435 | </div> |
| 436 | <!-- comments Group --> | 436 | <!-- comments Group --> |
| 437 | </div> | 437 | </div> |
| 438 | </div> | 438 | </div> |
| 439 | </div> | 439 | </div> |
| 440 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> | 440 | <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide"> |
| 441 | <div class="comment-frm no-c-frm"> | 441 | <div class="comment-frm no-c-frm"> |
| 442 | <div class="row"> | 442 | <div class="row"> |
| 443 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> | 443 | <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10"> |
| 444 | <div class="form-group frm-wdth addfrm-spc"> | 444 | <div class="form-group frm-wdth addfrm-spc"> |
| 445 | <input | 445 | <input |
| 446 | type="text" | 446 | type="text" |
| 447 | class="form-control" | 447 | class="form-control" |
| 448 | placeholder="Something on your mind?" | 448 | placeholder="Something on your mind?" |
| 449 | id="open_ct_box" | 449 | id="open_ct_box" |
| 450 | v-model="comment" | 450 | v-model="comment" |
| 451 | /> | 451 | /> |
| 452 | </div> | 452 | </div> |
| 453 | </div> | 453 | </div> |
| 454 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> | 454 | <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2"> |
| 455 | <a | 455 | <a |
| 456 | href="javascript:void(0);" | 456 | href="javascript:void(0);" |
| 457 | @click="createComment" | 457 | @click="createComment" |
| 458 | class="add-comment" | 458 | class="add-comment" |
| 459 | ><img src="../assets/images/add-comment.svg" /> | 459 | ><img src="../assets/images/add-comment.svg" /> |
| 460 | Comment</a | 460 | Comment</a |
| 461 | > | 461 | > |
| 462 | </div> | 462 | </div> |
| 463 | </div> | 463 | </div> |
| 464 | <!-- comment from --> | 464 | <!-- comment from --> |
| 465 | </div> | 465 | </div> |
| 466 | </div> | 466 | </div> |
| 467 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> | 467 | <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"> |
| 468 | <ul class="top-intro-bt"> | 468 | <ul class="top-intro-bt"> |
| 469 | <li> | 469 | <li> |
| 470 | <a href="javascript:void(0);" @click="goBack" | 470 | <a href="javascript:void(0);" @click="goBack" |
| 471 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 471 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 472 | > | 472 | > |
| 473 | </li> | 473 | </li> |
| 474 | <li> | 474 | <li> |
| 475 | <a href="javascript:void(0);" @click="goNext" | 475 | <a href="javascript:void(0);" @click="goNext" |
| 476 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 476 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 477 | slide</a | 477 | slide</a |
| 478 | > | 478 | > |
| 479 | </li> | 479 | </li> |
| 480 | </ul> | 480 | </ul> |
| 481 | </div> | 481 | </div> |
| 482 | <!-- buttons list --> | 482 | <!-- buttons list --> |
| 483 | </div> | 483 | </div> |
| 484 | </div> | 484 | </div> |
| 485 | <!-- footer top --> | 485 | <!-- footer top --> |
| 486 | <div class="footer-bottom"> | 486 | <div class="footer-bottom"> |
| 487 | <ul> | 487 | <ul> |
| 488 | <li class="active"></li> | 488 | <li class="active"></li> |
| 489 | <li></li> | 489 | <li></li> |
| 490 | </ul> | 490 | </ul> |
| 491 | </div> | 491 | </div> |
| 492 | <!-- footer top --> | 492 | <!-- footer top --> |
| 493 | </div> | 493 | </div> |
| 494 | <!-- footer --> | 494 | <!-- footer --> |
| 495 | </div> | 495 | </div> |
| 496 | <!-- body wrapper --> | 496 | <!-- body wrapper --> |
| 497 | </div> | 497 | </div> |
| 498 | <!-- main wrapper --> | 498 | <!-- main wrapper --> |
| 499 | </main> | 499 | </main> |
| 500 | </template> | 500 | </template> |
| 501 | 501 | ||
| 502 | <script> | 502 | <script> |
| 503 | import Vue from "vue"; | 503 | import Vue from "vue"; |
| 504 | import router from "../router"; | 504 | import router from "../router"; |
| 505 | import axios from "axios"; | 505 | import axios from "axios"; |
| 506 | import moment from 'moment'; | 506 | import moment from 'moment'; |
| 507 | import Header from "./Header"; | 507 | import Header from "./Header"; |
| 508 | 508 | ||
| 509 | export default { | 509 | export default { |
| 510 | components: { | 510 | components: { |
| 511 | Header: Header, | 511 | Header: Header, |
| 512 | }, | 512 | }, |
| 513 | name: "TwoScreenWithoutInsight", | 513 | name: "TwoScreenWithoutInsight", |
| 514 | 514 | ||
| 515 | data() { | 515 | data() { |
| 516 | return { | 516 | return { |
| 517 | allSlide: [], | 517 | allSlide: [], |
| 518 | currentSlideIndex: null, | 518 | currentSlideIndex: null, |
| 519 | currentSlideData: null, | 519 | currentSlideData: null, |
| 520 | // | 520 | // |
| 521 | usertoken: null, | 521 | usertoken: null, |
| 522 | commentList: [], | 522 | commentList: [], |
| 523 | comment: null, | 523 | comment: null, |
| 524 | parentInput: true, | 524 | parentInput: true, |
| 525 | }; | 525 | }; |
| 526 | }, | 526 | }, |
| 527 | mounted() { | 527 | mounted() { |
| 528 | var allSlideData = localStorage.getItem( | 528 | var allSlideData = localStorage.getItem( |
| 529 | "spotlight_slide" + this.$route.params.caseStudyId | 529 | "spotlight_slide" + this.$route.params.caseStudyId |
| 530 | ); | 530 | ); |
| 531 | if (allSlideData) { | 531 | if (allSlideData) { |
| 532 | this.allSlide = JSON.parse(allSlideData); | 532 | this.allSlide = JSON.parse(allSlideData); |
| 533 | this.getCurrentSlideData(); | 533 | this.getCurrentSlideData(); |
| 534 | }else{ | 534 | }else{ |
| 535 | this.getCurrentSlideData(); | 535 | this.getCurrentSlideData(); |
| 536 | 536 | ||
| 537 | } | 537 | } |
| 538 | var userdata = localStorage.getItem("spotlight_usertoken"); | 538 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 539 | if (userdata) { | 539 | if (userdata) { |
| 540 | userdata = JSON.parse(userdata); | 540 | userdata = JSON.parse(userdata); |
| 541 | this.usertoken = userdata.token; | 541 | this.usertoken = userdata.token; |
| 542 | this.getComment(); | 542 | this.getComment(); |
| 543 | }else{ | 543 | }else{ |
| 544 | this.getComment(); | 544 | this.getComment(); |
| 545 | } | 545 | } |
| 546 | }, | 546 | }, |
| 547 | methods: { | 547 | methods: { |
| 548 | 548 | ||
| 549 | generatecaseStudies(){ | 549 | generatecaseStudies(){ |
| 550 | axios | 550 | axios |
| 551 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 551 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 552 | headers: { | 552 | headers: { |
| 553 | Authorization: "Bearer " + this.usertoken, | 553 | Authorization: "Bearer " + this.usertoken, |
| 554 | }, | 554 | }, |
| 555 | }) | 555 | }) |
| 556 | .then((response) => { | 556 | .then((response) => { |
| 557 | 557 | ||
| 558 | console.log('response',response.data.data); | 558 | console.log('response',response.data.data); |
| 559 | this.openStudy(response.data.data); | 559 | this.openStudy(response.data.data); |
| 560 | }) | 560 | }) |
| 561 | .catch((error) => console.log(error)); | 561 | .catch((error) => console.log(error)); |
| 562 | }, | 562 | }, |
| 563 | 563 | ||
| 564 | 564 | ||
| 565 | 565 | ||
| 566 | openStudy(payload) { | 566 | openStudy(payload) { |
| 567 | console.log("payload-", payload); | 567 | console.log("payload-", payload); |
| 568 | payload.intro.date = payload.createdAt; | 568 | payload.intro.date = payload.createdAt; |
| 569 | payload.intro.focusPoint = payload.focusAreas; | 569 | payload.intro.focusPoint = payload.focusAreas; |
| 570 | axios | 570 | axios |
| 571 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 571 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 572 | headers: { | 572 | headers: { |
| 573 | Authorization: "Bearer " + this.usertoken, | 573 | Authorization: "Bearer " + this.usertoken, |
| 574 | }, | 574 | }, |
| 575 | }) | 575 | }) |
| 576 | .then((response) => { | 576 | .then((response) => { |
| 577 | this.createSlide(payload, response.data.data); | 577 | this.createSlide(payload, response.data.data); |
| 578 | }) | 578 | }) |
| 579 | .catch((error) => console.log(error)); | 579 | .catch((error) => console.log(error)); |
| 580 | }, | 580 | }, |
| 581 | 581 | ||
| 582 | createSlide(payload, slides) { | 582 | createSlide(payload, slides) { |
| 583 | var finalSlides = []; | 583 | var finalSlides = []; |
| 584 | slides.forEach((slides_) => { | 584 | slides.forEach((slides_) => { |
| 585 | var url = this.assignRoutes(slides_.templateId); | 585 | var url = this.assignRoutes(slides_.templateId); |
| 586 | var obj = { | 586 | var obj = { |
| 587 | forward: true, | 587 | forward: true, |
| 588 | backward: true, | 588 | backward: true, |
| 589 | ur: url, | 589 | ur: url, |
| 590 | slideId: slides_._id, | 590 | slideId: slides_._id, |
| 591 | caseStudyId: slides_.caseStudyId, | 591 | caseStudyId: slides_.caseStudyId, |
| 592 | payload: { | 592 | payload: { |
| 593 | metaData: slides_.metaData, | 593 | metaData: slides_.metaData, |
| 594 | comments: slides_.comments, | 594 | comments: slides_.comments, |
| 595 | insight: slides_.insight ? slides_.insight : null, | 595 | insight: slides_.insight ? slides_.insight : null, |
| 596 | }, | 596 | }, |
| 597 | }; | 597 | }; |
| 598 | // slides_ | 598 | // slides_ |
| 599 | finalSlides.push(obj); | 599 | finalSlides.push(obj); |
| 600 | }); | 600 | }); |
| 601 | console.log("payload", payload); | 601 | console.log("payload", payload); |
| 602 | // add first slide at begining | 602 | // add first slide at begining |
| 603 | finalSlides.unshift({ | 603 | finalSlides.unshift({ |
| 604 | forward: true, | 604 | forward: true, |
| 605 | backward: false, | 605 | backward: false, |
| 606 | ur: "EpisodeIntro", | 606 | ur: "EpisodeIntro", |
| 607 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 607 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 608 | caseStudyId: payload._id, | 608 | caseStudyId: payload._id, |
| 609 | payload: { | 609 | payload: { |
| 610 | metaData: payload.intro, | 610 | metaData: payload.intro, |
| 611 | comments: [], | 611 | comments: [], |
| 612 | }, | 612 | }, |
| 613 | }); | 613 | }); |
| 614 | finalSlides.push({ | 614 | finalSlides.push({ |
| 615 | forward: true, | 615 | forward: true, |
| 616 | backward: false, | 616 | backward: false, |
| 617 | ur: "Outro", | 617 | ur: "Outro", |
| 618 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 618 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 619 | caseStudyId: payload._id, | 619 | caseStudyId: payload._id, |
| 620 | payload: { | 620 | payload: { |
| 621 | metaData: payload.outro, | 621 | metaData: payload.outro, |
| 622 | comments: [], | 622 | comments: [], |
| 623 | }, | 623 | }, |
| 624 | }); | 624 | }); |
| 625 | 625 | ||
| 626 | console.log(finalSlides); | 626 | console.log(finalSlides); |
| 627 | console.log("payload", payload); | 627 | console.log("payload", payload); |
| 628 | localStorage.setItem( | 628 | localStorage.setItem( |
| 629 | "spotlight_slide" + payload._id, | 629 | "spotlight_slide" + payload._id, |
| 630 | JSON.stringify(finalSlides) | 630 | JSON.stringify(finalSlides) |
| 631 | ); | 631 | ); |
| 632 | this.allSlide = finalSlides; | 632 | this.allSlide = finalSlides; |
| 633 | this.getCurrentSlideData(); | 633 | this.getCurrentSlideData(); |
| 634 | }, | 634 | }, |
| 635 | assignRoutes(tempId) { | 635 | assignRoutes(tempId) { |
| 636 | // /episode-intro | 636 | // /episode-intro |
| 637 | // /outro | 637 | // /outro |
| 638 | var routes = [ | 638 | var routes = [ |
| 639 | { | 639 | { |
| 640 | url: "AuthorIntro", | 640 | url: "AuthorIntro", |
| 641 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 641 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 642 | }, | 642 | }, |
| 643 | { | 643 | { |
| 644 | url: "NoScreenshotSingleAuthor", | 644 | url: "NoScreenshotSingleAuthor", |
| 645 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 645 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 646 | }, | 646 | }, |
| 647 | { | 647 | { |
| 648 | url: "SingleMobileScreenInsightTwo", | 648 | url: "SingleMobileScreenInsightTwo", |
| 649 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 649 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 650 | }, | 650 | }, |
| 651 | { | 651 | { |
| 652 | url: "TwoScreenWithoutInsight", | 652 | url: "TwoScreenWithoutInsight", |
| 653 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 653 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 654 | }, | 654 | }, |
| 655 | { | 655 | { |
| 656 | url: "noscreenshotSingleautho", | 656 | url: "noscreenshotSingleautho", |
| 657 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 657 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 658 | }, | 658 | }, |
| 659 | { | 659 | { |
| 660 | url: "SingleMobileScreenInsightOne", | 660 | url: "SingleMobileScreenInsightOne", |
| 661 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 661 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 662 | }, | 662 | }, |
| 663 | { | 663 | { |
| 664 | url: "TwoScreenWithInsight", | 664 | url: "TwoScreenWithInsight", |
| 665 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 665 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 666 | }, | 666 | }, |
| 667 | { | 667 | { |
| 668 | url: "AuthorReadingNow", | 668 | url: "AuthorReadingNow", |
| 669 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 669 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 670 | }, | 670 | }, |
| 671 | { | 671 | { |
| 672 | url: "AuthorReadingBreak", | 672 | url: "AuthorReadingBreak", |
| 673 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 673 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 674 | }, | 674 | }, |
| 675 | ]; | 675 | ]; |
| 676 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 676 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 677 | return routes[i].url; | 677 | return routes[i].url; |
| 678 | }, | 678 | }, |
| 679 | 679 | ||
| 680 | getCurrentSlideData() { | 680 | getCurrentSlideData() { |
| 681 | var i = this.allSlide.findIndex( | 681 | var i = this.allSlide.findIndex( |
| 682 | (slide_) => slide_.slideId == this.$route.params.slideId | 682 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 683 | ); | 683 | ); |
| 684 | this.currentSlideIndex = i; | 684 | this.currentSlideIndex = i; |
| 685 | this.currentSlideData = this.allSlide[i]; | 685 | this.currentSlideData = this.allSlide[i]; |
| 686 | console.log(this.currentSlideData, "this.usertoken", this.usertoken); | 686 | console.log(this.currentSlideData, "this.usertoken", this.usertoken); |
| 687 | console.log("currentSlideData", this.currentSlideData); | 687 | console.log("currentSlideData", this.currentSlideData); |
| 688 | }, | 688 | }, |
| 689 | goNext() { | 689 | goNext() { |
| 690 | this.currentSlideIndex++; | 690 | this.currentSlideIndex++; |
| 691 | this.$router.push({ | 691 | this.$router.push({ |
| 692 | name: this.allSlide[this.currentSlideIndex].ur, | 692 | name: this.allSlide[this.currentSlideIndex].ur, |
| 693 | params: { | 693 | params: { |
| 694 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 694 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 695 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 695 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 696 | }, | 696 | }, |
| 697 | }); | 697 | }); |
| 698 | }, | 698 | }, |
| 699 | goBack() { | 699 | goBack() { |
| 700 | this.currentSlideIndex--; | 700 | this.currentSlideIndex--; |
| 701 | this.$router.push({ | 701 | this.$router.push({ |
| 702 | name: this.allSlide[this.currentSlideIndex].ur, | 702 | name: this.allSlide[this.currentSlideIndex].ur, |
| 703 | params: { | 703 | params: { |
| 704 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 704 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 705 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 705 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 706 | }, | 706 | }, |
| 707 | }); | 707 | }); |
| 708 | }, | 708 | }, |
| 709 | 709 | ||
| 710 | createComment() { | 710 | createComment() { |
| 711 | console.log("===", this.comment); | 711 | console.log("===", this.comment); |
| 712 | if(!this.usertoken){ | ||
| 713 | this.goToLogin(); | ||
| 714 | } | ||
| 712 | var obj = { | 715 | var obj = { |
| 713 | caseStudyId: this.currentSlideData.caseStudyId, | 716 | caseStudyId: this.currentSlideData.caseStudyId, |
| 714 | slideId: this.currentSlideData.slideId, | 717 | slideId: this.currentSlideData.slideId, |
| 715 | comment: this.comment, | 718 | comment: this.comment, |
| 716 | 719 | ||
| 717 | }; | 720 | }; |
| 718 | axios | 721 | axios |
| 719 | .post("/bounceBoard/comment", obj, { | 722 | .post("/bounceBoard/comment", obj, { |
| 720 | headers: { | 723 | headers: { |
| 721 | Authorization: "Bearer " + this.usertoken, | 724 | Authorization: "Bearer " + this.usertoken, |
| 722 | }, | 725 | }, |
| 723 | }) | 726 | }) |
| 724 | .then((response) => { | 727 | .then((response) => { |
| 725 | this.comment = null; | 728 | this.comment = null; |
| 726 | this.getComment(); | 729 | this.getComment(); |
| 727 | console.log(response); | 730 | console.log(response); |
| 728 | }) | 731 | }) |
| 729 | .catch((error) => { | 732 | .catch((error) => { |
| 730 | if (error.response) { | 733 | if (error.response) { |
| 731 | this.$toaster.error(error.response.data.message); | 734 | this.$toaster.error(error.response.data.message); |
| 732 | } | 735 | } |
| 733 | }); | 736 | }); |
| 734 | }, | 737 | }, |
| 735 | createChildComment(cmnt) { | 738 | createChildComment(cmnt) { |
| 736 | console.log(cmnt,"===", this.comment); | 739 | if(!this.usertoken){ |
| 740 | this.goToLogin(); | ||
| 741 | } console.log(cmnt,"===", this.comment); | ||
| 737 | var obj = { | 742 | var obj = { |
| 738 | caseStudyId: this.currentSlideData.caseStudyId, | 743 | caseStudyId: this.currentSlideData.caseStudyId, |
| 739 | slideId: this.currentSlideData.slideId, | 744 | slideId: this.currentSlideData.slideId, |
| 740 | comment: this.comment, | 745 | comment: this.comment, |
| 741 | parentId: cmnt._id, | 746 | parentId: cmnt._id, |
| 742 | 747 | ||
| 743 | }; | 748 | }; |
| 744 | axios | 749 | axios |
| 745 | .post("/bounceBoard/comment", obj, { | 750 | .post("/bounceBoard/comment", obj, { |
| 746 | headers: { | 751 | headers: { |
| 747 | Authorization: "Bearer " + this.usertoken, | 752 | Authorization: "Bearer " + this.usertoken, |
| 748 | }, | 753 | }, |
| 749 | }) | 754 | }) |
| 750 | .then((response) => { | 755 | .then((response) => { |
| 751 | this.comment = null; | 756 | this.comment = null; |
| 752 | this.discardRply(cmnt); | 757 | this.discardRply(cmnt); |
| 753 | this.getComment(); | 758 | this.getComment(); |
| 754 | console.log(response); | 759 | console.log(response); |
| 755 | }) | 760 | }) |
| 756 | .catch((error) => { | 761 | .catch((error) => { |
| 757 | if (error.response) { | 762 | if (error.response) { |
| 758 | this.$toaster.error(error.response.data.message); | 763 | this.$toaster.error(error.response.data.message); |
| 759 | } | 764 | } |
| 760 | }); | 765 | }); |
| 761 | }, | 766 | }, |
| 762 | getComment() { | 767 | getComment() { |
| 763 | axios | 768 | axios |
| 764 | .get( | 769 | .get( |
| 765 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 770 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 766 | { | 771 | { |
| 767 | headers: { | 772 | headers: { |
| 768 | Authorization: "Bearer " + this.usertoken, | 773 | Authorization: "Bearer " + this.usertoken, |
| 769 | }, | 774 | }, |
| 770 | } | 775 | } |
| 771 | ) | 776 | ) |
| 772 | .then((response) => { | 777 | .then((response) => { |
| 773 | console.log(response.data); | 778 | console.log(response.data); |
| 774 | var comments = []; | 779 | var comments = []; |
| 775 | var keys = Object.keys(response.data.data) | 780 | var keys = Object.keys(response.data.data) |
| 776 | response.data.data | 781 | response.data.data |
| 777 | keys.forEach((key_) => { | 782 | keys.forEach((key_) => { |
| 778 | comments.push(response.data.data[key_]) | 783 | comments.push(response.data.data[key_]) |
| 779 | }); | 784 | }); |
| 780 | comments.forEach((coment_)=>{ | 785 | comments.forEach((coment_)=>{ |
| 781 | coment_.childInput = false; | 786 | coment_.childInput = false; |
| 782 | }); | 787 | }); |
| 783 | console.log("comments",comments) | 788 | console.log("comments",comments) |
| 784 | this.commentList = comments; | 789 | this.commentList = comments; |
| 785 | }) | 790 | }) |
| 786 | .catch((error) => console.log(error)); | 791 | .catch((error) => console.log(error)); |
| 787 | }, | 792 | }, |
| 788 | dateGenerator(curreDate){ | 793 | dateGenerator(curreDate){ |
| 789 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 794 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 790 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 795 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 791 | var result = todayDate.diff(endDate, 'days'); | 796 | var result = todayDate.diff(endDate, 'days'); |
| 792 | return result; | 797 | return result; |
| 793 | }, | 798 | }, |
| 794 | goToLogin() { | 799 | goToLogin() { |
| 795 | this.$router.push("/login"); | 800 | this.$router.push("/login"); |
| 796 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); | 801 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); |
| 797 | }, | 802 | }, |
| 798 | goToSignUp() { | 803 | goToSignUp() { |
| 799 | this.$router.push("/"); | 804 | this.$router.push("/"); |
| 800 | }, | 805 | }, |
| 801 | chtbox_close() { | 806 | chtbox_close() { |
| 802 | $("#cht_box_close").removeClass("cht_close"); | 807 | $("#cht_box_close").removeClass("cht_close"); |
| 803 | $("#open_ct_box, .c_hide").show(); | 808 | $("#open_ct_box, .c_hide").show(); |
| 804 | $(".footer-top").addClass("white-bg"); | 809 | $(".footer-top").addClass("white-bg"); |
| 805 | }, | 810 | }, |
| 806 | open_ct_box() { | 811 | open_ct_box() { |
| 807 | if(!this.usertoken){ | 812 | |
| 808 | this.goToLogin(); | ||
| 809 | } | ||
| 810 | $("#cht_box_close").addClass("cht_close"); | 813 | $("#cht_box_close").addClass("cht_close"); |
| 811 | $("#open_ct_box, .c_hide").hide(); | 814 | $("#open_ct_box, .c_hide").hide(); |
| 812 | $(".footer-top").removeClass("white-bg"); | 815 | $(".footer-top").removeClass("white-bg"); |
| 813 | }, | 816 | }, |
| 814 | eachRply(cmnt) { | 817 | eachRply(cmnt) { |
| 815 | cmnt.childInput = true; | 818 | cmnt.childInput = true; |
| 816 | this.parentInput = false; | 819 | this.parentInput = false; |
| 817 | this.comment = null; | 820 | this.comment = null; |
| 818 | setTimeout(() => { | 821 | setTimeout(() => { |
| 819 | document.getElementById("childInput").focus(); | 822 | document.getElementById("childInput").focus(); |
| 820 | }, 100); | 823 | }, 100); |
| 821 | }, | 824 | }, |
| 822 | discardRply(cmnt) { | 825 | discardRply(cmnt) { |
| 823 | cmnt.childInput = false; | 826 | cmnt.childInput = false; |
| 824 | this.parentInput = true; | 827 | this.parentInput = true; |
| 825 | this.comment = null; | 828 | this.comment = null; |
| 826 | }, | 829 | }, |
| 827 | reply_cht_box(i) { | 830 | reply_cht_box(i) { |
| 828 | if(!this.usertoken){ | 831 | if(!this.usertoken){ |
| 829 | this.goToLogin(); | 832 | this.goToLogin(); |
| 830 | } | 833 | } |
| 831 | console.log(this.commentList, "cmnt"); | 834 | console.log(this.commentList, "cmnt"); |
| 832 | $("#cht_box_close").addClass("cht_close"); | 835 | $("#cht_box_close").addClass("cht_close"); |
| 833 | $("#open_ct_box, .c_hide").hide(); | 836 | $("#open_ct_box, .c_hide").hide(); |
| 834 | $(".footer-top").removeClass("white-bg"); | 837 | $(".footer-top").removeClass("white-bg"); |
| 835 | this.commentList[i].childInput = true; | 838 | this.commentList[i].childInput = true; |
| 836 | this.parentInput = false; | 839 | this.parentInput = false; |
| 837 | this.comment = null; | 840 | this.comment = null; |
| 838 | setTimeout(() => { | 841 | setTimeout(() => { |
| 839 | document.getElementById("childInput").focus(); | 842 | document.getElementById("childInput").focus(); |
| 840 | }, 100); | 843 | }, 100); |
| 841 | }, | 844 | }, |
| 842 | likeComment(status, id) { | 845 | likeComment(status, id) { |
| 843 | if(!this.usertoken){ | 846 | if(!this.usertoken){ |
| 844 | this.goToLogin(); | 847 | this.goToLogin(); |
| 845 | } | 848 | } |
| 846 | console.log("===", this.comment); | 849 | console.log("===", this.comment); |
| 847 | var obj = { | 850 | var obj = { |
| 848 | commentId: id, | 851 | commentId: id, |
| 849 | like: status, | 852 | like: status, |
| 850 | }; | 853 | }; |
| 851 | axios | 854 | axios |
| 852 | .post("/bounceBoard/like", obj, { | 855 | .post("/bounceBoard/like", obj, { |
| 853 | headers: { | 856 | headers: { |
| 854 | Authorization: "Bearer " + this.usertoken, | 857 | Authorization: "Bearer " + this.usertoken, |
| 855 | }, | 858 | }, |
| 856 | }) | 859 | }) |
| 857 | .then((response) => { | 860 | .then((response) => { |
| 858 | this.getComment(); | 861 | this.getComment(); |
| 859 | console.log(response); | 862 | console.log(response); |
| 860 | }) | 863 | }) |
| 861 | .catch((error) => { | 864 | .catch((error) => { |
| 862 | if (error.response) { | 865 | if (error.response) { |
| 863 | this.$toaster.error(error.response.data.message); | 866 | this.$toaster.error(error.response.data.message); |
| 864 | } | 867 | } |
| 865 | }); | 868 | }); |
| 866 | }, | 869 | }, |
| 867 | getLastcomment(flag, commentArray) { | 870 | getLastcomment(flag, commentArray) { |
| 868 | var finalComment = null; | 871 | var finalComment = null; |
| 869 | var totalMessage = 0; | 872 | var totalMessage = 0; |
| 870 | var name = null; | 873 | var name = null; |
| 871 | commentArray.forEach((comment_) => { | 874 | commentArray.forEach((comment_) => { |
| 872 | if (comment_.comment != null) { | 875 | if (comment_.comment != null) { |
| 873 | name = comment_.user.name; | 876 | name = comment_.user.name; |
| 874 | finalComment = comment_.comment; | 877 | finalComment = comment_.comment; |
| 875 | totalMessage++; | 878 | totalMessage++; |
| 876 | } | 879 | } |
| 877 | }); | 880 | }); |
| 878 | if (flag == "count") { | 881 | if (flag == "count") { |
| 879 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 882 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 880 | } else if (flag =="name") { | 883 | } else if (flag =="name") { |
| 881 | return (name = name); | 884 | return (name = name); |
| 882 | } else { | 885 | } else { |
| 883 | return finalComment; | 886 | return finalComment; |
| 884 | } | 887 | } |
| 885 | }, | 888 | }, |
| 886 | commentExistCheck(i) { | 889 | commentExistCheck(i) { |
| 887 | console.log(this.commentList[i].comment); | 890 | console.log(this.commentList[i].comment); |
| 888 | var returnValue = false; | 891 | var returnValue = false; |
| 889 | if (this.commentList[i].comment) { | 892 | if (this.commentList[i].comment) { |
| 890 | returnValue = true; | 893 | returnValue = true; |
| 891 | } | 894 | } |
| 892 | return returnValue; | 895 | return returnValue; |
| 893 | }, | 896 | }, |
| 894 | }, | 897 | }, |
| 895 | }; | 898 | }; |
| 896 | // | 899 | // |
src/components/noscreenshotSingleautho.vue
| 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 | }else{ | 447 | }else{ |
| 448 | this.getCurrentSlideData(); | 448 | this.getCurrentSlideData(); |
| 449 | 449 | ||
| 450 | } | 450 | } |
| 451 | var userdata = localStorage.getItem("spotlight_usertoken"); | 451 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 452 | if (userdata) { | 452 | if (userdata) { |
| 453 | userdata = JSON.parse(userdata); | 453 | userdata = JSON.parse(userdata); |
| 454 | this.usertoken = userdata.token; | 454 | this.usertoken = userdata.token; |
| 455 | this.getComment(); | 455 | this.getComment(); |
| 456 | }else{ | 456 | }else{ |
| 457 | this.getComment(); | 457 | this.getComment(); |
| 458 | } | 458 | } |
| 459 | }, | 459 | }, |
| 460 | methods: { | 460 | methods: { |
| 461 | 461 | ||
| 462 | generatecaseStudies(){ | 462 | generatecaseStudies(){ |
| 463 | axios | 463 | axios |
| 464 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { | 464 | .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { |
| 465 | headers: { | 465 | headers: { |
| 466 | Authorization: "Bearer " + this.usertoken, | 466 | Authorization: "Bearer " + this.usertoken, |
| 467 | }, | 467 | }, |
| 468 | }) | 468 | }) |
| 469 | .then((response) => { | 469 | .then((response) => { |
| 470 | 470 | ||
| 471 | console.log('response',response.data.data); | 471 | console.log('response',response.data.data); |
| 472 | this.openStudy(response.data.data); | 472 | this.openStudy(response.data.data); |
| 473 | }) | 473 | }) |
| 474 | .catch((error) => console.log(error)); | 474 | .catch((error) => console.log(error)); |
| 475 | }, | 475 | }, |
| 476 | 476 | ||
| 477 | 477 | ||
| 478 | 478 | ||
| 479 | openStudy(payload) { | 479 | openStudy(payload) { |
| 480 | console.log("payload-", payload); | 480 | console.log("payload-", payload); |
| 481 | payload.intro.date = payload.createdAt; | 481 | payload.intro.date = payload.createdAt; |
| 482 | payload.intro.focusPoint = payload.focusAreas; | 482 | payload.intro.focusPoint = payload.focusAreas; |
| 483 | axios | 483 | axios |
| 484 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 484 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 485 | headers: { | 485 | headers: { |
| 486 | Authorization: "Bearer " + this.usertoken, | 486 | Authorization: "Bearer " + this.usertoken, |
| 487 | }, | 487 | }, |
| 488 | }) | 488 | }) |
| 489 | .then((response) => { | 489 | .then((response) => { |
| 490 | this.createSlide(payload, response.data.data); | 490 | this.createSlide(payload, response.data.data); |
| 491 | }) | 491 | }) |
| 492 | .catch((error) => console.log(error)); | 492 | .catch((error) => console.log(error)); |
| 493 | }, | 493 | }, |
| 494 | 494 | ||
| 495 | createSlide(payload, slides) { | 495 | createSlide(payload, slides) { |
| 496 | var finalSlides = []; | 496 | var finalSlides = []; |
| 497 | slides.forEach((slides_) => { | 497 | slides.forEach((slides_) => { |
| 498 | var url = this.assignRoutes(slides_.templateId); | 498 | var url = this.assignRoutes(slides_.templateId); |
| 499 | var obj = { | 499 | var obj = { |
| 500 | forward: true, | 500 | forward: true, |
| 501 | backward: true, | 501 | backward: true, |
| 502 | ur: url, | 502 | ur: url, |
| 503 | slideId: slides_._id, | 503 | slideId: slides_._id, |
| 504 | caseStudyId: slides_.caseStudyId, | 504 | caseStudyId: slides_.caseStudyId, |
| 505 | payload: { | 505 | payload: { |
| 506 | metaData: slides_.metaData, | 506 | metaData: slides_.metaData, |
| 507 | comments: slides_.comments, | 507 | comments: slides_.comments, |
| 508 | insight: slides_.insight ? slides_.insight : null, | 508 | insight: slides_.insight ? slides_.insight : null, |
| 509 | }, | 509 | }, |
| 510 | }; | 510 | }; |
| 511 | // slides_ | 511 | // slides_ |
| 512 | finalSlides.push(obj); | 512 | finalSlides.push(obj); |
| 513 | }); | 513 | }); |
| 514 | console.log("payload", payload); | 514 | console.log("payload", payload); |
| 515 | // add first slide at begining | 515 | // add first slide at begining |
| 516 | finalSlides.unshift({ | 516 | finalSlides.unshift({ |
| 517 | forward: true, | 517 | forward: true, |
| 518 | backward: false, | 518 | backward: false, |
| 519 | ur: "EpisodeIntro", | 519 | ur: "EpisodeIntro", |
| 520 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 520 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 521 | caseStudyId: payload._id, | 521 | caseStudyId: payload._id, |
| 522 | payload: { | 522 | payload: { |
| 523 | metaData: payload.intro, | 523 | metaData: payload.intro, |
| 524 | comments: [], | 524 | comments: [], |
| 525 | }, | 525 | }, |
| 526 | }); | 526 | }); |
| 527 | finalSlides.push({ | 527 | finalSlides.push({ |
| 528 | forward: true, | 528 | forward: true, |
| 529 | backward: false, | 529 | backward: false, |
| 530 | ur: "Outro", | 530 | ur: "Outro", |
| 531 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 531 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 532 | caseStudyId: payload._id, | 532 | caseStudyId: payload._id, |
| 533 | payload: { | 533 | payload: { |
| 534 | metaData: payload.outro, | 534 | metaData: payload.outro, |
| 535 | comments: [], | 535 | comments: [], |
| 536 | }, | 536 | }, |
| 537 | }); | 537 | }); |
| 538 | 538 | ||
| 539 | console.log(finalSlides); | 539 | console.log(finalSlides); |
| 540 | console.log("payload", payload); | 540 | console.log("payload", payload); |
| 541 | localStorage.setItem( | 541 | localStorage.setItem( |
| 542 | "spotlight_slide" + payload._id, | 542 | "spotlight_slide" + payload._id, |
| 543 | JSON.stringify(finalSlides) | 543 | JSON.stringify(finalSlides) |
| 544 | ); | 544 | ); |
| 545 | this.allSlide = finalSlides; | 545 | this.allSlide = finalSlides; |
| 546 | this.getCurrentSlideData(); | 546 | this.getCurrentSlideData(); |
| 547 | }, | 547 | }, |
| 548 | assignRoutes(tempId) { | 548 | assignRoutes(tempId) { |
| 549 | // /episode-intro | 549 | // /episode-intro |
| 550 | // /outro | 550 | // /outro |
| 551 | var routes = [ | 551 | var routes = [ |
| 552 | { | 552 | { |
| 553 | url: "AuthorIntro", | 553 | url: "AuthorIntro", |
| 554 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 554 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 555 | }, | 555 | }, |
| 556 | { | 556 | { |
| 557 | url: "NoScreenshotSingleAuthor", | 557 | url: "NoScreenshotSingleAuthor", |
| 558 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 558 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 559 | }, | 559 | }, |
| 560 | { | 560 | { |
| 561 | url: "SingleMobileScreenInsightTwo", | 561 | url: "SingleMobileScreenInsightTwo", |
| 562 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 562 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 563 | }, | 563 | }, |
| 564 | { | 564 | { |
| 565 | url: "TwoScreenWithoutInsight", | 565 | url: "TwoScreenWithoutInsight", |
| 566 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 566 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 567 | }, | 567 | }, |
| 568 | { | 568 | { |
| 569 | url: "noscreenshotSingleautho", | 569 | url: "noscreenshotSingleautho", |
| 570 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 570 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 571 | }, | 571 | }, |
| 572 | { | 572 | { |
| 573 | url: "SingleMobileScreenInsightOne", | 573 | url: "SingleMobileScreenInsightOne", |
| 574 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 574 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 575 | }, | 575 | }, |
| 576 | { | 576 | { |
| 577 | url: "TwoScreenWithInsight", | 577 | url: "TwoScreenWithInsight", |
| 578 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 578 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 579 | }, | 579 | }, |
| 580 | { | 580 | { |
| 581 | url: "AuthorReadingNow", | 581 | url: "AuthorReadingNow", |
| 582 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", | 582 | tempId: "T8_zb4d4fYgx7bVvtKzasdf", |
| 583 | }, | 583 | }, |
| 584 | { | 584 | { |
| 585 | url: "AuthorReadingBreak", | 585 | url: "AuthorReadingBreak", |
| 586 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", | 586 | tempId: "T9_zb3e4fYgy7dVvfKdasdf", |
| 587 | }, | 587 | }, |
| 588 | ]; | 588 | ]; |
| 589 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 589 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 590 | return routes[i].url; | 590 | return routes[i].url; |
| 591 | }, | 591 | }, |
| 592 | 592 | ||
| 593 | getCurrentSlideData() { | 593 | getCurrentSlideData() { |
| 594 | var i = this.allSlide.findIndex( | 594 | var i = this.allSlide.findIndex( |
| 595 | (slide_) => slide_.slideId == this.$route.params.slideId | 595 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 596 | ); | 596 | ); |
| 597 | this.currentSlideIndex = i; | 597 | this.currentSlideIndex = i; |
| 598 | this.currentSlideData = this.allSlide[i]; | 598 | this.currentSlideData = this.allSlide[i]; |
| 599 | console.log("currentSlideData", this.currentSlideData); | 599 | console.log("currentSlideData", this.currentSlideData); |
| 600 | }, | 600 | }, |
| 601 | goNext() { | 601 | goNext() { |
| 602 | this.currentSlideIndex++; | 602 | this.currentSlideIndex++; |
| 603 | this.$router.push({ | 603 | this.$router.push({ |
| 604 | name: this.allSlide[this.currentSlideIndex].ur, | 604 | name: this.allSlide[this.currentSlideIndex].ur, |
| 605 | params: { | 605 | params: { |
| 606 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 606 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 607 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 607 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 608 | }, | 608 | }, |
| 609 | }); | 609 | }); |
| 610 | }, | 610 | }, |
| 611 | goBack() { | 611 | goBack() { |
| 612 | this.currentSlideIndex--; | 612 | this.currentSlideIndex--; |
| 613 | this.$router.push({ | 613 | this.$router.push({ |
| 614 | name: this.allSlide[this.currentSlideIndex].ur, | 614 | name: this.allSlide[this.currentSlideIndex].ur, |
| 615 | params: { | 615 | params: { |
| 616 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 616 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 617 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 617 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 618 | }, | 618 | }, |
| 619 | }); | 619 | }); |
| 620 | }, | 620 | }, |
| 621 | createComment() { | 621 | createComment() { |
| 622 | console.log("===", this.comment); | 622 | console.log("===", this.comment); |
| 623 | if(!this.usertoken){ | ||
| 624 | this.goToLogin(); | ||
| 625 | } | ||
| 623 | var obj = { | 626 | var obj = { |
| 624 | caseStudyId: this.currentSlideData.caseStudyId, | 627 | caseStudyId: this.currentSlideData.caseStudyId, |
| 625 | slideId: this.currentSlideData.slideId, | 628 | slideId: this.currentSlideData.slideId, |
| 626 | comment: this.comment, | 629 | comment: this.comment, |
| 627 | 630 | ||
| 628 | }; | 631 | }; |
| 629 | axios | 632 | axios |
| 630 | .post("/bounceBoard/comment", obj, { | 633 | .post("/bounceBoard/comment", obj, { |
| 631 | headers: { | 634 | headers: { |
| 632 | Authorization: "Bearer " + this.usertoken, | 635 | Authorization: "Bearer " + this.usertoken, |
| 633 | }, | 636 | }, |
| 634 | }) | 637 | }) |
| 635 | .then((response) => { | 638 | .then((response) => { |
| 636 | this.comment = null; | 639 | this.comment = null; |
| 637 | this.getComment(); | 640 | this.getComment(); |
| 638 | console.log(response); | 641 | console.log(response); |
| 639 | }) | 642 | }) |
| 640 | .catch((error) => { | 643 | .catch((error) => { |
| 641 | if (error.response) { | 644 | if (error.response) { |
| 642 | this.$toaster.error(error.response.data.message); | 645 | this.$toaster.error(error.response.data.message); |
| 643 | } | 646 | } |
| 644 | }); | 647 | }); |
| 645 | }, | 648 | }, |
| 646 | createChildComment(cmnt) { | 649 | createChildComment(cmnt) { |
| 650 | if(!this.usertoken){ | ||
| 651 | this.goToLogin(); | ||
| 652 | } if(!this.usertoken){ | ||
| 653 | this.goToLogin(); | ||
| 654 | } | ||
| 647 | console.log(cmnt,"===", this.comment); | 655 | console.log(cmnt,"===", this.comment); |
| 648 | var obj = { | 656 | var obj = { |
| 649 | caseStudyId: this.currentSlideData.caseStudyId, | 657 | caseStudyId: this.currentSlideData.caseStudyId, |
| 650 | slideId: this.currentSlideData.slideId, | 658 | slideId: this.currentSlideData.slideId, |
| 651 | comment: this.comment, | 659 | comment: this.comment, |
| 652 | parentId: cmnt._id, | 660 | parentId: cmnt._id, |
| 653 | 661 | ||
| 654 | }; | 662 | }; |
| 655 | axios | 663 | axios |
| 656 | .post("/bounceBoard/comment", obj, { | 664 | .post("/bounceBoard/comment", obj, { |
| 657 | headers: { | 665 | headers: { |
| 658 | Authorization: "Bearer " + this.usertoken, | 666 | Authorization: "Bearer " + this.usertoken, |
| 659 | }, | 667 | }, |
| 660 | }) | 668 | }) |
| 661 | .then((response) => { | 669 | .then((response) => { |
| 662 | this.comment = null; | 670 | this.comment = null; |
| 663 | this.discardRply(cmnt); | 671 | this.discardRply(cmnt); |
| 664 | this.getComment(); | 672 | this.getComment(); |
| 665 | console.log(response); | 673 | console.log(response); |
| 666 | }) | 674 | }) |
| 667 | .catch((error) => { | 675 | .catch((error) => { |
| 668 | if (error.response) { | 676 | if (error.response) { |
| 669 | this.$toaster.error(error.response.data.message); | 677 | this.$toaster.error(error.response.data.message); |
| 670 | } | 678 | } |
| 671 | }); | 679 | }); |
| 672 | }, | 680 | }, |
| 673 | getComment() { | 681 | getComment() { |
| 674 | axios | 682 | axios |
| 675 | .get( | 683 | .get( |
| 676 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 684 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 677 | { | 685 | { |
| 678 | headers: { | 686 | headers: { |
| 679 | Authorization: "Bearer " + this.usertoken, | 687 | Authorization: "Bearer " + this.usertoken, |
| 680 | }, | 688 | }, |
| 681 | } | 689 | } |
| 682 | ) | 690 | ) |
| 683 | .then((response) => { | 691 | .then((response) => { |
| 684 | console.log(response.data); | 692 | console.log(response.data); |
| 685 | var comments = []; | 693 | var comments = []; |
| 686 | var keys = Object.keys(response.data.data) | 694 | var keys = Object.keys(response.data.data) |
| 687 | response.data.data | 695 | response.data.data |
| 688 | keys.forEach((key_) => { | 696 | keys.forEach((key_) => { |
| 689 | comments.push(response.data.data[key_]) | 697 | comments.push(response.data.data[key_]) |
| 690 | }); | 698 | }); |
| 691 | comments.forEach((coment_)=>{ | 699 | comments.forEach((coment_)=>{ |
| 692 | coment_.childInput = false; | 700 | coment_.childInput = false; |
| 693 | }); | 701 | }); |
| 694 | console.log("comments",comments) | 702 | console.log("comments",comments) |
| 695 | this.commentList = comments; | 703 | this.commentList = comments; |
| 696 | }) | 704 | }) |
| 697 | .catch((error) => console.log(error)); | 705 | .catch((error) => console.log(error)); |
| 698 | }, | 706 | }, |
| 699 | dateGenerator(curreDate){ | 707 | dateGenerator(curreDate){ |
| 700 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 708 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 701 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 709 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 702 | var result = todayDate.diff(endDate, 'days'); | 710 | var result = todayDate.diff(endDate, 'days'); |
| 703 | return result; | 711 | return result; |
| 704 | }, | 712 | }, |
| 705 | goToLogin() { | 713 | goToLogin() { |
| 706 | this.$router.push("/login"); | 714 | this.$router.push("/login"); |
| 707 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); | 715 | localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData)); |
| 708 | }, | 716 | }, |
| 709 | goToSignUp() { | 717 | goToSignUp() { |
| 710 | this.$router.push("/"); | 718 | this.$router.push("/"); |
| 711 | }, | 719 | }, |
| 712 | open(url){ | 720 | open(url){ |
| 713 | window.open(url); | 721 | window.open(url); |
| 714 | }, | 722 | }, |
| 715 | chtbox_close() { | 723 | chtbox_close() { |
| 716 | $("#cht_box_close").removeClass("cht_close"); | 724 | $("#cht_box_close").removeClass("cht_close"); |
| 717 | $("#open_ct_box, .c_hide").show(); | 725 | $("#open_ct_box, .c_hide").show(); |
| 718 | $(".footer-top").addClass("white-bg"); | 726 | $(".footer-top").addClass("white-bg"); |
| 719 | }, | 727 | }, |
| 720 | open_ct_box() { | 728 | open_ct_box() { |
| 721 | if(!this.usertoken){ | 729 | |
| 722 | this.goToLogin(); | ||
| 723 | } | ||
| 724 | $("#cht_box_close").addClass("cht_close"); | 730 | $("#cht_box_close").addClass("cht_close"); |
| 725 | $("#open_ct_box, .c_hide").hide(); | 731 | $("#open_ct_box, .c_hide").hide(); |
| 726 | $(".footer-top").removeClass("white-bg"); | 732 | $(".footer-top").removeClass("white-bg"); |
| 727 | }, | 733 | }, |
| 728 | eachRply(cmnt) { | 734 | eachRply(cmnt) { |
| 729 | cmnt.childInput = true; | 735 | cmnt.childInput = true; |
| 730 | this.parentInput = false; | 736 | this.parentInput = false; |
| 731 | this.comment = null; | 737 | this.comment = null; |
| 732 | setTimeout(() => { | 738 | setTimeout(() => { |
| 733 | document.getElementById("childInput").focus(); | 739 | document.getElementById("childInput").focus(); |
| 734 | }, 100); | 740 | }, 100); |
| 735 | }, | 741 | }, |
| 736 | discardRply(cmnt) { | 742 | discardRply(cmnt) { |
| 737 | cmnt.childInput = false; | 743 | cmnt.childInput = false; |
| 738 | this.parentInput = true; | 744 | this.parentInput = true; |
| 739 | this.comment = null; | 745 | this.comment = null; |
| 740 | }, | 746 | }, |
| 741 | reply_cht_box(i) { | 747 | reply_cht_box(i) { |
| 742 | if(!this.usertoken){ | 748 | if(!this.usertoken){ |
| 743 | this.goToLogin(); | 749 | this.goToLogin(); |
| 744 | } | 750 | } |
| 745 | console.log(this.commentList, "cmnt"); | 751 | console.log(this.commentList, "cmnt"); |
| 746 | $("#cht_box_close").addClass("cht_close"); | 752 | $("#cht_box_close").addClass("cht_close"); |
| 747 | $("#open_ct_box, .c_hide").hide(); | 753 | $("#open_ct_box, .c_hide").hide(); |
| 748 | $(".footer-top").removeClass("white-bg"); | 754 | $(".footer-top").removeClass("white-bg"); |
| 749 | this.commentList[i].childInput = true; | 755 | this.commentList[i].childInput = true; |
| 750 | this.parentInput = false; | 756 | this.parentInput = false; |
| 751 | this.comment = null; | 757 | this.comment = null; |
| 752 | setTimeout(() => { | 758 | setTimeout(() => { |
| 753 | document.getElementById("childInput").focus(); | 759 | document.getElementById("childInput").focus(); |
| 754 | }, 100); | 760 | }, 100); |
| 755 | }, | 761 | }, |
| 756 | likeComment(status, id) { | 762 | likeComment(status, id) { |
| 757 | 763 | ||
| 758 | if(!this.usertoken){ | 764 | if(!this.usertoken){ |
| 759 | this.goToLogin(); | 765 | this.goToLogin(); |
| 760 | } | 766 | } |
| 761 | console.log("===", this.comment); | 767 | console.log("===", this.comment); |
| 762 | var obj = { | 768 | var obj = { |
| 763 | commentId: id, | 769 | commentId: id, |
| 764 | like: status, | 770 | like: status, |
| 765 | }; | 771 | }; |
| 766 | axios | 772 | axios |
| 767 | .post("/bounceBoard/like", obj, { | 773 | .post("/bounceBoard/like", obj, { |
| 768 | headers: { | 774 | headers: { |
| 769 | Authorization: "Bearer " + this.usertoken, | 775 | Authorization: "Bearer " + this.usertoken, |
| 770 | }, | 776 | }, |
| 771 | }) | 777 | }) |
| 772 | .then((response) => { | 778 | .then((response) => { |
| 773 | this.getComment(); | 779 | this.getComment(); |
| 774 | console.log(response); | 780 | console.log(response); |
| 775 | }) | 781 | }) |
| 776 | .catch((error) => { | 782 | .catch((error) => { |
| 777 | if (error.response) { | 783 | if (error.response) { |
| 778 | this.$toaster.error(error.response.data.message); | 784 | this.$toaster.error(error.response.data.message); |
| 779 | } | 785 | } |
| 780 | }); | 786 | }); |
| 781 | }, | 787 | }, |
| 782 | getLastcomment(flag, commentArray) { | 788 | getLastcomment(flag, commentArray) { |
| 783 | var finalComment = null; | 789 | var finalComment = null; |
| 784 | var totalMessage = 0; | 790 | var totalMessage = 0; |
| 785 | var name = null; | 791 | var name = null; |
| 786 | commentArray.forEach((comment_) => { | 792 | commentArray.forEach((comment_) => { |
| 787 | if (comment_.comment != null) { | 793 | if (comment_.comment != null) { |
| 788 | name = comment_.user.name; | 794 | name = comment_.user.name; |
| 789 | finalComment = comment_.comment; | 795 | finalComment = comment_.comment; |
| 790 | totalMessage++; | 796 | totalMessage++; |
| 791 | } | 797 | } |
| 792 | }); | 798 | }); |
| 793 | if (flag == "count") { | 799 | if (flag == "count") { |
| 794 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 800 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 795 | } else if (flag =="name") { | 801 | } else if (flag =="name") { |
| 796 | return (name = name); | 802 | return (name = name); |
| 797 | } else { | 803 | } else { |
| 798 | return finalComment; | 804 | return finalComment; |
| 799 | } | 805 | } |
| 800 | }, | 806 | }, |
| 801 | commentExistCheck(i) { | 807 | commentExistCheck(i) { |
| 802 | console.log(this.commentList[i].comment); | 808 | console.log(this.commentList[i].comment); |
| 803 | var returnValue = false; | 809 | var returnValue = false; |
| 804 | if (this.commentList[i].comment) { | 810 | if (this.commentList[i].comment) { |
| 805 | returnValue = true; | 811 | returnValue = true; |
| 806 | } | 812 | } |
| 807 | return returnValue; | 813 | return returnValue; |
| 808 | }, | 814 | }, |
| 809 | }, | 815 | }, |
| 810 | }; | 816 | }; |
| 811 | // | 817 | // |