Commit f2328546d05e320b78ec949252fdaf1427ccb6a6
1 parent
1f12ffc558
Exists in
master
new changes
Showing
10 changed files
with
146 additions
and
80 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: 325px; 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: 88px; | 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: 148px; height: 148px; float: left; display: block;} | 147 | .inner-profile-ps{ width: 148px; height: 148px; 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 ;} | 178 | .social-connects li{ float: left; margin-right:0px ;} |
| 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.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} | 181 | .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} |
| 182 | .social-connects li a img{ width: 19px; display: block; float: left;} | 182 | .social-connects li a img{ width: 19px; display: block; float: left;} |
| 183 | .social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; | 183 | .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; |
| 184 | float: left;} | 184 | float: left;} |
| 185 | .connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} | 185 | .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;} |
| 186 | 186 | ||
| 187 | /* profile tab */ | 187 | /* profile tab */ |
| 188 | .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} | 188 | .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} |
| 189 | .top-brd{border-top: 1px solid #DFE7EF;} | 189 | .top-brd{border-top: 1px solid #DFE7EF;} |
| 190 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} | 190 | .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} |
| 191 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} | 191 | .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} |
| 192 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} | 192 | .profile-tab li.active{ border-bottom: 4px solid #ef484f;} |
| 193 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } | 193 | .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } |
| 194 | 194 | ||
| 195 | /* profile data wrp */ | 195 | /* profile data wrp */ |
| 196 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} | 196 | .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} |
| 197 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} | 197 | .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 50px;} |
| 198 | .card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} | 198 | .card-warpper{ width: 340px; padding-bottom: 35px !important; position: relative; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} |
| 199 | .company-detail{ width: 100%; | 199 | .company-detail{ width: 100%; |
| 200 | display: block; | 200 | display: block; |
| 201 | float: left; | 201 | float: left; |
| 202 | position: relative; | 202 | position: relative; |
| 203 | margin-top: -63px; | 203 | margin-top: -63px; |
| 204 | margin-bottom: 21px;} | 204 | margin-bottom: 21px;} |
| 205 | .company-detail .c-logo{ width: 82px; display: block; float: left;} | 205 | .company-detail .c-logo{ width: 82px; display: block; float: left;} |
| 206 | .company-detail .c-logo img{ width: 100%;} | 206 | .company-detail .c-logo img{ width: 100%;} |
| 207 | .company-detail .c-tag img{ width: 100%;} | 207 | .company-detail .c-tag img{ width: 100%;} |
| 208 | .company-detail .c-tag { width: 89px; display: block; float: right;} | 208 | .company-detail .c-tag { width: 89px; display: block; float: right;} |
| 209 | .card-warpper h1{width: 260px; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} | 209 | .card-warpper 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;} |
| 210 | .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;} | 210 | .card-warpper .u-detail{ padding: 15px 0 15px 0; border-bottom:1px solid #a5a5a5; width:260px; display: block; float: left;} |
| 211 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} | 211 | .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} |
| 212 | .card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} | 212 | .card-warpper .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;} |
| 213 | .card-warpper p{ float: left; padding: 12px 0 12px 0; width: 260px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } | 213 | .card-warpper 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; } |
| 214 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} | 214 | .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px; opacity: 0.5;} |
| 215 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} | 215 | .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} |
| 216 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} | 216 | .card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} |
| 217 | /* colors */ | 217 | /* colors */ |
| 218 | .cape-honey{ background: #fde2a3;} | 218 | .cape-honey{ background: #fde2a3;} |
| 219 | .rose-bud{ background: #fba29a;} | 219 | .rose-bud{ background: #fba29a;} |
| 220 | .pattens-blue{ background: #ceeced;} | 220 | .pattens-blue{ background: #ceeced;} |
| 221 | 221 | ||
| 222 | .insight-design{ background: #FBC647;} | 222 | .insight-design{ background: #FBC647;} |
| 223 | .insight-product{ background: #9DDADB;} | 223 | .insight-product{ background: #9DDADB;} |
| 224 | .insight-marketing{ background: #F74536;} | 224 | .insight-marketing{ background: #F74536;} |
| 225 | .insight-pricing{ background: #C1C0FE;} | 225 | .insight-pricing{ background: #C1C0FE;} |
| 226 | .insight-psychology{ background: #477970;} | 226 | .insight-psychology{ background: #477970;} |
| 227 | .no-cursor{ | 227 | .no-cursor{ |
| 228 | cursor: default !important; | 228 | cursor: default !important; |
| 229 | } | 229 | } |
| 230 | .no-underline{ | 230 | .no-underline{ |
| 231 | text-decoration: none !important; | 231 | text-decoration: none !important; |
| 232 | } | 232 | } |
| 233 | .cursor-pointer{ | 233 | .cursor-pointer{ |
| 234 | cursor: pointer !important; | 234 | cursor: pointer !important; |
| 235 | } | 235 | } |
| 236 | /* add new card */ | 236 | /* add new card */ |
| 237 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} | 237 | .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} |
| 238 | .add-card-warpper a{ display: block; | 238 | .add-card-warpper a{ display: block; |
| 239 | width: 86px; | 239 | width: 86px; |
| 240 | margin: 0 auto; | 240 | margin: 0 auto; |
| 241 | margin-top: 92px;} | 241 | margin-top: 92px;} |
| 242 | 242 | ||
| 243 | /* New Profile Buttons */ | 243 | /* New Profile Buttons */ |
| 244 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} | 244 | .profile-buttons{ width: 261px; display: block; margin:0 auto;} |
| 245 | /* button sm */ | 245 | /* button sm */ |
| 246 | .profile-sm-bt{ width: 180px; | 246 | .profile-sm-bt{ width: 180px; |
| 247 | height: 54px; | 247 | height: 54px; |
| 248 | border-radius: 5px; | 248 | border-radius: 5px; |
| 249 | border: 1px solid #514DA7; | 249 | border: 1px solid #514DA7; |
| 250 | color: #514DA7; | 250 | color: #514DA7; |
| 251 | font-size: 16px; | 251 | font-size: 16px; |
| 252 | font-weight: 500; | 252 | font-weight: 500; |
| 253 | display: block; | 253 | display: block; |
| 254 | line-height: 55px; | 254 | line-height: 55px; |
| 255 | text-align: center;} | 255 | text-align: center;} |
| 256 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 256 | .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 257 | /* button md */ | 257 | /* button md */ |
| 258 | .profile-md-bt{ width:233px; | 258 | .profile-md-bt{ width:233px; |
| 259 | height: 54px; | 259 | height: 54px; |
| 260 | border-radius: 5px; | 260 | border-radius: 5px; |
| 261 | border: 1px solid #514DA7; | 261 | border: 1px solid #514DA7; |
| 262 | color: #514DA7; | 262 | color: #514DA7; |
| 263 | font-size: 16px; | 263 | font-size: 16px; |
| 264 | font-weight: 500; | 264 | font-weight: 500; |
| 265 | display: block; | 265 | display: block; |
| 266 | line-height: 55px; | 266 | line-height: 55px; |
| 267 | text-align: center;} | 267 | text-align: center;} |
| 268 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 268 | .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 269 | /* button lg */ | 269 | /* button lg */ |
| 270 | .profile-lg-bt{ width:261px; | 270 | .profile-lg-bt{ width:261px; |
| 271 | height: 54px; | 271 | height: 54px; |
| 272 | border-radius: 5px; | 272 | border-radius: 5px; |
| 273 | border: 1px solid #514DA7; | 273 | border: 1px solid #514DA7; |
| 274 | color: #514DA7; | 274 | color: #514DA7; |
| 275 | font-size: 16px; | 275 | font-size: 16px; |
| 276 | font-weight: 500; | 276 | font-weight: 500; |
| 277 | display: block; | 277 | display: block; |
| 278 | line-height: 55px; | 278 | line-height: 55px; |
| 279 | text-align: center;} | 279 | text-align: center;} |
| 280 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | 280 | .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 281 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} | 281 | .center-and-spc{ margin:0 auto; margin-bottom:15px;} |
| 282 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} | 282 | .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} |
| 283 | /* Replies */ | 283 | /* Replies */ |
| 284 | .replies{ display: block; float: left;} | 284 | .replies{ display: block; float: left;} |
| 285 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} | 285 | .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;} |
| 286 | .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} | 286 | .replies-wrp h1{font-family: 'Bebas Neue', cursive; text-transform: uppercase; font-size: 28px;line-height:33px; font-style: normal; font-weight: 400; color: #000;} |
| 287 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; | 287 | .replies-wrp h1 span{font-family: 'Montserrat', sans-serif; |
| 288 | font-size: 12px; | 288 | font-size: 12px; |
| 289 | font-style: normal; | 289 | font-style: normal; |
| 290 | font-weight: 400; | 290 | font-weight: 400; |
| 291 | line-height: 14px; color:#000; opacity: 0.5;} | 291 | line-height: 14px; color:#000; opacity: 0.5;} |
| 292 | .comment-spc{ margin-left:9px ;} | 292 | .comment-spc{ margin-left:9px ;} |
| 293 | .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} | 293 | .replies-wrp p{ width: 100%; display: block; float: left; font-weight: 500; font-size: 16px; line-height: 22px; color: #000; margin-top: 14px; margin-bottom: 28px;} |
| 294 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} | 294 | .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;} |
| 295 | 295 | ||
| 296 | /* team */ | 296 | /* team */ |
| 297 | .verified-team{ width: 129px; | 297 | .verified-team{ width: 129px; |
| 298 | display: inline-table; | 298 | display: inline-table; |
| 299 | margin-top: 7px; | 299 | margin-top: 7px; |
| 300 | position: absolute; | 300 | position: absolute; |
| 301 | margin-left: 10px;} | 301 | margin-left: 10px;} |
| 302 | .verified-team img{ width: 100%; display: block; float: left;} | 302 | .verified-team img{ width: 100%; display: block; float: left;} |
| 303 | .active-company{ border-bottom: 4px solid #ef484f;} | 303 | .active-company{ border-bottom: 4px solid #ef484f;} |
| 304 | .active-company a{ font-weight: 700 !important;} | 304 | .active-company a{ font-weight: 700 !important;} |
| 305 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} | 305 | .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;} |
| 306 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} | 306 | .active-company a img.c-icon{margin-right: 0px; margin-left:10px;} |
| 307 | .c-social li a img{ width: auto !important;} | 307 | .c-social li a img{ width: auto !important;} |
| 308 | .company-footer{ width: 100%; display: block; float: left;} | 308 | .company-footer{ width: 100%; display: block; float: left;} |
| 309 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} | 309 | .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;} |
| 310 | .company-footer ul li{float: left; margin-right: 10px;} | 310 | .company-footer ul li{float: left; margin-right: 10px;} |
| 311 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} | 311 | .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;} |
| 312 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} | 312 | .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;} |
| 313 | .company-footer .next{float: right; margin-top: -25px; | 313 | .company-footer .next{float: right; margin-top: -25px; |
| 314 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} | 314 | margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;} |
| 315 | .company-footer .next img{ width: 25px; | 315 | .company-footer .next img{ width: 25px; |
| 316 | margin-top: 17px; | 316 | margin-top: 17px; |
| 317 | margin-left: 16px;} | 317 | margin-left: 16px;} |
| 318 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} | 318 | .card-c-space-0{ padding: 0px !important; background-color: transparent !important;} |
| 319 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; | 319 | .c-detail-wrapper{ width: 100%; display: block; float: left; background: #fff; |
| 320 | border-radius: 4px; | 320 | border-radius: 4px; |
| 321 | padding: 23px; } | 321 | padding: 23px; } |
| 322 | /* members */ | 322 | /* members */ |
| 323 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} | 323 | .members-wrp{ width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;} |
| 324 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} | 324 | .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px; border-radius: 50px; margin-right: 67px; margin-bottom: 24px;} |
| 325 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} | 325 | .members-wrp .member-list a{ display: block; float: left; width: 100%;} |
| 326 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} | 326 | .members-wrp .member-list a img{ width: 20%;display:block; float: left;} |
| 327 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} | 327 | .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;} |
| 328 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} | 328 | .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000; margin-top: 13px;} |
| 329 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} | 329 | .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;} |
| 330 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} | 330 | .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;} |
| 331 | .member-describe-list li span{ width: 5px !important; height: 5px !important; background-color: #000; display: block; float: left; float: left; margin-left:unset !important; float: right !important; margin-right: 8px !important; | 331 | .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; |
| 332 | margin-left: 8px !important; | 332 | margin-left: 8px !important; |
| 333 | margin-top: 6px; | 333 | margin-top: 6px; |
| 334 | border-radius: 5px;} | 334 | border-radius: 5px;} |
| 335 | 335 | ||
| 336 | /* popup */ | 336 | /* popup */ |
| 337 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} | 337 | .body-blur{ filter: blur(8px); -webkit-filter: blur(8px);} |
| 338 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} | 338 | .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;} |
| 339 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ | 339 | .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; background-color: #dfe7efab; /* Add the blur effect */ |
| 340 | filter: blur(8px); | 340 | filter: blur(8px); |
| 341 | -webkit-filter: blur(8px);} | 341 | -webkit-filter: blur(8px);} |
| 342 | .popup-set{ width: 530px; | 342 | .popup-set{ width: 530px; |
| 343 | background-color: #fff; | 343 | background-color: #fff; |
| 344 | border-radius: 0 40px 40px 40px; | 344 | border-radius: 0 40px 40px 40px; |
| 345 | padding: 30px; | 345 | padding: 30px; |
| 346 | position: relative; | 346 | position: relative; |
| 347 | margin: 0 auto; | 347 | margin: 0 auto; |
| 348 | margin-top: 80px;} | 348 | margin-top: 80px;} |
| 349 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} | 349 | .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;} |
| 350 | .popup-header img{ width: 109px; display: block; float: left;} | 350 | .popup-header img{ width: 109px; display: block; float: left;} |
| 351 | .popup-header ul{ display: block; | 351 | .popup-header ul{ display: block; |
| 352 | list-style-type: none; | 352 | list-style-type: none; |
| 353 | margin: 0px; | 353 | margin: 0px; |
| 354 | padding: 0px; | 354 | padding: 0px; |
| 355 | margin-top: 75px; | 355 | margin-top: 75px; |
| 356 | margin-left: 20px; | 356 | margin-left: 20px; |
| 357 | float: left;} | 357 | float: left;} |
| 358 | .popup-header ul li{ float: left; margin-right: 31px;} | 358 | .popup-header ul li{ float: left; margin-right: 31px;} |
| 359 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} | 359 | .popup-header ul li a img{ width: 22px !important; float: left; display: block;} |
| 360 | .popup-header ul li a{color:#514DA7;} | 360 | .popup-header ul li a{color:#514DA7;} |
| 361 | .popup-header ul li a span{ display: block; | 361 | .popup-header ul li a span{ display: block; |
| 362 | float: left; | 362 | float: left; |
| 363 | margin-left: 10px; | 363 | margin-left: 10px; |
| 364 | width: 50px; | 364 | width: 50px; |
| 365 | font-size: 14px; | 365 | font-size: 14px; |
| 366 | line-height: 17px; | 366 | line-height: 17px; |
| 367 | margin-top: -10px;} | 367 | margin-top: -10px;} |
| 368 | .popup-body{ width: 100%; | 368 | .popup-body{ width: 100%; |
| 369 | display: block; | 369 | display: block; |
| 370 | float: left; | 370 | float: left; |
| 371 | max-height: 450px; | 371 | max-height: 450px; |
| 372 | overflow-y: auto; | 372 | overflow-y: auto; |
| 373 | padding-right: 16px;} | 373 | padding-right: 16px;} |
| 374 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} | 374 | .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;} |
| 375 | 375 | ||
| 376 | 376 | ||
| 377 | .popup-forms .floating-label label{font-size: 11px; | 377 | .popup-forms .floating-label label{font-size: 11px; |
| 378 | line-height: 19px; | 378 | line-height: 19px; |
| 379 | font-size: 16px; | 379 | font-size: 16px; |
| 380 | font-weight: 400; | 380 | font-weight: 400; |
| 381 | color: #000; | 381 | color: #000; |
| 382 | position: absolute; | 382 | position: absolute; |
| 383 | margin: 0px 10px 0 10px; | 383 | margin: 0px 10px 0 10px; |
| 384 | background: #fff; | 384 | background: #fff; |
| 385 | padding: 0 3px; | 385 | padding: 0 3px; |
| 386 | position: absolute; | 386 | position: absolute; |
| 387 | pointer-events: none; | 387 | pointer-events: none; |
| 388 | top: 15px; opacity: 0.5; | 388 | top: 15px; opacity: 0.5; |
| 389 | transition: 0.2s ease all; | 389 | transition: 0.2s ease all; |
| 390 | -moz-transition: 0.2s ease all; | 390 | -moz-transition: 0.2s ease all; |
| 391 | -webkit-transition: 0.2s ease all; | 391 | -webkit-transition: 0.2s ease all; |
| 392 | } | 392 | } |
| 393 | 393 | ||
| 394 | .popup-forms .floating-label input{ outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} | 394 | .popup-forms .floating-label 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;} |
| 395 | .popup-forms .floating-label select{ outline: none; height: 50px; margin-bottom: 0px; border-radius:5px; padding: 0 10px; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 400; line-height: 19px; color: #808080;} | 395 | .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;} |
| 396 | 396 | ||
| 397 | .popup-forms .floating-input input:focus{ outline: none;} | 397 | .popup-forms .floating-input input:focus{ outline: none;} |
| 398 | .popup-forms .floating-label input:focus~label{ | 398 | .popup-forms .floating-label input:focus~label{ |
| 399 | top: -11px; | 399 | top: -11px; |
| 400 | color: #514DA7; | 400 | color: #514DA7; |
| 401 | font-size: 14px;background:#fff; | 401 | font-size: 14px;background:#fff; |
| 402 | opacity:1; | 402 | opacity:1; |
| 403 | } | 403 | } |
| 404 | .popup-forms .floating-label input:not(:placeholder-shown)~label { | 404 | .popup-forms .floating-label input:not(:placeholder-shown)~label { |
| 405 | position: absolute; | 405 | position: absolute; |
| 406 | top: -11px; | 406 | top: -11px; |
| 407 | background:#fff; | 407 | background:#fff; |
| 408 | 408 | ||
| 409 | font-size: 14px; | 409 | font-size: 14px; |
| 410 | color: #514DA7;opacity:1; | 410 | color: #514DA7;opacity:1; |
| 411 | } | 411 | } |
| 412 | /* textarea */ | 412 | /* textarea */ |
| 413 | .popup-forms .floating-label textarea{ height: 100px; outline: none; background-color: #fff !important; width: 100% !important;border: 1px solid #DFE7EF !important; font-size: 16px; font-weight: 500; line-height: 19px; color: #000;} | 413 | .popup-forms .floating-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;} |
| 414 | .popup-forms .floating-input textarea:focus{ outline: none;} | 414 | .popup-forms .floating-input textarea:focus{ outline: none;} |
| 415 | .popup-forms .floating-label textarea:focus~label{ | 415 | .popup-forms .floating-label textarea:focus~label{ |
| 416 | top: -11px; | 416 | top: -11px; |
| 417 | color: #514DA7; | 417 | color: #514DA7; |
| 418 | font-size: 14px;background:#fff; | 418 | font-size: 14px;background:#fff; |
| 419 | opacity:1; | 419 | opacity:1; |
| 420 | } | 420 | } |
| 421 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { | 421 | .popup-forms .floating-label textarea:not(:placeholder-shown)~label { |
| 422 | position: absolute; | 422 | position: absolute; |
| 423 | top: -11px; | 423 | top: -11px; |
| 424 | background:#fff; | 424 | background:#fff; |
| 425 | 425 | ||
| 426 | font-size: 14px; | 426 | font-size: 14px; |
| 427 | color: #514DA7;opacity:1; | 427 | color: #514DA7;opacity:1; |
| 428 | } | 428 | } |
| 429 | .popup-forms .form-group{ margin-bottom: 20px;} | 429 | .popup-forms .form-group{ margin-bottom: 20px;} |
| 430 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} | 430 | .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;} |
| 431 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} | 431 | .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;} |
| 432 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } | 432 | .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; } |
| 433 | .interests li{ float: left; margin-right: 20px; position: relative;} | 433 | .interests li{ float: left; margin-right: 20px; position: relative;} |
| 434 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; | 434 | .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left; |
| 435 | border-radius: 5px;} | 435 | border-radius: 5px;} |
| 436 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; | 436 | .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left; |
| 437 | border-radius: 5px; background-color: #fff !important; width: 125px;} | 437 | border-radius: 5px; background-color: #fff !important; width: 125px;} |
| 438 | .interests li a{ width: 20px; | 438 | .interests li a{ width: 20px; |
| 439 | display: block; | 439 | display: block; |
| 440 | float: right; | 440 | float: right; |
| 441 | margin: 6px 0px 0 114px; | 441 | margin: 6px 0px 0 114px; |
| 442 | position: absolute;} | 442 | position: absolute;} |
| 443 | /* color codes */ | 443 | /* color codes */ |
| 444 | .silver{background-color: #C4C4C4;} | 444 | .silver{background-color: #C4C4C4;} |
| 445 | .milk-punch{background-color: #FFF6D7;} | 445 | .milk-punch{background-color: #FFF6D7;} |
| 446 | .french-pass{background-color: #BDDBFF;} | 446 | .french-pass{background-color: #BDDBFF;} |
| 447 | .cyan-french-pass{background-color: #C0FAFE;} | 447 | .cyan-french-pass{background-color: #C0FAFE;} |
| 448 | .cosmos{background-color: #FFDBDC;} | 448 | .cosmos{background-color: #FFDBDC;} |
| 449 | .cape-Honey{background-color: #FEE6AC;} | 449 | .cape-Honey{background-color: #FEE6AC;} |
| 450 | .snuff{background-color: #E5DFF0;} | 450 | .snuff{background-color: #E5DFF0;} |
| 451 | .catskillWhite{background-color: #DFE7EF;} | 451 | .catskillWhite{background-color: #DFE7EF;} |
| 452 | .white{background-color: #fff;} | 452 | .white{background-color: #fff;} |
| 453 | /* color codes */ | 453 | /* color codes */ |
| 454 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 454 | .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 455 | .colors li{ display: block; float: left; margin-right: 14px;} | 455 | .colors li{ display: block; float: left; margin-right: 14px;} |
| 456 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} | 456 | .colors li a{ width: 22px; height: 22px; display: block; float: left; border:1px solid #ccc; border-radius: 10px;} |
| 457 | .colors li a.active{border: 2px solid #514DA7;} | 457 | .colors li a.active{border: 2px solid #514DA7;} |
| 458 | .popup-forms .next-bt{ width: 99px; | 458 | .popup-forms .next-bt{ width: 99px; |
| 459 | height: 54px; | 459 | height: 54px; |
| 460 | background: #514DA7; | 460 | background: #514DA7; |
| 461 | display: block; | 461 | display: block; |
| 462 | text-align: center; | 462 | text-align: center; |
| 463 | border-radius: 5px; | 463 | border-radius: 5px; |
| 464 | color: #fff; | 464 | color: #fff; |
| 465 | font-size: 16px; | 465 | font-size: 16px; |
| 466 | line-height: 54px; | 466 | line-height: 54px; |
| 467 | font-weight: 600; | 467 | font-weight: 600; |
| 468 | position: absolute; | 468 | position: absolute; |
| 469 | right: 50px; | 469 | right: 50px; |
| 470 | bottom: -80px;} | 470 | bottom: -80px;} |
| 471 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} | 471 | .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;} |
| 472 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} | 472 | .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;} |
| 473 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; | 473 | .add-socail-ch span{ border-bottom: 2px solid #DFE7EF; |
| 474 | display: block; | 474 | display: block; |
| 475 | width: 270px; | 475 | width: 270px; |
| 476 | float: right; | 476 | float: right; |
| 477 | margin-top: 10px;} | 477 | margin-top: 10px;} |
| 478 | .select-arrow{ display: block; | 478 | .select-arrow{ display: block; |
| 479 | float: right; | 479 | float: right; |
| 480 | position: absolute; | 480 | position: absolute; |
| 481 | top: 13px; | 481 | top: 13px; |
| 482 | right: 17px; | 482 | right: 17px; |
| 483 | background: #fff; | 483 | background: #fff; |
| 484 | width: 31px; | 484 | width: 31px; |
| 485 | height: 17px;} | 485 | height: 17px;} |
| 486 | .select-arrow img{width: 15px;} | 486 | .select-arrow img{width: 15px;} |
| 487 | .popup-forms .save-bt{ width: 150px; | 487 | .popup-forms .save-bt{ width: 150px; |
| 488 | height: 54px; | 488 | height: 54px; |
| 489 | background: #514DA7; | 489 | background: #514DA7; |
| 490 | display: block; | 490 | display: block; |
| 491 | text-align: center; | 491 | text-align: center; |
| 492 | border-radius: 5px; | 492 | border-radius: 5px; |
| 493 | color: #fff; | 493 | color: #fff; |
| 494 | font-size: 16px; | 494 | font-size: 16px; |
| 495 | line-height: 54px; | 495 | line-height: 54px; |
| 496 | font-weight: 600; | 496 | font-weight: 600; |
| 497 | position: absolute; | 497 | position: absolute; |
| 498 | right: 50px; | 498 | right: 50px; |
| 499 | bottom: -80px;} | 499 | bottom: -80px;} |
| 500 | /* insights */ | 500 | /* insights */ |
| 501 | .insights-wrp{ background-image: url(../images/insights-bg.svg); | 501 | .insights-wrp{ background-image: url(../images/insights-bg.svg); |
| 502 | background-color: #DFE7EF; | 502 | background-color: #DFE7EF; |
| 503 | height: 100%; | 503 | height: 100%; |
| 504 | background-repeat: no-repeat; | 504 | background-repeat: no-repeat; |
| 505 | background-position: top center; | 505 | background-position: top center; |
| 506 | background-size: contain; padding: 0 50px 0 100px;} | 506 | background-size: contain; padding: 0 50px 0 100px;} |
| 507 | .insights-profile{width: 32px; | 507 | .insights-profile{width: 32px; |
| 508 | height: 32px; | 508 | height: 32px; |
| 509 | float: right; | 509 | float: right; |
| 510 | display: block; | 510 | display: block; |
| 511 | position: absolute; | 511 | position: absolute; |
| 512 | right: 0;} | 512 | right: 0;} |
| 513 | .insights-searh a{ width: 21px; | 513 | .insights-searh a{ width: 21px; |
| 514 | height: 25px; | 514 | height: 25px; |
| 515 | display: block; | 515 | display: block; |
| 516 | position: absolute; | 516 | position: absolute; |
| 517 | right: 24px; | 517 | right: 24px; |
| 518 | top: 23px;} | 518 | top: 23px;} |
| 519 | .insights-searh a img{ width: 100%;} | 519 | .insights-searh a img{ width: 100%;} |
| 520 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} | 520 | .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;} |
| 521 | .insights-searh input::-webkit-input-placeholder { /* Edge */ | 521 | .insights-searh input::-webkit-input-placeholder { /* Edge */ |
| 522 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 522 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 523 | } | 523 | } |
| 524 | 524 | ||
| 525 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 525 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 526 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 526 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 527 | } | 527 | } |
| 528 | 528 | ||
| 529 | .insights-searh input::placeholder { | 529 | .insights-searh input::placeholder { |
| 530 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 530 | font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 531 | } | 531 | } |
| 532 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} | 532 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} |
| 533 | /* insights 2 */ | 533 | /* insights 2 */ |
| 534 | .back-to-lib{ font-size: 12px; | 534 | .back-to-lib{ font-size: 12px; |
| 535 | line-height: 14px; | 535 | line-height: 14px; |
| 536 | color: #000000; | 536 | color: #000000; |
| 537 | font-weight: 500; | 537 | font-weight: 500; |
| 538 | display: block; | 538 | display: block; |
| 539 | float: left;} | 539 | float: left;} |
| 540 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} | 540 | .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;} |
| 541 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} | 541 | .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;} |
| 542 | .insights-list li{ display: block; float: left;} | 542 | .insights-list li{ display: block; float: left;} |
| 543 | .insights-list li a{ display: block; | 543 | .insights-list li a{ display: block; |
| 544 | float: left; | 544 | float: left; |
| 545 | margin: 0px; | 545 | margin: 0px; |
| 546 | padding: 5px 14px; | 546 | padding: 5px 14px; |
| 547 | background: #70A853; | 547 | background: #70A853; |
| 548 | font-size: 15px;text-transform:uppercase; | 548 | font-size: 15px;text-transform:uppercase; |
| 549 | font-weight: 700; | 549 | font-weight: 700; |
| 550 | font-style: normal; | 550 | font-style: normal; |
| 551 | color: #fff; | 551 | color: #fff; |
| 552 | border-radius: 50px;} | 552 | border-radius: 50px;} |
| 553 | .insights-details{ width: 850px;display:block; float: left;} | 553 | .insights-details{ width: 850px;display:block; float: left;} |
| 554 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} | 554 | .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;} |
| 555 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} | 555 | .features-group h3{ margin-top: 30px; margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;} |
| 556 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} | 556 | .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;} |
| 557 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} | 557 | .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;} |
| 558 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} | 558 | .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;} |
| 559 | .features-group-list li a:hover{ text-decoration: none;} | 559 | .features-group-list li a:hover{ text-decoration: none;} |
| 560 | .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} | 560 | .features-group-list li span{font-size: 10px; line-height: 12px; font-weight: 500; color: #000; opacity: 0.5; width: 100%; display: block; float: left;} |
| 561 | .features-group-list li a img{ width: 9px; } | 561 | .features-group-list li a img{ width: 9px; } |
| 562 | .insights-rply img{ width: 14px;} | 562 | .insights-rply img{ width: 14px;} |
| 563 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} | 563 | .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;} |
| 564 | .insights-rply:hover{color: #70A853;} | 564 | .insights-rply:hover{color: #70A853;} |
| 565 | .active-green{border-bottom: 4px solid #70A853;} | 565 | .active-green{border-bottom: 4px solid #70A853;} |
| 566 | .insights-spc{padding: 0 100px;} | 566 | .insights-spc{padding: 0 100px;} |
| 567 | 567 | ||
| 568 | /* insight page 1 */ | 568 | /* insight page 1 */ |
| 569 | .insights-border{height: 1px; | 569 | .insights-border{height: 1px; |
| 570 | text-align: center; | 570 | text-align: center; |
| 571 | display: block; | 571 | display: block; |
| 572 | background: #FFFFFF; | 572 | background: #FFFFFF; |
| 573 | clear: both; | 573 | clear: both; |
| 574 | width: 100%; | 574 | width: 100%; |
| 575 | margin-top: 30px;} | 575 | margin-top: 30px;} |
| 576 | .insights-border span{ text-align: center; | 576 | .insights-border span{ text-align: center; |
| 577 | position: relative; | 577 | position: relative; |
| 578 | top: -13px; | 578 | top: -13px; |
| 579 | background: #DFE7EF; | 579 | background: #DFE7EF; |
| 580 | margin: 0 11px; | 580 | margin: 0 11px; |
| 581 | padding: 0px 10px;} | 581 | padding: 0px 10px;} |
| 582 | .insights-list-filter{display:table;float:left;width:100%;} | 582 | .insights-list-filter{display:table;float:left;width:100%;} |
| 583 | .insights-list-filter ul{ list-style-type: none; text-align: center; | 583 | .insights-list-filter ul{ list-style-type: none; text-align: center; |
| 584 | margin-top:40px; | 584 | margin-top:40px; |
| 585 | padding: 0px; | 585 | padding: 0px; |
| 586 | display: block; | 586 | display: block; |
| 587 | float: left; | 587 | float: left; |
| 588 | width: 100%;} | 588 | width: 100%;} |
| 589 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} | 589 | .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;} |
| 590 | .insights-list-filter li a{padding: 5px 20px;color: #fff; | 590 | .insights-list-filter li a{padding: 5px 20px;color: #fff; |
| 591 | float: left; | 591 | float: left; |
| 592 | text-transform: uppercase; | 592 | text-transform: uppercase; |
| 593 | line-height: 26px; | 593 | line-height: 26px; |
| 594 | text-align: center; | 594 | text-align: center; |
| 595 | font-weight: 600; | 595 | font-weight: 600; |
| 596 | font-size: 20px; | 596 | font-size: 20px; |
| 597 | border-radius:30px; | 597 | border-radius:30px; |
| 598 | } | 598 | } |
| 599 | .insights-list-filter li a:hover{text-decoration:none;} | 599 | .insights-list-filter li a:hover{text-decoration:none;} |
| 600 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} | 600 | .insights-products{display:block;float:left;width:100%; background-color: #fff;} |
| 601 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} | 601 | .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;} |
| 602 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} | 602 | .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;} |
| 603 | .insights-products p{font-size:15px; margin-bottom: 0px;} | 603 | .insights-products p{font-size:15px; margin-bottom: 0px;} |
| 604 | .insights-products span{float:right;} | 604 | .insights-products span{float:right;} |
| 605 | .insight-mb-spc{margin-bottom:34px;} | 605 | .insight-mb-spc{margin-bottom:34px;} |
| 606 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} | 606 | .insights-searh{ width: 700px; margin: 0 auto; position: relative; margin-top: 110px;} |
| 607 | .insights-products a{ width: 18px; display: block; float: right;} | 607 | .insights-products a{ width: 18px; display: block; float: right;} |
| 608 | 608 | ||
| 609 | /* colors */ | 609 | /* colors */ |
| 610 | .lavender-blue-bg{background:#C1C0FE;} | 610 | .lavender-blue-bg{background:#C1C0FE;} |
| 611 | .golden-tainoi-bg{background:#FBC647;} | 611 | .golden-tainoi-bg{background:#FBC647;} |
| 612 | .red-orange-bg{background:#F74536;} | 612 | .red-orange-bg{background:#F74536;} |
| 613 | .morning-glory-bg{background:#9DDADB;} | 613 | .morning-glory-bg{background:#9DDADB;} |
| 614 | .dark-green-copper-bg{background:#477970;} | 614 | .dark-green-copper-bg{background:#477970;} |
| 615 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} | 615 | .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;} |
| 616 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} | 616 | .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;} |
| 617 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} | 617 | .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;} |
| 618 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} | 618 | .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;} |
| 619 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} | 619 | .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;} |
| 620 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} | 620 | .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;} |
| 621 | .radical-red-col{color:#EF484F;} | 621 | .radical-red-col{color:#EF484F;} |
| 622 | .selective-yellow-col{color:#FABB05;} | 622 | .selective-yellow-col{color:#FABB05;} |
| 623 | .lavender-blue-col{color:#C1C0FE;} | 623 | .lavender-blue-col{color:#C1C0FE;} |
| 624 | .dark-green-copper-col{color:#477970;} | 624 | .dark-green-copper-col{color:#477970;} |
| 625 | .purple-heart-col{color:#673AB7;} | 625 | .purple-heart-col{color:#673AB7;} |
| 626 | .silver-col{color:#C4C4C4;} | 626 | .silver-col{color:#C4C4C4;} |
| 627 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} | 627 | .radical-red-col:hover{color:#EF484F;text-decoration:none;} |
| 628 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} | 628 | .selective-yellow-col:hover{color:#FABB05;text-decoration:none;} |
| 629 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} | 629 | .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;} |
| 630 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} | 630 | .dark-green-copper-col:hover{color:#477970;text-decoration:none;} |
| 631 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} | 631 | .purple-heart-col:hover{color:#673AB7;text-decoration:none;} |
| 632 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} | 632 | .silver-col:hover{color:#C4C4C4;text-decoration:none;} |
| 633 | /* button */ | 633 | /* button */ |
| 634 | .switch-btn { | 634 | .switch-btn { |
| 635 | position: relative; | 635 | position: relative; |
| 636 | display: inline-block; | 636 | display: inline-block; |
| 637 | width: 60px; | 637 | width: 60px; |
| 638 | height: 24px; | 638 | height: 24px; |
| 639 | } | 639 | } |
| 640 | .switch-btn input { | 640 | .switch-btn input { |
| 641 | opacity: 0; | 641 | opacity: 0; |
| 642 | width: 0; | 642 | width: 0; |
| 643 | height: 0; | 643 | height: 0; |
| 644 | } | 644 | } |
| 645 | .rounded-toggle { | 645 | .rounded-toggle { |
| 646 | position: absolute; | 646 | position: absolute; |
| 647 | cursor: pointer; | 647 | cursor: pointer; |
| 648 | top: 0; | 648 | top: 0; |
| 649 | left: 0; | 649 | left: 0; |
| 650 | right: 0; | 650 | right: 0; |
| 651 | bottom: 0; | 651 | bottom: 0; |
| 652 | background: #DFE7EF; | 652 | background: #DFE7EF; |
| 653 | -webkit-transition: .4s; | 653 | -webkit-transition: .4s; |
| 654 | transition: .4s; | 654 | transition: .4s; |
| 655 | border-radius: 34px; | 655 | border-radius: 34px; |
| 656 | } | 656 | } |
| 657 | .rounded-toggle:before { | 657 | .rounded-toggle:before { |
| 658 | position: absolute; | 658 | position: absolute; |
| 659 | content: ""; | 659 | content: ""; |
| 660 | height: 14px; | 660 | height: 14px; |
| 661 | width: 13px; | 661 | width: 13px; |
| 662 | left: 10px; | 662 | left: 10px; |
| 663 | bottom: 5px; | 663 | bottom: 5px; |
| 664 | background-color: #514DA7; | 664 | background-color: #514DA7; |
| 665 | -webkit-transition: .4s; | 665 | -webkit-transition: .4s; |
| 666 | transition: .4s; | 666 | transition: .4s; |
| 667 | border-radius: 50%; | 667 | border-radius: 50%; |
| 668 | } | 668 | } |
| 669 | .toggle-btn:checked + .rounded-toggle { | 669 | .toggle-btn:checked + .rounded-toggle { |
| 670 | background: #DFE7EF; | 670 | background: #DFE7EF; |
| 671 | } | 671 | } |
| 672 | 672 | ||
| 673 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} | 673 | .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;} |
| 674 | .toggle-btn:focus + .rounded-toggle{ | 674 | .toggle-btn:focus + .rounded-toggle{ |
| 675 | box-shadow: 0 0 1px #2196F3; | 675 | box-shadow: 0 0 1px #2196F3; |
| 676 | } | 676 | } |
| 677 | .toggle-btn:checked + .rounded-toggle:before { | 677 | .toggle-btn:checked + .rounded-toggle:before { |
| 678 | -webkit-transform: translateX(26px); | 678 | -webkit-transform: translateX(26px); |
| 679 | -ms-transform: translateX(26px); | 679 | -ms-transform: translateX(26px); |
| 680 | transform: translateX(26px); | 680 | transform: translateX(26px); |
| 681 | } | 681 | } |
| 682 | .switch-bt-wrp{margin-top: 15px; width: 111px; | 682 | .switch-bt-wrp{margin-top: 15px; width: 111px; |
| 683 | float: right; | 683 | float: right; |
| 684 | text-align: right; } | 684 | text-align: right; } |
| 685 | .switch-btn{float: left ;} | 685 | .switch-btn{float: left ;} |
| 686 | .onoff{ margin-top: -3px; float: right;} | 686 | .onoff{ margin-top: -3px; float: right;} |
| 687 | 687 | ||
| 688 | /* intro Episode */ | 688 | /* intro Episode */ |
| 689 | .episode-intro{ padding: 0 50px 0 30px; height: 100%;} | 689 | .episode-intro{ padding: 0 30px 0 30px; height: 100%;} |
| 690 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; | 690 | .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7; position: absolute; |
| 691 | bottom: 50px; z-index: 2; | 691 | bottom: 50px; z-index: 2; |
| 692 | right: 0; | 692 | right: 0; |
| 693 | left: 0;} | 693 | left: 0;} |
| 694 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} | 694 | .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;} |
| 695 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; | 695 | .bottom-startup .logo-wrp a{ width: 100px; margin:0 auto; |
| 696 | display: block; margin-top: 28px; | 696 | display: block; margin-top: 28px; |
| 697 | } | 697 | } |
| 698 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} | 698 | .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;} |
| 699 | .bottom-startup .logo-wrp a span{ font-weight: 400; font-size:13px; line-height: 25px; letter-spacing: -0.54px; width: 100%; display: block; float: left; text-align: center; color: #514DA7;} | 699 | .bottom-startup .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;} |
| 700 | .bottom-startup .title{ font-size: 48px; | 700 | .bottom-startup .title{ font-size: 48px; |
| 701 | font-family: 'Zuume'; | 701 | font-family: 'Zuume'; |
| 702 | font-weight: 400; | 702 | font-weight: 400; |
| 703 | line-height: 144px; | 703 | line-height: 144px; |
| 704 | color: #514DA7; | 704 | color: #514DA7; |
| 705 | width: 440px; | 705 | width: 440px; |
| 706 | height: 100%; float: left; | 706 | height: 100%; float: left; |
| 707 | border-right: 0.8px solid #514DA7; | 707 | border-right: 0.8px solid #514DA7; |
| 708 | text-align: center;} | 708 | text-align: center;} |
| 709 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; | 709 | .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left; border-right: 0.8px solid #514DA7; color: #514DA7; |
| 710 | } | 710 | } |
| 711 | .bottom-startup .author-sec .top{ width: 100%; | 711 | .bottom-startup .author-sec .top{ width: 100%; |
| 712 | display: block; | 712 | display: block; |
| 713 | float: left; | 713 | float: left; |
| 714 | padding: 20px 10px 10px 10px; | 714 | padding: 20px 10px 10px 10px; |
| 715 | height: 72px;} | 715 | height: 72px;} |
| 716 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 716 | .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 717 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; | 717 | .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px; |
| 718 | font-family: 'Zuume'; | 718 | font-family: 'Zuume'; |
| 719 | font-weight: 400;} | 719 | font-weight: 400;} |
| 720 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; | 720 | .bottom-startup .author-sec .bottom{ width: 100%; height: 100%; |
| 721 | border-top: 0.8px solid #514DA7; | 721 | border-top: 0.8px solid #514DA7; |
| 722 | display: block; | 722 | display: block; |
| 723 | float: left; | 723 | float: left; |
| 724 | padding: 0px 10px 0px 10px; | 724 | padding: 0px 10px 0px 10px; |
| 725 | height: 72px;} | 725 | height: 72px;} |
| 726 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} | 726 | .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%; border-right: 0.8px solid #514DA7; padding-top: 20px;} |
| 727 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} | 727 | .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;} |
| 728 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} | 728 | .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;} |
| 729 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; | 729 | .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px; |
| 730 | font-family: 'Zuume'; | 730 | font-family: 'Zuume'; |
| 731 | font-weight: 400;} | 731 | font-weight: 400;} |
| 732 | .bottom-startup .author-sec.info{ width: 90px;} | 732 | .bottom-startup .author-sec.info{ width: 90px;} |
| 733 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } | 733 | .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; } |
| 734 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} | 734 | .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;} |
| 735 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} | 735 | .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;} |
| 736 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} | 736 | .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%; padding-top: 48px;} |
| 737 | .bottom-startup .start a span{ font-size: 12px; line-height: 14px;letter-spacing:2px; font-weight: 600; text-align: center; width: 100%; display: block; float: left; text-transform: uppercase; color: #514DA7;} | 737 | .bottom-startup .start a 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;} |
| 738 | .bottom-startup .start a img{ width: 24px; | 738 | .bottom-startup .start a img{ width: 24px; |
| 739 | display: block; | 739 | display: block; |
| 740 | margin: 0 auto; | 740 | margin: 0 auto; |
| 741 | margin-bottom: 10px;} | 741 | margin-bottom: 10px;} |
| 742 | 742 | ||
| 743 | /* compare */ | 743 | /* compare */ |
| 744 | .compare-c{ width: 475px; | 744 | .compare-c{ width: 475px; |
| 745 | display: block; | 745 | display: block; |
| 746 | margin: 0 auto; | 746 | margin: 0 auto; |
| 747 | bottom: 50%; | 747 | bottom: 50%; |
| 748 | position: absolute; | 748 | position: absolute; |
| 749 | left: 0; | 749 | left: 0; |
| 750 | right: 0; | 750 | right: 0; |
| 751 | z-index: 2;} | 751 | z-index: 2;} |
| 752 | .compare-c .logo-1{ width: 200px; display: block; float: left;} | 752 | .compare-c .logo-1{ width: 200px; display: block; float: left;} |
| 753 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; | 753 | .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F; text-align: center; |
| 754 | margin-top: 25px;} | 754 | margin-top: 25px;} |
| 755 | .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} | 755 | .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;} |
| 756 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} | 756 | .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden;} |
| 757 | .epi-bg{ position: absolute; | 757 | .epi-bg{ position: absolute; |
| 758 | bottom: -152px; | 758 | bottom: -152px; |
| 759 | left: 18%; width: 1920px; | 759 | left: 18%; width: 1920px; |
| 760 | z-index: 1;} | 760 | z-index: 1;} |
| 761 | /* intro startup */ | 761 | /* intro startup */ |
| 762 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } | 762 | .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; } |
| 763 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } | 763 | .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; } |
| 764 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} | 764 | .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;} |
| 765 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } | 765 | .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; } |
| 766 | .intro-startup .footer-bottom ul li{ height: 5px; | 766 | .intro-startup .footer-bottom ul li{ height: 5px; |
| 767 | display: block; | 767 | display: block; |
| 768 | float: left; | 768 | float: left; |
| 769 | width: 49%; | 769 | width: 49%; |
| 770 | background: #fff;} | 770 | background: #fff;} |
| 771 | .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} | 771 | .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left; padding: 0 50px; height: 75px;} |
| 772 | .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } | 772 | .intro-startup .footer-top .top-intro-bt{ width: 215px; display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; } |
| 773 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} | 773 | .intro-startup .footer-top .top-intro-bt li{display: block; float: left;} |
| 774 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} | 774 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;} |
| 775 | .intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 10px; display: block; float: left;} | 775 | .intro-startup .footer-top .top-intro-bt li a{ height: 39px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 26px; padding: 6px 10px; display: block; float: left;} |
| 776 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 4px;} | 776 | .intro-startup .footer-top .top-intro-bt li a img{ width: 10px; display: block;float: left;margin-top: 8px; margin-right: 6px;} |
| 777 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} | 777 | .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;} |
| 778 | .smasung-g-10wrp{ width: 404px; display: block; height: 695px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; | 778 | .smasung-g-10wrp{ width: 404px; display: block; height: 721px; position: absolute; border: 1px solid #000000; border-radius: 45px 45px 0 0; left: 0; |
| 779 | right: 0; | 779 | right: 0; |
| 780 | margin: 0 auto; | 780 | margin: 0 auto; |
| 781 | bottom: 0; | 781 | bottom: 0; |
| 782 | top: unset; | 782 | top: unset; |
| 783 | background-position: bottom;} | 783 | background-position: bottom;} |
| 784 | .samsung-compare-c{ width: 382px; | 784 | .samsung-compare-c{ width: 382px; |
| 785 | display: block; | 785 | display: block; |
| 786 | margin: 0 auto; | 786 | margin: 0 auto; |
| 787 | position: absolute; | 787 | position: absolute; |
| 788 | top: 21px; | 788 | top: 13px; |
| 789 | left: 0; | 789 | left: 0; |
| 790 | right: 0; | 790 | right: 0; overflow: hidden; |
| 791 | height: 671px; | 791 | height: 702px;} |
| 792 | overflow: hidden;} | ||
| 793 | .samsung-compare-c img{ width: 100%;} | 792 | .samsung-compare-c img{ width: 100%;} |
| 794 | .samsung-compare-c .vs{ width: 100%; display: block; float: left; text-align:center; color: #EF484F; font-size: 12px; line-height: 15px; font-weight: 700; margin: 27px 0 14px 0;} | 793 | .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;} |
| 795 | 794 | ||
| 796 | /* comment wrapper */ | 795 | /* comment wrapper */ |
| 797 | .smasung-g-10wrp .comment-box{ width: 428px; | 796 | .smasung-g-10wrp .comment-box{ width: 428px; |
| 798 | display: block; | 797 | display: block; |
| 799 | float: left; right: -394px; | 798 | float: left; right: -394px; |
| 800 | position: absolute; | 799 | position: absolute; |
| 801 | bottom: 50px;} | 800 | bottom: 100px;} |
| 802 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; | 801 | .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left; |
| 803 | border: 1px solid #201E6A; | 802 | border: 1px solid #201E6A; |
| 804 | box-sizing: border-box; | 803 | box-sizing: border-box; |
| 805 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 804 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 806 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} | 805 | border-radius: 25px 25px 0px 25px; margin-bottom: 15px;} |
| 807 | .comment-box-s-1 p{font-size: 21px; opacity: 0.9; line-height: 28px; font-weight: 500; color: #332B3C; width: 100%; float: left; display: block; margin: 0px; padding: 15px;} | 806 | .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;} |
| 808 | .comment-box-s-1 .footer{background: #F7F9FB; | 807 | .comment-box-s-1 .footer{background: #F7F9FB; |
| 809 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; | 808 | border-top: 1px solid #000000; display: block; float: left; width: 100%; padding: 15px; |
| 810 | box-sizing: border-box; | 809 | box-sizing: border-box; |
| 811 | border-radius: 0px 0px 0px 25px;} | 810 | border-radius: 0px 0px 0px 25px;} |
| 812 | .comment-box-s-1 .footer a{color: #514DA7; font-weight: 700; margin-top:3px; font-size: 15px; line-height: 18px; text-transform: uppercase; float: left;} | 811 | .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;} |
| 813 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} | 812 | .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;} |
| 814 | .key-arrow{ width: 50px; float: left; margin-top:5px;} | 813 | .key-arrow{ width: 50px; float: left; margin-top:5px;} |
| 815 | .comment-w-397{ width: 397px; float: right;} | 814 | .comment-w-397{ width: 397px; float: right;} |
| 816 | .comment-box .user-photo{ width: 200px; display: block; float: right;} | 815 | .comment-box .user-photo{ width: 200px; display: block; float: right;} |
| 817 | .spot-light-top{ width: 927px; | 816 | .spot-light-top{ width: 927px; |
| 818 | height: 100%; position: absolute; | 817 | height: 100%; position: absolute; |
| 819 | top: 0px; | 818 | top: 0px; |
| 820 | overflow: hidden; | 819 | overflow: hidden; |
| 821 | left: -350px; | 820 | left: -350px; |
| 822 | right: 0; | 821 | right: 0; |
| 823 | margin: 0 auto; } | 822 | margin: 0 auto; } |
| 824 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); | 823 | .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5); |
| 825 | border: 1px solid #000000; | 824 | border: 1px solid #000000; |
| 826 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} | 825 | box-sizing: border-box; position: absolute; right: 0px; top: 198px;} |
| 827 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; | 826 | .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000; box-sizing: border-box; border-radius: 100px; margin: 0 auto; |
| 828 | margin-top: -63px;} | 827 | margin-top: -63px;} |
| 829 | .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;} | 828 | .app-discovery .top-user img{ width:57px; display: block; margin:0 auto; margin-top: 45px;} |
| 830 | .app-discovery h1{font-size: 60px; | 829 | .app-discovery h1{font-size: 60px; |
| 831 | font-family: 'Zuume'; margin-top: 136px; | 830 | font-family: 'Zuume'; margin-top: 136px; |
| 832 | font-weight: 400; | 831 | font-weight: 400; |
| 833 | line-height: 66px; width: 100%; display: block; text-align: center; | 832 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 834 | color: #000;} | 833 | color: #000;} |
| 835 | .app-discovery h2{font-size: 60px; | 834 | .app-discovery h2{font-size: 60px; |
| 836 | font-family: 'Zuume'; | 835 | font-family: 'Zuume'; |
| 837 | font-weight: 300; | 836 | font-weight: 300; |
| 838 | line-height: 66px; width: 100%; display: block; text-align: center; | 837 | line-height: 66px; width: 100%; display: block; text-align: center; |
| 839 | color: #000;} | 838 | color: #000;} |
| 840 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} | 839 | .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;} |
| 841 | .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;} | 840 | .popcorn-set{ position: absolute; width: 120px; display: block; right: 440px; bottom: 0;} |
| 842 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } | 841 | .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat; } |
| 843 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} | 842 | .intro-startup .footer-bottom ul li.active{ background: #514DA7;} |
| 844 | .ft-comments-group{display: block; | 843 | .ft-comments-group{display: block; |
| 845 | float: left; | 844 | float: left; |
| 846 | padding-top: 23px; width: 100%; | 845 | padding-top: 23px; width: 100%; |
| 847 | height: 100%; padding-right: 15px; | 846 | height: 100%; padding-right: 15px; |
| 848 | } | 847 | } |
| 849 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} | 848 | .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;} |
| 850 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} | 849 | .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;} |
| 851 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} | 850 | .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;} |
| 852 | .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;} | 851 | .ft-comments-group .comments-photos li:nth-child(1){ width: 21px; margin-top: 2px !important;} |
| 853 | .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;} | 852 | .ft-comments-group .comments-photos li:nth-child(2){ width: 26px; margin-top: 3px !important;} |
| 854 | .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;} | 853 | .ft-comments-group .comments-photos li:nth-child(3){ width: 31px;} |
| 855 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } | 854 | .ft-comments-group .comments-detail{display: block; float: left; width: 100%; padding-right: 30px; } |
| 856 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} | 855 | .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;} |
| 857 | .ft-comments-group .comments-detail p{ margin-top: 2px; | 856 | .ft-comments-group .comments-detail p{ margin-top: 2px; |
| 858 | font-size: 12px; | 857 | font-size: 12px; |
| 859 | line-height: 14px; | 858 | line-height: 14px; |
| 860 | font-weight: 400; | 859 | font-weight: 400; |
| 861 | color: #000000; | 860 | color: #000000; |
| 862 | margin-bottom: 0px; | 861 | margin-bottom: 0px; |
| 863 | width: 100%; | 862 | width: 100%; |
| 864 | display: block; | 863 | display: block; |
| 865 | float: left;} | 864 | float: left;} |
| 866 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} | 865 | .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; display: block; float: right;} |
| 867 | .white-bg{ background-color: #fff;} | 866 | .white-bg{ background-color: #fff;} |
| 868 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} | 867 | .comment-frm{ display: block; float: right; width: 100%; margin-top: 25px;} |
| 869 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } | 868 | .comment-frm .frm-wdth{ width: 100%; display: block; float: left; } |
| 870 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } | 869 | .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; } |
| 871 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ | 870 | .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */ |
| 872 | color: #514DA7; font-size: 12px; line-height: 14px; | 871 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 873 | } | 872 | } |
| 874 | 873 | ||
| 875 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 874 | .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 876 | color: #514DA7; font-size: 12px; line-height: 14px; | 875 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 877 | } | 876 | } |
| 878 | 877 | ||
| 879 | .comment-frm .frm-wdth input::placeholder { | 878 | .comment-frm .frm-wdth input::placeholder { |
| 880 | color: #514DA7; font-size: 12px; line-height: 14px; | 879 | color: #514DA7; font-size: 12px; line-height: 14px; |
| 881 | } | 880 | } |
| 882 | .comment-frm .add-comment{background: #514DA7; | 881 | .comment-frm .add-comment{background: #514DA7; |
| 883 | border-radius: 5px; | 882 | border-radius: 5px; |
| 884 | font-size: 13px; | 883 | font-size: 13px; |
| 885 | line-height: 29px; | 884 | line-height: 29px; |
| 886 | color: #fff; | 885 | color: #fff; |
| 887 | padding: 5px 10px; | 886 | padding: 5px 10px; |
| 888 | display: block; | 887 | display: block; |
| 889 | width:111px; | 888 | width:111px; |
| 890 | float: right; text-align: center; | 889 | float: right; text-align: center; |
| 891 | height: 39px; | 890 | height: 39px; |
| 892 | } | 891 | } |
| 893 | .comment-frm .add-comment img{ width: 14px; | 892 | .comment-frm .add-comment img{ width: 14px; |
| 894 | 893 | ||
| 895 | } | 894 | } |
| 896 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} | 895 | .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;} |
| 897 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} | 896 | .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;} |
| 898 | .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} | 897 | .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;} |
| 899 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; | 898 | .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative; |
| 900 | border: 1px solid #201E6A; | 899 | border: 1px solid #201E6A; |
| 901 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); | 900 | box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743); |
| 902 | border-radius: 25px 25px 25px 0px; } | 901 | border-radius: 25px 25px 25px 0px; } |
| 903 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} | 902 | .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;} |
| 904 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} | 903 | .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;} |
| 905 | .rly-comment-set li{ float: left; margin-right: 15px;} | 904 | .rly-comment-set li{ float: left; margin-right: 15px;} |
| 906 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} | 905 | .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;} |
| 907 | .rly-comment-set li img{ width: 13px; | 906 | .rly-comment-set li img{ width: 13px; |
| 908 | float: left; | 907 | float: left; |
| 909 | display: block; | 908 | display: block; |
| 910 | margin-top: 8px; | 909 | margin-top: 8px; |
| 911 | margin-right: 6px;} | 910 | margin-right: 6px;} |
| 912 | .comments-a-wrp{ width: 629px; | 911 | .comments-a-wrp{ width: 629px; |
| 913 | display: block; | 912 | display: block; |
| 914 | float: right; | 913 | float: right; |
| 915 | position: absolute; | 914 | position: absolute; |
| 916 | bottom: 160px; | 915 | bottom: 160px; |
| 917 | right: 0;} | 916 | right: 0;} |
| 918 | /* thnaks Wrapper */ | 917 | /* thnaks Wrapper */ |
| 919 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} | 918 | .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;} |
| 920 | .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } | 919 | .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px; position: relative; } |
| 921 | .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} | 920 | .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: -307px; width: 306px;} |
| 922 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; | 921 | .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C; |
| 923 | box-sizing: border-box; | 922 | box-sizing: border-box; |
| 924 | border-radius: 15px; position: relative; | 923 | border-radius: 15px; position: relative; |
| 925 | z-index: 2;} | 924 | z-index: 2;} |
| 926 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; | 925 | .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px; |
| 927 | margin: 0 auto; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 26px; line-height: 31px; color: #fff; text-align: center;} | 926 | 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;} |
| 928 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} | 927 | .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;} |
| 929 | .thanks-pay-wrp ul{ display: block; | 928 | .thanks-pay-wrp ul{ display: block; |
| 930 | margin-top: 50px; | 929 | margin-top: 50px; |
| 931 | margin: 32px 0 0 67px; | 930 | margin: 32px 0 0 67px; |
| 932 | padding: 0px; | 931 | padding: 0px; |
| 933 | list-style-type: none; | 932 | list-style-type: none; |
| 934 | width: 370px; | 933 | width: 370px; |
| 935 | float: left;} | 934 | float: left;} |
| 936 | .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} | 935 | .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;} |
| 937 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} | 936 | .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;} |
| 938 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} | 937 | .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;} |
| 939 | .thanks-pay-wrp ul li a span img{ width: 8px; | 938 | .thanks-pay-wrp ul li a span img{ width: 8px; |
| 940 | display: block; | 939 | display: block; |
| 941 | float: left; | 940 | float: left; |
| 942 | margin-left: 3px; | 941 | margin-left: 3px; |
| 943 | margin-top: 4px; | 942 | margin-top: 4px; |
| 944 | margin-right: 5px;} | 943 | margin-right: 5px;} |
| 945 | .thanks-pay-wrp ul li a span{ font-size: 10px; | 944 | .thanks-pay-wrp ul li a span{ font-size: 10px; |
| 946 | line-height: 13px; | 945 | line-height: 13px; |
| 947 | color: #06034C; | 946 | color: #06034C; |
| 948 | width: 100%; | 947 | width: 100%; |
| 949 | display: block; | 948 | display: block; |
| 950 | float: left; | 949 | float: left; |
| 951 | margin-top: 4px;} | 950 | margin-top: 4px;} |
| 952 | .payments-spc-57{ margin:0 76px;} | 951 | .payments-spc-57{ margin:0 76px;} |
| 953 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} | 952 | .payment-spot-light-bt{ position: absolute; left: 0; width: 708px; bottom: -85px;} |
| 954 | .thanks-r-section{ width: 444px; | 953 | .thanks-r-section{ width: 444px; |
| 955 | display: block; | 954 | display: block; |
| 956 | float: right; | 955 | float: right; |
| 957 | position: absolute; | 956 | position: absolute; |
| 958 | right: 0; | 957 | right: 0; |
| 959 | bottom: 70px;} | 958 | bottom: 70px;} |
| 960 | .logo-common-wrp { | 959 | .logo-common-wrp { |
| 961 | width: 101px; | 960 | width: 101px; |
| 962 | display: block; | 961 | display: block; |
| 963 | margin: 0 auto; | 962 | margin: 0 auto; |
| 964 | } | 963 | } |
| 965 | .logo-common-wrp a{ width: 100%; display: block;} | 964 | .logo-common-wrp a{ width: 100%; display: block;} |
| 966 | .logo-common-wrp a span{ width: 100%; display: block; float: left; text-align: center; color: #514DA7; font-size: 13px; line-height: 25px; letter-spacing: -0.54px; font-weight: 400;} | 965 | .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;} |
| 967 | .thanks-r-section p{ font-size: 18px; line-height: 25px; font-weight: 400; color: #000000; margin:15px 0 20px 0; width: 100%; display: block; float: left; text-align: center;} | 966 | .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;} |
| 968 | .back-bt{ width: 200px; height: 54px; margin: 0 auto; position: relative; display: block; text-align: center; font-size: 18px; line-height: 54px; color: #000; background-color: #fff;} | 967 | .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;} |
| 969 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 968 | .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 970 | left: -10px; | 969 | left: -10px; |
| 971 | top: -10px;} | 970 | top: -10px;} |
| 972 | .back-bt img{ width: 20px; margin-right: 5px;} | 971 | .back-bt img{ width: 20px; margin-right: 5px;} |
| 973 | .back-bt:hover{ text-decoration: none; color:#514DA7;} | 972 | .back-bt:hover{ text-decoration: none; color:#514DA7;} |
| 974 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 973 | .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 975 | left: -10px; | 974 | left: -10px; |
| 976 | bottom: -10px;} | 975 | bottom: -10px;} |
| 977 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 976 | .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 978 | right: -10px; | 977 | right: -10px; |
| 979 | bottom: -10px;} | 978 | bottom: -10px;} |
| 980 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; | 979 | .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF; position: absolute; |
| 981 | right: -10px; | 980 | right: -10px; |
| 982 | top: -10px;} | 981 | top: -10px;} |
| 983 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; | 982 | .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000; |
| 984 | box-sizing: border-box; margin-top: 25px;} | 983 | box-sizing: border-box; margin-top: 25px;} |
| 985 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} | 984 | .rating-section li{ width: 100%; display: block; float: left; padding: 15px;} |
| 986 | .rating-section li p{ font-size: 14px; margin-top:0px ; line-height: 25px; color: #000000; width: 281px; float: left; text-align: left; display: block; margin-bottom: 0px;} | 985 | .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;} |
| 987 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; | 986 | .rating-section li .publish{width: 82px; height: 33px; background: #514DA7; |
| 988 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} | 987 | border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;} |
| 989 | .rating-section li p.wdth{ width: 154px;} | 988 | .rating-section li p.wdth{ width: 154px;} |
| 990 | .rating-list{ display: block; float: right;} | 989 | .rating-list{ display: block; float: right;} |
| 991 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} | 990 | .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;} |
| 992 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} | 991 | .rating-section li:first-child{ border-bottom: 1px solid #000000;} |
| 993 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} | 992 | .follow-us-py{width: 100%; display: block; float: left; padding:15px;} |
| 994 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} | 993 | .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;} |
| 995 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} | 994 | .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;} |
| 996 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} | 995 | .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;} |
| 997 | .p-follows li a{ width: 100%; display: block; float: left;} | 996 | .p-follows li a{ width: 100%; display: block; float: left;} |
| 998 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} | 997 | .p-users{ width: 108%; display: block; float: left; margin-top: 40px;} |
| 999 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } | 998 | .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; } |
| 1000 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} | 999 | .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px; margin-bottom: -6px;} |
| 1001 | /* single mobile */ | 1000 | /* single mobile */ |
| 1002 | .single-mobileInsight{ width: 441px; display: block; height: 730px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0; | 1001 | .single-mobileInsight{ width: 404px; display: block; height: 721px;position: absolute;border: 1px solid #000000;border-radius: 45px 45px 0 0; left: 0; |
| 1003 | right: 0; | 1002 | right: 0; |
| 1004 | margin: 0 auto; | 1003 | margin: 0 auto; |
| 1005 | bottom: 0; | 1004 | bottom: 0; |
| 1006 | top: unset;} | 1005 | top: unset;} |
| 1007 | .slide-img{ width: 402px; | 1006 | .slide-img{ width: 402px; |
| 1008 | position: absolute; | 1007 | position: absolute; |
| 1009 | bottom: 1px; | 1008 | bottom: 1px; |
| 1010 | left: 0; | 1009 | left: 0; |
| 1011 | right: 0; | 1010 | right: 0; |
| 1012 | margin: 0 auto;} | 1011 | margin: 0 auto;} |
| 1013 | 1012 | ||
| 1014 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; | 1013 | .single-m-Insight-comments{ width: 423px; display: block; position: absolute; |
| 1015 | top: 294px; | 1014 | top: 294px; |
| 1016 | right: -357px;} | 1015 | right: -357px;} |
| 1017 | .single-left-Insight-comments{position: absolute; | 1016 | .single-left-Insight-comments{position: absolute; |
| 1018 | width: 423px; | 1017 | width: 423px; |
| 1019 | display: block; | 1018 | display: block; |
| 1020 | top: 0; | 1019 | top: 0; |
| 1021 | left: -332px;} | 1020 | left: -332px;} |
| 1022 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; | 1021 | .author-thoughts{ width: 236px; display: block; float: left; margin-left: 70px; |
| 1023 | margin-bottom: -20px;} | 1022 | margin-bottom: -20px;} |
| 1024 | .custom-c-style{border-radius:0px 25px 25px 25px;} | 1023 | .custom-c-style{border-radius:0px 25px 25px 25px;} |
| 1025 | .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000; | 1024 | .mobile-screen-one{ width: 404px; display: block;height:721px;position: absolute; border: 1px solid #000000; |
| 1026 | border-radius: 45px 45px 0 0; | 1025 | border-radius: 45px 45px 0 0; |
| 1027 | bottom: 0; | 1026 | bottom: 0; |
| 1028 | top: unset; | 1027 | top: unset; |
| 1029 | background-position: bottom;} | 1028 | background-position: bottom;} |
| 1030 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} | 1029 | .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; margin-top: 15px;} |
| 1031 | .m-screen-comments{ width: 370px; | 1030 | .m-screen-comments{ width: 370px; |
| 1032 | display: block; | 1031 | display: block; |
| 1033 | position: absolute; | 1032 | position: absolute; |
| 1034 | left: 0; | 1033 | left: 0; |
| 1035 | z-index: 1; | 1034 | z-index: 1; |
| 1036 | margin-left: -230px; | 1035 | margin-left: -230px; |
| 1037 | margin-top: 50px;} | 1036 | margin-top: 50px;} |
| 1038 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} | 1037 | .user-photo-bottom{ width: 127px;display: block; position: absolute; bottom: 76px; left: -110px;} |
| 1039 | .p-left{ left: 0;} | 1038 | .p-left{ left: 0;} |
| 1040 | .p-right{ right: 0;} | 1039 | .p-right{ right: 0;} |
| 1041 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 792px; height: 100%; bottom: 2px;} | 1040 | .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 840px; height: 100%; bottom: 2px;} |
| 1042 | .m-screen-right { | 1041 | .m-screen-right { |
| 1043 | width: 370px; | 1042 | width: 370px; |
| 1044 | display: block; | 1043 | display: block; |
| 1045 | position: absolute; | 1044 | position: absolute; |
| 1046 | right: 0; | 1045 | right: 0; |
| 1047 | z-index: 1; | 1046 | z-index: 1; |
| 1048 | margin-right: -207px; | 1047 | margin-right: -207px; |
| 1049 | margin-top: 50px; | 1048 | margin-top: 50px; |
| 1050 | } | 1049 | } |
| 1051 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; | 1050 | .user-photo-bottom-r{ width: 127px;display: block; position: absolute; right: -128px; |
| 1052 | bottom: 125px;} | 1051 | bottom: 125px;} |
| 1053 | /* no comments */ | 1052 | /* no comments */ |
| 1054 | .no-comment-count{ width: 100%;} | 1053 | .no-comment-count{ width: 100%;} |
| 1055 | 1054 | ||
| 1056 | 1055 | ||
| 1057 | 1056 | ||
| 1058 | .no-comments-img{ width: 40px; display: block; float: left;} | 1057 | .no-comments-img{ width: 40px; display: block; float: left;} |
| 1059 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} | 1058 | .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;} |
| 1060 | .h-100p{ height: 100%;} | 1059 | .h-100p{ height: 100%;} |
| 1061 | .bord-r{ border-right: 1px solid #A8C2DC;} | 1060 | .bord-r{ border-right: 1px solid #A8C2DC;} |
| 1062 | .ft-comments-group .comments-detail{ position: absolute; | 1061 | .ft-comments-group .comments-detail{ position: absolute; |
| 1063 | padding-left: 50px;} | 1062 | padding-left: 50px;} |
| 1064 | .c-with-photos{ display: block; float: left; margin-left: -120px;} | 1063 | .c-with-photos{ display: block; float: left; margin-left: -120px;} |
| 1065 | .addfrm-spc{ padding-right: 50px;} | 1064 | .addfrm-spc{ padding-right: 50px;} |
| 1066 | .c-product-insight-wrp{ width: 350px; | 1065 | .c-product-insight-wrp{ width: 350px; |
| 1067 | display: block; | 1066 | display: block; |
| 1068 | float: right; | 1067 | float: right; |
| 1069 | position: absolute; | 1068 | position: absolute; |
| 1070 | top: unset; | 1069 | top: unset; |
| 1071 | bottom: 74px; | 1070 | bottom: 122px; |
| 1072 | right: -310px;} | 1071 | right: -310px;} |
| 1073 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} | 1072 | .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;} |
| 1074 | .custom-selected-style .top-wrp{ width: 100%; display: block; float: left; color: #EF484F; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} | 1073 | .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;} |
| 1075 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} | 1074 | .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1076 | .custom-selected-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} | 1075 | .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;} |
| 1077 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} | 1076 | .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;} |
| 1078 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} | 1077 | .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;} |
| 1079 | .cit-16:hover{color: #EF484F;} | 1078 | .cit-16:hover{color: #EF484F;} |
| 1080 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} | 1079 | .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;} |
| 1081 | .ft-share img{ width: 14px; | 1080 | .ft-share img{ width: 14px; |
| 1082 | display: block; | 1081 | display: block; |
| 1083 | float: left; | 1082 | float: left; |
| 1084 | margin: 8px 7px 0 0px;} | 1083 | margin: 8px 7px 0 0px;} |
| 1085 | .ft-share:hover{color: #EF484F;} | 1084 | .ft-share:hover{color: #EF484F;} |
| 1086 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; | 1085 | .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0; |
| 1087 | left: 0;} | 1086 | left: 0;} |
| 1088 | /* single web screen */ | 1087 | /* single web screen */ |
| 1089 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; | 1088 | .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute; |
| 1090 | left: 0; | 1089 | left: 0; |
| 1091 | right: 0; bottom: 210px; | 1090 | right: 0; bottom: 210px; |
| 1092 | margin: 0 auto;} | 1091 | margin: 0 auto;} |
| 1093 | .web-comment-spc{top: 63px;left: -206px;} | 1092 | .web-comment-spc{top: 63px;left: -206px;} |
| 1094 | .web-ps-insight-spc{ top: 130px; | 1093 | .web-ps-insight-spc{ top: 130px; |
| 1095 | right: -260px;} | 1094 | right: -260px;} |
| 1096 | 1095 | ||
| 1097 | /* screen grab */ | 1096 | /* screen grab */ |
| 1098 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} | 1097 | .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto; bottom: 210px;} |
| 1099 | .screengrab-lspc{top: 113px;} | 1098 | .screengrab-lspc{top: 113px;} |
| 1100 | .screengrab-rspc{top: 92px;right: -362px;} | 1099 | .screengrab-rspc{top: 92px;right: -362px;} |
| 1101 | .view-ticket-wrp-ps{ width: 302px; | 1100 | .view-ticket-wrp-ps{ width: 302px; |
| 1102 | position: absolute; | 1101 | position: absolute; |
| 1103 | z-index: 1; | 1102 | z-index: 1; |
| 1104 | right: -224px; | 1103 | right: -224px; |
| 1105 | top: 82px;} | 1104 | top: 82px;} |
| 1106 | .bc-transparent{ background-image: none !important; border: 0px;} | 1105 | .bc-transparent{ background-image: none !important; border: 0px;} |
| 1107 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} | 1106 | .comments-left-without-bc{ margin-left: -286px; margin-top: 72px;} |
| 1108 | .comments-right-without-bc{ right: -255px;} | 1107 | .comments-right-without-bc{ right: -255px;} |
| 1109 | .screenGrb-comments-wrp{width: 752px;} | 1108 | .screenGrb-comments-wrp{width: 752px;} |
| 1110 | .spc-grbscreen1{ margin-top: 40px;} | 1109 | .spc-grbscreen1{ margin-top: 40px;} |
| 1111 | /* two webscreen */ | 1110 | /* two webscreen */ |
| 1112 | .two-webscreen-insight{ width: 482px; display: block; height: 725px;position: absolute; background-image:url('../images/two-web-screen.svg'); background-repeat: no-repeat; left: 0; | 1111 | .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; |
| 1113 | right: 0; | 1112 | right: 0; |
| 1114 | margin: 0 auto; | 1113 | margin: 0 auto; |
| 1115 | bottom: 0; | 1114 | bottom: 0; |
| 1116 | top: unset; | 1115 | top: unset; |
| 1117 | background-position: top;} | 1116 | background-position: top;} |
| 1118 | .two-webs-l-spc{ margin-left: -342px; | 1117 | .two-webs-l-spc{ margin-left: -342px; |
| 1119 | margin-top: 37px;} | 1118 | margin-top: 37px;} |
| 1120 | .two-screen-user-photo-bottom { | 1119 | .two-screen-user-photo-bottom { |
| 1121 | width: 127px; | 1120 | width: 127px; |
| 1122 | display: block; | 1121 | display: block; |
| 1123 | position: absolute; | 1122 | position: absolute; |
| 1124 | bottom: 76px; | 1123 | bottom: 76px; |
| 1125 | left: -254px; | 1124 | left: -254px; |
| 1126 | } | 1125 | } |
| 1127 | .two-webscreen-r-insight { | 1126 | .two-webscreen-r-insight { |
| 1128 | width: 423px; | 1127 | width: 423px; |
| 1129 | display: block; | 1128 | display: block; |
| 1130 | position: absolute; | 1129 | position: absolute; |
| 1131 | top: 51px; | 1130 | top: 51px; |
| 1132 | right: 3px; | 1131 | right: 3px; |
| 1133 | } | 1132 | } |
| 1134 | .custom-selected-author-style { | 1133 | .custom-selected-author-style { |
| 1135 | border-radius: 0px 25px 25px 25px; | 1134 | border-radius: 0px 25px 25px 25px; |
| 1136 | border: 2px solid #F9CF35; position: relative; | 1135 | border: 2px solid #F9CF35; position: relative; |
| 1137 | } | 1136 | } |
| 1138 | .custom-selected-author-style .top-wrp{ width: 100%; display: block; float: left; color: #F9CF35; font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;} | 1137 | .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;} |
| 1139 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} | 1138 | .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;} |
| 1140 | .custom-selected-author-style .top-head{ font-size: 20px; line-height: 24px; font-weight: 700; margin:15px 0 15px 0; width: 100%; display: block; float: left;} | 1139 | .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;} |
| 1141 | .custom-selected-author-style .rect { | 1140 | .custom-selected-author-style .rect { |
| 1142 | width: 25px; | 1141 | width: 25px; |
| 1143 | display: block; | 1142 | display: block; |
| 1144 | position: absolute; | 1143 | position: absolute; |
| 1145 | top: 0; | 1144 | top: 0; |
| 1146 | left: 0; | 1145 | left: 0; |
| 1147 | } | 1146 | } |
| 1148 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} | 1147 | .author-two{position: absolute; top: 240px; left: -363px; width: 428px;} |
| 1149 | .author-two .author-two-photo{ width: 200px; display: block;} | 1148 | .author-two .author-two-photo{ width: 200px; display: block;} |
| 1150 | .two-author-desktop{ width: 913px; | 1149 | .two-author-desktop{ width: 913px; |
| 1151 | display: block; | 1150 | display: block; |
| 1152 | height: 525px; | 1151 | height: 525px; |
| 1153 | position: absolute; | 1152 | position: absolute; |
| 1154 | background-image:url('../images/two-author-desktop.svg'); | 1153 | background-image:url('../images/two-author-desktop.svg'); |
| 1155 | background-repeat: no-repeat; | 1154 | background-repeat: no-repeat; |
| 1156 | left: 0; | 1155 | left: 0; |
| 1157 | right: 0; | 1156 | right: 0; |
| 1158 | margin: 0 auto; | 1157 | margin: 0 auto; |
| 1159 | bottom: 0; | 1158 | bottom: 0; |
| 1160 | top: unset; | 1159 | top: unset; |
| 1161 | background-position: bottom;} | 1160 | background-position: bottom;} |
| 1162 | .author-two-desktop{ position: absolute; | 1161 | .author-two-desktop{ position: absolute; |
| 1163 | top: -130px; | 1162 | top: -130px; |
| 1164 | left: -134px; | 1163 | left: -134px; |
| 1165 | width: 428px;} | 1164 | width: 428px;} |
| 1166 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} | 1165 | .author-two-desktop .author-two-photo{ width: 200px; display: block;} |
| 1167 | .author-one-desktop{ position: absolute; | 1166 | .author-one-desktop{ position: absolute; |
| 1168 | top: -163px; | 1167 | top: -163px; |
| 1169 | right: -201px; | 1168 | right: -201px; |
| 1170 | width: 428px;} | 1169 | width: 428px;} |
| 1171 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} | 1170 | .custom-2-author{ border-radius: 25px 25px 25px 0px;} |
| 1172 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} | 1171 | .custom-2-author .footer { border-radius: 0px 0px 25px 0px;} |
| 1173 | .desktop-two-logo-spc{ bottom: 40%;} | 1172 | .desktop-two-logo-spc{ bottom: 40%;} |
| 1174 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} | 1173 | .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;} |
| 1175 | .author-two-head-spc{ margin-top: 56px !important;} | 1174 | .author-two-head-spc{ margin-top: 56px !important;} |
| 1176 | .sign-wrp{ width: 100%; display: block; float: left;} | 1175 | .sign-wrp{ width: 100%; display: block; float: left;} |
| 1177 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } | 1176 | .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; } |
| 1178 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} | 1177 | .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;} |
| 1179 | .cust-user2-style{ border-radius:25px 0 25px 25px} | 1178 | .cust-user2-style{ border-radius:25px 0 25px 25px} |
| 1180 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} | 1179 | .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;} |
| 1181 | .single-chat-c-left{left: -405px;} | 1180 | .single-chat-c-left{left: -405px;} |
| 1182 | .single-chat-c-right{top: 244px;right: -404px;} | 1181 | .single-chat-c-right{top: 244px;right: -404px;} |
| 1183 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} | 1182 | .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;} |
| 1184 | .help-view-ticket-right{display: block; | 1183 | .help-view-ticket-right{display: block; |
| 1185 | float: right; | 1184 | float: right; |
| 1186 | right: -84px; | 1185 | right: -84px; |
| 1187 | position: absolute; | 1186 | position: absolute; |
| 1188 | z-index: 1; | 1187 | z-index: 1; |
| 1189 | top: 51px; | 1188 | top: 51px; |
| 1190 | width: 423px;} | 1189 | width: 423px;} |
| 1191 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} | 1190 | .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px; bottom: 182px; margin: 0 auto;} |
| 1192 | .two-author-all-comments{width: 100%; display: block; float:left;} | 1191 | .two-author-all-comments{width: 100%; display: block; float:left;} |
| 1193 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} | 1192 | .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;} |
| 1194 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} | 1193 | .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;} |
| 1195 | .a2-set{ width: 282px; | 1194 | .a2-set{ width: 282px; |
| 1196 | height: 258px; | 1195 | height: 258px; |
| 1197 | position: absolute; | 1196 | position: absolute; |
| 1198 | left: -370px; | 1197 | left: -370px; |
| 1199 | bottom: -50px;} | 1198 | bottom: -50px;} |
| 1200 | .a2true-set{ width: 268px; | 1199 | .a2true-set{ width: 268px; |
| 1201 | height: 319px; | 1200 | height: 319px; |
| 1202 | position: absolute; | 1201 | position: absolute; |
| 1203 | right: -440px; | 1202 | right: -440px; |
| 1204 | bottom: -103px;} | 1203 | bottom: -103px;} |
| 1205 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} | 1204 | .add_comments-spc_r{ bottom: unset !important; top: 280px !important;} |
| 1206 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } | 1205 | .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; } |
| 1207 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; | 1206 | .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400; color:#000; display: block; |
| 1208 | float: right;} | 1207 | float: right;} |
| 1209 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; | 1208 | .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff; top: 0px; z-index: 50; |
| 1210 | transition-property: right; | 1209 | transition-property: right; |
| 1211 | -webkit-transition-property: right; | 1210 | -webkit-transition-property: right; |
| 1212 | -moz-transition-property: right; | 1211 | -moz-transition-property: right; |
| 1213 | -o-transition-property: right; | 1212 | -o-transition-property: right; |
| 1214 | 1213 | ||
| 1215 | transition-duration: 0.3s; | 1214 | transition-duration: 0.3s; |
| 1216 | -webkit-transition-duration: 0.3s; | 1215 | -webkit-transition-duration: 0.3s; |
| 1217 | -moz-transition-duration: 0.3s; | 1216 | -moz-transition-duration: 0.3s; |
| 1218 | -o-transition-duration: 0.3s; | 1217 | -o-transition-duration: 0.3s; |
| 1219 | 1218 | ||
| 1220 | transition-timing-function: linear; | 1219 | transition-timing-function: linear; |
| 1221 | -webkit-transition-timing-function: linear; | 1220 | -webkit-transition-timing-function: linear; |
| 1222 | -moz-transition-timing-function: linear; | 1221 | -moz-transition-timing-function: linear; |
| 1223 | -o-transition-timing-function: linear; | 1222 | -o-transition-timing-function: linear; |
| 1224 | right: -500px; | 1223 | right: -500px; |
| 1225 | 1224 | ||
| 1226 | } | 1225 | } |
| 1227 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} | 1226 | .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;} |
| 1228 | .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;} | 1227 | .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;} |
| 1229 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} | 1228 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;} |
| 1230 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} | 1229 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;} |
| 1231 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} | 1230 | .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;} |
| 1232 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} | 1231 | .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;} |
| 1233 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } | 1232 | .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; } |
| 1234 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} | 1233 | .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px); overflow-y: auto; padding:0 8px 0 15px;} |
| 1235 | .bounce-board-body .bc-empty{ color: #000; font-size: 26px; line-height: 49px; font-weight: 700; opacity: 0.5; margin-top: 100%; text-align: center;} | 1234 | .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;} |
| 1236 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} | 1235 | .common_color{ overflow: hidden; background: transparent; border-radius: 100px;} |
| 1237 | .user-photo{width: 109px; | 1236 | .user-photo{width: 109px; |
| 1238 | display: block; | 1237 | display: block; |
| 1239 | float: left;} | 1238 | float: left;} |
| 1240 | .cat-minus{ right: -11px !important; | 1239 | .cat-minus{ right: -11px !important; |
| 1241 | margin-left: unset !important;} | 1240 | margin-left: unset !important;} |
| 1242 | .mt-50{ margin-top: 50px;} | 1241 | .mt-50{ margin-top: 50px;} |
| 1243 | .sub-menu-user{ width: 150px; | 1242 | .sub-menu-user{ width: 150px; |
| 1244 | display: block; | 1243 | display: block; |
| 1245 | position: absolute; | 1244 | position: absolute; |
| 1246 | background: #fff; | 1245 | background: #fff; |
| 1247 | right: 0px; | 1246 | right: 0px; |
| 1248 | border: 1px solid #eaeaea; | 1247 | border: 1px solid #eaeaea; |
| 1249 | border-radius: 5px; | 1248 | border-radius: 5px; |
| 1250 | padding: 5px; | 1249 | padding: 5px; |
| 1251 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1250 | -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1252 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1251 | -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1253 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); | 1252 | box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22); |
| 1254 | } | 1253 | } |
| 1255 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } | 1254 | .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; } |
| 1256 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} | 1255 | .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;} |
| 1257 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} | 1256 | .sub-menu-user ul li:last-child{ border-bottom: 0px;} |
| 1258 | .sub-menu-user ul li a:hover{color:#514DA7;} | 1257 | .sub-menu-user ul li a:hover{color:#514DA7;} |
| 1259 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} | 1258 | .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;} |
| 1260 | .bounced-user-comments li{ display: block; float: left; position: relative;} | 1259 | .bounced-user-comments li{ display: block; float: left; position: relative;} |
| 1261 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} | 1260 | .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;} |
| 1262 | .bounced-user-comments .b-user-head img{ width: 26px; | 1261 | .bounced-user-comments .b-user-head img{ width: 26px; |
| 1263 | display: block; | 1262 | display: block; |
| 1264 | float: left; | 1263 | float: left; |
| 1265 | position: absolute; | 1264 | position: absolute; |
| 1266 | left:-13px;} | 1265 | left:-13px;} |
| 1267 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} | 1266 | .bounced-user-comments .b-user-head .head-content{ display: block; float: left;} |
| 1268 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} | 1267 | .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;} |
| 1269 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} | 1268 | .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;} |
| 1270 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} | 1269 | .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;} |
| 1271 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; | 1270 | .bounced-user-comments .b-user-head ul li span{ width: 3px; margin: 12px 5px 0 5px; |
| 1272 | height: 3px; | 1271 | height: 3px; |
| 1273 | display: block; | 1272 | display: block; |
| 1274 | background: #ccc; | 1273 | background: #ccc; |
| 1275 | float: left; | 1274 | float: left; |
| 1276 | } | 1275 | } |
| 1277 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; | 1276 | .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF; |
| 1278 | width: auto; | 1277 | width: auto; |
| 1279 | height: auto; | 1278 | height: auto; |
| 1280 | padding: 3px 7px; | 1279 | padding: 3px 7px; |
| 1281 | display: block; | 1280 | display: block; |
| 1282 | border-radius: 3px; | 1281 | border-radius: 3px; |
| 1283 | margin-top: -2px;} | 1282 | margin-top: -2px;} |
| 1284 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} | 1283 | .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;} |
| 1285 | .bc_border{} | 1284 | .bc_border{} |
| 1286 | .info_bc_spc{ float: left;} | 1285 | .info_bc_spc{ float: left;} |
| 1287 | .info_bc_spc li{ padding:0px; color: #514DA7;} | 1286 | .info_bc_spc li{ padding:0px; color: #514DA7;} |
| 1288 | .info_bc_spc li a{color: #514DA7; opacity: 1;} | 1287 | .info_bc_spc li a{color: #514DA7; opacity: 1;} |
| 1289 | .info_bc_spc li img{ margin-top: 4px;} | 1288 | .info_bc_spc li img{ margin-top: 4px;} |
| 1290 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} | 1289 | .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;} |
| 1291 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} | 1290 | .joined_wrapper .add_rply{ display: block; float: left; width: 73%;} |
| 1292 | .joined_wrapper .add_rply input{border: 1px solid #BDDBFF; width: 100%; border-radius: 5px; padding:0 8px; line-height: 8px; font-size: 10px; height: 25px;} | 1291 | .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;} |
| 1293 | .ft-normal{ font-weight: 500 !important;} | 1292 | .ft-normal{ font-weight: 500 !important;} |
| 1294 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} | 1293 | .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;} |
| 1295 | 1294 | ||
| 1296 | /* placeholder */ | 1295 | /* placeholder */ |
| 1297 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ | 1296 | .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */ |
| 1298 | font-size: 10px; color: #000; opacity: 0.7; | 1297 | font-size: 10px; color: #000; opacity: 0.7; |
| 1299 | } | 1298 | } |
| 1300 | 1299 | ||
| 1301 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 1300 | .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 1302 | font-size: 10px; color: #000; opacity: 0.7; | 1301 | font-size: 10px; color: #000; opacity: 0.7; |
| 1303 | } | 1302 | } |
| 1304 | 1303 | ||
| 1305 | .joined_wrapper .add_rply input::placeholder { | 1304 | .joined_wrapper .add_rply input::placeholder { |
| 1306 | font-size: 10px; color: #000; opacity: 0.7; | 1305 | font-size: 10px; color: #000; opacity: 0.7; |
| 1307 | } | 1306 | } |
| 1308 | 1307 | ||
| 1309 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} | 1308 | .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;} |
| 1310 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } | 1309 | .child-full-width{width: 100%; display: block; float: right; position: relative; padding:15px 15px 15px 0px; } |
| 1311 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} | 1310 | .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;} |
| 1312 | .full-width{ width: 100%; display: block; float: left;} | 1311 | .full-width{ width: 100%; display: block; float: left;} |
| 1313 | .bounced-user-comments .b-user-head ul li span.red {background: #FFDBDC; color:#fff; font-weight: 700; width: auto; height: auto;padding: 3px 7px; display: block;border-radius: 3px; margin-top: -2px;} | 1312 | .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;} |
| 1314 | .child-full-width .b-user-head{ padding-left: 70px;} | 1313 | .child-full-width .b-user-head{ padding-left: 70px;} |
| 1315 | .child-full-width .b-user-head img{ left:33px;} | 1314 | .child-full-width .b-user-head img{ left:33px;} |
| 1316 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} | 1315 | .child-full-width p{ border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;} |
| 1317 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} | 1316 | .child-full-width .joined_wrapper{padding: 0 0px 0 40px;} |
| 1318 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} | 1317 | .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;} |
| 1319 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} | 1318 | .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;} |
| 1320 | .comments-footer{ width: 100%; display: block; float: left;} | 1319 | .comments-footer{ width: 100%; display: block; float: left;} |
| 1321 | .comments-footer textarea{ padding:10px; width: 100%; display: block; float: left; border: 1px solid #DFE7EF; resize: none; height: 90px; box-sizing: border-box; border-radius: 5px 5px 0 0;} | 1320 | .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;} |
| 1322 | .add_comments_chat{height: 30px; line-height:30px; background: #514DA7; border-radius: 5px; width: 112px; display: block; float: right; color: #fff; font-size: 12px; font-weight: 700; text-align: center;} | 1321 | .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;} |
| 1323 | .add_comments_chat img{ width: 15px;} | 1322 | .add_comments_chat img{ width: 15px;} |
| 1324 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} | 1323 | .add_comments_chat:hover{ color:#fff; text-decoration: none;} |
| 1325 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} | 1324 | .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;} |
| 1326 | button:focus{ border:0px; outline: none;} | 1325 | button:focus{ border:0px; outline: none;} |
| 1327 | .short_by{left: -100px !important;} | 1326 | .short_by{left: -100px !important;} |
| 1328 | input:focus{ outline: none;} | 1327 | input:focus{ outline: none;} |
| 1329 | .comments-footer textarea:focus{ outline: none;} | 1328 | .comments-footer textarea:focus{ outline: none;} |
| 1330 | .close_chat_bx{ width: 20px; height: 20px; display: block; float: right; border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;} | 1329 | .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;} |
| 1331 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} | 1330 | .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;} |
| 1332 | .close_chat_bx:hover{ background-color: #ccc;} | 1331 | .close_chat_bx:hover{ background-color: #ccc;} |
| 1333 | /* chat box close */ | 1332 | /* chat box close */ |
| 1334 | .cht_close{ | 1333 | .cht_close{ |
| 1335 | transition-property: right; | 1334 | transition-property: right; |
| 1336 | -webkit-transition-property: right; | 1335 | -webkit-transition-property: right; |
| 1337 | -moz-transition-property: right; | 1336 | -moz-transition-property: right; |
| 1338 | -o-transition-property: right; | 1337 | -o-transition-property: right; |
| 1339 | 1338 | ||
| 1340 | transition-duration: 0.3s; | 1339 | transition-duration: 0.3s; |
| 1341 | -webkit-transition-duration: 0.3s; | 1340 | -webkit-transition-duration: 0.3s; |
| 1342 | -moz-transition-duration: 0.3s; | 1341 | -moz-transition-duration: 0.3s; |
| 1343 | -o-transition-duration: 0.3s; | 1342 | -o-transition-duration: 0.3s; |
| 1344 | 1343 | ||
| 1345 | transition-timing-function: linear; | 1344 | transition-timing-function: linear; |
| 1346 | -webkit-transition-timing-function: linear; | 1345 | -webkit-transition-timing-function: linear; |
| 1347 | -moz-transition-timing-function: linear; | 1346 | -moz-transition-timing-function: linear; |
| 1348 | -o-transition-timing-function: linear; | 1347 | -o-transition-timing-function: linear; |
| 1349 | right: 0px; | 1348 | right: 0px; |
| 1350 | } | 1349 | } |
| 1351 | .p-left-0{ padding-left:0px !important;} | 1350 | .p-left-0{ padding-left:0px !important;} |
| 1352 | .ps_right{ float: right !important; position: static !important;} | 1351 | .ps_right{ float: right !important; position: static !important;} |
| 1353 | .testi-photos-ct .c-with-photos{ margin-left: 0px; } | 1352 | .testi-photos-ct .c-with-photos{ margin-left: 0px; } |
| 1354 | .testi-photos-ct .comments-detail{padding-left: 165px !important;} | 1353 | .testi-photos-ct .comments-detail{padding-left: 165px !important;} |
| 1355 | .ct-width{ width: 400px;} | 1354 | .ct-width{ width: 400px;} |
| 1356 | .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} | 1355 | .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;} |
| 1357 | .testi-photos-ct .comments-detail{padding-right: 40px;} | 1356 | .testi-photos-ct .comments-detail{padding-right: 40px;} |
| 1358 | .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} | 1357 | .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;} |
| 1359 | .right-corner { border-radius: 25px 25px 2px 25px;} | 1358 | .right-corner { border-radius: 25px 25px 2px 25px;} |
| 1360 | .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} | 1359 | .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;} |
| 1361 | .dynamic-thoughts { width: 200px; display: block; } | 1360 | .dynamic-thoughts { width: 200px; display: block; } |
| 1362 | .two-screen-spc-top{ top: 100px; right: -286px;} | 1361 | .two-screen-spc-top{ top: 100px; right: -286px;} |
| 1363 | .joined_wrapper{ position: relative;} | 1362 | .joined_wrapper{ position: relative;} |
| 1364 | .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} | 1363 | .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;} |
| 1365 | .reply-Wdth{ width: 64px;} | 1364 | .reply-Wdth{ width: 64px;} |
| 1366 | .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} | 1365 | .discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;} |
| 1367 | .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} | 1366 | .full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;} |
| 1368 | .full-w-height-profile.ex-light p{font-weight: 500; font-weight: normal; font-size: 14px; line-height: 21px; color: #000; opacity: 0.7; width: 100%; display: block; text-align: center;} | 1367 | .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;} |
| 1369 | .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } | 1368 | .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; } |
| 1370 | .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} | 1369 | .full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;} |
| 1371 | .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} | 1370 | .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;} |
| 1372 | .full-w-height-profile.spotlight_bg {background-image:url('../images/spot-light-ps.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom -3px right 50px;} | 1371 | .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;} |
| 1373 | .update_profile{ margin-right: 15px; margin-top: 2px; z-index: 11; background: #514DA7; border-radius: 5px;width: 146px; text-transform: uppercase; color: #fff; text-align: center; height: 35px; font-weight: 600; font-size: 12px; font-style: normal; line-height: 14px;} | 1372 | .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;} |
| 1374 | .update_profile span{width: 11px; | 1373 | .update_profile span{width: 11px; |
| 1375 | height: 11px; | 1374 | height: 11px; |
| 1376 | display: inline-block; | 1375 | display: inline-block; |
| 1377 | background: #EF484F; | 1376 | background: #EF484F; |
| 1378 | border-radius: 10px; | 1377 | border-radius: 10px; |
| 1379 | margin: 12px 0 0 0;} | 1378 | margin: 12px 0 0 0;} |
| 1380 | .update_profile:hover{ color: #fff; text-decoration: none;} | 1379 | .update_profile:hover{ color: #fff; text-decoration: none;} |
| 1381 | .top-area-blank{ width: 195px; height: 30px; display: block; margin: 0 auto; background: #DFE7EF; border-radius: 0px 0px 23.4986px 23.4986px; position: absolute; z-index: 1; left: 0; right: 0; top: 15px;} | 1380 | .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;} |
| 1382 | .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;} | 1381 | .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;} |
| 1383 | .talk-to-me-about{ width: 100%; display: block; float: left;} | 1382 | .talk-to-me-about{ width: 100%; display: block; float: left;} |
| 1384 | .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;} | 1383 | .talk-to-me-about span{ font-weight: 600; font-size: 14px; color: #000000;opacity: 0.3; letter-spacing: 2px; text-transform: uppercase;} |
| 1385 | .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;} | 1384 | .talk-to-me-about strong{ font-weight: 500; font-size: 16px; color: #000000; margin-left: 10px;} |
| 1386 | .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;} | 1385 | .user-views{display: block; float: left; border-bottom:1px solid #a5a5a5; width: 260px; padding-bottom:15px;} |
| 1387 | .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;} | 1386 | .user-views ul{ display: block; float: left; list-style-type: none; width: 100%; padding:0px; margin:0px;} |
| 1388 | .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} | 1387 | .user-views li{ display: block; margin-right: 10px; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} |
| 1389 | .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;} | 1388 | .user-views li img{ width: 15px; display: block; float: left; margin: -1px 5px 0 0px;} |
| 1390 | .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} | 1389 | .user-views li{ display: block; float: left; font-size: 10px; font-weight: 500; color: #000; opacity: 0.5;} |
| 1391 | .user-views li img.spctp{ margin-top: 2px;} | 1390 | .user-views li img.spctp{ margin-top: 2px;} |
| 1392 | .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;} | 1391 | .action-set{ width: 52px; height: 52px; display: block; border-radius: 8px; background:#514da7; float: right; position: absolute;right: 4px;bottom: 4px;} |
| 1393 | .action-set img{width: 21px;margin: 16px;} | 1392 | .action-set img{width: 21px;margin: 16px;} |
| 1394 | .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left; | 1393 | .read-time{ width: 150px; display: block; height: 57px; background:url('../images/read-m-b.svg'); background-repeat: no-repeat; float: left; |
| 1395 | position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden; | 1394 | position: absolute;left: 0;bottom: -35px; height: 36px;overflow: hidden; |
| 1396 | background-position: left bottom; } | 1395 | background-position: left bottom; } |
| 1397 | .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;} | 1396 | .read-time a{ font-weight: 500; color: #000; opacity: 0.5; font-size: 10px;display: block; float: left;margin: 10px 0px 0 18px;} |
| 1398 | .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;} | 1397 | .read-time a img{ width: 13px; display: block; float: left; margin-right: 7px; margin-top: 1px;} |
| 1399 | .insight-two-img{width: 403px; position: relative;} | ||
| 1400 | .m-screen-hidden{width: 403px;overflow: hidden; height:722px;margin: 0 auto;} | ||
| 1398 | .insight-two-img{width: 100%; position: relative;} | ||
| 1399 | .m-screen-hidden{width: 382px;overflow: hidden; height:702px;margin: 0 auto;} | ||
| 1400 | .s-l-left-section{ width: 600px; display: block; float: left; margin-top: 57px;} |
src/assets/css/media.css
| 1 | 1 | ||
| 2 | @media only screen and (min-width :768px) | 2 | @media only screen and (min-width :768px) |
| 3 | and (max-device-width: 1280px) | 3 | and (max-device-width: 1280px) |
| 4 | { | 4 | { |
| 5 | 5 | ||
| 6 | 6 | ||
| 7 | 7 | ||
| 8 | 8 | ||
| 9 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ | 9 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ |
| 10 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } | 10 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } |
| 11 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 11 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 12 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; | 12 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; |
| 13 | top: unset !important;} | 13 | top: unset !important;} |
| 14 | /* no comments */ | 14 | /* no comments */ |
| 15 | 15 | ||
| 16 | 16 | ||
| 17 | 17 | ||
| 18 | 18 | ||
| 19 | /* no comments */ | 19 | /* no comments */ |
| 20 | 20 | ||
| 21 | } | 21 | } |
| 22 | 22 | ||
| 23 | @media screen | 23 | @media screen |
| 24 | and (min-device-width: 768px) | 24 | and (min-device-width: 768px) |
| 25 | and (max-device-width: 1366px) | 25 | and (max-device-width: 1366px) |
| 26 | and (-webkit-min-device-pixel-ratio: 1) { | 26 | and (-webkit-min-device-pixel-ratio: 1) { |
| 27 | .intro-startup .footer-top .top-intro-bt{width: 212px; margin-left: -21px;} | ||
| 28 | .bottom-startup{-ms-transform: scale(0.9); /* IE 9 */ | ||
| 29 | transform: scale(0.9); /* Standard syntax */ left: -10px;} | ||
| 30 | .epi-bg{bottom: -159px; left: 8.5% !important;} | ||
| 31 | .compare-c{-ms-transform: scale(0.8); /* IE 9 */ | ||
| 32 | transform: scale(0.8); /* Standard syntax */} | ||
| 33 | .popup-wrp{-ms-transform: scale(0.8); /* IE 9 */ | ||
| 34 | transform: scale(0.8); /* Standard syntax */} | ||
| 35 | .popup-set{ margin-top: 0px;} | ||
| 36 | .sign-login-wrp{ -ms-transform: scale(0.8); /* IE 9 */ | ||
| 37 | transform: scale(0.8); /* Standard syntax */ margin-top: 5%; } | ||
| 27 | .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } | 38 | .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } |
| 28 | .form-layout.signup-frm-spc { margin-top: 41px;} | 39 | .form-layout.signup-frm-spc { margin-top: 41px;} |
| 29 | .user-profile{padding-right: 90px;width: 570px;} | 40 | .user-profile{padding-right: 90px;width: 570px;} |
| 30 | .spot-light-top{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 41 | .spot-light-top{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 31 | transform: scale(0.8); /* Standard syntax */} | 42 | transform: scale(0.8); /* Standard syntax */} |
| 32 | .ft-comments-group{ width: 100%; } | 43 | .ft-comments-group{ width: 100%; } |
| 33 | 44 | ||
| 34 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ | 45 | .single-author-comments{-ms-transform: scale(0.8); /* IE 9 */ |
| 35 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } | 46 | transform: scale(0.8); /* Standard syntax */ bottom: -55px; } |
| 36 | .thanks-wrapper{-ms-transform: scale(0.8); /* IE 9 */ | 47 | .thanks-wrapper{-ms-transform: scale(0.8); /* IE 9 */ |
| 37 | transform: scale(0.8); /* Standard syntax */ bottom: -40px;} | 48 | transform: scale(0.8); /* Standard syntax */ bottom: -40px;} |
| 38 | .single-mobileInsight{-ms-transform: scale(0.8); /* IE 9 */ | 49 | .single-mobileInsight{-ms-transform: scale(0.8); /* IE 9 */ |
| 39 | transform: scale(0.8); /* Standard syntax */ bottom: -65px;} | 50 | transform: scale(0.8); /* Standard syntax */ bottom: -65px;} |
| 40 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 51 | .allMWrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 41 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; | 52 | transform: scale(0.8); /* Standard syntax */ bottom: -50px !important; |
| 42 | top: unset !important;} | 53 | top: unset !important;} |
| 43 | 54 | ||
| 44 | .s-web-screen-wrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ | 55 | .s-web-screen-wrp{ top: -68px; -ms-transform: scale(0.8); /* IE 9 */ |
| 45 | transform: scale(0.8); /* Standard syntax */ bottom: 80px !important; top: unset; } | 56 | transform: scale(0.8); /* Standard syntax */ bottom: 80px !important; top: unset; } |
| 46 | .screengrab-wrp{ -ms-transform: scale(0.8); /* IE 9 */ | 57 | .screengrab-wrp{ -ms-transform: scale(0.8); /* IE 9 */ |
| 47 | transform: scale(0.8); /* Standard syntax */ bottom: 150px !important; top: unset; } | 58 | transform: scale(0.8); /* Standard syntax */ bottom: 150px !important; top: unset; } |
| 48 | .two-webscreen-insight{ -ms-transform: scale(0.8); /* IE 9 */ | 59 | .two-webscreen-insight{ -ms-transform: scale(0.8); /* IE 9 */ |
| 49 | transform: scale(0.8); /* Standard syntax */ bottom: -57px !important; top: unset; } | 60 | transform: scale(0.8); /* Standard syntax */ bottom: -57px !important; top: unset; } |
| 50 | .smasung-g-10wrp{ -ms-transform: scale(0.8); /* IE 9 */ | 61 | .smasung-g-10wrp{ -ms-transform: scale(0.8); /* IE 9 */ |
| 51 | transform: scale(0.8); /* Standard syntax */ bottom: -79px !important; top: unset; } | 62 | transform: scale(0.8); /* Standard syntax */ bottom: -66px !important; top: unset; } |
| 52 | .two-author-desktop{ -ms-transform: scale(0.8); /* IE 9 */ | 63 | .two-author-desktop{ -ms-transform: scale(0.8); /* IE 9 */ |
| 53 | transform: scale(0.8); /* Standard syntax */ bottom: -48px !important; top: unset; } | 64 | transform: scale(0.8); /* Standard syntax */ bottom: -48px !important; top: unset; } |
| 54 | /* no comments */ | 65 | /* no comments */ |
| 55 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 3px;} | 66 | .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 12px;} |
| 56 | .wc-spc-lf-tp { padding-top: 112px !important; } | 67 | .wc-spc-lf-tp { padding-top: 112px !important; } |
| 57 | .form-layout.signup-frm-spc { | 68 | .form-layout.signup-frm-spc { |
| 58 | margin-top: 54px !important; | 69 | margin-top: 54px !important; |
| 59 | } | 70 | } |
| 60 | .sign-wrp{-ms-transform: scale(0.8); /* IE 9 */ | 71 | .sign-wrp{-ms-transform: scale(0.8); /* IE 9 */ |
| 61 | transform: scale(0.8); /* Standard syntax */} | 72 | transform: scale(0.8); /* Standard syntax */} |
| 62 | 73 | ||
| 63 | /* no comments */ | 74 | /* no comments */ |
| 64 | } | 75 | } |
| 65 | 76 | @media screen | |
| 77 | and (min-device-width: 768px) | ||
| 78 | and (max-device-width: 1280px) | ||
| 79 | and (-webkit-min-device-pixel-ratio: 1) { | ||
| 80 | .epi-bg{bottom: -159px; left: 6% !important;} | ||
| 81 | |||
| 82 | } | ||
| 66 | /* Desktops and laptops ----------- */ | 83 | /* Desktops and laptops ----------- */ |
| 67 | @media only screen and (min-width : 1050px) | 84 | @media only screen and (min-width : 1050px) |
| 68 | and (max-device-width: 1680px) | 85 | and (max-device-width: 1680px) |
| 69 | { | 86 | { |
| 70 | .epi-bg{ left: 13%;} | 87 | .epi-bg{ left: 13%;} |
| 71 | .popcorn-set{ right: 360px;} | 88 | .popcorn-set{ right: 360px;} |
| 72 | .ft-comments-group{width: 100%;} | 89 | .ft-comments-group{width: 100%;} |
| 73 | 90 | ||
| 74 | 91 | ||
| 75 | /* no comments */ | 92 | /* no comments */ |
| 76 | 93 | ||
| 77 | 94 | ||
| 78 | 95 | ||
| 79 | 96 | ||
| 80 | /* no comments */ | 97 | /* no comments */ |
| 81 | } | 98 | } |
| 82 | 99 | ||
| 83 | /* ----------- Non-Retina Screens ----------- */ | 100 | /* ----------- Non-Retina Screens ----------- */ |
| 84 | @media screen | 101 | @media screen |
| 85 | and (min-device-width: 1200px) | 102 | and (min-device-width: 1200px) |
| 86 | and (max-device-width: 1400px) | 103 | and (max-device-width: 1400px) |
| 87 | and (-webkit-min-device-pixel-ratio: 1) { | 104 | and (-webkit-min-device-pixel-ratio: 1) { |
| 88 | .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; } | 105 | .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; } |
| 89 | .user-profile{padding-right: 90px; width: 675px;} | 106 | .user-profile{padding-right: 90px; width: 675px;} |
| 90 | .insights-details{ width: 620px;} | 107 | .insights-details{ width: 620px;} |
| 91 | .episode-intro{ background-position: 101px -266px !important;} | 108 | .episode-intro{ background-position: 101px -266px !important;} |
| 92 | .ft-comments-group{ margin-left:0px;width: 100%;} | 109 | .ft-comments-group{ margin-left:0px;width: 100%;} |
| 93 | 110 | ||
| 94 | 111 | ||
| 95 | 112 | ||
| 96 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} | 113 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} |
| 97 | /* no comments */ | 114 | /* no comments */ |
| 98 | .comment-frm .frm-wdth{ padding-right: 20px;} | 115 | .comment-frm .frm-wdth{ padding-right: 20px;} |
| 99 | .c-with-photos{ margin-left: -70px;} | 116 | .c-with-photos{ margin-left: -70px;} |
| 100 | .all-c-space{ padding-left: 104px !important;} | 117 | .all-c-space{ padding-left: 104px !important;} |
| 101 | .addfrm-spc{ padding-right: 60px !important;} | 118 | .addfrm-spc{ padding-right: 60px !important;} |
| 102 | .web-ps-insight-spc{ right: -220px;} | 119 | .web-ps-insight-spc{ right: -220px;} |
| 103 | .s-web-screen-wrp{ bottom: 150px;} | 120 | .s-web-screen-wrp{ bottom: 150px;} |
| 104 | 121 | ||
| 105 | /* no comments */ | 122 | /* no comments */ |
| 106 | 123 | ||
| 107 | } | 124 | } |
| 108 | 125 | ||
| 109 | /* ----------- Retina Screens ----------- */ | 126 | /* ----------- Retina Screens ----------- */ |
| 110 | @media screen | 127 | @media screen |
| 111 | and (min-device-width: 900px) | 128 | and (min-device-width: 900px) |
| 112 | and (max-device-width: 1440px) | 129 | and (max-device-width: 1440px) |
| 113 | and (-webkit-min-device-pixel-ratio: 1) { | 130 | and (-webkit-min-device-pixel-ratio: 1) { |
| 114 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } | 131 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } |
| 115 | .form-layout.signup-frm-spc { margin-top: 114px; float:right;} | 132 | .form-layout.signup-frm-spc { margin-top: 114px; float:right;} |
| 116 | .user-profile{padding-right: 90px; width: 675px;} | 133 | .user-profile{padding-right: 90px; width: 675px;} |
| 117 | .insights-details{ width: 620px;} | 134 | .insights-details{ width: 620px;} |
| 118 | .episode-intro{ background-position: 101px -266px !important;} | 135 | .episode-intro{ background-position: 101px -266px !important;} |
| 119 | .spot-light-top{ left: -170px;} | 136 | .spot-light-top{ left: -170px;} |
| 120 | .popcorn-set { | 137 | .popcorn-set { |
| 121 | right: 160px; | 138 | right: 160px; |
| 122 | } | 139 | } |
| 123 | .ft-comments-group{ margin-left:0px; width: 100%;} | 140 | .ft-comments-group{ margin-left:0px; width: 100%;} |
| 124 | .comment-frm .frm-wdth{ padding-right: 20px;} | 141 | .comment-frm .frm-wdth{ padding-right: 20px;} |
| 125 | 142 | ||
| 126 | 143 | ||
| 127 | 144 | ||
| 128 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} | 145 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} |
| 129 | /* no comments */ | 146 | /* no comments */ |
| 130 | 147 | ||
| 131 | .c-with-photos{ margin-left: -70px;} | 148 | .c-with-photos{ margin-left: -70px;} |
| 132 | .all-c-space{ padding-left: 104px !important;} | 149 | .all-c-space{ padding-left: 104px !important;} |
| 133 | .addfrm-spc{ padding-right: 60px !important;} | 150 | .addfrm-spc{ padding-right: 60px !important;} |
| 134 | .web-ps-insight-spc{ right: -220px;} | 151 | .web-ps-insight-spc{ right: -220px;} |
| 135 | .s-web-screen-wrp{ bottom: 150px;} | 152 | .s-web-screen-wrp{ bottom: 150px;} |
| 136 | /* no comments */ | 153 | /* no comments */ |
| 137 | } | 154 | } |
| 138 | 155 | ||
| 139 | @media screen | 156 | @media screen |
| 140 | and (min-device-width: 1050px) | 157 | and (min-device-width: 1050px) |
| 141 | and (max-device-width: 1440px) | 158 | and (max-device-width: 1440px) |
| 142 | and (-webkit-min-device-pixel-ratio: 1) { | 159 | and (-webkit-min-device-pixel-ratio: 1) { |
| 143 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } | 160 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } |
| 144 | .form-layout.signup-frm-spc { margin-top: 114px;} | 161 | .form-layout.signup-frm-spc { margin-top: 114px;} |
| 145 | .user-profile{padding-right: 90px; width: 675px;} | 162 | .user-profile{padding-right: 90px; width: 675px;} |
| 146 | .insights-details{ width: 620px;} | 163 | .insights-details{ width: 620px;} |
| 147 | .episode-intro{ background-position: 101px -266px !important;} | 164 | .episode-intro{ background-position: 101px -266px !important;} |
| 148 | .epi-bg { | 165 | .epi-bg { |
| 149 | left: 6%; | 166 | left: 7%; |
| 150 | } | 167 | } |
| 151 | .ft-comments-group{ margin-left:0px; width: 100%;} | 168 | .ft-comments-group{ margin-left:0px; width: 100%;} |
| 152 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} | 169 | .intro-startup .footer-top .top-intro-bt li a{ padding: 6px 6px;} |
| 153 | .comment-frm .frm-wdth{ padding-right: 20px;} | 170 | .comment-frm .frm-wdth{ padding-right: 20px;} |
| 154 | 171 | ||
| 155 | 172 | ||
| 156 | /* no comments */ | 173 | /* no comments */ |
| 157 | 174 | ||
| 158 | .c-with-photos{ margin-left: -70px;} | 175 | .c-with-photos{ margin-left: -70px;} |
| 159 | .all-c-space{ padding-left: 104px !important;} | 176 | .all-c-space{ padding-left: 104px !important;} |
| 160 | .addfrm-spc{ padding-right: 60px !important;} | 177 | .addfrm-spc{ padding-right: 60px !important;} |
| 161 | .web-ps-insight-spc{ right: -220px;} | 178 | .web-ps-insight-spc{ right: -220px;} |
| 162 | .s-web-screen-wrp{ bottom: 150px;} | 179 | .s-web-screen-wrp{ bottom: 150px;} |
| 163 | /* no comments */ | 180 | /* no comments */ |
| 164 | } | 181 | } |
| 165 | 182 | ||
| 166 | /* mobile */ | 183 | /* mobile */ |
| 167 | /* Portrait and Landscape */ | 184 | /* Portrait and Landscape */ |
| 168 | @media only screen | 185 | @media only screen |
| 169 | and (min-device-width: 320px) | 186 | and (min-device-width: 320px) |
| 170 | and (max-device-width: 960px) | 187 | and (max-device-width: 960px) |
| 171 | and (-webkit-min-device-pixel-ratio: 2) { | 188 | and (-webkit-min-device-pixel-ratio: 2) { |
| 172 | 189 | ||
| 173 | .insights-wrp{ padding: 0 20px 0 20px;} | 190 | .insights-wrp{ padding: 0 20px 0 20px;} |
| 174 | .insights-searh { | 191 | .insights-searh { |
| 175 | width: 300px;} | 192 | width: 300px;} |
| 176 | .insights-list-filter li{ margin: 0 3px 9px 3px;} | 193 | .insights-list-filter li{ margin: 0 3px 9px 3px;} |
| 177 | .main-wrp{ padding-left: 15px; padding-right: 15px;} | 194 | .main-wrp{ padding-left: 15px; padding-right: 15px;} |
| 178 | .wc-spc-lf-tp { | 195 | .wc-spc-lf-tp { |
| 179 | padding-top: 52px; | 196 | padding-top: 52px; |
| 180 | padding-left: 28px; | 197 | padding-left: 28px; |
| 181 | padding-bottom:50px; | 198 | padding-bottom:50px; |
| 182 | } | 199 | } |
| 183 | .insights-searh input::-webkit-input-placeholder { /* Edge */ | 200 | .insights-searh input::-webkit-input-placeholder { /* Edge */ |
| 184 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 201 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 185 | } | 202 | } |
| 186 | 203 | ||
| 187 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | 204 | .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */ |
| 188 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 205 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 189 | } | 206 | } |
| 190 | 207 | ||
| 191 | .insights-searh input::placeholder { | 208 | .insights-searh input::placeholder { |
| 192 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; | 209 | font-size: 15px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000; |
| 193 | } | 210 | } |
| 194 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} | 211 | .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;} |
| 195 | .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;} | 212 | .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;} |
| 196 | 213 | ||
| 197 | .navbar-toggler{ padding: 0px; margin-top: -10px; | 214 | .navbar-toggler{ padding: 0px; margin-top: -10px; |
| 198 | width: 40px; | 215 | width: 40px; |
| 199 | height: 40px; | 216 | height: 40px; |
| 200 | float: right; box-shadow: 0px; outline: 0px;} | 217 | float: right; box-shadow: 0px; outline: 0px;} |
| 201 | .navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;} | 218 | .navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;} |
| 202 | 219 | ||
| 203 | .col-reverse{display: flex; | 220 | .col-reverse{display: flex; |
| 204 | flex-direction: column-reverse;} | 221 | flex-direction: column-reverse;} |
| 205 | .reset-pass-spc { | 222 | .reset-pass-spc { |
| 206 | margin-top: 20px; | 223 | margin-top: 20px; |
| 207 | } | 224 | } |
| 208 | /* profile */ | 225 | /* profile */ |
| 209 | .inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;} | 226 | .inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;} |
| 210 | .user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;} | 227 | .user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;} |
| 211 | .data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;} | 228 | .data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;} |
| 212 | .card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;} | 229 | .card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;} |
| 213 | .add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;} | 230 | .add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;} |
| 214 | .talk-to-me{ margin-bottom: 30px;} | 231 | .talk-to-me{ margin-bottom: 30px;} |
| 215 | .profile-data-wrp{ position: relative;} | 232 | .profile-data-wrp{ position: relative;} |
| 216 | .user-profile-photo { | 233 | .user-profile-photo { |
| 217 | position: absolute; | 234 | position: absolute; |
| 218 | right: 82px; | 235 | right: 82px; |
| 219 | top: 16px; | 236 | top: 16px; |
| 220 | } | 237 | } |
| 221 | .replies-wrp{ width: 100%; margin-left: 0px;} | 238 | .replies-wrp{ width: 100%; margin-left: 0px;} |
| 222 | .replies { padding-top: 100px;} | 239 | .replies { padding-top: 100px;} |
| 223 | .inner-wrp h1{ width: 100%; display: block; float: left;} | 240 | .inner-wrp h1{ width: 100%; display: block; float: left;} |
| 224 | .verified-team {width: 129px; display: block;margin-top: 7px;position: unset; margin-left: 0px;} | 241 | .verified-team {width: 129px; display: block;margin-top: 7px;position: unset; margin-left: 0px;} |
| 225 | .profile-tab li { float: left; padding-bottom: 10px; margin-right: 0;margin-bottom: 20px;} | 242 | .profile-tab li { float: left; padding-bottom: 10px; margin-right: 0;margin-bottom: 20px;} |
| 226 | .profile-tab li a{ font-size: 17px;} | 243 | .profile-tab li a{ font-size: 17px;} |
| 227 | .members-wrp{ padding:50px 0 50px 0px; width: 100%;} | 244 | .members-wrp{ padding:50px 0 50px 0px; width: 100%;} |
| 228 | .members-wrp .member-list{ width: 298px;} | 245 | .members-wrp .member-list{ width: 298px;} |
| 229 | .members-wrp .member-list a span h1{ margin-top:0px;} | 246 | .members-wrp .member-list a span h1{ margin-top:0px;} |
| 230 | .insights-spc { | 247 | .insights-spc { |
| 231 | padding: 0 0px; | 248 | padding: 0 0px; |
| 232 | } | 249 | } |
| 233 | .insights-list { | 250 | .insights-list { |
| 234 | list-style-type: none; | 251 | list-style-type: none; |
| 235 | margin: 0px; | 252 | margin: 0px; |
| 236 | padding: 0px; | 253 | padding: 0px; |
| 237 | width: auto; | 254 | width: auto; |
| 238 | display: block; | 255 | display: block; |
| 239 | float: left; | 256 | float: left; |
| 240 | margin-top: -10px; | 257 | margin-top: -10px; |
| 241 | margin-left: 11px; | 258 | margin-left: 11px; |
| 242 | } | 259 | } |
| 243 | .insights-details{ width: 100%;} | 260 | .insights-details{ width: 100%;} |
| 244 | .insights-profile{ right: 12px;} | 261 | .insights-profile{ right: 12px;} |
| 245 | } | 262 | } |
| 246 | 263 | ||
| 247 | /* tab */ | 264 | /* tab */ |
| 248 | /* Portrait and Landscape */ | 265 | /* Portrait and Landscape */ |
| 249 | @media only screen | 266 | @media only screen |
| 250 | and (min-device-width: 1024px) | 267 | and (min-device-width: 1024px) |
| 251 | and (max-device-width: 1366px) | 268 | and (max-device-width: 1366px) |
| 252 | and (-webkit-min-device-pixel-ratio: 2) { | 269 | and (-webkit-min-device-pixel-ratio: 2) { |
| 253 | .main-wrp{background-position: bottom 100px left -100px;} | 270 | .main-wrp{background-position: bottom 100px left -100px !important;} |
| 254 | .replies-wrp{ width: 760px;} | 271 | .replies-wrp{ width: 760px;} |
| 255 | .insights-spc { | 272 | .insights-spc { |
| 256 | padding: 0 30px; | 273 | padding: 0 30px; |
| 257 | } | 274 | } |
| 258 | .insights-details { | 275 | .insights-details { |
| 259 | width: 490px; | 276 | width: 490px; |
| 260 | } | 277 | } |
| 261 | 278 | ||
| 262 | } | 279 | } |
| 263 | /* Portrait and Landscape */ | 280 | /* Portrait and Landscape */ |
| 264 | @media only screen | 281 | @media only screen |
| 265 | and (min-width: 1024px) | 282 | and (min-width: 1024px) |
| 266 | and (max-height: 1366px) | 283 | and (max-height: 1366px) |
| 267 | and (orientation: landscape) | 284 | and (orientation: landscape) |
| 268 | and (-webkit-min-device-pixel-ratio: 1.5) { | 285 | and (-webkit-min-device-pixel-ratio: 1.5) { |
| 269 | .insights-details { | 286 | .insights-details { |
| 270 | width: 620px; | 287 | width: 620px; |
| 271 | } | 288 | } |
| 272 | } | 289 | } |
| 273 | @media only screen | 290 | @media only screen |
| 274 | and (min-device-width: 1024px) | 291 | and (min-device-width: 1024px) |
| 275 | and (max-device-width: 1024px) | 292 | and (max-device-width: 1024px) |
| 276 | and (orientation: portrait) | 293 | and (orientation: portrait) |
| 277 | and (-webkit-min-device-pixel-ratio: 2) { | 294 | and (-webkit-min-device-pixel-ratio: 2) { |
| 278 | .replies-wrp{ width: 760px;} | 295 | .replies-wrp{ width: 760px;} |
| 279 | } | 296 | } |
| 280 | /* / | 297 | /* / |
| 281 | 298 | ||
| 282 | /* Portrait */ | 299 | /* Portrait */ |
| 283 | @media only screen | 300 | @media only screen |
| 284 | and (min-device-width: 768px) | 301 | and (min-device-width: 768px) |
| 285 | and (max-device-width: 1024px) | 302 | and (max-device-width: 1024px) |
| 286 | and (orientation: portrait) | 303 | and (orientation: portrait) |
| 287 | and (-webkit-min-device-pixel-ratio: 1) { | 304 | and (-webkit-min-device-pixel-ratio: 1) { |
| 288 | .col-reverse{ | 305 | .col-reverse{ |
| 289 | flex-direction:unset;} | 306 | flex-direction:unset;} |
| 290 | .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;} | 307 | .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;} |
| 291 | .card-warpper{ float: left;} | 308 | .card-warpper{ float: left;} |
| 292 | .add-card-warpper{ float: left; margin-top: 0px;} | 309 | .add-card-warpper{ float: left; margin-top: 0px;} |
| 293 | .user-profile{ width: 540px; | 310 | .user-profile{ width: 540px; |
| 294 | margin-left: 30px; margin-top: 0px;} | 311 | margin-left: 30px; margin-top: 0px;} |
| 295 | .replies-wrp{ width: 100%; margin-left: 0px;} | 312 | .replies-wrp{ width: 100%; margin-left: 0px;} |
| 296 | .replies { padding-top: 100px;} | 313 | .replies { padding-top: 100px;} |
| 297 | .profile-tab li a{ font-size: 17px;} | 314 | .profile-tab li a{ font-size: 17px;} |
| 298 | .profile-tab li{ margin-right: 15px;} | 315 | .profile-tab li{ margin-right: 15px;} |
| 299 | .members-wrp .member-list{ margin-right: 50px;} | 316 | .members-wrp .member-list{ margin-right: 50px;} |
| 300 | .insights-spc { | 317 | .insights-spc { |
| 301 | padding: 0 70px; | 318 | padding: 0 70px; |
| 302 | } | 319 | } |
| 303 | } | 320 | } |
| 304 | /* Portrait and Landscape */ | 321 | /* Portrait and Landscape */ |
| 305 | @media only screen | 322 | @media only screen |
| 306 | and (min-device-width: 768px) | 323 | and (min-device-width: 768px) |
| 307 | and (max-device-width: 1024px) | 324 | and (max-device-width: 1024px) |
| 308 | and (-webkit-min-device-pixel-ratio: 1) { | 325 | and (-webkit-min-device-pixel-ratio: 1) { |
| 309 | .main-wrp{background-position: bottom -10px left -130px !important;} | 326 | .main-wrp{background-position: bottom -10px left -130px !important;} |
| 310 | .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;} | 327 | .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;} |
| 311 | .user-profile{padding-right: 0px; width: 380px;} | 328 | .user-profile{padding-right: 0px; width: 380px;} |
| 312 | .card-warpper{margin-bottom: 40px; margin-right: 25px;} | 329 | .card-warpper{margin-bottom: 40px; margin-right: 25px;} |
| 313 | .profile-tab li a{ font-size: 17px;} | 330 | .profile-tab li a{ font-size: 17px;} |
| 314 | .profile-tab li{ margin-right: 15px;} | 331 | .profile-tab li{ margin-right: 15px;} |
| 315 | .members-wrp{ width: 700px;} | 332 | .members-wrp{ width: 700px;} |
| 316 | .members-wrp .member-list{ width: 320px; margin-right: 25px;} | 333 | .members-wrp .member-list{ width: 320px; margin-right: 25px;} |
| 317 | .insights-details { | 334 | .insights-details { |
| 318 | width:520px; | 335 | width:520px; |
| 319 | } | 336 | } |
| 320 | .insights-wrp{ padding: 0 50px 0 40px;} | 337 | .insights-wrp{ padding: 0 50px 0 40px;} |
| 321 | } | 338 | } |
| 322 | 339 | ||
| 323 | 340 |
src/assets/images/facebook.png
src/components/LandingPage.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <div class="container-fluid main-wrp"> | 3 | <div class="container-fluid main-wrp"> |
| 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 | 21 | ||
| 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 23 | <ul class="navbar-nav mr-auto"> | 23 | <ul class="navbar-nav mr-auto"> |
| 24 | <li class="nav-item active"> | 24 | <li class="nav-item active"> |
| 25 | <a class="nav-link" href="javascript:void(0);">About</a> | 25 | <a class="nav-link" href="javascript:void(0);">About</a> |
| 26 | </li> | 26 | </li> |
| 27 | <li class="nav-item"> | 27 | <li class="nav-item"> |
| 28 | <a class="nav-link" href="javascript:void(0);">Masterclass</a> | 28 | <a class="nav-link" href="javascript:void(0);">Masterclass</a> |
| 29 | </li> | 29 | </li> |
| 30 | <li class="nav-item"> | 30 | <li class="nav-item"> |
| 31 | <a class="nav-link" href="javascript:void(0);">Stories</a> | 31 | <a class="nav-link" href="javascript:void(0);">Stories</a> |
| 32 | </li> | 32 | </li> |
| 33 | <li class="nav-item spotLight-img"> | 33 | <li class="nav-item spotLight-img"> |
| 34 | <a class="nav-link" href="javascript:void(0);" | 34 | <a class="nav-link" href="javascript:void(0);" |
| 35 | ><img src="../assets/images/SPOTLight.svg" | 35 | ><img src="../assets/images/SPOTLight.svg" |
| 36 | /></a> | 36 | /></a> |
| 37 | </li> | 37 | </li> |
| 38 | <li class="nav-item"> | 38 | <li class="nav-item"> |
| 39 | <a class="nav-link" href="javascript:void(0);">Library</a> | 39 | <a class="nav-link" href="javascript:void(0);">Library</a> |
| 40 | </li> | 40 | </li> |
| 41 | </ul> | 41 | </ul> |
| 42 | </div> | 42 | </div> |
| 43 | </nav> | 43 | </nav> |
| 44 | <!-- menu wrapper --> | 44 | <!-- menu wrapper --> |
| 45 | <div class="sign-wrp"> | 45 | <div class="sign-login-wrp"> |
| 46 | <div class="row col-reverse"> | ||
| 47 | <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | ||
| 48 | <!-- users land image --> | 46 | <!-- users land image --> |
| 49 | <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | 47 | <div class="s-l-left-section"> |
| 50 | <h1 class="welcome-hd-back"> | 48 | <h1 class="welcome-hd-back"> |
| 51 | we’re stoked | 49 | we’re stoked |
| 52 | you’re back! | 50 | you’re back! |
| 53 | </h1> | 51 | </h1> |
| 54 | </div> | 52 | </div> |
| 55 | <!-- users land image --> | 53 | <!-- users land image --> |
| 56 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 54 | <div class="s-l-right-section"> |
| 57 | <div class="form-layout signup-frm-spc"> | 55 | <div class="form-layout"> |
| 58 | <form v-on:keyup.enter="loginWIthEmail"> | 56 | <form v-on:keyup.enter="loginWIthEmail"> |
| 59 | <h5>Log In using</h5> | 57 | <h5>Log In using</h5> |
| 60 | <div class="social-login"> | 58 | <div class="social-login"> |
| 61 | <ul> | 59 | <ul> |
| 62 | <li> | 60 | <li> |
| 63 | <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a> | 61 | <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a> |
| 64 | </li> | 62 | </li> |
| 65 | <li> | 63 | <li> |
| 66 | <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a> | 64 | <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a> |
| 67 | </li> | 65 | </li> |
| 68 | <li> | 66 | <li> |
| 69 | <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a> | 67 | <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a> |
| 70 | </li> | 68 | </li> |
| 71 | </ul> | 69 | </ul> |
| 72 | </div> | 70 | </div> |
| 73 | <h5>or Log In with email</h5> | 71 | <h5>or Log In with email</h5> |
| 74 | <div class="fill-form"> | 72 | <div class="fill-form"> |
| 75 | <label for="inputEmail" class="sr-only">Email address</label> | 73 | <label for="inputEmail" class="sr-only">Email address</label> |
| 76 | <input | 74 | <input |
| 77 | type="email" | 75 | type="email" |
| 78 | id="inputEmail" | 76 | id="inputEmail" |
| 79 | class="form-control" | 77 | class="form-control" |
| 80 | placeholder="Your Email ID" | 78 | placeholder="Your Email ID" |
| 81 | v-model="userData.email" | 79 | v-model="userData.email" |
| 82 | /> | 80 | /> |
| 83 | <label for="inputPassword" class="sr-only">Password</label> | 81 | <label for="inputPassword" class="sr-only">Password</label> |
| 84 | <input | 82 | <input |
| 85 | type="password" | 83 | type="password" |
| 86 | id="inputPassword" | 84 | id="inputPassword" |
| 87 | class="form-control" | 85 | class="form-control" |
| 88 | placeholder="Password" | 86 | placeholder="Password" |
| 89 | v-model="userData.password" | 87 | v-model="userData.password" |
| 90 | /> | 88 | /> |
| 91 | 89 | ||
| 92 | <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" | 90 | <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" |
| 93 | @click="loginWIthEmail"> | 91 | @click="loginWIthEmail"> |
| 94 | <img src="../assets/images/key.svg" /> Log In to your account | 92 | <img src="../assets/images/key.svg" /> Log In to your account |
| 95 | </a> | 93 | </a> |
| 96 | <p class="forget-pass light-font-weight"> | 94 | <p class="forget-pass light-font-weight"> |
| 97 | Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a> | 95 | Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a> |
| 98 | </p> | 96 | </p> |
| 99 | <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3> | 97 | <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3> |
| 100 | </div> | 98 | </div> |
| 101 | </form> | 99 | </form> |
| 102 | </div> | 100 | </div> |
| 103 | </div> | 101 | </div> |
| 104 | <!-- sign up --> | 102 | <!-- sign up --> |
| 105 | </div> </div> | 103 | </div> |
| 106 | <!-- body wrapper --> | 104 | <!-- body wrapper --> |
| 107 | </div> | 105 | </div> |
| 108 | </main> | 106 | </main> |
| 109 | </template> | 107 | </template> |
| 110 | 108 | ||
| 111 | <script> | 109 | <script> |
| 112 | 110 | ||
| 113 | import Vue from "vue"; | 111 | import Vue from "vue"; |
| 114 | import router from "../router"; | 112 | import router from "../router"; |
| 115 | import $ from "jquery"; | 113 | import $ from "jquery"; |
| 116 | import axios from "axios"; | 114 | import axios from "axios"; |
| 117 | 115 | ||
| 118 | export default { | 116 | export default { |
| 119 | name: "LandingPage", | 117 | name: "LandingPage", |
| 120 | 118 | ||
| 121 | data() { | 119 | data() { |
| 122 | return { | 120 | return { |
| 123 | loggedinFlag: false, | 121 | loggedinFlag: false, |
| 124 | userData:{}, | 122 | userData:{}, |
| 125 | }; | 123 | }; |
| 126 | }, | 124 | }, |
| 127 | mounted() { | 125 | mounted() { |
| 128 | // this.$auth.logout(); | 126 | // this.$auth.logout(); |
| 129 | localStorage.removeItem("spotlight_usertoken"); | 127 | // localStorage.removeItem("spotlight_usertoken"); |
| 130 | localStorage.removeItem("spotlight_email"); | 128 | // localStorage.removeItem("spotlight_email"); |
| 129 | var userdata = localStorage.getItem("spotlight_usertoken"); | ||
| 130 | if (userdata) { | ||
| 131 | this.$router.push("/profile"); | ||
| 132 | } | ||
| 131 | }, | 133 | }, |
| 132 | methods: { | 134 | methods: { |
| 133 | login() { | 135 | login() { |
| 134 | this.$auth.loginWithRedirect(); | 136 | this.$auth.loginWithRedirect(); |
| 135 | }, | 137 | }, |
| 136 | goToSignUp(){ | 138 | goToSignUp(){ |
| 137 | this.$router.push("/"); | 139 | this.$router.push("/"); |
| 138 | }, | 140 | }, |
| 139 | goToReset() { | 141 | goToReset() { |
| 140 | this.$router.push("/reset"); | 142 | this.$router.push("/reset"); |
| 141 | }, | 143 | }, |
| 142 | loginWIthEmail(){ | 144 | loginWIthEmail(){ |
| 143 | axios | 145 | axios |
| 144 | .post("/login", this.userData) | 146 | .post("/login", this.userData) |
| 145 | .then((response) => { | 147 | .then((response) => { |
| 146 | console.log("login- response",response) | 148 | console.log("login- response",response) |
| 147 | this.$toaster.success(response.data.message) | 149 | this.$toaster.success(response.data.message) |
| 148 | if(response.data.status == 'success'){ | 150 | if(response.data.status == 'success'){ |
| 149 | localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) | 151 | localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) |
| 150 | this.$router.push("/profile"); | 152 | this.$router.push("/profile"); |
| 151 | } | 153 | } |
| 152 | }) | 154 | }) |
| 153 | .catch( (error) =>{ | 155 | .catch( (error) =>{ |
| 154 | if (error.response) { | 156 | if (error.response) { |
| 155 | this.$toaster.error(error.response.data.message) | 157 | this.$toaster.error(error.response.data.message) |
| 156 | if(error.response.data.message == 'Email Not Verified'){ | 158 | if(error.response.data.message == 'Email Not Verified'){ |
| 157 | localStorage.setItem('spotlight_email', this.userData.email); | 159 | localStorage.setItem('spotlight_email', this.userData.email); |
| 158 | this.$router.push({ name: 'Otp', params: { flag: true }}); | 160 | this.$router.push({ name: 'Otp', params: { flag: true }}); |
| 159 | } | 161 | } |
| 160 | } | 162 | } |
| 161 | }); | 163 | }); |
| 162 | } | 164 | } |
| 163 | }, | 165 | }, |
| 164 | }; | 166 | }; |
| 165 | </script> | 167 | </script> |
| 166 | <style> | 168 | <style> |
| 167 | .light-font-weight { | 169 | .light-font-weight { |
| 168 | font-weight: 500 !important; | 170 | font-weight: 500 !important; |
| 169 | } | 171 | } |
| 170 | .no-underline{ | 172 | .no-underline{ |
| 171 | text-decoration: none; | 173 | text-decoration: none; |
| 172 | } | 174 | } |
| 173 | 175 |
src/components/Profile.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <!-- profile --> | 3 | <!-- profile --> |
| 4 | <div class="popup-wrp" style="display: none"> | 4 | <div class="popup-wrp" style="display: none"> |
| 5 | <div class="overlay" @click="hideDialog"></div> | 5 | <div class="overlay" @click="hideDialog"></div> |
| 6 | <div class="popup-set" id="add-profile" style="display: none"> | 6 | <div class="popup-set" id="add-profile" style="display: none"> |
| 7 | <div class="popup-header"> | 7 | <div class="popup-header"> |
| 8 | <div class="user-photo common_color"> | 8 | <div class="user-photo common_color"> |
| 9 | <img :src="userData.profilePic" /> | 9 | <img :src="userData.profilePic" /> |
| 10 | </div> | 10 | </div> |
| 11 | <!-- header user --> | 11 | <!-- header user --> |
| 12 | 12 | ||
| 13 | <ul> | 13 | <ul> |
| 14 | <li> | 14 | <li> |
| 15 | <a href="javasript:void(0);" | 15 | <a href="javasript:void(0);" |
| 16 | ><img src="../assets/images/replace.svg" /><span | 16 | ><img src="../assets/images/replace.svg" /><span |
| 17 | >Replace Avatar</span | 17 | >Replace Avatar</span |
| 18 | ></a | 18 | ></a |
| 19 | > | 19 | > |
| 20 | </li> | 20 | </li> |
| 21 | <li> | 21 | <li> |
| 22 | <a href="javasript:void(0);" @click="getRandomAvatar()" | 22 | <a href="javasript:void(0);" @click="getRandomAvatar()" |
| 23 | ><img src="../assets/images/randomise.svg" /><span | 23 | ><img src="../assets/images/randomise.svg" /><span |
| 24 | >Randomise Avatar</span | 24 | >Randomise Avatar</span |
| 25 | ></a | 25 | ></a |
| 26 | > | 26 | > |
| 27 | </li> | 27 | </li> |
| 28 | </ul> | 28 | </ul> |
| 29 | </div> | 29 | </div> |
| 30 | <!-- header --> | 30 | <!-- header --> |
| 31 | <div class="popup-body"> | 31 | <div class="popup-body"> |
| 32 | <form class="popup-forms"> | 32 | <form class="popup-forms"> |
| 33 | <div class="row"> | 33 | <div class="row"> |
| 34 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | 34 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> |
| 35 | <div class="form-group floating-label"> | 35 | <div class="form-group floating-label"> |
| 36 | <input | 36 | <input |
| 37 | type="text" | 37 | type="text" |
| 38 | class="form-control" | 38 | class="form-control" |
| 39 | v-model="userData.firstName" | 39 | v-model="userData.firstName" |
| 40 | placeholder=" " | 40 | placeholder=" " |
| 41 | id="fname" | 41 | id="fname" |
| 42 | /> | 42 | /> |
| 43 | <label for="fname">First Name</label> | 43 | <label for="fname">First Name</label> |
| 44 | </div> | 44 | </div> |
| 45 | </div> | 45 | </div> |
| 46 | <!-- input --> | 46 | <!-- input --> |
| 47 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> | 47 | <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> |
| 48 | <div class="form-group floating-label"> | 48 | <div class="form-group floating-label"> |
| 49 | <input | 49 | <input |
| 50 | type="text" | 50 | type="text" |
| 51 | class="form-control" | 51 | class="form-control" |
| 52 | value="" | 52 | value="" |
| 53 | placeholder=" " | 53 | placeholder=" " |
| 54 | id="lname" | 54 | id="lname" |
| 55 | v-model="userData.lastName" | 55 | v-model="userData.lastName" |
| 56 | /> | 56 | /> |
| 57 | <label for="lname" class="lname">Last Name</label> | 57 | <label for="lname" class="lname">Last Name</label> |
| 58 | </div> | 58 | </div> |
| 59 | </div> | 59 | </div> |
| 60 | <!-- input --> | 60 | <!-- input --> |
| 61 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> | 61 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> |
| 62 | <div class="form-group floating-label"> | 62 | <div class="form-group floating-label"> |
| 63 | <input | 63 | <input |
| 64 | type="text" | 64 | type="text" |
| 65 | class="form-control" | 65 | class="form-control" |
| 66 | value="" | 66 | value="" |
| 67 | v-model="userData.designation" | 67 | v-model="userData.designation" |
| 68 | placeholder=" " | 68 | placeholder=" " |
| 69 | id="designation" | 69 | id="designation" |
| 70 | /> | 70 | /> |
| 71 | <label for="designation">Designation</label> | 71 | <label for="designation">Designation</label> |
| 72 | </div> | 72 | </div> |
| 73 | </div> | 73 | </div> |
| 74 | <!-- input --> | 74 | <!-- input --> |
| 75 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 75 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 76 | <div class="form-group floating-label"> | 76 | <div class="form-group floating-label"> |
| 77 | <input | 77 | <input |
| 78 | type="text" | 78 | type="text" |
| 79 | class="form-control" | 79 | class="form-control" |
| 80 | v-model="userData.organisation" | 80 | v-model="userData.organisation" |
| 81 | id="company" | 81 | id="company" |
| 82 | placeholder=" " | 82 | placeholder=" " |
| 83 | /> | 83 | /> |
| 84 | <label for="company">Company</label> | 84 | <label for="company">Company</label> |
| 85 | </div> | 85 | </div> |
| 86 | </div> | 86 | </div> |
| 87 | <!-- input --> | 87 | <!-- input --> |
| 88 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 88 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 89 | <div class="form-group floating-label"> | 89 | <div class="form-group floating-label"> |
| 90 | <textarea | 90 | <textarea |
| 91 | type="text" | 91 | type="text" |
| 92 | class="form-control" | 92 | class="form-control" |
| 93 | value="" | 93 | value="" |
| 94 | v-model="userData.bio" | 94 | v-model="userData.bio" |
| 95 | id="yourself" | 95 | id="yourself" |
| 96 | placeholder=" " | 96 | placeholder=" " |
| 97 | ></textarea> | 97 | ></textarea> |
| 98 | <label for="yourself" | 98 | <label for="yourself" |
| 99 | >Tell others a little about yourself</label | 99 | >Tell others a little about yourself</label |
| 100 | > | 100 | > |
| 101 | </div> | 101 | </div> |
| 102 | </div> | 102 | </div> |
| 103 | <!-- input --> | 103 | <!-- input --> |
| 104 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 104 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 105 | <p class="things">Three things that you talk more about</p> | 105 | <p class="things">Three things that you talk more about</p> |
| 106 | 106 | ||
| 107 | <ul class="interests"> | 107 | <ul class="interests"> |
| 108 | <li v-for="(interest, i) in userData.interests" :key="i"> | 108 | <li v-for="(interest, i) in userData.interests" :key="i"> |
| 109 | <span>{{ interest }}</span> | 109 | <span>{{ interest }}</span> |
| 110 | <a | 110 | <a |
| 111 | href="javascript:void(0);" | 111 | href="javascript:void(0);" |
| 112 | @click="removeInterest(i)" | 112 | @click="removeInterest(i)" |
| 113 | class="cat-minus" | 113 | class="cat-minus" |
| 114 | ><img src="../assets/images/minus.svg" | 114 | ><img src="../assets/images/minus.svg" |
| 115 | /></a> | 115 | /></a> |
| 116 | </li> | 116 | </li> |
| 117 | <li> | 117 | <li> |
| 118 | <input | 118 | <input |
| 119 | class="" | 119 | class="" |
| 120 | placeholder="Add interest" | 120 | placeholder="Add interest" |
| 121 | v-on:keyup.enter="addInterest" | 121 | v-on:keyup.enter="addInterest" |
| 122 | v-model="interestName" | 122 | v-model="interestName" |
| 123 | /> | 123 | /> |
| 124 | <a href="javascript:void(0);" @click="addInterest()" | 124 | <a href="javascript:void(0);" @click="addInterest()" |
| 125 | ><img src="../assets/images/plus-circle.svg" | 125 | ><img src="../assets/images/plus-circle.svg" |
| 126 | /></a> | 126 | /></a> |
| 127 | </li> | 127 | </li> |
| 128 | </ul> | 128 | </ul> |
| 129 | </div> | 129 | </div> |
| 130 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> | 130 | <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> |
| 131 | <p class="things">Choose Background color</p> | 131 | <p class="things">Choose Background color</p> |
| 132 | 132 | ||
| 133 | <ul class="colors"> | 133 | <ul class="colors"> |
| 134 | <li> | 134 | <li> |
| 135 | <a | 135 | <a |
| 136 | href="javascript:void(0);" | 136 | href="javascript:void(0);" |
| 137 | id="#C4C4C4" | 137 | id="#C4C4C4" |
| 138 | class="silver" | 138 | class="silver" |
| 139 | @click="changeColor('#C4C4C4')" | 139 | @click="changeColor('#C4C4C4')" |
| 140 | ></a> | 140 | ></a> |
| 141 | </li> | 141 | </li> |
| 142 | <li> | 142 | <li> |
| 143 | <a | 143 | <a |
| 144 | href="javascript:void(0);" | 144 | href="javascript:void(0);" |
| 145 | id="#FFF6D7" | 145 | id="#FFF6D7" |
| 146 | class="milk-punch" | 146 | class="milk-punch" |
| 147 | @click="changeColor('#FFF6D7')" | 147 | @click="changeColor('#FFF6D7')" |
| 148 | ></a> | 148 | ></a> |
| 149 | </li> | 149 | </li> |
| 150 | <li> | 150 | <li> |
| 151 | <a | 151 | <a |
| 152 | href="javascript:void(0);" | 152 | href="javascript:void(0);" |
| 153 | id="#BDDBFF" | 153 | id="#BDDBFF" |
| 154 | class="french-pass" | 154 | class="french-pass" |
| 155 | @click="changeColor('#BDDBFF')" | 155 | @click="changeColor('#BDDBFF')" |
| 156 | ></a> | 156 | ></a> |
| 157 | </li> | 157 | </li> |
| 158 | <li> | 158 | <li> |
| 159 | <a | 159 | <a |
| 160 | href="javascript:void(0);" | 160 | href="javascript:void(0);" |
| 161 | id="#C0FAFE" | 161 | id="#C0FAFE" |
| 162 | class="cyan-french-pass" | 162 | class="cyan-french-pass" |
| 163 | @click="changeColor('#C0FAFE')" | 163 | @click="changeColor('#C0FAFE')" |
| 164 | ></a> | 164 | ></a> |
| 165 | </li> | 165 | </li> |
| 166 | <li> | 166 | <li> |
| 167 | <a | 167 | <a |
| 168 | href="javascript:void(0);" | 168 | href="javascript:void(0);" |
| 169 | id="#FFDBDC" | 169 | id="#FFDBDC" |
| 170 | class="cosmos" | 170 | class="cosmos" |
| 171 | @click="changeColor('#FFDBDC')" | 171 | @click="changeColor('#FFDBDC')" |
| 172 | ></a> | 172 | ></a> |
| 173 | </li> | 173 | </li> |
| 174 | <li> | 174 | <li> |
| 175 | <a | 175 | <a |
| 176 | href="javascript:void(0);" | 176 | href="javascript:void(0);" |
| 177 | id="#FEE6AC" | 177 | id="#FEE6AC" |
| 178 | class="cape-Honey" | 178 | class="cape-Honey" |
| 179 | @click="changeColor('#FEE6AC')" | 179 | @click="changeColor('#FEE6AC')" |
| 180 | ></a> | 180 | ></a> |
| 181 | </li> | 181 | </li> |
| 182 | <li> | 182 | <li> |
| 183 | <a | 183 | <a |
| 184 | href="javascript:void(0);" | 184 | href="javascript:void(0);" |
| 185 | id="#E5DFF0" | 185 | id="#E5DFF0" |
| 186 | class="snuff" | 186 | class="snuff" |
| 187 | @click="changeColor('#E5DFF0')" | 187 | @click="changeColor('#E5DFF0')" |
| 188 | ></a> | 188 | ></a> |
| 189 | </li> | 189 | </li> |
| 190 | <li> | 190 | <li> |
| 191 | <a | 191 | <a |
| 192 | href="javascript:void(0);" | 192 | href="javascript:void(0);" |
| 193 | id="#DFE7EF" | 193 | id="#DFE7EF" |
| 194 | class="catskillWhite" | 194 | class="catskillWhite" |
| 195 | @click="changeColor('#DFE7EF')" | 195 | @click="changeColor('#DFE7EF')" |
| 196 | ></a> | 196 | ></a> |
| 197 | </li> | 197 | </li> |
| 198 | <li> | 198 | <li> |
| 199 | <a | 199 | <a |
| 200 | href="javascript:void(0);" | 200 | href="javascript:void(0);" |
| 201 | id="#FFF" | 201 | id="#FFF" |
| 202 | class="white" | 202 | class="white" |
| 203 | @click="changeColor('#FFF')" | 203 | @click="changeColor('#FFF')" |
| 204 | ></a> | 204 | ></a> |
| 205 | </li> | 205 | </li> |
| 206 | </ul> | 206 | </ul> |
| 207 | </div> | 207 | </div> |
| 208 | <div class="col-lg-12 mt-50"> | 208 | <div class="col-lg-12 mt-50"> |
| 209 | <p class="notifications"> | 209 | <p class="notifications"> |
| 210 | Recieve notifications when you recieve a comment/ Upvote | 210 | Recieve notifications when you recieve a comment/ Upvote |
| 211 | </p> | 211 | </p> |
| 212 | <div class="switch-bt-wrp"> | 212 | <div class="switch-bt-wrp"> |
| 213 | <label class="switch-btn"> | 213 | <label class="switch-btn"> |
| 214 | <input type="checkbox" class="toggle-btn" /> | 214 | <input type="checkbox" class="toggle-btn" /> |
| 215 | <span class="rounded-toggle"></span> | 215 | <span class="rounded-toggle"></span> |
| 216 | </label> | 216 | </label> |
| 217 | <span class="onoff">on/off</span> | 217 | <span class="onoff">on/off</span> |
| 218 | </div> | 218 | </div> |
| 219 | </div> | 219 | </div> |
| 220 | <div class="col-lg-12"> | 220 | <div class="col-lg-12"> |
| 221 | <p class="add-socail-ch"> | 221 | <p class="add-socail-ch"> |
| 222 | Add your social Channels <span></span> | 222 | Add your social Channels <span></span> |
| 223 | </p> | 223 | </p> |
| 224 | </div> | 224 | </div> |
| 225 | 225 | ||
| 226 | <div | 226 | <div |
| 227 | class="row" | 227 | class="row" |
| 228 | style="width: 100%" | 228 | style="width: 100%" |
| 229 | v-for="(social, i) in selectedSocialLink" | 229 | v-for="(social, i) in selectedSocialLink" |
| 230 | :key="i" | 230 | :key="i" |
| 231 | > | 231 | > |
| 232 | <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 232 | <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 233 | <div class="form-group floating-label"> | 233 | <div class="form-group floating-label"> |
| 234 | <select class="form-group"> | 234 | <select class="form-group"> |
| 235 | <option value="Linkedin">{{ social.displayName }}</option> | 235 | <option value="Linkedin">{{ social.displayName }}</option> |
| 236 | </select> | 236 | </select> |
| 237 | <span class="select-arrow" | 237 | <span class="select-arrow" |
| 238 | ><img src="../assets/images/chevron-down.svg" | 238 | ><img src="../assets/images/chevron-down.svg" |
| 239 | /></span> | 239 | /></span> |
| 240 | </div> | 240 | </div> |
| 241 | </div> | 241 | </div> |
| 242 | <!-- input --> | 242 | <!-- input --> |
| 243 | <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 243 | <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 244 | <div class="form-group floating-label"> | 244 | <div class="form-group floating-label"> |
| 245 | <input | 245 | <input |
| 246 | type="text" | 246 | type="text" |
| 247 | class="form-control" | 247 | class="form-control" |
| 248 | value="" | 248 | value="" |
| 249 | placeholder="Paste your profile URL here" | 249 | placeholder="Paste your profile URL here" |
| 250 | id="" | 250 | id="" |
| 251 | v-model="social.fieldValue" | 251 | v-model="social.fieldValue" |
| 252 | /> | 252 | /> |
| 253 | </div> | 253 | </div> |
| 254 | </div> | 254 | </div> |
| 255 | <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> | 255 | <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> |
| 256 | <ul class="interests"> | 256 | <ul class="interests"> |
| 257 | <li> | 257 | <li> |
| 258 | <a | 258 | <a |
| 259 | @click="removeSocialLink(i)" | 259 | @click="removeSocialLink(i)" |
| 260 | href="javascript:void(0);" | 260 | href="javascript:void(0);" |
| 261 | class="cat-minus" | 261 | class="cat-minus" |
| 262 | ><img src="../assets/images/minus.svg" | 262 | ><img src="../assets/images/minus.svg" |
| 263 | /></a> | 263 | /></a> |
| 264 | </li> | 264 | </li> |
| 265 | </ul> | 265 | </ul> |
| 266 | </div> | 266 | </div> |
| 267 | </div> | 267 | </div> |
| 268 | <!-- input --> | 268 | <!-- input --> |
| 269 | 269 | ||
| 270 | <!-- input --> | 270 | <!-- input --> |
| 271 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 271 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> |
| 272 | <div class="form-group floating-label"> | 272 | <div class="form-group floating-label"> |
| 273 | <select | 273 | <select |
| 274 | class="form-group" | 274 | class="form-group" |
| 275 | v-model="currentLink" | 275 | v-model="currentLink" |
| 276 | v-on:change="addSocialLink(currentLink)" | 276 | v-on:change="addSocialLink(currentLink)" |
| 277 | > | 277 | > |
| 278 | <option value="null">Add another</option> | 278 | <option value="null">Add another</option> |
| 279 | <option | 279 | <option |
| 280 | v-for="(social, i) in socialLink" | 280 | v-for="(social, i) in socialLink" |
| 281 | :key="i" | 281 | :key="i" |
| 282 | :value="social.fieldName" | 282 | :value="social.fieldName" |
| 283 | > | 283 | > |
| 284 | {{ social.displayName }} | 284 | {{ social.displayName }} |
| 285 | </option> | 285 | </option> |
| 286 | </select> | 286 | </select> |
| 287 | <span class="select-arrow" | 287 | <span class="select-arrow" |
| 288 | ><img src="../assets/images/chevron-down.svg" | 288 | ><img src="../assets/images/chevron-down.svg" |
| 289 | /></span> | 289 | /></span> |
| 290 | </div> | 290 | </div> |
| 291 | </div> | 291 | </div> |
| 292 | <!-- input --> | 292 | <!-- input --> |
| 293 | </div> | 293 | </div> |
| 294 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" | 294 | <a href="javascript:void(0);" @click="saveProfile" class="next-bt" |
| 295 | >Save</a | 295 | >Save</a |
| 296 | > | 296 | > |
| 297 | </form> | 297 | </form> |
| 298 | </div> | 298 | </div> |
| 299 | <div class="clearfix"></div> | 299 | <div class="clearfix"></div> |
| 300 | </div> | 300 | </div> |
| 301 | <!-- add profile --> | 301 | <!-- add profile --> |
| 302 | </div> | 302 | </div> |
| 303 | <!-- profile --> | 303 | <!-- profile --> |
| 304 | <div class="container-fluid inner-wrp"> | 304 | <div class="container-fluid inner-wrp"> |
| 305 | <nav class="navbar navbar-expand-sm spotLight-nav"> | 305 | <nav class="navbar navbar-expand-sm spotLight-nav"> |
| 306 | <a class="navbar-brand" href="javasript:void(0);" | 306 | <a class="navbar-brand" href="javasript:void(0);" |
| 307 | ><img src="../assets/images/logo.png" | 307 | ><img src="../assets/images/logo.png" |
| 308 | /></a> | 308 | /></a> |
| 309 | <button | 309 | <button |
| 310 | class="navbar-toggler" | 310 | class="navbar-toggler" |
| 311 | type="button" | 311 | type="button" |
| 312 | data-toggle="collapse" | 312 | data-toggle="collapse" |
| 313 | data-target="#navbarsExample03" | 313 | data-target="#navbarsExample03" |
| 314 | aria-controls="navbarsExample03" | 314 | aria-controls="navbarsExample03" |
| 315 | aria-expanded="false" | 315 | aria-expanded="false" |
| 316 | aria-label="Toggle navigation" | 316 | aria-label="Toggle navigation" |
| 317 | > | 317 | > |
| 318 | <span class="navbar-toggler-icon"></span> | 318 | <span class="navbar-toggler-icon"></span> |
| 319 | <span class="navbar-toggler-icon"></span> | 319 | <span class="navbar-toggler-icon"></span> |
| 320 | <span class="navbar-toggler-icon"></span> | 320 | <span class="navbar-toggler-icon"></span> |
| 321 | </button> | 321 | </button> |
| 322 | 322 | ||
| 323 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 323 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 324 | <ul class="navbar-nav mr-auto"> | 324 | <ul class="navbar-nav mr-auto"> |
| 325 | <li class="nav-item active"> | 325 | <li class="nav-item active"> |
| 326 | <a class="nav-link" href="javasript:void(0);">About</a> | 326 | <a class="nav-link" href="javasript:void(0);">About</a> |
| 327 | </li> | 327 | </li> |
| 328 | <li class="nav-item"> | 328 | <li class="nav-item"> |
| 329 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> | 329 | <a class="nav-link" href="javasript:void(0);">Masterclass</a> |
| 330 | </li> | 330 | </li> |
| 331 | <li class="nav-item"> | 331 | <li class="nav-item"> |
| 332 | <a class="nav-link" href="javasript:void(0);">Stories</a> | 332 | <a class="nav-link" href="javasript:void(0);">Stories</a> |
| 333 | </li> | 333 | </li> |
| 334 | <li class="nav-item"> | 334 | <li class="nav-item"> |
| 335 | <a class="nav-link" href="javasript:void(0);">Library</a> | 335 | <a class="nav-link" href="javasript:void(0);">Library</a> |
| 336 | </li> | 336 | </li> |
| 337 | </ul> | 337 | </ul> |
| 338 | </div> | 338 | </div> |
| 339 | <a | 339 | <a |
| 340 | v-if="this.userData.firstLogin" | 340 | v-if="this.userData.firstLogin" |
| 341 | href="javasript:void(0);" | 341 | href="javasript:void(0);" |
| 342 | @click="addProfileDialog" | 342 | @click="addProfileDialog" |
| 343 | class="update_profile" | 343 | class="update_profile" |
| 344 | ><span></span> Update Profile</a | 344 | ><span></span> Update Profile</a |
| 345 | > | 345 | > |
| 346 | <div class=""> | 346 | <div class=""> |
| 347 | <a | 347 | <a |
| 348 | href="javascript:void(0);" | 348 | href="javascript:void(0);" |
| 349 | class="user-profile-photo common_color" | 349 | class="user-profile-photo common_color" |
| 350 | @click="userprofileshowDialog" | 350 | @click="userprofileshowDialog" |
| 351 | ><img :src="userData.profilePic" | 351 | ><img :src="userData.profilePic" |
| 352 | /></a> | 352 | /></a> |
| 353 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> | 353 | <div class="sub-menu-user" id="userprofileshow" style="display: none"> |
| 354 | <ul> | 354 | <ul> |
| 355 | <li> | 355 | <li> |
| 356 | <a href="javascript:void(0);" @click="addProfileDialog" | 356 | <a href="javascript:void(0);" @click="addProfileDialog" |
| 357 | >Edit Profile</a | 357 | >Edit Profile</a |
| 358 | > | 358 | > |
| 359 | </li> | 359 | </li> |
| 360 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | 360 | <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> |
| 361 | </ul> | 361 | </ul> |
| 362 | </div> | 362 | </div> |
| 363 | </div> | 363 | </div> |
| 364 | </nav> | 364 | </nav> |
| 365 | 365 | ||
| 366 | <!-- <Header></Header> --> | 366 | <!-- <Header></Header> --> |
| 367 | <!-- menu wrapper --> | 367 | <!-- menu wrapper --> |
| 368 | <div class="row profile-tab-spc-top"> | 368 | <div class="row profile-tab-spc-top"> |
| 369 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> | 369 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> |
| 370 | <div class="inner-profile-ps common_color"> | 370 | <div class="inner-profile-ps common_color"> |
| 371 | <img :src="userData.profilePic" class="" /> | 371 | <img :src="userData.profilePic" class="" /> |
| 372 | </div> | 372 | </div> |
| 373 | <!-- user profile --> | 373 | <!-- user profile --> |
| 374 | 374 | ||
| 375 | <div class="user-profile"> | 375 | <div class="user-profile"> |
| 376 | <h1> | 376 | <h1> |
| 377 | {{ userData.firstName }} {{ userData.lastName }} | 377 | {{ userData.firstName }} {{ userData.lastName }} |
| 378 | <span | 378 | <span |
| 379 | href="javasript:void(0);" | 379 | href="javasript:void(0);" |
| 380 | class="tags no-cursor no-underline" | 380 | class="tags no-cursor no-underline" |
| 381 | >{{ userData.role }}</span | 381 | >{{ userData.role }}</span |
| 382 | > | 382 | > |
| 383 | </h1> | 383 | </h1> |
| 384 | <ul class="joined-info"> | 384 | <ul class="joined-info"> |
| 385 | <li> | 385 | <li> |
| 386 | <a | 386 | <a |
| 387 | href="javascript:void(0);" | 387 | href="javascript:void(0);" |
| 388 | v-if="!userData.designation && !userData.organisation" | 388 | v-if="!userData.designation && !userData.organisation" |
| 389 | @click="addProfileDialog" | 389 | @click="addProfileDialog" |
| 390 | >Add your work</a | 390 | >Add your work</a |
| 391 | > | 391 | > |
| 392 | <a | 392 | <a |
| 393 | class="no-cursor no-underline" | 393 | class="no-cursor no-underline" |
| 394 | href="javascript:void(0);" | 394 | href="javascript:void(0);" |
| 395 | v-if="userData.designation" | 395 | v-if="userData.designation" |
| 396 | >{{ userData.designation }}</a | 396 | >{{ userData.designation }}</a |
| 397 | > | 397 | > |
| 398 | <a | 398 | <a |
| 399 | class="no-cursor no-underline" | 399 | class="no-cursor no-underline" |
| 400 | href="javascript:void(0);" | 400 | href="javascript:void(0);" |
| 401 | v-if="userData.designation && userData.organisation" | 401 | v-if="userData.designation && userData.organisation" |
| 402 | >at</a | 402 | >at</a |
| 403 | > | 403 | > |
| 404 | <a | 404 | <a |
| 405 | class="no-cursor no-underline" | 405 | class="no-cursor no-underline" |
| 406 | href="javascript:void(0);" | 406 | href="javascript:void(0);" |
| 407 | v-if="userData.organisation" | 407 | v-if="userData.organisation" |
| 408 | >{{ userData.organisation }}</a | 408 | >{{ userData.organisation }}</a |
| 409 | > | 409 | > |
| 410 | <img src="../assets/images/u-info-icon.png" /> <span></span> | 410 | <img src="../assets/images/u-info-icon.png" /> <span></span> |
| 411 | </li> | 411 | </li> |
| 412 | <li> | 412 | <li> |
| 413 | <a href="javasript:void(0);" content="Karma Points" v-tippy> | 413 | <a href="javasript:void(0);" content="Karma Points" v-tippy> |
| 414 | {{ userData.karmaPoints }} Karma</a | 414 | {{ userData.karmaPoints }} Karma</a |
| 415 | > | 415 | > |
| 416 | <span></span> | 416 | <span></span> |
| 417 | </li> | 417 | </li> |
| 418 | <li> | 418 | <li> |
| 419 | <a href="javasript:void(0);" class="no-cursor no-underline" | 419 | <a href="javasript:void(0);" class="no-cursor no-underline" |
| 420 | >Joined on | 420 | >Joined on |
| 421 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a | 421 | {{ moment(userData.createdAt).format("MMM YYYY") }}</a |
| 422 | > | 422 | > |
| 423 | </li> | 423 | </li> |
| 424 | </ul> | 424 | </ul> |
| 425 | <p>{{ userData.bio }}</p> | 425 | <p>{{ userData.bio }}</p> |
| 426 | <div class="talk-to-me-about" v-if="userData.interests.length != 0"> | 426 | <div class="talk-to-me-about" v-if="userData.interests.length != 0"> |
| 427 | <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong> | 427 | <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong> |
| 428 | </div><!-- talk to me about --> | 428 | </div><!-- talk to me about --> |
| 429 | </div> | 429 | </div> |
| 430 | 430 | ||
| 431 | </div> | 431 | </div> |
| 432 | <!-- user profile --> | 432 | <!-- user profile --> |
| 433 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> | 433 | <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> |
| 434 | <div class="list-style-group" v-if="userData.awards.views != null"> | 434 | <div class="list-style-group" v-if="userData.awards.views != null"> |
| 435 | <p>Awards</p> | 435 | <p>Awards</p> |
| 436 | <ul class="list-style"> | 436 | <ul class="list-style"> |
| 437 | <li> | 437 | <li> |
| 438 | <a href="javascript:void(0);" | 438 | <a href="javascript:void(0);" |
| 439 | ><img src="../assets/images/icon-1.png" | 439 | ><img src="../assets/images/icon-1.png" |
| 440 | /></a> | 440 | /></a> |
| 441 | </li> | 441 | </li> |
| 442 | </ul> | 442 | </ul> |
| 443 | </div> | 443 | </div> |
| 444 | <!-- list style --> | 444 | <!-- list style --> |
| 445 | </div> | 445 | </div> |
| 446 | </div> | 446 | </div> |
| 447 | <div class="clearfix"></div> | 447 | <div class="clearfix"></div> |
| 448 | <div class="row top-brd profile-tab-spc-top"> | 448 | <div class="row top-brd profile-tab-spc-top"> |
| 449 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> | 449 | <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> |
| 450 | <ul class="profile-tab"> | 450 | <ul class="profile-tab"> |
| 451 | <li class="active c-0"> | 451 | <li class="active c-0"> |
| 452 | <a href="javascript:void(0);" @click="caseDialog" | 452 | <a href="javascript:void(0);" @click="caseDialog" |
| 453 | >Case-studies({{ caseStudies.length }})</a | 453 | >Case-studies({{ caseStudies.length }})</a |
| 454 | > | 454 | > |
| 455 | </li> | 455 | </li> |
| 456 | <li class="rp-all"> | 456 | <li class="rp-all"> |
| 457 | <a href="javascript:void(0);" @click="repliesDialog" | 457 | <a href="javascript:void(0);" @click="repliesDialog" |
| 458 | >Comments/Replies(0)</a | 458 | >Comments/Replies({{this.userComments.length}})</a |
| 459 | > | 459 | > |
| 460 | </li> | 460 | </li> |
| 461 | </ul> | 461 | </ul> |
| 462 | </div> | 462 | </div> |
| 463 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> | 463 | <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> |
| 464 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> | 464 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> |
| 465 | <li><span>Follow</span></li> | 465 | <li><span>Follow</span></li> |
| 466 | <li v-for="(social, i) in selectedSocialLink" :key="i"> | 466 | <li v-for="(social, i) in selectedSocialLink" :key="i"> |
| 467 | <a | 467 | <a |
| 468 | href="javascript:void(0);" | 468 | href="javascript:void(0);" |
| 469 | @click="openUrl(social.fieldValue)" | 469 | @click="openUrl(social.fieldValue)" |
| 470 | class="cursor-pointer" | 470 | class="cursor-pointer" |
| 471 | ><img :src="social.image" | 471 | ><img :src="social.image" |
| 472 | /></a> | 472 | /></a> |
| 473 | </li> | 473 | </li> |
| 474 | </ul> | 474 | </ul> |
| 475 | <ul class="social-connects" v-if="selectedSocialLink.length == 0"> | 475 | <ul class="social-connects" v-if="selectedSocialLink.length == 0"> |
| 476 | <li> | 476 | <li> |
| 477 | <a | 477 | <a |
| 478 | href="javascript:void(0);" | 478 | href="javascript:void(0);" |
| 479 | @click="addProfileDialog" | 479 | @click="addProfileDialog" |
| 480 | class="active cursor-pointer" | 480 | class="active cursor-pointer" |
| 481 | ><img src="../assets/images/plus.png" | 481 | ><img src="../assets/images/plus.png" |
| 482 | /></a> | 482 | /></a> |
| 483 | <span class="connect-social-channel" | 483 | <span class="connect-social-channel" |
| 484 | >Connect your social channels</span | 484 | >Connect your social channels</span |
| 485 | > | 485 | > |
| 486 | </li> | 486 | </li> |
| 487 | </ul> | 487 | </ul> |
| 488 | </div> | 488 | </div> |
| 489 | </div> | 489 | </div> |
| 490 | <!-- tab style --> | 490 | <!-- tab style --> |
| 491 | <div class="profile-data-wrp"> | 491 | <div class="profile-data-wrp"> |
| 492 | <div class="container-fluid data-wrp" id="case-study-0"> | 492 | <div class="container-fluid data-wrp" id="case-study-0"> |
| 493 | <div class="row" v-if="caseStudies.length == 0"> | 493 | <div class="row" v-if="caseStudies.length == 0"> |
| 494 | <div class="col-6 col-lg-6"> | 494 | <div class="col-6 col-lg-6"> |
| 495 | <div class="full-w-height-profile ex-light seats_bg"> | 495 | <div class="full-w-height-profile ex-light seats_bg"> |
| 496 | <a | 496 | <a |
| 497 | href="javasript:void(0);" | 497 | href="javasript:void(0);" |
| 498 | class="profile-md-bt center-and-spc bt-spc-top" | 498 | class="profile-md-bt center-and-spc bt-spc-top" |
| 499 | @click="openUrl('https://www.productgrowth.org/spotlight')" | 499 | @click="openUrl('https://www.productgrowth.org/spotlight')" |
| 500 | >Explore Spotlights</a | 500 | >Explore Spotlights</a |
| 501 | > | 501 | > |
| 502 | <p>Explore the spotlights others has put together</p> | 502 | <p>Explore the spotlights others has put together</p> |
| 503 | </div> | 503 | </div> |
| 504 | <!-- full width --> | 504 | <!-- full width --> |
| 505 | </div> | 505 | </div> |
| 506 | <!-- col 6 --> | 506 | <!-- col 6 --> |
| 507 | <div class="col-6 col-lg-6"> | 507 | <div class="col-6 col-lg-6"> |
| 508 | <div class="full-w-height-profile ex-light spotlight_bg"> | 508 | <div class="full-w-height-profile ex-light spotlight_bg"> |
| 509 | <img src="../assets/images/add-role.svg" class="add-role" /> | 509 | <img src="../assets/images/add-role.svg" class="add-role" /> |
| 510 | <div class="clearfix"></div> | 510 | <div class="clearfix"></div> |
| 511 | <!-- clearfix --> | 511 | <!-- clearfix --> |
| 512 | <a | 512 | <a |
| 513 | href="javasript:void(0);" | 513 | href="javasript:void(0);" |
| 514 | class="profile-md-bt center-and-spc" | 514 | class="profile-md-bt center-and-spc" |
| 515 | @click=" | 515 | @click=" |
| 516 | openUrl( | 516 | openUrl( |
| 517 | 'https://www.productgrowth.org/spotlight#typeform-spotlight' | 517 | 'https://www.productgrowth.org/spotlight#typeform-spotlight' |
| 518 | ) | 518 | ) |
| 519 | " | 519 | " |
| 520 | >Publish Spotlight</a | 520 | >Publish Spotlight</a |
| 521 | > | 521 | > |
| 522 | <p>Share your own insights through Spotlight</p> | 522 | <p>Share your own insights through Spotlight</p> |
| 523 | </div> | 523 | </div> |
| 524 | <!-- full width --> | 524 | <!-- full width --> |
| 525 | </div> | 525 | </div> |
| 526 | <!-- col 6 --> | 526 | <!-- col 6 --> |
| 527 | </div> | 527 | </div> |
| 528 | 528 | ||
| 529 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> | 529 | <div class="profile-data-wrp" v-if="caseStudies.length != 0"> |
| 530 | <div class="container-fluid data-wrp"> | 530 | <div class="container-fluid data-wrp"> |
| 531 | <div class="row"> | 531 | <div class="row"> |
| 532 | <div class="" v-for="(study, i) in caseStudies" :key="i"> | 532 | <div class="" v-for="(study, i) in caseStudies" :key="i"> |
| 533 | <div class="card-warpper" @click="openStudy(study)"> | 533 | <div class="card-warpper" @click="openStudy(study)"> |
| 534 | <div class="company-detail"> | 534 | <div class="company-detail"> |
| 535 | <div class="c-logo"> | 535 | <div class="c-logo"> |
| 536 | <!-- <img src="../assets/images/image 46.png" /> --> | 536 | <!-- <img src="../assets/images/image 46.png" /> --> |
| 537 | <img :src="study.intro.logoURL" /> | 537 | <img :src="study.intro.logoURL" /> |
| 538 | </div> | 538 | </div> |
| 539 | <div class="c-tag"> | 539 | <div class="c-tag"> |
| 540 | <img | 540 | <img |
| 541 | src="../assets/images/retake-blue.svg" | 541 | src="../assets/images/retake-blue.svg" |
| 542 | v-if="study.intro.type == 'Retake'" | 542 | v-if="study.intro.type == 'Retake'" |
| 543 | /> | 543 | /> |
| 544 | <img | 544 | <img |
| 545 | src="../assets/images/behind-blue.svg" | 545 | src="../assets/images/behind-blue.svg" |
| 546 | v-if="study.intro.type == 'Behind-the-scenes'" | 546 | v-if="study.intro.type == 'Behind-the-scenes'" |
| 547 | /> | 547 | /> |
| 548 | <img | 548 | <img |
| 549 | src="../assets/images/critique-blue.svg" | 549 | src="../assets/images/critique-blue.svg" |
| 550 | v-if="study.intro.type == 'Critique'" | 550 | v-if="study.intro.type == 'Critique'" |
| 551 | /> | 551 | /> |
| 552 | <img | 552 | <img |
| 553 | src="../assets/images/juxtapose-blue.svg" | 553 | src="../assets/images/juxtapose-blue.svg" |
| 554 | v-if="study.intro.type == 'Juxtapose'" | 554 | v-if="study.intro.type == 'Juxtapose'" |
| 555 | /> | 555 | /> |
| 556 | </div> | 556 | </div> |
| 557 | </div> | 557 | </div> |
| 558 | 558 | ||
| 559 | <!-- company detail--> | 559 | <!-- company detail--> |
| 560 | <h1>{{ study.intro.name }}</h1> | 560 | <h1>{{ study.intro.name }}</h1> |
| 561 | <div class="user-views"> | 561 | <div class="user-views"> |
| 562 | <ul> | 562 | <ul> |
| 563 | <li><img src="../assets/images/eye.svg" class="spctp" /> {{ study.views }} Views</li> | 563 | <li><img src="../assets/images/eye.svg" class="spctp" /> {{ study.views }} Views</li> |
| 564 | <li><img src="../assets/images/star.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li> | 564 | <li><img src="../assets/images/star.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li> |
| 565 | <li><img src="../assets/images/calendar.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li> | 565 | <li><img src="../assets/images/calendar.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li> |
| 566 | </ul> | 566 | </ul> |
| 567 | 567 | ||
| 568 | </div><!-- user views --> | 568 | </div><!-- user views --> |
| 569 | <div class="u-detail"> | 569 | <div class="u-detail"> |
| 570 | <img src="../assets/images/user-2.png" /> | 570 | <img src="../assets/images/user-2.png" /> |
| 571 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> | 571 | <h2 v-for="(name, j) in study.intro.authors" :key="j"> |
| 572 | {{ name }} | 572 | {{ name }} |
| 573 | </h2> | 573 | </h2> |
| 574 | 574 | ||
| 575 | </div> | 575 | </div> |
| 576 | <!-- user detail --> | 576 | <!-- user detail --> |
| 577 | <p> | 577 | <p> |
| 578 | <span v-for="(area, j) in study.focusAreas" :key="j"> | 578 | <span v-for="(area, j) in study.focusAreas" :key="j"> |
| 579 | {{ area }} | 579 | {{ area }} |
| 580 | </span> | 580 | </span> |
| 581 | </p> | 581 | </p> |
| 582 | <ul class="tags-list"> | 582 | <ul class="tags-list"> |
| 583 | <li v-for="(tags, j) in study.insightTags" :key="j"> | 583 | <li v-for="(tags, j) in study.insightTags" :key="j"> |
| 584 | <a | 584 | <a |
| 585 | href="javasript:void(0);" | 585 | href="javasript:void(0);" |
| 586 | class="insight-design" | 586 | class="insight-design" |
| 587 | v-if="tags == 'Design'" | 587 | v-if="tags == 'Design'" |
| 588 | >Design</a | 588 | >Design</a |
| 589 | > | 589 | > |
| 590 | <a | 590 | <a |
| 591 | href="javasript:void(0);" | 591 | href="javasript:void(0);" |
| 592 | class="insight-product" | 592 | class="insight-product" |
| 593 | v-if="tags == 'Product'" | 593 | v-if="tags == 'Product'" |
| 594 | >Product</a | 594 | >Product</a |
| 595 | > | 595 | > |
| 596 | <a | 596 | <a |
| 597 | href="javasript:void(0);" | 597 | href="javasript:void(0);" |
| 598 | class="insight-marketing" | 598 | class="insight-marketing" |
| 599 | v-if="tags == 'Marketing'" | 599 | v-if="tags == 'Marketing'" |
| 600 | >Marketing</a | 600 | >Marketing</a |
| 601 | > | 601 | > |
| 602 | <a | 602 | <a |
| 603 | href="javasript:void(0);" | 603 | href="javasript:void(0);" |
| 604 | class="insight-pricing" | 604 | class="insight-pricing" |
| 605 | v-if="tags == 'Pricing'" | 605 | v-if="tags == 'Pricing'" |
| 606 | >Pricing</a | 606 | >Pricing</a |
| 607 | > | 607 | > |
| 608 | <a | 608 | <a |
| 609 | href="javasript:void(0);" | 609 | href="javasript:void(0);" |
| 610 | class="insight-psychology" | 610 | class="insight-psychology" |
| 611 | v-if="tags == 'Psychology'" | 611 | v-if="tags == 'Psychology'" |
| 612 | >Psychology</a | 612 | >Psychology</a |
| 613 | > | 613 | > |
| 614 | </li> | 614 | </li> |
| 615 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> | 615 | <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> |
| 616 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> | 616 | <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> |
| 617 | </ul> | 617 | </ul> |
| 618 | <div class="clearfix"></div> | 618 | <div class="clearfix"></div> |
| 619 | <a href="#" class="action-set"> | 619 | <a href="#" class="action-set"> |
| 620 | <img src="../assets/images/arrow-right-action.svg" /> | 620 | <img src="../assets/images/arrow-right-action.svg" /> |
| 621 | </a> | 621 | </a> |
| 622 | <div class="read-time"> | 622 | <div class="read-time"> |
| 623 | <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a> | 623 | <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a> |
| 624 | </div><!-- read time --> | 624 | </div><!-- read time --> |
| 625 | </div> | 625 | </div> |
| 626 | <!-- card wrpper --> | 626 | <!-- card wrpper --> |
| 627 | <!-- card wrpper --> | 627 | <!-- card wrpper --> |
| 628 | </div> | 628 | </div> |
| 629 | <!-- all card wrpper --> | 629 | <!-- all card wrpper --> |
| 630 | </div> | 630 | </div> |
| 631 | </div> | 631 | </div> |
| 632 | </div> | 632 | </div> |
| 633 | <!-- data wrp --> | 633 | <!-- data wrp --> |
| 634 | </div> | 634 | </div> |
| 635 | <!-- case study 0 --> | 635 | <!-- case study 0 --> |
| 636 | <div | 636 | <div |
| 637 | class="container-fluid data-wrp" | 637 | class="container-fluid data-wrp" |
| 638 | id="all-replies" | 638 | id="all-replies" |
| 639 | style="display: none" | 639 | style="display: none" |
| 640 | > | 640 | > |
| 641 | <div class="row"> | 641 | <div class="row"> |
| 642 | <div class="replies col-md-12"> | 642 | <div class="replies col-md-12" > |
| 643 | <div class="replies-wrp"> | 643 | <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" > |
| 644 | <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> | 644 | <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1> |
| 645 | <ul class="joined-info"> | 645 | <ul class="joined-info"> |
| 646 | <li><a href="javasript:void(0);">37D</a> <span></span></li> | 646 | <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li> |
| 647 | <li><img src="../assets/images/heart.png" /></li> | 647 | <li><img src="../assets/images/heart.png" /></li> |
| 648 | <li><a href="javasript:void(0);"> 4</a></li> | 648 | <li><a href="javasript:void(0);"> {{comments.likes}}</a></li> |
| 649 | <li class="comment-spc"> | 649 | <li class="comment-spc"> |
| 650 | <img src="../assets/images/comment.svg" /> | 650 | <img src="../assets/images/comment.svg" /> |
| 651 | </li> | 651 | </li> |
| 652 | <li><a href="javasript:void(0);"> 6</a></li> | 652 | <li><a href="javasript:void(0);"> {{comments.replies}}</a></li> |
| 653 | </ul> | 653 | </ul> |
| 654 | <p> | 654 | <p> |
| 655 | I wonder what the difference between “<strong> | 655 | {{comments.comment}} |
| 656 | <!-- I wonder what the difference between “<strong> | ||
| 656 | Assistant</strong | 657 | Assistant</strong |
| 657 | >” and “<strong>Pickup and Drop</strong>” are. If they are the | 658 | >” and “<strong>Pickup and Drop</strong>” are. If they are the |
| 658 | same, there are two “call to actions” for the same workflow | 659 | same, there are two “call to actions” for the same workflow --> |
| 659 | </p> --> | 660 | </p> |
| 660 | </div> | 661 | </div> |
| 661 | <!-- replies wrapper --> | 662 | <!-- replies wrapper --> |
| 662 | </div> | 663 | </div> |
| 663 | <!-- all card wrpper --> | 664 | <!-- all card wrpper --> |
| 664 | </div> | 665 | </div> |
| 665 | </div> | 666 | </div> |
| 666 | <!-- all Relpies --> | 667 | <!-- all Relpies --> |
| 667 | </div> | 668 | </div> |
| 668 | <!-- data wrp --> | 669 | <!-- data wrp --> |
| 669 | <!-- body wrapper --> | 670 | <!-- body wrapper --> |
| 670 | </div> | 671 | </div> |
| 671 | </main> | 672 | </main> |
| 672 | </template> | 673 | </template> |
| 673 | 674 | ||
| 674 | <script> | 675 | <script> |
| 675 | import Vue from "vue"; | 676 | import Vue from "vue"; |
| 676 | import router from "../router"; | 677 | import router from "../router"; |
| 677 | import $ from "jquery"; | 678 | import $ from "jquery"; |
| 678 | import axios from "axios"; | 679 | import axios from "axios"; |
| 679 | import Header from "./Header"; | 680 | import Header from "./Header"; |
| 681 | import moment from 'moment'; | ||
| 682 | |||
| 680 | export default { | 683 | export default { |
| 681 | name: "Profile", | 684 | name: "Profile", |
| 682 | components: { | 685 | components: { |
| 683 | Header: Header, | 686 | Header: Header, |
| 684 | }, | 687 | }, |
| 685 | data: () => ({ | 688 | data: () => ({ |
| 686 | loggedinFlag: false, | 689 | loggedinFlag: false, |
| 687 | usertoken: null, | 690 | usertoken: null, |
| 688 | currentLink: null, | 691 | currentLink: null, |
| 689 | userData: { | 692 | userData: { |
| 690 | socialMediaProfiles: { | 693 | socialMediaProfiles: { |
| 691 | facebook: null, | 694 | facebook: null, |
| 692 | linkedin: null, | 695 | linkedin: null, |
| 693 | medium: null, | 696 | medium: null, |
| 694 | twitter: null, | 697 | twitter: null, |
| 695 | behance: null, | 698 | behance: null, |
| 696 | dribble: null, | 699 | dribble: null, |
| 697 | github: null, | 700 | github: null, |
| 698 | stackoverflow: null, | 701 | stackoverflow: null, |
| 699 | instagram: null, | 702 | instagram: null, |
| 700 | }, | 703 | }, |
| 701 | awards: { | 704 | awards: { |
| 702 | views: null, | 705 | views: null, |
| 703 | likes: null, | 706 | likes: null, |
| 704 | comments: null, | 707 | comments: null, |
| 705 | }, | 708 | }, |
| 706 | verified: true, | 709 | verified: true, |
| 707 | phoneNo: null, | 710 | phoneNo: null, |
| 708 | bio: null, | 711 | bio: null, |
| 709 | designation: null, | 712 | designation: null, |
| 710 | organisation: null, | 713 | organisation: null, |
| 711 | bgColor: null, | 714 | bgColor: null, |
| 712 | interests: [], | 715 | interests: [], |
| 713 | karmaPoints: null, | 716 | karmaPoints: null, |
| 714 | socialLogin: null, | 717 | socialLogin: null, |
| 715 | firstLogin: null, | 718 | firstLogin: null, |
| 716 | notification: null, | 719 | notification: null, |
| 717 | profilePic: null, | 720 | profilePic: null, |
| 718 | role: null, | 721 | role: null, |
| 719 | name: null, | 722 | name: null, |
| 720 | email: null, | 723 | email: null, |
| 721 | firstName: null, | 724 | firstName: null, |
| 722 | lastName: null, | 725 | lastName: null, |
| 723 | }, | 726 | }, |
| 724 | caseStudies: [], | 727 | caseStudies: [], |
| 725 | interestName: null, | 728 | interestName: null, |
| 726 | oldId: null, | 729 | oldId: null, |
| 727 | currentSocialLinkName: null, | 730 | currentSocialLinkName: null, |
| 728 | showCompany: false, | 731 | showCompany: false, |
| 729 | showDesignation: false, | 732 | showDesignation: false, |
| 730 | socialLink: [ | 733 | socialLink: [ |
| 731 | { | 734 | { |
| 732 | displayName: "Facebook", | 735 | displayName: "Facebook", |
| 733 | fieldName: "facebook", | 736 | fieldName: "facebook", |
| 734 | fieldValue: null, | 737 | fieldValue: null, |
| 735 | image: require(`../assets/images/facebook.png`), | 738 | image: require(`../assets/images/facebook.png`), |
| 736 | }, | 739 | }, |
| 737 | { | 740 | { |
| 738 | displayName: "Linkedin", | 741 | displayName: "Linkedin", |
| 739 | fieldName: "linkedin", | 742 | fieldName: "linkedin", |
| 740 | fieldValue: null, | 743 | fieldValue: null, |
| 741 | image: require(`../assets/images/linkedin.png`), | 744 | image: require(`../assets/images/linkedin.png`), |
| 742 | }, | 745 | }, |
| 743 | { | 746 | { |
| 744 | displayName: "Medium", | 747 | displayName: "Medium", |
| 745 | fieldName: "medium", | 748 | fieldName: "medium", |
| 746 | fieldValue: null, | 749 | fieldValue: null, |
| 747 | image: require(`../assets/images/medium.png`), | 750 | image: require(`../assets/images/medium.png`), |
| 748 | }, | 751 | }, |
| 749 | { | 752 | { |
| 750 | displayName: "Twitter", | 753 | displayName: "Twitter", |
| 751 | fieldName: "twitter", | 754 | fieldName: "twitter", |
| 752 | fieldValue: null, | 755 | fieldValue: null, |
| 753 | image: require(`../assets/images/twitter.png`), | 756 | image: require(`../assets/images/twitter.png`), |
| 754 | }, | 757 | }, |
| 755 | { | 758 | { |
| 756 | displayName: "Behance", | 759 | displayName: "Behance", |
| 757 | fieldName: "behance", | 760 | fieldName: "behance", |
| 758 | fieldValue: null, | 761 | fieldValue: null, |
| 759 | image: require(`../assets/images/behance.png`), | 762 | image: require(`../assets/images/behance.png`), |
| 760 | }, | 763 | }, |
| 761 | { | 764 | { |
| 762 | displayName: "Dribble", | 765 | displayName: "Dribble", |
| 763 | fieldName: "dribble", | 766 | fieldName: "dribble", |
| 764 | fieldValue: null, | 767 | fieldValue: null, |
| 765 | image: require(`../assets/images/dribbble.png`), | 768 | image: require(`../assets/images/dribbble.png`), |
| 766 | }, | 769 | }, |
| 767 | { | 770 | { |
| 768 | displayName: "Github", | 771 | displayName: "Github", |
| 769 | fieldName: "github", | 772 | fieldName: "github", |
| 770 | fieldValue: null, | 773 | fieldValue: null, |
| 771 | image: require(`../assets/images/github.png`), | 774 | image: require(`../assets/images/github.png`), |
| 772 | }, | 775 | }, |
| 773 | { | 776 | { |
| 774 | displayName: "Stackoverflow", | 777 | displayName: "Stackoverflow", |
| 775 | fieldName: "stackoverflow", | 778 | fieldName: "stackoverflow", |
| 776 | fieldValue: null, | 779 | fieldValue: null, |
| 777 | image: require(`../assets/images/stack overflow.png`), | 780 | image: require(`../assets/images/stack overflow.png`), |
| 778 | }, | 781 | }, |
| 779 | { | 782 | { |
| 780 | displayName: "Instagram", | 783 | displayName: "Instagram", |
| 781 | fieldName: "instagram", | 784 | fieldName: "instagram", |
| 782 | fieldValue: null, | 785 | fieldValue: null, |
| 783 | image: require(`../assets/images/instagram.png`), | 786 | image: require(`../assets/images/instagram.png`), |
| 784 | }, | 787 | }, |
| 785 | ], | 788 | ], |
| 786 | selectedSocialLink: [], | 789 | selectedSocialLink: [], |
| 790 | userComments:[], | ||
| 787 | }), | 791 | }), |
| 788 | 792 | ||
| 789 | mounted() { | 793 | mounted() { |
| 790 | this.userData = {}; | 794 | this.userData = {}; |
| 791 | // this.socialLink = []; | 795 | // this.socialLink = []; |
| 792 | this.userData.interests = []; | 796 | this.userData.interests = []; |
| 793 | var userdata = localStorage.getItem("spotlight_usertoken"); | 797 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 794 | if (userdata) { | 798 | if (userdata) { |
| 795 | userdata = JSON.parse(userdata); | 799 | userdata = JSON.parse(userdata); |
| 796 | this.usertoken = userdata.token; | 800 | this.usertoken = userdata.token; |
| 797 | this.getProfile(); | 801 | this.getProfile(); |
| 798 | this.getCaseStudies(); | 802 | this.getCaseStudies(); |
| 803 | this.getUserComments(); | ||
| 804 | }else{ | ||
| 805 | this.logout(); | ||
| 799 | } | 806 | } |
| 800 | }, | 807 | }, |
| 801 | methods: { | 808 | methods: { |
| 802 | goToSignUp() { | 809 | goToSignUp() { |
| 803 | this.$router.push("/"); | 810 | this.$router.push("/"); |
| 804 | }, | 811 | }, |
| 805 | goToReset() { | 812 | goToReset() { |
| 806 | this.$router.push("/reset"); | 813 | this.$router.push("/reset"); |
| 807 | }, | 814 | }, |
| 808 | logout() { | 815 | logout() { |
| 816 | localStorage.removeItem("spotlight_usertoken"); | ||
| 817 | localStorage.removeItem("spotlight_email"); | ||
| 809 | this.$router.push("/login"); | 818 | this.$router.push("/login"); |
| 810 | }, | 819 | }, |
| 820 | dateGenerator(curreDate){ | ||
| 821 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | ||
| 822 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | ||
| 823 | var result = todayDate.diff(endDate, 'days'); | ||
| 824 | return result; | ||
| 825 | }, | ||
| 811 | prefillSocialLink(links) { | 826 | prefillSocialLink(links) { |
| 812 | var keys = []; | 827 | var keys = []; |
| 813 | keys = Object.keys(links); | 828 | keys = Object.keys(links); |
| 814 | keys.forEach((link_) => { | 829 | keys.forEach((link_) => { |
| 815 | console.log(link_, ":", links[link_]); | 830 | console.log(link_, ":", links[link_]); |
| 816 | if (links[link_] != null) { | 831 | if (links[link_] != null) { |
| 817 | var i = this.socialLink.findIndex( | 832 | var i = this.socialLink.findIndex( |
| 818 | (links_) => links_.fieldName == link_ | 833 | (links_) => links_.fieldName == link_ |
| 819 | ); | 834 | ); |
| 820 | if (i != -1) { | 835 | if (i != -1) { |
| 821 | this.selectedSocialLink.push({ | 836 | this.selectedSocialLink.push({ |
| 822 | displayName: this.socialLink[i].displayName, | 837 | displayName: this.socialLink[i].displayName, |
| 823 | fieldName: this.socialLink[i].fieldName, | 838 | fieldName: this.socialLink[i].fieldName, |
| 824 | image: this.socialLink[i].image, | 839 | image: this.socialLink[i].image, |
| 825 | fieldValue: links[link_], | 840 | fieldValue: links[link_], |
| 826 | }); | 841 | }); |
| 827 | } | 842 | } |
| 828 | } | 843 | } |
| 829 | }); | 844 | }); |
| 830 | console.log("links-- are--", links); | 845 | console.log("links-- are--", links); |
| 831 | }, | 846 | }, |
| 832 | addSocialLink(id) { | 847 | addSocialLink(id) { |
| 833 | this.currentLink = null; | 848 | this.currentLink = null; |
| 834 | var i = this.selectedSocialLink.findIndex( | 849 | var i = this.selectedSocialLink.findIndex( |
| 835 | (link_) => link_.fieldName == id | 850 | (link_) => link_.fieldName == id |
| 836 | ); | 851 | ); |
| 837 | var j = this.socialLink.findIndex((links_) => links_.fieldName == id); | 852 | var j = this.socialLink.findIndex((links_) => links_.fieldName == id); |
| 838 | if (i == -1) { | 853 | if (i == -1) { |
| 839 | this.selectedSocialLink.push({ | 854 | this.selectedSocialLink.push({ |
| 840 | displayName: this.socialLink[j].displayName, | 855 | displayName: this.socialLink[j].displayName, |
| 841 | fieldName: this.socialLink[j].fieldName, | 856 | fieldName: this.socialLink[j].fieldName, |
| 842 | image: this.socialLink[j].image, | 857 | image: this.socialLink[j].image, |
| 843 | fieldValue: null, | 858 | fieldValue: null, |
| 844 | }); | 859 | }); |
| 845 | } else { | 860 | } else { |
| 846 | this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); | 861 | this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); |
| 847 | } | 862 | } |
| 848 | }, | 863 | }, |
| 849 | removeSocialLink(i) { | 864 | removeSocialLink(i) { |
| 850 | var name = this.selectedSocialLink[i].fieldName; | 865 | var name = this.selectedSocialLink[i].fieldName; |
| 851 | this.userData.socialMediaProfiles[name] = null; | 866 | this.userData.socialMediaProfiles[name] = null; |
| 852 | this.selectedSocialLink.splice(i, 1); | 867 | this.selectedSocialLink.splice(i, 1); |
| 853 | }, | 868 | }, |
| 854 | 869 | ||
| 855 | addInterest() { | 870 | addInterest() { |
| 856 | console.log(this.userData.interests.length, "called", this.interestName); | 871 | console.log(this.userData.interests.length, "called", this.interestName); |
| 857 | if (this.userData.interests.length <= 2) { | 872 | if (this.userData.interests.length <= 2) { |
| 858 | this.userData.interests.push(this.interestName); | 873 | this.userData.interests.push(this.interestName); |
| 859 | this.interestName = null; | 874 | this.interestName = null; |
| 860 | } else { | 875 | } else { |
| 861 | this.$toaster.info("Only 3 interest are allowed"); | 876 | this.$toaster.info("Only 3 interest are allowed"); |
| 862 | } | 877 | } |
| 863 | }, | 878 | }, |
| 864 | removeInterest(i) { | 879 | removeInterest(i) { |
| 865 | console.log("i", i); | 880 | console.log("i", i); |
| 866 | this.userData.interests.splice(i, 1); | 881 | this.userData.interests.splice(i, 1); |
| 867 | console.log(" this.userData", this.userData.interests); | 882 | console.log(" this.userData", this.userData.interests); |
| 868 | }, | 883 | }, |
| 869 | assignClass() { | 884 | assignClass() { |
| 870 | var element = document.getElementById(this.userData.bgColor); | 885 | var element = document.getElementById(this.userData.bgColor); |
| 871 | element.classList.add("active"); | 886 | element.classList.add("active"); |
| 872 | var cols = document.getElementsByClassName("common_color"); | 887 | var cols = document.getElementsByClassName("common_color"); |
| 873 | for (var i = 0; i < cols.length; i++) { | 888 | for (var i = 0; i < cols.length; i++) { |
| 874 | cols[i].style.backgroundColor = this.userData.bgColor; | 889 | cols[i].style.backgroundColor = this.userData.bgColor; |
| 875 | } | 890 | } |
| 876 | }, | 891 | }, |
| 877 | createString(list){ | 892 | createString(list){ |
| 878 | var name = ""; | 893 | var name = ""; |
| 879 | list.forEach(element => { | 894 | list.forEach(element => { |
| 880 | name = name+','+element; | 895 | name = name+','+element; |
| 881 | }); | 896 | }); |
| 882 | 897 | ||
| 883 | console.log("name is",name); | 898 | console.log("name is",name); |
| 884 | return name.substring(1);; | 899 | return name.substring(1);; |
| 885 | }, | 900 | }, |
| 886 | changeColor(clr) { | 901 | changeColor(clr) { |
| 887 | console.log(this.oldId, "clr", clr); | 902 | console.log(this.oldId, "clr", clr); |
| 888 | var element = document.getElementById(clr); | 903 | var element = document.getElementById(clr); |
| 889 | element.classList.add("active"); | 904 | element.classList.add("active"); |
| 890 | var removeelement = document.getElementById(this.oldId); | 905 | var removeelement = document.getElementById(this.oldId); |
| 891 | removeelement.classList.remove("active"); | 906 | removeelement.classList.remove("active"); |
| 892 | this.oldId = clr; | 907 | this.oldId = clr; |
| 893 | var cols = document.getElementsByClassName("common_color"); | 908 | var cols = document.getElementsByClassName("common_color"); |
| 894 | for (var i = 0; i < cols.length; i++) { | 909 | for (var i = 0; i < cols.length; i++) { |
| 895 | cols[i].style.backgroundColor = clr; | 910 | cols[i].style.backgroundColor = clr; |
| 896 | } | 911 | } |
| 897 | this.userData.bgColor = clr; | 912 | this.userData.bgColor = clr; |
| 898 | }, | 913 | }, |
| 899 | getProfile() { | 914 | getProfile() { |
| 900 | axios | 915 | axios |
| 901 | .get("/profile", { | 916 | .get("/profile", { |
| 902 | headers: { | 917 | headers: { |
| 903 | Authorization: "Bearer " + this.usertoken, | 918 | Authorization: "Bearer " + this.usertoken, |
| 904 | }, | 919 | }, |
| 905 | }) | 920 | }) |
| 906 | .then((response) => { | 921 | .then((response) => { |
| 907 | if (!response.data.data.socialMediaProfiles) { | 922 | if (!response.data.data.socialMediaProfiles) { |
| 908 | this.userData.socialMediaProfiles = {}; | 923 | this.userData.socialMediaProfiles = {}; |
| 909 | } | 924 | } |
| 910 | this.userData = response.data.data; | 925 | this.userData = response.data.data; |
| 911 | 926 | ||
| 912 | // this.userData = response.data.data; | 927 | // this.userData = response.data.data; |
| 913 | this.oldId = this.userData.bgColor; | 928 | this.oldId = this.userData.bgColor; |
| 914 | console.log(this.oldId, "this.userData.", this.userData); | 929 | console.log(this.oldId, "this.userData.", this.userData); |
| 915 | console.log("this.userData.firstLogin ", this.userData.firstLogin); | 930 | console.log("this.userData.firstLogin ", this.userData.firstLogin); |
| 916 | this.prefillSocialLink(this.userData.socialMediaProfiles); | 931 | this.prefillSocialLink(this.userData.socialMediaProfiles); |
| 917 | if (this.userData.firstLogin == true) { | 932 | if (this.userData.firstLogin == true) { |
| 918 | this.addProfileDialog(); | 933 | this.addProfileDialog(); |
| 919 | } | 934 | } |
| 920 | this.assignClass(); | 935 | this.assignClass(); |
| 921 | console.log(response.data.data); | 936 | console.log(response.data.data); |
| 922 | }) | 937 | }) |
| 923 | .catch((error) => console.log(error)); | 938 | .catch((error) => console.log(error)); |
| 924 | }, | 939 | }, |
| 925 | getRandomAvatar() { | 940 | getRandomAvatar() { |
| 926 | axios | 941 | axios |
| 927 | .get("/randomAvatar", { | 942 | .get("/randomAvatar", { |
| 928 | headers: { | 943 | headers: { |
| 929 | Authorization: "Bearer " + this.usertoken, | 944 | Authorization: "Bearer " + this.usertoken, |
| 930 | }, | 945 | }, |
| 931 | }) | 946 | }) |
| 932 | .then((response) => { | 947 | .then((response) => { |
| 933 | this.userData.profilePic = response.data.imageURL; | 948 | this.userData.profilePic = response.data.imageURL; |
| 934 | console.log(response.data.imageURL); | 949 | console.log(response.data.imageURL); |
| 935 | }) | 950 | }) |
| 936 | .catch((error) => console.log(error)); | 951 | .catch((error) => console.log(error)); |
| 937 | }, | 952 | }, |
| 953 | getUserComments() { | ||
| 954 | axios | ||
| 955 | .get("/profile/comments", { | ||
| 956 | headers: { | ||
| 957 | Authorization: "Bearer " + this.usertoken, | ||
| 958 | }, | ||
| 959 | }) | ||
| 960 | .then((response) => { | ||
| 961 | this.userComments = response.data.data; | ||
| 962 | console.log(response.data); | ||
| 963 | }) | ||
| 964 | .catch((error) => console.log(error)); | ||
| 965 | }, | ||
| 938 | getCaseStudies() { | 966 | getCaseStudies() { |
| 939 | axios | 967 | axios |
| 940 | .get("/caseStudy/all", { | 968 | .get("/caseStudy/all", { |
| 941 | headers: { | 969 | headers: { |
| 942 | Authorization: "Bearer " + this.usertoken, | 970 | Authorization: "Bearer " + this.usertoken, |
| 943 | }, | 971 | }, |
| 944 | }) | 972 | }) |
| 945 | .then((response) => { | 973 | .then((response) => { |
| 946 | console.log(response.data.data.caseStudies); | 974 | console.log(response.data.data.caseStudies); |
| 947 | this.caseStudies = response.data.data.caseStudies; | 975 | this.caseStudies = response.data.data.caseStudies; |
| 948 | }) | 976 | }) |
| 949 | .catch((error) => console.log(error)); | 977 | .catch((error) => console.log(error)); |
| 950 | }, | 978 | }, |
| 951 | openStudy(payload) { | 979 | openStudy(payload) { |
| 952 | console.log("payload-", payload); | 980 | console.log("payload-", payload); |
| 953 | payload.intro.date = payload.createdAt; | 981 | payload.intro.date = payload.createdAt; |
| 954 | payload.intro.focusPoint = payload.focusAreas; | 982 | payload.intro.focusPoint = payload.focusAreas; |
| 955 | axios | 983 | axios |
| 956 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { | 984 | .get("/caseStudy/slides?caseStudyId=" + payload._id, { |
| 957 | headers: { | 985 | headers: { |
| 958 | Authorization: "Bearer " + this.usertoken, | 986 | Authorization: "Bearer " + this.usertoken, |
| 959 | }, | 987 | }, |
| 960 | }) | 988 | }) |
| 961 | .then((response) => { | 989 | .then((response) => { |
| 962 | this.createSlide(payload, response.data.data); | 990 | this.createSlide(payload, response.data.data); |
| 963 | }) | 991 | }) |
| 964 | .catch((error) => console.log(error)); | 992 | .catch((error) => console.log(error)); |
| 965 | }, | 993 | }, |
| 966 | 994 | ||
| 967 | createSlide(payload, slides) { | 995 | createSlide(payload, slides) { |
| 968 | var finalSlides = []; | 996 | var finalSlides = []; |
| 969 | slides.forEach((slides_) => { | 997 | slides.forEach((slides_) => { |
| 970 | var url = this.assignRoutes(slides_.templateId); | 998 | var url = this.assignRoutes(slides_.templateId); |
| 971 | var obj = { | 999 | var obj = { |
| 972 | forward: true, | 1000 | forward: true, |
| 973 | backward: true, | 1001 | backward: true, |
| 974 | ur: url, | 1002 | ur: url, |
| 975 | slideId: slides_._id, | 1003 | slideId: slides_._id, |
| 976 | caseStudyId: slides_.caseStudyId, | 1004 | caseStudyId: slides_.caseStudyId, |
| 977 | payload: { | 1005 | payload: { |
| 978 | metaData: slides_.metaData, | 1006 | metaData: slides_.metaData, |
| 979 | comments: slides_.comments, | 1007 | comments: slides_.comments, |
| 980 | insight: slides_.insight ? slides_.insight : null, | 1008 | insight: slides_.insight ? slides_.insight : null, |
| 981 | }, | 1009 | }, |
| 982 | }; | 1010 | }; |
| 983 | // slides_ | 1011 | // slides_ |
| 984 | finalSlides.push(obj); | 1012 | finalSlides.push(obj); |
| 985 | }); | 1013 | }); |
| 986 | console.log("payload", payload); | 1014 | console.log("payload", payload); |
| 987 | // add first slide at begining | 1015 | // add first slide at begining |
| 988 | finalSlides.unshift({ | 1016 | finalSlides.unshift({ |
| 989 | forward: true, | 1017 | forward: true, |
| 990 | backward: false, | 1018 | backward: false, |
| 991 | ur: "EpisodeIntro", | 1019 | ur: "EpisodeIntro", |
| 992 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", | 1020 | slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 993 | caseStudyId: payload._id, | 1021 | caseStudyId: payload._id, |
| 994 | payload: { | 1022 | payload: { |
| 995 | metaData: payload.intro, | 1023 | metaData: payload.intro, |
| 996 | comments: [], | 1024 | comments: [], |
| 997 | }, | 1025 | }, |
| 998 | }); | 1026 | }); |
| 999 | finalSlides.push({ | 1027 | finalSlides.push({ |
| 1000 | forward: true, | 1028 | forward: true, |
| 1001 | backward: false, | 1029 | backward: false, |
| 1002 | ur: "Outro", | 1030 | ur: "Outro", |
| 1003 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", | 1031 | slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", |
| 1004 | caseStudyId: payload._id, | 1032 | caseStudyId: payload._id, |
| 1005 | payload: { | 1033 | payload: { |
| 1006 | metaData: payload.outro, | 1034 | metaData: payload.outro, |
| 1007 | comments: [], | 1035 | comments: [], |
| 1008 | }, | 1036 | }, |
| 1009 | }); | 1037 | }); |
| 1010 | 1038 | ||
| 1011 | console.log(finalSlides); | 1039 | console.log(finalSlides); |
| 1012 | console.log("payload", payload); | 1040 | console.log("payload", payload); |
| 1013 | localStorage.setItem( | 1041 | localStorage.setItem( |
| 1014 | "spotlight_slide" + payload._id, | 1042 | "spotlight_slide" + payload._id, |
| 1015 | JSON.stringify(finalSlides) | 1043 | JSON.stringify(finalSlides) |
| 1016 | ); | 1044 | ); |
| 1017 | this.$router.push({ | 1045 | this.$router.push({ |
| 1018 | name: "EpisodeIntro", | 1046 | name: "EpisodeIntro", |
| 1019 | params: { | 1047 | params: { |
| 1020 | caseStudyId: finalSlides[0].caseStudyId, | 1048 | caseStudyId: finalSlides[0].caseStudyId, |
| 1021 | slideId: finalSlides[0].slideId, | 1049 | slideId: finalSlides[0].slideId, |
| 1022 | }, | 1050 | }, |
| 1023 | }); | 1051 | }); |
| 1024 | }, | 1052 | }, |
| 1025 | assignRoutes(tempId) { | 1053 | assignRoutes(tempId) { |
| 1026 | // /episode-intro | 1054 | // /episode-intro |
| 1027 | // /outro | 1055 | // /outro |
| 1028 | var routes = [ | 1056 | var routes = [ |
| 1029 | { | 1057 | { |
| 1030 | url: "AuthorIntro", | 1058 | url: "AuthorIntro", |
| 1031 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", | 1059 | tempId: "T1_RoeMG8130Xko1DvhC3Ou", |
| 1032 | }, | 1060 | }, |
| 1033 | { | 1061 | { |
| 1034 | url: "NoScreenshotSingleAuthor", | 1062 | url: "NoScreenshotSingleAuthor", |
| 1035 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", | 1063 | tempId: "T2_ROsUOEy3vxsRAiQ72XdI", |
| 1036 | }, | 1064 | }, |
| 1037 | { | 1065 | { |
| 1038 | url: "SingleMobileScreenInsightTwo", | 1066 | url: "SingleMobileScreenInsightTwo", |
| 1039 | tempId: "T3_cqNIf7tuqL4jyON63dA7", | 1067 | tempId: "T3_cqNIf7tuqL4jyON63dA7", |
| 1040 | }, | 1068 | }, |
| 1041 | { | 1069 | { |
| 1042 | url: "TwoScreenWithoutInsight", | 1070 | url: "TwoScreenWithoutInsight", |
| 1043 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", | 1071 | tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", |
| 1044 | }, | 1072 | }, |
| 1045 | { | 1073 | { |
| 1046 | url: "noscreenshotSingleautho", | 1074 | url: "noscreenshotSingleautho", |
| 1047 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", | 1075 | tempId: "T5_za3c3sYgx7bVvtKz5r0e", |
| 1048 | }, | 1076 | }, |
| 1049 | { | 1077 | { |
| 1050 | url: "SingleMobileScreenInsightOne", | 1078 | url: "SingleMobileScreenInsightOne", |
| 1051 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", | 1079 | tempId: "T6_za3c3sYgx7bVvtKz5sgf", |
| 1052 | }, | 1080 | }, |
| 1053 | { | 1081 | { |
| 1054 | url: "TwoScreenWithInsight", | 1082 | url: "TwoScreenWithInsight", |
| 1055 | tempId: "T7_za3c3sYgx7bVvtKzasdf", | 1083 | tempId: "T7_za3c3sYgx7bVvtKzasdf", |
| 1056 | }, | 1084 | }, |
| 1057 | ]; | 1085 | ]; |
| 1058 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); | 1086 | var i = routes.findIndex((routes_) => routes_.tempId == tempId); |
| 1059 | return routes[i].url; | 1087 | return routes[i].url; |
| 1060 | }, | 1088 | }, |
| 1061 | saveProfile() { | 1089 | saveProfile() { |
| 1062 | var obj = {}; | 1090 | var obj = {}; |
| 1063 | if (this.userData.firstLogin == true) { | 1091 | if (this.userData.firstLogin == true) { |
| 1064 | this.userData.firstLogin = false; | 1092 | this.userData.firstLogin = false; |
| 1065 | } | 1093 | } |
| 1066 | this.userData.name = | 1094 | this.userData.name = |
| 1067 | this.userData.firstName + " " + this.userData.lastName; | 1095 | this.userData.firstName + " " + this.userData.lastName; |
| 1068 | obj = Object.assign(obj, this.userData); | 1096 | obj = Object.assign(obj, this.userData); |
| 1069 | // if(!obj.socialMediaProfiles){ | 1097 | // if(!obj.socialMediaProfiles){ |
| 1070 | // obj.socialMediaProfiles = {}; | 1098 | // obj.socialMediaProfiles = {}; |
| 1071 | // } | 1099 | // } |
| 1072 | this.selectedSocialLink.forEach((element) => { | 1100 | this.selectedSocialLink.forEach((element) => { |
| 1073 | var key = element.fieldName; | 1101 | var key = element.fieldName; |
| 1074 | obj.socialMediaProfiles[key] = element.fieldValue; | 1102 | obj.socialMediaProfiles[key] = element.fieldValue; |
| 1075 | }); | 1103 | }); |
| 1076 | delete obj.createdAt; | 1104 | delete obj.createdAt; |
| 1077 | delete obj.email; | 1105 | delete obj.email; |
| 1078 | delete obj.role; | 1106 | delete obj.role; |
| 1079 | delete obj.verified; | 1107 | delete obj.verified; |
| 1080 | delete obj.updatedAt; | 1108 | delete obj.updatedAt; |
| 1081 | delete obj.__v; | 1109 | delete obj.__v; |
| 1082 | delete obj._id; | 1110 | delete obj._id; |
| 1083 | delete obj.karmaPoints; | 1111 | delete obj.karmaPoints; |
| 1084 | delete obj.awards; | 1112 | delete obj.awards; |
| 1085 | delete obj.socialLogin; | 1113 | delete obj.socialLogin; |
| 1086 | delete obj.phoneNo; | 1114 | delete obj.phoneNo; |
| 1087 | axios | 1115 | axios |
| 1088 | .put("/profile", obj, { | 1116 | .put("/profile", obj, { |
| 1089 | headers: { | 1117 | headers: { |
| 1090 | Authorization: "Bearer " + this.usertoken, | 1118 | Authorization: "Bearer " + this.usertoken, |
| 1091 | }, | 1119 | }, |
| 1092 | }) | 1120 | }) |
| 1093 | .then((response) => { | 1121 | .then((response) => { |
| 1094 | // this.userData = response.data.data; | 1122 | // this.userData = response.data.data; |
| 1095 | this.$toaster.success("Profile Updated"); | 1123 | this.$toaster.success("Profile Updated"); |
| 1096 | this.closeDialog(); | 1124 | this.closeDialog(); |
| 1097 | console.log(response.data.data); | 1125 | console.log(response.data.data); |
| 1098 | }) | 1126 | }) |
| 1099 | .catch((error) => { | 1127 | .catch((error) => { |
| 1100 | if (error.response) { | 1128 | if (error.response) { |
| 1101 | this.$toaster.error(error.response.data.message); | 1129 | this.$toaster.error(error.response.data.message); |
| 1102 | } | 1130 | } |
| 1103 | }); | 1131 | }); |
| 1104 | }, | 1132 | }, |
| 1105 | addProfileDialog() { | 1133 | addProfileDialog() { |
| 1106 | $(".inner-wrp").addClass("body-blur"); | 1134 | $(".inner-wrp").addClass("body-blur"); |
| 1107 | $("#add-social-links").hide(); | 1135 | $("#add-social-links").hide(); |
| 1108 | $(".popup-wrp, #add-profile").show(); | 1136 | $(".popup-wrp, #add-profile").show(); |
| 1109 | }, | 1137 | }, |
| 1110 | nextProfileDialog() { | 1138 | nextProfileDialog() { |
| 1111 | $("#add-profile").hide(); | 1139 | $("#add-profile").hide(); |
| 1112 | $("#add-social-links").show(); | 1140 | $("#add-social-links").show(); |
| 1113 | this.saveProfile(); | 1141 | this.saveProfile(); |
| 1114 | }, | 1142 | }, |
| 1115 | closeDialog() { | 1143 | closeDialog() { |
| 1116 | $(".popup-wrp").hide(); | 1144 | $(".popup-wrp").hide(); |
| 1117 | $(".inner-wrp").removeClass("body-blur"); | 1145 | $(".inner-wrp").removeClass("body-blur"); |
| 1118 | // this.saveProfile(); | 1146 | // this.saveProfile(); |
| 1119 | }, | 1147 | }, |
| 1120 | hideDialog() { | 1148 | hideDialog() { |
| 1121 | $(".popup-wrp").hide(); | 1149 | $(".popup-wrp").hide(); |
| 1122 | $(".inner-wrp").removeClass("body-blur"); | 1150 | $(".inner-wrp").removeClass("body-blur"); |
| 1123 | }, | 1151 | }, |
| 1124 | /// | 1152 | /// |
| 1125 | caseDialog() { | 1153 | caseDialog() { |
| 1126 | $(".rp-all").removeClass("active"); | 1154 | $(".rp-all").removeClass("active"); |
| 1127 | $(".c-0").addClass("active"); | 1155 | $(".c-0").addClass("active"); |
| 1128 | $("#all-replies").hide(); | 1156 | $("#all-replies").hide(); |
| 1129 | $("#case-study-0").show(); | 1157 | $("#case-study-0").show(); |
| 1130 | }, | 1158 | }, |
| 1131 | repliesDialog() { | 1159 | repliesDialog() { |
| 1132 | $(".c-0").removeClass("active"); | 1160 | $(".c-0").removeClass("active"); |
| 1133 | $(".rp-all").addClass("active"); | 1161 | $(".rp-all").addClass("active"); |
| 1134 | $("#case-study-0").hide(); | 1162 | $("#case-study-0").hide(); |
| 1135 | $("#all-replies").show(); | 1163 | $("#all-replies").show(); |
| 1136 | }, | 1164 | }, |
| 1137 | 1165 | ||
| 1138 | userprofileshowDialog() { | 1166 | userprofileshowDialog() { |
| 1139 | $("#userprofileshow").toggle(); | 1167 | $("#userprofileshow").toggle(); |
| 1140 | }, | 1168 | }, |
| 1141 | openUrl(url) { | 1169 | openUrl(url) { |
| 1142 | window.open(url); | 1170 | window.open(url); |
| 1143 | }, | 1171 | }, |
| 1144 | }, | 1172 | }, |
| 1145 | }; | 1173 | }; |
| 1146 | </script> | 1174 | </script> |
| 1147 | <style> | 1175 | <style> |
| 1148 | .no-cursor { | 1176 | .no-cursor { |
| 1149 | cursor: default !important; | 1177 | cursor: default !important; |
| 1150 | } | 1178 | } |
| 1151 | .no-underline { | 1179 | .no-underline { |
| 1152 | text-decoration: none !important; | 1180 | text-decoration: none !important; |
| 1153 | } | 1181 | } |
| 1154 | .position-left { | 1182 | .position-left { |
| 1155 | left: 15px !important; | 1183 | left: 15px !important; |
| 1156 | } | 1184 | } |
| 1157 | .padding-right { | 1185 | .padding-right { |
| 1158 | padding-right: 0px !important; | 1186 | padding-right: 0px !important; |
| 1159 | } | 1187 | } |
| 1160 | 1188 | ||
| 1161 | .social-link-right { | 1189 | .social-link-right { |
| 1162 | display: flex; | 1190 | display: flex; |
| 1163 | flex-flow: column wrap; | 1191 | flex-flow: column wrap; |
| 1164 | align-content: flex-end; | 1192 | align-content: flex-end; |
| 1165 | } | 1193 | } |
| 1166 | </style> | 1194 | </style> |
| 1167 | 1195 |
src/components/Reset.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <div class="container-fluid main-wrp"> | 3 | <div class="container-fluid main-wrp"> |
| 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 | 21 | ||
| 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 23 | <ul class="navbar-nav mr-auto"> | 23 | <ul class="navbar-nav mr-auto"> |
| 24 | <li class="nav-item active"> | 24 | <li class="nav-item active"> |
| 25 | <a class="nav-link" href="javascript:void(0);">About</a> | 25 | <a class="nav-link" href="javascript:void(0);">About</a> |
| 26 | </li> | 26 | </li> |
| 27 | <li class="nav-item"> | 27 | <li class="nav-item"> |
| 28 | <a class="nav-link" href="javascript:void(0);">Masterclass</a> | 28 | <a class="nav-link" href="javascript:void(0);">Masterclass</a> |
| 29 | </li> | 29 | </li> |
| 30 | <li class="nav-item"> | 30 | <li class="nav-item"> |
| 31 | <a class="nav-link" href="javascript:void(0);">Stories</a> | 31 | <a class="nav-link" href="javascript:void(0);">Stories</a> |
| 32 | </li> | 32 | </li> |
| 33 | <li class="nav-item spotLight-img"> | 33 | <li class="nav-item spotLight-img"> |
| 34 | <a class="nav-link" href="javascript:void(0);" | 34 | <a class="nav-link" href="javascript:void(0);" |
| 35 | ><img src="../assets/images/SPOTLight.svg" | 35 | ><img src="../assets/images/SPOTLight.svg" |
| 36 | /></a> | 36 | /></a> |
| 37 | </li> | 37 | </li> |
| 38 | <li class="nav-item"> | 38 | <li class="nav-item"> |
| 39 | <a class="nav-link" href="javascript:void(0);">Library</a> | 39 | <a class="nav-link" href="javascript:void(0);">Library</a> |
| 40 | </li> | 40 | </li> |
| 41 | </ul> | 41 | </ul> |
| 42 | </div> | 42 | </div> |
| 43 | </nav> | 43 | </nav> |
| 44 | <!-- menu wrapper --> | 44 | <!-- menu wrapper --> |
| 45 | <div class="row col-reverse"> | 45 | <div class="sign-login-wrp"> |
| 46 | <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | 46 | |
| 47 | <!-- users land image --> | 47 | <!-- users land image --> |
| 48 | <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | 48 | <div class="s-l-left-section"> |
| 49 | <h1> | 49 | <h1> |
| 50 | <!-- Welcome to <br /> | 50 | <!-- Welcome to <br /> |
| 51 | Productgrowth --> | 51 | Productgrowth --> |
| 52 | Hello, there!<br /> | 52 | Hello, there!<br /> |
| 53 | welcome to spotlight | 53 | welcome to spotlight |
| 54 | </h1> | 54 | </h1> |
| 55 | <ul class="sign-in-up-list"> | 55 | <ul class="sign-in-up-list"> |
| 56 | <li> | 56 | <li> |
| 57 | <img src="../assets/images/check.svg" /><span | 57 | <img src="../assets/images/check.svg" /><span |
| 58 | >Collaborate, Contribute and Explore with fellow product enthusiasts</span | 58 | >Collaborate, Contribute and Explore with fellow product enthusiasts</span |
| 59 | > | 59 | > |
| 60 | </li> | 60 | </li> |
| 61 | <li> | 61 | <li> |
| 62 | <img src="../assets/images/check.svg" /><span | 62 | <img src="../assets/images/check.svg" /><span |
| 63 | >Get access to insightful Case Studies and participate in Roundtables</span | 63 | >Get access to insightful Case Studies and participate in Roundtables</span |
| 64 | > | 64 | > |
| 65 | </li> | 65 | </li> |
| 66 | <li> | 66 | <li> |
| 67 | <img src="../assets/images/check.svg" /><span | 67 | <img src="../assets/images/check.svg" /><span |
| 68 | >Engage actively on the | 68 | >Engage actively on the |
| 69 | Bounce Board - we’re all ears! | 69 | Bounce Board - we’re all ears! |
| 70 | </span | 70 | </span |
| 71 | > | 71 | > |
| 72 | </li> | 72 | </li> |
| 73 | </ul> | 73 | </ul> |
| 74 | </div> | 74 | </div> |
| 75 | <!-- users land image --> | 75 | <!-- users land image --> |
| 76 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 76 | <div class="s-l-right-section"> |
| 77 | <div class="form-layout signup-frm-spc"> | 77 | <div class="form-layout reset-pass"> |
| 78 | <form > | 78 | <form > |
| 79 | <h5> | 79 | <h5> |
| 80 | Forgot password? Enter your Email <br /> ID to retrieve it | 80 | Forgot password? Enter your Email <br /> ID to retrieve it |
| 81 | </h5> | 81 | </h5> |
| 82 | <div class="fill-form"> | 82 | <div class="fill-form"> |
| 83 | <label for="inputEmail" class="sr-only">Email address</label> | 83 | <label for="inputEmail" class="sr-only">Email address</label> |
| 84 | <input | 84 | <input |
| 85 | type="email" | 85 | type="email" |
| 86 | id="inputEmail" | 86 | id="inputEmail" |
| 87 | class="form-control" | 87 | class="form-control" |
| 88 | placeholder="Your Email ID" | 88 | placeholder="Your Email ID" |
| 89 | v-model="email" | 89 | v-model="email" |
| 90 | /> | 90 | /> |
| 91 | 91 | ||
| 92 | <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="forgotPassword"> | 92 | <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="forgotPassword"> |
| 93 | <img src="../assets/images/key.svg" /> Reset Password | 93 | <img src="../assets/images/key.svg" /> Reset Password |
| 94 | </a> | 94 | </a> |
| 95 | 95 | ||
| 96 | <h3 class="ft-normal"> | 96 | <h3 class="ft-normal"> |
| 97 | <span>Go back to </span><a class="cursor-pointer no-underline" @click="goToLogin">Login</a><span> / </span | 97 | <span>Go back to </span><a class="cursor-pointer no-underline" @click="goToLogin">Login</a><span> / </span |
| 98 | ><a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a> | 98 | ><a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a> |
| 99 | </h3> | 99 | </h3> |
| 100 | </div> | 100 | </div> |
| 101 | </form> | 101 | </form> |
| 102 | </div> | 102 | </div> |
| 103 | </div> | 103 | </div> |
| 104 | <!-- sign up --> | 104 | <!-- sign up --> |
| 105 | </div> | 105 | </div> |
| 106 | <!-- body wrapper --> | 106 | <!-- body wrapper --> |
| 107 | </div> | 107 | </div> |
| 108 | <!-- main wrapper --> | 108 | <!-- main wrapper --> |
| 109 | </main> | 109 | </main> |
| 110 | </template> | 110 | </template> |
| 111 | 111 | ||
| 112 | <script> | 112 | <script> |
| 113 | import Vue from "vue"; | 113 | import Vue from "vue"; |
| 114 | import router from "../router"; | 114 | import router from "../router"; |
| 115 | import axios from "axios"; | 115 | import axios from "axios"; |
| 116 | 116 | ||
| 117 | export default { | 117 | export default { |
| 118 | name: "Reset", | 118 | name: "Reset", |
| 119 | 119 | ||
| 120 | data() { | 120 | data() { |
| 121 | return { | 121 | return { |
| 122 | email:null, | 122 | email:null, |
| 123 | }; | 123 | }; |
| 124 | }, | 124 | }, |
| 125 | mounted() {}, | 125 | mounted() {}, |
| 126 | methods: { | 126 | methods: { |
| 127 | goToLogin() { | 127 | goToLogin() { |
| 128 | this.$router.push("/login"); | 128 | this.$router.push("/login"); |
| 129 | }, | 129 | }, |
| 130 | goToSignUp() { | 130 | goToSignUp() { |
| 131 | this.$router.push("/"); | 131 | this.$router.push("/"); |
| 132 | }, | 132 | }, |
| 133 | forgotPassword(){ | 133 | forgotPassword(){ |
| 134 | axios | 134 | axios |
| 135 | .post("/forgotPassword", {'email':this.email,'forgotPassword':true}) | 135 | .post("/forgotPassword", {'email':this.email,'forgotPassword':true}) |
| 136 | .then((response) => { | 136 | .then((response) => { |
| 137 | console.log("forgotPassword- response",response) | 137 | console.log("forgotPassword- response",response) |
| 138 | 138 | ||
| 139 | this.$toaster.success(response.data.message) | 139 | this.$toaster.success(response.data.message) |
| 140 | if(response.data.status == 'success'){ | 140 | if(response.data.status == 'success'){ |
| 141 | localStorage.setItem('spotlight_email', this.email); | 141 | localStorage.setItem('spotlight_email', this.email); |
| 142 | this.$router.push("/changepassword"); | 142 | this.$router.push("/changepassword"); |
| 143 | } | 143 | } |
| 144 | }) | 144 | }) |
| 145 | .catch( (error) =>{ | 145 | .catch( (error) =>{ |
| 146 | if (error.response) { | 146 | if (error.response) { |
| 147 | this.$toaster.error(error.response.data.message) | 147 | this.$toaster.error(error.response.data.message) |
| 148 | } | 148 | } |
| 149 | }); | 149 | }); |
| 150 | 150 | ||
| 151 | } | 151 | } |
| 152 | 152 | ||
| 153 | }, | 153 | }, |
| 154 | }; | 154 | }; |
| 155 | </script> | 155 | </script> |
| 156 | 156 |
src/components/SignUp.vue
| 1 | <template> | 1 | <template> |
| 2 | <main class="landing-page"> | 2 | <main class="landing-page"> |
| 3 | <div class="container-fluid main-wrp"> | 3 | <div class="container-fluid main-wrp"> |
| 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 | 21 | ||
| 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> | 22 | <div class="collapse navbar-collapse" id="navbarsExample03"> |
| 23 | <ul class="navbar-nav mr-auto"> | 23 | <ul class="navbar-nav mr-auto"> |
| 24 | <li class="nav-item active"> | 24 | <li class="nav-item active"> |
| 25 | <a class="nav-link" href="javascript:void(0);">About</a> | 25 | <a class="nav-link" href="javascript:void(0);">About</a> |
| 26 | </li> | 26 | </li> |
| 27 | <li class="nav-item"> | 27 | <li class="nav-item"> |
| 28 | <a class="nav-link" href="javascript:void(0);">Masterclass</a> | 28 | <a class="nav-link" href="javascript:void(0);">Masterclass</a> |
| 29 | </li> | 29 | </li> |
| 30 | <li class="nav-item"> | 30 | <li class="nav-item"> |
| 31 | <a class="nav-link" href="javascript:void(0);">Stories</a> | 31 | <a class="nav-link" href="javascript:void(0);">Stories</a> |
| 32 | </li> | 32 | </li> |
| 33 | <li class="nav-item spotLight-img"> | 33 | <li class="nav-item spotLight-img"> |
| 34 | <a class="nav-link" href="javascript:void(0);" | 34 | <a class="nav-link" href="javascript:void(0);" |
| 35 | ><img src="../assets/images/SPOTLight.svg" | 35 | ><img src="../assets/images/SPOTLight.svg" |
| 36 | /></a> | 36 | /></a> |
| 37 | </li> | 37 | </li> |
| 38 | <li class="nav-item"> | 38 | <li class="nav-item"> |
| 39 | <a class="nav-link" href="javascript:void(0);">Library</a> | 39 | <a class="nav-link" href="javascript:void(0);">Library</a> |
| 40 | </li> | 40 | </li> |
| 41 | </ul> | 41 | </ul> |
| 42 | </div> | 42 | </div> |
| 43 | </nav> | 43 | </nav> |
| 44 | <!-- menu wrapper --> | 44 | <!-- menu wrapper --> |
| 45 | <div class="sign-wrp"> | 45 | <div class="sign-login-wrp"> |
| 46 | <div class="row col-reverse"> | ||
| 47 | <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | ||
| 48 | <!-- users land image --> | 46 | <!-- users land image --> |
| 49 | <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | 47 | <div class="s-l-left-section"> |
| 50 | <h1> | 48 | <h1> |
| 51 | Hello, there!<br /> | 49 | Hello, there!<br /> |
| 52 | welcome to spotlight | 50 | welcome to spotlight |
| 53 | <!-- Welcome to <br /> | 51 | <!-- Welcome to <br /> |
| 54 | Productgrowth --> | 52 | Productgrowth --> |
| 55 | </h1> | 53 | </h1> |
| 56 | <ul class="sign-in-up-list"> | 54 | <ul class="sign-in-up-list"> |
| 57 | <li> | 55 | <li> |
| 58 | <img src="../assets/images/check.svg" /><span | 56 | <img src="../assets/images/check.svg" /><span |
| 59 | >Collaborate, Contribute and Explore with fellow product enthusiasts</span | 57 | >Collaborate, Contribute and Explore with fellow product enthusiasts</span |
| 60 | > | 58 | > |
| 61 | </li> | 59 | </li> |
| 62 | <li> | 60 | <li> |
| 63 | <img src="../assets/images/check.svg" /><span | 61 | <img src="../assets/images/check.svg" /><span |
| 64 | >Get access to insightful Case Studies and participate in Roundtables</span | 62 | >Get access to insightful Case Studies and participate in Roundtables</span |
| 65 | > | 63 | > |
| 66 | </li> | 64 | </li> |
| 67 | <li> | 65 | <li> |
| 68 | <img src="../assets/images/check.svg" /><span | 66 | <img src="../assets/images/check.svg" /><span |
| 69 | >Engage actively on the | 67 | >Engage actively on the |
| 70 | Bounce Board - we’re all ears! | 68 | Bounce Board - we’re all ears! |
| 71 | </span | 69 | </span |
| 72 | > | 70 | > |
| 73 | </li> | 71 | </li> |
| 74 | </ul> | 72 | </ul> |
| 75 | </div> | 73 | </div> |
| 76 | <!-- users land image --> | 74 | <!-- users land image --> |
| 77 | <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | 75 | <div class="s-l-right-section"> |
| 78 | <div class="form-layout signup-frm-spc"> | 76 | <div class="form-layout"> |
| 79 | <form v-on:keyup.enter="signup"> | 77 | <form v-on:keyup.enter="signup"> |
| 80 | <h5>Sign Up using</h5> | 78 | <h5>Sign Up using</h5> |
| 81 | <div class="social-login"> | 79 | <div class="social-login"> |
| 82 | <ul> | 80 | <ul> |
| 83 | <li> | 81 | <li> |
| 84 | <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a> | 82 | <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a> |
| 85 | </li> | 83 | </li> |
| 86 | <li> | 84 | <li> |
| 87 | <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a> | 85 | <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a> |
| 88 | </li> | 86 | </li> |
| 89 | <li> | 87 | <li> |
| 90 | <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a> | 88 | <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a> |
| 91 | </li> | 89 | </li> |
| 92 | </ul> | 90 | </ul> |
| 93 | </div> | 91 | </div> |
| 94 | <h5>or Sign Up with Email</h5> | 92 | <h5>or Sign Up with Email</h5> |
| 95 | <div class="fill-form"> | 93 | <div class="fill-form"> |
| 96 | <label for="inputEmail" class="sr-only">Email address</label> | 94 | <label for="inputEmail" class="sr-only">Email address</label> |
| 97 | <input | 95 | <input |
| 98 | type="email" | 96 | type="email" |
| 99 | id="inputEmail" | 97 | id="inputEmail" |
| 100 | class="form-control" | 98 | class="form-control" |
| 101 | placeholder="Your Email ID" | 99 | placeholder="Your Email ID" |
| 102 | autocomplete="off" | 100 | autocomplete="off" |
| 103 | v-model="userData.email" | 101 | v-model="userData.email" |
| 104 | /> | 102 | /> |
| 105 | <label for="inputPassword" class="sr-only">Password</label> | 103 | <label for="inputPassword" class="sr-only">Password</label> |
| 106 | <input | 104 | <input |
| 107 | type="password" | 105 | type="password" |
| 108 | id="inputPassword" | 106 | id="inputPassword" |
| 109 | class="form-control" | 107 | class="form-control" |
| 110 | placeholder="Password" | 108 | placeholder="Password" |
| 111 | v-model="userData.password" | 109 | v-model="userData.password" |
| 112 | /> | 110 | /> |
| 113 | 111 | ||
| 114 | <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup"> | 112 | <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup"> |
| 115 | <img src="../assets/images/user-plus.svg" /> Create Account | 113 | <img src="../assets/images/user-plus.svg" /> Create Account |
| 116 | </a> | 114 | </a> |
| 117 | <p class=""> | 115 | <p class=""> |
| 118 | By signing up I agree to the <a>Privacy Policy</a> and | 116 | By signing up I agree to the <a>Privacy Policy</a> and |
| 119 | <a>Terms of Service</a> | 117 | <a>Terms of Service</a> |
| 120 | </p> | 118 | </p> |
| 121 | <h3 class="ft-normal">Have an account? <a class="cursor-pointer no-underline" @click="goToLogin">Login</a></h3> | 119 | <h3 class="ft-normal">Have an account? <a class="cursor-pointer no-underline" @click="goToLogin">Login</a></h3> |
| 122 | </div> | 120 | </div> |
| 123 | </form> | 121 | </form> |
| 124 | </div> | 122 | </div> |
| 125 | </div> | 123 | </div> |
| 126 | <!-- sign up --> | 124 | <!-- sign up --> |
| 127 | </div> | 125 | |
| 128 | </div> | 126 | </div> |
| 129 | <!-- body wrapper --> | 127 | <!-- body wrapper --> |
| 130 | </div> | 128 | </div> |
| 131 | </main> | 129 | </main> |
| 132 | </template> | 130 | </template> |
| 133 | 131 | ||
| 134 | <script> | 132 | <script> |
| 135 | import Vue from "vue"; | 133 | import Vue from "vue"; |
| 136 | import router from "../router"; | 134 | import router from "../router"; |
| 137 | import axios from "axios"; | 135 | import axios from "axios"; |
| 138 | 136 | ||
| 139 | export default { | 137 | export default { |
| 140 | name: "SignUp", | 138 | name: "SignUp", |
| 141 | 139 | ||
| 142 | data() { | 140 | data() { |
| 143 | return { | 141 | return { |
| 144 | userData: {}, | 142 | userData: {}, |
| 145 | }; | 143 | }; |
| 146 | }, | 144 | }, |
| 147 | mounted() { | 145 | mounted() { |
| 148 | // this.$auth.logout(); | 146 | // this.$auth.logout(); |
| 149 | localStorage.removeItem("spotlight_usertoken"); | 147 | // localStorage.removeItem("spotlight_usertoken"); |
| 150 | localStorage.removeItem("spotlight_email"); | 148 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 149 | if (userdata) { | ||
| 150 | this.$router.push("/profile"); | ||
| 151 | } | ||
| 152 | // localStorage.removeItem("spotlight_email"); | ||
| 151 | }, | 153 | }, |
| 152 | methods: { | 154 | methods: { |
| 153 | login() { | 155 | login() { |
| 154 | this.$auth.loginWithRedirect(); | 156 | this.$auth.loginWithRedirect(); |
| 155 | }, | 157 | }, |
| 156 | goToLogin() { | 158 | goToLogin() { |
| 157 | this.$router.push("/login"); | 159 | this.$router.push("/login"); |
| 158 | }, | 160 | }, |
| 159 | signup() { | 161 | signup() { |
| 160 | axios | 162 | axios |
| 161 | .post("/signup", this.userData) | 163 | .post("/signup", this.userData) |
| 162 | .then((response) => { | 164 | .then((response) => { |
| 163 | this.$toaster.success(response.data.message); | 165 | this.$toaster.success(response.data.message); |
| 164 | if(response.data.status == 'success'){ | 166 | if(response.data.status == 'success'){ |
| 165 | localStorage.setItem('spotlight_email', this.userData.email); | 167 | localStorage.setItem('spotlight_email', this.userData.email); |
| 166 | this.$router.push({ name: 'Otp', params: { flag: false }}); | 168 | this.$router.push({ name: 'Otp', params: { flag: false }}); |
| 167 | } | 169 | } |
| 168 | }) | 170 | }) |
| 169 | .catch( (error) =>{ | 171 | .catch( (error) =>{ |
| 170 | if (error.response) { | 172 | if (error.response) { |
| 171 | this.$toaster.error(error.response.data.message); | 173 | this.$toaster.error(error.response.data.message); |
| 172 | } | 174 | } |
| 173 | }); | 175 | }); |
| 174 | }, | 176 | }, |
| 175 | }, | 177 | }, |
| 176 | }; | 178 | }; |
| 177 | </script> | 179 | </script> |
| 178 | <style> | 180 | <style> |
| 179 | .light-font-weight { | 181 | .light-font-weight { |
| 180 | font-weight: 500 !important; | 182 | font-weight: 500 !important; |
| 181 | } | 183 | } |
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 | <div class="top-area-blank"></div> | 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"> | ||
| 293 | <div class="top-area-blank"></div> | ||
| 292 | <img | 294 | <img |
| 293 | :src="currentSlideData.payload.metaData.mobileImage1" | 295 | :src="currentSlideData.payload.metaData.mobileImage1" |
| 294 | class="m-screen" | 296 | class="m-screen insight-two-img" |
| 295 | /> | 297 | /> |
| 298 | </div> | ||
| 296 | <!-- <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" /> --> |
| 297 | <img | 300 | <img |
| 298 | :src="currentSlideData.payload.metaData.authorImage" | 301 | :src="currentSlideData.payload.metaData.authorImage" |
| 299 | class="user-photo-bottom" | 302 | class="user-photo-bottom" |
| 300 | /> | 303 | /> |
| 301 | </div> | 304 | </div> |
| 302 | <!-- mobile screen one --> | 305 | <!-- mobile screen one --> |
| 303 | <div class="mobile-screen-one p-right"> | 306 | <div class="mobile-screen-one p-right"> |
| 304 | <div class="top-area-blank"></div> | ||
| 305 | <div class="view-ticket-wrp-ps"> | 307 | <div class="view-ticket-wrp-ps"> |
| 306 | <div class="single-author-li-comments"> | 308 | <div class="single-author-li-comments"> |
| 307 | <div class="a-intro-comments custom-selected-style"> | 309 | <div class="a-intro-comments custom-selected-style"> |
| 308 | <img src="../assets/images/rect.svg" class="rect" /> | 310 | <img src="../assets/images/rect.svg" class="rect" /> |
| 309 | 311 | ||
| 310 | <div class="top-wrp"> | 312 | <div class="top-wrp"> |
| 311 | {{ currentSlideData.payload.insight.tag }} Insight | 313 | {{ 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> | 314 | <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> |
| 313 | </div> | 315 | </div> |
| 314 | <div class="top-head"> | 316 | <div class="top-head"> |
| 315 | {{ currentSlideData.payload.insight.title }} | 317 | {{ currentSlideData.payload.insight.title }} |
| 316 | </div> | 318 | </div> |
| 317 | <p>{{ currentSlideData.payload.insight.description }}</p> | 319 | <p>{{ currentSlideData.payload.insight.description }}</p> |
| 318 | <div class="footer"> | 320 | <div class="footer"> |
| 319 | <a href="javascript:void(0);" class="cit-16" | 321 | <a href="javascript:void(0);" class="cit-16" |
| 320 | >{{ | 322 | >{{ |
| 321 | currentSlideData.payload.insight.citations.length | 323 | currentSlideData.payload.insight.citations.length |
| 322 | }} | 324 | }} |
| 323 | Citations</a | 325 | Citations</a |
| 324 | > | 326 | > |
| 325 | <!-- <a href="javascript:void(0);" class="ft-share" | 327 | <!-- <a href="javascript:void(0);" class="ft-share" |
| 326 | ><img src="../assets/images/reply-red.svg" /> Share from | 328 | ><img src="../assets/images/reply-red.svg" /> Share from |
| 327 | library</a | 329 | library</a |
| 328 | > --> | 330 | > --> |
| 329 | </div> | 331 | </div> |
| 330 | <!-- footer --> | 332 | <!-- footer --> |
| 331 | </div> | 333 | </div> |
| 332 | <!-- comments box --> | 334 | <!-- comments box --> |
| 333 | </div> | 335 | </div> |
| 334 | <!-- single author comments --> | 336 | <!-- single author comments --> |
| 335 | </div> | 337 | </div> |
| 336 | <!-- comments --> | 338 | <!-- comments --> |
| 337 | <!-- <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"> | ||
| 341 | <div class="top-area-blank"></div> | ||
| 338 | <img | 342 | <img |
| 339 | :src="currentSlideData.payload.metaData.mobileImage2" | 343 | :src="currentSlideData.payload.metaData.mobileImage2" |
| 340 | class="m-screen" | 344 | class="m-screen insight-two-img" |
| 341 | /> | 345 | /> |
| 342 | </div> | 346 | </div> |
| 347 | </div> | ||
| 343 | <!-- mobile screen Two --> | 348 | <!-- mobile screen Two --> |
| 344 | </div> | 349 | </div> |
| 345 | <div class="footer-nav"> | 350 | <div class="footer-nav"> |
| 346 | <div class="footer-top white-bg"> | 351 | <div class="footer-top white-bg"> |
| 347 | <div class="row"> | 352 | <div class="row"> |
| 348 | <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"> |
| 349 | <div class="row h-100p"> | 354 | <div class="row h-100p"> |
| 350 | <div | 355 | <div |
| 351 | 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" |
| 352 | > | 357 | > |
| 353 | <div class="ft-comments-group testi-photos-ct"> | 358 | <div class="ft-comments-group testi-photos-ct"> |
| 354 | <div class="c-with-photos"> | 359 | <div class="c-with-photos"> |
| 355 | <span class="count-comments" | 360 | <span class="count-comments" |
| 356 | >{{ getLastcomment("count", commentList) }}+ | 361 | >{{ getLastcomment("count", commentList) }}+ |
| 357 | Comments</span | 362 | Comments</span |
| 358 | ><!-- count commets --> | 363 | ><!-- count commets --> |
| 359 | <ul class="comments-photos"> | 364 | <ul class="comments-photos"> |
| 360 | <li><img src="../assets/images/c-photo-1.png" /></li> | 365 | <li><img src="../assets/images/c-photo-1.png" /></li> |
| 361 | <li><img src="../assets/images/c-photo-2.png" /></li> | 366 | <li><img src="../assets/images/c-photo-2.png" /></li> |
| 362 | <li><img src="../assets/images/c-photo-3.png" /></li> | 367 | <li><img src="../assets/images/c-photo-3.png" /></li> |
| 363 | </ul> | 368 | </ul> |
| 364 | <!-- comment photos --> | 369 | <!-- comment photos --> |
| 365 | </div> | 370 | </div> |
| 366 | <div class="comments-detail all-c-space"> | 371 | <div class="comments-detail all-c-space"> |
| 367 | <span | 372 | <span |
| 368 | >{{ getLastcomment("name", commentList) }} | 373 | >{{ getLastcomment("name", commentList) }} |
| 369 | <a href="javascript:void(0);" @click="open_ct_box" | 374 | <a href="javascript:void(0);" @click="open_ct_box" |
| 370 | >View All</a | 375 | >View All</a |
| 371 | ></span | 376 | ></span |
| 372 | > | 377 | > |
| 373 | <p> | 378 | <p> |
| 374 | <!-- I wonder what the difference between “Dunzo Assistant” | 379 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 375 | and “Pickup and Drop... --> | 380 | and “Pickup and Drop... --> |
| 376 | {{ getLastcomment("msg", commentList) }} | 381 | {{ getLastcomment("msg", commentList) }} |
| 377 | </p> | 382 | </p> |
| 378 | </div> | 383 | </div> |
| 379 | <!-- comments detail --> | 384 | <!-- comments detail --> |
| 380 | </div> | 385 | </div> |
| 381 | <!-- comments Group --> | 386 | <!-- comments Group --> |
| 382 | </div> | 387 | </div> |
| 383 | </div> | 388 | </div> |
| 384 | </div> | 389 | </div> |
| 385 | <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"> |
| 386 | <div class="comment-frm no-c-frm"> | 391 | <div class="comment-frm no-c-frm"> |
| 387 | <div class="row"> | 392 | <div class="row"> |
| 388 | <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"> |
| 389 | <div class="form-group frm-wdth addfrm-spc"> | 394 | <div class="form-group frm-wdth addfrm-spc"> |
| 390 | <input | 395 | <input |
| 391 | type="text" | 396 | type="text" |
| 392 | class="form-control" | 397 | class="form-control" |
| 393 | placeholder="Something on your mind?" | 398 | placeholder="Something on your mind?" |
| 394 | id="open_ct_box" | 399 | id="open_ct_box" |
| 395 | v-model="comment" | 400 | v-model="comment" |
| 396 | /> | 401 | /> |
| 397 | </div> | 402 | </div> |
| 398 | </div> | 403 | </div> |
| 399 | <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"> |
| 400 | <a | 405 | <a |
| 401 | href="javascript:void(0);" | 406 | href="javascript:void(0);" |
| 402 | @click="createComment" | 407 | @click="createComment" |
| 403 | class="add-comment" | 408 | class="add-comment" |
| 404 | ><img src="../assets/images/add-comment.svg" /> | 409 | ><img src="../assets/images/add-comment.svg" /> |
| 405 | Comment</a | 410 | Comment</a |
| 406 | > | 411 | > |
| 407 | </div> | 412 | </div> |
| 408 | </div> | 413 | </div> |
| 409 | <!-- comment from --> | 414 | <!-- comment from --> |
| 410 | </div> | 415 | </div> |
| 411 | </div> | 416 | </div> |
| 412 | <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"> |
| 413 | <ul class="top-intro-bt"> | 418 | <ul class="top-intro-bt"> |
| 414 | <li> | 419 | <li> |
| 415 | <a href="javascript:void(0);" @click="goBack" | 420 | <a href="javascript:void(0);" @click="goBack" |
| 416 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 421 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 417 | > | 422 | > |
| 418 | </li> | 423 | </li> |
| 419 | <li> | 424 | <li> |
| 420 | <a href="javascript:void(0);" @click="goNext" | 425 | <a href="javascript:void(0);" @click="goNext" |
| 421 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 426 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 422 | slide</a | 427 | slide</a |
| 423 | > | 428 | > |
| 424 | </li> | 429 | </li> |
| 425 | </ul> | 430 | </ul> |
| 426 | </div> | 431 | </div> |
| 427 | <!-- buttons list --> | 432 | <!-- buttons list --> |
| 428 | </div> | 433 | </div> |
| 429 | </div> | 434 | </div> |
| 430 | <!-- footer top --> | 435 | <!-- footer top --> |
| 431 | <div class="footer-bottom"> | 436 | <div class="footer-bottom"> |
| 432 | <ul> | 437 | <ul> |
| 433 | <li class="active"></li> | 438 | <li class="active"></li> |
| 434 | <li></li> | 439 | <li></li> |
| 435 | </ul> | 440 | </ul> |
| 436 | </div> | 441 | </div> |
| 437 | <!-- footer top --> | 442 | <!-- footer top --> |
| 438 | </div> | 443 | </div> |
| 439 | <!-- footer --> | 444 | <!-- footer --> |
| 440 | </div> | 445 | </div> |
| 441 | <!-- body wrapper --> | 446 | <!-- body wrapper --> |
| 442 | </div> | 447 | </div> |
| 443 | <!-- main wrapper --> | 448 | <!-- main wrapper --> |
| 444 | </main> | 449 | </main> |
| 445 | </template> | 450 | </template> |
| 446 | 451 | ||
| 447 | <script> | 452 | <script> |
| 448 | import Vue from "vue"; | 453 | import Vue from "vue"; |
| 449 | import router from "../router"; | 454 | import router from "../router"; |
| 450 | import axios from "axios"; | 455 | import axios from "axios"; |
| 451 | import moment from "moment"; | 456 | import moment from "moment"; |
| 452 | import Header from "./Header"; | 457 | import Header from "./Header"; |
| 453 | 458 | ||
| 454 | export default { | 459 | export default { |
| 455 | components: { | 460 | components: { |
| 456 | Header: Header, | 461 | Header: Header, |
| 457 | }, | 462 | }, |
| 458 | name: "TwoScreenWithInsight", | 463 | name: "TwoScreenWithInsight", |
| 459 | data() { | 464 | data() { |
| 460 | return { | 465 | return { |
| 461 | allSlide: [], | 466 | allSlide: [], |
| 462 | currentSlideIndex: null, | 467 | currentSlideIndex: null, |
| 463 | currentSlideData: null, | 468 | currentSlideData: null, |
| 464 | // | 469 | // |
| 465 | usertoken: null, | 470 | usertoken: null, |
| 466 | commentList: [], | 471 | commentList: [], |
| 467 | comment: null, | 472 | comment: null, |
| 468 | parentInput: true, | 473 | parentInput: true, |
| 469 | }; | 474 | }; |
| 470 | }, | 475 | }, |
| 471 | mounted() { | 476 | mounted() { |
| 472 | var allSlideData = localStorage.getItem( | 477 | var allSlideData = localStorage.getItem( |
| 473 | "spotlight_slide" + this.$route.params.caseStudyId | 478 | "spotlight_slide" + this.$route.params.caseStudyId |
| 474 | ); | 479 | ); |
| 475 | if (allSlideData) { | 480 | if (allSlideData) { |
| 476 | this.allSlide = JSON.parse(allSlideData); | 481 | this.allSlide = JSON.parse(allSlideData); |
| 477 | this.getCurrentSlideData(); | 482 | this.getCurrentSlideData(); |
| 478 | } | 483 | } |
| 479 | var userdata = localStorage.getItem("spotlight_usertoken"); | 484 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 480 | if (userdata) { | 485 | if (userdata) { |
| 481 | userdata = JSON.parse(userdata); | 486 | userdata = JSON.parse(userdata); |
| 482 | this.usertoken = userdata.token; | 487 | this.usertoken = userdata.token; |
| 483 | this.getComment(); | 488 | this.getComment(); |
| 484 | } | 489 | } |
| 485 | }, | 490 | }, |
| 486 | methods: { | 491 | methods: { |
| 487 | getCurrentSlideData() { | 492 | getCurrentSlideData() { |
| 488 | var i = this.allSlide.findIndex( | 493 | var i = this.allSlide.findIndex( |
| 489 | (slide_) => slide_.slideId == this.$route.params.slideId | 494 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 490 | ); | 495 | ); |
| 491 | this.currentSlideIndex = i; | 496 | this.currentSlideIndex = i; |
| 492 | this.currentSlideData = this.allSlide[i]; | 497 | this.currentSlideData = this.allSlide[i]; |
| 493 | console.log("currentSlideData", this.currentSlideData); | 498 | console.log("currentSlideData", this.currentSlideData); |
| 494 | }, | 499 | }, |
| 495 | goNext() { | 500 | goNext() { |
| 496 | this.currentSlideIndex++; | 501 | this.currentSlideIndex++; |
| 497 | this.$router.push({ | 502 | this.$router.push({ |
| 498 | name: this.allSlide[this.currentSlideIndex].ur, | 503 | name: this.allSlide[this.currentSlideIndex].ur, |
| 499 | params: { | 504 | params: { |
| 500 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 505 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 501 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 506 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 502 | }, | 507 | }, |
| 503 | }); | 508 | }); |
| 504 | }, | 509 | }, |
| 505 | goBack() { | 510 | goBack() { |
| 506 | this.currentSlideIndex--; | 511 | this.currentSlideIndex--; |
| 507 | this.$router.push({ | 512 | this.$router.push({ |
| 508 | name: this.allSlide[this.currentSlideIndex].ur, | 513 | name: this.allSlide[this.currentSlideIndex].ur, |
| 509 | params: { | 514 | params: { |
| 510 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 515 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 511 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 516 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 512 | }, | 517 | }, |
| 513 | }); | 518 | }); |
| 514 | }, | 519 | }, |
| 515 | createComment() { | 520 | createComment() { |
| 516 | console.log("===", this.comment); | 521 | console.log("===", this.comment); |
| 517 | var obj = { | 522 | var obj = { |
| 518 | caseStudyId: this.currentSlideData.caseStudyId, | 523 | caseStudyId: this.currentSlideData.caseStudyId, |
| 519 | slideId: this.currentSlideData.slideId, | 524 | slideId: this.currentSlideData.slideId, |
| 520 | comment: this.comment, | 525 | comment: this.comment, |
| 521 | }; | 526 | }; |
| 522 | axios | 527 | axios |
| 523 | .post("/bounceBoard/comment", obj, { | 528 | .post("/bounceBoard/comment", obj, { |
| 524 | headers: { | 529 | headers: { |
| 525 | Authorization: "Bearer " + this.usertoken, | 530 | Authorization: "Bearer " + this.usertoken, |
| 526 | }, | 531 | }, |
| 527 | }) | 532 | }) |
| 528 | .then((response) => { | 533 | .then((response) => { |
| 529 | this.comment = null; | 534 | this.comment = null; |
| 530 | this.getComment(); | 535 | this.getComment(); |
| 531 | console.log(response); | 536 | console.log(response); |
| 532 | }) | 537 | }) |
| 533 | .catch((error) => { | 538 | .catch((error) => { |
| 534 | if (error.response) { | 539 | if (error.response) { |
| 535 | this.$toaster.error(error.response.data.message); | 540 | this.$toaster.error(error.response.data.message); |
| 536 | } | 541 | } |
| 537 | }); | 542 | }); |
| 538 | }, | 543 | }, |
| 539 | createChildComment(cmnt) { | 544 | createChildComment(cmnt) { |
| 540 | console.log(cmnt, "===", this.comment); | 545 | console.log(cmnt, "===", this.comment); |
| 541 | var obj = { | 546 | var obj = { |
| 542 | caseStudyId: this.currentSlideData.caseStudyId, | 547 | caseStudyId: this.currentSlideData.caseStudyId, |
| 543 | slideId: this.currentSlideData.slideId, | 548 | slideId: this.currentSlideData.slideId, |
| 544 | comment: this.comment, | 549 | comment: this.comment, |
| 545 | parentId: cmnt._id, | 550 | parentId: cmnt._id, |
| 546 | }; | 551 | }; |
| 547 | axios | 552 | axios |
| 548 | .post("/bounceBoard/comment", obj, { | 553 | .post("/bounceBoard/comment", obj, { |
| 549 | headers: { | 554 | headers: { |
| 550 | Authorization: "Bearer " + this.usertoken, | 555 | Authorization: "Bearer " + this.usertoken, |
| 551 | }, | 556 | }, |
| 552 | }) | 557 | }) |
| 553 | .then((response) => { | 558 | .then((response) => { |
| 554 | this.comment = null; | 559 | this.comment = null; |
| 555 | this.discardRply(cmnt); | 560 | this.discardRply(cmnt); |
| 556 | this.getComment(); | 561 | this.getComment(); |
| 557 | console.log(response); | 562 | console.log(response); |
| 558 | }) | 563 | }) |
| 559 | .catch((error) => { | 564 | .catch((error) => { |
| 560 | if (error.response) { | 565 | if (error.response) { |
| 561 | this.$toaster.error(error.response.data.message); | 566 | this.$toaster.error(error.response.data.message); |
| 562 | } | 567 | } |
| 563 | }); | 568 | }); |
| 564 | }, | 569 | }, |
| 565 | getComment() { | 570 | getComment() { |
| 566 | axios | 571 | axios |
| 567 | .get( | 572 | .get( |
| 568 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 573 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 569 | { | 574 | { |
| 570 | headers: { | 575 | headers: { |
| 571 | Authorization: "Bearer " + this.usertoken, | 576 | Authorization: "Bearer " + this.usertoken, |
| 572 | }, | 577 | }, |
| 573 | } | 578 | } |
| 574 | ) | 579 | ) |
| 575 | .then((response) => { | 580 | .then((response) => { |
| 576 | console.log(response.data); | 581 | console.log(response.data); |
| 577 | var comments = []; | 582 | var comments = []; |
| 578 | var keys = Object.keys(response.data.data); | 583 | var keys = Object.keys(response.data.data); |
| 579 | response.data.data; | 584 | response.data.data; |
| 580 | keys.forEach((key_) => { | 585 | keys.forEach((key_) => { |
| 581 | comments.push(response.data.data[key_]); | 586 | comments.push(response.data.data[key_]); |
| 582 | }); | 587 | }); |
| 583 | comments.forEach((coment_) => { | 588 | comments.forEach((coment_) => { |
| 584 | coment_.childInput = false; | 589 | coment_.childInput = false; |
| 585 | }); | 590 | }); |
| 586 | console.log("comments", comments); | 591 | console.log("comments", comments); |
| 587 | this.commentList = comments; | 592 | this.commentList = comments; |
| 588 | }) | 593 | }) |
| 589 | .catch((error) => console.log(error)); | 594 | .catch((error) => console.log(error)); |
| 590 | }, | 595 | }, |
| 591 | dateGenerator(curreDate) { | 596 | dateGenerator(curreDate) { |
| 592 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 597 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 593 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 598 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 594 | var result = todayDate.diff(endDate, "days"); | 599 | var result = todayDate.diff(endDate, "days"); |
| 595 | return result; | 600 | return result; |
| 596 | }, | 601 | }, |
| 597 | goToLogin() { | 602 | goToLogin() { |
| 598 | this.$router.push("/login"); | 603 | this.$router.push("/login"); |
| 599 | }, | 604 | }, |
| 600 | goToSignUp() { | 605 | goToSignUp() { |
| 601 | this.$router.push("/"); | 606 | this.$router.push("/"); |
| 602 | }, | 607 | }, |
| 603 | open(url){ | 608 | open(url){ |
| 604 | window.open(url); | 609 | window.open(url); |
| 605 | }, | 610 | }, |
| 606 | chtbox_close() { | 611 | chtbox_close() { |
| 607 | $("#cht_box_close").removeClass("cht_close"); | 612 | $("#cht_box_close").removeClass("cht_close"); |
| 608 | $("#open_ct_box, .c_hide").show(); | 613 | $("#open_ct_box, .c_hide").show(); |
| 609 | $(".footer-top").addClass("white-bg"); | 614 | $(".footer-top").addClass("white-bg"); |
| 610 | }, | 615 | }, |
| 611 | open_ct_box() { | 616 | open_ct_box() { |
| 612 | $("#cht_box_close").addClass("cht_close"); | 617 | $("#cht_box_close").addClass("cht_close"); |
| 613 | $("#open_ct_box, .c_hide").hide(); | 618 | $("#open_ct_box, .c_hide").hide(); |
| 614 | $(".footer-top").removeClass("white-bg"); | 619 | $(".footer-top").removeClass("white-bg"); |
| 615 | }, | 620 | }, |
| 616 | eachRply(cmnt) { | 621 | eachRply(cmnt) { |
| 617 | cmnt.childInput = true; | 622 | cmnt.childInput = true; |
| 618 | this.parentInput = false; | 623 | this.parentInput = false; |
| 619 | this.comment = null; | 624 | this.comment = null; |
| 620 | setTimeout(() => { | 625 | setTimeout(() => { |
| 621 | document.getElementById("childInput").focus(); | 626 | document.getElementById("childInput").focus(); |
| 622 | }, 100); | 627 | }, 100); |
| 623 | }, | 628 | }, |
| 624 | discardRply(cmnt) { | 629 | discardRply(cmnt) { |
| 625 | cmnt.childInput = false; | 630 | cmnt.childInput = false; |
| 626 | this.parentInput = true; | 631 | this.parentInput = true; |
| 627 | this.comment = null; | 632 | this.comment = null; |
| 628 | }, | 633 | }, |
| 629 | reply_cht_box(i) { | 634 | reply_cht_box(i) { |
| 630 | console.log(this.commentList, "cmnt"); | 635 | console.log(this.commentList, "cmnt"); |
| 631 | $("#cht_box_close").addClass("cht_close"); | 636 | $("#cht_box_close").addClass("cht_close"); |
| 632 | $("#open_ct_box, .c_hide").hide(); | 637 | $("#open_ct_box, .c_hide").hide(); |
| 633 | $(".footer-top").removeClass("white-bg"); | 638 | $(".footer-top").removeClass("white-bg"); |
| 634 | this.commentList[i].childInput = true; | 639 | this.commentList[i].childInput = true; |
| 635 | this.parentInput = false; | 640 | this.parentInput = false; |
| 636 | this.comment = null; | 641 | this.comment = null; |
| 637 | setTimeout(() => { | 642 | setTimeout(() => { |
| 638 | document.getElementById("childInput").focus(); | 643 | document.getElementById("childInput").focus(); |
| 639 | }, 100); | 644 | }, 100); |
| 640 | }, | 645 | }, |
| 641 | likeComment(status, id) { | 646 | likeComment(status, id) { |
| 642 | console.log("===", this.comment); | 647 | console.log("===", this.comment); |
| 643 | var obj = { | 648 | var obj = { |
| 644 | commentId: id, | 649 | commentId: id, |
| 645 | like: status, | 650 | like: status, |
| 646 | }; | 651 | }; |
| 647 | axios | 652 | axios |
| 648 | .post("/bounceBoard/like", obj, { | 653 | .post("/bounceBoard/like", obj, { |
| 649 | headers: { | 654 | headers: { |
| 650 | Authorization: "Bearer " + this.usertoken, | 655 | Authorization: "Bearer " + this.usertoken, |
| 651 | }, | 656 | }, |
| 652 | }) | 657 | }) |
| 653 | .then((response) => { | 658 | .then((response) => { |
| 654 | this.getComment(); | 659 | this.getComment(); |
| 655 | console.log(response); | 660 | console.log(response); |
| 656 | }) | 661 | }) |
| 657 | .catch((error) => { | 662 | .catch((error) => { |
| 658 | if (error.response) { | 663 | if (error.response) { |
| 659 | this.$toaster.error(error.response.data.message); | 664 | this.$toaster.error(error.response.data.message); |
| 660 | } | 665 | } |
| 661 | }); | 666 | }); |
| 662 | }, | 667 | }, |
| 663 | getLastcomment(flag, commentArray) { | 668 | getLastcomment(flag, commentArray) { |
| 664 | var finalComment = null; | 669 | var finalComment = null; |
| 665 | var totalMessage = 0; | 670 | var totalMessage = 0; |
| 666 | var name = null; | 671 | var name = null; |
| 667 | commentArray.forEach((comment_) => { | 672 | commentArray.forEach((comment_) => { |
| 668 | if (comment_.comment != null) { | 673 | if (comment_.comment != null) { |
| 669 | name = comment_.user.name; | 674 | name = comment_.user.name; |
| 670 | finalComment = comment_.comment; | 675 | finalComment = comment_.comment; |
| 671 | totalMessage++; | 676 | totalMessage++; |
| 672 | } | 677 | } |
| 673 | }); | 678 | }); |
| 674 | if (flag == "count") { | 679 | if (flag == "count") { |
| 675 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 680 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 676 | } else if (flag =="name") { | 681 | } else if (flag =="name") { |
| 677 | return (name = name); | 682 | return (name = name); |
| 678 | } else { | 683 | } else { |
| 679 | return finalComment; | 684 | return finalComment; |
| 680 | } | 685 | } |
| 681 | }, | 686 | }, |
| 682 | commentExistCheck(i) { | 687 | commentExistCheck(i) { |
| 683 | console.log(this.commentList[i].comment); | 688 | console.log(this.commentList[i].comment); |
| 684 | var returnValue = false; | 689 | var returnValue = false; |
| 685 | if (this.commentList[i].comment) { | 690 | if (this.commentList[i].comment) { |
| 686 | returnValue = true; | 691 | returnValue = true; |
| 687 | } | 692 | } |
| 688 | return returnValue; | 693 | return returnValue; |
| 689 | }, | 694 | }, |
| 690 | }, | 695 | }, |
| 691 | }; | 696 | }; |
| 692 | // | 697 | // |
| 693 | </script> | 698 | </script> |
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 | <div class="top-area-blank"></div> | 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"> | ||
| 294 | <div class="top-area-blank"></div> | ||
| 293 | <img | 295 | <img |
| 294 | :src="currentSlideData.payload.metaData.mobileImage1" | 296 | :src="currentSlideData.payload.metaData.mobileImage1" |
| 295 | class="m-screen" | 297 | class="m-screen insight-two-img" |
| 296 | /> | 298 | /> |
| 299 | </div> | ||
| 297 | <img | 300 | <img |
| 298 | :src="currentSlideData.payload.metaData.authorImage" | 301 | :src="currentSlideData.payload.metaData.authorImage" |
| 299 | class="user-photo-bottom" | 302 | class="user-photo-bottom" |
| 300 | /> | 303 | /> |
| 301 | </div> | 304 | </div> |
| 302 | <!-- mobile screen one --> | 305 | <!-- mobile screen one --> |
| 303 | <div class="mobile-screen-one p-right"> | 306 | <div class="mobile-screen-one p-right"> |
| 304 | <div class="top-area-blank"></div> | 307 | |
| 305 | <!-- fixed area --> | 308 | <!-- fixed area --> |
| 306 | <div class="m-screen-right"> | 309 | <div class="m-screen-right"> |
| 307 | <div class="single-author-li-comments" v-if="commentExistCheck(2)"> | 310 | <div class="single-author-li-comments" v-if="commentExistCheck(2)"> |
| 308 | <div class="a-intro-comments"> | 311 | <div class="a-intro-comments"> |
| 309 | <p> | 312 | <p> |
| 310 | {{commentList[2].comment}} | 313 | {{commentList[2].comment}} |
| 311 | </p> | 314 | </p> |
| 312 | <ul class="rly-comment-set"> | 315 | <ul class="rly-comment-set"> |
| 313 | <!-- like/dislike --> | 316 | <!-- like/dislike --> |
| 314 | <li> | 317 | <li> |
| 315 | <img | 318 | <img |
| 316 | src="../assets/images/heart.svg" | 319 | src="../assets/images/heart.svg" |
| 317 | v-if="commentList[2].like == false" | 320 | v-if="commentList[2].like == false" |
| 318 | @click="likeComment(true, commentList[2]._id)" | 321 | @click="likeComment(true, commentList[2]._id)" |
| 319 | class="cursor-pointer" | 322 | class="cursor-pointer" |
| 320 | /> | 323 | /> |
| 321 | <img | 324 | <img |
| 322 | src="../assets/images/purple-heart.png" | 325 | src="../assets/images/purple-heart.png" |
| 323 | v-if="commentList[2].like == true" | 326 | v-if="commentList[2].like == true" |
| 324 | @click="likeComment(false, commentList[2]._id)" | 327 | @click="likeComment(false, commentList[2]._id)" |
| 325 | class="cursor-pointer" | 328 | class="cursor-pointer" |
| 326 | /> | 329 | /> |
| 327 | <a href="javascript:void(0);">{{ | 330 | <a href="javascript:void(0);">{{ |
| 328 | commentList[2].likes.length | 331 | commentList[2].likes.length |
| 329 | }}</a> | 332 | }}</a> |
| 330 | </li> | 333 | </li> |
| 331 | <!-- like/dislike ends --> | 334 | <!-- like/dislike ends --> |
| 332 | <li> | 335 | <li> |
| 333 | <img src="../assets/images/rply.svg" /> | 336 | <img src="../assets/images/rply.svg" /> |
| 334 | <a href="javascript:void(0);" @click="reply_cht_box(2)" | 337 | <a href="javascript:void(0);" @click="reply_cht_box(2)" |
| 335 | >Reply</a | 338 | >Reply</a |
| 336 | > | 339 | > |
| 337 | </li> | 340 | </li> |
| 338 | </ul> | 341 | </ul> |
| 339 | </div> | 342 | </div> |
| 340 | <!-- comments box --> | 343 | <!-- comments box --> |
| 341 | </div> | 344 | </div> |
| 342 | <!-- single author comments --> | 345 | <!-- single author comments --> |
| 343 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | 346 | <div class="single-author-li-comments" v-if="commentExistCheck(3)"> |
| 344 | <div class="a-intro-comments"> | 347 | <div class="a-intro-comments"> |
| 345 | <p> | 348 | <p> |
| 346 | {{commentList[3].comment}} | 349 | {{commentList[3].comment}} |
| 347 | </p> | 350 | </p> |
| 348 | <ul class="rly-comment-set"> | 351 | <ul class="rly-comment-set"> |
| 349 | <!-- like/dislike --> | 352 | <!-- like/dislike --> |
| 350 | <li> | 353 | <li> |
| 351 | <img | 354 | <img |
| 352 | src="../assets/images/heart.svg" | 355 | src="../assets/images/heart.svg" |
| 353 | v-if="commentList[3].like == false" | 356 | v-if="commentList[3].like == false" |
| 354 | @click="likeComment(true, commentList[3]._id)" | 357 | @click="likeComment(true, commentList[3]._id)" |
| 355 | class="cursor-pointer" | 358 | class="cursor-pointer" |
| 356 | /> | 359 | /> |
| 357 | <img | 360 | <img |
| 358 | src="../assets/images/purple-heart.png" | 361 | src="../assets/images/purple-heart.png" |
| 359 | v-if="commentList[3].like == true" | 362 | v-if="commentList[3].like == true" |
| 360 | @click="likeComment(false, commentList[3]._id)" | 363 | @click="likeComment(false, commentList[3]._id)" |
| 361 | class="cursor-pointer" | 364 | class="cursor-pointer" |
| 362 | /> | 365 | /> |
| 363 | <a href="javascript:void(0);">{{ | 366 | <a href="javascript:void(0);">{{ |
| 364 | commentList[3].likes.length | 367 | commentList[3].likes.length |
| 365 | }}</a> | 368 | }}</a> |
| 366 | </li> | 369 | </li> |
| 367 | <!-- like/dislike ends --> | 370 | <!-- like/dislike ends --> |
| 368 | <li> | 371 | <li> |
| 369 | <img src="../assets/images/rply.svg" /> | 372 | <img src="../assets/images/rply.svg" /> |
| 370 | <a href="javascript:void(0);" @click="reply_cht_box(3)" | 373 | <a href="javascript:void(0);" @click="reply_cht_box(3)" |
| 371 | >Reply</a | 374 | >Reply</a |
| 372 | > | 375 | > |
| 373 | </li> | 376 | </li> |
| 374 | </ul> | 377 | </ul> |
| 375 | </div> | 378 | </div> |
| 376 | <!-- comments box --> | 379 | <!-- comments box --> |
| 377 | </div> | 380 | </div> |
| 378 | <!-- single author comments --> | 381 | <!-- single author comments --> |
| 379 | </div> | 382 | </div> |
| 380 | <!-- comments --> | 383 | <!-- comments --> |
| 384 | <div class="m-screen-hidden"> | ||
| 385 | <div class="top-area-blank"></div> | ||
| 381 | <img | 386 | <img |
| 382 | :src="currentSlideData.payload.metaData.mobileImage2" | 387 | :src="currentSlideData.payload.metaData.mobileImage2" |
| 383 | class="m-screen" | 388 | class="m-screen insight-two-img" |
| 384 | /> | 389 | /> |
| 390 | </div> | ||
| 385 | <img | 391 | <img |
| 386 | :src="currentSlideData.payload.metaData.authorImage" | 392 | :src="currentSlideData.payload.metaData.authorImage" |
| 387 | class="user-photo-bottom-r" | 393 | class="user-photo-bottom-r" |
| 388 | /> | 394 | /> |
| 389 | </div> | 395 | </div> |
| 390 | <!-- mobile screen Two --> | 396 | <!-- mobile screen Two --> |
| 391 | </div> | 397 | </div> |
| 392 | 398 | ||
| 393 | <!-- single author comments --> | 399 | <!-- single author comments --> |
| 394 | <div class="footer-nav"> | 400 | <div class="footer-nav"> |
| 395 | <div class="footer-top white-bg"> | 401 | <div class="footer-top white-bg"> |
| 396 | <div class="row"> | 402 | <div class="row"> |
| 397 | <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"> |
| 398 | <div class="row h-100p"> | 404 | <div class="row h-100p"> |
| 399 | <div | 405 | <div |
| 400 | 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" |
| 401 | > | 407 | > |
| 402 | <div class="ft-comments-group testi-photos-ct"> | 408 | <div class="ft-comments-group testi-photos-ct"> |
| 403 | <div class="c-with-photos"> | 409 | <div class="c-with-photos"> |
| 404 | <span class="count-comments" | 410 | <span class="count-comments" |
| 405 | >{{ getLastcomment("count", commentList) }}+ | 411 | >{{ getLastcomment("count", commentList) }}+ |
| 406 | Comments</span | 412 | Comments</span |
| 407 | ><!-- count commets --> | 413 | ><!-- count commets --> |
| 408 | <ul class="comments-photos"> | 414 | <ul class="comments-photos"> |
| 409 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | 415 | <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> |
| 410 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | 416 | <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> |
| 411 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | 417 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 412 | </ul> | 418 | </ul> |
| 413 | <!-- comment photos --> | 419 | <!-- comment photos --> |
| 414 | </div> | 420 | </div> |
| 415 | <div class="comments-detail all-c-space"> | 421 | <div class="comments-detail all-c-space"> |
| 416 | <span | 422 | <span |
| 417 | >{{ getLastcomment("name", commentList) }} | 423 | >{{ getLastcomment("name", commentList) }} |
| 418 | <a href="javascript:void(0);" @click="open_ct_box" | 424 | <a href="javascript:void(0);" @click="open_ct_box" |
| 419 | >View All</a | 425 | >View All</a |
| 420 | ></span | 426 | ></span |
| 421 | > | 427 | > |
| 422 | <p> | 428 | <p> |
| 423 | <!-- I wonder what the difference between “Dunzo Assistant” | 429 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 424 | and “Pickup and Drop... --> | 430 | and “Pickup and Drop... --> |
| 425 | {{ getLastcomment("msg", commentList) }} | 431 | {{ getLastcomment("msg", commentList) }} |
| 426 | </p> | 432 | </p> |
| 427 | </div> | 433 | </div> |
| 428 | <!-- comments detail --> | 434 | <!-- comments detail --> |
| 429 | </div> | 435 | </div> |
| 430 | <!-- comments Group --> | 436 | <!-- comments Group --> |
| 431 | </div> | 437 | </div> |
| 432 | </div> | 438 | </div> |
| 433 | </div> | 439 | </div> |
| 434 | <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"> |
| 435 | <div class="comment-frm no-c-frm"> | 441 | <div class="comment-frm no-c-frm"> |
| 436 | <div class="row"> | 442 | <div class="row"> |
| 437 | <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"> |
| 438 | <div class="form-group frm-wdth addfrm-spc"> | 444 | <div class="form-group frm-wdth addfrm-spc"> |
| 439 | <input | 445 | <input |
| 440 | type="text" | 446 | type="text" |
| 441 | class="form-control" | 447 | class="form-control" |
| 442 | placeholder="Something on your mind?" | 448 | placeholder="Something on your mind?" |
| 443 | id="open_ct_box" | 449 | id="open_ct_box" |
| 444 | v-model="comment" | 450 | v-model="comment" |
| 445 | /> | 451 | /> |
| 446 | </div> | 452 | </div> |
| 447 | </div> | 453 | </div> |
| 448 | <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"> |
| 449 | <a | 455 | <a |
| 450 | href="javascript:void(0);" | 456 | href="javascript:void(0);" |
| 451 | @click="createComment" | 457 | @click="createComment" |
| 452 | class="add-comment" | 458 | class="add-comment" |
| 453 | ><img src="../assets/images/add-comment.svg" /> | 459 | ><img src="../assets/images/add-comment.svg" /> |
| 454 | Comment</a | 460 | Comment</a |
| 455 | > | 461 | > |
| 456 | </div> | 462 | </div> |
| 457 | </div> | 463 | </div> |
| 458 | <!-- comment from --> | 464 | <!-- comment from --> |
| 459 | </div> | 465 | </div> |
| 460 | </div> | 466 | </div> |
| 461 | <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"> |
| 462 | <ul class="top-intro-bt"> | 468 | <ul class="top-intro-bt"> |
| 463 | <li> | 469 | <li> |
| 464 | <a href="javascript:void(0);" @click="goBack" | 470 | <a href="javascript:void(0);" @click="goBack" |
| 465 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 471 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 466 | > | 472 | > |
| 467 | </li> | 473 | </li> |
| 468 | <li> | 474 | <li> |
| 469 | <a href="javascript:void(0);" @click="goNext" | 475 | <a href="javascript:void(0);" @click="goNext" |
| 470 | ><img src="../assets/images/skip-next.svg" /> Skip to next | 476 | ><img src="../assets/images/skip-next.svg" /> Skip to next |
| 471 | slide</a | 477 | slide</a |
| 472 | > | 478 | > |
| 473 | </li> | 479 | </li> |
| 474 | </ul> | 480 | </ul> |
| 475 | </div> | 481 | </div> |
| 476 | <!-- buttons list --> | 482 | <!-- buttons list --> |
| 477 | </div> | 483 | </div> |
| 478 | </div> | 484 | </div> |
| 479 | <!-- footer top --> | 485 | <!-- footer top --> |
| 480 | <div class="footer-bottom"> | 486 | <div class="footer-bottom"> |
| 481 | <ul> | 487 | <ul> |
| 482 | <li class="active"></li> | 488 | <li class="active"></li> |
| 483 | <li></li> | 489 | <li></li> |
| 484 | </ul> | 490 | </ul> |
| 485 | </div> | 491 | </div> |
| 486 | <!-- footer top --> | 492 | <!-- footer top --> |
| 487 | </div> | 493 | </div> |
| 488 | <!-- footer --> | 494 | <!-- footer --> |
| 489 | </div> | 495 | </div> |
| 490 | <!-- body wrapper --> | 496 | <!-- body wrapper --> |
| 491 | </div> | 497 | </div> |
| 492 | <!-- main wrapper --> | 498 | <!-- main wrapper --> |
| 493 | </main> | 499 | </main> |
| 494 | </template> | 500 | </template> |
| 495 | 501 | ||
| 496 | <script> | 502 | <script> |
| 497 | import Vue from "vue"; | 503 | import Vue from "vue"; |
| 498 | import router from "../router"; | 504 | import router from "../router"; |
| 499 | import axios from "axios"; | 505 | import axios from "axios"; |
| 500 | import moment from 'moment'; | 506 | import moment from 'moment'; |
| 501 | import Header from "./Header"; | 507 | import Header from "./Header"; |
| 502 | 508 | ||
| 503 | export default { | 509 | export default { |
| 504 | components: { | 510 | components: { |
| 505 | Header: Header, | 511 | Header: Header, |
| 506 | }, | 512 | }, |
| 507 | name: "TwoScreenWithoutInsight", | 513 | name: "TwoScreenWithoutInsight", |
| 508 | 514 | ||
| 509 | data() { | 515 | data() { |
| 510 | return { | 516 | return { |
| 511 | allSlide: [], | 517 | allSlide: [], |
| 512 | currentSlideIndex: null, | 518 | currentSlideIndex: null, |
| 513 | currentSlideData: null, | 519 | currentSlideData: null, |
| 514 | // | 520 | // |
| 515 | usertoken: null, | 521 | usertoken: null, |
| 516 | commentList: [], | 522 | commentList: [], |
| 517 | comment: null, | 523 | comment: null, |
| 518 | parentInput: true, | 524 | parentInput: true, |
| 519 | }; | 525 | }; |
| 520 | }, | 526 | }, |
| 521 | mounted() { | 527 | mounted() { |
| 522 | var allSlideData = localStorage.getItem( | 528 | var allSlideData = localStorage.getItem( |
| 523 | "spotlight_slide" + this.$route.params.caseStudyId | 529 | "spotlight_slide" + this.$route.params.caseStudyId |
| 524 | ); | 530 | ); |
| 525 | if (allSlideData) { | 531 | if (allSlideData) { |
| 526 | this.allSlide = JSON.parse(allSlideData); | 532 | this.allSlide = JSON.parse(allSlideData); |
| 527 | this.getCurrentSlideData(); | 533 | this.getCurrentSlideData(); |
| 528 | } | 534 | } |
| 529 | var userdata = localStorage.getItem("spotlight_usertoken"); | 535 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 530 | if (userdata) { | 536 | if (userdata) { |
| 531 | userdata = JSON.parse(userdata); | 537 | userdata = JSON.parse(userdata); |
| 532 | this.usertoken = userdata.token; | 538 | this.usertoken = userdata.token; |
| 533 | this.getComment(); | 539 | this.getComment(); |
| 534 | } | 540 | } |
| 535 | }, | 541 | }, |
| 536 | methods: { | 542 | methods: { |
| 537 | getCurrentSlideData() { | 543 | getCurrentSlideData() { |
| 538 | var i = this.allSlide.findIndex( | 544 | var i = this.allSlide.findIndex( |
| 539 | (slide_) => slide_.slideId == this.$route.params.slideId | 545 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 540 | ); | 546 | ); |
| 541 | this.currentSlideIndex = i; | 547 | this.currentSlideIndex = i; |
| 542 | this.currentSlideData = this.allSlide[i]; | 548 | this.currentSlideData = this.allSlide[i]; |
| 543 | console.log(this.currentSlideData, "this.usertoken", this.usertoken); | 549 | console.log(this.currentSlideData, "this.usertoken", this.usertoken); |
| 544 | console.log("currentSlideData", this.currentSlideData); | 550 | console.log("currentSlideData", this.currentSlideData); |
| 545 | }, | 551 | }, |
| 546 | goNext() { | 552 | goNext() { |
| 547 | this.currentSlideIndex++; | 553 | this.currentSlideIndex++; |
| 548 | this.$router.push({ | 554 | this.$router.push({ |
| 549 | name: this.allSlide[this.currentSlideIndex].ur, | 555 | name: this.allSlide[this.currentSlideIndex].ur, |
| 550 | params: { | 556 | params: { |
| 551 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 557 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 552 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 558 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 553 | }, | 559 | }, |
| 554 | }); | 560 | }); |
| 555 | }, | 561 | }, |
| 556 | goBack() { | 562 | goBack() { |
| 557 | this.currentSlideIndex--; | 563 | this.currentSlideIndex--; |
| 558 | this.$router.push({ | 564 | this.$router.push({ |
| 559 | name: this.allSlide[this.currentSlideIndex].ur, | 565 | name: this.allSlide[this.currentSlideIndex].ur, |
| 560 | params: { | 566 | params: { |
| 561 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 567 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 562 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 568 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 563 | }, | 569 | }, |
| 564 | }); | 570 | }); |
| 565 | }, | 571 | }, |
| 566 | 572 | ||
| 567 | createComment() { | 573 | createComment() { |
| 568 | console.log("===", this.comment); | 574 | console.log("===", this.comment); |
| 569 | var obj = { | 575 | var obj = { |
| 570 | caseStudyId: this.currentSlideData.caseStudyId, | 576 | caseStudyId: this.currentSlideData.caseStudyId, |
| 571 | slideId: this.currentSlideData.slideId, | 577 | slideId: this.currentSlideData.slideId, |
| 572 | comment: this.comment, | 578 | comment: this.comment, |
| 573 | 579 | ||
| 574 | }; | 580 | }; |
| 575 | axios | 581 | axios |
| 576 | .post("/bounceBoard/comment", obj, { | 582 | .post("/bounceBoard/comment", obj, { |
| 577 | headers: { | 583 | headers: { |
| 578 | Authorization: "Bearer " + this.usertoken, | 584 | Authorization: "Bearer " + this.usertoken, |
| 579 | }, | 585 | }, |
| 580 | }) | 586 | }) |
| 581 | .then((response) => { | 587 | .then((response) => { |
| 582 | this.comment = null; | 588 | this.comment = null; |
| 583 | this.getComment(); | 589 | this.getComment(); |
| 584 | console.log(response); | 590 | console.log(response); |
| 585 | }) | 591 | }) |
| 586 | .catch((error) => { | 592 | .catch((error) => { |
| 587 | if (error.response) { | 593 | if (error.response) { |
| 588 | this.$toaster.error(error.response.data.message); | 594 | this.$toaster.error(error.response.data.message); |
| 589 | } | 595 | } |
| 590 | }); | 596 | }); |
| 591 | }, | 597 | }, |
| 592 | createChildComment(cmnt) { | 598 | createChildComment(cmnt) { |
| 593 | console.log(cmnt,"===", this.comment); | 599 | console.log(cmnt,"===", this.comment); |
| 594 | var obj = { | 600 | var obj = { |
| 595 | caseStudyId: this.currentSlideData.caseStudyId, | 601 | caseStudyId: this.currentSlideData.caseStudyId, |
| 596 | slideId: this.currentSlideData.slideId, | 602 | slideId: this.currentSlideData.slideId, |
| 597 | comment: this.comment, | 603 | comment: this.comment, |
| 598 | parentId: cmnt._id, | 604 | parentId: cmnt._id, |
| 599 | 605 | ||
| 600 | }; | 606 | }; |
| 601 | axios | 607 | axios |
| 602 | .post("/bounceBoard/comment", obj, { | 608 | .post("/bounceBoard/comment", obj, { |
| 603 | headers: { | 609 | headers: { |
| 604 | Authorization: "Bearer " + this.usertoken, | 610 | Authorization: "Bearer " + this.usertoken, |
| 605 | }, | 611 | }, |
| 606 | }) | 612 | }) |
| 607 | .then((response) => { | 613 | .then((response) => { |
| 608 | this.comment = null; | 614 | this.comment = null; |
| 609 | this.discardRply(cmnt); | 615 | this.discardRply(cmnt); |
| 610 | this.getComment(); | 616 | this.getComment(); |
| 611 | console.log(response); | 617 | console.log(response); |
| 612 | }) | 618 | }) |
| 613 | .catch((error) => { | 619 | .catch((error) => { |
| 614 | if (error.response) { | 620 | if (error.response) { |
| 615 | this.$toaster.error(error.response.data.message); | 621 | this.$toaster.error(error.response.data.message); |
| 616 | } | 622 | } |
| 617 | }); | 623 | }); |
| 618 | }, | 624 | }, |
| 619 | getComment() { | 625 | getComment() { |
| 620 | axios | 626 | axios |
| 621 | .get( | 627 | .get( |
| 622 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, | 628 | `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`, |
| 623 | { | 629 | { |
| 624 | headers: { | 630 | headers: { |
| 625 | Authorization: "Bearer " + this.usertoken, | 631 | Authorization: "Bearer " + this.usertoken, |
| 626 | }, | 632 | }, |
| 627 | } | 633 | } |
| 628 | ) | 634 | ) |
| 629 | .then((response) => { | 635 | .then((response) => { |
| 630 | console.log(response.data); | 636 | console.log(response.data); |
| 631 | var comments = []; | 637 | var comments = []; |
| 632 | var keys = Object.keys(response.data.data) | 638 | var keys = Object.keys(response.data.data) |
| 633 | response.data.data | 639 | response.data.data |
| 634 | keys.forEach((key_) => { | 640 | keys.forEach((key_) => { |
| 635 | comments.push(response.data.data[key_]) | 641 | comments.push(response.data.data[key_]) |
| 636 | }); | 642 | }); |
| 637 | comments.forEach((coment_)=>{ | 643 | comments.forEach((coment_)=>{ |
| 638 | coment_.childInput = false; | 644 | coment_.childInput = false; |
| 639 | }); | 645 | }); |
| 640 | console.log("comments",comments) | 646 | console.log("comments",comments) |
| 641 | this.commentList = comments; | 647 | this.commentList = comments; |
| 642 | }) | 648 | }) |
| 643 | .catch((error) => console.log(error)); | 649 | .catch((error) => console.log(error)); |
| 644 | }, | 650 | }, |
| 645 | dateGenerator(curreDate){ | 651 | dateGenerator(curreDate){ |
| 646 | var todayDate = moment(new Date(), "DD.MM.YYYY"); | 652 | var todayDate = moment(new Date(), "DD.MM.YYYY"); |
| 647 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | 653 | var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); |
| 648 | var result = todayDate.diff(endDate, 'days'); | 654 | var result = todayDate.diff(endDate, 'days'); |
| 649 | return result; | 655 | return result; |
| 650 | }, | 656 | }, |
| 651 | goToLogin() { | 657 | goToLogin() { |
| 652 | this.$router.push("/login"); | 658 | this.$router.push("/login"); |
| 653 | }, | 659 | }, |
| 654 | goToSignUp() { | 660 | goToSignUp() { |
| 655 | this.$router.push("/"); | 661 | this.$router.push("/"); |
| 656 | }, | 662 | }, |
| 657 | chtbox_close() { | 663 | chtbox_close() { |
| 658 | $("#cht_box_close").removeClass("cht_close"); | 664 | $("#cht_box_close").removeClass("cht_close"); |
| 659 | $("#open_ct_box, .c_hide").show(); | 665 | $("#open_ct_box, .c_hide").show(); |
| 660 | $(".footer-top").addClass("white-bg"); | 666 | $(".footer-top").addClass("white-bg"); |
| 661 | }, | 667 | }, |
| 662 | open_ct_box() { | 668 | open_ct_box() { |
| 663 | $("#cht_box_close").addClass("cht_close"); | 669 | $("#cht_box_close").addClass("cht_close"); |
| 664 | $("#open_ct_box, .c_hide").hide(); | 670 | $("#open_ct_box, .c_hide").hide(); |
| 665 | $(".footer-top").removeClass("white-bg"); | 671 | $(".footer-top").removeClass("white-bg"); |
| 666 | }, | 672 | }, |
| 667 | eachRply(cmnt) { | 673 | eachRply(cmnt) { |
| 668 | cmnt.childInput = true; | 674 | cmnt.childInput = true; |
| 669 | this.parentInput = false; | 675 | this.parentInput = false; |
| 670 | this.comment = null; | 676 | this.comment = null; |
| 671 | setTimeout(() => { | 677 | setTimeout(() => { |
| 672 | document.getElementById("childInput").focus(); | 678 | document.getElementById("childInput").focus(); |
| 673 | }, 100); | 679 | }, 100); |
| 674 | }, | 680 | }, |
| 675 | discardRply(cmnt) { | 681 | discardRply(cmnt) { |
| 676 | cmnt.childInput = false; | 682 | cmnt.childInput = false; |
| 677 | this.parentInput = true; | 683 | this.parentInput = true; |
| 678 | this.comment = null; | 684 | this.comment = null; |
| 679 | }, | 685 | }, |
| 680 | reply_cht_box(i) { | 686 | reply_cht_box(i) { |
| 681 | console.log(this.commentList, "cmnt"); | 687 | console.log(this.commentList, "cmnt"); |
| 682 | $("#cht_box_close").addClass("cht_close"); | 688 | $("#cht_box_close").addClass("cht_close"); |
| 683 | $("#open_ct_box, .c_hide").hide(); | 689 | $("#open_ct_box, .c_hide").hide(); |
| 684 | $(".footer-top").removeClass("white-bg"); | 690 | $(".footer-top").removeClass("white-bg"); |
| 685 | this.commentList[i].childInput = true; | 691 | this.commentList[i].childInput = true; |
| 686 | this.parentInput = false; | 692 | this.parentInput = false; |
| 687 | this.comment = null; | 693 | this.comment = null; |
| 688 | setTimeout(() => { | 694 | setTimeout(() => { |
| 689 | document.getElementById("childInput").focus(); | 695 | document.getElementById("childInput").focus(); |
| 690 | }, 100); | 696 | }, 100); |
| 691 | }, | 697 | }, |
| 692 | likeComment(status, id) { | 698 | likeComment(status, id) { |
| 693 | console.log("===", this.comment); | 699 | console.log("===", this.comment); |
| 694 | var obj = { | 700 | var obj = { |
| 695 | commentId: id, | 701 | commentId: id, |
| 696 | like: status, | 702 | like: status, |
| 697 | }; | 703 | }; |
| 698 | axios | 704 | axios |
| 699 | .post("/bounceBoard/like", obj, { | 705 | .post("/bounceBoard/like", obj, { |
| 700 | headers: { | 706 | headers: { |
| 701 | Authorization: "Bearer " + this.usertoken, | 707 | Authorization: "Bearer " + this.usertoken, |
| 702 | }, | 708 | }, |
| 703 | }) | 709 | }) |
| 704 | .then((response) => { | 710 | .then((response) => { |
| 705 | this.getComment(); | 711 | this.getComment(); |
| 706 | console.log(response); | 712 | console.log(response); |
| 707 | }) | 713 | }) |
| 708 | .catch((error) => { | 714 | .catch((error) => { |
| 709 | if (error.response) { | 715 | if (error.response) { |
| 710 | this.$toaster.error(error.response.data.message); | 716 | this.$toaster.error(error.response.data.message); |
| 711 | } | 717 | } |
| 712 | }); | 718 | }); |
| 713 | }, | 719 | }, |
| 714 | getLastcomment(flag, commentArray) { | 720 | getLastcomment(flag, commentArray) { |
| 715 | var finalComment = null; | 721 | var finalComment = null; |
| 716 | var totalMessage = 0; | 722 | var totalMessage = 0; |
| 717 | var name = null; | 723 | var name = null; |
| 718 | commentArray.forEach((comment_) => { | 724 | commentArray.forEach((comment_) => { |
| 719 | if (comment_.comment != null) { | 725 | if (comment_.comment != null) { |
| 720 | name = comment_.user.name; | 726 | name = comment_.user.name; |
| 721 | finalComment = comment_.comment; | 727 | finalComment = comment_.comment; |
| 722 | totalMessage++; | 728 | totalMessage++; |
| 723 | } | 729 | } |
| 724 | }); | 730 | }); |
| 725 | if (flag == "count") { | 731 | if (flag == "count") { |
| 726 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | 732 | return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); |
| 727 | } else if (flag =="name") { | 733 | } else if (flag =="name") { |
| 728 | return (name = name); | 734 | return (name = name); |
| 729 | } else { | 735 | } else { |
| 730 | return finalComment; | 736 | return finalComment; |
| 731 | } | 737 | } |
| 732 | }, | 738 | }, |
| 733 | commentExistCheck(i) { | 739 | commentExistCheck(i) { |
| 734 | console.log(this.commentList[i].comment); | 740 | console.log(this.commentList[i].comment); |
| 735 | var returnValue = false; | 741 | var returnValue = false; |
| 736 | if (this.commentList[i].comment) { | 742 | if (this.commentList[i].comment) { |
| 737 | returnValue = true; | 743 | returnValue = true; |
| 738 | } | 744 | } |
| 739 | return returnValue; | 745 | return returnValue; |
| 740 | }, | 746 | }, |
| 741 | }, | 747 | }, |
| 742 | }; | 748 | }; |
| 743 | // | 749 | // |
| 744 | </script> | 750 | </script> |
| 745 | 751 |
src/components/outro.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 | <div class="thanks-wrapper"> | 8 | <div class="thanks-wrapper"> |
| 9 | <div class="thanks-l-wrp"> | 9 | <div class="thanks-l-wrp"> |
| 10 | <div class="thanks-pay-wrp"> | 10 | <div class="thanks-pay-wrp"> |
| 11 | <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> --> | 11 | <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> --> |
| 12 | <img | 12 | <img |
| 13 | :src="currentSlideData.payload.metaData.authorImage[0]" | 13 | :src="currentSlideData.payload.metaData.authorImage[0]" |
| 14 | class="thanks-img" | 14 | class="thanks-img" |
| 15 | /> | 15 | /> |
| 16 | <div class="blacktext-wrp"> | 16 | <div class="blacktext-wrp"> |
| 17 | CHeck out other case studies here | 17 | CHeck out other case studies here |
| 18 | <img src="../assets/images/arrow-bottom.svg" /> | 18 | <img src="../assets/images/arrow-bottom.svg" /> |
| 19 | </div> | 19 | </div> |
| 20 | <ul class=""> | 20 | <ul class=""> |
| 21 | <li v-for="(study, i) in caseStudies" :key="i"> | 21 | <li v-for="(study, i) in caseStudies" :key="i"> |
| 22 | <a href="javascript:void(0);"> | 22 | <a href=""> |
| 23 | <img :src="study.intro.logoURL" /> | 23 | <img :src="study.intro.logoURL" /> |
| 24 | <span | 24 | <span |
| 25 | ><img src="../assets/images/p-eye.svg" /> 0 Views</span | 25 | ><img src="../assets/images/p-eye.svg" /> 0 Views</span |
| 26 | > | 26 | > |
| 27 | </a> | 27 | </a> |
| 28 | </li> | 28 | </li> |
| 29 | 29 | ||
| 30 | <!-- <li class="payments-spc-57"> | 30 | <!-- <li class="payments-spc-57"> |
| 31 | <a href="javascript:void(0);"> | 31 | <a href=""> |
| 32 | <img src="../assets/images/g-pay.svg" /> | 32 | <img src="../assets/images/g-pay.svg" /> |
| 33 | <span | 33 | <span |
| 34 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 34 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 35 | Views</span | 35 | Views</span |
| 36 | > | 36 | > |
| 37 | </a> | 37 | </a> |
| 38 | </li> | 38 | </li> |
| 39 | <li> | 39 | <li> |
| 40 | <a href="javascript:void(0);"> | 40 | <a href=""> |
| 41 | <img src="../assets/images/bb.svg" /> | 41 | <img src="../assets/images/bb.svg" /> |
| 42 | <span | 42 | <span |
| 43 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 43 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 44 | Views</span | 44 | Views</span |
| 45 | > | 45 | > |
| 46 | </a> | 46 | </a> |
| 47 | </li> --> | 47 | </li> --> |
| 48 | </ul> | 48 | </ul> |
| 49 | <!-- payments options --> | 49 | <!-- payments options --> |
| 50 | <!-- <ul class=""> | 50 | <!-- <ul class=""> |
| 51 | <li> | 51 | <li> |
| 52 | <a href="javascript:void(0);"> | 52 | <a href=""> |
| 53 | <img src="../assets/images/payment.svg" /> | 53 | <img src="../assets/images/payment.svg" /> |
| 54 | <span | 54 | <span |
| 55 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 55 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 56 | Views</span | 56 | Views</span |
| 57 | > | 57 | > |
| 58 | </a> | 58 | </a> |
| 59 | </li> | 59 | </li> |
| 60 | <li class="payments-spc-57"> | 60 | <li class="payments-spc-57"> |
| 61 | <a href="javascript:void(0);"> | 61 | <a href=""> |
| 62 | <img src="../assets/images/uc.svg" /> | 62 | <img src="../assets/images/uc.svg" /> |
| 63 | <span | 63 | <span |
| 64 | ><img src="../assets/images/p-eye.svg" /> 19.4k | 64 | ><img src="../assets/images/p-eye.svg" /> 19.4k |
| 65 | Views</span | 65 | Views</span |
| 66 | > | 66 | > |
| 67 | </a> | 67 | </a> |
| 68 | </li> | 68 | </li> |
| 69 | </ul> --> | 69 | </ul> --> |
| 70 | <!-- payments options --> | 70 | <!-- payments options --> |
| 71 | </div> | 71 | </div> |
| 72 | <!-- thanks pay wrp --> | 72 | <!-- thanks pay wrp --> |
| 73 | <img | 73 | <img |
| 74 | src="../assets/images/spot-light-bt.svg" | 74 | src="../assets/images/spot-light-bt.svg" |
| 75 | class="payment-spot-light-bt" | 75 | class="payment-spot-light-bt" |
| 76 | /> | 76 | /> |
| 77 | </div> | 77 | </div> |
| 78 | <!-- thanks left wrp --> | 78 | <!-- thanks left wrp --> |
| 79 | <div class="thanks-r-section"> | 79 | <div class="thanks-r-section"> |
| 80 | <div class="logo-common-wrp"> | 80 | <div class="logo-common-wrp"> |
| 81 | <a href="javascript:void(0);" | 81 | <a href="" |
| 82 | ><img src="../assets/images/ps-growth.svg" /> | 82 | ><img src="../assets/images/ps-growth.svg" /> |
| 83 | <span>Product Growth</span> | 83 | <span>Product Growth</span> |
| 84 | </a> | 84 | </a> |
| 85 | </div> | 85 | </div> |
| 86 | <!-- logo wrp --> | 86 | <!-- logo wrp --> |
| 87 | <div class="clearfix"></div> | 87 | <div class="clearfix"></div> |
| 88 | <p> | 88 | <p> |
| 89 | Don’t forget to <strong> join the discussion </strong> by | 89 | Don’t forget to <strong> join the discussion </strong> by |
| 90 | scrolling back and adding your comments! | 90 | scrolling back and adding your comments! |
| 91 | </p> | 91 | </p> |
| 92 | <div class="clearfix"></div> | 92 | <div class="clearfix"></div> |
| 93 | <a href="javascript:void(0);" class="back-bt" @click="goHome"> | 93 | <a href="" class="back-bt" @click="goHome"> |
| 94 | <span class="s1"></span> | 94 | <span class="s1"></span> |
| 95 | <span class="s2"></span> | 95 | <span class="s2"></span> |
| 96 | <span class="s3"></span> | 96 | <span class="s3"></span> |
| 97 | <span class="s4"></span> | 97 | <span class="s4"></span> |
| 98 | <img src="../assets/images/refresh.svg" /> Back to home | 98 | <img src="../assets/images/refresh.svg" /> Back to home |
| 99 | </a> | 99 | </a> |
| 100 | <ul class="rating-section"> | 100 | <ul class="rating-section"> |
| 101 | <li> | 101 | <li> |
| 102 | <p> | 102 | <p> |
| 103 | Excited to <strong> create case studies</strong> or help build | 103 | Excited to <strong> create case studies</strong> or help build |
| 104 | Product Growth? | 104 | Product Growth? |
| 105 | </p> | 105 | </p> |
| 106 | <a href="javascript:void(0);" class="publish">Publish</a> | 106 | <a href="" class="publish" @click="open()">Publish</a> |
| 107 | </li> | 107 | </li> |
| 108 | <li> | 108 | <li> |
| 109 | <p class="wdth">How would you rate this case study?</p> | 109 | <p class="wdth">How would you rate this case study?</p> |
| 110 | <span class="rating-list"> | 110 | <span class="rating-list"> |
| 111 | <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6"> | 111 | <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6"> |
| 112 | </star-rating> | 112 | </star-rating> |
| 113 | <!-- <a href="javascript:void(0);" | 113 | <!-- <a href="" |
| 114 | ><img src="../assets/images/f-review.svg" | 114 | ><img src="../assets/images/f-review.svg" |
| 115 | /></a> | 115 | /></a> |
| 116 | <a href="javascript:void(0);" | 116 | <a href="" |
| 117 | ><img src="../assets/images/f-review.svg" | 117 | ><img src="../assets/images/f-review.svg" |
| 118 | /></a> | 118 | /></a> |
| 119 | <a href="javascript:void(0);" | 119 | <a href="" |
| 120 | ><img src="../assets/images/e-review.svg" | 120 | ><img src="../assets/images/e-review.svg" |
| 121 | /></a> --> | 121 | /></a> --> |
| 122 | </span> | 122 | </span> |
| 123 | </li> | 123 | </li> |
| 124 | </ul> | 124 | </ul> |
| 125 | <div class="follow-us-py"> | 125 | <div class="follow-us-py"> |
| 126 | <span>Follow us at</span> | 126 | <span>Follow us at</span> |
| 127 | <ul class="p-follows"> | 127 | <ul class="p-follows"> |
| 128 | <li> | 128 | <li> |
| 129 | <a href="javascript:void(0);"> | 129 | <a href=""> |
| 130 | <img src="../assets/images/p-rss.svg" /> | 130 | <img src="../assets/images/p-rss.svg" /> |
| 131 | </a> | 131 | </a> |
| 132 | </li> | 132 | </li> |
| 133 | <li> | 133 | <li> |
| 134 | <a href="javascript:void(0);"> | 134 | <a href=""> |
| 135 | <img src="../assets/images/p-linkedin.svg" /> | 135 | <img src="../assets/images/p-linkedin.svg" /> |
| 136 | </a> | 136 | </a> |
| 137 | </li> | 137 | </li> |
| 138 | <li> | 138 | <li> |
| 139 | <a href="javascript:void(0);"> | 139 | <a href=""> |
| 140 | <img src="../assets/images/p-twitter.svg" /> | 140 | <img src="../assets/images/p-twitter.svg" /> |
| 141 | </a> | 141 | </a> |
| 142 | </li> | 142 | </li> |
| 143 | </ul> | 143 | </ul> |
| 144 | </div> | 144 | </div> |
| 145 | <!-- <star-rating v-model="rating"></star-rating> --> | 145 | <!-- <star-rating v-model="rating"></star-rating> --> |
| 146 | 146 | ||
| 147 | <!-- follow us --> | 147 | <!-- follow us --> |
| 148 | <div class="p-users"> | 148 | <div class="p-users"> |
| 149 | <span>Author</span> | 149 | <span>Author</span> |
| 150 | <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1> | 150 | <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1> |
| 151 | <!-- <span>Author</span> | 151 | <!-- <span>Author</span> |
| 152 | <h1>Pramod</h1> | 152 | <h1>Pramod</h1> |
| 153 | <span>Author</span> | 153 | <span>Author</span> |
| 154 | <h1>Sarthak</h1> --> | 154 | <h1>Sarthak</h1> --> |
| 155 | <span v-if="currentSlideData.payload.metaData.designer" | 155 | <span v-if="currentSlideData.payload.metaData.designer" |
| 156 | >Designer</span | 156 | >Designer</span |
| 157 | > | 157 | > |
| 158 | <h1>{{ currentSlideData.payload.metaData.designer }}</h1> | 158 | <h1>{{ currentSlideData.payload.metaData.designer }}</h1> |
| 159 | <span v-if="currentSlideData.payload.metaData.illustrations" | 159 | <span v-if="currentSlideData.payload.metaData.illustrations" |
| 160 | >Illustrations</span | 160 | >Illustrations</span |
| 161 | > | 161 | > |
| 162 | <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1> | 162 | <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1> |
| 163 | </div> | 163 | </div> |
| 164 | <!-- users --> | 164 | <!-- users --> |
| 165 | </div> | 165 | </div> |
| 166 | <!-- thanks payment right section --> | 166 | <!-- thanks payment right section --> |
| 167 | </div> | 167 | </div> |
| 168 | <!--- thanks wrapper --> | 168 | <!--- thanks wrapper --> |
| 169 | <div class="footer-nav"> | 169 | <div class="footer-nav"> |
| 170 | <div class="footer-top"> | 170 | <div class="footer-top"> |
| 171 | <ul class="top-intro-bt ps_right"> | 171 | <ul class="top-intro-bt ps_right"> |
| 172 | <li> | 172 | <li> |
| 173 | <a href="javascript:void(0);" @click="goBack" | 173 | <a href="" @click="goBack" |
| 174 | ><img src="../assets/images/skip-prev.svg" /> Prev</a | 174 | ><img src="../assets/images/skip-prev.svg" /> Prev</a |
| 175 | > | 175 | > |
| 176 | </li> | 176 | </li> |
| 177 | </ul> | 177 | </ul> |
| 178 | </div> | 178 | </div> |
| 179 | <!-- footer top --> | 179 | <!-- footer top --> |
| 180 | <div class="footer-bottom"> | 180 | <div class="footer-bottom"> |
| 181 | <ul> | 181 | <ul> |
| 182 | <li class="active"></li> | 182 | <li class="active"></li> |
| 183 | <li class="active"></li> | 183 | <li class="active"></li> |
| 184 | </ul> | 184 | </ul> |
| 185 | </div> | 185 | </div> |
| 186 | <!-- footer top --> | 186 | <!-- footer top --> |
| 187 | </div> | 187 | </div> |
| 188 | <!-- footer --> | 188 | <!-- footer --> |
| 189 | </div> | 189 | </div> |
| 190 | <!-- body wrapper --> | 190 | <!-- body wrapper --> |
| 191 | </div> | 191 | </div> |
| 192 | <!-- main wrapper --> | 192 | <!-- main wrapper --> |
| 193 | </main> | 193 | </main> |
| 194 | </template> | 194 | </template> |
| 195 | 195 | ||
| 196 | <script> | 196 | <script> |
| 197 | import Vue from "vue"; | 197 | import Vue from "vue"; |
| 198 | import router from "../router"; | 198 | import router from "../router"; |
| 199 | import axios from "axios"; | 199 | import axios from "axios"; |
| 200 | import Header from "./Header"; | 200 | import Header from "./Header"; |
| 201 | 201 | ||
| 202 | export default { | 202 | export default { |
| 203 | components: { | 203 | components: { |
| 204 | Header: Header, | 204 | Header: Header, |
| 205 | }, | 205 | }, |
| 206 | name: "Outro", | 206 | name: "Outro", |
| 207 | 207 | ||
| 208 | data() { | 208 | data() { |
| 209 | return { | 209 | return { |
| 210 | caseStudies: [], | 210 | caseStudies: [], |
| 211 | allSlide: [], | 211 | allSlide: [], |
| 212 | currentSlideIndex: null, | 212 | currentSlideIndex: null, |
| 213 | currentSlideData: null, | 213 | currentSlideData: null, |
| 214 | rating: 0, | 214 | rating: 0, |
| 215 | }; | 215 | }; |
| 216 | }, | 216 | }, |
| 217 | mounted() { | 217 | mounted() { |
| 218 | var allSlideData = localStorage.getItem( | 218 | var allSlideData = localStorage.getItem( |
| 219 | "spotlight_slide" + this.$route.params.caseStudyId | 219 | "spotlight_slide" + this.$route.params.caseStudyId |
| 220 | ); | 220 | ); |
| 221 | if (allSlideData) { | 221 | if (allSlideData) { |
| 222 | this.allSlide = JSON.parse(allSlideData); | 222 | this.allSlide = JSON.parse(allSlideData); |
| 223 | this.getCurrentSlideData(); | 223 | this.getCurrentSlideData(); |
| 224 | this.getCaseStudies(); | 224 | this.getCaseStudies(); |
| 225 | this.getRating(); | 225 | this.getRating(); |
| 226 | } | 226 | } |
| 227 | }, | 227 | }, |
| 228 | methods: { | 228 | methods: { |
| 229 | getCurrentSlideData() { | 229 | getCurrentSlideData() { |
| 230 | var i = this.allSlide.findIndex( | 230 | var i = this.allSlide.findIndex( |
| 231 | (slide_) => slide_.slideId == this.$route.params.slideId | 231 | (slide_) => slide_.slideId == this.$route.params.slideId |
| 232 | ); | 232 | ); |
| 233 | this.currentSlideIndex = i; | 233 | this.currentSlideIndex = i; |
| 234 | this.currentSlideData = this.allSlide[i]; | 234 | this.currentSlideData = this.allSlide[i]; |
| 235 | console.log("currentSlideData", this.currentSlideData); | 235 | console.log("currentSlideData", this.currentSlideData); |
| 236 | }, | 236 | }, |
| 237 | goNext() { | 237 | goNext() { |
| 238 | this.currentSlideIndex++; | 238 | this.currentSlideIndex++; |
| 239 | this.$router.push({ | 239 | this.$router.push({ |
| 240 | name: this.allSlide[this.currentSlideIndex].ur, | 240 | name: this.allSlide[this.currentSlideIndex].ur, |
| 241 | params: { | 241 | params: { |
| 242 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 242 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 243 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 243 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 244 | }, | 244 | }, |
| 245 | }); | 245 | }); |
| 246 | }, | 246 | }, |
| 247 | goBack() { | 247 | goBack() { |
| 248 | this.currentSlideIndex--; | 248 | this.currentSlideIndex--; |
| 249 | this.$router.push({ | 249 | this.$router.push({ |
| 250 | name: this.allSlide[this.currentSlideIndex].ur, | 250 | name: this.allSlide[this.currentSlideIndex].ur, |
| 251 | params: { | 251 | params: { |
| 252 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, | 252 | caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, |
| 253 | slideId: this.allSlide[this.currentSlideIndex].slideId, | 253 | slideId: this.allSlide[this.currentSlideIndex].slideId, |
| 254 | }, | 254 | }, |
| 255 | }); | 255 | }); |
| 256 | }, | 256 | }, |
| 257 | goHome() { | 257 | goHome() { |
| 258 | this.currentSlideIndex--; | 258 | this.currentSlideIndex--; |
| 259 | this.$router.push({ | 259 | this.$router.push({ |
| 260 | name: this.allSlide[0].ur, | 260 | name: this.allSlide[0].ur, |
| 261 | params: { | 261 | params: { |
| 262 | caseStudyId: this.allSlide[0].caseStudyId, | 262 | caseStudyId: this.allSlide[0].caseStudyId, |
| 263 | slideId: this.allSlide[0].slideId, | 263 | slideId: this.allSlide[0].slideId, |
| 264 | }, | 264 | }, |
| 265 | }); | 265 | }); |
| 266 | }, | 266 | }, |
| 267 | 267 | ||
| 268 | getCaseStudies() { | 268 | getCaseStudies() { |
| 269 | var userdata = localStorage.getItem("spotlight_usertoken"); | 269 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 270 | if (userdata) { | 270 | if (userdata) { |
| 271 | userdata = JSON.parse(userdata); | 271 | userdata = JSON.parse(userdata); |
| 272 | axios | 272 | axios |
| 273 | .get("/caseStudy/all", { | 273 | .get("/caseStudy/all", { |
| 274 | headers: { | 274 | headers: { |
| 275 | Authorization: "Bearer " + userdata.token, | 275 | Authorization: "Bearer " + userdata.token, |
| 276 | }, | 276 | }, |
| 277 | }) | 277 | }) |
| 278 | .then((response) => { | 278 | .then((response) => { |
| 279 | console.log(response.data.data.caseStudies); | 279 | console.log(response.data.data.caseStudies); |
| 280 | this.caseStudies = response.data.data.caseStudies; | 280 | this.caseStudies = response.data.data.caseStudies; |
| 281 | }) | 281 | }) |
| 282 | .catch((error) => console.log(error)); | 282 | .catch((error) => console.log(error)); |
| 283 | } | 283 | } |
| 284 | }, | 284 | }, |
| 285 | 285 | ||
| 286 | getRating() { | 286 | getRating() { |
| 287 | var userdata = localStorage.getItem("spotlight_usertoken"); | 287 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 288 | if (userdata) { | 288 | if (userdata) { |
| 289 | userdata = JSON.parse(userdata); | 289 | userdata = JSON.parse(userdata); |
| 290 | axios | 290 | axios |
| 291 | .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, { | 291 | .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, { |
| 292 | headers: { | 292 | headers: { |
| 293 | Authorization: "Bearer " + userdata.token, | 293 | Authorization: "Bearer " + userdata.token, |
| 294 | }, | 294 | }, |
| 295 | }) | 295 | }) |
| 296 | .then((response) => { | 296 | .then((response) => { |
| 297 | this.rating = response.data.data.Avgrating; | 297 | this.rating = response.data.data.Avgrating; |
| 298 | }) | 298 | }) |
| 299 | .catch((error) => console.log(error)); | 299 | .catch((error) => console.log(error)); |
| 300 | } | 300 | } |
| 301 | }, | 301 | }, |
| 302 | open(){ | ||
| 303 | window.open('https://www.productgrowth.org/spotlight#typeform-spotlight'); | ||
| 304 | }, | ||
| 302 | updateRating() { | 305 | updateRating() { |
| 303 | var userdata = localStorage.getItem("spotlight_usertoken"); | 306 | var userdata = localStorage.getItem("spotlight_usertoken"); |
| 304 | if (userdata) { | 307 | if (userdata) { |
| 305 | userdata = JSON.parse(userdata); | 308 | userdata = JSON.parse(userdata); |
| 306 | var obj = { | 309 | var obj = { |
| 307 | "caseStudyId":this.$route.params.caseStudyId, | 310 | "caseStudyId":this.$route.params.caseStudyId, |
| 308 | "rating":this.rating | 311 | "rating":this.rating |
| 309 | } | 312 | } |
| 310 | axios | 313 | axios |
| 311 | .post("/caseStudy/rating",obj, { | 314 | .post("/caseStudy/rating",obj, { |
| 312 | headers: { | 315 | headers: { |
| 313 | Authorization: "Bearer " + userdata.token, | 316 | Authorization: "Bearer " + userdata.token, |
| 314 | }, | 317 | }, |
| 315 | }) | 318 | }) |
| 316 | .then((response) => { | 319 | .then((response) => { |
| 317 | console.log("response",response) | 320 | console.log("response",response) |
| 318 | // this.rating = response.data.data.Avgrating; | 321 | // this.rating = response.data.data.Avgrating; |
| 319 | }) | 322 | }) |
| 320 | .catch((error) => console.log(error)); | 323 | .catch((error) => console.log(error)); |
| 321 | } | 324 | } |
| 322 | }, | 325 | }, |
| 323 | goToLogin() { | 326 | goToLogin() { |
| 324 | this.$router.push("/login"); | 327 | this.$router.push("/login"); |
| 325 | }, | 328 | }, |
| 326 | goToSignUp() { | 329 | goToSignUp() { |
| 327 | this.$router.push("/"); | 330 | this.$router.push("/"); |
| 328 | }, | 331 | }, |
| 329 | goToProfile() { | 332 | goToProfile() { |
| 330 | this.$router.push("/profile"); | 333 | this.$router.push("/profile"); |
| 331 | }, | 334 | }, |
| 332 | }, | 335 | }, |
| 333 | }; | 336 | }; |
| 334 | </script> | 337 | </script> |
| 335 | <style> | 338 | <style> |
| 336 | .vue-star-rating-rating-text[data-v-fde73a0c] { | 339 | .vue-star-rating-rating-text[data-v-fde73a0c] { |
| 337 | margin-left: 7px; | 340 | margin-left: 7px; |
| 338 | display: none; | 341 | display: none; |
| 339 | } | 342 | } |
| 340 | </style> | 343 | </style> |
| 341 | 344 |