viithiisys / spotlight-frontend

Browse Code »

Commit 56f4b7548f68b27f603a02a9bfe12ea71927836a

Authored by Digvijay Singh 2021-01-07 21:35:30 -0500

1 parent 9e1d93fad0

Exists in master

landing page url changed

Showing 35 changed files with 458 additions and 403 deletions Show diff stats

src/assets/css/custom.css

Diff comments View file @56f4b75

 html,
 body {
   height: 100%;
 }
 body {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   padding-top: 0px;
   padding-bottom: 0px;
   background-color:#DFE7EF;
 }
 #app, .landing-page{ width: 100%; display: block; float: left; height: 100%; margin-top: 0px; padding: 0px;}
 /* heading */
 h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;}
 /* spaces */
 .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; }
 .h-100{height: 100%;}
 .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;
   background-size: 45%;}
 /* navbar */
 .spotLight-nav{ padding-top: 20px; z-index: 5;}
 .spotLight-nav li a{font-family: 'Montserrat', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px;
   letter-spacing: -0.7470597624778748px;
   text-align: left; color:#000; opacity: 0.6;
   }
   .spotLight-nav li {margin-right: 14px;}
  .spotLight-nav li.active a{font-weight: 600; opacity: 1;}
  .spotLight-nav li.spotLight-img a{opacity: 1;}
  .navbar-brand{ margin-right: 57px;}
  /* ul list style */
  .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif;
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: 24px; float: left; margin-top: 24px; }
   .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;}
   .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;}
   .sign-in-up-list li span{ float: left;}
   /* form */
   .form-layout{ width: 100%; display: block; float: left;}
   .form-layout form{ display:block; float: left; width: 100%;}
   .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;}
   .form-layout .social-login{ display: block;     width: 339px;
     margin: 0 auto; margin-top: 37px;  margin-bottom: 37px; }
   .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;}
   .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;}
   .form-layout .social-login ul li:nth-child(2){margin:0 37px;}
   .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;}
   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;
     font-family: 'Montserrat', sans-serif;
     font-size: 13px;
     font-style: normal;
     font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;}
   form input:focus{  box-shadow:0px !important; outline: 0px !important;}
   /* placeholder */
   form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
     line-height: 18px;
     color: #000000;
     opacity: 0.5;
     font-family: 'Montserrat', sans-serif;
     font-size: 13px;
     font-style: normal;
     font-weight: 600;
   }
   form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
     line-height: 18px;
     color: #000000;
     opacity: 0.5;
     font-family: 'Montserrat', sans-serif;
     font-size: 13px;
     font-style: normal;
     font-weight: 600;
   }
   form input::-ms-input-placeholder { /* Microsoft Edge */
     line-height: 18px;
     color: #000000;
     opacity: 0.5;
     font-family: 'Montserrat', sans-serif;
     font-size: 13px;
     font-style: normal;
     font-weight: 600;
   }
    /* placeholder */
   .sb-button{    background: #514DA7;
     height: 50px;
     line-height: 35px;
     color: #fff;
     font-family: 'Montserrat', sans-serif;
     font-size: 13px;
     font-style: normal;
     font-weight: 600;
     width: 100%;}
     .sb-button img{ margin-right: 10px; width: 20px;}
     .sb-button:hover{ color:#fff;}
     .form-layout p{margin-top:17px ;}
     .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;}
     .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;}
     .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;}
     .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important;
     }
     .form-layout p a:hover{ color:#000;}
     .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;}
     .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;}
     .form-layout.signup-frm-spc{width: 300px; display: block; float: left;  margin-top: 214px;}
     .welcome-hd-back{
       font-family: 'Bebas Neue', cursive;
       font-style: normal;
       font-weight: 600;
       font-size: 106px;
       line-height: 106px;
       color: #000000;
   }
   .form-layout .go-back span{ font-weight: 500 !important;}
   .reset-pass-spc{    margin-top: 110px;}
   /* profile */
   .inner-wrp {
     height: 100%;
     padding-left: 88px;
     padding-right: 37px;
     background:#fff;;
     font-family: 'Montserrat', sans-serif;
 }
 .user-profile-photo{    width: 40px; position: relative; display: block;
   height: 40px;
   border-radius: 100px;
   padding: 1px;}
 .user-profile-photo a, img{ width: 100%;}
 .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;}
 .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000;  font-family: 'Montserrat', sans-serif;}
 .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;}
 .user-profile{    display: block;
   float: left;
   margin-left:30px;
   position: relative;
   width: 760px;}
 .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;}
 .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;}
 .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;}
 .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;}
 .talk-to-me ul li{ display: block; float: left;margin-right:3px;}
 .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;}
 .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; }
 .joined-info li a{ color:#000; opacity: 0.5;}
 .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;}
 .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;}
 .joined-info li{ float: left;}
 /* list style */
 .list-style-group{ width: 100%; display: block; float: left;}
 .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;  font-size: 14px; text-transform: uppercase;  font-weight: 600;}
 .list-style{list-style-type: none; margin:0px; padding: 0px;}
 .list-style li{ float: left;}
 .list-style li a{ display: block; float: left;}
 .list-style li a img{ width: 48px; display: block; float: left; }
 .list-spc-top{ margin-top:15px ;}
 /* social connects */
 .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;}
 .social-connects li{ float: left; margin-right:0px ;}
 .social-connects li a{ display: block; float: left; padding: 11px;}
 .social-connects li a img.twitter{ margin-top:3px;}
 .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
 .social-connects li a img{ width: 19px; display: block; float: left;}
 .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;
   float: left;}
 .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;}
   /* profile tab */
   .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;}
   .top-brd{border-top: 1px solid #DFE7EF;}
 .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;}
 .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;}
 .profile-tab li.active{ border-bottom: 4px solid #ef484f;}
 .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; }
 /* profile data wrp */
 .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;}
 .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom:50px; padding-top: 88px;}
 .card-warpper{ width: 283px; background: #fff; margin-bottom: 100px; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;}
 .company-detail{    width: 100%;
   display: block;
   float: left;
   position: relative;
   margin-top: -63px;
   margin-bottom: 21px;}
 .company-detail .c-logo{ width: 82px; display: block; float: left;}
 .company-detail .c-logo img{ width: 100%;}
 .company-detail .c-tag img{ width: 100%;}
 .company-detail .c-tag { width: 89px; display: block; float: right;}
 .card-warpper h1{width: 198px;    padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;}
 .card-warpper .u-detail{    padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;}
 .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;}
 .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;}
 .card-warpper p{  float: left;  padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; }
 .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;}
 .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;}
 .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;}
 /* colors */
 .cape-honey{ background: #fde2a3;}
 .rose-bud{ background: #fba29a;}
 .pattens-blue{ background: #ceeced;}
 .insight-design{ background: #FBC647;}
 .insight-product{ background: #9DDADB;}
 .insight-marketing{ background: #F74536;}
 .insight-pricing{ background: #C1C0FE;}
 .insight-psychology{ background: #477970;}
+.no-cursor{
+  cursor: default !important;
+}
+.no-underline{
+  text-decoration: none !important;
+}
+.cursor-pointer{
+  cursor: pointer !important;
+}
 /* add new card */
 .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px;     height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;}
 .add-card-warpper a{ display: block;
   width: 86px;
   margin: 0 auto;
   margin-top: 92px;}
   /* New Profile Buttons */
   .profile-buttons{ width: 261px; display: block; margin:0 auto;}
   /* button sm */
   .profile-sm-bt{    width: 180px;
     height: 54px;
     border-radius: 5px;
     border: 1px solid #514DA7;
     color: #514DA7;
     font-size: 16px;
     font-weight: 500;
     display: block;
     line-height: 55px;
     text-align: center;}
     .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
     /* button md */
     .profile-md-bt{    width:233px;
       height: 54px;
       border-radius: 5px;
       border: 1px solid #514DA7;
       color: #514DA7;
       font-size: 16px;
       font-weight: 500;
       display: block;
       line-height: 55px;
       text-align: center;}
       .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
           /* button lg */
     .profile-lg-bt{    width:261px;
       height: 54px;
       border-radius: 5px;
       border: 1px solid #514DA7;
       color: #514DA7;
       font-size: 16px;
       font-weight: 500;
       display: block;
       line-height: 55px;
       text-align: center;}
       .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
       .center-and-spc{ margin:0 auto; margin-bottom:15px;}
       .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;}
 /* Replies */
 .replies{ display: block; float: left;}
 .replies-wrp{ width: 1024px;display: block; float: left; border-bottom: 2px solid #fff;margin-left: 58px;margin-bottom: 30px;}
 .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;}
 .replies-wrp h1 span{font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
   line-height: 14px; color:#000; opacity: 0.5;}
   .comment-spc{ margin-left:9px ;}
   .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;}
   .replies-wrp:last-child{ border-bottom:0px; margin-bottom: 0px;}
   /* team */
   .verified-team{ width: 129px;
     display: inline-table;
     margin-top: 7px;
     position: absolute;
     margin-left: 10px;}
   .verified-team img{ width: 100%; display: block; float: left;}
   .active-company{    border-bottom: 4px solid #ef484f;}
   .active-company a{ font-weight: 700 !important;}
   .active-company a img{ width: 27px;margin-top: -6px; margin-right: 10px;}
   .active-company a img.c-icon{margin-right: 0px; margin-left:10px;}
   .c-social li a img{ width: auto !important;}
   .company-footer{ width: 100%; display: block; float: left;}
   .company-footer ul{ display: block; float: left; list-style-type: none; margin:6px; padding:0px;}
   .company-footer ul li{float: left; margin-right: 10px;}
   .company-footer ul li a{ font-size: 10px; font-style: normal; font-weight: 500;color: #979797;}
   .company-footer ul li a img{ width: 15px; margin-right: 2px; margin-top: -2px;}
   .company-footer .next{float: right;    margin-top: -25px;
     margin-right: 20px; width: 61px; height: 61px; background-color: #fff; border-radius: 10px; border:2px solid #514da7; display: block;}
   .company-footer .next img{    width: 25px;
     margin-top: 17px;
     margin-left: 16px;}
    .card-c-space-0{ padding: 0px !important; background-color: transparent !important;}
    .c-detail-wrapper{ width: 100%; display: block; float: left;    background: #fff;
     border-radius: 4px;
     padding: 23px; }
     /* members */
     .members-wrp{     width: 960px; display: block; float: left; margin:0px; padding: 0px; list-style-type: none;}
     .members-wrp .member-list{ display: block; float: left; width: 411px; background-color: #fff; padding: 10px;    border-radius: 50px; margin-right: 67px; margin-bottom: 24px;}
     .members-wrp .member-list a{ display: block; float: left; width: 100%;}
     .members-wrp .member-list a img{ width: 20%;display:block; float: left;}
     .members-wrp .member-list a span{ display: block; float: left; width: 75%; margin-left:5%;}
     .members-wrp .member-list a span h1{font-size: 24px; line-height: 29px; font-weight: 400; font-style: normal; color: #000;    margin-top: 13px;}
     .member-describe-list{ display: block; float: left; list-style-type: none;margin:0px; padding: 0px;}
     .member-describe-list li{ float: left; font-size: 14px; line-height: 17px; font-style: normal; font-weight: 400;color: #000; opacity: 0.5;}
     .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;
       margin-left: 8px !important;
       margin-top: 6px;
       border-radius: 5px;}
     /* popup */
     .body-blur{  filter: blur(8px); -webkit-filter: blur(8px);}
     .popup-wrp{ width: 100%; display: block; float: left; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; z-index: 1;}
     .popup-wrp .overlay{ width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px;     background-color: #dfe7efab;   /* Add the blur effect */
       filter: blur(8px);
       -webkit-filter: blur(8px);}
      .popup-set{     width: 530px;
       background-color: #fff;
       border-radius: 0 40px 40px 40px;
       padding: 30px;
       position: relative;
       margin: 0 auto;
       margin-top: 80px;}
      .popup-header{ width: 100%; display: block; float: left; margin-top: -60px;}
      .popup-header img{ width: 109px; display: block; float: left;}
      .popup-header ul{    display: block;
       list-style-type: none;
       margin: 0px;
       padding: 0px;
       margin-top: 75px;
       margin-left: 20px;
       float: left;}
      .popup-header ul li{ float: left; margin-right: 31px;}
      .popup-header ul li a img{ width: 22px !important; float: left; display: block;}
      .popup-header ul li a{color:#514DA7;}
      .popup-header ul li a span{    display: block;
       float: left;
       margin-left: 10px;
       width: 50px;
       font-size: 14px;
       line-height: 17px;
       margin-top: -10px;}
       .popup-body{    width: 100%;
         display: block;
         float: left;
         max-height: 450px;
         overflow-y: auto;
         padding-right: 16px;}
       .popup-forms{ width: 100%; display: block; float: left; margin-top: 50px;}
       .popup-forms .floating-label label{font-size: 11px;
         line-height: 19px;
         font-size: 16px;
         font-weight: 400;
         color: #000;
         position: absolute;
         margin: 0px 10px 0 10px;
         background: #fff;
         padding: 0 3px;
         position: absolute;
         pointer-events: none;
         top: 15px; opacity: 0.5;
         transition: 0.2s ease all;
         -moz-transition: 0.2s ease all;
         -webkit-transition: 0.2s ease all;
       }
       .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;}
       .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;}
       .popup-forms .floating-input input:focus{ outline: none;}
       .popup-forms .floating-label input:focus~label{
         top: -11px;
         color: #514DA7;
        font-size: 14px;background:#fff;
        opacity:1;
 }
      .popup-forms .floating-label input:not(:placeholder-shown)~label {
 	    position: absolute;
     top: -11px;
 	background:#fff;
   font-size: 14px;
   color: #514DA7;opacity:1;
 }
 /* textarea */
 .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;}
 .popup-forms .floating-input textarea:focus{ outline: none;}
 .popup-forms .floating-label textarea:focus~label{
   top: -11px;
   color: #514DA7;
  font-size: 14px;background:#fff;
  opacity:1;
 }
 .popup-forms .floating-label textarea:not(:placeholder-shown)~label {
 position: absolute;
 top: -11px;
 background:#fff;
 font-size: 14px;
 color: #514DA7;opacity:1;
 }
        .popup-forms .form-group{    margin-bottom: 20px;}
        .empty-lbl{ font-size: 16px; font-style: normal; line-height: 29px; color:#000; opacity: 0.5;}
 .things{ font-size: 16px; line-height: 21px; color: #000; opacity: 0.5;}
 .interests{ display: block; list-style-type: none;margin:0px; padding: 0px; }
 .interests li{ float: left; margin-right: 20px; position: relative;}
 .interests li span{ height: 40px; padding: 0 16px; line-height: 40px;background: #DFE7EF; display: block; float: left;
   border-radius: 5px;}
   .interests li input{ height: 40px !important; padding: 0 10px !important; line-height: 40px !important;border:2px solid #DFE7EF; display: block; float: left;
     border-radius: 5px; background-color: #fff !important;    width: 125px;}
     .interests li a{    width: 20px;
       display: block;
       float: right;
       margin: 6px 0px 0 114px;
       position: absolute;}
  /* color codes */
  .silver{background-color: #C4C4C4;}
  .milk-punch{background-color: #FFF6D7;}
  .french-pass{background-color: #BDDBFF;}
  .cyan-french-pass{background-color: #C0FAFE;}
  .cosmos{background-color: #FFDBDC;}
  .cape-Honey{background-color: #FEE6AC;}
  .snuff{background-color: #E5DFF0;}
  .catskillWhite{background-color: #DFE7EF;}
  .white{background-color: #fff;}
   /* color codes */
  .colors{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding: 0px;}
  .colors li{ display: block; float: left; margin-right: 14px;}
  .colors li a{ width: 22px; height: 22px; display: block; float: left;  border:1px solid #ccc; border-radius: 10px;}
  .colors li a.active{border: 2px solid #514DA7;}
  .popup-forms .next-bt{    width: 99px;
   height: 54px;
   background: #514DA7;
   display: block;
   text-align: center;
   border-radius: 5px;
   color: #fff;
   font-size: 16px;
   line-height: 54px;
   font-weight: 600;
   position: absolute;
   right: 50px;
   bottom: -80px;}
   .notifications{ font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; width: 313px; float: left;}
   .add-socail-ch{font-size: 16px; line-height: 19px; color: #000; opacity: 0.5; margin-top:20px ; margin-bottom: 30px;}
   .add-socail-ch span{    border-bottom: 2px solid #DFE7EF;
     display: block;
     width: 270px;
     float: right;
     margin-top: 10px;}
     .select-arrow{    display: block;
       float: right;
       position: absolute;
       top: 13px;
       right: 17px;
       background: #fff;
       width: 31px;
       height: 17px;}
       .select-arrow img{width: 15px;}
       .popup-forms .save-bt{    width: 150px;
         height: 54px;
         background: #514DA7;
         display: block;
         text-align: center;
         border-radius: 5px;
         color: #fff;
         font-size: 16px;
         line-height: 54px;
         font-weight: 600;
         position: absolute;
         right: 50px;
         bottom: -80px;}
 /* insights */
 .insights-wrp{     background-image: url(../images/insights-bg.svg);
   background-color: #DFE7EF;
   height: 100%;
   background-repeat: no-repeat;
   background-position: top center;
   background-size: contain;     padding: 0 50px 0 100px;}
   .insights-profile{width: 32px;
     height: 32px;
     float: right;
     display: block;
     position: absolute;
     right: 0;}
     .insights-searh a{     width: 21px;
       height: 25px;
       display: block;
       position: absolute;
       right: 24px;
       top: 23px;}
     .insights-searh a img{ width: 100%;}
     .insights-searh input{background: #FFFFFF !important; border-radius: 10px !important; Height:72px !important; border:0px !important;}
     .insights-searh input::-webkit-input-placeholder { /* Edge */
     font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000;
     }
     .insights-searh input:-ms-input-placeholder { /* Internet Explorer 10-11 */
       font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000;
     }
     .insights-searh input::placeholder {
       font-size: 22px; line-height: 28px; font-weight: 400; opacity: 0.5; color:#000;
     }
     .insights-border span{ font-size: 15px; line-height: 19px; font-weight: 600; text-transform: uppercase;}
     /* insights 2 */
     .back-to-lib{    font-size: 12px;
       line-height: 14px;
       color: #000000;
       font-weight: 500;
       display: block;
       float: left;}
     .back-to-lib img{ width: 12px; float: left; margin-right: 10px; margin-top:2px;}
     .insights-list{ list-style-type: none; margin:0px ; padding: 0px; width: 100%; display: block; float: left;;margin-top:20px;}
     .insights-list li{ display: block; float: left;}
     .insights-list li a{    display: block;
       float: left;
       margin: 0px;
       padding: 5px 14px;
       background: #70A853;
       font-size: 15px;text-transform:uppercase;
       font-weight: 700;
       font-style: normal;
       color: #fff;
       border-radius: 50px;}
      .insights-details{ width: 850px;display:block; float: left;}
      .insights-details h2{ font-size: 20px; line-height: 24px; font-weight: 700 !important;font-weight: normal; margin-bottom:30px ; color:#000; margin-top:22px ;}
      .features-group h3{  margin-top: 30px;  margin-bottom: 15px;font-size: 15px;letter-spacing:1.92px; line-height: 22px;color: #70A853;}
      .features-group-list{ list-style-type: none; margin: 0px; padding: 0px; width: 100%; display: block; float: left;}
      .features-group-list li{ margin-bottom: 25px; width: 100%; display: block; float: left;}
      .features-group-list li a{font-size: 16px; font-weight: 500; line-height: 22px; color:#000; text-decoration: underline;}
      .features-group-list li a:hover{ text-decoration: none;}
      .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;}
      .features-group-list li a img{ width: 9px; }
      .insights-rply img{ width: 14px;}
      .insights-rply{font-weight: 400; font-size: 13px; line-height: 27px; color: #70A853; margin-top: 5px; float: left;}
      .insights-rply:hover{color: #70A853;}
      .active-green{border-bottom: 4px solid #70A853;}
      .insights-spc{padding: 0 100px;}
      /* insight page 1 */
      .insights-border{height: 1px;
       text-align: center;
       display: block;
       background: #FFFFFF;
       clear: both;
       width: 100%;
       margin-top: 30px;}
   .insights-border span{    text-align: center;
       position: relative;
       top: -13px;
       background: #DFE7EF;
       margin: 0 11px;
       padding: 0px 10px;}
   .insights-list-filter{display:table;float:left;width:100%;}
   .insights-list-filter ul{    list-style-type: none;    text-align: center;
       margin-top:40px;
       padding: 0px;
       display: block;
       float: left;
       width: 100%;}
   .insights-list-filter li{ display: inline-table; float: unset; margin: 0 23px 23px 23px;}
   .insights-list-filter li a{padding: 5px 20px;color: #fff;
       float: left;
     text-transform: uppercase;
       line-height: 26px;
       text-align: center;
       font-weight: 600;
       font-size: 20px;
     border-radius:30px;
       }
   .insights-list-filter li a:hover{text-decoration:none;}
   .insights-products{display:block;float:left;width:100%; background-color: #fff;}
   .insights-products h3{font-size:15px; line-height: 22px; letter-spacing: 1.92px; text-transform: uppercase;margin-bottom:20px;}
   .insights-products h2{font-size:20px;color:#000000;font-weight:700;line-height:24px;margin-bottom:20px;}
   .insights-products p{font-size:15px; margin-bottom: 0px;}
   .insights-products span{float:right;}
   .insight-mb-spc{margin-bottom:34px;}
   .insights-searh{ width: 700px; margin: 0 auto;    position: relative;    margin-top: 110px;}
   .insights-products a{ width: 18px; display: block; float: right;}
 /* colors */
   .lavender-blue-bg{background:#C1C0FE;}
 .golden-tainoi-bg{background:#FBC647;}
 .red-orange-bg{background:#F74536;}
 .morning-glory-bg{background:#9DDADB;}
 .dark-green-copper-bg{background:#477970;}
 .radical-red-border{border:1px solid #EF484F;border-radius:10px;padding:30px 28px;}
 .selective-yellow-border{border:1px solid #FABB05;border-radius:10px;padding:30px 28px;}
 .lavender-blue-border{border:1px solid #C1C0FE;border-radius:10px;padding:30px 28px;}
 .dark-green-copper-border{border:1px solid #477970;border-radius:10px;padding:30px 28px;}
 .purple-heart-border{border:1px solid #673AB7;border-radius:10px;padding:30px 28px;}
 .silver-border{border:1px solid #C4C4C4;border-radius:10px;padding:30px 28px;}
 .radical-red-col{color:#EF484F;}
 .selective-yellow-col{color:#FABB05;}
 .lavender-blue-col{color:#C1C0FE;}
 .dark-green-copper-col{color:#477970;}
 .purple-heart-col{color:#673AB7;}
 .silver-col{color:#C4C4C4;}
 .radical-red-col:hover{color:#EF484F;text-decoration:none;}
 .selective-yellow-col:hover{color:#FABB05;text-decoration:none;}
 .lavender-blue-col:hover{color:#C1C0FE;text-decoration:none;}
 .dark-green-copper-col:hover{color:#477970;text-decoration:none;}
 .purple-heart-col:hover{color:#673AB7;text-decoration:none;}
 .silver-col:hover{color:#C4C4C4;text-decoration:none;}
 /* button */
 .switch-btn  {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 24px;
 }
 .switch-btn input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 .rounded-toggle {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #DFE7EF;
   -webkit-transition: .4s;
   transition: .4s;
     border-radius: 34px;
 }
 .rounded-toggle:before {
     position: absolute;
     content: "";
     height: 14px;
     width: 13px;
     left: 10px;
     bottom: 5px;
     background-color: #514DA7;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 50%;
 }
 .toggle-btn:checked + .rounded-toggle {
   background: #DFE7EF;
 }
 .toggle-btn:checked + .rounded-toggle:before{ background-color:#EF484F;;}
 .toggle-btn:focus + .rounded-toggle{
   box-shadow: 0 0 1px #2196F3;
 }
 .toggle-btn:checked + .rounded-toggle:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
 .switch-bt-wrp{margin-top: 15px;    width: 111px;
   float: right;
   text-align: right; }
 .switch-btn{float: left ;}
 .onoff{ margin-top: -3px; float: right;}
 /* intro Episode */
 .episode-intro{ padding: 0 50px 0 30px; height: 100%;}
 .bottom-startup{width: 1293px; display: block; float: left; margin:0 auto; height: 144px; border: 0.8px solid #514DA7;    position: absolute;
   bottom: 50px; z-index: 2;
   right: 0;
   left: 0;}
 .bottom-startup .logo-wrp{ width: 140px; display: block; float: left;border-right: 0.8px solid #514DA7; height: 100%;}
 .bottom-startup .logo-wrp a{    width: 100px; margin:0 auto;
   display: block;    margin-top: 28px;
 }
 .bottom-startup .logo-wrp a img{ width: 70px; display: block; margin:0 auto;}
 .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;}
 .bottom-startup .title{    font-size: 48px;
   font-family: 'Zuume';
   font-weight: 400;
   line-height: 144px;
   color: #514DA7;
   width: 440px;
   height: 100%; float: left;
   border-right: 0.8px solid #514DA7;
   text-align: center;}
   .bottom-startup .author-sec{ width: 200px; height: 100%; display: block; float: left;  border-right: 0.8px solid #514DA7; color: #514DA7;
   }
   .bottom-startup .author-sec .top{ width: 100%;
     display: block;
     float: left;
     padding: 20px 10px 10px 10px;
     height: 72px;}
   .bottom-startup .author-sec .top span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;}
   .bottom-startup .author-sec .top .name{ font-size: 25px; line-height: 28px;
     font-family: 'Zuume';
     font-weight: 400;}
     .bottom-startup .author-sec .bottom{ width: 100%; height: 100%;
       border-top: 0.8px solid #514DA7;
       display: block;
       float: left;
       padding: 0px 10px 0px 10px;
       height: 72px;}
       .bottom-startup .author-sec .bottom .left{ width: 40%; display: block; float: left; height: 100%;  border-right: 0.8px solid #514DA7; padding-top: 20px;}
       .bottom-startup .author-sec .bottom .right{ width: 60%; display: block; float: left; padding-top: 20px; padding-left: 10px;}
       .bottom-startup .author-sec .bottom span{ font-size: 12px; line-height: 13px; font-weight: 500; width: 100%; display: block; display: block;}
       .bottom-startup .author-sec .bottom .dt{ font-size: 25px; line-height: 28px;
         font-family: 'Zuume';
         font-weight: 400;}
         .bottom-startup .author-sec.info{ width: 90px;}
         .bottom-startup .author-sec.info .bt-brd{ border-top: 0.8px solid #514DA7; }
         .bottom-startup .u-img-info{ display: block; float: left; width: 135px; height: 100%; border-right: 0.8px solid #514DA7;}
         .bottom-startup .u-img-info img{ width: 103px; display: block; margin: 0 auto; margin-top: 22px;}
         .bottom-startup .start{ width: 86px; display: block; float: left; background-color: #fff; height: 100%;    padding-top: 48px;}
         .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;}
         .bottom-startup .start a img{     width: 24px;
           display: block;
           margin: 0 auto;
           margin-bottom: 10px;}
           /* compare */
           .compare-c{    width: 475px;
             display: block;
             margin: 0 auto;
             bottom: 50%;
             position: absolute;
             left: 0;
             right: 0;
             z-index: 2;}
           .compare-c .logo-1{ width: 200px; display: block; float: left;}
           .compare-c .vs{ width: 75px; display: block; float: left; font-size: 12px; line-height: 15px; font-weight: 700; color: #EF484F;    text-align: center;
             margin-top: 25px;}
           .compare-c .logo-2{ width: 200px; display: block; margin:0 auto;}
          .startup-wrp{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0;    overflow: hidden;}
          .epi-bg{    position: absolute;
           bottom: -152px;
           left: 18%; width: 1920px;
           z-index: 1;}
 /* intro startup */
 .intro-startup{ width: 100%;display: block; float: left; position: absolute; top: 0; left: 0; bottom: 0; height: 100%; }
 .intro-startup .footer-nav{ width: 100%; display: block; float: left; position: absolute; bottom: 0; height: 80px; }
 .intro-startup .footer-bottom{ width: 100%; display: block; float: left; height: 5px;}
 .intro-startup .footer-bottom ul{ display: block; list-style-type: none; margin: 0px; padding:0px; }
 .intro-startup .footer-bottom ul li{     height: 5px;
   display: block;
   float: left;
   width: 49%;
   background: #fff;}
 .intro-startup .footer-top{ position: relative; width: 100%; display: block; float: left;  padding: 0 50px;     height: 75px;}
 .intro-startup .footer-top .top-intro-bt{display: block; list-style-type: none; margin: 0px; padding:0px; float: left;margin-top: 25px; position: absolute; }
 .intro-startup .footer-top .top-intro-bt li{display: block; float: left;}
 .intro-startup .footer-top .top-intro-bt li:first-child{ margin-right: 15px;}
 .intro-startup .footer-top .top-intro-bt li a{    height: 30px; border: 1px solid #514DA7;box-sizing: border-box; border-radius: 5px; color: #514DA7; font-weight: 400; font-size: 13px; font-style: normal; line-height: 15px; padding: 6px 10px; display: block; float: left;}
 .intro-startup .footer-top .top-intro-bt li a img{    width: 10px; display: block;float: left;margin-top: 3px; margin-right: 4px;}
 .intro-startup .footer-top .top-intro-bt li a:hover{ background-color: #fff; text-decoration: none; border: 1px solid #fff;}
 .smasung-g-10wrp{ width: 404px; display: block; height: 838px; position: absolute; background-image:url('../images/Samsung-Galaxy-S10.svg'); background-repeat: no-repeat;    left: 0;
   right: 0;
   margin: 0 auto;
   bottom: 0;
   top: unset;
   background-position: bottom;}
   .samsung-compare-c{     width: 211px;
     display: block;
     margin: 0 auto;
     position: absolute;
     bottom: 25%;
     left: 0;
     right: 0;}
   .samsung-compare-c img{ width: 100%;}
   .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;}
   /* comment wrapper */
   .smasung-g-10wrp .comment-box{    width: 428px;
     display: block;
     float: left;    right: -394px;
     position: absolute;
     bottom: 50px;}
   .comment-box-s-1{ width: 100%; display: block; background: #FFFFFF; float: left;
     border: 1px solid #201E6A;
     box-sizing: border-box;
     box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743);
     border-radius: 25px 25px 0px 25px; margin-bottom: 15px;}
     .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;}
     .comment-box-s-1 .footer{background: #F7F9FB;
       border-top: 1px solid #000000; display: block; float: left; width: 100%;  padding: 15px;
       box-sizing: border-box;
       border-radius: 0px 0px 0px 25px;}
       .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;}
       .comment-box-s-1 .footer img{ width: 25px; display: block; float: left; margin-right: 12px;}
       .key-arrow{ width: 50px; float: left; margin-top:5px;}
       .comment-w-397{ width: 397px; float: right;}
       .comment-box .user-photo{ width: 200px; display: block; float: right;}
       .spot-light-top{    width: 927px;
         height: 100%;    position: absolute;
         top: 0px;
         overflow: hidden;
         left: -350px;
         right: 0;
         margin: 0 auto; }
        .app-discovery{ width: 628px; height: 455px;background: rgba(255, 255, 255, 0.5);
         border: 1px solid #000000;
         box-sizing: border-box; position: absolute; right: 0px;    top: 198px;}
 .app-discovery .top-user{ width: 135px; height: 135px;background: #FFFFFF; border: 1px solid #000000;  box-sizing: border-box; border-radius: 100px;    margin: 0 auto;
   margin-top: -63px;}
 .app-discovery .top-user img{ width:57px; display: block; margin:0 auto;     margin-top: 45px;}
 .app-discovery h1{font-size: 60px;
   font-family: 'Zuume';    margin-top: 136px;
   font-weight: 400;
   line-height: 66px; width: 100%; display: block; text-align: center;
   color: #000;}
   .app-discovery h2{font-size: 60px;
     font-family: 'Zuume';
     font-weight: 300;
     line-height: 66px; width: 100%; display: block; text-align: center;
     color: #000;}
    .discovery-app-img{ width: 200px; display: block; position: absolute; right: 0; bottom: 0;}
    .popcorn-set{ position: absolute; width: 120px; display: block;     right: 440px; bottom: 0;}
    .app-discovery-bg{background-image:url('../images/Union.svg'); background-position: bottom; background-repeat: no-repeat;  }
    .intro-startup .footer-bottom ul li.active{ background: #514DA7;}
    .ft-comments-group{display: block;
     float: left;
     padding-top: 23px; width: 100%;
     height: 100%; padding-right: 15px;
 }
    .ft-comments-group .count-comments{ font-size: 12px; line-height: 14px; font-weight: 700;color: #000000; float: left; margin-right: 15px; margin-top:8px ;}
    .ft-comments-group .comments-photos{ display: block; float: left; list-style-type: none; margin:0px; padding: 0px;}
    .ft-comments-group .comments-photos li{ display: block; float: left; margin-left: -8px;}
    .ft-comments-group .comments-detail{display: block; float: left;  width: 100%; padding-right: 30px; }
    .ft-comments-group .comments-detail span{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC; width: 100%; display: block; float: left;}
    .ft-comments-group .comments-detail p{     margin-top: 2px;
     font-size: 12px;
     line-height: 14px;
     font-weight: 400;
     color: #000000;
     margin-bottom: 0px;
     width: 100%;
     display: block;
     float: left;}
    .ft-comments-group .comments-detail span a{font-size: 10px; line-height: 12px; font-weight: 400;color: #A8C2DC;  display: block; float: right;}
    .white-bg{ background-color: #fff;}
    .comment-frm{ display: block; float: right; width: 100%;    margin-top: 25px;}
    .comment-frm .frm-wdth{ width: 100%; display: block; float: left; }
    .comment-frm .frm-wdth input{border-bottom: 1px solid #514DA7 !important; border:0px; border-radius: 0px; padding: 10px 0px; }
    .comment-frm .frm-wdth input::-webkit-input-placeholder { /* Edge */
     color: #514DA7; font-size: 12px; line-height: 14px;
   }
   .comment-frm .frm-wdth input:-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: #514DA7;  font-size: 12px; line-height: 14px;
   }
   .comment-frm .frm-wdth input::placeholder {
     color: #514DA7;  font-size: 12px; line-height: 14px;
   }
   .comment-frm .add-comment{background: #514DA7;
     border-radius: 5px;
     font-size: 13px;
     line-height: 29px;
     color: #fff;
     padding: 5px 10px;
     display: block;
     width:111px;
     float: right; text-align: center;
     height: 39px;
 }
   .comment-frm .add-comment img{    width: 14px;
 }
    .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;}
    .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;}
    .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;}
    .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative;
     border: 1px solid #201E6A;
     box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743);
     border-radius: 25px 25px 25px 0px; }
     .a-intro-comments p{ width: 100%; display: block; float: left; margin: 0px; font-size: 18px; line-height: 25px; font-weight: 400; color: #000000;}
     .rly-comment-set{ display: block; list-style-type: none; margin: 5px 0 0 0;padding:0px; float: left;}
     .rly-comment-set li{ float: left; margin-right: 15px;}
     .rly-comment-set li a{ font-size: 12px; line-height: 28px; font-weight: 500; color: #514DA7;float: left;}
     .rly-comment-set li img{ width: 13px;
       float: left;
       display: block;
       margin-top: 8px;
       margin-right: 6px;}
      .comments-a-wrp{     width: 629px;
       display: block;
       float: right;
       position: absolute;
       bottom: 160px;
       right: 0;}
       /* thnaks Wrapper */
       .thanks-wrapper{ width: 1180px; display: block; position: absolute; margin: 0 auto; bottom: 0; left: 0; right: 0;}
       .thanks-l-wrp{ display: block; float: left; width: 504px;margin-bottom: 90px;    position: relative; }
       .thanks-img{height: 306px; display: block; margin: 0 auto; position: absolute; left: 0;  right: 0; top: -307px; width: 306px;}
       .thanks-pay-wrp{ width: 100%; display: block; height: 334px; float: left;border: 2px solid #06034C;
         box-sizing: border-box;
         border-radius: 15px;     position: relative;
         z-index: 2;}
  .thanks-pay-wrp .blacktext-wrp{background: #000000; border-radius: 5px; padding:10px 15px; width: 370px;
   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;}
  .thanks-pay-wrp .blacktext-wrp img{ width: 24px; margin-top: -10px;}
  .thanks-pay-wrp ul{    display: block;
   margin-top: 50px;
   margin: 32px 0 0 67px;
   padding: 0px;
   list-style-type: none;
   width: 370px;
   float: left;}
  .thanks-pay-wrp ul li{ float: left; width: 72px; margin: 0 10px 10px 10px;}
  .thanks-pay-wrp ul li a{ width: 100%; display:block; float: left;}
  .thanks-pay-wrp ul li a img{ display: block; float: left; width: 100%;}
  .thanks-pay-wrp ul li a span img{    width: 8px;
   display: block;
   float: left;
   margin-left: 3px;
   margin-top: 4px;
   margin-right: 5px;}
  .thanks-pay-wrp ul li a span{ font-size: 10px;
   line-height: 13px;
   color: #06034C;
   width: 100%;
   display: block;
   float: left;
   margin-top: 4px;}
   .payments-spc-57{ margin:0 76px;}
   .payment-spot-light-bt{ position: absolute; left: 0; width: 708px;    bottom: -85px;}
   .thanks-r-section{     width: 444px;
     display: block;
     float: right;
     position: absolute;
     right: 0;
     bottom: 70px;}
 .logo-common-wrp {
     width: 101px;
     display: block;
     margin: 0 auto;
 }
 .logo-common-wrp a{ width: 100%; display: block;}
 .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;}
 .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;}
 .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;}
 .back-bt .s1{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF;     position: absolute;
   left: -10px;
   top: -10px;}
 .back-bt img{ width: 20px; margin-right: 5px;}
 .back-bt:hover{ text-decoration: none; color:#514DA7;}
 .back-bt .s2{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF;     position: absolute;
   left: -10px;
   bottom: -10px;}
   .back-bt .s3{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF;     position: absolute;
     right: -10px;
     bottom: -10px;}
     .back-bt .s4{ width: 20px; height: 20px; border-radius: 100px; background: #DFE7EF;     position: absolute;
       right: -10px;
       top: -10px;}
 .rating-section{ width: 100%; display: block; float: left; list-style-type: none; margin: 0; padding: 0px; border: 1px solid #000000;
   box-sizing: border-box; margin-top: 25px;}
   .rating-section li{ width: 100%; display: block; float: left; padding: 15px;}
   .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;}
   .rating-section li .publish{width: 82px; height: 33px; background: #514DA7;
     border-radius: 5px; display: block; float: right; color:#fff; font-size: 14px; line-height: 33px; text-align: center; font-weight: 500;}
     .rating-section li p.wdth{ width: 154px;}
     .rating-list{ display: block; float: right;}
     .rating-list a{ width: 26px; display: block; float: left; margin-right: 10px;}
     .rating-section li:first-child{ border-bottom: 1px solid #000000;}
     .follow-us-py{width: 100%; display: block; float: left; padding:15px;}
     .follow-us-py span{ font-size: 14px; line-height: 22px; font-weight: 500; font-style: normal;}
     .p-follows{ display: block; list-style-type: none; margin:0px; padding: 0px; float: right;}
     .p-follows li{ width: 26px; display: block; float: left; margin-left:10px;}
     .p-follows li a{ width: 100%; display: block; float: left;}
     .p-users{ width: 108%; display: block; float: left;     margin-top: 40px;}
     .p-users span{ font-size: 14px; line-height: 22px; font-weight: 500; color:#fff; float: left; margin-top: 15px; }
     .p-users h1{ font-size: 39px; line-height: 43px; font-weight: 400; color:#fff;float: left;padding:0 10px;     margin-bottom: -6px;}
     /* single mobile */
     .single-mobileInsight{ width: 441px; display: block; height: 730px;position: absolute; background-image:url('../images/s-mobile.svg'); background-repeat: no-repeat;    left: 0;
       right: 0;
       margin: 0 auto;
       bottom: 0;
       top: unset;}
       .slide-img{    width: 402px;
         position: absolute;
         bottom: 1px;
         left: 0;
         right: 0;
         margin: 0 auto;}
        .single-m-Insight-comments{  width: 423px; display: block;  position: absolute;
         top: 294px;
         right: -357px;}
        .single-left-Insight-comments{position: absolute;
         width: 423px;
         display: block;
         top: 0;
         left: -332px;}
        .author-thoughts{ width: 236px; display: block; float: left;    margin-left: 70px;
         margin-bottom: -20px;}
         .custom-c-style{border-radius:0px 25px 25px 25px;}
         .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000;
            border-radius: 45px 45px 0 0;
           bottom: 0;
           top: unset;
           background-position: bottom;}
         .m-screen{ width: 348px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto;     margin-top: 15px;}
         .m-screen-comments{     width: 370px;
           display: block;
           position: absolute;
           left: 0;
           z-index: 1;
           margin-left: -230px;
           margin-top: 50px;}
      .user-photo-bottom{  width: 127px;display: block; position: absolute;  bottom: 76px; left: -110px;}
      .p-left{ left: 0;}
      .p-right{ right: 0;}
      .allMWrp{ position: absolute; right: 0px; left: 0px; position: absolute; margin: 0 auto; width: 792px; height: 100%;     bottom: 2px;}
      .m-screen-right {
       width: 370px;
     display: block;
     position: absolute;
     right: 0;
     z-index: 1;
     margin-right: -207px;
     margin-top: 50px;
   }
   .user-photo-bottom-r{  width: 127px;display: block; position: absolute;      right: -128px;
     bottom: 125px;}
     /* no comments */
     .no-comment-count{ width: 100%;}
     .no-comments-img{ width: 40px; display: block; float: left;}
     .no-c-yet{ font-size: 12px !important; color: #000 !important; font-weight: 700 !important;}
     .h-100p{ height: 100%;}
     .bord-r{    border-right: 1px solid #A8C2DC;}
     .ft-comments-group .comments-detail{    position: absolute;
       padding-left: 50px;}
    .c-with-photos{ display: block; float: left; margin-left: -120px;}
    .addfrm-spc{ padding-right: 50px;}
    .c-product-insight-wrp{     width: 350px;
     display: block;
     float: right;
     position: absolute;
     top: unset;
     bottom: 74px;
     right: -310px;}
    .custom-selected-style{ border-radius:0px 25px 25px 25px;border: 1.09903px solid #EF484F;}
    .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;}
    .custom-selected-style .top-wrp a{ width: 20px; display: block; float: right;}
    .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;}
    .custom-selected-style .footer{ width: 100%; display: block; float: left; border-top: 1px solid #DFE7EF; margin-top: 20px; padding-top:15px ;}
    .cit-16{ color: #EF484F; font-size: 12px; line-height: 14px; font-weight: 400;}
    .cit-16:hover{color: #EF484F;}
    .ft-share{color: #EF484F; font-size: 13px; line-height: 27px; font-weight: 400; display: block; float: right;}
    .ft-share img{     width: 14px;
     display: block;
     float: left;
     margin: 8px 7px 0 0px;}
     .ft-share:hover{color: #EF484F;}
     .custom-selected-style .rect{ width: 25px; display: block; position: absolute;top: 0;
       left: 0;}
       /* single  web screen */
       .s-web-screen-wrp{background-image:url('../images/webscreen.svg'); background-repeat: no-repeat; width: 873px; height: 567px;position: absolute;
         left: 0;
         right: 0;    bottom: 210px;
         margin: 0 auto;}
        .web-comment-spc{top: 63px;left: -206px;}
        .web-ps-insight-spc{    top: 130px;
         right: -260px;}
 /* screen grab */
 .screengrab-wrp{ width: 557px; height: 478px; display: block; position: absolute; left: 0px; right: 0px; margin: 0 auto;    bottom: 210px;}
 .screengrab-lspc{top: 113px;}
 .screengrab-rspc{top: 92px;right: -362px;}
 .view-ticket-wrp-ps{    width: 302px;
   position: absolute;
   z-index: 1;
   right: -224px;
   top: 82px;}
   .bc-transparent{ background-image: none !important; border: 0px;}
   .comments-left-without-bc{    margin-left: -286px;     margin-top: 72px;}
   .comments-right-without-bc{      right: -255px;}
   .screenGrb-comments-wrp{width: 752px;}
   .spc-grbscreen1{ margin-top: 40px;}
   /* two webscreen */
   .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;
     right: 0;
     margin: 0 auto;
     bottom: 0;
     top: unset;
     background-position: top;}
     .two-webs-l-spc{    margin-left: -342px;
       margin-top: 37px;}
       .two-screen-user-photo-bottom {
         width: 127px;
         display: block;
         position: absolute;
         bottom: 76px;
         left: -254px;
     }
     .two-webscreen-r-insight {
       width: 423px;
       display: block;
       position: absolute;
       top: 51px;
       right: 3px;
   }
   .custom-selected-author-style {
     border-radius: 0px 25px 25px 25px;
     border: 2px solid #F9CF35; position: relative;
 }
 .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;}
 .custom-selected-author-style .top-wrp a{ width: 20px; display: block; float: right;}
 .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;}
 .custom-selected-author-style .rect {
   width: 25px;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
 }
 .author-two{position: absolute; top: 240px; left: -363px; width: 428px;}
 .author-two .author-two-photo{ width: 200px; display: block;}
 .two-author-desktop{    width: 913px;
   display: block;
   height: 525px;
   position: absolute;
   background-image:url('../images/two-author-desktop.svg');
   background-repeat: no-repeat;
   left: 0;
   right: 0;
   margin: 0 auto;
   bottom: 0;
   top: unset;
   background-position: bottom;}
   .author-two-desktop{     position: absolute;
     top: -130px;
     left: -134px;
     width: 428px;}
     .author-two-desktop .author-two-photo{ width: 200px; display: block;}
     .author-one-desktop{    position: absolute;
       top: -163px;
       right: -201px;
       width: 428px;}
  .custom-2-author{ border-radius: 25px 25px 25px 0px;}
  .custom-2-author .footer { border-radius: 0px 0px 25px 0px;}
  .desktop-two-logo-spc{ bottom: 40%;}
  .author-app-img{ bottom: 0px; left: 0px; width: 252px; position: absolute;}
  .author-two-head-spc{    margin-top: 56px !important;}
  .sign-wrp{ width: 100%; display: block; float: left;}
  .user-t-1{width: 50px; position: absolute;left: -70px; margin-top: -16px; }
  .author2-thoughts{ width: 249px; display: block; margin: 0 auto; height: 213px;}
  .cust-user2-style{ border-radius:25px 0 25px 25px}
  .user-t-2{width: 50px; position: absolute;right: -70px; margin-top: -16px;}
  .single-chat-c-left{left: -405px;}
  .single-chat-c-right{top: 244px;right: -404px;}
  .user-b-1{width: 50px; position: absolute;left: -70px; bottom: 0px;}
  .help-view-ticket-right{display: block;
   float: right;
   right: -84px;
   position: absolute;
   z-index: 1;
   top: 51px;
   width: 423px;}
  .two-author-comments{ width: 400px; display: block; position: absolute; left: 0px; right: 0px;    bottom: 182px; margin: 0 auto;}
  .two-author-all-comments{width: 100%; display: block; float:left;}
  .all-c-user-b-r{width: 50px; position: absolute;right: -70px; bottom: 0px;}
  .all-c-style{ border-radius:25px 25px 0px 25px; margin-left: 50px;}
  .a2-set{     width: 282px;
   height: 258px;
   position: absolute;
   left: -370px;
   bottom: -50px;}
   .a2true-set{ width: 268px;
     height: 319px;
     position: absolute;
     right: -440px;
     bottom: -103px;}
  .add_comments-spc_r{ bottom: unset !important; top: 280px !important;}
  .add-comments-bt img{ width: 15px; display: block; float: left; margin-right: 5px; margin-top: -3px; }
  .add-comments-bt{ font-size: 10px; margin-right: 15px; margin-top: 20px; line-height: 8px; font-weight: 400;  color:#000;   display: block;
   float: right;}
  .bounce-board-wrp{ width: 460px; display: block; position: fixed; height: 100%; background-color: #fff;  top: 0px; z-index: 50;
   transition-property: right;
   -webkit-transition-property: right;
   -moz-transition-property: right;
   -o-transition-property: right;
   transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-timing-function: linear;
   -webkit-transition-timing-function: linear;
   -moz-transition-timing-function: linear;
   -o-transition-timing-function: linear;
   right: -500px;
 }
  .bounce-board-wrp .inner-wrp-bc{ width: 411px; display: block; margin:0 auto; height: 100%;}
  .bounce-board-wrp .inner-wrp-bc .bc-top-head{border-bottom: 1px solid #DFE7EF; width: 100%; padding:15px 0; display: block; float: left; font-size: 19px; font-weight: 700; line-height: 22px;}
  .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head img{ width: 27px; display: block; float: left; margin-right: 10px; margin-top: 9px;}
  .bounce-board-wrp .inner-wrp-bc .bc-top-head .bc-head{ display: block; float: left;}
  .bounce-board-wrp .inner-wrp-bc .bc-top-head .action-sort{ display: block; float: right;}
  .bc-sort-list{ font-weight: 700; font-size: 14px; line-height: 12px; color: #000; background: transparent; border: 0px;}
  .sort-by{ font-size: 14px; line-height: 18px; color: #000; opacity: 0.5; }
  .bounce-board-body{ width: 100%; display: block; float: left; height:calc(100% - 200px);  overflow-y: auto; padding:0 8px 0 15px;}
  .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;}
  .common_color{ overflow: hidden; background: transparent; border-radius: 100px;}
  .user-photo{width: 109px;
   display: block;
   float: left;}
  .cat-minus{    right: -11px !important;
   margin-left: unset !important;}
   .mt-50{ margin-top: 50px;}
   .sub-menu-user{    width: 150px;
     display: block;
     position: absolute;
     background: #fff;
     right: 0px;
     border: 1px solid #eaeaea;
     border-radius: 5px;
     padding: 5px;
     -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.22);
 -moz-box-shadow:    0px 1px 2px 0px rgba(50, 50, 50, 0.22);
 box-shadow:         0px 1px 2px 0px rgba(50, 50, 50, 0.22);
   }
   .sub-menu-user ul{ list-style-type: none; margin:0px; padding:0px; }
   .sub-menu-user ul li{ margin-right: 0px; font-size: 13px; text-align: right; padding:5px 10px; border-bottom:1px solid #eaeaea;}
   .sub-menu-user ul li:last-child{ border-bottom: 0px;}
   .sub-menu-user ul li a:hover{color:#514DA7;}
   .bounced-user-comments{ width: 100%; display: block; float: left; list-style-type: none; margin:0px; padding:0px; margin-top: 15px;}
   .bounced-user-comments li{ display: block; float: left;  position: relative;}
   .bounced-user-comments .b-user-head{ width: 100%; display: block; float: left;}
   .bounced-user-comments .b-user-head img{    width: 26px;
     display: block;
     float: left;
     position: absolute;
     left:-13px;}
   .bounced-user-comments .b-user-head .head-content{ display: block; float: left;}
   .bounced-user-comments .b-user-head ul{ display: block; list-style-type: none; margin:0px; padding:0px;}
   .bounced-user-comments .b-user-head ul li{ display: block; float: left; font-size: 14px; color: #000; opacity: 0.5; padding:0px;}
   .bounced-user-comments .b-user-head ul li img{ width: 10px; float: left; margin: 8px 5px 0 0px; left: unset;position: unset;}
   .bounced-user-comments .b-user-head ul li span{     width: 3px;  margin: 12px 5px 0 5px;
     height: 3px;
     display: block;
     background: #ccc;
     float: left;
 }
 .bounced-user-comments .b-user-head ul li span.au{background: #BDDBFF;
   width: auto;
   height: auto;
   padding: 3px 7px;
   display: block;
   border-radius: 3px;
   margin-top: -2px;}
 .bounced-user-comments p{ font-size: 12px; line-height: 18px; color: #000; font-weight: 500; margin: 5px 0; display: block; float: left;}
 .bc_border{}
 .info_bc_spc{ float: left;}
 .info_bc_spc li{ padding:0px; color: #514DA7;}
 .info_bc_spc li a{color: #514DA7; opacity: 1;}
 .info_bc_spc li img{ margin-top: 4px;}
 .joined_wrapper{ width: 100%; display: block; float: left; margin-top: 5px;}
 .joined_wrapper .add_rply{ display: block; float: left; width: 73%;}
 .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;}
 .ft-normal{ font-weight: 500 !important;}
 .joined_wrapper .joined-info.info_bc_spc{width: 27%; margin-top:4px;}
 /* placeholder */
 .joined_wrapper .add_rply input::-webkit-input-placeholder { /* Edge */
  font-size: 10px;  color: #000; opacity: 0.7;
 }
 .joined_wrapper .add_rply input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-size: 10px;  color: #000; opacity: 0.7;
 }
 .joined_wrapper .add_rply input::placeholder {
   font-size: 10px;  color: #000; opacity: 0.7;
 }
 .parent-full-width{width: 100%; display: block; float: left; padding:15px 15px 15px 30px;}
 .child-full-width{width: 100%; display: block; float: right; position: relative;  padding:15px 15px 15px 0px; }
 .parent_bg{ background: #F3F9FF; border: 1px solid #BDDBFF; border-radius: 5px;}
 .full-width{ width: 100%; display: block; float: left;}
 .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;}
 .child-full-width .b-user-head{    padding-left: 70px;}
 .child-full-width .b-user-head img{ left:33px;}
 .child-full-width p{    border-left: 1px solid #ccc; display: block; width: calc(100% - 47px); float: right; padding-left: 20px;}
 .child-full-width .joined_wrapper{padding: 0 0px 0 40px;}
 .bounced-user-comments .lbord{ width: 1px; height:calc(100% - 57px); background-color: #BDDBFF; position: absolute; margin-top: 5px;}
 .bc_brd_l{width: 1px; height:calc(100% - 65px); background-color: #ccc; position: absolute; margin-top: 50px;}
 .comments-footer{ width: 100%; display: block; float: left;}
 .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;}
 .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;}
 .add_comments_chat img{ width: 15px;}
 .add_comments_chat:hover{ color:#fff; text-decoration: none;}
 .comments-footer-wrp{ background: #DFE7EF;width: 100%;display: block; float: left; border-radius: 0 0 3px 3px; padding: 5px; margin-bottom: 10px;}
 button:focus{ border:0px; outline: none;}
 .short_by{left: -100px !important;}
 input:focus{ outline: none;}
 .comments-footer textarea:focus{ outline: none;}
 .close_chat_bx{ width: 20px; height: 20px; display: block; float: right;  border: 0.5px solid #ccc; border-radius: 100px; margin-top: 3px; margin-left: 15px;}
 .close_chat_bx img{ width: 7px; display: block; margin: 6px 0px 0 5.5px;}
 .close_chat_bx:hover{ background-color: #ccc;}
 /* chat box close */
 .cht_close{
   transition-property: right;
   -webkit-transition-property: right;
   -moz-transition-property: right;
   -o-transition-property: right;
   transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-timing-function: linear;
   -webkit-transition-timing-function: linear;
   -moz-transition-timing-function: linear;
   -o-transition-timing-function: linear;
   right: 0px;
 }
 .p-left-0{ padding-left:0px !important;}
 .ps_right{ float: right !important; position: static !important;}
 .testi-photos-ct .c-with-photos{ margin-left: 0px; }
 .testi-photos-ct .comments-detail{padding-left: 165px !important;}
 .ct-width{ width: 400px;}
 .m-0{left: 0 !important; right: 0 !important; margin: 0 auto !important;}
 .testi-photos-ct .comments-detail{padding-right: 40px;}
 .ct-l-400{display: block; float: right;position: absolute; bottom: 360px; width: 400px; left: 0;}
 .right-corner { border-radius: 25px 25px 2px 25px;}
 .upper-th{width: 76px; display: block; float: right; margin-right: 115px; margin-top: 28px; position: absolute; right: 0;}
 .dynamic-thoughts { width: 200px; display: block; }
 .two-screen-spc-top{ top: 100px; right: -286px;}
 .joined_wrapper{ position: relative;}
 .each-ft{ width: 366px;  bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;}
 .reply-Wdth{ width: 64px;}
 .discard_bt{width: 70px;float: right;  margin-top: 3px; margin-right: 20px;}
 .full-w-height-profile{  min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;}
 .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;}
 .full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; }
 .full-w-height-profile.ex-light .bt-spc-top{    margin-top: 100px;}
 .full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;}
 .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;}
 .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;}
 .update_profile span{width: 11px;
   height: 11px;
   display: inline-block;
   background: #EF484F;
   border-radius: 10px;
   margin: 12px 0 0 0;}
 .update_profile:hover{ color: #fff; text-decoration: none;}
 .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;}
 .custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;}

src/components/AuthorIntro.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/lock.svg"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="smasung-g-10wrp">	18	<div class="smasung-g-10wrp">
19	<div class="samsung-compare-c">	19	<div class="samsung-compare-c">
20	<div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div>	20	<div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div>
21		21
22	</div>	22	</div>
23	<!-- <div class="samsung-compare-c">	23	<!-- <div class="samsung-compare-c">
24	<div class="logo-1"><img src="../assets/images/logo-1.png" /></div>	24	<div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
25	<div class="vs">vs</div>	25	<div class="vs">vs</div>
26	<div class="logo-2"><img src="../assets/images/logo-2.png" /></div>	26	<div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
27	</div> -->	27	</div> -->
28	<div class="comment-box">	28	<div class="comment-box">
29	<div class="comment-box-s-1">	29	<div class="comment-box-s-1">
30	<!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> -->	30	<!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> -->
31	<p>{{currentSlideData.payload.metaData.textBox}}</p>	31	<p>{{currentSlideData.payload.metaData.textBox}}</p>
32	<div class="footer">	32	<div class="footer">
33	<img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>	33	<img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>
34	</div><!-- footer -->	34	</div><!-- footer -->
35	</div><!-- comment box 1 -->	35	</div><!-- comment box 1 -->
36	<!-- <div class="comment-box-s-1 comment-w-397">	36	<!-- <div class="comment-box-s-1 comment-w-397">
37	<p>	37	<p>
38	Use arrow keys to navigate <br/>	38	Use arrow keys to navigate <br/>
39	<img src="../assets/images/key-arrow.jpg" class="key-arrow" />	39	<img src="../assets/images/key-arrow.jpg" class="key-arrow" />
40	</p>	40	</p>
41	</div> -->	41	</div> -->
42	<!-- comment box 1 -->	42	<!-- comment box 1 -->
43	<div class="user-photo">	43	<div class="user-photo">
44	<!-- <img src="../assets/images/comment-photo.png" /> -->	44	<!-- <img src="../assets/images/comment-photo.png" /> -->
45	<img :src="currentSlideData.payload.metaData.authorImage" />	45	<img :src="currentSlideData.payload.metaData.authorImage" />
46	</div>	46	</div>
47	</div><!-- comment box -->	47	</div><!-- comment box -->
48	</div><!-- samsung g 10 -->	48	</div><!-- samsung g 10 -->
49	<div class="footer-nav">	49	<div class="footer-nav">
50	<div class="footer-top">	50	<div class="footer-top">
51	<ul class="top-intro-bt ps_right">	51	<ul class="top-intro-bt ps_right">
52	<li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>	52	<li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
53	<li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>	53	<li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
54	</ul>	54	</ul>
55	</div><!-- footer top -->	55	</div><!-- footer top -->
56	<div class="footer-bottom">	56	<div class="footer-bottom">
57	<ul>	57	<ul>
58	<li></li>	58	<li></li>
59	<li></li>	59	<li></li>
60	</ul>	60	</ul>
61	</div><!-- footer top -->	61	</div><!-- footer top -->
62	</div><!-- footer -->	62	</div><!-- footer -->
63		63
64	</div>	64	</div>
65	<!-- body wrapper -->	65	<!-- body wrapper -->
66	</div>	66	</div>
67	<!-- main wrapper -->	67	<!-- main wrapper -->
68	</main>	68	</main>
69	</template>	69	</template>
70		70
71	<script>	71	<script>
72	import Vue from "vue";	72	import Vue from "vue";
73	import router from "../router";	73	import router from "../router";
74		74
75	export default {	75	export default {
76	name: "AuthorIntro",	76	name: "AuthorIntro",
77		77
78	data() {	78	data() {
79		79
80	return {	80	return {
81	allSlide:[],	81	allSlide:[],
82	currentSlideIndex:null,	82	currentSlideIndex:null,
83	currentSlideData:null,	83	currentSlideData:null,
84	};	84	};
85	},	85	},
86	mounted() {	86	mounted() {
87	var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);	87	var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
88	if (allSlideData) {	88	if (allSlideData) {
89	this.allSlide = JSON.parse(allSlideData);	89	this.allSlide = JSON.parse(allSlideData);
90	this.getCurrentSlideData();	90	this.getCurrentSlideData();
91	}	91	}
92		92
93	},	93	},
94	methods: {	94	methods: {
95	getCurrentSlideData(){	95	getCurrentSlideData(){
96	var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);	96	var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
97	this.currentSlideIndex = i;	97	this.currentSlideIndex = i;
98	this.currentSlideData = this.allSlide[i]	98	this.currentSlideData = this.allSlide[i]
99	console.log("currentSlideData",this.currentSlideData)	99	console.log("currentSlideData",this.currentSlideData)
100		100
101	},	101	},
102	goNext(){	102	goNext(){
103	this.currentSlideIndex++	103	this.currentSlideIndex++
104	this.$router.push({	104	this.$router.push({
105	name: this.allSlide[this.currentSlideIndex].ur,	105	name: this.allSlide[this.currentSlideIndex].ur,
106	params: {	106	params: {
107	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	107	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
108	slideId: this.allSlide[this.currentSlideIndex].slideId,	108	slideId: this.allSlide[this.currentSlideIndex].slideId,
109	},	109	},
110	});	110	});
111		111
112	},	112	},
113	goBack(){	113	goBack(){
114	this.currentSlideIndex--	114	this.currentSlideIndex--
115	this.$router.push({	115	this.$router.push({
116	name: this.allSlide[this.currentSlideIndex].ur,	116	name: this.allSlide[this.currentSlideIndex].ur,
117	params: {	117	params: {
118	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	118	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
119	slideId: this.allSlide[this.currentSlideIndex].slideId,	119	slideId: this.allSlide[this.currentSlideIndex].slideId,
120	},	120	},
121	});	121	});
122		122
123	},	123	},
124	goToLogin() {	124	goToLogin() {
125	this.$router.push("/");	125	this.$router.push("/login");
126	},	126	},
127	goToSignUp() {	127	goToSignUp() {
128	this.$router.push("/signup");	128	this.$router.push("/");
129	},	129	},
130	goToProfile() {	130	goToProfile() {
131	this.$router.push("/profile");	131	this.$router.push("/profile");
132	},	132	},
133		133
134	},	134	},
135	};	135	};
136	</script>	136	</script>
137		137

src/components/AuthorReadingNow.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro app-discovery-bg">	3	<div class="container-fluid episode-intro app-discovery-bg">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	5	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
6	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	6	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
7	<span class="navbar-toggler-icon"></span>	7	<span class="navbar-toggler-icon"></span>
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	</button>	10	</button>
11	<div class="user-profile-photo insights-profile">	11	<div class="user-profile-photo insights-profile">
12	<a href="#"><img src="../assets/images/lock.svg"></a>	12	<a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
13	</div>	13	</div>
14	</nav>	14	</nav>
15	<!-- menu wrapper -->	15	<!-- menu wrapper -->
16	<div class="intro-startup">	16	<div class="intro-startup">
17	<div class="spot-light-top">	17	<div class="spot-light-top">
18	<img src="../assets/images/spot-light-top.svg" />	18	<img src="../assets/images/spot-light-top.svg" />
19	<div class="app-discovery">	19	<div class="app-discovery">
20	<div class="top-user">	20	<div class="top-user">
21	<img src="../assets/images/app-photo.svg" />	21	<img src="../assets/images/app-photo.svg" />
22	</div><!-- top user -->	22	</div><!-- top user -->
23	<h1>App Discovery</h1>	23	<h1>App Discovery</h1>
24	<h2>01</h2>	24	<h2>01</h2>
25	<img src="../assets/images/discovery.svg" class="discovery-app-img" />	25	<img src="../assets/images/discovery.svg" class="discovery-app-img" />
26	</div><!-- app Disovery -->	26	</div><!-- app Disovery -->
27		27
28	</div><!-- spot light top -->	28	</div><!-- spot light top -->
29	<img src="../assets/images/popcorn-set.svg" class="popcorn-set" />	29	<img src="../assets/images/popcorn-set.svg" class="popcorn-set" />
30	<div class="footer-nav">	30	<div class="footer-nav">
31	<div class="footer-top">	31	<div class="footer-top">
32	<ul class="top-intro-bt">	32	<ul class="top-intro-bt">
33	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	33	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
34	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	34	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
35	</ul>	35	</ul>
36	</div><!-- footer top -->	36	</div><!-- footer top -->
37	<div class="footer-bottom">	37	<div class="footer-bottom">
38	<ul>	38	<ul>
39	<li class="active"></li>	39	<li class="active"></li>
40	<li></li>	40	<li></li>
41	</ul>	41	</ul>
42	</div><!-- footer top -->	42	</div><!-- footer top -->
43	</div><!-- footer -->	43	</div><!-- footer -->
44		44
45	</div>	45	</div>
46	<!-- body wrapper -->	46	<!-- body wrapper -->
47	</div>	47	</div>
48	<!-- main wrapper -->	48	<!-- main wrapper -->
49	</main>	49	</main>
50	</template>	50	</template>
51		51
52	<script>	52	<script>
53	import Vue from "vue";	53	import Vue from "vue";
54	import router from "../router";	54	import router from "../router";
55		55
56	export default {	56	export default {
57	name: "AuthorReadingNow",	57	name: "AuthorReadingNow",
58		58
59	data() {	59	data() {
60	return {};	60	return {};
61	},	61	},
62	mounted() {},	62	mounted() {},
63	methods: {	63	methods: {
64	goToLogin() {	64	goToLogin() {
65	this.$router.push("/");	65	this.$router.push("/login");
66	},	66	},
67	goToSignUp() {	67	goToSignUp() {
68	this.$router.push("/signup");	68	this.$router.push("/");
69	},	69	},
70		70
71	},	71	},
72	};	72	};
73	</script>	73	</script>
74		74

src/components/ChangePassword.vue

Diff comments View file @56f4b75

 <template>
   <main class="landing-page">
     <div class="container-fluid main-wrp">
       <nav class="navbar navbar-expand-sm spotLight-nav">
-        <a class="navbar-brand" href="#"
+        <a class="navbar-brand" href="javascript:void(0);"
           ><img src="../assets/images/logo.png"
         /></a>
         <button
           class="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarsExample03"
           aria-controls="navbarsExample03"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" href="#">About</a>
+              <a class="nav-link" href="javascript:void(0);">About</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Masterclass</a>
+              <a class="nav-link" href="javascript:void(0);">Masterclass</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Stories</a>
+              <a class="nav-link" href="javascript:void(0);">Stories</a>
             </li>
             <li class="nav-item spotLight-img">
-              <a class="nav-link" href="#"
+              <a class="nav-link" href="javascript:void(0);"
                 ><img src="../assets/images/SPOTLight.svg"
               /></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Library</a>
+              <a class="nav-link" href="javascript:void(0);">Library</a>
             </li>
           </ul>
         </div>
       </nav>
       <!-- menu wrapper -->
       <div class="sign-wrp">
         <div class="row col-reverse">
           <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
           <!-- users land image -->
-          <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
+         <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
-            <h1 class="welcome-hd-back">
+          <h1>
-              Welcome <br />
+            <!-- Welcome to <br />
-              back
+            Productgrowth -->
-            </h1>
+             Hello, there!<br />
-          </div>
+welcome to spotlight
+          </h1>
+          <ul class="sign-in-up-list">
+            <li>
+              <img src="../assets/images/check.svg" /><span
+                >Collaborate, Contribute and Explore with fellow product enthusiasts</span
+              >
+            </li>
+            <li>
+              <img src="../assets/images/check.svg" /><span
+                >Get access to insightful Case Studies and participate in Roundtables</span
+              >
+            </li>
+            <li>
+              <img src="../assets/images/check.svg" /><span
+                >Engage actively on the
+Bounce Board - we’re all ears!
+</span
+              >
+            </li>
+          </ul>
+        </div>
           <!-- users land image -->
           <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
             <div class="form-layout signup-frm-spc">
               <form>
                 <!-- <h5>SignUp Using</h5> -->
                 <div class="social-login" style="visibility: hidden">
                   <ul>
                     <li>
-                      <a href="#"><img src="../assets/images/google.svg" /></a>
+                      <a href="javascript:void(0);"><img src="../assets/images/google.svg" /></a>
                     </li>
                     <li>
-                      <a href="#"><img src="../assets/images/linkdin.svg" /></a>
+                      <a href="javascript:void(0);"><img src="../assets/images/linkdin.svg" /></a>
                     </li>
                     <li>
-                      <a href="#"><img src="../assets/images/twitter.svg" /></a>
+                      <a href="javascript:void(0);"><img src="../assets/images/twitter.svg" /></a>
                     </li>
                   </ul>
                 </div>
                 <h5>
                  Setup a new password. Please enter the OTP shared to {{email}} to confirm
                   your email address
                 </h5>
                 <div class="fill-form">
                   <label for="inputEmail" class="sr-only">OTP</label>
                   <input
                     type="text"
                     id="inputEmail"
                     class="form-control"
                     placeholder="Your OTP"
                     v-model="otp"
                     autocomplete="off"
                   />
                   <label for="inputEmail" class="sr-only">New Password</label>
                   <input
                     type="password"
                     id="inputEmail"
                     class="form-control"
                     placeholder="Your New Password"
                     v-model="password"
                     autocomplete="off"
                   />
                   <!-- <label for="inputPassword" class="sr-only">Password</label>
     <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> -->
                   <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="changePassword">
                     <img src="../assets/images/password-reload.png" />Update Password
                   </a>
-                  <p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail">Resend</a></p>
+                  <h3 class="ft-normal">Didn’t Get the OTP? <a class="cursor-pointer no-underline" @click="ResendEmail">Resend</a></h3>
                   <!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> -->
                 </div>
               </form>
             </div>
           </div>
           <!-- sign up -->
         </div>
       </div>
       <!-- body wrapper -->
     </div>
   </main>
 </template>
 <script>
 import Vue from "vue";
 import router from "../router";
 import axios from "axios";
 export default {
   name: "ChangePassword",
   data() {
     return {
         email:null,
         otp:null,
         password:null,
     };
   },
   mounted() {
     this.email = localStorage.getItem("spotlight_email");
     console.log("this.$route.params.flag",this.$route.params.flag)
     if(this.$route.params.flag == true){
         this.ResendEmail(false);
     }
   },
   methods: {
     goToLogin() {
-      this.$router.push("/");
+      this.$router.push("/login");
     },
     changePassword(){
         axios
         .post("/resetPassword", {'email':this.email,'otp':this.otp,'newPassword':this.password})
         .then((response) => {
            console.log("resetPassword- response",response)
         this.$toaster.success(response.data.message)
         if(response.data.status == "success"){
-             this.$router.push("/");
+             this.$router.push("/login");
         }
         })
         .catch( (error) =>{
           if (error.response) {
             this.$toaster.error(error.response.data.message)
           }
         });
     },
     ResendEmail(){
          axios
         .post("/forgotPassword", {'email':this.email,'otp':true})
         .then((response) => {
            console.log("forgotPassword- response",response)
         this.$toaster.success(response.data.message)
         })
         .catch( (error) =>{
           if (error.response) {
             this.$toaster.error(error.response.data.message)
           }
         });
     }
   },
 };
 </script>

src/components/EpisodeIntro.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/lock.svg"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="startup-wrp">	17	<div class="startup-wrp">
18		18
19	<!-- <div class="compare-c">	19	<!-- <div class="compare-c">
20	<div class="logo-1"><img src="../assets/images/logo-1.png" /></div>	20	<div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
21	<div class="vs">vs</div>	21	<div class="vs">vs</div>
22	<div class="logo-2"><img src="../assets/images/logo-2.png" /></div>	22	<div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
23	</div> -->	23	</div> -->
24	<div class="compare-c">	24	<div class="compare-c">
25	<div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div>	25	<div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div>
26	</div>	26	</div>
27	<!-- compare -->	27	<!-- compare -->
28	<img src="../assets/images/spot-light.svg" class="epi-bg" />	28	<img src="../assets/images/spot-light.svg" class="epi-bg" />
29	<div class="bottom-startup">	29	<div class="bottom-startup">
30	<div class="logo-wrp">	30	<div class="logo-wrp">
31	<a href="#"><img src="../assets/images/ps-growth.svg" />	31	<a href="javascript:void(0);"><img src="../assets/images/ps-growth.svg" />
32	<span>Product Growth</span>	32	<span>Product Growth</span>
33	</a>	33	</a>
34	</div><!-- logo wrp -->	34	</div><!-- logo wrp -->
35	<div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title -->	35	<div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title -->
36	<div class="author-sec">	36	<div class="author-sec">
37	<div class="top">	37	<div class="top">
38	<span>Author</span>	38	<span>Author</span>
39	<span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span>	39	<span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span>
40	</div><!-- top section -->	40	</div><!-- top section -->
41	<div class="bottom">	41	<div class="bottom">
42		42
43	<div class="right p-left-0">	43	<div class="right p-left-0">
44	<span>Last updated</span>	44	<span>Last updated</span>
45	<span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span>	45	<span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span>
46	</div><!-- right -->	46	</div><!-- right -->
47	</div><!-- bottom -->	47	</div><!-- bottom -->
48	</div><!-- author section-->	48	</div><!-- author section-->
49	<div class="author-sec">	49	<div class="author-sec">
50	<div class="top">	50	<div class="top">
51	<span>App</span>	51	<span>App</span>
52	<span class="name">{{currentSlideData.payload.metaData.app}}</span>	52	<span class="name">{{currentSlideData.payload.metaData.app}}</span>
53	</div><!-- top section -->	53	</div><!-- top section -->
54	<div class="top">	54	<div class="top">
55	<span>Focus</span>	55	<span>Focus</span>
56	<span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span>	56	<span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span>
57	</div><!-- top section -->	57	</div><!-- top section -->
58	</div><!-- app section-->	58	</div><!-- app section-->
59	<div class="author-sec info">	59	<div class="author-sec info">
60	<div class="top">	60	<div class="top">
61	<span>Read</span>	61	<span>Read</span>
62	<span class="name">{{currentSlideData.payload.metaData.readTime}} min</span>	62	<span class="name">{{currentSlideData.payload.metaData.readTime}} min</span>
63	</div><!-- top section -->	63	</div><!-- top section -->
64	<div class="top bt-brd">	64	<div class="top bt-brd">
65	<span>Platform</span>	65	<span>Platform</span>
66	<span class="name">{{currentSlideData.payload.metaData.platForm}}</span>	66	<span class="name">{{currentSlideData.payload.metaData.platForm}}</span>
67	</div><!-- top section -->	67	</div><!-- top section -->
68	</div><!-- info section-->	68	</div><!-- info section-->
69	<div class="u-img-info">	69	<div class="u-img-info">
70	<img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/>	70	<img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/>
71	<img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/>	71	<img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/>
72	<img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/>	72	<img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/>
73	<img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/>	73	<img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/>
74	</div><!-- image info -->	74	</div><!-- image info -->
75	<div class="start">	75	<div class="start">
76	<a href="javascript:void(0);" @click="goNext">	76	<a href="javascript:void(0);" @click="goNext">
77	<img src="../assets/images/arrow-right.svg" />	77	<img src="../assets/images/arrow-right.svg" />
78	<span>Start</span>	78	<span>Start</span>
79	</a>	79	</a>
80	</div><!-- start -->	80	</div><!-- start -->
81	</div><!-- bottom startup -->	81	</div><!-- bottom startup -->
82		82
83	</div>	83	</div>
84	<!-- body wrapper -->	84	<!-- body wrapper -->
85	</div>	85	</div>
86	<!-- main wrapper -->	86	<!-- main wrapper -->
87	</main>	87	</main>
88	</template>	88	</template>
89		89
90	<script>	90	<script>
91	import Vue from "vue";	91	import Vue from "vue";
92	import router from "../router";	92	import router from "../router";
93		93
94	export default {	94	export default {
95	name: "EpisodeIntro",	95	name: "EpisodeIntro",
96		96
97	data() {	97	data() {
98	return {	98	return {
99	allSlide:[],	99	allSlide:[],
100	currentSlideIndex:null,	100	currentSlideIndex:null,
101	currentSlideData:null,	101	currentSlideData:null,
102	};	102	};
103	},	103	},
104	mounted() {	104	mounted() {
105	var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);	105	var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
106	if (allSlideData) {	106	if (allSlideData) {
107	this.allSlide = JSON.parse(allSlideData);	107	this.allSlide = JSON.parse(allSlideData);
108	this.getCurrentSlideData();	108	this.getCurrentSlideData();
109	}	109	}
110		110
111	},	111	},
112	methods: {	112	methods: {
113	getCurrentSlideData(){	113	getCurrentSlideData(){
114	var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);	114	var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
115	this.currentSlideIndex = i;	115	this.currentSlideIndex = i;
116	this.currentSlideData = this.allSlide[i]	116	this.currentSlideData = this.allSlide[i]
117	console.log("currentSlideData",this.currentSlideData)	117	console.log("currentSlideData",this.currentSlideData)
118		118
119	},	119	},
120	goNext(){	120	goNext(){
121	this.currentSlideIndex++	121	this.currentSlideIndex++
122	this.$router.push({	122	this.$router.push({
123	name: this.allSlide[this.currentSlideIndex].ur,	123	name: this.allSlide[this.currentSlideIndex].ur,
124	params: {	124	params: {
125	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	125	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
126	slideId: this.allSlide[this.currentSlideIndex].slideId,	126	slideId: this.allSlide[this.currentSlideIndex].slideId,
127	},	127	},
128	});	128	});
129		129
130	},	130	},
131	goBack(){	131	goBack(){
132		132
133	},	133	},
134	goToLogin() {	134	goToLogin() {
135	this.$router.push("/");	135	this.$router.push("/login");
136	},	136	},
137	goToSignUp() {	137	goToSignUp() {
138	this.$router.push("/signup");	138	this.$router.push("/");
139	},	139	},
140		140
141	createString(list){	141	createString(list){
142	var name = "";	142	var name = "";
143	list.forEach(element => {	143	list.forEach(element => {
144	name = name+','+element;	144	name = name+','+element;
145	});	145	});
146		146
147	console.log("name is",name);	147	console.log("name is",name);
148	return name.substring(1);;	148	return name.substring(1);;
149	}	149	}
150		150
151	},	151	},
152	};	152	};
153	</script>	153	</script>
154	<style >	154	<style >
155	.ellipsis {	155	.ellipsis {
156	text-overflow: ellipsis;	156	text-overflow: ellipsis;
157	white-space: nowrap;	157	white-space: nowrap;
158	overflow: hidden;	158	overflow: hidden;
159	}	159	}
160	</style>	160	</style>

src/components/Insight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid insights-wrp">	3	<div class="container-fluid insights-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="#"><img src="../assets/images/logo.png" /></a>	5	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png" /></a>
6	<div class="user-profile-photo insights-profile">	6	<div class="user-profile-photo insights-profile">
7	<a href="#"><img src="../assets/images/user.png" /></a>	7	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
8	</div>	8	</div>
9	</nav><!-- menu wrapper -->	9	</nav><!-- menu wrapper -->
10	<div class="clearfix"></div>	10	<div class="clearfix"></div>
11	<div class="row">	11	<div class="row">
12	<div class="col-lg-12">	12	<div class="col-lg-12">
13	<form class="insights-searh">	13	<form class="insights-searh">
14	<div class="form-group">	14	<div class="form-group">
15	<input type="text" class="form-control" value="" placeholder="Search Insights Library" id="fname">	15	<input type="text" class="form-control" value="" placeholder="Search Insights Library" id="fname">
16	<a href="#"><img src="../assets/images//search-icon.svg" /></a>	16	<a href="javascript:void(0);"><img src="../assets/images//search-icon.svg" /></a>
17	</div>	17	</div>
18	</form>	18	</form>
19	</div>	19	</div>
20	</div><!-- tab style -->	20	</div><!-- tab style -->
21	<div class="row">	21	<div class="row">
22	<div class="col-lg-7 mr-auto ml-auto">	22	<div class="col-lg-7 mr-auto ml-auto">
23	<div class="insights-border"><span>or Filter by</span></div>	23	<div class="insights-border"><span>or Filter by</span></div>
24	<div class="insights-list-filter">	24	<div class="insights-list-filter">
25	<ul>	25	<ul>
26	<li><a href="" class="lavender-blue-bg">Pricing</a></li>	26	<li><a href="" class="lavender-blue-bg">Pricing</a></li>
27	<li><a href="" class="golden-tainoi-bg">Design</a></li>	27	<li><a href="" class="golden-tainoi-bg">Design</a></li>
28	<li><a href="" class="red-orange-bg">Marketing</a></li>	28	<li><a href="" class="red-orange-bg">Marketing</a></li>
29	<li><a href="" class="morning-glory-bg">Product</a></li>	29	<li><a href="" class="morning-glory-bg">Product</a></li>
30	<li><a href="" class="dark-green-copper-bg">Psychology</a></li>	30	<li><a href="" class="dark-green-copper-bg">Psychology</a></li>
31	<li><a href="" class="red-orange-bg">Marketing</a></li>	31	<li><a href="" class="red-orange-bg">Marketing</a></li>
32	<li><a href="" class="morning-glory-bg">Product</a></li>	32	<li><a href="" class="morning-glory-bg">Product</a></li>
33	<li><a href="" class="dark-green-copper-bg">Psychology</a></li>	33	<li><a href="" class="dark-green-copper-bg">Psychology</a></li>
34	</ul>	34	</ul>
35	</div>	35	</div>
36	</div>	36	</div>
37	</div>	37	</div>
38	<div class="row">	38	<div class="row">
39	<div class="col-lg-4 insight-mb-spc">	39	<div class="col-lg-4 insight-mb-spc">
40	<div class="insights-products radical-red-border">	40	<div class="insights-products radical-red-border">
41	<h3 class="radical-red-col">PRODUCT Insight <a href="#"><img src="../assets/images/radical-red-icon.svg"></a></h3>	41	<h3 class="radical-red-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/radical-red-icon.svg"></a></h3>
42	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	42	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
43	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	43	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
44	</div>	44	</div>
45	</div>	45	</div>
46	<div class="col-lg-4 insight-mb-spc">	46	<div class="col-lg-4 insight-mb-spc">
47	<div class="insights-products selective-yellow-border">	47	<div class="insights-products selective-yellow-border">
48	<h3 class="selective-yellow-col">PRODUCT Insight <a href="#"><img src="../assets/images/selective-yellow-icon.svg"></a></h3>	48	<h3 class="selective-yellow-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/selective-yellow-icon.svg"></a></h3>
49	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	49	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
50	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	50	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
51	</div>	51	</div>
52	</div>	52	</div>
53	<div class="col-lg-4 insight-mb-spc">	53	<div class="col-lg-4 insight-mb-spc">
54	<div class="insights-products lavender-blue-border">	54	<div class="insights-products lavender-blue-border">
55	<h3 class="lavender-blue-col">PRODUCT Insight <a href="#"><img src="../assets/images/lavender-blue-icon.svg"></a></h3>	55	<h3 class="lavender-blue-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/lavender-blue-icon.svg"></a></h3>
56	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	56	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
57	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	57	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
58	</div>	58	</div>
59	</div>	59	</div>
60	<div class="col-lg-4 insight-mb-spc">	60	<div class="col-lg-4 insight-mb-spc">
61	<div class="insights-products dark-green-copper-border">	61	<div class="insights-products dark-green-copper-border">
62	<h3 class="dark-green-copper-col">PRODUCT Insight <a href="#"><img src="../assets/images/dark-green-copper-icon.svg"></a></h3>	62	<h3 class="dark-green-copper-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/dark-green-copper-icon.svg"></a></h3>
63	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	63	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
64	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	64	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
65	</div>	65	</div>
66	</div>	66	</div>
67	<div class="col-lg-4 insight-mb-spc">	67	<div class="col-lg-4 insight-mb-spc">
68	<div class="insights-products purple-heart-border">	68	<div class="insights-products purple-heart-border">
69	<h3 class="purple-heart-col">PRODUCT Insight <a href="#"><img src="../assets/images/purple-heart-icon.svg"></a></h3>	69	<h3 class="purple-heart-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/purple-heart-icon.svg"></a></h3>
70	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	70	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
71	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	71	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
72	</div>	72	</div>
73	</div>	73	</div>
74	<div class="col-lg-4 insight-mb-spc">	74	<div class="col-lg-4 insight-mb-spc">
75	<div class="insights-products silver-border">	75	<div class="insights-products silver-border">
76	<h3 class="silver-col">PRODUCT Insight <a href="#"><img src="../assets/images/silver-icon.svg"></a></h3>	76	<h3 class="silver-col">PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/silver-icon.svg"></a></h3>
77	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	77	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
78	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>	78	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in...</p>
79	</div>	79	</div>
80	</div>	80	</div>
81	</div>	81	</div>
82	<!-- body wrapper -->	82	<!-- body wrapper -->
83	</div><!-- main wrapper -->	83	</div><!-- main wrapper -->
84	<!-- main wrapper -->	84	<!-- main wrapper -->
85	</main>	85	</main>
86	</template>	86	</template>
87		87
88	<script>	88	<script>
89	import Vue from "vue";	89	import Vue from "vue";
90	import router from "../router";	90	import router from "../router";
91		91
92	export default {	92	export default {
93	name: "Insight",	93	name: "Insight",
94		94
95	data() {	95	data() {
96	return {};	96	return {};
97	},	97	},
98	mounted() {},	98	mounted() {},
99	methods: {	99	methods: {
100	goToLogin() {	100	goToLogin() {
101	this.$router.push("/");	101	this.$router.push("/login");
102	},	102	},
103	goToSignUp() {	103	goToSignUp() {
104	this.$router.push("/signup");	104	this.$router.push("/");
105	},	105	},
106		106
107	},	107	},
108	};	108	};
109	</script>	109	</script>
110		110

src/components/LandingPage.vue

Diff comments View file @56f4b75

 <template>
   <main class="landing-page">
     <div class="container-fluid main-wrp">
       <nav class="navbar navbar-expand-sm spotLight-nav">
-        <a class="navbar-brand" href="#"
+        <a class="navbar-brand" href="javascript:void(0);"
           ><img src="../assets/images/logo.png"
         /></a>
         <button
           class="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarsExample03"
           aria-controls="navbarsExample03"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" href="#">About</a>
+              <a class="nav-link" href="javascript:void(0);">About</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Masterclass</a>
+              <a class="nav-link" href="javascript:void(0);">Masterclass</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Stories</a>
+              <a class="nav-link" href="javascript:void(0);">Stories</a>
             </li>
             <li class="nav-item spotLight-img">
-              <a class="nav-link" href="#"
+              <a class="nav-link" href="javascript:void(0);"
                 ><img src="../assets/images/SPOTLight.svg"
               /></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Library</a>
+              <a class="nav-link" href="javascript:void(0);">Library</a>
             </li>
           </ul>
         </div>
       </nav>
       <!-- menu wrapper -->
          <div class="sign-wrp">
       <div class="row col-reverse">
         <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
         <!-- users land image -->
         <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
           <h1 class="welcome-hd-back">
-            Welcome <br />
+            we’re stoked
-            back
+you’re back!
           </h1>
         </div>
         <!-- users land image -->
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-layout signup-frm-spc">
-            <form>
+            <form v-on:keyup.enter="loginWIthEmail">
-              <h5>LogIn using</h5>
+              <h5>Log In using</h5>
               <div class="social-login">
                 <ul>
                   <li>
-                    <a @click="login"><img src="../assets/images/google.svg" /></a>
+                    <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
                   </li>
                   <li>
-                    <a @click="login"><img src="../assets/images/linkdin.svg" /></a>
+                    <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
                   </li>
                   <li>
-                    <a @click="login"><img src="../assets/images/twitter.svg" /></a>
+                    <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
                   </li>
                 </ul>
               </div>
-              <h5>or LogIn with email</h5>
+              <h5>or Log In with email</h5>
               <div class="fill-form">
                 <label for="inputEmail" class="sr-only">Email address</label>
                 <input
                   type="email"
                   id="inputEmail"
                   class="form-control"
                   placeholder="Your Email ID"
                   v-model="userData.email"
                 />
                 <label for="inputPassword" class="sr-only">Password</label>
                 <input
                   type="password"
                   id="inputPassword"
                   class="form-control"
                   placeholder="Password"
                   v-model="userData.password"
                 />
-                <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="loginWIthEmail">
+                <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit"
+ @click="loginWIthEmail">
                   <img src="../assets/images/key.svg" /> Log In to your account
                 </a>
                 <p class="forget-pass light-font-weight">
-                  Forgot Password? <a @click="goToReset">Reset</a>
+                 Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a>
                 </p>
-                <h3 class="ft-normal">Don’t have an account? <a @click="goToSignUp">SignUp</a></h3>
+                <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3>
               </div>
             </form>
           </div>
         </div>
         <!-- sign up -->
       </div>  </div>
       <!-- body wrapper -->
     </div>
   </main>
 </template>
 <script>
 import Vue from "vue";
 import router from "../router";
 import $ from "jquery";
 import axios from "axios";
 export default {
   name: "LandingPage",
   data() {
     return {
       loggedinFlag: false,
       userData:{},
     };
   },
    mounted() {
     // this.$auth.logout();
     localStorage.removeItem("spotlight_usertoken");
     localStorage.removeItem("spotlight_email");
   },
   methods: {
      login() {
       this.$auth.loginWithRedirect();
     },
     goToSignUp(){
-      this.$router.push("/signup");
+      this.$router.push("/");
     },
     goToReset() {
       this.$router.push("/reset");
     },
      loginWIthEmail(){
          axios
         .post("/login", this.userData)
         .then((response) => {
            console.log("login- response",response)
            this.$toaster.success(response.data.message)
             if(response.data.status == 'success'){
                 localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
                 this.$router.push("/profile");
             }
         })
         .catch( (error) =>{
           if (error.response) {
             this.$toaster.error(error.response.data.message)
             if(error.response.data.message == 'Email Not Verified'){
                localStorage.setItem('spotlight_email', this.userData.email);
                 this.$router.push({ name: 'Otp', params: { flag: true }});
             }
           }
         });
     }
   },
 };
 </script>
 <style>
 .light-font-weight {
-  font-weight: 400 !important;
+  font-weight: 500 !important;
+}
+.no-underline{
+  text-decoration: none;
 }
 </style>

src/components/NoScreenshotSingleAuthor.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"	5	<a class="navbar-brand" href="javascript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="#"><img src="../assets/images/lock.svg" /></a>	22	<a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a>
23	</div>	23	</div>
24	</nav>	24	</nav>
25	<!-- menu wrapper -->	25	<!-- menu wrapper -->
26	<div class="intro-startup">	26	<div class="intro-startup">
27		27
28	<!-- chat box -->	28	<!-- chat box -->
29	<div class="bounce-board-wrp" id="cht_box_close">	29	<div class="bounce-board-wrp" id="cht_box_close">
30	<div class="inner-wrp-bc">	30	<div class="inner-wrp-bc">
31	<div class="bc-top-head">	31	<div class="bc-top-head">
32	<span class="bc-head">	32	<span class="bc-head">
33	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	33	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
34	</span>	34	</span>
35	<div class="action-sort">	35	<div class="action-sort">
36	<span class="sort-by">SORT BY</span>	36	<span class="sort-by">SORT BY</span>
37	<div class="btn-group">	37	<div class="btn-group">
38	<button	38	<button
39	type="button"	39	type="button"
40	class="bc-sort-list dropdown-toggle"	40	class="bc-sort-list dropdown-toggle"
41	data-toggle="dropdown"	41	data-toggle="dropdown"
42	aria-haspopup="true"	42	aria-haspopup="true"
43	aria-expanded="false"	43	aria-expanded="false"
44	>	44	>
45	BEST	45	BEST
46	</button>	46	</button>
47	<div class="dropdown-menu short_by">	47	<div class="dropdown-menu short_by">
48	<a class="dropdown-item" href="javasript:void(0);"	48	<a class="dropdown-item" href="javasript:void(0);"
49	>BEST 1</a	49	>BEST 1</a
50	>	50	>
51	<a class="dropdown-item" href="javasript:void(0);"	51	<a class="dropdown-item" href="javasript:void(0);"
52	>BEST 2</a	52	>BEST 2</a
53	>	53	>
54	<a class="dropdown-item" href="javasript:void(0);"	54	<a class="dropdown-item" href="javasript:void(0);"
55	>BEST 3</a	55	>BEST 3</a
56	>	56	>
57	</div>	57	</div>
58	</div>	58	</div>
59	<a	59	<a
60	href="javasript:void(0);"	60	href="javasript:void(0);"
61	@click="chtbox_close"	61	@click="chtbox_close"
62	class="close_chat_bx"	62	class="close_chat_bx"
63	><img src="../assets/images/close.png" alt="close" /></a	63	><img src="../assets/images/close.png" alt="close" /></a
64	><!-- close -->	64	><!-- close -->
65	</div>	65	</div>
66	<!-- action sort -->	66	<!-- action sort -->
67	</div>	67	</div>
68	<!-- top head -->	68	<!-- top head -->
69	<div class="bounce-board-body">	69	<div class="bounce-board-body">
70		70
71	<!-- all user comments -->	71	<!-- all user comments -->
72	<ul class="bounced-user-comments">	72	<ul class="bounced-user-comments">
73	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	73	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
74	<div class="bc_brd_l"></div>	74	<div class="bc_brd_l"></div>
75	<!-- border -->	75	<!-- border -->
76	<div class="parent-full-width">	76	<div class="parent-full-width">
77	<div class="full-width">	77	<div class="full-width">
78	<div class="b-user-head">	78	<div class="b-user-head">
79	<img :src="cmnt.user.profilePic" />	79	<img :src="cmnt.user.profilePic" />
80	<span class="head-content">{{ cmnt.user.name }} </span>	80	<span class="head-content">{{ cmnt.user.name }} </span>
81	<ul>	81	<ul>
82	<li>	82	<li>
83	<span></span	83	<span></span
84	><img src="../assets/images/u-info-icon.png" />{{	84	><img src="../assets/images/u-info-icon.png" />{{
85	cmnt.user.karmaPoints	85	cmnt.user.karmaPoints
86	}}pts	86	}}pts
87	</li>	87	</li>
88	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>	88	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
89	</ul>	89	</ul>
90	</div>	90	</div>
91	<!-- header -->	91	<!-- header -->
92	<p>	92	<p>
93	{{ cmnt.comment }}	93	{{ cmnt.comment }}
94	</p>	94	</p>
95	<div class="joined_wrapper">	95	<div class="joined_wrapper">
96	<ul class="joined-info info_bc_spc">	96	<ul class="joined-info info_bc_spc">
97	<li>	97	<li>
98	<img src="../assets/images/purple-heart.png" />	98	<img src="../assets/images/purple-heart.png" />
99	</li>	99	</li>
100	<li><a href="javasript:void(0);"> 0</a></li>	100	<li><a href="javasript:void(0);"> 0</a></li>
101	<li class="comment-spc">	101	<li class="comment-spc">
102	<img src="../assets/images/purple-comment.png" />	102	<img src="../assets/images/purple-comment.png" />
103	</li>	103	</li>
104	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>	104	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></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"></textarea>	121	<textarea v-model="comment"></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 href="javasript:void(0);" class="discard_bt"	129	<a href="javasript:void(0);" class="discard_bt"
130	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"	130	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
131	/></a>	131	/></a>
132	</div>	132	</div>
133	</div>	133	</div>
134	<!-- parent -->	134	<!-- parent -->
135	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">	135	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
136	<div class="full-width">	136	<div class="full-width">
137	<div class="b-user-head">	137	<div class="b-user-head">
138	<img :src="childCmnt.user.profilePic" />	138	<img :src="childCmnt.user.profilePic" />
139	<span class="head-content">{{childCmnt.user.name }} </span>	139	<span class="head-content">{{childCmnt.user.name }} </span>
140	<ul>	140	<ul>
141	<li>	141	<li>
142	<span></span	142	<span></span
143	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts	143	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
144	</li>	144	</li>
145	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>	145	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
146	</ul>	146	</ul>
147	</div>	147	</div>
148	<p>	148	<p>
149	{{childCmnt.comment}}	149	{{childCmnt.comment}}
150	</p>	150	</p>
151	<div class="joined_wrapper">	151	<div class="joined_wrapper">
152	<ul class="joined-info info_bc_spc">	152	<ul class="joined-info info_bc_spc">
153	<li>	153	<li>
154	<img src="../assets/images/purple-heart.png" />	154	<img src="../assets/images/purple-heart.png" />
155	</li>	155	</li>
156	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>	156	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
157		157
158	</ul>	158	</ul>
159		159
160	</div>	160	</div>
161	</div>	161	</div>
162	</div>	162	</div>
163	<!-- eree -->	163	<!-- eree -->
164		164
165	<!-- comments footer -->	165	<!-- comments footer -->
166	</li>	166	</li>
167	</ul>	167	</ul>
168	</div>	168	</div>
169	<!-- bounce board body -->	169	<!-- bounce board body -->
170	<div class="comments-footer" v-if="parentInput">	170	<div class="comments-footer" v-if="parentInput">
171	<textarea v-model="comment"></textarea>	171	<textarea v-model="comment"></textarea>
172	<div class="comments-footer-wrp">	172	<div class="comments-footer-wrp">
173	<a	173	<a
174	href="javasript:void(0);"	174	href="javasript:void(0);"
175	class="add_comments_chat"	175	class="add_comments_chat"
176	@click="createComment"	176	@click="createComment"
177	><img src="../assets/images/add-comment.svg" /> Comment</a	177	><img src="../assets/images/add-comment.svg" /> Comment</a
178	>	178	>
179	</div>	179	</div>
180	</div>	180	</div>
181	<!-- comments footer -->	181	<!-- comments footer -->
182	</div>	182	</div>
183	</div>	183	</div>
184	<!-- bounceboard wrp -->	184	<!-- bounceboard wrp -->
185	<!-- chat box -->	185	<!-- chat box -->
186		186
187		187
188	<div class="single-author-comments">	188	<div class="single-author-comments">
189	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->	189	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
190	<div class="ct-l-400">	190	<div class="ct-l-400">
191	<div class="single-author-li-comments">	191	<div class="single-author-li-comments">
192	<div class="a-intro-comments right-corner">	192	<div class="a-intro-comments right-corner">
193	<p>	193	<p>
194	{{currentSlideData.payload.comments[0].comment}}	194	{{currentSlideData.payload.comments[0].comment}}
195	</p>	195	</p>
196	<ul class="rly-comment-set">	196	<ul class="rly-comment-set">
197	<li>	197	<li>
198	<img src="../assets/images/color-heart.svg" />	198	<img src="../assets/images/color-heart.svg" />
199	<a href="javascript:void(0);">0</a>	199	<a href="javascript:void(0);">0</a>
200	</li>	200	</li>
201	<li>	201	<li>
202	<img src="../assets/images/rply.svg" />	202	<img src="../assets/images/rply.svg" />
203	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	203	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
204	</li>	204	</li>
205	</ul>	205	</ul>
206	</div>	206	</div>
207	<!-- comments box -->	207	<!-- comments box -->
208	</div>	208	</div>
209	</div>	209	</div>
210	<img	210	<img
211	class="s-user-comments m-0"	211	class="s-user-comments m-0"
212	:src="currentSlideData.payload.metaData.authorImage"	212	:src="currentSlideData.payload.metaData.authorImage"
213	/>	213	/>
214	<div class="comments-a-wrp ct-width">	214	<div class="comments-a-wrp ct-width">
215	<div class="single-author-li-comments">	215	<div class="single-author-li-comments">
216	<div class="a-intro-comments">	216	<div class="a-intro-comments">
217	<p>	217	<p>
218	{{currentSlideData.payload.comments[0].comment}}	218	{{currentSlideData.payload.comments[0].comment}}
219	</p>	219	</p>
220	<ul class="rly-comment-set">	220	<ul class="rly-comment-set">
221	<li>	221	<li>
222	<img src="../assets/images/color-heart.svg" />	222	<img src="../assets/images/color-heart.svg" />
223	<a href="javascript:void(0);">0</a>	223	<a href="javascript:void(0);">0</a>
224	</li>	224	</li>
225	<li>	225	<li>
226	<img src="../assets/images/rply.svg" />	226	<img src="../assets/images/rply.svg" />
227	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	227	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
228	</li>	228	</li>
229	</ul>	229	</ul>
230	</div>	230	</div>
231	<!-- comments box -->	231	<!-- comments box -->
232	</div>	232	</div>
233	<!-- single author comments -->	233	<!-- single author comments -->
234	<div class="single-author-li-comments">	234	<div class="single-author-li-comments">
235	<div class="a-intro-comments">	235	<div class="a-intro-comments">
236	<p>	236	<p>
237	{{currentSlideData.payload.comments[1].comment}}	237	{{currentSlideData.payload.comments[1].comment}}
238	</p>	238	</p>
239	<ul class="rly-comment-set">	239	<ul class="rly-comment-set">
240	<li>	240	<li>
241	<img src="../assets/images/color-heart.svg" />	241	<img src="../assets/images/color-heart.svg" />
242	<a href="javascript:void(0);">0</a>	242	<a href="javascript:void(0);">0</a>
243	</li>	243	</li>
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="open_ct_box">Reply</a>	246	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
247	</li>	247	</li>
248	</ul>	248	</ul>
249	</div>	249	</div>
250	<!-- comments box -->	250	<!-- comments box -->
251	</div>	251	</div>
252	<div class="single-author-li-comments">	252	<div class="single-author-li-comments">
253	<div class="a-intro-comments">	253	<div class="a-intro-comments">
254	<p>	254	<p>
255	{{currentSlideData.payload.comments[2].comment}}	255	{{currentSlideData.payload.comments[2].comment}}
256	</p>	256	</p>
257	<!-- <p>	257	<!-- <p>
258	Before I dive in to showcase my observations and userflows	258	Before I dive in to showcase my observations and userflows
259	that stood out to me in the app, I want to call out that the	259	that stood out to me in the app, I want to call out that the
260	situation or time-frame in which I was using the app is	260	situation or time-frame in which I was using the app is
261	extremely important for what I am about to show as well.	261	extremely important for what I am about to show as well.
262	</p> -->	262	</p> -->
263	<ul class="rly-comment-set">	263	<ul class="rly-comment-set">
264	<li>	264	<li>
265	<img src="../assets/images/color-heart.svg" />	265	<img src="../assets/images/color-heart.svg" />
266	<a href="#">0</a>	266	<a href="javascript:void(0);">0</a>
267	</li>	267	</li>
268	<li>	268	<li>
269	<img src="../assets/images/rply.svg" />	269	<img src="../assets/images/rply.svg" />
270	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	270	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
271	</li>	271	</li>
272	</ul>	272	</ul>
273	</div>	273	</div>
274	<!-- comments box -->	274	<!-- comments box -->
275	</div>	275	</div>
276	<!-- single author comments -->	276	<!-- single author comments -->
277	<!-- <div class="a-intro-comments custom-selected-author-style">	277	<!-- <div class="a-intro-comments custom-selected-author-style">
278	<img src="../assets/images/org-rect.svg" class="rect" />	278	<img src="../assets/images/org-rect.svg" class="rect" />
279	<div class="top-wrp">	279	<div class="top-wrp">
280	Product Insight <a href="#"><img src="../assets/images/org-link.svg" /></a>	280	Product Insight <a href="javascript:void(0);"><img src="../assets/images/org-link.svg" /></a>
281	</div>	281	</div>
282	<div class="top-head">Automate your customer support for better engagement</div>	282	<div class="top-head">Automate your customer support for better engagement</div>
283	<p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p>	283	<p>Only 9% of consumers believe it’s acceptable to wait up to one minute to speak with an agent. Automated service is a critical step in giving customers a platform to become self-sufficient. </p>
284		284
285		285
286	</div> -->	286	</div> -->
287	<!-- comments box -->	287	<!-- comments box -->
288	</div>	288	</div>
289	</div>	289	</div>
290	<!-- single author comments -->	290	<!-- single author comments -->
291	<div class="footer-nav">	291	<div class="footer-nav">
292	<div class="footer-top white-bg">	292	<div class="footer-top white-bg">
293	<div class="row">	293	<div class="row">
294	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	294	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
295	<div class="row h-100p">	295	<div class="row h-100p">
296	<div	296	<div
297	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	297	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
298	>	298	>
299	<div class="ft-comments-group testi-photos-ct">	299	<div class="ft-comments-group testi-photos-ct">
300	<div class="c-with-photos">	300	<div class="c-with-photos">
301	<span class="count-comments"	301	<span class="count-comments"
302	>{{ commentList.length - 1 }}+ Comments</span	302	>{{ commentList.length - 1 }}+ Comments</span
303	><!-- count commets -->	303	><!-- count commets -->
304	<ul class="comments-photos">	304	<ul class="comments-photos">
305	<!-- <li><img src="../assets/images/c-photo-1.png" /></li>	305	<!-- <li><img src="../assets/images/c-photo-1.png" /></li>
306	<li><img src="../assets/images/c-photo-2.png" /></li> -->	306	<li><img src="../assets/images/c-photo-2.png" /></li> -->
307	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->	307	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
308	<!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> -->	308	<!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> -->
309	</ul>	309	</ul>
310	<!-- comment photos -->	310	<!-- comment photos -->
311	</div>	311	</div>
312	<div class="comments-detail all-c-space">	312	<div class="comments-detail all-c-space">
313	<span	313	<span
314	>{{ commentList[commentList.length - 1].user.name }}	314	>{{ commentList[commentList.length - 1].user.name }}
315	<a href="javascript:void(0);" @click="open_ct_box"	315	<a href="javascript:void(0);" @click="open_ct_box"
316	>View All</a	316	>View All</a
317	></span	317	></span
318	>	318	>
319	<p>	319	<p>
320	<!-- I wonder what the difference between “Dunzo Assistant”	320	<!-- I wonder what the difference between “Dunzo Assistant”
321	and “Pickup and Drop... -->	321	and “Pickup and Drop... -->
322	{{ commentList[commentList.length - 1].comment }}	322	{{ commentList[commentList.length - 1].comment }}
323	</p>	323	</p>
324	</div>	324	</div>
325	<!-- comments detail -->	325	<!-- comments detail -->
326	</div>	326	</div>
327	<!-- comments Group -->	327	<!-- comments Group -->
328	</div>	328	</div>
329	</div>	329	</div>
330	</div>	330	</div>
331	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	331	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
332	<div class="comment-frm no-c-frm">	332	<div class="comment-frm no-c-frm">
333	<div class="row">	333	<div class="row">
334	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	334	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
335	<div class="form-group frm-wdth addfrm-spc">	335	<div class="form-group frm-wdth addfrm-spc">
336	<input	336	<input
337	type="text"	337	type="text"
338	class="form-control"	338	class="form-control"
339	placeholder="Kathy, Something on your mind?"	339	placeholder="Kathy, Something on your mind?"
340	id="open_ct_box"	340	id="open_ct_box"
341	v-model="comment"	341	v-model="comment"
342	/>	342	/>
343	</div>	343	</div>
344	</div>	344	</div>
345	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	345	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
346	<a	346	<a
347	href="javascript:void(0);"	347	href="javascript:void(0);"
348	@click="createComment"	348	@click="createComment"
349	class="add-comment"	349	class="add-comment"
350	><img src="../assets/images/add-comment.svg" />	350	><img src="../assets/images/add-comment.svg" />
351	Comment</a	351	Comment</a
352	>	352	>
353	</div>	353	</div>
354	</div>	354	</div>
355	<!-- comment from -->	355	<!-- comment from -->
356	</div>	356	</div>
357	</div>	357	</div>
358	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	358	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
359	<ul class="top-intro-bt">	359	<ul class="top-intro-bt">
360	<li>	360	<li>
361	<a href="javascript:void(0);" @click="goBack"	361	<a href="javascript:void(0);" @click="goBack"
362	><img src="../assets/images/skip-prev.svg" /> Prev</a	362	><img src="../assets/images/skip-prev.svg" /> Prev</a
363	>	363	>
364	</li>	364	</li>
365	<li>	365	<li>
366	<a href="javascript:void(0);" @click="goNext"	366	<a href="javascript:void(0);" @click="goNext"
367	><img src="../assets/images/skip-next.svg" /> Skip to next	367	><img src="../assets/images/skip-next.svg" /> Skip to next
368	slide</a	368	slide</a
369	>	369	>
370	</li>	370	</li>
371	</ul>	371	</ul>
372	</div>	372	</div>
373	<!-- buttons list -->	373	<!-- buttons list -->
374	</div>	374	</div>
375	</div>	375	</div>
376	<!-- footer top -->	376	<!-- footer top -->
377	<div class="footer-bottom">	377	<div class="footer-bottom">
378	<ul>	378	<ul>
379	<li class="active"></li>	379	<li class="active"></li>
380	<li></li>	380	<li></li>
381	</ul>	381	</ul>
382	</div>	382	</div>
383	<!-- footer top -->	383	<!-- footer top -->
384	</div>	384	</div>
385	<!-- footer -->	385	<!-- footer -->
386	</div>	386	</div>
387	<!-- body wrapper -->	387	<!-- body wrapper -->
388	</div>	388	</div>
389	<!-- main wrapper -->	389	<!-- main wrapper -->
390	</main>	390	</main>
391	</template>	391	</template>
392		392
393	<script>	393	<script>
394	import Vue from "vue";	394	import Vue from "vue";
395	import router from "../router";	395	import router from "../router";
396	import axios from "axios";	396	import axios from "axios";
397	import moment from 'moment';	397	import moment from 'moment';
398		398
399	export default {	399	export default {
400	name: "noscreenshotSingleautho",	400	name: "noscreenshotSingleautho",
401		401
402	data() {	402	data() {
403	return {	403	return {
404	allSlide: [],	404	allSlide: [],
405	currentSlideIndex: null,	405	currentSlideIndex: null,
406	currentSlideData: null,	406	currentSlideData: null,
407	//	407	//
408	usertoken: null,	408	usertoken: null,
409	commentList: [],	409	commentList: [],
410	comment: null,	410	comment: null,
411	parentInput:true,	411	parentInput:true,
412	};	412	};
413	},	413	},
414	mounted() {	414	mounted() {
415	var allSlideData = localStorage.getItem(	415	var allSlideData = localStorage.getItem(
416	"spotlight_slide" + this.$route.params.caseStudyId	416	"spotlight_slide" + this.$route.params.caseStudyId
417	);	417	);
418	if (allSlideData) {	418	if (allSlideData) {
419	this.allSlide = JSON.parse(allSlideData);	419	this.allSlide = JSON.parse(allSlideData);
420	this.getCurrentSlideData();	420	this.getCurrentSlideData();
421	}	421	}
422	var userdata = localStorage.getItem("spotlight_usertoken");	422	var userdata = localStorage.getItem("spotlight_usertoken");
423	if (userdata) {	423	if (userdata) {
424	userdata = JSON.parse(userdata);	424	userdata = JSON.parse(userdata);
425	this.usertoken = userdata.token;	425	this.usertoken = userdata.token;
426	this.getComment();	426	this.getComment();
427	}	427	}
428	},	428	},
429	methods: {	429	methods: {
430	getCurrentSlideData() {	430	getCurrentSlideData() {
431	var i = this.allSlide.findIndex(	431	var i = this.allSlide.findIndex(
432	(slide_) => slide_.slideId == this.$route.params.slideId	432	(slide_) => slide_.slideId == this.$route.params.slideId
433	);	433	);
434	this.currentSlideIndex = i;	434	this.currentSlideIndex = i;
435	this.currentSlideData = this.allSlide[i];	435	this.currentSlideData = this.allSlide[i];
436	console.log("currentSlideData", this.currentSlideData);	436	console.log("currentSlideData", this.currentSlideData);
437	},	437	},
438	goNext() {	438	goNext() {
439	this.currentSlideIndex++;	439	this.currentSlideIndex++;
440	this.$router.push({	440	this.$router.push({
441	name: this.allSlide[this.currentSlideIndex].ur,	441	name: this.allSlide[this.currentSlideIndex].ur,
442	params: {	442	params: {
443	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	443	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
444	slideId: this.allSlide[this.currentSlideIndex].slideId,	444	slideId: this.allSlide[this.currentSlideIndex].slideId,
445	},	445	},
446	});	446	});
447	},	447	},
448	goBack() {	448	goBack() {
449	this.currentSlideIndex--;	449	this.currentSlideIndex--;
450	this.$router.push({	450	this.$router.push({
451	name: this.allSlide[this.currentSlideIndex].ur,	451	name: this.allSlide[this.currentSlideIndex].ur,
452	params: {	452	params: {
453	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	453	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
454	slideId: this.allSlide[this.currentSlideIndex].slideId,	454	slideId: this.allSlide[this.currentSlideIndex].slideId,
455	},	455	},
456	});	456	});
457	},	457	},
458	createComment() {	458	createComment() {
459	console.log("===", this.comment);	459	console.log("===", this.comment);
460	var obj = {	460	var obj = {
461	caseStudyId: this.currentSlideData.caseStudyId,	461	caseStudyId: this.currentSlideData.caseStudyId,
462	slideId: this.currentSlideData.slideId,	462	slideId: this.currentSlideData.slideId,
463	comment: this.comment,	463	comment: this.comment,
464		464
465	};	465	};
466	axios	466	axios
467	.post("/bounceBoard/comment", obj, {	467	.post("/bounceBoard/comment", obj, {
468	headers: {	468	headers: {
469	Authorization: "Bearer " + this.usertoken,	469	Authorization: "Bearer " + this.usertoken,
470	},	470	},
471	})	471	})
472	.then((response) => {	472	.then((response) => {
473	this.comment = null;	473	this.comment = null;
474	this.getComment();	474	this.getComment();
475	console.log(response);	475	console.log(response);
476	})	476	})
477	.catch((error) => {	477	.catch((error) => {
478	if (error.response) {	478	if (error.response) {
479	this.$toaster.error(error.response.data.message);	479	this.$toaster.error(error.response.data.message);
480	}	480	}
481	});	481	});
482	},	482	},
483	createChildComment(cmnt) {	483	createChildComment(cmnt) {
484	console.log(cmnt,"===", this.comment);	484	console.log(cmnt,"===", this.comment);
485	var obj = {	485	var obj = {
486	caseStudyId: this.currentSlideData.caseStudyId,	486	caseStudyId: this.currentSlideData.caseStudyId,
487	slideId: this.currentSlideData.slideId,	487	slideId: this.currentSlideData.slideId,
488	comment: this.comment,	488	comment: this.comment,
489	parentId: cmnt._id,	489	parentId: cmnt._id,
490		490
491	};	491	};
492	axios	492	axios
493	.post("/bounceBoard/comment", obj, {	493	.post("/bounceBoard/comment", obj, {
494	headers: {	494	headers: {
495	Authorization: "Bearer " + this.usertoken,	495	Authorization: "Bearer " + this.usertoken,
496	},	496	},
497	})	497	})
498	.then((response) => {	498	.then((response) => {
499	this.comment = null;	499	this.comment = null;
500	this.discardRply(cmnt);	500	this.discardRply(cmnt);
501	this.getComment();	501	this.getComment();
502	console.log(response);	502	console.log(response);
503	})	503	})
504	.catch((error) => {	504	.catch((error) => {
505	if (error.response) {	505	if (error.response) {
506	this.$toaster.error(error.response.data.message);	506	this.$toaster.error(error.response.data.message);
507	}	507	}
508	});	508	});
509	},	509	},
510	getComment() {	510	getComment() {
511	axios	511	axios
512	.get(	512	.get(
513	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	513	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
514	{	514	{
515	headers: {	515	headers: {
516	Authorization: "Bearer " + this.usertoken,	516	Authorization: "Bearer " + this.usertoken,
517	},	517	},
518	}	518	}
519	)	519	)
520	.then((response) => {	520	.then((response) => {
521	console.log(response.data);	521	console.log(response.data);
522	var comments = [];	522	var comments = [];
523	var keys = Object.keys(response.data.data)	523	var keys = Object.keys(response.data.data)
524	response.data.data	524	response.data.data
525	keys.forEach((key_) => {	525	keys.forEach((key_) => {
526	comments.push(response.data.data[key_])	526	comments.push(response.data.data[key_])
527	});	527	});
528	comments.forEach((coment_)=>{	528	comments.forEach((coment_)=>{
529	coment_.childInput = false;	529	coment_.childInput = false;
530	});	530	});
531	console.log("comments",comments)	531	console.log("comments",comments)
532	this.commentList = comments;	532	this.commentList = comments;
533	})	533	})
534	.catch((error) => console.log(error));	534	.catch((error) => console.log(error));
535	},	535	},
536	dateGenerator(curreDate){	536	dateGenerator(curreDate){
537	var todayDate = moment(new Date(), "DD.MM.YYYY");	537	var todayDate = moment(new Date(), "DD.MM.YYYY");
538	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	538	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
539	var result = todayDate.diff(endDate, 'days');	539	var result = todayDate.diff(endDate, 'days');
540	return result;	540	return result;
541	},	541	},
542	goToLogin() {	542	goToLogin() {
543	this.$router.push("/");	543	this.$router.push("/login");
544	},	544	},
545	goToSignUp() {	545	goToSignUp() {
546	this.$router.push("/signup");	546	this.$router.push("/");
547	},	547	},
548	chtbox_close() {	548	chtbox_close() {
549	$("#cht_box_close").removeClass("cht_close");	549	$("#cht_box_close").removeClass("cht_close");
550	$("#open_ct_box, .c_hide").show();	550	$("#open_ct_box, .c_hide").show();
551	$(".footer-top").addClass("white-bg");	551	$(".footer-top").addClass("white-bg");
552	},	552	},
553	open_ct_box() {	553	open_ct_box() {
554	$("#cht_box_close").addClass("cht_close");	554	$("#cht_box_close").addClass("cht_close");
555	$("#open_ct_box, .c_hide").hide();	555	$("#open_ct_box, .c_hide").hide();
556	$(".footer-top").removeClass("white-bg");	556	$(".footer-top").removeClass("white-bg");
557	},	557	},
558	eachRply(cmnt) {	558	eachRply(cmnt) {
559	cmnt.childInput = true;	559	cmnt.childInput = true;
560	this.parentInput = false;	560	this.parentInput = false;
561	},	561	},
562	discardRply(cmnt) {	562	discardRply(cmnt) {
563	cmnt.childInput = false;	563	cmnt.childInput = false;
564	this.parentInput = true;	564	this.parentInput = true;
565		565
566	},	566	},
567	},	567	},
568	};	568	};
569	//	569	//
570		570
571	</script>	571	</script>
572		572

src/components/NoScreenshotTwoAuthor.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="allMWrp">	18	<div class="allMWrp">
19	<div class="two-author-comments">	19	<div class="two-author-comments">
20	<img src="../assets/images/author-u2.png" class="a2-set" />	20	<img src="../assets/images/author-u2.png" class="a2-set" />
21	<img src="../assets/images/true-dat.png" class="a2true-set" />	21	<img src="../assets/images/true-dat.png" class="a2true-set" />
22		22
23	<div class="two-author-all-comments">	23	<div class="two-author-all-comments">
24	<div class="single-author-li-comments">	24	<div class="single-author-li-comments">
25	<div class="a-intro-comments">	25	<div class="a-intro-comments">
26	<img src="../assets/images/user-2-set.svg" class="user-b-1" />	26	<img src="../assets/images/user-2-set.svg" class="user-b-1" />
27	<p>COVID has accelerated the growth of some sectors in particular. </p>	27	<p>COVID has accelerated the growth of some sectors in particular. </p>
28	<ul class="rly-comment-set">	28	<ul class="rly-comment-set">
29	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	29	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
30	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	30	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
31	</ul>	31	</ul>
32	</div><!-- comments box -->	32	</div><!-- comments box -->
33	</div><!-- single author comments -->	33	</div><!-- single author comments -->
34	<div class="single-author-li-comments ">	34	<div class="single-author-li-comments ">
35	<div class="a-intro-comments all-c-style">	35	<div class="a-intro-comments all-c-style">
36	<img src="../assets/images/user.png" class="all-c-user-b-r" />	36	<img src="../assets/images/user.png" class="all-c-user-b-r" />
37	<p>COVID has accelerated the growth of some sectors in particular. </p>	37	<p>COVID has accelerated the growth of some sectors in particular. </p>
38	<ul class="rly-comment-set">	38	<ul class="rly-comment-set">
39	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	39	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
40	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	40	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
41	</ul>	41	</ul>
42	</div><!-- comments box -->	42	</div><!-- comments box -->
43	</div><!-- single author comments -->	43	</div><!-- single author comments -->
44	<div class="single-author-li-comments">	44	<div class="single-author-li-comments">
45	<div class="a-intro-comments">	45	<div class="a-intro-comments">
46	<img src="../assets/images/user-2-set.svg" class="user-b-1" />	46	<img src="../assets/images/user-2-set.svg" class="user-b-1" />
47	<p>COVID has accelerated the growth of some sectors in particular. </p>	47	<p>COVID has accelerated the growth of some sectors in particular. </p>
48	<ul class="rly-comment-set">	48	<ul class="rly-comment-set">
49	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	49	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
50	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	50	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
51	</ul>	51	</ul>
52	</div><!-- comments box -->	52	</div><!-- comments box -->
53	</div><!-- single author comments -->	53	</div><!-- single author comments -->
54	<div class="single-author-li-comments ">	54	<div class="single-author-li-comments ">
55	<div class="a-intro-comments all-c-style">	55	<div class="a-intro-comments all-c-style">
56	<img src="../assets/images/user.png" class="all-c-user-b-r" />	56	<img src="../assets/images/user.png" class="all-c-user-b-r" />
57	<p>COVID has accelerated the growth of some sectors in particular. </p>	57	<p>COVID has accelerated the growth of some sectors in particular. </p>
58	<ul class="rly-comment-set">	58	<ul class="rly-comment-set">
59	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	59	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
60	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	60	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
61	</ul>	61	</ul>
62	</div><!-- comments box -->	62	</div><!-- comments box -->
63	</div><!-- single author comments -->	63	</div><!-- single author comments -->
64	</div><!-- all comments -->	64	</div><!-- all comments -->
65	</div><!-- two authors comments -->	65	</div><!-- two authors comments -->
66	</div>	66	</div>
67	<div class="footer-nav">	67	<div class="footer-nav">
68	<div class="footer-top white-bg">	68	<div class="footer-top white-bg">
69	<div class="row">	69	<div class="row">
70	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">	70	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
71	<div class="row h-100p">	71	<div class="row h-100p">
72	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">	72	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
73	<ul class="top-intro-bt">	73	<ul class="top-intro-bt">
74	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	74	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
75	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	75	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
76	</ul>	76	</ul>
77	</div>	77	</div>
78	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">	78	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
79	<div class="ft-comments-group">	79	<div class="ft-comments-group">
80	<div class="c-with-photos">	80	<div class="c-with-photos">
81	<span class="count-comments">16+ Comments</span><!-- count commets -->	81	<span class="count-comments">16+ Comments</span><!-- count commets -->
82	<ul class="comments-photos">	82	<ul class="comments-photos">
83	<li><img src="../assets/images/c-photo-1.png" /></li>	83	<li><img src="../assets/images/c-photo-1.png" /></li>
84	<li><img src="../assets/images/c-photo-2.png" /></li>	84	<li><img src="../assets/images/c-photo-2.png" /></li>
85	<li><img src="../assets/images/c-photo-3.png" /></li>	85	<li><img src="../assets/images/c-photo-3.png" /></li>
86	</ul><!-- comment photos -->	86	</ul><!-- comment photos -->
87	</div>	87	</div>
88	<div class="comments-detail all-c-space">	88	<div class="comments-detail all-c-space">
89	<span>Saudrika commented <a href="#">View All</a></span>	89	<span>Saudrika commented <a href="javascript:void(0);">View All</a></span>
90	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>	90	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>
91	</div><!-- comments detail -->	91	</div><!-- comments detail -->
92		92
93	</div><!-- comments Group -->	93	</div><!-- comments Group -->
94	</div></div>	94	</div></div>
95	</div>	95	</div>
96	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">	96	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
97		97
98	<div class="comment-frm no-c-frm">	98	<div class="comment-frm no-c-frm">
99	<div class="row">	99	<div class="row">
100	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	100	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
101	<div class="form-group frm-wdth addfrm-spc">	101	<div class="form-group frm-wdth addfrm-spc">
102	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	102	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
103	</div></div>	103	</div></div>
104	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	104	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
105	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	105	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
106	</div>	106	</div>
107	</div><!-- comment from -->	107	</div><!-- comment from -->
108	</div> </div></div>	108	</div> </div></div>
109	</div><!-- footer top -->	109	</div><!-- footer top -->
110	<div class="footer-bottom">	110	<div class="footer-bottom">
111	<ul>	111	<ul>
112	<li class="active"></li>	112	<li class="active"></li>
113	<li></li>	113	<li></li>
114	</ul>	114	</ul>
115	</div><!-- footer top -->	115	</div><!-- footer top -->
116	</div><!-- footer -->	116	</div><!-- footer -->
117		117
118	</div>	118	</div>
119	<!-- body wrapper -->	119	<!-- body wrapper -->
120	</div>	120	</div>
121	<!-- main wrapper -->	121	<!-- main wrapper -->
122	</main>	122	</main>
123	</template>	123	</template>
124		124
125	<script>	125	<script>
126	import Vue from "vue";	126	import Vue from "vue";
127	import router from "../router";	127	import router from "../router";
128		128
129	export default {	129	export default {
130	name: "NoScreenshotTwoAuthor",	130	name: "NoScreenshotTwoAuthor",
131		131
132	data() {	132	data() {
133	return {};	133	return {};
134	},	134	},
135	mounted() {},	135	mounted() {},
136	methods: {	136	methods: {
137	goToLogin() {	137	goToLogin() {
138	this.$router.push("/");	138	this.$router.push("/login");
139	},	139	},
140	goToSignUp() {	140	goToSignUp() {
141	this.$router.push("/signup");	141	this.$router.push("/");
142	},	142	},
143		143
144	},	144	},
145	};	145	};
146	</script>	146	</script>
147		147

src/components/Otp.vue

Diff comments View file @56f4b75

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="#"	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="#">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="#">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="#">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="#"	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="#">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-wrp">
46	<div class="row col-reverse">	46	<div class="row col-reverse">
47	<div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>	47	<div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
48	<!-- users land image -->	48	<!-- users land image -->
49	<div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">	49	<div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
50	<h1 class="welcome-hd-back">	50	<h1 class="welcome-hd-back">
51	Welcome <br />	51	Welcome <br />
52	back	52	back
53	</h1>	53	</h1>
54	</div>	54	</div>
55	<!-- users land image -->	55	<!-- users land image -->
56	<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">	56	<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
57	<div class="form-layout signup-frm-spc">	57	<div class="form-layout signup-frm-spc">
58	<form>	58	<form>
59	<!-- <h5>SignUp Using</h5> -->	59	<!-- <h5>SignUp Using</h5> -->
60	<div class="social-login" style="visibility: hidden">	60	<div class="social-login" style="visibility: hidden">
61	<ul>	61	<ul>
62	<li>	62	<li>
63	<a href="#"><img src="../assets/images/google.svg" /></a>	63	<a href="javascript:void(0);"><img src="../assets/images/google.svg" /></a>
64	</li>	64	</li>
65	<li>	65	<li>
66	<a href="#"><img src="../assets/images/linkdin.svg" /></a>	66	<a href="javascript:void(0);"><img src="../assets/images/linkdin.svg" /></a>
67	</li>	67	</li>
68	<li>	68	<li>
69	<a href="#"><img src="../assets/images/twitter.svg" /></a>	69	<a href="javascript:void(0);"><img src="../assets/images/twitter.svg" /></a>
70	</li>	70	</li>
71	</ul>	71	</ul>
72	</div>	72	</div>
73	<h5>	73	<h5>
74	Please enter the OTP shared to {{email}} to confirm	74	Please enter the OTP shared to {{email}} to confirm
75	your email address	75	your email address
76	</h5>	76	</h5>
77	<div class="fill-form">	77	<div class="fill-form">
78	<label for="inputEmail" class="sr-only">OTP</label>	78	<label for="inputEmail" class="sr-only">OTP</label>
79	<input	79	<input
80	type="text"	80	type="text"
81	id="inputEmail"	81	id="inputEmail"
82	class="form-control"	82	class="form-control"
83	placeholder="Your OTP"	83	placeholder="Your OTP"
84	v-model="otp"	84	v-model="otp"
85		85
86	/>	86	/>
87	<!-- <label for="inputPassword" class="sr-only">Password</label>	87	<!-- <label for="inputPassword" class="sr-only">Password</label>
88	<input type="password" id="inputPassword" class="form-control" placeholder="Password" required> -->	88	<input type="password" id="inputPassword" class="form-control" placeholder="Password" required> -->
89		89
90	<a href="javascript:void(0);" class="btn btn-lg sb-button" @click="verifyOtp">	90	<a href="javascript:void(0);" class="btn btn-lg sb-button" @click="verifyOtp">
91	<img src="../assets/images/check-circle.png" /> Verify Email	91	<img src="../assets/images/check-circle.png" /> Verify Email
92	Address	92	Address
93	</a>	93	</a>
94	<p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail(true)">Resend</a></p>	94	<p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail(true)">Resend</a></p>
95	<!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> -->	95	<!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> -->
96	</div>	96	</div>
97	</form>	97	</form>
98	</div>	98	</div>
99	</div>	99	</div>
100	<!-- sign up -->	100	<!-- sign up -->
101	</div>	101	</div>
102	</div>	102	</div>
103	<!-- body wrapper -->	103	<!-- body wrapper -->
104	</div>	104	</div>
105	</main>	105	</main>
106	</template>	106	</template>
107		107
108	<script>	108	<script>
109	import Vue from "vue";	109	import Vue from "vue";
110	import router from "../router";	110	import router from "../router";
111	import axios from "axios";	111	import axios from "axios";
112		112
113	export default {	113	export default {
114	name: "Otp",	114	name: "Otp",
115		115
116	data() {	116	data() {
117	return {	117	return {
118	email:null,	118	email:null,
119	otp:null,	119	otp:null,
120	};	120	};
121	},	121	},
122	mounted() {	122	mounted() {
123	this.email = localStorage.getItem("spotlight_email");	123	this.email = localStorage.getItem("spotlight_email");
124	console.log("this.$route.params.flag",this.$route.params.flag)	124	console.log("this.$route.params.flag",this.$route.params.flag)
125	if(this.$route.params.flag == true){	125	if(this.$route.params.flag == true){
126	this.ResendEmail(false);	126	this.ResendEmail(false);
127	}	127	}
128		128
129	},	129	},
130	methods: {	130	methods: {
131	goToLogin() {	131	goToLogin() {
132	this.$router.push("/");	132	this.$router.push("/login");
133	},	133	},
134	verifyOtp(){	134	verifyOtp(){
135	axios	135	axios
136	.get(`/verifyEmail?email=${this.email}&otp=${this.otp}`, this.userData)	136	.get(`/verifyEmail?email=${this.email}&otp=${this.otp}`, this.userData)
137	.then((response) => {	137	.then((response) => {
138	console.log("otp response",response);	138	console.log("otp response",response);
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_usertoken', JSON.stringify(response.data.data))	141	localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
142	this.$router.push("/profile");	142	this.$router.push("/profile");
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	ResendEmail(req){	152	ResendEmail(req){
153	axios	153	axios
154	.post("/forgotPassword", {'email':this.email,'forgotPassword':false})	154	.post("/forgotPassword", {'email':this.email,'forgotPassword':false})
155	.then((response) => {	155	.then((response) => {
156	console.log("forgotPassword- response",response)	156	console.log("forgotPassword- response",response)
157	if(req){	157	if(req){
158	this.$toaster.success(response.data.message)	158	this.$toaster.success(response.data.message)
159	}	159	}
160	})	160	})
161	.catch( (error) =>{	161	.catch( (error) =>{
162	if (error.response) {	162	if (error.response) {
163	this.$toaster.error(error.response.data.message)	163	this.$toaster.error(error.response.data.message)
164	}	164	}
165	});	165	});
166	}	166	}
167	},	167	},
168	};	168	};
169	</script>	169	</script>
170		170

src/components/ProductInsight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid inner-wrp">	3	<div class="container-fluid inner-wrp">
4		4
5		5
6	<nav class="navbar navbar-expand-sm spotLight-nav">	6	<nav class="navbar navbar-expand-sm spotLight-nav">
7	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a>	7	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png" /></a>
8		8
9		9
10		10
11	<div class="user-profile-photo insights-profile">	11	<div class="user-profile-photo insights-profile">
12	<a href="#"><img src="../assets/images/user.png" /></a>	12	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
13	</div>	13	</div>
14	</nav><!-- menu wrapper -->	14	</nav><!-- menu wrapper -->
15	<div class="row profile-tab-spc-top insights-spc">	15	<div class="row profile-tab-spc-top insights-spc">
16	<div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">	16	<div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
17	<a href="#" class="back-to-lib"><img src="../assets/images/arrow-left.svg" />Back to library</a>	17	<a href="javascript:void(0);" class="back-to-lib"><img src="../assets/images/arrow-left.svg" />Back to library</a>
18	<ul class="insights-list">	18	<ul class="insights-list">
19	<li><a href="#">PRODUCT Insight</a></li>	19	<li><a href="javascript:void(0);">PRODUCT Insight</a></li>
20	</ul>	20	</ul>
21	<div class="insights-details">	21	<div class="insights-details">
22	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>	22	<h2>Decide on using multiple call to action vs single call to action depending on the stage of the user journey</h2>
23		23
24	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.	24	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
25	<br><br>	25	<br><br>
26	When the user is already onboarded and is in the <strong>engage stage</strong>, it may be better to use a single CTA for each use case in order to <strong>avoid ambiguity.</strong>	26	When the user is already onboarded and is in the <strong>engage stage</strong>, it may be better to use a single CTA for each use case in order to <strong>avoid ambiguity.</strong>
27	</p>	27	</p>
28		28
29	</div>	29	</div>
30		30
31	</div><!-- user profile -->	31	</div><!-- user profile -->
32	<div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">	32	<div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
33	<div class="features-group">	33	<div class="features-group">
34	<h3>Further Reading</h3>	34	<h3>Further Reading</h3>
35	<ul class="features-group-list">	35	<ul class="features-group-list">
36	<li><a href="#">The Aesthetic-Usability Effect <img src="../assets/images/link.svg" /></a>	36	<li><a href="javascript:void(0);">The Aesthetic-Usability Effect <img src="../assets/images/link.svg" /></a>
37	<span>Wikipedia</span>	37	<span>Wikipedia</span>
38	</li>	38	</li>
39	<li><a href="#">The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones. <img src="../assets/images/link.svg" /></a>	39	<li><a href="javascript:void(0);">The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones. <img src="../assets/images/link.svg" /></a>
40	<span>Nielsen Norman Group</span>	40	<span>Nielsen Norman Group</span>
41	</li>	41	</li>
42	</ul>	42	</ul>
43	</div><!-- list style -->	43	</div><!-- list style -->
44	</div>	44	</div>
45	</div>	45	</div>
46	<div class="clearfix"></div>	46	<div class="clearfix"></div>
47	<div class="row top-brd profile-tab-spc-top">	47	<div class="row top-brd profile-tab-spc-top">
48	<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">	48	<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
49	<ul class="profile-tab">	49	<ul class="profile-tab">
50	<li class="active-green"><a href="#">Citations(16)</a></li>	50	<li class="active-green"><a href="javascript:void(0);">Citations(16)</a></li>
51	</ul>	51	</ul>
52		52
53	</div>	53	</div>
54	<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">	54	<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
55	<a href="#" class="insights-rply"><img src="../assets/images/reply.svg" /> Share Insight</a>	55	<a href="javascript:void(0);" class="insights-rply"><img src="../assets/images/reply.svg" /> Share Insight</a>
56		56
57	</div>	57	</div>
58	</div><!-- tab style -->	58	</div><!-- tab style -->
59	<div class="profile-data-wrp">	59	<div class="profile-data-wrp">
60	<div class="container-fluid data-wrp">	60	<div class="container-fluid data-wrp">
61	<div class="row">	61	<div class="row">
62	<div class="">	62	<div class="">
63	<div class="card-warpper">	63	<div class="card-warpper">
64	<div class="company-detail">	64	<div class="company-detail">
65	<div class="c-logo">	65	<div class="c-logo">
66	<img src="../assets/images/image 46.png" />	66	<img src="../assets/images/image 46.png" />
67	</div>	67	</div>
68	<div class="c-tag">	68	<div class="c-tag">
69	<img src="../assets/images/c-tag.png" />	69	<img src="../assets/images/c-tag.png" />
70	</div>	70	</div>
71	</div><!-- company detail-->	71	</div><!-- company detail-->
72	<h1>Urban Company</h1>	72	<h1>Urban Company</h1>
73	<div class="u-detail">	73	<div class="u-detail">
74	<img src="../assets/images/user-2.png" />	74	<img src="../assets/images/user-2.png" />
75	<h2>Murugan<br> Swaminathan</h2>	75	<h2>Murugan<br> Swaminathan</h2>
76	</div><!-- user detail -->	76	</div><!-- user detail -->
77	<p>Onboarding, Core usage,<br> Customer Suport</p>	77	<p>Onboarding, Core usage,<br> Customer Suport</p>
78	<ul class="tags-list">	78	<ul class="tags-list">
79	<li><a href="#" class="cape-honey">Design</a></li>	79	<li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
80	<li><a href="#" class="rose-bud">Marketing</a></li>	80	<li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
81	<li><a href="#" class="pattens-blue">Product</a></li>	81	<li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
82	</ul>	82	</ul>
83	<div class="clearfix"></div>	83	<div class="clearfix"></div>
84	</div><!-- card wrpper -->	84	</div><!-- card wrpper -->
85	<div class="card-warpper">	85	<div class="card-warpper">
86	<div class="company-detail">	86	<div class="company-detail">
87	<div class="c-logo">	87	<div class="c-logo">
88	<img src="../assets/images/image 46.png" />	88	<img src="../assets/images/image 46.png" />
89	</div>	89	</div>
90	<div class="c-tag">	90	<div class="c-tag">
91	<img src="../assets/images/c-tag.png" />	91	<img src="../assets/images/c-tag.png" />
92	</div>	92	</div>
93	</div><!-- company detail-->	93	</div><!-- company detail-->
94	<h1>Urban Company</h1>	94	<h1>Urban Company</h1>
95	<div class="u-detail">	95	<div class="u-detail">
96	<img src="../assets/images/user-2.png" />	96	<img src="../assets/images/user-2.png" />
97	<h2>Murugan<br> Swaminathan</h2>	97	<h2>Murugan<br> Swaminathan</h2>
98	</div><!-- user detail -->	98	</div><!-- user detail -->
99	<p>Onboarding, Core usage,<br> Customer Suport</p>	99	<p>Onboarding, Core usage,<br> Customer Suport</p>
100	<ul class="tags-list">	100	<ul class="tags-list">
101	<li><a href="#" class="cape-honey">Design</a></li>	101	<li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
102	<li><a href="#" class="rose-bud">Marketing</a></li>	102	<li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
103	<li><a href="#" class="pattens-blue">Product</a></li>	103	<li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
104	</ul>	104	</ul>
105	<div class="clearfix"></div>	105	<div class="clearfix"></div>
106	</div><!-- card wrpper -->	106	</div><!-- card wrpper -->
107	<div class="card-warpper">	107	<div class="card-warpper">
108	<div class="company-detail">	108	<div class="company-detail">
109	<div class="c-logo">	109	<div class="c-logo">
110	<img src="../assets/images/image 46.png" />	110	<img src="../assets/images/image 46.png" />
111	</div>	111	</div>
112	<div class="c-tag">	112	<div class="c-tag">
113	<img src="../assets/images/c-tag.png" />	113	<img src="../assets/images/c-tag.png" />
114	</div>	114	</div>
115	</div><!-- company detail-->	115	</div><!-- company detail-->
116	<h1>Urban Company</h1>	116	<h1>Urban Company</h1>
117	<div class="u-detail">	117	<div class="u-detail">
118	<img src="../assets/images/user-2.png" />	118	<img src="../assets/images/user-2.png" />
119	<h2>Murugan<br> Swaminathan</h2>	119	<h2>Murugan<br> Swaminathan</h2>
120	</div><!-- user detail -->	120	</div><!-- user detail -->
121	<p>Onboarding, Core usage,<br> Customer Suport</p>	121	<p>Onboarding, Core usage,<br> Customer Suport</p>
122	<ul class="tags-list">	122	<ul class="tags-list">
123	<li><a href="#" class="cape-honey">Design</a></li>	123	<li><a href="javascript:void(0);" class="cape-honey">Design</a></li>
124	<li><a href="#" class="rose-bud">Marketing</a></li>	124	<li><a href="javascript:void(0);" class="rose-bud">Marketing</a></li>
125	<li><a href="#" class="pattens-blue">Product</a></li>	125	<li><a href="javascript:void(0);" class="pattens-blue">Product</a></li>
126	</ul>	126	</ul>
127	<div class="clearfix"></div>	127	<div class="clearfix"></div>
128	</div><!-- card wrpper -->	128	</div><!-- card wrpper -->
129	</div><!-- all card wrpper -->	129	</div><!-- all card wrpper -->
130	</div>	130	</div>
131	</div>	131	</div>
132		132
133	</div><!-- data wrp -->	133	</div><!-- data wrp -->
134	<!-- body wrapper -->	134	<!-- body wrapper -->
135	</div><!-- main wrapper -->	135	</div><!-- main wrapper -->
136	<!-- main wrapper -->	136	<!-- main wrapper -->
137	</main>	137	</main>
138	</template>	138	</template>
139		139
140	<script>	140	<script>
141	import Vue from "vue";	141	import Vue from "vue";
142	import router from "../router";	142	import router from "../router";
143		143
144	export default {	144	export default {
145	name: "ProductInsight",	145	name: "ProductInsight",
146		146
147	data() {	147	data() {
148	return {};	148	return {};
149	},	149	},
150	mounted() {},	150	mounted() {},
151	methods: {	151	methods: {
152	goToLogin() {	152	goToLogin() {
153	this.$router.push("/");	153	this.$router.push("/login");
154	},	154	},
155	goToSignUp() {	155	goToSignUp() {
156	this.$router.push("/signup");	156	this.$router.push("/");
157	},	157	},
158		158
159	},	159	},
160	};	160	};
161	</script>	161	</script>
162		162

src/components/Profile.vue

Diff comments View file @56f4b75

 <template>
   <main class="landing-page">
     <!-- profile -->
     <div class="popup-wrp" style="display: none">
       <div class="overlay" @click="hideDialog"></div>
       <div class="popup-set" id="add-profile" style="display: none">
         <div class="popup-header">
           <div class="user-photo common_color">
             <img :src="userData.profilePic" />
           </div>
           <!-- header user -->
           <ul>
             <li>
               <a href="javasript:void(0);"
                 ><img src="../assets/images/replace.svg" /><span
                   >Replace Avatar</span
                 ></a
               >
             </li>
             <li>
               <a href="javasript:void(0);"
                 @click="getRandomAvatar()"><img src="../assets/images/randomise.svg" /><span
                   >Randomise Avatar</span
                 ></a
               >
             </li>
           </ul>
         </div>
         <!-- header -->
         <div class="popup-body">
           <form class="popup-forms">
             <div class="row">
               <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                 <div class="form-group floating-label">
                   <input
                     type="text"
                     class="form-control"
                     v-model="userData.firstName"
                     placeholder=" "
                     id="fname"
                   />
                   <label for="fname">First Name</label>
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                 <div class="form-group floating-label">
                   <input
                     type="text"
                     class="form-control"
                     value=""
                     placeholder=" "
                     id="lname"
                     v-model="userData.lastName"
                   />
                   <label for="lname" class="lname">Last Name</label>
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
                 <div class="form-group floating-label">
                   <input
                     type="text"
                     class="form-control"
                     value=""
                     v-model="userData.designation"
                     placeholder=" "
                     id="designation"
                   />
                   <label for="designation">Designation</label>
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
                 <div class="form-group floating-label">
                   <input
                     type="text"
                     class="form-control"
                     v-model="userData.organisation"
                     id="company"
                     placeholder=" "
                   />
                   <label for="company">Company</label>
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                 <div class="form-group floating-label">
                   <textarea
                     type="text"
                     class="form-control"
                     value=""
                     v-model="userData.bio"
                     id="yourself"
                     placeholder=" "
                   ></textarea>
                   <label for="yourself"
                     >Tell others a little about yourself</label
                   >
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                 <p class="things">Three things that you talk more about</p>
                 <ul class="interests">
                   <li v-for="(interest, i) in userData.interests" :key="i">
                     <span>{{ interest }}</span>
                     <a
                       href="javascript:void(0);"
                       @click="removeInterest(i)"
                       class="cat-minus"
                       ><img src="../assets/images/minus.svg"
                     /></a>
                   </li>
                   <li>
                     <input
                       class=""
                       placeholder="Add interest"
                       v-on:keyup.enter="addInterest"
                       v-model="interestName"
                     />
                     <a href="javascript:void(0);" @click="addInterest()"
                       ><img src="../assets/images/plus-circle.svg"
                     /></a>
                   </li>
                 </ul>
               </div>
               <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                 <p class="things">Choose Background color</p>
                 <ul class="colors">
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#C4C4C4"
                       class="silver"
                       @click="changeColor('#C4C4C4')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#FFF6D7"
                       class="milk-punch"
                       @click="changeColor('#FFF6D7')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#BDDBFF"
                       class="french-pass"
                       @click="changeColor('#BDDBFF')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#C0FAFE"
                       class="cyan-french-pass"
                       @click="changeColor('#C0FAFE')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#FFDBDC"
                       class="cosmos"
                       @click="changeColor('#FFDBDC')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#FEE6AC"
                       class="cape-Honey"
                       @click="changeColor('#FEE6AC')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#E5DFF0"
                       class="snuff"
                       @click="changeColor('#E5DFF0')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#DFE7EF"
                       class="catskillWhite"
                       @click="changeColor('#DFE7EF')"
                     ></a>
                   </li>
                   <li>
                     <a
                       href="javascript:void(0);"
                       id="#FFF"
                       class="white"
                       @click="changeColor('#FFF')"
                     ></a>
                   </li>
                 </ul>
               </div>
               <div class="col-lg-12 mt-50">
                 <p class="notifications">
                   Recieve notifications when you recieve a comment/ Upvote
                 </p>
                 <div class="switch-bt-wrp">
                   <label class="switch-btn">
                     <input type="checkbox" class="toggle-btn" />
                     <span class="rounded-toggle"></span>
                   </label>
                   <span class="onoff">on/off</span>
                 </div>
               </div>
               <div class="col-lg-12">
                 <p class="add-socail-ch">
                   Add your social Channels <span></span>
                 </p>
               </div>
               <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                 <div class="form-group floating-label">
                   <select class="form-group">
                     <option value="Facebook">Facebook</option>
                   </select>
                   <span class="select-arrow"
                     ><img src="../assets/images/chevron-down.svg"
                   /></span>
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                 <div class="form-group floating-label">
                   <input
                     type="text"
                     class="form-control"
                     value=""
                     placeholder="Paste your profile URL here"
                     id=""
                     v-model="userData.socialMediaProfiles.facebook"
                   />
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                 <div class="form-group floating-label">
                   <select class="form-group">
                     <option value="Linkedin">Linkedin</option>
                   </select>
                   <span class="select-arrow"
                     ><img src="../assets/images/chevron-down.svg"
                   /></span>
                 </div>
               </div>
               <!-- input -->
               <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                 <div class="form-group floating-label">
                   <input
                     type="text"
                     class="form-control"
                     value=""
                     placeholder="Paste your profile URL here"
                     id=""
                     v-model="userData.socialMediaProfiles.linkedin"
                   />
                 </div>
               </div>
               <!-- input -->
               <!-- input -->
               <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                 <div class="form-group floating-label">
                   <select class="form-group">
                     <option @click="addSocialLink">Add another</option>
                   </select>
                   <span class="select-arrow"
                     ><img src="../assets/images/chevron-down.svg"
                   /></span>
                 </div>
               </div> -->
               <!-- input -->
             </div>
             <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
               >Save</a
             >
           </form>
         </div>
         <div class="clearfix"></div>
       </div>
       <!-- add profile -->
     </div>
     <!-- profile -->
     <div class="container-fluid inner-wrp">
       <nav class="navbar navbar-expand-sm spotLight-nav">
         <a class="navbar-brand" href="javasript:void(0);"
           ><img src="../assets/images/logo.png"
         /></a>
         <button
           class="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarsExample03"
           aria-controls="navbarsExample03"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
               <a class="nav-link" href="javasript:void(0);">About</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="javasript:void(0);">Masterclass</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="javasript:void(0);">Stories</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="javasript:void(0);">Library</a>
             </li>
           </ul>
         </div>
           <a href="javasript:void(0);"  @click="addProfileDialog" class="update_profile"><span></span> Update Profile</a>
         <div class="">
           <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a>
           <div class="sub-menu-user" id="userprofileshow" style="display: none">
             <ul>
               <li>
                 <a href="javascript:void(0);" @click="addProfileDialog"
                   >Edit Profile</a
                 >
               </li>
               <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
             </ul>
           </div>
         </div>
       </nav>
       <!-- menu wrapper -->
       <div class="row profile-tab-spc-top">
         <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
           <div class="inner-profile-ps common_color">
             <img :src="userData.profilePic" class="" />
           </div>
           <!-- user profile -->
           <div class="user-profile">
             <h1>
               {{ userData.firstName }} {{ userData.lastName }}
-              <a href="javasript:void(0);" class="tags no-cursor">{{ userData.role }}</a>
+              <span href="javasript:void(0);" class="tags no-cursor no-underline">{{ userData.role }}</span>
             </h1>
             <ul class="joined-info">
               <li>
                 <a href="javascript:void(0);" v-if="userData.designation.length == 0 && userData.organisation.length == 0" @click="addProfileDialog"
                   >Add your work</a
                 >
-                <a  class="no-cursor" href="javascript:void(0);" v-if="userData.designation.length != 0"
+                <a  class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.designation.length != 0"
                   >{{userData.designation}}</a
                 >
-                <a  class="no-cursor" href="javascript:void(0);" v-if="userData.designation.length != 0 && userData.organisation.length != 0"
+                <a  class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.designation.length != 0 && userData.organisation.length != 0"
                   >at</a
                 >
-                <a  class="no-cursor" href="javascript:void(0);" v-if="userData.organisation.length != 0"
+                <a  class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.organisation.length != 0"
                   >{{userData.organisation}}</a
                 >
                 <img src="../assets/images/u-info-icon.png" /> <span></span>
               </li>
               <li>
                 <a href="javasript:void(0);" content="Karma Points" v-tippy> {{ userData.karmaPoints }} Karma</a> <span></span>
               </li>
               <li>
                 <a href="javasript:void(0);"
-                  class="no-cursor">Joined on
+                  class="no-cursor no-underline">Joined on
                   {{ moment(userData.createdAt).format("MMM YYYY") }}</a
                 >
               </li>
             </ul>
             <p>{{ userData.bio }}</p>
           </div>
         </div>
         <!-- user profile -->
         <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
           <div class="list-style-group" v-if="userData.awards">
             <p>Awards</p>
             <ul class="list-style">
               <li>
                 <a href="javascript:void(0);"
                   ><img src="../assets/images/icon-1.png"
                 /></a>
               </li>
             </ul>
           </div>
           <!-- list style -->
         </div>
       </div>
       <div class="clearfix"></div>
       <div class="row top-brd profile-tab-spc-top">
         <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
           <ul class="profile-tab">
             <li class="active c-0">
               <a href="javascript:void(0);" @click="caseDialog"
                 >Case-studies({{ caseStudies.length }})</a
               >
             </li>
             <li class="rp-all">
               <a href="javascript:void(0);" @click="repliesDialog"
                 >Comments/Replies(0)</a
               >
             </li>
           </ul>
         </div>
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <ul class="social-connects">
             <li><span>Follow</span></li>
             <li>
               <a
                 href="javascript:void(0);"
                 @click="addProfileDialog"
                 class="active"
                 ><img src="../assets/images/plus.png"
               /></a>
               <span class="connect-social-channel"
                 >Connect your social channels</span
               >
             </li>
           </ul>
         </div>
       </div>
       <!-- tab style -->
       <div class="profile-data-wrp">
         <div class="container-fluid data-wrp" id="case-study-0">
           <div class="row" v-if="caseStudies.length == 0">
              <div class="col-6 col-lg-6">
                <div class="full-w-height-profile ex-light seats_bg" >
                    <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top" @click="openUrl('https://www.productgrowth.org/spotlight')">Explore Spotlights</a>
   <p>Explore the spotlights others has put together</p>
                  </div><!-- full width -->
              </div><!-- col 6 -->
                   <div class="col-6 col-lg-6">
                <div class="full-w-height-profile ex-light spotlight_bg">
                  <img src="../assets/images/add-role.svg" class="add-role" />
                  <div class="clearfix"></div><!-- clearfix -->
                    <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a>
   <p>Share your own insights through Spotlight</p>
                  </div><!-- full width -->
              </div><!-- col 6 -->
           </div>
           <div class="profile-data-wrp" v-if="caseStudies.length != 0">
             <div class="container-fluid data-wrp">
               <div class="row">
                 <div class="" v-for="(study, i) in caseStudies" :key="i">
                   <div class="card-warpper" @click="openStudy(study)">
                     <div class="company-detail">
                       <div class="c-logo">
                         <!-- <img src="../assets/images/image 46.png" /> -->
                         <img :src="study.intro.logoURL" />
                       </div>
                       <div class="c-tag">
                         <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/>
                         <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/>
                         <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/>
                         <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/>
                       </div>
                     </div>
                     <!-- company detail-->
                     <h1>{{ study.intro.name }}</h1>
                     <div class="u-detail">
                       <img src="../assets/images/user-2.png" />
                       <h2 v-for="(name, j) in study.intro.authors" :key="j">
                         {{ name }}
                       </h2>
                     </div>
                     <!-- user detail -->
                     <p>
                       <span v-for="(area, j) in study.focusAreas" :key="j">
                         {{ area }}
                       </span>
                     </p>
                     <ul class="tags-list" >
                       <li v-for="(tags, j) in study.insightTags" :key="j">
                         <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a>
                         <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a>
                         <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a>
                         <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a>
                         <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a>
                       </li>
                       <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
                       <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
                     </ul>
                     <div class="clearfix"></div>
                   </div>
                   <!-- card wrpper -->
                   <!-- card wrpper -->
                 </div>
                 <!-- all card wrpper -->
               </div>
             </div>
           </div>
           <!-- data wrp -->
         </div>
         <!-- case study 0 -->
         <div
           class="container-fluid data-wrp"
           id="all-replies"
           style="display: none"
         >
           <div class="row">
             <div class="replies col-md-12">
               <div class="replies-wrp">
                 <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>
                 <ul class="joined-info">
                   <li><a href="javasript:void(0);">37D</a> <span></span></li>
                   <li><img src="../assets/images/heart.png" /></li>
                   <li><a href="javasript:void(0);"> 4</a></li>
                   <li class="comment-spc">
                     <img src="../assets/images/comment.svg" />
                   </li>
                   <li><a href="javasript:void(0);"> 6</a></li>
                 </ul>
                 <p>
                   I wonder what the difference between “<strong>
                     Assistant</strong
                   >” and “<strong>Pickup and Drop</strong>” are. If they are the
                   same, there are two “call to actions” for the same workflow
                 </p> -->
               </div>
               <!-- replies wrapper -->
             </div>
             <!-- all card wrpper -->
           </div>
         </div>
         <!-- all Relpies -->
       </div>
       <!-- data wrp -->
       <!-- body wrapper -->
     </div>
   </main>
 </template>
 <script>
 import Vue from "vue";
 import router from "../router";
 import $ from "jquery";
 import axios from "axios";
 export default {
   name: "Profile",
 data: () =>({
         loggedinFlag: false,
       usertoken: null,
       userData: {
         "verified": null,
 		"bgColor": null,
 		"interests": [],
 		"karmaPoints": null,
 		"socialLogin": null,
 		"notification": null,
 		"profilePic": null,
 		"role": null,
 		"name":null,
 		"email": null,
 		"firstName":null,
 		"lastName":null,
 		"createdAt": null,
 		"bio": null,
 		"designation": "",
 		"organisation": "",
 		"socialMediaProfiles": {'facebook':null,'linkedin':null}
       },
       caseStudies: [],
       interestName: null,
       oldId: null,
       socialLink: null,
       currentSocialLinkName: null,
       showCompany:false,
       showDesignation:false,
      }),
   mounted() {
     this.userData = {};
     this.socialLink = [];
     this.userData.interests = [];
     this.userData.socialMediaProfiles = {};
     this.userData.designation = "";
     this.userData.organisation = "";
     this.userData.socialMediaProfiles.facebook = null;
     this.userData.socialMediaProfiles.linkedin = null;
     var userdata = localStorage.getItem("spotlight_usertoken");
     if (userdata) {
       userdata = JSON.parse(userdata);
       this.usertoken = userdata.token;
       this.getProfile();
       this.getCaseStudies();
     }
   },
   methods: {
     goToSignUp() {
-      this.$router.push("/signup");
+      this.$router.push("/");
     },
     goToReset() {
       this.$router.push("/reset");
     },
     logout() {
-      this.$router.push("/");
+      this.$router.push("/login");
     },
     addSocialLink(obj) {
       this.socialLink.push();
     },
     addInterest() {
       console.log(this.userData.interests.length, "called", this.interestName);
       if (this.userData.interests.length <= 2) {
         this.userData.interests.push(this.interestName);
         this.interestName = null;
       } else {
         this.$toaster.info("Only 3 interest are allowed");
       }
     },
     removeInterest(i) {
       this.userData.interests.splice(i, 1);
     },
     assignClass() {
       var element = document.getElementById(this.userData.bgColor);
       element.classList.add("active");
       var cols = document.getElementsByClassName("common_color");
       for (var i = 0; i < cols.length; i++) {
         cols[i].style.backgroundColor = this.userData.bgColor;
       }
     },
     changeColor(clr) {
       console.log(this.oldId, "clr", clr);
       var element = document.getElementById(clr);
       element.classList.add("active");
       var removeelement = document.getElementById(this.oldId);
       removeelement.classList.remove("active");
       this.oldId = clr;
       var cols = document.getElementsByClassName("common_color");
       for (var i = 0; i < cols.length; i++) {
         cols[i].style.backgroundColor = clr;
       }
       this.userData.bgColor = clr;
     },
     getProfile() {
       axios
         .get("/profile", {
           headers: {
             Authorization: "Bearer " + this.usertoken,
           },
         })
         .then((response) => {
           if (!response.data.data.socialMediaProfiles) {
               this.userData.socialMediaProfiles = {};
           }
           this.userData = Object.assign(this.userData, response.data.data)
           // this.userData = response.data.data;
           this.oldId = this.userData.bgColor;
           console.log(this.oldId, "this.userData.", this.userData);
          this.showDesignation =  this.userData.designation.length == 0?true:false;
          this.showCompany =  this.userData.organisation.length == 0?true:false;
           this.assignClass();
           console.log(response.data.data);
         })
         .catch((error) => console.log(error));
     },
     getRandomAvatar() {
       axios
         .get("/randomAvatar", {
           headers: {
             Authorization: "Bearer " + this.usertoken,
           },
         })
         .then((response) => {
          this.userData.profilePic = response.data.imageURL;
           console.log(response.data.imageURL);
         })
         .catch((error) => console.log(error));
     },
     getCaseStudies() {
       axios
         .get("/caseStudy/all", {
           headers: {
             Authorization: "Bearer " + this.usertoken,
           },
         })
         .then((response) => {
           console.log(response.data.data.caseStudies);
           this.caseStudies = response.data.data.caseStudies;
         })
         .catch((error) => console.log(error));
     },
     openStudy(payload) {
       console.log("payload-", payload);
       payload.intro.date = payload.createdAt;
       payload.intro.focusPoint = payload.createdAt;
       axios
         .get("/caseStudy/slides?caseStudyId=" + payload._id, {
           headers: {
             Authorization: "Bearer " + this.usertoken,
           },
         })
         .then((response) => {
           this.createSlide(payload, response.data.data);
         })
         .catch((error) => console.log(error));
     },
     createSlide(payload, slides) {
       var finalSlides = [];
       slides.forEach((slides_) => {
         var url = this.assignRoutes(slides_.templateId);
         var obj = {
           forward: true,
           backward: true,
           ur: url,
           slideId: slides_._id,
           caseStudyId: slides_.caseStudyId,
           payload: {
             metaData: slides_.metaData,
             comments: slides_.comments,
             insight: slides_.insight?slides_.insight:null,
           },
         };
         // slides_
         finalSlides.push(obj);
       });
       console.log("payload", payload);
       // add first slide at begining
       finalSlides.unshift({
         forward: true,
         backward: false,
         ur: "EpisodeIntro",
         slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
         caseStudyId: payload._id,
         payload: {
           metaData: payload.intro,
           comments: [],
         },
       });
       finalSlides.push({
         forward: true,
         backward: false,
         ur: "Outro",
         slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
         caseStudyId: payload._id,
         payload: {
           metaData: payload.outro,
           comments: [],
         },
       });
       console.log(finalSlides);
       localStorage.setItem('spotlight_slide'+payload._id, JSON.stringify(finalSlides))
       this.$router.push({
         name: "EpisodeIntro",
         params: {
           caseStudyId: finalSlides[0].caseStudyId,
           slideId: finalSlides[0].slideId,
         },
       });
     },
     assignRoutes(tempId) {
       // /episode-intro
       // /outro
       var routes = [
         {
           url: "AuthorIntro",
           tempId: "T1_RoeMG8130Xko1DvhC3Ou",
         },
         {
           url: "NoScreenshotSingleAuthor",
           tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
         },
         {
           url: "SingleMobileScreenInsightTwo",
           tempId: "T3_cqNIf7tuqL4jyON63dA7",
         },
         {
           url: "TwoScreenWithoutInsight",
           tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
         },
         {
           url: "noscreenshotSingleautho",
           tempId: "T5_za3c3sYgx7bVvtKz5r0e",
         },
         {
           url: "SingleMobileScreenInsightOne",
           tempId: "T6_za3c3sYgx7bVvtKz5sgf",
         },
         {
           url: "TwoScreenWithInsight",
           tempId: "T7_za3c3sYgx7bVvtKzasdf",
         },
       ];
       var i = routes.findIndex((routes_) => routes_.tempId == tempId);
       return routes[i].url;
     },
     saveProfile() {
       var obj = {};
       this.userData.name =
         this.userData.firstName + " " + this.userData.lastName;
       obj = Object.assign(obj, this.userData);
       // if(!obj.socialMediaProfiles){
       //   obj.socialMediaProfiles = {};
       // }
       delete obj.createdAt;
       delete obj.email;
       delete obj.role;
       delete obj.verified;
       delete obj.updatedAt;
       delete obj.__v;
       delete obj._id;
       delete obj.karmaPoints;
       delete obj.awards;
       delete obj.socialLogin;
       axios
         .put("/profile", obj, {
           headers: {
             Authorization: "Bearer " + this.usertoken,
           },
         })
         .then((response) => {
           // this.userData = response.data.data;
           this.$toaster.success("Profile Updated");
           this.closeDialog();
           console.log(response.data.data);
         })
         .catch((error) => {
           if (error.response) {
             this.$toaster.error(error.response.data.message);
           }
         });
     },
     addProfileDialog() {
       $(".inner-wrp").addClass("body-blur");
       $("#add-social-links").hide();
       $(".popup-wrp, #add-profile").show();
     },
     nextProfileDialog() {
       $("#add-profile").hide();
       $("#add-social-links").show();
       this.saveProfile();
     },
     closeDialog() {
       $(".popup-wrp").hide();
       $(".inner-wrp").removeClass("body-blur");
       // this.saveProfile();
     },
     hideDialog() {
       $(".popup-wrp").hide();
       $(".inner-wrp").removeClass("body-blur");
     },
     ///
     caseDialog() {
       $(".rp-all").removeClass("active");
       $(".c-0").addClass("active");
       $("#all-replies").hide();
       $("#case-study-0").show();
     },
     repliesDialog() {
       $(".c-0").removeClass("active");
       $(".rp-all").addClass("active");
       $("#case-study-0").hide();
       $("#all-replies").show();
     },
     userprofileshowDialog() {
       $("#userprofileshow").toggle();
     },
     openUrl(url){
       window.open(url);
     },
   },
 };
 </script>
 <style>
 .no-cursor{
   cursor: default !important;
 }
+.no-underline{
+  text-decoration: none !important;
+}
 </style>

src/components/ReadingFlowBounceBoard.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="bounce-board-wrp">	18	<div class="bounce-board-wrp">
19	<div class="inner-wrp-bc">	19	<div class="inner-wrp-bc">
20	<div class="bc-top-head">	20	<div class="bc-top-head">
21	<span class="bc-head">	21	<span class="bc-head">
22	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	22	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
23	</span>	23	</span>
24	<div class="action-sort">	24	<div class="action-sort">
25	<span class="sort-by">SORT BY</span> <div class="btn-group">	25	<span class="sort-by">SORT BY</span> <div class="btn-group">
26	<button type="button" class="bc-sort-list dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">	26	<button type="button" class="bc-sort-list dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
27	BEST	27	BEST
28	</button>	28	</button>
29	<div class="dropdown-menu">	29	<div class="dropdown-menu">
30	<a class="dropdown-item" href="#">BEST 1</a>	30	<a class="dropdown-item" href="javascript:void(0);">BEST 1</a>
31	<a class="dropdown-item" href="#">BEST 2</a>	31	<a class="dropdown-item" href="javascript:void(0);">BEST 2</a>
32	<a class="dropdown-item" href="#">BEST 3</a>	32	<a class="dropdown-item" href="javascript:void(0);">BEST 3</a>
33	</div>	33	</div>
34	</div>	34	</div>
35	</div><!-- action sort -->	35	</div><!-- action sort -->
36	</div><!-- top head -->	36	</div><!-- top head -->
37	<div class="bounce-board-body">	37	<div class="bounce-board-body">
38	<div class="bc-empty">Empty State</div>	38	<div class="bc-empty">Empty State</div>
39	</div><!-- bounce board body -->	39	</div><!-- bounce board body -->
40	</div>	40	</div>
41	</div><!-- bounceboard wrp -->	41	</div><!-- bounceboard wrp -->
42	<div class="single-mobileInsight">	42	<div class="single-mobileInsight">
43	<img src="../assets/images/slide.png" class="slide-img" />	43	<img src="../assets/images/slide.png" class="slide-img" />
44	<div class="single-left-Insight-comments">	44	<div class="single-left-Insight-comments">
45	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />	45	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
46	<div class="single-author-li-comments">	46	<div class="single-author-li-comments">
47	<div class="a-intro-comments custom-c-style">	47	<div class="a-intro-comments custom-c-style">
48	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	48	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
49	<ul class="rly-comment-set">	49	<ul class="rly-comment-set">
50	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	50	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
51	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	51	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
52	</ul>	52	</ul>
53	</div><!-- comments box -->	53	</div><!-- comments box -->
54	</div><!-- single author comments -->	54	</div><!-- single author comments -->
55	<div class="single-author-li-comments">	55	<div class="single-author-li-comments">
56	<div class="a-intro-comments custom-c-style">	56	<div class="a-intro-comments custom-c-style">
57	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	57	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
58	<ul class="rly-comment-set">	58	<ul class="rly-comment-set">
59	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	59	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
60	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	60	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
61	</ul>	61	</ul>
62	</div><!-- comments box -->	62	</div><!-- comments box -->
63	</div><!-- single author comments -->	63	</div><!-- single author comments -->
64	</div><!-- single mobile Left insight -->	64	</div><!-- single mobile Left insight -->
65	<div class="c-product-insight-wrp ">	65	<div class="c-product-insight-wrp ">
66	<div class="single-author-li-comments ">	66	<div class="single-author-li-comments ">
67	<div class="a-intro-comments custom-selected-style">	67	<div class="a-intro-comments custom-selected-style">
68	<img src="../assets/images/rect.svg" class="rect" />	68	<img src="../assets/images/rect.svg" class="rect" />
69	<div class="top-wrp">	69	<div class="top-wrp">
70	PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	70	PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
71	</div>	71	</div>
72	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>	72	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
73	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.	73	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
74	<br><br>	74	<br><br>
75	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>	75	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
76	</p>	76	</p>
77	<div class="footer">	77	<div class="footer">
78	<a href="#" class="cit-16">16 Citations</a>	78	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
79	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	79	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
80	</div><!-- footer -->	80	</div><!-- footer -->
81		81
82	</div><!-- comments box -->	82	</div><!-- comments box -->
83	</div><!-- single author comments -->	83	</div><!-- single author comments -->
84		84
85	</div><!-- single mobile Right insight -->	85	</div><!-- single mobile Right insight -->
86	</div><!-- Single Mobile Insight -->	86	</div><!-- Single Mobile Insight -->
87	<div class="footer-nav">	87	<div class="footer-nav">
88	<div class="footer-top">	88	<div class="footer-top">
89	<div class="row">	89	<div class="row">
90	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	90	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
91	<div class="row h-100p">	91	<div class="row h-100p">
92	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	92	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
93	<ul class="top-intro-bt">	93	<ul class="top-intro-bt">
94	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	94	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
95	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>	95	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>
96	</ul>	96	</ul>
97	</div>	97	</div>
98		98
99	</div>	99	</div>
100	</div>	100	</div>
101	</div>	101	</div>
102	</div><!-- footer top -->	102	</div><!-- footer top -->
103	<div class="footer-bottom">	103	<div class="footer-bottom">
104	<ul>	104	<ul>
105	<li class=""></li>	105	<li class=""></li>
106	<li></li>	106	<li></li>
107	</ul>	107	</ul>
108	</div><!-- footer top -->	108	</div><!-- footer top -->
109	</div><!-- footer -->	109	</div><!-- footer -->
110		110
111	</div>	111	</div>
112	<!-- body wrapper -->	112	<!-- body wrapper -->
113	</div>	113	</div>
114	<!-- main wrapper -->	114	<!-- main wrapper -->
115	</main>	115	</main>
116	</template>	116	</template>
117		117
118	<script>	118	<script>
119	import Vue from "vue";	119	import Vue from "vue";
120	import router from "../router";	120	import router from "../router";
121		121
122	export default {	122	export default {
123	name: "ReadingFlowBounceBoard",	123	name: "ReadingFlowBounceBoard",
124		124
125	data() {	125	data() {
126	return {};	126	return {};
127	},	127	},
128	mounted() {},	128	mounted() {},
129	methods: {	129	methods: {
130	goToLogin() {	130	goToLogin() {
131	this.$router.push("/");	131	this.$router.push("/login");
132	},	132	},
133	goToSignUp() {	133	goToSignUp() {
134	this.$router.push("/signup");	134	this.$router.push("/");
135	},	135	},
136		136
137	},	137	},
138	};	138	};
139	</script>	139	</script>
140		140

src/components/ReadingFlowBounceBoard_chat.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="bounce-board-wrp">	18	<div class="bounce-board-wrp">
19	<div class="inner-wrp-bc">	19	<div class="inner-wrp-bc">
20	<div class="bc-top-head">	20	<div class="bc-top-head">
21	<span class="bc-head">	21	<span class="bc-head">
22	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	22	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
23	</span>	23	</span>
24	<div class="action-sort">	24	<div class="action-sort">
25	<span class="sort-by">SORT BY</span> <div class="btn-group">	25	<span class="sort-by">SORT BY</span> <div class="btn-group">
26	<button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">	26	<button type="button" class="bc-sort-list dropdown-toggle" @click="best_sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
27	BEST	27	BEST
28	</button>	28	</button>
29	<div class="dropdown-menu short_by">	29	<div class="dropdown-menu short_by">
30	<a class="dropdown-item" href="#">BEST 1</a>	30	<a class="dropdown-item" href="javascript:void(0);">BEST 1</a>
31	<a class="dropdown-item" href="#">BEST 2</a>	31	<a class="dropdown-item" href="javascript:void(0);">BEST 2</a>
32	<a class="dropdown-item" href="#">BEST 3</a>	32	<a class="dropdown-item" href="javascript:void(0);">BEST 3</a>
33	</div>	33	</div>
34	</div>	34	</div>
35	</div><!-- action sort -->	35	</div><!-- action sort -->
36	</div><!-- top head -->	36	</div><!-- top head -->
37	<div class="bounce-board-body">	37	<div class="bounce-board-body">
38	<ul class="bounced-user-comments">	38	<ul class="bounced-user-comments">
39	<li class="bc_border">	39	<li class="bc_border">
40	<div class="lbord"></div><!-- border -->	40	<div class="lbord"></div><!-- border -->
41	<div class="parent-full-width parent_bg">	41	<div class="parent-full-width parent_bg">
42	<div class="full-width">	42	<div class="full-width">
43	<div class="b-user-head"><img src="../assets/images/b-user1.png" />	43	<div class="b-user-head"><img src="../assets/images/b-user1.png" />
44	<span class="head-content">wanderingirl </span>	44	<span class="head-content">wanderingirl </span>
45	<ul>	45	<ul>
46	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>	46	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
47	<li> <span></span>3days ago</li>	47	<li> <span></span>3days ago</li>
48	<li> <span class="au">Author</span></li>	48	<li> <span class="au">Author</span></li>
49	</ul>	49	</ul>
50		50
51		51
52	</div><!-- header -->	52	</div><!-- header -->
53	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>	53	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
54	<div class="joined_wrapper">	54	<div class="joined_wrapper">
55	<ul class="joined-info info_bc_spc">	55	<ul class="joined-info info_bc_spc">
56	<li> <img src="../assets/images/purple-heart.png"> </li>	56	<li> <img src="../assets/images/purple-heart.png"> </li>
57	<li> <a href="#"> 4</a> </li>	57	<li> <a href="javascript:void(0);"> 4</a> </li>
58	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>	58	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
59	<li> <a href="#"> 6</a> </li>	59	<li> <a href="javascript:void(0);"> 6</a> </li>
60	</ul>	60	</ul>
61	<div class="add_rply">	61	<div class="add_rply">
62	<input type="text" placeholder="Add your reply" />	62	<input type="text" placeholder="Add your reply" />
63	</div><!-- rly form -->	63	</div><!-- rly form -->
64	</div><!-- joined wrapper -->	64	</div><!-- joined wrapper -->
65	</div><!-- full width -->	65	</div><!-- full width -->
66	</div><!-- parent -->	66	</div><!-- parent -->
67	<div class="child-full-width">	67	<div class="child-full-width">
68	<div class="full-width">	68	<div class="full-width">
69	<div class="b-user-head"><img src="../assets/images/b-user1.png" />	69	<div class="b-user-head"><img src="../assets/images/b-user1.png" />
70	<span class="head-content">Onenoisyboi </span>	70	<span class="head-content">Onenoisyboi </span>
71	<ul>	71	<ul>
72	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>	72	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
73	<li> <span></span>3days ago</li>	73	<li> <span></span>3days ago</li>
74	<li> <span class="red">Mod</span></li>	74	<li> <span class="red">Mod</span></li>
75	</ul>	75	</ul>
76		76
77		77
78	</div><!-- header -->	78	</div><!-- header -->
79	<p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>	79	<p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
80	<div class="joined_wrapper">	80	<div class="joined_wrapper">
81	<ul class="joined-info info_bc_spc">	81	<ul class="joined-info info_bc_spc">
82	<li> <img src="../assets/images/purple-heart.png"> </li>	82	<li> <img src="../assets/images/purple-heart.png"> </li>
83	<li> <a href="#"> 4</a> </li>	83	<li> <a href="javascript:void(0);"> 4</a> </li>
84	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>	84	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
85	<li> <a href="#"> 6</a> </li>	85	<li> <a href="javascript:void(0);"> 6</a> </li>
86	</ul>	86	</ul>
87	<div class="add_rply">	87	<div class="add_rply">
88	<input type="text" placeholder="Add your reply" />	88	<input type="text" placeholder="Add your reply" />
89	</div><!-- rly form -->	89	</div><!-- rly form -->
90	</div><!-- joined wrapper -->	90	</div><!-- joined wrapper -->
91	</div><!-- full width -->	91	</div><!-- full width -->
92	</div><!-- child wrapper -->	92	</div><!-- child wrapper -->
93	</li>	93	</li>
94		94
95	</ul><!-- all user comments -->	95	</ul><!-- all user comments -->
96	<ul class="bounced-user-comments">	96	<ul class="bounced-user-comments">
97	<li class="bc_border">	97	<li class="bc_border">
98	<div class="bc_brd_l"></div><!-- border -->	98	<div class="bc_brd_l"></div><!-- border -->
99	<div class="parent-full-width ">	99	<div class="parent-full-width ">
100	<div class="full-width">	100	<div class="full-width">
101	<div class="b-user-head"><img src="../assets/images/b-user1.png" />	101	<div class="b-user-head"><img src="../assets/images/b-user1.png" />
102	<span class="head-content">wanderingirl </span>	102	<span class="head-content">wanderingirl </span>
103	<ul>	103	<ul>
104	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>	104	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
105	<li> <span></span>3days ago</li>	105	<li> <span></span>3days ago</li>
106		106
107	</ul>	107	</ul>
108		108
109		109
110	</div><!-- header -->	110	</div><!-- header -->
111	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>	111	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop” are. If they are the same, there are two “call to actions” for the same workflow...</p>
112	<div class="joined_wrapper">	112	<div class="joined_wrapper">
113	<ul class="joined-info info_bc_spc">	113	<ul class="joined-info info_bc_spc">
114	<li> <img src="../assets/images/purple-heart.png"> </li>	114	<li> <img src="../assets/images/purple-heart.png"> </li>
115	<li> <a href="#"> 4</a> </li>	115	<li> <a href="javascript:void(0);"> 4</a> </li>
116	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>	116	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
117	<li> <a href="#"> 6</a> </li>	117	<li> <a href="javascript:void(0);"> 6</a> </li>
118	</ul>	118	</ul>
119	<div class="add_rply">	119	<div class="add_rply">
120	<input type="text" placeholder="Add your reply" />	120	<input type="text" placeholder="Add your reply" />
121	</div><!-- rly form -->	121	</div><!-- rly form -->
122	</div><!-- joined wrapper -->	122	</div><!-- joined wrapper -->
123	</div><!-- full width -->	123	</div><!-- full width -->
124	</div><!-- parent -->	124	</div><!-- parent -->
125	<div class="child-full-width">	125	<div class="child-full-width">
126	<div class="full-width">	126	<div class="full-width">
127	<div class="b-user-head"><img src="../assets/images/b-user1.png" />	127	<div class="b-user-head"><img src="../assets/images/b-user1.png" />
128	<span class="head-content">Onenoisyboi </span>	128	<span class="head-content">Onenoisyboi </span>
129	<ul>	129	<ul>
130	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>	130	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
131	<li> <span></span>3days ago</li>	131	<li> <span></span>3days ago</li>
132		132
133	</ul>	133	</ul>
134		134
135		135
136	</div><!-- header -->	136	</div><!-- header -->
137	<p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>	137	<p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
138	<div class="joined_wrapper">	138	<div class="joined_wrapper">
139	<ul class="joined-info info_bc_spc">	139	<ul class="joined-info info_bc_spc">
140	<li> <img src="../assets/images/purple-heart.png"> </li>	140	<li> <img src="../assets/images/purple-heart.png"> </li>
141	<li> <a href="#"> 4</a> </li>	141	<li> <a href="javascript:void(0);"> 4</a> </li>
142	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>	142	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
143	<li> <a href="#"> 6</a> </li>	143	<li> <a href="javascript:void(0);"> 6</a> </li>
144	</ul>	144	</ul>
145	<div class="add_rply">	145	<div class="add_rply">
146	<input type="text" placeholder="Add your reply" />	146	<input type="text" placeholder="Add your reply" />
147	</div><!-- rly form -->	147	</div><!-- rly form -->
148	</div><!-- joined wrapper -->	148	</div><!-- joined wrapper -->
149	</div><!-- full width -->	149	</div><!-- full width -->
150	</div><!-- child wrapper -->	150	</div><!-- child wrapper -->
151	<div class="child-full-width">	151	<div class="child-full-width">
152	<div class="full-width">	152	<div class="full-width">
153	<div class="b-user-head"><img src="../assets/images/b-user1.png" />	153	<div class="b-user-head"><img src="../assets/images/b-user1.png" />
154	<span class="head-content">Onenoisyboi </span>	154	<span class="head-content">Onenoisyboi </span>
155	<ul>	155	<ul>
156	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>	156	<li> <span></span><img src="../assets/images/u-info-icon.png" />6pts</li>
157	<li> <span></span>3days ago</li>	157	<li> <span></span>3days ago</li>
158		158
159	</ul>	159	</ul>
160		160
161		161
162	</div><!-- header -->	162	</div><!-- header -->
163	<p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>	163	<p>I really liked the palette of the icons dunzo has they dont match with my jeans</p>
164	<div class="joined_wrapper">	164	<div class="joined_wrapper">
165	<ul class="joined-info info_bc_spc">	165	<ul class="joined-info info_bc_spc">
166	<li> <img src="../assets/images/purple-heart.png"> </li>	166	<li> <img src="../assets/images/purple-heart.png"> </li>
167	<li> <a href="#"> 4</a> </li>	167	<li> <a href="javascript:void(0);"> 4</a> </li>
168	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>	168	<li class="comment-spc"> <img src="../assets/images/purple-comment.png"> </li>
169	<li> <a href="#"> 6</a> </li>	169	<li> <a href="javascript:void(0);"> 6</a> </li>
170	</ul>	170	</ul>
171	<div class="add_rply">	171	<div class="add_rply">
172	<input type="text" placeholder="Add your reply" />	172	<input type="text" placeholder="Add your reply" />
173	</div><!-- rly form -->	173	</div><!-- rly form -->
174	</div><!-- joined wrapper -->	174	</div><!-- joined wrapper -->
175	</div><!-- full width -->	175	</div><!-- full width -->
176	</div><!-- child wrapper -->	176	</div><!-- child wrapper -->
177	</li>	177	</li>
178		178
179	</ul><!-- all user comments -->	179	</ul><!-- all user comments -->
180	</div><!-- bounce board body -->	180	</div><!-- bounce board body -->
181	<div class="comments-footer">	181	<div class="comments-footer">
182	<textarea></textarea>	182	<textarea></textarea>
183	<div class="comments-footer-wrp">	183	<div class="comments-footer-wrp">
184	<a href="#" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a>	184	<a href="javascript:void(0);" class="add_comments_chat"><img src="../assets/images/add-comment.svg" /> Comment</a>
185	</div>	185	</div>
186	</div><!-- comments footer -->	186	</div><!-- comments footer -->
187	</div>	187	</div>
188	</div><!-- bounceboard wrp -->	188	</div><!-- bounceboard wrp -->
189	<div class="single-mobileInsight">	189	<div class="single-mobileInsight">
190	<img src="../assets/images/slide.png" class="slide-img" />	190	<img src="../assets/images/slide.png" class="slide-img" />
191	<div class="single-left-Insight-comments">	191	<div class="single-left-Insight-comments">
192	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />	192	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
193	<div class="single-author-li-comments">	193	<div class="single-author-li-comments">
194	<div class="a-intro-comments custom-c-style">	194	<div class="a-intro-comments custom-c-style">
195	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	195	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
196	<ul class="rly-comment-set">	196	<ul class="rly-comment-set">
197	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	197	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
198	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	198	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
199	</ul>	199	</ul>
200	</div><!-- comments box -->	200	</div><!-- comments box -->
201	</div><!-- single author comments -->	201	</div><!-- single author comments -->
202	<div class="single-author-li-comments">	202	<div class="single-author-li-comments">
203	<div class="a-intro-comments custom-c-style">	203	<div class="a-intro-comments custom-c-style">
204	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	204	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
205	<ul class="rly-comment-set">	205	<ul class="rly-comment-set">
206	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	206	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
207	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	207	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
208	</ul>	208	</ul>
209	</div><!-- comments box -->	209	</div><!-- comments box -->
210	</div><!-- single author comments -->	210	</div><!-- single author comments -->
211	</div><!-- single mobile Left insight -->	211	</div><!-- single mobile Left insight -->
212	<div class="c-product-insight-wrp ">	212	<div class="c-product-insight-wrp ">
213	<div class="single-author-li-comments ">	213	<div class="single-author-li-comments ">
214	<div class="a-intro-comments custom-selected-style">	214	<div class="a-intro-comments custom-selected-style">
215	<img src="../assets/images/rect.svg" class="rect" />	215	<img src="../assets/images/rect.svg" class="rect" />
216	<div class="top-wrp">	216	<div class="top-wrp">
217	PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	217	PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
218	</div>	218	</div>
219	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>	219	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
220	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.	220	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
221	<br><br>	221	<br><br>
222	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>	222	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
223	</p>	223	</p>
224	<div class="footer">	224	<div class="footer">
225	<a href="#" class="cit-16">16 Citations</a>	225	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
226	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	226	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
227	</div><!-- footer -->	227	</div><!-- footer -->
228		228
229	</div><!-- comments box -->	229	</div><!-- comments box -->
230	</div><!-- single author comments -->	230	</div><!-- single author comments -->
231		231
232	</div><!-- single mobile Right insight -->	232	</div><!-- single mobile Right insight -->
233	</div><!-- Single Mobile Insight -->	233	</div><!-- Single Mobile Insight -->
234	<div class="footer-nav">	234	<div class="footer-nav">
235	<div class="footer-top">	235	<div class="footer-top">
236	<div class="row">	236	<div class="row">
237	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	237	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
238	<div class="row h-100p">	238	<div class="row h-100p">
239	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	239	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
240	<ul class="top-intro-bt">	240	<ul class="top-intro-bt">
241	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	241	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
242	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>	242	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to the next slide</a></li>
243	</ul>	243	</ul>
244	</div>	244	</div>
245		245
246	</div>	246	</div>
247	</div>	247	</div>
248	</div>	248	</div>
249	</div><!-- footer top -->	249	</div><!-- footer top -->
250	<div class="footer-bottom">	250	<div class="footer-bottom">
251	<ul>	251	<ul>
252	<li class=""></li>	252	<li class=""></li>
253	<li></li>	253	<li></li>
254	</ul>	254	</ul>
255	</div><!-- footer top -->	255	</div><!-- footer top -->
256	</div><!-- footer -->	256	</div><!-- footer -->
257		257
258	</div>	258	</div>
259	<!-- body wrapper -->	259	<!-- body wrapper -->
260	</div>	260	</div>
261	<!-- main wrapper -->	261	<!-- main wrapper -->
262	</main>	262	</main>
263	</template>	263	</template>
264		264
265	<script>	265	<script>
266	import Vue from "vue";	266	import Vue from "vue";
267	import router from "../router";	267	import router from "../router";
268		268
269	export default {	269	export default {
270	name: "ReadingFlowBounceBoard_chat",	270	name: "ReadingFlowBounceBoard_chat",
271		271
272	data() {	272	data() {
273	return {};	273	return {};
274	},	274	},
275	mounted() {},	275	mounted() {},
276	methods: {	276	methods: {
277	goToLogin() {	277	goToLogin() {
278	this.$router.push("/");	278	this.$router.push("/login");
279	},	279	},
280	goToSignUp() {	280	goToSignUp() {
281	this.$router.push("/signup");	281	this.$router.push("/");
282	},	282	},
283	best_sort(){	283	best_sort(){
284	$(".short_by").toggle();	284	$(".short_by").toggle();
285	},	285	},
286	},	286	},
287	};	287	};
288	</script>	288	</script>
289		289

src/components/Reset.vue

Diff comments View file @56f4b75

 <template>
   <main class="landing-page">
     <div class="container-fluid main-wrp">
       <nav class="navbar navbar-expand-sm spotLight-nav">
-        <a class="navbar-brand" href="#"
+        <a class="navbar-brand" href="javascript:void(0);"
           ><img src="../assets/images/logo.png"
         /></a>
         <button
           class="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarsExample03"
           aria-controls="navbarsExample03"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" href="#">About</a>
+              <a class="nav-link" href="javascript:void(0);">About</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Masterclass</a>
+              <a class="nav-link" href="javascript:void(0);">Masterclass</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Stories</a>
+              <a class="nav-link" href="javascript:void(0);">Stories</a>
             </li>
             <li class="nav-item spotLight-img">
-              <a class="nav-link" href="#"
+              <a class="nav-link" href="javascript:void(0);"
                 ><img src="../assets/images/SPOTLight.svg"
               /></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Library</a>
+              <a class="nav-link" href="javascript:void(0);">Library</a>
             </li>
           </ul>
         </div>
       </nav>
       <!-- menu wrapper -->
       <div class="row col-reverse">
         <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
         <!-- users land image -->
         <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
           <h1>
-            Welcome to <br />
+            <!-- Welcome to <br />
-            Productgrowth
+            Productgrowth -->
+             Hello, there!<br />
+welcome to spotlight
           </h1>
           <ul class="sign-in-up-list">
             <li>
               <img src="../assets/images/check.svg" /><span
-                >Connect & learn from fellow product enthusiasts</span
+                >Collaborate, Contribute and Explore with fellow product enthusiasts</span
               >
             </li>
             <li>
               <img src="../assets/images/check.svg" /><span
-                >Share & pickup deeper insights from real world products</span
+                >Get access to insightful Case Studies and participate in Roundtables</span
               >
             </li>
             <li>
               <img src="../assets/images/check.svg" /><span
-                >Access to XX Casestudies</span
+                >Engage actively on the
+Bounce Board - we’re all ears!
+</span
               >
             </li>
           </ul>
         </div>
         <!-- users land image -->
         <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
           <div class="form-layout signup-frm-spc">
-            <form class="reset-pass-spc">
+            <form  >
               <h5>
-                Forgot password? Enter your e-Mail ID<br />
+                Forgot password? Enter your Email <br /> ID to retrieve it
-                to retrive
               </h5>
               <div class="fill-form">
                 <label for="inputEmail" class="sr-only">Email address</label>
                 <input
                   type="email"
                   id="inputEmail"
                   class="form-control"
                   placeholder="Your Email ID"
                   v-model="email"
                 />
                 <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="forgotPassword">
                   <img src="../assets/images/key.svg" /> Reset Password
                 </a>
-                <h3 class="go-back">
+                <h3 class="ft-normal">
-                  <span>Go back to </span><a @click="goToLogin">Login</a><span> / </span
+                  <span>Go back to </span><a class="cursor-pointer no-underline" @click="goToLogin">Login</a><span> / </span
-                  ><a @click="goToSignUp">SignUp</a>
+                  ><a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a>
                 </h3>
               </div>
             </form>
           </div>
         </div>
         <!-- sign up -->
       </div>
       <!-- body wrapper -->
     </div>
     <!-- main wrapper -->
   </main>
 </template>
 <script>
 import Vue from "vue";
 import router from "../router";
 import axios from "axios";
 export default {
   name: "Reset",
   data() {
     return {
       email:null,
     };
   },
   mounted() {},
   methods: {
     goToLogin() {
-      this.$router.push("/");
+      this.$router.push("/login");
     },
     goToSignUp() {
-      this.$router.push("/signup");
+      this.$router.push("/");
     },
     forgotPassword(){
          axios
         .post("/forgotPassword", {'email':this.email,'forgotPassword':true})
         .then((response) => {
            console.log("forgotPassword- response",response)
           this.$toaster.success(response.data.message)
           if(response.data.status == 'success'){
             localStorage.setItem('spotlight_email', this.email);
             this.$router.push("/changepassword");
           }
         })
         .catch( (error) =>{
           if (error.response) {
             this.$toaster.error(error.response.data.message)
           }
         });
     }
   },
 };
 </script>

src/components/SignUp.vue

Diff comments View file @56f4b75

 <template>
   <main class="landing-page">
     <div class="container-fluid main-wrp">
       <nav class="navbar navbar-expand-sm spotLight-nav">
-        <a class="navbar-brand" href="#"
+        <a class="navbar-brand" href="javascript:void(0);"
           ><img src="../assets/images/logo.png"
         /></a>
         <button
           class="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarsExample03"
           aria-controls="navbarsExample03"
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarsExample03">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-              <a class="nav-link" href="#">About</a>
+              <a class="nav-link" href="javascript:void(0);">About</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Masterclass</a>
+              <a class="nav-link" href="javascript:void(0);">Masterclass</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Stories</a>
+              <a class="nav-link" href="javascript:void(0);">Stories</a>
             </li>
             <li class="nav-item spotLight-img">
-              <a class="nav-link" href="#"
+              <a class="nav-link" href="javascript:void(0);"
                 ><img src="../assets/images/SPOTLight.svg"
               /></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#">Library</a>
+              <a class="nav-link" href="javascript:void(0);">Library</a>
             </li>
           </ul>
         </div>
       </nav>
       <!-- menu wrapper -->
       <div class="sign-wrp">
         <div class="row col-reverse">
           <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
           <!-- users land image -->
           <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
             <h1>
-              Welcome to <br />
+              Hello, there!<br />
-              Productgrowth
+welcome to spotlight
+              <!-- Welcome to <br />
+              Productgrowth -->
             </h1>
             <ul class="sign-in-up-list">
               <li>
                 <img src="../assets/images/check.svg" /><span
-                  >Connect & learn from fellow product enthusiasts</span
+                  >Collaborate, Contribute and Explore with fellow product enthusiasts</span
                 >
               </li>
               <li>
                 <img src="../assets/images/check.svg" /><span
-                  >Share & pickup deeper insights from real world products</span
+                  >Get access to insightful Case Studies and participate in Roundtables</span
                 >
               </li>
               <li>
                 <img src="../assets/images/check.svg" /><span
-                  >Access to XX Casestudies</span
+                  >Engage actively on the
+Bounce Board - we’re all ears!
+</span
                 >
               </li>
             </ul>
           </div>
           <!-- users land image -->
           <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
             <div class="form-layout signup-frm-spc">
-              <form>
+              <form v-on:keyup.enter="signup">
-                <h5>SignUp Using</h5>
+                <h5>Sign Up using</h5>
                 <div class="social-login">
-                  <ul>
+                <ul>
-                    <li>
+                  <li>
-                      <a href="#"><img src="../assets/images/google.svg" /></a>
+                    <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
-                    </li>
+                  </li>
-                    <li>
+                  <li>
-                      <a href="#"><img src="../assets/images/linkdin.svg" /></a>
+                    <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
-                    </li>
+                  </li>
-                    <li>
+                  <li>
-                      <a href="#"><img src="../assets/images/twitter.svg" /></a>
+                    <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
-                    </li>
+                  </li>
-                  </ul>
+                </ul>
-                </div>
+              </div>
-                <h5>or Signup with email</h5>
+                <h5>or Sign Up with Email</h5>
                 <div class="fill-form">
                   <label for="inputEmail" class="sr-only">Email address</label>
                   <input
                     type="email"
                     id="inputEmail"
                     class="form-control"
                     placeholder="Your Email ID"
                     autocomplete="off"
                     v-model="userData.email"
                   />
                   <label for="inputPassword" class="sr-only">Password</label>
                   <input
                     type="password"
                     id="inputPassword"
                     class="form-control"
                     placeholder="Password"
                     v-model="userData.password"
                   />
                   <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup">
                     <img src="../assets/images/user-plus.svg" /> Create Account
                   </a>
                   <p class="">
                     By signing up I agree to the <a>Privacy Policy</a> and
                     <a>Terms of Service</a>
                   </p>
-                  <h3>Have an account? <a @click="goToLogin">Login</a></h3>
+                  <h3 class="ft-normal">Have an account? <a class="cursor-pointer no-underline" @click="goToLogin">Login</a></h3>
                 </div>
               </form>
             </div>
           </div>
           <!-- sign up -->
         </div>
       </div>
       <!-- body wrapper -->
     </div>
   </main>
 </template>
 <script>
 import Vue from "vue";
 import router from "../router";
 import axios from "axios";
 export default {
   name: "SignUp",
   data() {
     return {
       userData: {},
     };
   },
-  mounted() {},
+   mounted() {
+    // this.$auth.logout();
+    localStorage.removeItem("spotlight_usertoken");
+    localStorage.removeItem("spotlight_email");
+  },
   methods: {
+     login() {
+      this.$auth.loginWithRedirect();
+    },
     goToLogin() {
-      this.$router.push("/");
+      this.$router.push("/login");
     },
     signup() {
       axios
         .post("/signup", this.userData)
         .then((response) => {
             this.$toaster.success(response.data.message);
           if(response.data.status == 'success'){
             localStorage.setItem('spotlight_email', this.userData.email);
             this.$router.push({ name: 'Otp', params: { flag: false }});
           }
         })
         .catch( (error) =>{
           if (error.response) {
             this.$toaster.error(error.response.data.message);
           }
         });
     },
   },
 };
 </script>
+<style>
+.light-font-weight {
+  font-weight: 500 !important;
+}
+</style>

src/components/SingleAuthor.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/lock.svg"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="single-author-comments">	18	<div class="single-author-comments">
19	<img class="s-user-comments" src="../assets/images/u-info.png" />	19	<img class="s-user-comments" src="../assets/images/u-info.png" />
20	<div class="comments-a-wrp">	20	<div class="comments-a-wrp">
21	<div class="single-author-li-comments">	21	<div class="single-author-li-comments">
22	<div class="a-intro-comments">	22	<div class="a-intro-comments">
23	<p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p>	23	<p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p>
24	<ul class="rly-comment-set">	24	<ul class="rly-comment-set">
25	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	25	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
26	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	26	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
27	</ul>	27	</ul>
28	</div><!-- comments box -->	28	</div><!-- comments box -->
29	</div><!-- single author comments -->	29	</div><!-- single author comments -->
30	<div class="single-author-li-comments">	30	<div class="single-author-li-comments">
31	<div class="a-intro-comments">	31	<div class="a-intro-comments">
32	<p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p>	32	<p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p>
33	<ul class="rly-comment-set">	33	<ul class="rly-comment-set">
34	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	34	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
35	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	35	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
36	</ul>	36	</ul>
37	</div><!-- comments box -->	37	</div><!-- comments box -->
38	</div><!-- single author comments -->	38	</div><!-- single author comments -->
39	<div class="single-author-li-comments">	39	<div class="single-author-li-comments">
40	<div class="a-intro-comments">	40	<div class="a-intro-comments">
41	<p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p>	41	<p> Before I dive in to showcase my observations and userflows that stood out to me in the app, I want to call out that the situation or time-frame in which I was using the app is extremely important for what I am about to show as well.</p>
42	<ul class="rly-comment-set">	42	<ul class="rly-comment-set">
43	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	43	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
44	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	44	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
45	</ul>	45	</ul>
46	</div><!-- comments box -->	46	</div><!-- comments box -->
47	</div><!-- single author comments -->	47	</div><!-- single author comments -->
48	</div>	48	</div>
49	</div><!-- single author comments -->	49	</div><!-- single author comments -->
50	<div class="footer-nav">	50	<div class="footer-nav">
51	<div class="footer-top white-bg">	51	<div class="footer-top white-bg">
52	<div class="row">	52	<div class="row">
53	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">	53	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
54	<div class="row h-100p">	54	<div class="row h-100p">
55	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">	55	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
56	<ul class="top-intro-bt">	56	<ul class="top-intro-bt">
57	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	57	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
58	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	58	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
59	</ul>	59	</ul>
60	</div>	60	</div>
61	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">	61	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
62	<div class="ft-comments-group">	62	<div class="ft-comments-group">
63	<div class="c-with-photos">	63	<div class="c-with-photos">
64	<span class="count-comments">16+ Comments</span><!-- count commets -->	64	<span class="count-comments">16+ Comments</span><!-- count commets -->
65	<ul class="comments-photos">	65	<ul class="comments-photos">
66	<li><img src="../assets/images/c-photo-1.png" /></li>	66	<li><img src="../assets/images/c-photo-1.png" /></li>
67	<li><img src="../assets/images/c-photo-2.png" /></li>	67	<li><img src="../assets/images/c-photo-2.png" /></li>
68	<li><img src="../assets/images/c-photo-3.png" /></li>	68	<li><img src="../assets/images/c-photo-3.png" /></li>
69	</ul><!-- comment photos -->	69	</ul><!-- comment photos -->
70	</div>	70	</div>
71	<div class="comments-detail all-c-space">	71	<div class="comments-detail all-c-space">
72	<span>Saudrika commented <a href="#">View All</a></span>	72	<span>Saudrika commented <a href="javascript:void(0);">View All</a></span>
73	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>	73	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>
74	</div><!-- comments detail -->	74	</div><!-- comments detail -->
75		75
76	</div><!-- comments Group -->	76	</div><!-- comments Group -->
77	</div></div>	77	</div></div>
78	</div>	78	</div>
79	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">	79	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
80		80
81	<div class="comment-frm no-c-frm">	81	<div class="comment-frm no-c-frm">
82	<div class="row">	82	<div class="row">
83	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	83	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
84	<div class="form-group frm-wdth addfrm-spc">	84	<div class="form-group frm-wdth addfrm-spc">
85	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	85	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
86	</div></div>	86	</div></div>
87	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	87	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
88	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	88	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
89	</div>	89	</div>
90	</div><!-- comment from -->	90	</div><!-- comment from -->
91	</div> </div></div>	91	</div> </div></div>
92	</div><!-- footer top -->	92	</div><!-- footer top -->
93	<div class="footer-bottom">	93	<div class="footer-bottom">
94	<ul>	94	<ul>
95	<li class="active"></li>	95	<li class="active"></li>
96	<li></li>	96	<li></li>
97	</ul>	97	</ul>
98	</div><!-- footer top -->	98	</div><!-- footer top -->
99	</div><!-- footer -->	99	</div><!-- footer -->
100		100
101	</div>	101	</div>
102	<!-- body wrapper -->	102	<!-- body wrapper -->
103	</div>	103	</div>
104	<!-- main wrapper -->	104	<!-- main wrapper -->
105	</main>	105	</main>
106	</template>	106	</template>
107		107
108	<script>	108	<script>
109	import Vue from "vue";	109	import Vue from "vue";
110	import router from "../router";	110	import router from "../router";
111		111
112	export default {	112	export default {
113	name: "SingleAuthor",	113	name: "SingleAuthor",
114		114
115	data() {	115	data() {
116	return {};	116	return {};
117	},	117	},
118	mounted() {},	118	mounted() {},
119	methods: {	119	methods: {
120	goToLogin() {	120	goToLogin() {
121	this.$router.push("/");	121	this.$router.push("/login");
122	},	122	},
123	goToSignUp() {	123	goToSignUp() {
124	this.$router.push("/signup");	124	this.$router.push("/");
125	},	125	},
126		126
127	},	127	},
128	};	128	};
129	</script>	129	</script>
130		130

src/components/SingleMobileInsight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="single-mobileInsight">	18	<div class="single-mobileInsight">
19	<div class="top-area-blank"></div>	19	<div class="top-area-blank"></div>
20	<img src="../assets/images/slide.png" class="slide-img" />	20	<img src="../assets/images/slide.png" class="slide-img" />
21	<div class="single-left-Insight-comments">	21	<div class="single-left-Insight-comments">
22	<div class="author-thoughts">	22	<div class="author-thoughts">
23		23
24	<img	24	<img
25	src="../assets/images/thoughts-upper.svg"	25	src="../assets/images/thoughts-upper.svg"
26	class="upper-th"	26	class="upper-th"
27	/>	27	/>
28	<img src="../assets/images/user.png" class="dynamic-thoughts"	28	<img src="../assets/images/user.png" class="dynamic-thoughts"
29	/>	29	/>
30	</div><!-- user thoughts -->	30	</div><!-- user thoughts -->
31	<div class="single-author-li-comments">	31	<div class="single-author-li-comments">
32	<div class="a-intro-comments custom-c-style">	32	<div class="a-intro-comments custom-c-style">
33	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	33	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
34	<ul class="rly-comment-set">	34	<ul class="rly-comment-set">
35	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	35	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
36	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	36	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
37	</ul>	37	</ul>
38	</div><!-- comments box -->	38	</div><!-- comments box -->
39	</div><!-- single author comments -->	39	</div><!-- single author comments -->
40	<div class="single-author-li-comments">	40	<div class="single-author-li-comments">
41	<div class="a-intro-comments custom-c-style">	41	<div class="a-intro-comments custom-c-style">
42	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	42	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
43	<ul class="rly-comment-set">	43	<ul class="rly-comment-set">
44	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	44	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
45	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	45	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
46	</ul>	46	</ul>
47	</div><!-- comments box -->	47	</div><!-- comments box -->
48	</div><!-- single author comments -->	48	</div><!-- single author comments -->
49	</div><!-- single mobile Left insight -->	49	</div><!-- single mobile Left insight -->
50	<div class="single-m-Insight-comments">	50	<div class="single-m-Insight-comments">
51	<div class="single-author-li-comments">	51	<div class="single-author-li-comments">
52	<div class="a-intro-comments">	52	<div class="a-intro-comments">
53	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	53	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
54	<ul class="rly-comment-set">	54	<ul class="rly-comment-set">
55	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	55	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
56	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	56	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
57	</ul>	57	</ul>
58	</div><!-- comments box -->	58	</div><!-- comments box -->
59	</div><!-- single author comments -->	59	</div><!-- single author comments -->
60	<div class="single-author-li-comments">	60	<div class="single-author-li-comments">
61	<div class="a-intro-comments">	61	<div class="a-intro-comments">
62	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	62	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
63	<ul class="rly-comment-set">	63	<ul class="rly-comment-set">
64	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	64	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
65	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	65	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
66	</ul>	66	</ul>
67	</div><!-- comments box -->	67	</div><!-- comments box -->
68	</div><!-- single author comments -->	68	</div><!-- single author comments -->
69	</div><!-- single mobile Right insight -->	69	</div><!-- single mobile Right insight -->
70	</div><!-- Single Mobile Insight -->	70	</div><!-- Single Mobile Insight -->
71	<div class="footer-nav">	71	<div class="footer-nav">
72	<div class="footer-top white-bg">	72	<div class="footer-top white-bg">
73	<div class="row">	73	<div class="row">
74	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	74	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
75	<div class="row h-100p">	75	<div class="row h-100p">
76	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	76	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
77	<ul class="top-intro-bt">	77	<ul class="top-intro-bt">
78	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	78	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
79	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	79	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
80	</ul>	80	</ul>
81	</div>	81	</div>
82	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">	82	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
83	<div class="ft-comments-group no-comment-count">	83	<div class="ft-comments-group no-comment-count">
84	<div class="row">	84	<div class="row">
85		85
86	<div class="col-12">	86	<div class="col-12">
87	<img src="../assets/images/u-comments.svg" class="no-comments-img" />	87	<img src="../assets/images/u-comments.svg" class="no-comments-img" />
88	<div class="comments-detail">	88	<div class="comments-detail">
89	<span class="no-c-yet">No comments yet</span>	89	<span class="no-c-yet">No comments yet</span>
90	<p>Be the first one to post a comment to start a discussion</p>	90	<p>Be the first one to post a comment to start a discussion</p>
91	</div><!-- comments detail -->	91	</div><!-- comments detail -->
92	</div> </div>	92	</div> </div>
93	</div><!-- comments Group -->	93	</div><!-- comments Group -->
94	</div></div>	94	</div></div>
95	</div>	95	</div>
96	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">	96	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
97		97
98	<div class="comment-frm no-c-frm">	98	<div class="comment-frm no-c-frm">
99	<div class="row">	99	<div class="row">
100	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	100	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
101	<div class="form-group frm-wdth">	101	<div class="form-group frm-wdth">
102	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	102	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
103	</div></div>	103	</div></div>
104	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	104	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
105	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	105	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
106	</div>	106	</div>
107	</div><!-- comment from -->	107	</div><!-- comment from -->
108	</div> </div></div>	108	</div> </div></div>
109	</div><!-- footer top -->	109	</div><!-- footer top -->
110	<div class="footer-bottom">	110	<div class="footer-bottom">
111	<ul>	111	<ul>
112	<li class="active"></li>	112	<li class="active"></li>
113	<li></li>	113	<li></li>
114	</ul>	114	</ul>
115	</div><!-- footer top -->	115	</div><!-- footer top -->
116	</div><!-- footer -->	116	</div><!-- footer -->
117		117
118	</div>	118	</div>
119	<!-- body wrapper -->	119	<!-- body wrapper -->
120	</div>	120	</div>
121	<!-- main wrapper -->	121	<!-- main wrapper -->
122	</main>	122	</main>
123	</template>	123	</template>
124		124
125	<script>	125	<script>
126	import Vue from "vue";	126	import Vue from "vue";
127	import router from "../router";	127	import router from "../router";
128		128
129	export default {	129	export default {
130	name: "SingleMobileInsight",	130	name: "SingleMobileInsight",
131		131
132	data() {	132	data() {
133	return {};	133	return {};
134	},	134	},
135	mounted() {},	135	mounted() {},
136	methods: {	136	methods: {
137	goToLogin() {	137	goToLogin() {
138	this.$router.push("/");	138	this.$router.push("/login");
139	},	139	},
140	goToSignUp() {	140	goToSignUp() {
141	this.$router.push("/signup");	141	this.$router.push("/");
142	},	142	},
143		143
144	},	144	},
145	};	145	};
146	</script>	146	</script>
147		147

src/components/SingleMobileScreenChatComments.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="single-mobileInsight">	18	<div class="single-mobileInsight">
19	<img src="../assets/images/slide.png" class="slide-img" />	19	<img src="../assets/images/slide.png" class="slide-img" />
20	<div class="single-left-Insight-comments single-chat-c-left">	20	<div class="single-left-Insight-comments single-chat-c-left">
21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />	21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22	<div class="single-author-li-comments">	22	<div class="single-author-li-comments">
23	<div class="a-intro-comments custom-c-style">	23	<div class="a-intro-comments custom-c-style">
24	<img src="../assets/images/user.png" class="user-t-1" />	24	<img src="../assets/images/user.png" class="user-t-1" />
25	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	25	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
26	<ul class="rly-comment-set">	26	<ul class="rly-comment-set">
27	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	27	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
28	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	28	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
29	</ul>	29	</ul>
30	</div><!-- comments box -->	30	</div><!-- comments box -->
31	</div><!-- single author comments -->	31	</div><!-- single author comments -->
32	<div class="single-author-li-comments">	32	<div class="single-author-li-comments">
33	<div class="a-intro-comments custom-c-style">	33	<div class="a-intro-comments custom-c-style">
34	<img src="../assets/images/user.png" class="user-t-1" />	34	<img src="../assets/images/user.png" class="user-t-1" />
35	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	35	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
36	<ul class="rly-comment-set">	36	<ul class="rly-comment-set">
37	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	37	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
38	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	38	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
39	</ul>	39	</ul>
40	</div><!-- comments box -->	40	</div><!-- comments box -->
41	</div><!-- single author comments -->	41	</div><!-- single author comments -->
42	</div><!-- single mobile Left insight -->	42	</div><!-- single mobile Left insight -->
43	<div class="single-m-Insight-comments single-chat-c-right">	43	<div class="single-m-Insight-comments single-chat-c-right">
44	<img src="../assets/images/user-2.svg" class="author2-thoughts" />	44	<img src="../assets/images/user-2.svg" class="author2-thoughts" />
45	<div class="single-author-li-comments ">	45	<div class="single-author-li-comments ">
46	<div class="a-intro-comments cust-user2-style">	46	<div class="a-intro-comments cust-user2-style">
47	<img src="../assets/images/user-2-set.svg" class="user-t-2" />	47	<img src="../assets/images/user-2-set.svg" class="user-t-2" />
48	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	48	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
49	<ul class="rly-comment-set">	49	<ul class="rly-comment-set">
50	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	50	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
51	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	51	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
52	</ul>	52	</ul>
53	</div><!-- comments box -->	53	</div><!-- comments box -->
54	</div><!-- single author comments -->	54	</div><!-- single author comments -->
55	<div class="single-author-li-comments">	55	<div class="single-author-li-comments">
56	<div class="a-intro-comments cust-user2-style">	56	<div class="a-intro-comments cust-user2-style">
57	<img src="../assets/images/user-2-set.svg" class="user-t-2" />	57	<img src="../assets/images/user-2-set.svg" class="user-t-2" />
58	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	58	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
59	<ul class="rly-comment-set">	59	<ul class="rly-comment-set">
60	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	60	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
61	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	61	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
62	</ul>	62	</ul>
63	</div><!-- comments box -->	63	</div><!-- comments box -->
64	</div><!-- single author comments -->	64	</div><!-- single author comments -->
65	</div><!-- single mobile Right insight -->	65	</div><!-- single mobile Right insight -->
66	</div><!-- Single Mobile Insight -->	66	</div><!-- Single Mobile Insight -->
67	<div class="footer-nav">	67	<div class="footer-nav">
68	<div class="footer-top white-bg">	68	<div class="footer-top white-bg">
69	<div class="row">	69	<div class="row">
70	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	70	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
71	<div class="row h-100p">	71	<div class="row h-100p">
72	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	72	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
73	<ul class="top-intro-bt">	73	<ul class="top-intro-bt">
74	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	74	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
75	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	75	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
76	</ul>	76	</ul>
77	</div>	77	</div>
78	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">	78	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
79	<div class="ft-comments-group no-comment-count">	79	<div class="ft-comments-group no-comment-count">
80	<div class="row">	80	<div class="row">
81		81
82	<div class="col-12">	82	<div class="col-12">
83	<img src="../assets/images/u-comments.svg" class="no-comments-img" />	83	<img src="../assets/images/u-comments.svg" class="no-comments-img" />
84	<div class="comments-detail">	84	<div class="comments-detail">
85	<span class="no-c-yet">No comments yet</span>	85	<span class="no-c-yet">No comments yet</span>
86	<p>Be the first one to post a comment to start a discussion</p>	86	<p>Be the first one to post a comment to start a discussion</p>
87	</div><!-- comments detail -->	87	</div><!-- comments detail -->
88	</div> </div>	88	</div> </div>
89	</div><!-- comments Group -->	89	</div><!-- comments Group -->
90	</div></div>	90	</div></div>
91	</div>	91	</div>
92	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">	92	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
93		93
94	<div class="comment-frm no-c-frm">	94	<div class="comment-frm no-c-frm">
95	<div class="row">	95	<div class="row">
96	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	96	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
97	<div class="form-group frm-wdth">	97	<div class="form-group frm-wdth">
98	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	98	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
99	</div></div>	99	</div></div>
100	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	100	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
101	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	101	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
102	</div>	102	</div>
103	</div><!-- comment from -->	103	</div><!-- comment from -->
104	</div> </div></div>	104	</div> </div></div>
105	</div><!-- footer top -->	105	</div><!-- footer top -->
106	<div class="footer-bottom">	106	<div class="footer-bottom">
107	<ul>	107	<ul>
108	<li class="active"></li>	108	<li class="active"></li>
109	<li></li>	109	<li></li>
110	</ul>	110	</ul>
111	</div><!-- footer top -->	111	</div><!-- footer top -->
112	</div><!-- footer -->	112	</div><!-- footer -->
113		113
114	</div>	114	</div>
115	<!-- body wrapper -->	115	<!-- body wrapper -->
116	</div>	116	</div>
117	<!-- main wrapper -->	117	<!-- main wrapper -->
118	</main>	118	</main>
119	</template>	119	</template>
120		120
121	<script>	121	<script>
122	import Vue from "vue";	122	import Vue from "vue";
123	import router from "../router";	123	import router from "../router";
124		124
125	export default {	125	export default {
126	name: "SingleMobileScreenChatComments",	126	name: "SingleMobileScreenChatComments",
127		127
128	data() {	128	data() {
129	return {};	129	return {};
130	},	130	},
131	mounted() {},	131	mounted() {},
132	methods: {	132	methods: {
133	goToLogin() {	133	goToLogin() {
134	this.$router.push("/");	134	this.$router.push("/login");
135	},	135	},
136	goToSignUp() {	136	goToSignUp() {
137	this.$router.push("/signup");	137	this.$router.push("/");
138	},	138	},
139		139
140	},	140	},
141	};	141	};
142	</script>	142	</script>

src/components/SingleMobileScreenInsightOne.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"	5	<a class="navbar-brand" href="javascript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="#"><img src="../assets/images/user.png" /></a>	22	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23	</div>	23	</div>
24	</nav>	24	</nav>
25	<!-- menu wrapper -->	25	<!-- menu wrapper -->
26	<div class="intro-startup">	26	<div class="intro-startup">
27		27
28		28
29	<!-- chat box -->	29	<!-- chat box -->
30	<div class="bounce-board-wrp" id="cht_box_close">	30	<div class="bounce-board-wrp" id="cht_box_close">
31	<div class="inner-wrp-bc">	31	<div class="inner-wrp-bc">
32	<div class="bc-top-head">	32	<div class="bc-top-head">
33	<span class="bc-head">	33	<span class="bc-head">
34	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	34	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
35	</span>	35	</span>
36	<div class="action-sort">	36	<div class="action-sort">
37	<span class="sort-by">SORT BY</span>	37	<span class="sort-by">SORT BY</span>
38	<div class="btn-group">	38	<div class="btn-group">
39	<button	39	<button
40	type="button"	40	type="button"
41	class="bc-sort-list dropdown-toggle"	41	class="bc-sort-list dropdown-toggle"
42	data-toggle="dropdown"	42	data-toggle="dropdown"
43	aria-haspopup="true"	43	aria-haspopup="true"
44	aria-expanded="false"	44	aria-expanded="false"
45	>	45	>
46	BEST	46	BEST
47	</button>	47	</button>
48	<div class="dropdown-menu short_by">	48	<div class="dropdown-menu short_by">
49	<a class="dropdown-item" href="javasript:void(0);"	49	<a class="dropdown-item" href="javasript:void(0);"
50	>BEST 1</a	50	>BEST 1</a
51	>	51	>
52	<a class="dropdown-item" href="javasript:void(0);"	52	<a class="dropdown-item" href="javasript:void(0);"
53	>BEST 2</a	53	>BEST 2</a
54	>	54	>
55	<a class="dropdown-item" href="javasript:void(0);"	55	<a class="dropdown-item" href="javasript:void(0);"
56	>BEST 3</a	56	>BEST 3</a
57	>	57	>
58	</div>	58	</div>
59	</div>	59	</div>
60	<a	60	<a
61	href="javasript:void(0);"	61	href="javasript:void(0);"
62	@click="chtbox_close"	62	@click="chtbox_close"
63	class="close_chat_bx"	63	class="close_chat_bx"
64	><img src="../assets/images/close.png" alt="close" /></a	64	><img src="../assets/images/close.png" alt="close" /></a
65	><!-- close -->	65	><!-- close -->
66	</div>	66	</div>
67	<!-- action sort -->	67	<!-- action sort -->
68	</div>	68	</div>
69	<!-- top head -->	69	<!-- top head -->
70	<div class="bounce-board-body">	70	<div class="bounce-board-body">
71		71
72	<!-- all user comments -->	72	<!-- all user comments -->
73	<ul class="bounced-user-comments">	73	<ul class="bounced-user-comments">
74	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	74	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
75	<div class="bc_brd_l"></div>	75	<div class="bc_brd_l"></div>
76	<!-- border -->	76	<!-- border -->
77	<div class="parent-full-width">	77	<div class="parent-full-width">
78	<div class="full-width">	78	<div class="full-width">
79	<div class="b-user-head">	79	<div class="b-user-head">
80	<img :src="cmnt.user.profilePic" />	80	<img :src="cmnt.user.profilePic" />
81	<span class="head-content">{{ cmnt.user.name }} </span>	81	<span class="head-content">{{ cmnt.user.name }} </span>
82	<ul>	82	<ul>
83	<li>	83	<li>
84	<span></span	84	<span></span
85	><img src="../assets/images/u-info-icon.png" />{{	85	><img src="../assets/images/u-info-icon.png" />{{
86	cmnt.user.karmaPoints	86	cmnt.user.karmaPoints
87	}}pts	87	}}pts
88	</li>	88	</li>
89	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>	89	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
90	</ul>	90	</ul>
91	</div>	91	</div>
92	<!-- header -->	92	<!-- header -->
93	<p>	93	<p>
94	{{ cmnt.comment }}	94	{{ cmnt.comment }}
95	</p>	95	</p>
96	<div class="joined_wrapper">	96	<div class="joined_wrapper">
97	<ul class="joined-info info_bc_spc">	97	<ul class="joined-info info_bc_spc">
98	<li>	98	<li>
99	<img src="../assets/images/purple-heart.png" />	99	<img src="../assets/images/purple-heart.png" />
100	</li>	100	</li>
101	<li><a href="javasript:void(0);"> 0</a></li>	101	<li><a href="javasript:void(0);"> 0</a></li>
102	<li class="comment-spc">	102	<li class="comment-spc">
103	<img src="../assets/images/purple-comment.png" />	103	<img src="../assets/images/purple-comment.png" />
104	</li>	104	</li>
105	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>	105	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
106	</ul>	106	</ul>
107	<div class="add_rply" v-if="!cmnt.childInput">	107	<div class="add_rply" v-if="!cmnt.childInput">
108	<input	108	<input
109	type="text"	109	type="text"
110	@click="eachRply(cmnt)"	110	@click="eachRply(cmnt)"
111	class="add_Rply_C"	111	class="add_Rply_C"
112	placeholder="Add your reply"	112	placeholder="Add your reply"
113	/>	113	/>
114	</div>	114	</div>
115	<!-- rly form -->	115	<!-- rly form -->
116	</div>	116	</div>
117	<!-- joined wrapper -->	117	<!-- joined wrapper -->
118	</div>	118	</div>
119	<!-- full width -->	119	<!-- full width -->
120	</div>	120	</div>
121	<div class="comments-footer each-ft" v-if="cmnt.childInput">	121	<div class="comments-footer each-ft" v-if="cmnt.childInput">
122	<textarea v-model="comment"></textarea>	122	<textarea v-model="comment"></textarea>
123	<div class="comments-footer-wrp">	123	<div class="comments-footer-wrp">
124	<a	124	<a
125	@click="createChildComment(cmnt)"	125	@click="createChildComment(cmnt)"
126	href="javasript:void(0);"	126	href="javasript:void(0);"
127	class="add_comments_chat reply-Wdth"	127	class="add_comments_chat reply-Wdth"
128	>Reply</a	128	>Reply</a
129	>	129	>
130	<a href="javasript:void(0);" class="discard_bt"	130	<a href="javasript:void(0);" class="discard_bt"
131	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"	131	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
132	/></a>	132	/></a>
133	</div>	133	</div>
134	</div>	134	</div>
135	<!-- parent -->	135	<!-- parent -->
136	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">	136	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
137	<div class="full-width">	137	<div class="full-width">
138	<div class="b-user-head">	138	<div class="b-user-head">
139	<img :src="childCmnt.user.profilePic" />	139	<img :src="childCmnt.user.profilePic" />
140	<span class="head-content">{{childCmnt.user.name }} </span>	140	<span class="head-content">{{childCmnt.user.name }} </span>
141	<ul>	141	<ul>
142	<li>	142	<li>
143	<span></span	143	<span></span
144	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts	144	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
145	</li>	145	</li>
146	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>	146	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
147	</ul>	147	</ul>
148	</div>	148	</div>
149	<p>	149	<p>
150	{{childCmnt.comment}}	150	{{childCmnt.comment}}
151	</p>	151	</p>
152	<div class="joined_wrapper">	152	<div class="joined_wrapper">
153	<ul class="joined-info info_bc_spc">	153	<ul class="joined-info info_bc_spc">
154	<li>	154	<li>
155	<img src="../assets/images/purple-heart.png" />	155	<img src="../assets/images/purple-heart.png" />
156	</li>	156	</li>
157	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>	157	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
158		158
159	</ul>	159	</ul>
160		160
161	</div>	161	</div>
162	</div>	162	</div>
163	</div>	163	</div>
164	<!-- eree -->	164	<!-- eree -->
165		165
166	<!-- comments footer -->	166	<!-- comments footer -->
167	</li>	167	</li>
168	</ul>	168	</ul>
169	</div>	169	</div>
170	<!-- bounce board body -->	170	<!-- bounce board body -->
171	<div class="comments-footer" v-if="parentInput">	171	<div class="comments-footer" v-if="parentInput">
172	<textarea v-model="comment"></textarea>	172	<textarea v-model="comment"></textarea>
173	<div class="comments-footer-wrp">	173	<div class="comments-footer-wrp">
174	<a	174	<a
175	href="javasript:void(0);"	175	href="javasript:void(0);"
176	class="add_comments_chat"	176	class="add_comments_chat"
177	@click="createComment"	177	@click="createComment"
178	><img src="../assets/images/add-comment.svg" /> Comment</a	178	><img src="../assets/images/add-comment.svg" /> Comment</a
179	>	179	>
180	</div>	180	</div>
181	</div>	181	</div>
182	<!-- comments footer -->	182	<!-- comments footer -->
183	</div>	183	</div>
184	</div>	184	</div>
185	<!-- bounceboard wrp -->	185	<!-- bounceboard wrp -->
186	<!-- chat box -->	186	<!-- chat box -->
187		187
188		188
189	<div class="single-mobileInsight">	189	<div class="single-mobileInsight">
190	<div class="top-area-blank"></div>	190	<div class="top-area-blank"></div>
191	<img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" />	191	<img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" />
192	<div class="single-left-Insight-comments">	192	<div class="single-left-Insight-comments">
193	<div class="author-thoughts">	193	<div class="author-thoughts">
194		194
195	<img	195	<img
196	src="../assets/images/thoughts-upper.svg"	196	src="../assets/images/thoughts-upper.svg"
197	class="upper-th"	197	class="upper-th"
198	/>	198	/>
199	<img	199	<img
200	:src="currentSlideData.payload.metaData.authorImage"	200	:src="currentSlideData.payload.metaData.authorImage"
201	class="dynamic-thoughts"	201	class="dynamic-thoughts"
202	/>	202	/>
203	</div><!-- user thoughts -->	203	</div><!-- user thoughts -->
204	<div class="single-author-li-comments">	204	<div class="single-author-li-comments">
205	<div class="a-intro-comments custom-c-style">	205	<div class="a-intro-comments custom-c-style">
206	<p>	206	<p>
207	{{currentSlideData.payload.comments[0].comment}}	207	{{currentSlideData.payload.comments[0].comment}}
208	</p>	208	</p>
209	<ul class="rly-comment-set">	209	<ul class="rly-comment-set">
210	<li>	210	<li>
211	<img src="../assets/images/color-heart.svg" />	211	<img src="../assets/images/color-heart.svg" />
212	<a href="javascript:void(0);">0</a>	212	<a href="javascript:void(0);">0</a>
213	</li>	213	</li>
214	<li>	214	<li>
215	<img src="../assets/images/rply.svg" />	215	<img src="../assets/images/rply.svg" />
216	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	216	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
217	</li>	217	</li>
218	</ul>	218	</ul>
219	</div>	219	</div>
220	<!-- comments box -->	220	<!-- comments box -->
221	</div>	221	</div>
222	<!-- single author comments -->	222	<!-- single author comments -->
223	<div class="single-author-li-comments">	223	<div class="single-author-li-comments">
224	<div class="a-intro-comments custom-c-style">	224	<div class="a-intro-comments custom-c-style">
225	<p>	225	<p>
226	{{currentSlideData.payload.comments[1].comment}}	226	{{currentSlideData.payload.comments[1].comment}}
227	</p>	227	</p>
228	<ul class="rly-comment-set">	228	<ul class="rly-comment-set">
229	<li>	229	<li>
230	<img src="../assets/images/color-heart.svg" />	230	<img src="../assets/images/color-heart.svg" />
231	<a href="javascript:void(0);">0</a>	231	<a href="javascript:void(0);">0</a>
232	</li>	232	</li>
233	<li>	233	<li>
234	<img src="../assets/images/rply.svg" />	234	<img src="../assets/images/rply.svg" />
235	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	235	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
236	</li>	236	</li>
237	</ul>	237	</ul>
238	</div>	238	</div>
239	<!-- comments box -->	239	<!-- comments box -->
240	</div>	240	</div>
241	<!-- single author comments -->	241	<!-- single author comments -->
242	</div>	242	</div>
243	<!-- single mobile Left insight -->	243	<!-- single mobile Left insight -->
244	<div class="c-product-insight-wrp">	244	<div class="c-product-insight-wrp">
245	<div class="single-author-li-comments">	245	<div class="single-author-li-comments">
246	<div class="a-intro-comments custom-selected-style">	246	<div class="a-intro-comments custom-selected-style">
247	<img src="../assets/images/rect.svg" class="rect" />	247	<img src="../assets/images/rect.svg" class="rect" />
248	<div class="top-wrp">	248	<div class="top-wrp">
249	{{currentSlideData.payload.insight.tag}} Insight	249	{{currentSlideData.payload.insight.tag}} Insight
250	<a href="#"><img src="../assets/images/link-red.svg" /></a>	250	<a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
251	</div>	251	</div>
252	<!-- <div class="top-head">	252	<!-- <div class="top-head">
253	Decide on using multiple call to action vs single call to	253	Decide on using multiple call to action vs single call to
254	action depending on the stage of the user journey	254	action depending on the stage of the user journey
255	</div>	255	</div>
256	<p>	256	<p>
257	Marketing 101 teaches us to use one single, call to action	257	Marketing 101 teaches us to use one single, call to action
258	(CTA) at the top of the funnel before the uer has shown	258	(CTA) at the top of the funnel before the uer has shown
259	interest in the product. <br /><br />	259	interest in the product. <br /><br />
260	When the user is already onboarded and is in the	260	When the user is already onboarded and is in the
261	<strong> engage stage </strong>, it may be better to use a	261	<strong> engage stage </strong>, it may be better to use a
262	single CTA for each use case in order to	262	single CTA for each use case in order to
263	<strong> avoid ambiguity.</strong>	263	<strong> avoid ambiguity.</strong>
264	</p> -->	264	</p> -->
265	<div class="top-head">{{currentSlideData.payload.insight.title}}</div>	265	<div class="top-head">{{currentSlideData.payload.insight.title}}</div>
266	<p>{{currentSlideData.payload.insight.description}}	266	<p>{{currentSlideData.payload.insight.description}}
267	<div class="footer">	267	<div class="footer">
268	<a href="#" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>	268	<a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
269	<a href="#" class="ft-share"	269	<a href="javascript:void(0);" class="ft-share"
270	><img src="../assets/images/reply-red.svg" /> Share from	270	><img src="../assets/images/reply-red.svg" /> Share from
271	library</a	271	library</a
272	>	272	>
273	</div>	273	</div>
274	<!-- footer -->	274	<!-- footer -->
275	</div>	275	</div>
276	<!-- comments box -->	276	<!-- comments box -->
277	</div>	277	</div>
278	<!-- single author comments -->	278	<!-- single author comments -->
279	</div>	279	</div>
280	<!-- single mobile Right insight -->	280	<!-- single mobile Right insight -->
281	</div>	281	</div>
282	<!-- Single Mobile Insight -->	282	<!-- Single Mobile Insight -->
283	<!-- single author comments -->	283	<!-- single author comments -->
284	<div class="footer-nav">	284	<div class="footer-nav">
285	<div class="footer-top white-bg">	285	<div class="footer-top white-bg">
286	<div class="row">	286	<div class="row">
287	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	287	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
288	<div class="row h-100p">	288	<div class="row h-100p">
289	<div	289	<div
290	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	290	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
291	>	291	>
292	<div class="ft-comments-group testi-photos-ct">	292	<div class="ft-comments-group testi-photos-ct">
293	<div class="c-with-photos">	293	<div class="c-with-photos">
294	<span class="count-comments"	294	<span class="count-comments"
295	>{{ commentList.length - 1 }}+ Comments</span	295	>{{ commentList.length - 1 }}+ Comments</span
296	><!-- count commets -->	296	><!-- count commets -->
297	<ul class="comments-photos">	297	<ul class="comments-photos">
298	<li><img src="../assets/images/c-photo-1.png" /></li>	298	<li><img src="../assets/images/c-photo-1.png" /></li>
299	<li><img src="../assets/images/c-photo-2.png" /></li>	299	<li><img src="../assets/images/c-photo-2.png" /></li>
300	<li><img src="../assets/images/c-photo-3.png" /></li>	300	<li><img src="../assets/images/c-photo-3.png" /></li>
301	</ul>	301	</ul>
302	<!-- comment photos -->	302	<!-- comment photos -->
303	</div>	303	</div>
304	<div class="comments-detail all-c-space">	304	<div class="comments-detail all-c-space">
305	<span	305	<span
306	>{{ commentList[commentList.length - 1].user.name }}	306	>{{ commentList[commentList.length - 1].user.name }}
307	<a href="javascript:void(0);" @click="open_ct_box"	307	<a href="javascript:void(0);" @click="open_ct_box"
308	>View All</a	308	>View All</a
309	></span	309	></span
310	>	310	>
311	<p>	311	<p>
312	<!-- I wonder what the difference between “Dunzo Assistant”	312	<!-- I wonder what the difference between “Dunzo Assistant”
313	and “Pickup and Drop... -->	313	and “Pickup and Drop... -->
314	{{ commentList[commentList.length - 1].comment }}	314	{{ commentList[commentList.length - 1].comment }}
315	</p>	315	</p>
316	</div>	316	</div>
317	<!-- comments detail -->	317	<!-- comments detail -->
318	</div>	318	</div>
319	<!-- comments Group -->	319	<!-- comments Group -->
320	</div>	320	</div>
321	</div>	321	</div>
322	</div>	322	</div>
323	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	323	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
324	<div class="comment-frm no-c-frm">	324	<div class="comment-frm no-c-frm">
325	<div class="row">	325	<div class="row">
326	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	326	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
327	<div class="form-group frm-wdth addfrm-spc">	327	<div class="form-group frm-wdth addfrm-spc">
328	<input	328	<input
329	type="text"	329	type="text"
330	class="form-control"	330	class="form-control"
331	placeholder="Kathy, Something on your mind?"	331	placeholder="Kathy, Something on your mind?"
332	id="open_ct_box"	332	id="open_ct_box"
333	v-model="comment"	333	v-model="comment"
334	/>	334	/>
335	</div>	335	</div>
336	</div>	336	</div>
337	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	337	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
338	<a	338	<a
339	href="javascript:void(0);"	339	href="javascript:void(0);"
340	@click="createComment"	340	@click="createComment"
341	class="add-comment"	341	class="add-comment"
342	><img src="../assets/images/add-comment.svg" />	342	><img src="../assets/images/add-comment.svg" />
343	Comment</a	343	Comment</a
344	>	344	>
345	</div>	345	</div>
346	</div>	346	</div>
347	<!-- comment from -->	347	<!-- comment from -->
348	</div>	348	</div>
349	</div>	349	</div>
350	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	350	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
351	<ul class="top-intro-bt">	351	<ul class="top-intro-bt">
352	<li>	352	<li>
353	<a href="javascript:void(0);" @click="goBack"	353	<a href="javascript:void(0);" @click="goBack"
354	><img src="../assets/images/skip-prev.svg" /> Prev</a	354	><img src="../assets/images/skip-prev.svg" /> Prev</a
355	>	355	>
356	</li>	356	</li>
357	<li>	357	<li>
358	<a href="javascript:void(0);" @click="goNext"	358	<a href="javascript:void(0);" @click="goNext"
359	><img src="../assets/images/skip-next.svg" /> Skip to next	359	><img src="../assets/images/skip-next.svg" /> Skip to next
360	slide</a	360	slide</a
361	>	361	>
362	</li>	362	</li>
363	</ul>	363	</ul>
364	</div>	364	</div>
365	<!-- buttons list -->	365	<!-- buttons list -->
366	</div>	366	</div>
367	</div>	367	</div>
368	<!-- footer top -->	368	<!-- footer top -->
369	<div class="footer-bottom">	369	<div class="footer-bottom">
370	<ul>	370	<ul>
371	<li class="active"></li>	371	<li class="active"></li>
372	<li></li>	372	<li></li>
373	</ul>	373	</ul>
374	</div>	374	</div>
375	<!-- footer top -->	375	<!-- footer top -->
376	</div>	376	</div>
377	<!-- footer -->	377	<!-- footer -->
378	</div>	378	</div>
379	<!-- body wrapper -->	379	<!-- body wrapper -->
380	</div>	380	</div>
381	<!-- main wrapper -->	381	<!-- main wrapper -->
382	</main>	382	</main>
383	</template>	383	</template>
384		384
385	<script>	385	<script>
386	import Vue from "vue";	386	import Vue from "vue";
387	import router from "../router";	387	import router from "../router";
388	import axios from "axios";	388	import axios from "axios";
389	import moment from 'moment';	389	import moment from 'moment';
390	export default {	390	export default {
391	name: "SingleMobileScreenInsightOne",	391	name: "SingleMobileScreenInsightOne",
392		392
393	data() {	393	data() {
394	return {	394	return {
395	allSlide: [],	395	allSlide: [],
396	currentSlideIndex: null,	396	currentSlideIndex: null,
397	currentSlideData: null,	397	currentSlideData: null,
398	//	398	//
399	usertoken: null,	399	usertoken: null,
400	commentList: [],	400	commentList: [],
401	comment: null,	401	comment: null,
402	parentInput: true,	402	parentInput: true,
403	};	403	};
404	},	404	},
405	mounted() {	405	mounted() {
406	var allSlideData = localStorage.getItem(	406	var allSlideData = localStorage.getItem(
407	"spotlight_slide" + this.$route.params.caseStudyId	407	"spotlight_slide" + this.$route.params.caseStudyId
408	);	408	);
409	if (allSlideData) {	409	if (allSlideData) {
410	this.allSlide = JSON.parse(allSlideData);	410	this.allSlide = JSON.parse(allSlideData);
411	this.getCurrentSlideData();	411	this.getCurrentSlideData();
412	}	412	}
413	var userdata = localStorage.getItem("spotlight_usertoken");	413	var userdata = localStorage.getItem("spotlight_usertoken");
414	if (userdata) {	414	if (userdata) {
415	userdata = JSON.parse(userdata);	415	userdata = JSON.parse(userdata);
416	this.usertoken = userdata.token;	416	this.usertoken = userdata.token;
417	this.getComment();	417	this.getComment();
418	}	418	}
419	},	419	},
420	methods: {	420	methods: {
421	getCurrentSlideData() {	421	getCurrentSlideData() {
422	var i = this.allSlide.findIndex(	422	var i = this.allSlide.findIndex(
423	(slide_) => slide_.slideId == this.$route.params.slideId	423	(slide_) => slide_.slideId == this.$route.params.slideId
424	);	424	);
425	this.currentSlideIndex = i;	425	this.currentSlideIndex = i;
426	this.currentSlideData = this.allSlide[i];	426	this.currentSlideData = this.allSlide[i];
427	console.log("currentSlideData", this.currentSlideData);	427	console.log("currentSlideData", this.currentSlideData);
428	},	428	},
429	goNext() {	429	goNext() {
430	this.currentSlideIndex++;	430	this.currentSlideIndex++;
431	this.$router.push({	431	this.$router.push({
432	name: this.allSlide[this.currentSlideIndex].ur,	432	name: this.allSlide[this.currentSlideIndex].ur,
433	params: {	433	params: {
434	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	434	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
435	slideId: this.allSlide[this.currentSlideIndex].slideId,	435	slideId: this.allSlide[this.currentSlideIndex].slideId,
436	},	436	},
437	});	437	});
438	},	438	},
439	goBack() {	439	goBack() {
440	this.currentSlideIndex--;	440	this.currentSlideIndex--;
441	this.$router.push({	441	this.$router.push({
442	name: this.allSlide[this.currentSlideIndex].ur,	442	name: this.allSlide[this.currentSlideIndex].ur,
443	params: {	443	params: {
444	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	444	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
445	slideId: this.allSlide[this.currentSlideIndex].slideId,	445	slideId: this.allSlide[this.currentSlideIndex].slideId,
446	},	446	},
447	});	447	});
448	},	448	},
449	createComment() {	449	createComment() {
450	console.log("===", this.comment);	450	console.log("===", this.comment);
451	var obj = {	451	var obj = {
452	caseStudyId: this.currentSlideData.caseStudyId,	452	caseStudyId: this.currentSlideData.caseStudyId,
453	slideId: this.currentSlideData.slideId,	453	slideId: this.currentSlideData.slideId,
454	comment: this.comment,	454	comment: this.comment,
455		455
456	};	456	};
457	axios	457	axios
458	.post("/bounceBoard/comment", obj, {	458	.post("/bounceBoard/comment", obj, {
459	headers: {	459	headers: {
460	Authorization: "Bearer " + this.usertoken,	460	Authorization: "Bearer " + this.usertoken,
461	},	461	},
462	})	462	})
463	.then((response) => {	463	.then((response) => {
464	this.comment = null;	464	this.comment = null;
465	this.getComment();	465	this.getComment();
466	console.log(response);	466	console.log(response);
467	})	467	})
468	.catch((error) => {	468	.catch((error) => {
469	if (error.response) {	469	if (error.response) {
470	this.$toaster.error(error.response.data.message);	470	this.$toaster.error(error.response.data.message);
471	}	471	}
472	});	472	});
473	},	473	},
474	createChildComment(cmnt) {	474	createChildComment(cmnt) {
475	console.log(cmnt,"===", this.comment);	475	console.log(cmnt,"===", this.comment);
476	var obj = {	476	var obj = {
477	caseStudyId: this.currentSlideData.caseStudyId,	477	caseStudyId: this.currentSlideData.caseStudyId,
478	slideId: this.currentSlideData.slideId,	478	slideId: this.currentSlideData.slideId,
479	comment: this.comment,	479	comment: this.comment,
480	parentId: cmnt._id,	480	parentId: cmnt._id,
481		481
482	};	482	};
483	axios	483	axios
484	.post("/bounceBoard/comment", obj, {	484	.post("/bounceBoard/comment", obj, {
485	headers: {	485	headers: {
486	Authorization: "Bearer " + this.usertoken,	486	Authorization: "Bearer " + this.usertoken,
487	},	487	},
488	})	488	})
489	.then((response) => {	489	.then((response) => {
490	this.comment = null;	490	this.comment = null;
491	this.discardRply(cmnt);	491	this.discardRply(cmnt);
492	this.getComment();	492	this.getComment();
493	console.log(response);	493	console.log(response);
494	})	494	})
495	.catch((error) => {	495	.catch((error) => {
496	if (error.response) {	496	if (error.response) {
497	this.$toaster.error(error.response.data.message);	497	this.$toaster.error(error.response.data.message);
498	}	498	}
499	});	499	});
500	},	500	},
501	getComment() {	501	getComment() {
502	axios	502	axios
503	.get(	503	.get(
504	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	504	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
505	{	505	{
506	headers: {	506	headers: {
507	Authorization: "Bearer " + this.usertoken,	507	Authorization: "Bearer " + this.usertoken,
508	},	508	},
509	}	509	}
510	)	510	)
511	.then((response) => {	511	.then((response) => {
512	console.log(response.data);	512	console.log(response.data);
513	var comments = [];	513	var comments = [];
514	var keys = Object.keys(response.data.data)	514	var keys = Object.keys(response.data.data)
515	response.data.data	515	response.data.data
516	keys.forEach((key_) => {	516	keys.forEach((key_) => {
517	comments.push(response.data.data[key_])	517	comments.push(response.data.data[key_])
518	});	518	});
519	comments.forEach((coment_)=>{	519	comments.forEach((coment_)=>{
520	coment_.childInput = false;	520	coment_.childInput = false;
521	});	521	});
522	console.log("comments",comments)	522	console.log("comments",comments)
523	this.commentList = comments;	523	this.commentList = comments;
524	})	524	})
525	.catch((error) => console.log(error));	525	.catch((error) => console.log(error));
526	},	526	},
527	dateGenerator(curreDate){	527	dateGenerator(curreDate){
528	var todayDate = moment(new Date(), "DD.MM.YYYY");	528	var todayDate = moment(new Date(), "DD.MM.YYYY");
529	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	529	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
530	var result = todayDate.diff(endDate, 'days');	530	var result = todayDate.diff(endDate, 'days');
531	return result;	531	return result;
532	},	532	},
533	goToLogin() {	533	goToLogin() {
534	this.$router.push("/");	534	this.$router.push("/login");
535	},	535	},
536	goToSignUp() {	536	goToSignUp() {
537	this.$router.push("/signup");	537	this.$router.push("/");
538	},	538	},
539	chtbox_close() {	539	chtbox_close() {
540	$("#cht_box_close").removeClass("cht_close");	540	$("#cht_box_close").removeClass("cht_close");
541	$("#open_ct_box, .c_hide").show();	541	$("#open_ct_box, .c_hide").show();
542	$(".footer-top").addClass("white-bg");	542	$(".footer-top").addClass("white-bg");
543	},	543	},
544	open_ct_box() {	544	open_ct_box() {
545	$("#cht_box_close").addClass("cht_close");	545	$("#cht_box_close").addClass("cht_close");
546	$("#open_ct_box, .c_hide").hide();	546	$("#open_ct_box, .c_hide").hide();
547	$(".footer-top").removeClass("white-bg");	547	$(".footer-top").removeClass("white-bg");
548	},	548	},
549	eachRply(cmnt) {	549	eachRply(cmnt) {
550	cmnt.childInput = true;	550	cmnt.childInput = true;
551	this.parentInput = false;	551	this.parentInput = false;
552	},	552	},
553	discardRply(cmnt) {	553	discardRply(cmnt) {
554	cmnt.childInput = false;	554	cmnt.childInput = false;
555	this.parentInput = true;	555	this.parentInput = true;
556		556
557	},	557	},
558	},	558	},
559	};	559	};
560	//	560	//
561	</script>	561	</script>
562		562

src/components/SingleMobileScreenInsightTwo.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"	5	<a class="navbar-brand" href="javascript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="#"><img src="../assets/images/user.png" /></a>	22	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23	</div>	23	</div>
24	</nav>	24	</nav>
25	<!-- menu wrapper -->	25	<!-- menu wrapper -->
26	<div class="intro-startup">	26	<div class="intro-startup">
27	<!-- chat box -->	27	<!-- chat box -->
28	<div class="bounce-board-wrp" id="cht_box_close">	28	<div class="bounce-board-wrp" id="cht_box_close">
29	<div class="inner-wrp-bc">	29	<div class="inner-wrp-bc">
30	<div class="bc-top-head">	30	<div class="bc-top-head">
31	<span class="bc-head">	31	<span class="bc-head">
32	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	32	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
33	</span>	33	</span>
34	<div class="action-sort">	34	<div class="action-sort">
35	<span class="sort-by">SORT BY</span>	35	<span class="sort-by">SORT BY</span>
36	<div class="btn-group">	36	<div class="btn-group">
37	<button	37	<button
38	type="button"	38	type="button"
39	class="bc-sort-list dropdown-toggle"	39	class="bc-sort-list dropdown-toggle"
40	data-toggle="dropdown"	40	data-toggle="dropdown"
41	aria-haspopup="true"	41	aria-haspopup="true"
42	aria-expanded="false"	42	aria-expanded="false"
43	>	43	>
44	BEST	44	BEST
45	</button>	45	</button>
46	<div class="dropdown-menu short_by">	46	<div class="dropdown-menu short_by">
47	<a class="dropdown-item" href="javasript:void(0);"	47	<a class="dropdown-item" href="javasript:void(0);"
48	>BEST 1</a	48	>BEST 1</a
49	>	49	>
50	<a class="dropdown-item" href="javasript:void(0);"	50	<a class="dropdown-item" href="javasript:void(0);"
51	>BEST 2</a	51	>BEST 2</a
52	>	52	>
53	<a class="dropdown-item" href="javasript:void(0);"	53	<a class="dropdown-item" href="javasript:void(0);"
54	>BEST 3</a	54	>BEST 3</a
55	>	55	>
56	</div>	56	</div>
57	</div>	57	</div>
58	<a	58	<a
59	href="javasript:void(0);"	59	href="javasript:void(0);"
60	@click="chtbox_close"	60	@click="chtbox_close"
61	class="close_chat_bx"	61	class="close_chat_bx"
62	><img src="../assets/images/close.png" alt="close" /></a	62	><img src="../assets/images/close.png" alt="close" /></a
63	><!-- close -->	63	><!-- close -->
64	</div>	64	</div>
65	<!-- action sort -->	65	<!-- action sort -->
66	</div>	66	</div>
67	<!-- top head -->	67	<!-- top head -->
68	<div class="bounce-board-body">	68	<div class="bounce-board-body">
69		69
70	<!-- all user comments -->	70	<!-- all user comments -->
71	<ul class="bounced-user-comments">	71	<ul class="bounced-user-comments">
72	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	72	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
73	<div class="bc_brd_l"></div>	73	<div class="bc_brd_l"></div>
74	<!-- border -->	74	<!-- border -->
75	<div class="parent-full-width">	75	<div class="parent-full-width">
76	<div class="full-width">	76	<div class="full-width">
77	<div class="b-user-head">	77	<div class="b-user-head">
78	<img :src="cmnt.user.profilePic" />	78	<img :src="cmnt.user.profilePic" />
79	<span class="head-content">{{ cmnt.user.name }} </span>	79	<span class="head-content">{{ cmnt.user.name }} </span>
80	<ul>	80	<ul>
81	<li>	81	<li>
82	<span></span	82	<span></span
83	><img src="../assets/images/u-info-icon.png" />{{	83	><img src="../assets/images/u-info-icon.png" />{{
84	cmnt.user.karmaPoints	84	cmnt.user.karmaPoints
85	}}pts	85	}}pts
86	</li>	86	</li>
87	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>	87	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
88	</ul>	88	</ul>
89	</div>	89	</div>
90	<!-- header -->	90	<!-- header -->
91	<p>	91	<p>
92	{{ cmnt.comment }}	92	{{ cmnt.comment }}
93	</p>	93	</p>
94	<div class="joined_wrapper">	94	<div class="joined_wrapper">
95	<ul class="joined-info info_bc_spc">	95	<ul class="joined-info info_bc_spc">
96	<li>	96	<li>
97	<img src="../assets/images/purple-heart.png" />	97	<img src="../assets/images/purple-heart.png" />
98	</li>	98	</li>
99	<li><a href="javasript:void(0);"> 0</a></li>	99	<li><a href="javasript:void(0);"> 0</a></li>
100	<li class="comment-spc">	100	<li class="comment-spc">
101	<img src="../assets/images/purple-comment.png" />	101	<img src="../assets/images/purple-comment.png" />
102	</li>	102	</li>
103	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>	103	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
104	</ul>	104	</ul>
105	<div class="add_rply" v-if="!cmnt.childInput">	105	<div class="add_rply" v-if="!cmnt.childInput">
106	<input	106	<input
107	type="text"	107	type="text"
108	@click="eachRply(cmnt)"	108	@click="eachRply(cmnt)"
109	class="add_Rply_C"	109	class="add_Rply_C"
110	placeholder="Add your reply"	110	placeholder="Add your reply"
111	/>	111	/>
112	</div>	112	</div>
113	<!-- rly form -->	113	<!-- rly form -->
114	</div>	114	</div>
115	<!-- joined wrapper -->	115	<!-- joined wrapper -->
116	</div>	116	</div>
117	<!-- full width -->	117	<!-- full width -->
118	</div>	118	</div>
119	<div class="comments-footer each-ft" v-if="cmnt.childInput">	119	<div class="comments-footer each-ft" v-if="cmnt.childInput">
120	<textarea v-model="comment"></textarea>	120	<textarea v-model="comment"></textarea>
121	<div class="comments-footer-wrp">	121	<div class="comments-footer-wrp">
122	<a	122	<a
123	@click="createChildComment(cmnt)"	123	@click="createChildComment(cmnt)"
124	href="javasript:void(0);"	124	href="javasript:void(0);"
125	class="add_comments_chat reply-Wdth"	125	class="add_comments_chat reply-Wdth"
126	>Reply</a	126	>Reply</a
127	>	127	>
128	<a href="javasript:void(0);" class="discard_bt"	128	<a href="javasript:void(0);" class="discard_bt"
129	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"	129	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
130	/></a>	130	/></a>
131	</div>	131	</div>
132	</div>	132	</div>
133	<!-- parent -->	133	<!-- parent -->
134	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">	134	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
135	<div class="full-width">	135	<div class="full-width">
136	<div class="b-user-head">	136	<div class="b-user-head">
137	<img :src="childCmnt.user.profilePic" />	137	<img :src="childCmnt.user.profilePic" />
138	<span class="head-content">{{childCmnt.user.name }} </span>	138	<span class="head-content">{{childCmnt.user.name }} </span>
139	<ul>	139	<ul>
140	<li>	140	<li>
141	<span></span	141	<span></span
142	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts	142	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
143	</li>	143	</li>
144	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>	144	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
145	</ul>	145	</ul>
146	</div>	146	</div>
147	<p>	147	<p>
148	{{childCmnt.comment}}	148	{{childCmnt.comment}}
149	</p>	149	</p>
150	<div class="joined_wrapper">	150	<div class="joined_wrapper">
151	<ul class="joined-info info_bc_spc">	151	<ul class="joined-info info_bc_spc">
152	<li>	152	<li>
153	<img src="../assets/images/purple-heart.png" />	153	<img src="../assets/images/purple-heart.png" />
154	</li>	154	</li>
155	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>	155	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
156		156
157	</ul>	157	</ul>
158		158
159	</div>	159	</div>
160	</div>	160	</div>
161	</div>	161	</div>
162	<!-- eree -->	162	<!-- eree -->
163		163
164	<!-- comments footer -->	164	<!-- comments footer -->
165	</li>	165	</li>
166	</ul>	166	</ul>
167	</div>	167	</div>
168	<!-- bounce board body -->	168	<!-- bounce board body -->
169	<div class="comments-footer" v-if="parentInput">	169	<div class="comments-footer" v-if="parentInput">
170	<textarea v-model="comment"></textarea>	170	<textarea v-model="comment"></textarea>
171	<div class="comments-footer-wrp">	171	<div class="comments-footer-wrp">
172	<a	172	<a
173	href="javasript:void(0);"	173	href="javasript:void(0);"
174	class="add_comments_chat"	174	class="add_comments_chat"
175	@click="createComment"	175	@click="createComment"
176	><img src="../assets/images/add-comment.svg" /> Comment</a	176	><img src="../assets/images/add-comment.svg" /> Comment</a
177	>	177	>
178	</div>	178	</div>
179	</div>	179	</div>
180	<!-- comments footer -->	180	<!-- comments footer -->
181	</div>	181	</div>
182	</div>	182	</div>
183	<!-- bounceboard wrp -->	183	<!-- bounceboard wrp -->
184	<!-- chat box -->	184	<!-- chat box -->
185		185
186	<div class="single-mobileInsight">	186	<div class="single-mobileInsight">
187	<div class="top-area-blank"></div>	187	<div class="top-area-blank"></div>
188	<!-- <img src="../assets/images/slide.png" class="slide-img" /> -->	188	<!-- <img src="../assets/images/slide.png" class="slide-img" /> -->
189	<img	189	<img
190	:src="currentSlideData.payload.metaData.mobileImage"	190	:src="currentSlideData.payload.metaData.mobileImage"
191	class="m-screen"	191	class="m-screen"
192	/>	192	/>
193	<div class="single-left-Insight-comments">	193	<div class="single-left-Insight-comments">
194	<div class="author-thoughts">	194	<div class="author-thoughts">
195	<img src="../assets/images/thoughts-upper.svg" class="upper-th" />	195	<img src="../assets/images/thoughts-upper.svg" class="upper-th" />
196	<img	196	<img
197	:src="currentSlideData.payload.metaData.authorImage"	197	:src="currentSlideData.payload.metaData.authorImage"
198	class="dynamic-thoughts"	198	class="dynamic-thoughts"
199	/>	199	/>
200	</div>	200	</div>
201	<!-- user thoughts -->	201	<!-- user thoughts -->
202		202
203	<div class="single-author-li-comments">	203	<div class="single-author-li-comments">
204	<div class="a-intro-comments custom-c-style">	204	<div class="a-intro-comments custom-c-style">
205	<!-- <p>	205	<!-- <p>
206	I wonder what the difference between “	206	I wonder what the difference between “
207	<strong>Dunzo Assistant </strong>” and “<strong	207	<strong>Dunzo Assistant </strong>” and “<strong
208	>Pickup and Drop </strong	208	>Pickup and Drop </strong
209	>” are. If they are the same, there are two “call to actions”	209	>” are. If they are the same, there are two “call to actions”
210	for the same workflow	210	for the same workflow
211	</p> -->	211	</p> -->
212	<p>{{ currentSlideData.payload.comments[0].comment }}</p>	212	<p>{{ currentSlideData.payload.comments[0].comment }}</p>
213	<ul class="rly-comment-set">	213	<ul class="rly-comment-set">
214	<li>	214	<li>
215	<img src="../assets/images/color-heart.svg" />	215	<img src="../assets/images/color-heart.svg" />
216	<a href="javascript:void(0);">0</a>	216	<a href="javascript:void(0);">0</a>
217	</li>	217	</li>
218	<li>	218	<li>
219	<img src="../assets/images/rply.svg" />	219	<img src="../assets/images/rply.svg" />
220	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	220	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
221	</li>	221	</li>
222	</ul>	222	</ul>
223	</div>	223	</div>
224	<!-- comments box -->	224	<!-- comments box -->
225	</div>	225	</div>
226	<!-- single author comments -->	226	<!-- single author comments -->
227	<div class="single-author-li-comments">	227	<div class="single-author-li-comments">
228	<div class="a-intro-comments custom-c-style">	228	<div class="a-intro-comments custom-c-style">
229	<p>	229	<p>
230	{{ currentSlideData.payload.comments[1].comment }}	230	{{ currentSlideData.payload.comments[1].comment }}
231	</p>	231	</p>
232	<ul class="rly-comment-set">	232	<ul class="rly-comment-set">
233	<li>	233	<li>
234	<img src="../assets/images/color-heart.svg" />	234	<img src="../assets/images/color-heart.svg" />
235	<a href="javascript:void(0);">0</a>	235	<a href="javascript:void(0);">0</a>
236	</li>	236	</li>
237	<li>	237	<li>
238	<img src="../assets/images/rply.svg" />	238	<img src="../assets/images/rply.svg" />
239	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	239	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
240	</li>	240	</li>
241	</ul>	241	</ul>
242	</div>	242	</div>
243	<!-- comments box -->	243	<!-- comments box -->
244	</div>	244	</div>
245	<!-- single author comments -->	245	<!-- single author comments -->
246	</div>	246	</div>
247	<!-- single mobile Left insight -->	247	<!-- single mobile Left insight -->
248	<div class="c-product-insight-wrp two-screen-spc-top">	248	<div class="c-product-insight-wrp two-screen-spc-top">
249	<div class="single-author-li-comments">	249	<div class="single-author-li-comments">
250	<div class="a-intro-comments">	250	<div class="a-intro-comments">
251	<p>	251	<p>
252	{{ currentSlideData.payload.comments[2].comment }}	252	{{ currentSlideData.payload.comments[2].comment }}
253	</p>	253	</p>
254	<ul class="rly-comment-set">	254	<ul class="rly-comment-set">
255	<li>	255	<li>
256	<img src="../assets/images/color-heart.svg" />	256	<img src="../assets/images/color-heart.svg" />
257	<a href="javascript:void(0);">0</a>	257	<a href="javascript:void(0);">0</a>
258	</li>	258	</li>
259	<li>	259	<li>
260	<img src="../assets/images/rply.svg" />	260	<img src="../assets/images/rply.svg" />
261	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	261	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
262	</li>	262	</li>
263	</ul>	263	</ul>
264	</div>	264	</div>
265	<!-- comments box -->	265	<!-- comments box -->
266	</div>	266	</div>
267	<div class="single-author-li-comments">	267	<div class="single-author-li-comments">
268	<div class="a-intro-comments">	268	<div class="a-intro-comments">
269	<p>	269	<p>
270	{{ currentSlideData.payload.comments[3].comment }}	270	{{ currentSlideData.payload.comments[3].comment }}
271	</p>	271	</p>
272	<ul class="rly-comment-set">	272	<ul class="rly-comment-set">
273	<li>	273	<li>
274	<img src="../assets/images/color-heart.svg" />	274	<img src="../assets/images/color-heart.svg" />
275	<a href="javascript:void(0);">0</a>	275	<a href="javascript:void(0);">0</a>
276	</li>	276	</li>
277	<li>	277	<li>
278	<img src="../assets/images/rply.svg" />	278	<img src="../assets/images/rply.svg" />
279	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	279	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
280	</li>	280	</li>
281	</ul>	281	</ul>
282	</div>	282	</div>
283	<!-- comments box -->	283	<!-- comments box -->
284	</div>	284	</div>
285	<!-- single author comments -->	285	<!-- single author comments -->
286	</div>	286	</div>
287	<!-- single mobile Right insight -->	287	<!-- single mobile Right insight -->
288	</div>	288	</div>
289	<!-- single author comments -->	289	<!-- single author comments -->
290	<div class="footer-nav">	290	<div class="footer-nav">
291	<div class="footer-top white-bg">	291	<div class="footer-top white-bg">
292	<div class="row">	292	<div class="row">
293	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	293	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
294	<div class="row h-100p">	294	<div class="row h-100p">
295	<div	295	<div
296	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	296	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
297	>	297	>
298	<div class="ft-comments-group testi-photos-ct">	298	<div class="ft-comments-group testi-photos-ct">
299	<div class="c-with-photos">	299	<div class="c-with-photos">
300	<span class="count-comments"	300	<span class="count-comments"
301	>{{ commentList.length - 1 }}+ Comments</span	301	>{{ commentList.length - 1 }}+ Comments</span
302	><!-- count commets -->	302	><!-- count commets -->
303	<ul class="comments-photos">	303	<ul class="comments-photos">
304	<li><img src="../assets/images/c-photo-1.png" /></li>	304	<li><img src="../assets/images/c-photo-1.png" /></li>
305	<li><img src="../assets/images/c-photo-2.png" /></li>	305	<li><img src="../assets/images/c-photo-2.png" /></li>
306	<li><img src="../assets/images/c-photo-3.png" /></li>	306	<li><img src="../assets/images/c-photo-3.png" /></li>
307	</ul>	307	</ul>
308	<!-- comment photos -->	308	<!-- comment photos -->
309	</div>	309	</div>
310	<div class="comments-detail all-c-space">	310	<div class="comments-detail all-c-space">
311	<span	311	<span
312	>{{ commentList[commentList.length - 1].user.name }}	312	>{{ commentList[commentList.length - 1].user.name }}
313	<a href="javascript:void(0);" @click="open_ct_box"	313	<a href="javascript:void(0);" @click="open_ct_box"
314	>View All</a	314	>View All</a
315	></span	315	></span
316	>	316	>
317	<p>	317	<p>
318	<!-- I wonder what the difference between “Dunzo Assistant”	318	<!-- I wonder what the difference between “Dunzo Assistant”
319	and “Pickup and Drop... -->	319	and “Pickup and Drop... -->
320	{{ commentList[commentList.length - 1].comment }}	320	{{ commentList[commentList.length - 1].comment }}
321	</p>	321	</p>
322	</div>	322	</div>
323	<!-- comments detail -->	323	<!-- comments detail -->
324	</div>	324	</div>
325	<!-- comments Group -->	325	<!-- comments Group -->
326	</div>	326	</div>
327	</div>	327	</div>
328	</div>	328	</div>
329	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	329	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
330	<div class="comment-frm no-c-frm">	330	<div class="comment-frm no-c-frm">
331	<div class="row">	331	<div class="row">
332	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	332	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
333	<div class="form-group frm-wdth addfrm-spc">	333	<div class="form-group frm-wdth addfrm-spc">
334	<input	334	<input
335	type="text"	335	type="text"
336	class="form-control"	336	class="form-control"
337	placeholder="Kathy, Something on your mind?"	337	placeholder="Kathy, Something on your mind?"
338	id="open_ct_box"	338	id="open_ct_box"
339	v-model="comment"	339	v-model="comment"
340	/>	340	/>
341	</div>	341	</div>
342	</div>	342	</div>
343	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	343	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
344	<a	344	<a
345	href="javascript:void(0);"	345	href="javascript:void(0);"
346	@click="createComment"	346	@click="createComment"
347	class="add-comment"	347	class="add-comment"
348	><img src="../assets/images/add-comment.svg" />	348	><img src="../assets/images/add-comment.svg" />
349	Comment</a	349	Comment</a
350	>	350	>
351	</div>	351	</div>
352	</div>	352	</div>
353	<!-- comment from -->	353	<!-- comment from -->
354	</div>	354	</div>
355	</div>	355	</div>
356	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	356	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
357	<ul class="top-intro-bt">	357	<ul class="top-intro-bt">
358	<li>	358	<li>
359	<a href="javascript:void(0);" @click="goBack"	359	<a href="javascript:void(0);" @click="goBack"
360	><img src="../assets/images/skip-prev.svg" /> Prev</a	360	><img src="../assets/images/skip-prev.svg" /> Prev</a
361	>	361	>
362	</li>	362	</li>
363	<li>	363	<li>
364	<a href="javascript:void(0);" @click="goNext"	364	<a href="javascript:void(0);" @click="goNext"
365	><img src="../assets/images/skip-next.svg" /> Skip to next	365	><img src="../assets/images/skip-next.svg" /> Skip to next
366	slide</a	366	slide</a
367	>	367	>
368	</li>	368	</li>
369	</ul>	369	</ul>
370	</div>	370	</div>
371	<!-- buttons list -->	371	<!-- buttons list -->
372	</div>	372	</div>
373	</div>	373	</div>
374	<!-- footer top -->	374	<!-- footer top -->
375	<div class="footer-bottom">	375	<div class="footer-bottom">
376	<ul>	376	<ul>
377	<li class="active"></li>	377	<li class="active"></li>
378	<li></li>	378	<li></li>
379	</ul>	379	</ul>
380	</div>	380	</div>
381	<!-- footer top -->	381	<!-- footer top -->
382	</div>	382	</div>
383	<!-- footer -->	383	<!-- footer -->
384	</div>	384	</div>
385	<!-- body wrapper -->	385	<!-- body wrapper -->
386	</div>	386	</div>
387	<!-- main wrapper -->	387	<!-- main wrapper -->
388	</main>	388	</main>
389	</template>	389	</template>
390		390
391	<script>	391	<script>
392	import Vue from "vue";	392	import Vue from "vue";
393	import router from "../router";	393	import router from "../router";
394	import axios from "axios";	394	import axios from "axios";
395	import moment from 'moment';	395	import moment from 'moment';
396		396
397	export default {	397	export default {
398	name: "SingleMobileScreenInsightTwo",	398	name: "SingleMobileScreenInsightTwo",
399		399
400	data() {	400	data() {
401	return {	401	return {
402	allSlide: [],	402	allSlide: [],
403	currentSlideIndex: null,	403	currentSlideIndex: null,
404	currentSlideData: null,	404	currentSlideData: null,
405	//	405	//
406	usertoken: null,	406	usertoken: null,
407	commentList: [],	407	commentList: [],
408	comment: null,	408	comment: null,
409	parentInput: true,	409	parentInput: true,
410	};	410	};
411	},	411	},
412	mounted() {	412	mounted() {
413	var allSlideData = localStorage.getItem(	413	var allSlideData = localStorage.getItem(
414	"spotlight_slide" + this.$route.params.caseStudyId	414	"spotlight_slide" + this.$route.params.caseStudyId
415	);	415	);
416	if (allSlideData) {	416	if (allSlideData) {
417	this.allSlide = JSON.parse(allSlideData);	417	this.allSlide = JSON.parse(allSlideData);
418	this.getCurrentSlideData();	418	this.getCurrentSlideData();
419	}	419	}
420	var userdata = localStorage.getItem("spotlight_usertoken");	420	var userdata = localStorage.getItem("spotlight_usertoken");
421	if (userdata) {	421	if (userdata) {
422	userdata = JSON.parse(userdata);	422	userdata = JSON.parse(userdata);
423	this.usertoken = userdata.token;	423	this.usertoken = userdata.token;
424	this.getComment();	424	this.getComment();
425	}	425	}
426	},	426	},
427	methods: {	427	methods: {
428	getCurrentSlideData() {	428	getCurrentSlideData() {
429	var i = this.allSlide.findIndex(	429	var i = this.allSlide.findIndex(
430	(slide_) => slide_.slideId == this.$route.params.slideId	430	(slide_) => slide_.slideId == this.$route.params.slideId
431	);	431	);
432	this.currentSlideIndex = i;	432	this.currentSlideIndex = i;
433	this.currentSlideData = this.allSlide[i];	433	this.currentSlideData = this.allSlide[i];
434	console.log("currentSlideData", this.currentSlideData);	434	console.log("currentSlideData", this.currentSlideData);
435	},	435	},
436	goNext() {	436	goNext() {
437	this.currentSlideIndex++;	437	this.currentSlideIndex++;
438	this.$router.push({	438	this.$router.push({
439	name: this.allSlide[this.currentSlideIndex].ur,	439	name: this.allSlide[this.currentSlideIndex].ur,
440	params: {	440	params: {
441	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	441	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
442	slideId: this.allSlide[this.currentSlideIndex].slideId,	442	slideId: this.allSlide[this.currentSlideIndex].slideId,
443	},	443	},
444	});	444	});
445	},	445	},
446	goBack() {	446	goBack() {
447	this.currentSlideIndex--;	447	this.currentSlideIndex--;
448	this.$router.push({	448	this.$router.push({
449	name: this.allSlide[this.currentSlideIndex].ur,	449	name: this.allSlide[this.currentSlideIndex].ur,
450	params: {	450	params: {
451	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	451	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
452	slideId: this.allSlide[this.currentSlideIndex].slideId,	452	slideId: this.allSlide[this.currentSlideIndex].slideId,
453	},	453	},
454	});	454	});
455	},	455	},
456	createComment() {	456	createComment() {
457	console.log("===", this.comment);	457	console.log("===", this.comment);
458	var obj = {	458	var obj = {
459	caseStudyId: this.currentSlideData.caseStudyId,	459	caseStudyId: this.currentSlideData.caseStudyId,
460	slideId: this.currentSlideData.slideId,	460	slideId: this.currentSlideData.slideId,
461	comment: this.comment,	461	comment: this.comment,
462		462
463	};	463	};
464	axios	464	axios
465	.post("/bounceBoard/comment", obj, {	465	.post("/bounceBoard/comment", obj, {
466	headers: {	466	headers: {
467	Authorization: "Bearer " + this.usertoken,	467	Authorization: "Bearer " + this.usertoken,
468	},	468	},
469	})	469	})
470	.then((response) => {	470	.then((response) => {
471	this.comment = null;	471	this.comment = null;
472	this.getComment();	472	this.getComment();
473	console.log(response);	473	console.log(response);
474	})	474	})
475	.catch((error) => {	475	.catch((error) => {
476	if (error.response) {	476	if (error.response) {
477	this.$toaster.error(error.response.data.message);	477	this.$toaster.error(error.response.data.message);
478	}	478	}
479	});	479	});
480	},	480	},
481	createChildComment(cmnt) {	481	createChildComment(cmnt) {
482	console.log(cmnt,"===", this.comment);	482	console.log(cmnt,"===", this.comment);
483	var obj = {	483	var obj = {
484	caseStudyId: this.currentSlideData.caseStudyId,	484	caseStudyId: this.currentSlideData.caseStudyId,
485	slideId: this.currentSlideData.slideId,	485	slideId: this.currentSlideData.slideId,
486	comment: this.comment,	486	comment: this.comment,
487	parentId: cmnt._id,	487	parentId: cmnt._id,
488		488
489	};	489	};
490	axios	490	axios
491	.post("/bounceBoard/comment", obj, {	491	.post("/bounceBoard/comment", obj, {
492	headers: {	492	headers: {
493	Authorization: "Bearer " + this.usertoken,	493	Authorization: "Bearer " + this.usertoken,
494	},	494	},
495	})	495	})
496	.then((response) => {	496	.then((response) => {
497	this.comment = null;	497	this.comment = null;
498	this.discardRply(cmnt);	498	this.discardRply(cmnt);
499	this.getComment();	499	this.getComment();
500	console.log(response);	500	console.log(response);
501	})	501	})
502	.catch((error) => {	502	.catch((error) => {
503	if (error.response) {	503	if (error.response) {
504	this.$toaster.error(error.response.data.message);	504	this.$toaster.error(error.response.data.message);
505	}	505	}
506	});	506	});
507	},	507	},
508	getComment() {	508	getComment() {
509	axios	509	axios
510	.get(	510	.get(
511	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	511	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
512	{	512	{
513	headers: {	513	headers: {
514	Authorization: "Bearer " + this.usertoken,	514	Authorization: "Bearer " + this.usertoken,
515	},	515	},
516	}	516	}
517	)	517	)
518	.then((response) => {	518	.then((response) => {
519	console.log(response.data);	519	console.log(response.data);
520	var comments = [];	520	var comments = [];
521	var keys = Object.keys(response.data.data)	521	var keys = Object.keys(response.data.data)
522	response.data.data	522	response.data.data
523	keys.forEach((key_) => {	523	keys.forEach((key_) => {
524	comments.push(response.data.data[key_])	524	comments.push(response.data.data[key_])
525	});	525	});
526	comments.forEach((coment_)=>{	526	comments.forEach((coment_)=>{
527	coment_.childInput = false;	527	coment_.childInput = false;
528	});	528	});
529	console.log("comments",comments)	529	console.log("comments",comments)
530	this.commentList = comments;	530	this.commentList = comments;
531	})	531	})
532	.catch((error) => console.log(error));	532	.catch((error) => console.log(error));
533	},	533	},
534	dateGenerator(curreDate){	534	dateGenerator(curreDate){
535	var todayDate = moment(new Date(), "DD.MM.YYYY");	535	var todayDate = moment(new Date(), "DD.MM.YYYY");
536	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	536	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
537	var result = todayDate.diff(endDate, 'days');	537	var result = todayDate.diff(endDate, 'days');
538	return result;	538	return result;
539	},	539	},
540	goToLogin() {	540	goToLogin() {
541	this.$router.push("/");	541	this.$router.push("/login");
542	},	542	},
543	goToSignUp() {	543	goToSignUp() {
544	this.$router.push("/signup");	544	this.$router.push("/");
545	},	545	},
546	chtbox_close() {	546	chtbox_close() {
547	$("#cht_box_close").removeClass("cht_close");	547	$("#cht_box_close").removeClass("cht_close");
548	$("#open_ct_box, .c_hide").show();	548	$("#open_ct_box, .c_hide").show();
549	$(".footer-top").addClass("white-bg");	549	$(".footer-top").addClass("white-bg");
550	},	550	},
551	open_ct_box() {	551	open_ct_box() {
552	$("#cht_box_close").addClass("cht_close");	552	$("#cht_box_close").addClass("cht_close");
553	$("#open_ct_box, .c_hide").hide();	553	$("#open_ct_box, .c_hide").hide();
554	$(".footer-top").removeClass("white-bg");	554	$(".footer-top").removeClass("white-bg");
555	},	555	},
556	eachRply(cmnt) {	556	eachRply(cmnt) {
557	cmnt.childInput = true;	557	cmnt.childInput = true;
558	this.parentInput = false;	558	this.parentInput = false;
559	},	559	},
560	discardRply(cmnt) {	560	discardRply(cmnt) {
561	cmnt.childInput = false;	561	cmnt.childInput = false;
562	this.parentInput = true;	562	this.parentInput = true;
563		563
564	},	564	},
565	},	565	},
566	};	566	};
567	//	567	//
568	</script>	568	</script>
569		569

src/components/SingleScreengrabOneInsight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="screengrab-wrp">	18	<div class="screengrab-wrp">
19	<img src="../assets/images/saved-for-letter.png" />	19	<img src="../assets/images/saved-for-letter.png" />
20	<div class="single-left-Insight-comments screengrab-lspc">	20	<div class="single-left-Insight-comments screengrab-lspc">
21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />	21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22	<div class="single-author-li-comments">	22	<div class="single-author-li-comments">
23	<div class="a-intro-comments custom-c-style">	23	<div class="a-intro-comments custom-c-style">
24	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	24	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
25	<ul class="rly-comment-set">	25	<ul class="rly-comment-set">
26	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	26	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	27	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28	</ul>	28	</ul>
29	</div><!-- comments box -->	29	</div><!-- comments box -->
30	</div><!-- single author comments -->	30	</div><!-- single author comments -->
31		31
32	</div><!-- single mobile Left insight -->	32	</div><!-- single mobile Left insight -->
33	<div class="c-product-insight-wrp screengrab-rspc">	33	<div class="c-product-insight-wrp screengrab-rspc">
34	<div class="single-author-li-comments ">	34	<div class="single-author-li-comments ">
35	<div class="a-intro-comments custom-selected-style">	35	<div class="a-intro-comments custom-selected-style">
36	<img src="../assets/images/rect.svg" class="rect" />	36	<img src="../assets/images/rect.svg" class="rect" />
37	<div class="top-wrp">	37	<div class="top-wrp">
38	PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	38	PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
39	</div>	39	</div>
40	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>	40	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
41	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.	41	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
42	<br><br>	42	<br><br>
43	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>	43	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
44	</p>	44	</p>
45	<div class="footer">	45	<div class="footer">
46	<a href="#" class="cit-16">16 Citations</a>	46	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
47	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	47	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
48	</div><!-- footer -->	48	</div><!-- footer -->
49		49
50	</div><!-- comments box -->	50	</div><!-- comments box -->
51	</div><!-- single author comments -->	51	</div><!-- single author comments -->
52		52
53	</div><!-- single mobile Right insight -->	53	</div><!-- single mobile Right insight -->
54	</div><!-- Single Mobile Insight -->	54	</div><!-- Single Mobile Insight -->
55	<div class="footer-nav">	55	<div class="footer-nav">
56	<div class="footer-top white-bg">	56	<div class="footer-top white-bg">
57	<div class="row">	57	<div class="row">
58	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	58	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
59	<div class="row h-100p">	59	<div class="row h-100p">
60	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	60	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
61	<ul class="top-intro-bt">	61	<ul class="top-intro-bt">
62	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	62	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
63	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	63	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
64	</ul>	64	</ul>
65	</div>	65	</div>
66	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">	66	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
67	<div class="ft-comments-group no-comment-count">	67	<div class="ft-comments-group no-comment-count">
68	<div class="row">	68	<div class="row">
69		69
70	<div class="col-12">	70	<div class="col-12">
71	<img src="../assets/images/u-comments.svg" class="no-comments-img" />	71	<img src="../assets/images/u-comments.svg" class="no-comments-img" />
72	<div class="comments-detail">	72	<div class="comments-detail">
73	<span class="no-c-yet">No comments yet</span>	73	<span class="no-c-yet">No comments yet</span>
74	<p>Be the first one to post a comment to start a discussion</p>	74	<p>Be the first one to post a comment to start a discussion</p>
75	</div><!-- comments detail -->	75	</div><!-- comments detail -->
76	</div> </div>	76	</div> </div>
77	</div><!-- comments Group -->	77	</div><!-- comments Group -->
78	</div></div>	78	</div></div>
79	</div>	79	</div>
80	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">	80	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
81		81
82	<div class="comment-frm no-c-frm">	82	<div class="comment-frm no-c-frm">
83	<div class="row">	83	<div class="row">
84	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	84	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
85	<div class="form-group frm-wdth">	85	<div class="form-group frm-wdth">
86	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	86	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
87	</div></div>	87	</div></div>
88	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	88	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
89	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	89	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
90	</div>	90	</div>
91	</div><!-- comment from -->	91	</div><!-- comment from -->
92	</div> </div></div>	92	</div> </div></div>
93	</div><!-- footer top -->	93	</div><!-- footer top -->
94	<div class="footer-bottom">	94	<div class="footer-bottom">
95	<ul>	95	<ul>
96	<li class="active"></li>	96	<li class="active"></li>
97	<li></li>	97	<li></li>
98	</ul>	98	</ul>
99	</div><!-- footer top -->	99	</div><!-- footer top -->
100	</div><!-- footer -->	100	</div><!-- footer -->
101		101
102	</div>	102	</div>
103	<!-- body wrapper -->	103	<!-- body wrapper -->
104	</div>	104	</div>
105	<!-- main wrapper -->	105	<!-- main wrapper -->
106	</main>	106	</main>
107	</template>	107	</template>
108		108
109	<script>	109	<script>
110	import Vue from "vue";	110	import Vue from "vue";
111	import router from "../router";	111	import router from "../router";
112		112
113	export default {	113	export default {
114	name: "SingleScreengrabOneInsight",	114	name: "SingleScreengrabOneInsight",
115		115
116	data() {	116	data() {
117	return {};	117	return {};
118	},	118	},
119	mounted() {},	119	mounted() {},
120	methods: {	120	methods: {
121	goToLogin() {	121	goToLogin() {
122	this.$router.push("/");	122	this.$router.push("/login");
123	},	123	},
124	goToSignUp() {	124	goToSignUp() {
125	this.$router.push("/signup");	125	this.$router.push("/");
126	},	126	},
127		127
128	},	128	},
129	};	129	};
130	</script>	130	</script>
131		131

src/components/SingleWebScreenInsightOne.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="s-web-screen-wrp">	18	<div class="s-web-screen-wrp">
19		19
20	<div class="single-left-Insight-comments web-comment-spc">	20	<div class="single-left-Insight-comments web-comment-spc">
21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />	21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22	<div class="single-author-li-comments ">	22	<div class="single-author-li-comments ">
23	<div class="a-intro-comments custom-c-style">	23	<div class="a-intro-comments custom-c-style">
24	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	24	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
25	<ul class="rly-comment-set">	25	<ul class="rly-comment-set">
26	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	26	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	27	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28	</ul>	28	</ul>
29	</div><!-- comments box -->	29	</div><!-- comments box -->
30	</div><!-- single author comments -->	30	</div><!-- single author comments -->
31		31
32	</div><!-- single mobile Left insight -->	32	</div><!-- single mobile Left insight -->
33	<div class="c-product-insight-wrp web-ps-insight-spc">	33	<div class="c-product-insight-wrp web-ps-insight-spc">
34	<div class="single-author-li-comments ">	34	<div class="single-author-li-comments ">
35	<div class="a-intro-comments custom-selected-style">	35	<div class="a-intro-comments custom-selected-style">
36	<img src="../assets/images/rect.svg" class="rect" />	36	<img src="../assets/images/rect.svg" class="rect" />
37	<div class="top-wrp">	37	<div class="top-wrp">
38	PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	38	PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
39	</div>	39	</div>
40	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>	40	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
41	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.	41	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
42	<br><br>	42	<br><br>
43	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>	43	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
44	</p>	44	</p>
45	<div class="footer">	45	<div class="footer">
46	<a href="#" class="cit-16">16 Citations</a>	46	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
47	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	47	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
48	</div><!-- footer -->	48	</div><!-- footer -->
49		49
50	</div><!-- comments box -->	50	</div><!-- comments box -->
51	</div><!-- single author comments -->	51	</div><!-- single author comments -->
52		52
53	</div><!-- single mobile Right insight -->	53	</div><!-- single mobile Right insight -->
54	</div><!-- Single Mobile Insight -->	54	</div><!-- Single Mobile Insight -->
55	<div class="footer-nav">	55	<div class="footer-nav">
56	<div class="footer-top white-bg">	56	<div class="footer-top white-bg">
57	<div class="row">	57	<div class="row">
58	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	58	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
59	<div class="row h-100p">	59	<div class="row h-100p">
60	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	60	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
61	<ul class="top-intro-bt">	61	<ul class="top-intro-bt">
62	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	62	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
63	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	63	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
64	</ul>	64	</ul>
65	</div>	65	</div>
66	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">	66	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
67	<div class="ft-comments-group no-comment-count">	67	<div class="ft-comments-group no-comment-count">
68	<div class="row">	68	<div class="row">
69		69
70	<div class="col-12">	70	<div class="col-12">
71	<img src="../assets/images/u-comments.svg" class="no-comments-img" />	71	<img src="../assets/images/u-comments.svg" class="no-comments-img" />
72	<div class="comments-detail">	72	<div class="comments-detail">
73	<span class="no-c-yet">No comments yet</span>	73	<span class="no-c-yet">No comments yet</span>
74	<p>Be the first one to post a comment to start a discussion</p>	74	<p>Be the first one to post a comment to start a discussion</p>
75	</div><!-- comments detail -->	75	</div><!-- comments detail -->
76	</div> </div>	76	</div> </div>
77	</div><!-- comments Group -->	77	</div><!-- comments Group -->
78	</div></div>	78	</div></div>
79	</div>	79	</div>
80	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">	80	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
81		81
82	<div class="comment-frm no-c-frm">	82	<div class="comment-frm no-c-frm">
83	<div class="row">	83	<div class="row">
84	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	84	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
85	<div class="form-group frm-wdth">	85	<div class="form-group frm-wdth">
86	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	86	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
87	</div></div>	87	</div></div>
88	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	88	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
89	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	89	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
90	</div>	90	</div>
91	</div><!-- comment from -->	91	</div><!-- comment from -->
92	</div> </div></div>	92	</div> </div></div>
93	</div><!-- footer top -->	93	</div><!-- footer top -->
94	<div class="footer-bottom">	94	<div class="footer-bottom">
95	<ul>	95	<ul>
96	<li class="active"></li>	96	<li class="active"></li>
97	<li></li>	97	<li></li>
98	</ul>	98	</ul>
99	</div><!-- footer top -->	99	</div><!-- footer top -->
100	</div><!-- footer -->	100	</div><!-- footer -->
101		101
102	</div>	102	</div>
103	<!-- body wrapper -->	103	<!-- body wrapper -->
104	</div>	104	</div>
105	<!-- main wrapper -->	105	<!-- main wrapper -->
106	</main>	106	</main>
107	</template>	107	</template>
108		108
109	<script>	109	<script>
110	import Vue from "vue";	110	import Vue from "vue";
111	import router from "../router";	111	import router from "../router";
112		112
113	export default {	113	export default {
114	name: "SingleWebScreenInsightOne",	114	name: "SingleWebScreenInsightOne",
115		115
116	data() {	116	data() {
117	return {};	117	return {};
118	},	118	},
119	mounted() {},	119	mounted() {},
120	methods: {	120	methods: {
121	goToLogin() {	121	goToLogin() {
122	this.$router.push("/");	122	this.$router.push("/login");
123	},	123	},
124	goToSignUp() {	124	goToSignUp() {
125	this.$router.push("/signup");	125	this.$router.push("/");
126	},	126	},
127		127
128	},	128	},
129	};	129	};
130	</script>	130	</script>
131		131

src/components/ToAddYourComment.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="single-mobileInsight">	18	<div class="single-mobileInsight">
19	<img src="../assets/images/slide.png" class="slide-img" />	19	<img src="../assets/images/slide.png" class="slide-img" />
20	<div class="single-left-Insight-comments">	20	<div class="single-left-Insight-comments">
21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />	21	<img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
22	<div class="single-author-li-comments">	22	<div class="single-author-li-comments">
23	<div class="a-intro-comments custom-c-style">	23	<div class="a-intro-comments custom-c-style">
24	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	24	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
25	<ul class="rly-comment-set">	25	<ul class="rly-comment-set">
26	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	26	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	27	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28	</ul>	28	</ul>
29	</div><!-- comments box -->	29	</div><!-- comments box -->
30	</div><!-- single author comments -->	30	</div><!-- single author comments -->
31	<div class="single-author-li-comments">	31	<div class="single-author-li-comments">
32	<div class="a-intro-comments custom-c-style">	32	<div class="a-intro-comments custom-c-style">
33	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	33	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
34	<ul class="rly-comment-set">	34	<ul class="rly-comment-set">
35	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	35	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
36	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	36	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
37	</ul>	37	</ul>
38	</div><!-- comments box -->	38	</div><!-- comments box -->
39	</div><!-- single author comments -->	39	</div><!-- single author comments -->
40	</div><!-- single mobile Left insight -->	40	</div><!-- single mobile Left insight -->
41	<div class="c-product-insight-wrp add_comments-spc_r">	41	<div class="c-product-insight-wrp add_comments-spc_r">
42	<div class="single-author-li-comments ">	42	<div class="single-author-li-comments ">
43	<div class="a-intro-comments custom-selected-style">	43	<div class="a-intro-comments custom-selected-style">
44	<img src="../assets/images/rect.svg" class="rect" />	44	<img src="../assets/images/rect.svg" class="rect" />
45	<div class="top-wrp">	45	<div class="top-wrp">
46	PRODUCT Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	46	PRODUCT Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
47	</div>	47	</div>
48	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>	48	<div class="top-head">Decide on using multiple call to action vs single call to action depending on the stage of the user journey</div>
49	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.	49	<p>Marketing 101 teaches us to use one single, call to action (CTA) at the top of the funnel before the uer has shown interest in the product.
50	<br><br>	50	<br><br>
51	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>	51	When the user is already onboarded and is in the <strong> engage stage </strong>, it may be better to use a single CTA for each use case in order to <strong> avoid ambiguity.</strong>
52	</p>	52	</p>
53	<div class="footer">	53	<div class="footer">
54	<a href="#" class="cit-16">16 Citations</a>	54	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
55	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	55	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
56	</div><!-- footer -->	56	</div><!-- footer -->
57		57
58	</div><!-- comments box -->	58	</div><!-- comments box -->
59	</div><!-- single author comments -->	59	</div><!-- single author comments -->
60	<a href="#" class="add-comments-bt"><img src="../assets/images/rotate.svg" /> To add your comment</a>	60	<a href="javascript:void(0);" class="add-comments-bt"><img src="../assets/images/rotate.svg" /> To add your comment</a>
61	</div><!-- single mobile Right insight -->	61	</div><!-- single mobile Right insight -->
62	</div><!-- Single Mobile Insight -->	62	</div><!-- Single Mobile Insight -->
63	<div class="footer-nav">	63	<div class="footer-nav">
64	<div class="footer-top">	64	<div class="footer-top">
65	<div class="row">	65	<div class="row">
66	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	66	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
67	<div class="row h-100p">	67	<div class="row h-100p">
68	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	68	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
69	<ul class="top-intro-bt">	69	<ul class="top-intro-bt">
70	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	70	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
71	<li><a href="#"><img src="../assets/images/skip-next.svg"> Next</a></li>	71	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Next</a></li>
72	</ul>	72	</ul>
73	</div>	73	</div>
74		74
75	</div>	75	</div>
76	</div>	76	</div>
77	</div>	77	</div>
78	</div><!-- footer top -->	78	</div><!-- footer top -->
79	<div class="footer-bottom">	79	<div class="footer-bottom">
80	<ul>	80	<ul>
81	<li class=""></li>	81	<li class=""></li>
82	<li></li>	82	<li></li>
83	</ul>	83	</ul>
84	</div><!-- footer top -->	84	</div><!-- footer top -->
85	</div><!-- footer -->	85	</div><!-- footer -->
86		86
87	</div>	87	</div>
88	<!-- body wrapper -->	88	<!-- body wrapper -->
89	</div>	89	</div>
90	<!-- main wrapper -->	90	<!-- main wrapper -->
91	</main>	91	</main>
92	</template>	92	</template>
93		93
94	<script>	94	<script>
95	import Vue from "vue";	95	import Vue from "vue";
96	import router from "../router";	96	import router from "../router";
97		97
98	export default {	98	export default {
99	name: "ToAddYourComment",	99	name: "ToAddYourComment",
100		100
101	data() {	101	data() {
102	return {};	102	return {};
103	},	103	},
104	mounted() {},	104	mounted() {},
105	methods: {	105	methods: {
106	goToLogin() {	106	goToLogin() {
107	this.$router.push("/");	107	this.$router.push("/login");
108	},	108	},
109	goToSignUp() {	109	goToSignUp() {
110	this.$router.push("/signup");	110	this.$router.push("/");
111	},	111	},
112		112
113	},	113	},
114	};	114	};
115	</script>	115	</script>
116		116

src/components/TwoAuthor.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/lock.svg"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="smasung-g-10wrp">	18	<div class="smasung-g-10wrp">
19	<div class="author-two">	19	<div class="author-two">
20	<div class="comment-box-s-1 custom-2-author">	20	<div class="comment-box-s-1 custom-2-author">
21	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>	21	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>
22	<div class="footer">	22	<div class="footer">
23	<img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a>	23	<img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);">View My Profile</a>
24	</div><!-- footer -->	24	</div><!-- footer -->
25	</div><!-- comment box 1 -->	25	</div><!-- comment box 1 -->
26		26
27	<div class="user-photo">	27	<div class="user-photo">
28	<img src="../assets/images/author-two.svg" class="author-two-photo" />	28	<img src="../assets/images/author-two.svg" class="author-two-photo" />
29	</div>	29	</div>
30	</div><!-- comment box -->	30	</div><!-- comment box -->
31	<div class="samsung-compare-c">	31	<div class="samsung-compare-c">
32	<div class="logo-1"><img src="../assets/images/logo-1.png" /></div><!-- logo 1 -->	32	<div class="logo-1"><img src="../assets/images/logo-1.png" /></div><!-- logo 1 -->
33	<div class="vs">vs</div><!-- vs -->	33	<div class="vs">vs</div><!-- vs -->
34	<div class="logo-2"><img src="../assets/images/logo-2.png" /></div><!-- logo 2 -->	34	<div class="logo-2"><img src="../assets/images/logo-2.png" /></div><!-- logo 2 -->
35	</div><!-- compare -->	35	</div><!-- compare -->
36		36
37	<div class="comment-box author-one">	37	<div class="comment-box author-one">
38	<div class="comment-box-s-1">	38	<div class="comment-box-s-1">
39	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>	39	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>
40	<div class="footer">	40	<div class="footer">
41	<img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a>	41	<img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);">View My Profile</a>
42	</div><!-- footer -->	42	</div><!-- footer -->
43	</div><!-- comment box 1 -->	43	</div><!-- comment box 1 -->
44	<div class="comment-box-s-1 comment-w-397">	44	<div class="comment-box-s-1 comment-w-397">
45	<p>	45	<p>
46	Use arrow keys to navigate <br/>	46	Use arrow keys to navigate <br/>
47	<img src="../assets/images/key-arrow.jpg" class="key-arrow" />	47	<img src="../assets/images/key-arrow.jpg" class="key-arrow" />
48	</p>	48	</p>
49	</div><!-- comment box 1 -->	49	</div><!-- comment box 1 -->
50	<div class="user-photo">	50	<div class="user-photo">
51	<img src="../assets/images/comment-photo.png" />	51	<img src="../assets/images/comment-photo.png" />
52	</div>	52	</div>
53	</div><!-- comment box -->	53	</div><!-- comment box -->
54	</div><!-- samsung g 10 -->	54	</div><!-- samsung g 10 -->
55	<div class="footer-nav">	55	<div class="footer-nav">
56	<div class="footer-top">	56	<div class="footer-top">
57	<ul class="top-intro-bt">	57	<ul class="top-intro-bt">
58	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	58	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
59	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	59	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
60	</ul>	60	</ul>
61	</div><!-- footer top -->	61	</div><!-- footer top -->
62	<div class="footer-bottom">	62	<div class="footer-bottom">
63	<ul>	63	<ul>
64	<li></li>	64	<li></li>
65	<li></li>	65	<li></li>
66	</ul>	66	</ul>
67	</div><!-- footer top -->	67	</div><!-- footer top -->
68	</div><!-- footer -->	68	</div><!-- footer -->
69		69
70	</div>	70	</div>
71	<!-- body wrapper -->	71	<!-- body wrapper -->
72	</div>	72	</div>
73	<!-- main wrapper -->	73	<!-- main wrapper -->
74	</main>	74	</main>
75	</template>	75	</template>
76		76
77	<script>	77	<script>
78	import Vue from "vue";	78	import Vue from "vue";
79	import router from "../router";	79	import router from "../router";
80		80
81	export default {	81	export default {
82	name: "TwoAuthor",	82	name: "TwoAuthor",
83		83
84	data() {	84	data() {
85	return {};	85	return {};
86	},	86	},
87	mounted() {},	87	mounted() {},
88	methods: {	88	methods: {
89	goToLogin() {	89	goToLogin() {
90	this.$router.push("/");	90	this.$router.push("/login");
91	},	91	},
92	goToSignUp() {	92	goToSignUp() {
93	this.$router.push("/signup");	93	this.$router.push("/");
94	},	94	},
95		95
96	},	96	},
97	};	97	};
98	</script>	98	</script>
99		99

src/components/TwoAuthorDesktop.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="two-author-desktop">	18	<div class="two-author-desktop">
19	<div class="author-two-desktop">	19	<div class="author-two-desktop">
20	<div class="comment-box-s-1 custom-2-author">	20	<div class="comment-box-s-1 custom-2-author">
21	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>	21	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>
22	<div class="footer">	22	<div class="footer">
23	<img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a>	23	<img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);">View My Profile</a>
24	</div><!-- footer -->	24	</div><!-- footer -->
25	</div><!-- comment box 1 -->	25	</div><!-- comment box 1 -->
26		26
27	<div class="user-photo">	27	<div class="user-photo">
28	<img src="../assets/images/author-two.svg" class="author-two-photo" />	28	<img src="../assets/images/author-two.svg" class="author-two-photo" />
29	</div>	29	</div>
30	</div><!-- comment box -->	30	</div><!-- comment box -->
31	<div class="samsung-compare-c desktop-two-logo-spc">	31	<div class="samsung-compare-c desktop-two-logo-spc">
32	<div class="logo-1"><img src="../assets/images/segment.png" /></div><!-- logo 1 -->	32	<div class="logo-1"><img src="../assets/images/segment.png" /></div><!-- logo 1 -->
33	</div><!-- compare -->	33	</div><!-- compare -->
34		34
35	<div class="comment-box author-one-desktop">	35	<div class="comment-box author-one-desktop">
36	<div class="comment-box-s-1">	36	<div class="comment-box-s-1">
37	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>	37	<p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p>
38	<div class="footer">	38	<div class="footer">
39	<img src="../assets/images/comment-user.svg" /> <a href="#">View My Profile</a>	39	<img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);">View My Profile</a>
40	</div><!-- footer -->	40	</div><!-- footer -->
41	</div><!-- comment box 1 -->	41	</div><!-- comment box 1 -->
42	<div class="comment-box-s-1 comment-w-397">	42	<div class="comment-box-s-1 comment-w-397">
43	<p>	43	<p>
44	Use arrow keys to navigate <br/>	44	Use arrow keys to navigate <br/>
45	<img src="../assets/images/key-arrow.jpg" class="key-arrow" />	45	<img src="../assets/images/key-arrow.jpg" class="key-arrow" />
46	</p>	46	</p>
47	</div><!-- comment box 1 -->	47	</div><!-- comment box 1 -->
48	<div class="user-photo">	48	<div class="user-photo">
49	<img src="../assets/images/comment-photo.png" />	49	<img src="../assets/images/comment-photo.png" />
50	</div>	50	</div>
51	</div><!-- comment box -->	51	</div><!-- comment box -->
52	</div><!-- samsung g 10 -->	52	</div><!-- samsung g 10 -->
53	<div class="footer-nav">	53	<div class="footer-nav">
54	<div class="footer-top">	54	<div class="footer-top">
55	<ul class="top-intro-bt">	55	<ul class="top-intro-bt">
56	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	56	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
57	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	57	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
58	</ul>	58	</ul>
59	</div><!-- footer top -->	59	</div><!-- footer top -->
60	<div class="footer-bottom">	60	<div class="footer-bottom">
61	<ul>	61	<ul>
62	<li></li>	62	<li></li>
63	<li></li>	63	<li></li>
64	</ul>	64	</ul>
65	</div><!-- footer top -->	65	</div><!-- footer top -->
66	</div><!-- footer -->	66	</div><!-- footer -->
67		67
68	</div>	68	</div>
69	<!-- body wrapper -->	69	<!-- body wrapper -->
70	</div>	70	</div>
71	<!-- main wrapper -->	71	<!-- main wrapper -->
72	</main>	72	</main>
73	</template>	73	</template>
74		74
75	<script>	75	<script>
76	import Vue from "vue";	76	import Vue from "vue";
77	import router from "../router";	77	import router from "../router";
78		78
79	export default {	79	export default {
80	name: "TwoAuthorDesktop",	80	name: "TwoAuthorDesktop",
81		81
82	data() {	82	data() {
83	return {};	83	return {};
84	},	84	},
85	mounted() {},	85	mounted() {},
86	methods: {	86	methods: {
87	goToLogin() {	87	goToLogin() {
88	this.$router.push("/");	88	this.$router.push("/login");
89	},	89	},
90	goToSignUp() {	90	goToSignUp() {
91	this.$router.push("/signup");	91	this.$router.push("/");
92	},	92	},
93		93
94	},	94	},
95	};	95	};
96	</script>	96	</script>
97		97

src/components/TwoAuthorReadingNow.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro app-discovery-bg">	3	<div class="container-fluid episode-intro app-discovery-bg">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	5	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
6	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	6	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
7	<span class="navbar-toggler-icon"></span>	7	<span class="navbar-toggler-icon"></span>
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	</button>	10	</button>
11	<div class="user-profile-photo insights-profile">	11	<div class="user-profile-photo insights-profile">
12	<a href="#"><img src="../assets/images/lock.svg"></a>	12	<a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
13	</div>	13	</div>
14	</nav>	14	</nav>
15	<!-- menu wrapper -->	15	<!-- menu wrapper -->
16	<div class="intro-startup">	16	<div class="intro-startup">
17	<div class="spot-light-top">	17	<div class="spot-light-top">
18	<img src="../assets/images/spot-light-top.svg" />	18	<img src="../assets/images/spot-light-top.svg" />
19	<div class="app-discovery">	19	<div class="app-discovery">
20	<div class="top-user">	20	<div class="top-user">
21	<img src="../assets/images/app-photo.svg" />	21	<img src="../assets/images/app-photo.svg" />
22	</div><!-- top user -->	22	</div><!-- top user -->
23	<h1 class="author-two-head-spc">App Discovery</h1>	23	<h1 class="author-two-head-spc">App Discovery</h1>
24	<h2>01</h2>	24	<h2>01</h2>
25	<img src="../assets/images/author-t.svg" class="author-app-img" />	25	<img src="../assets/images/author-t.svg" class="author-app-img" />
26	<img src="../assets/images/discovery.svg" class="discovery-app-img" />	26	<img src="../assets/images/discovery.svg" class="discovery-app-img" />
27	</div><!-- app Disovery -->	27	</div><!-- app Disovery -->
28		28
29	</div><!-- spot light top -->	29	</div><!-- spot light top -->
30	<img src="../assets/images/popcorn-set.svg" class="popcorn-set" />	30	<img src="../assets/images/popcorn-set.svg" class="popcorn-set" />
31	<div class="footer-nav">	31	<div class="footer-nav">
32	<div class="footer-top">	32	<div class="footer-top">
33	<ul class="top-intro-bt">	33	<ul class="top-intro-bt">
34	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	34	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
35	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	35	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
36	</ul>	36	</ul>
37	</div><!-- footer top -->	37	</div><!-- footer top -->
38	<div class="footer-bottom">	38	<div class="footer-bottom">
39	<ul>	39	<ul>
40	<li class="active"></li>	40	<li class="active"></li>
41	<li></li>	41	<li></li>
42	</ul>	42	</ul>
43	</div><!-- footer top -->	43	</div><!-- footer top -->
44	</div><!-- footer -->	44	</div><!-- footer -->
45		45
46	</div>	46	</div>
47	<!-- body wrapper -->	47	<!-- body wrapper -->
48	</div>	48	</div>
49	<!-- main wrapper -->	49	<!-- main wrapper -->
50	</main>	50	</main>
51	</template>	51	</template>
52		52
53	<script>	53	<script>
54	import Vue from "vue";	54	import Vue from "vue";
55	import router from "../router";	55	import router from "../router";
56		56
57	export default {	57	export default {
58	name: "TwoAuthorReadingNow",	58	name: "TwoAuthorReadingNow",
59		59
60	data() {	60	data() {
61	return {};	61	return {};
62	},	62	},
63	mounted() {},	63	mounted() {},
64	methods: {	64	methods: {
65	goToLogin() {	65	goToLogin() {
66	this.$router.push("/");	66	this.$router.push("/login");
67	},	67	},
68	goToSignUp() {	68	goToSignUp() {
69	this.$router.push("/signup");	69	this.$router.push("/");
70	},	70	},
71		71
72	},	72	},
73	};	73	};
74	</script>	74	</script>
75		75

src/components/TwoScreenWithInsight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"	5	<a class="navbar-brand" href="javascript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="#"><img src="../assets/images/user.png" /></a>	22	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23	</div>	23	</div>
24	</nav>	24	</nav>
25	<!-- menu wrapper -->	25	<!-- menu wrapper -->
26	<div class="intro-startup">	26	<div class="intro-startup">
27	<!-- chat box -->	27	<!-- chat box -->
28	<div class="bounce-board-wrp" id="cht_box_close">	28	<div class="bounce-board-wrp" id="cht_box_close">
29	<div class="inner-wrp-bc">	29	<div class="inner-wrp-bc">
30	<div class="bc-top-head">	30	<div class="bc-top-head">
31	<span class="bc-head">	31	<span class="bc-head">
32	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	32	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
33	</span>	33	</span>
34	<div class="action-sort">	34	<div class="action-sort">
35	<span class="sort-by">SORT BY</span>	35	<span class="sort-by">SORT BY</span>
36	<div class="btn-group">	36	<div class="btn-group">
37	<button	37	<button
38	type="button"	38	type="button"
39	class="bc-sort-list dropdown-toggle"	39	class="bc-sort-list dropdown-toggle"
40	data-toggle="dropdown"	40	data-toggle="dropdown"
41	aria-haspopup="true"	41	aria-haspopup="true"
42	aria-expanded="false"	42	aria-expanded="false"
43	>	43	>
44	BEST	44	BEST
45	</button>	45	</button>
46	<div class="dropdown-menu short_by">	46	<div class="dropdown-menu short_by">
47	<a class="dropdown-item" href="javasript:void(0);"	47	<a class="dropdown-item" href="javasript:void(0);"
48	>BEST 1</a	48	>BEST 1</a
49	>	49	>
50	<a class="dropdown-item" href="javasript:void(0);"	50	<a class="dropdown-item" href="javasript:void(0);"
51	>BEST 2</a	51	>BEST 2</a
52	>	52	>
53	<a class="dropdown-item" href="javasript:void(0);"	53	<a class="dropdown-item" href="javasript:void(0);"
54	>BEST 3</a	54	>BEST 3</a
55	>	55	>
56	</div>	56	</div>
57	</div>	57	</div>
58	<a	58	<a
59	href="javasript:void(0);"	59	href="javasript:void(0);"
60	@click="chtbox_close"	60	@click="chtbox_close"
61	class="close_chat_bx"	61	class="close_chat_bx"
62	><img src="../assets/images/close.png" alt="close" /></a	62	><img src="../assets/images/close.png" alt="close" /></a
63	><!-- close -->	63	><!-- close -->
64	</div>	64	</div>
65	<!-- action sort -->	65	<!-- action sort -->
66	</div>	66	</div>
67	<!-- top head -->	67	<!-- top head -->
68	<div class="bounce-board-body">	68	<div class="bounce-board-body">
69	<!-- all user comments -->	69	<!-- all user comments -->
70	<ul class="bounced-user-comments">	70	<ul class="bounced-user-comments">
71	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	71	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
72	<div class="bc_brd_l"></div>	72	<div class="bc_brd_l"></div>
73	<!-- border -->	73	<!-- border -->
74	<div class="parent-full-width">	74	<div class="parent-full-width">
75	<div class="full-width">	75	<div class="full-width">
76	<div class="b-user-head">	76	<div class="b-user-head">
77	<img :src="cmnt.user.profilePic" />	77	<img :src="cmnt.user.profilePic" />
78	<span class="head-content">{{ cmnt.user.name }} </span>	78	<span class="head-content">{{ cmnt.user.name }} </span>
79	<ul>	79	<ul>
80	<li>	80	<li>
81	<span></span	81	<span></span
82	><img src="../assets/images/u-info-icon.png" />{{	82	><img src="../assets/images/u-info-icon.png" />{{
83	cmnt.user.karmaPoints	83	cmnt.user.karmaPoints
84	}}pts	84	}}pts
85	</li>	85	</li>
86	<li>	86	<li>
87	<span></span>{{ dateGenerator(cmnt.createdAt) }}days	87	<span></span>{{ dateGenerator(cmnt.createdAt) }}days
88	ago	88	ago
89	</li>	89	</li>
90	</ul>	90	</ul>
91	</div>	91	</div>
92	<!-- header -->	92	<!-- header -->
93	<p>	93	<p>
94	{{ cmnt.comment }}	94	{{ cmnt.comment }}
95	</p>	95	</p>
96	<div class="joined_wrapper">	96	<div class="joined_wrapper">
97	<ul class="joined-info info_bc_spc">	97	<ul class="joined-info info_bc_spc">
98	<li>	98	<li>
99	<img src="../assets/images/purple-heart.png" />	99	<img src="../assets/images/purple-heart.png" />
100	</li>	100	</li>
101	<li><a href="javasript:void(0);"> 0</a></li>	101	<li><a href="javasript:void(0);"> 0</a></li>
102	<li class="comment-spc">	102	<li class="comment-spc">
103	<img src="../assets/images/purple-comment.png" />	103	<img src="../assets/images/purple-comment.png" />
104	</li>	104	</li>
105	<li>	105	<li>
106	<a href="javasript:void(0);">	106	<a href="javasript:void(0);">
107	{{ cmnt.children.length }}</a	107	{{ cmnt.children.length }}</a
108	>	108	>
109	</li>	109	</li>
110	</ul>	110	</ul>
111	<div class="add_rply" v-if="!cmnt.childInput">	111	<div class="add_rply" v-if="!cmnt.childInput">
112	<input	112	<input
113	type="text"	113	type="text"
114	@click="eachRply(cmnt)"	114	@click="eachRply(cmnt)"
115	class="add_Rply_C"	115	class="add_Rply_C"
116	placeholder="Add your reply"	116	placeholder="Add your reply"
117	/>	117	/>
118	</div>	118	</div>
119	<!-- rly form -->	119	<!-- rly form -->
120	</div>	120	</div>
121	<!-- joined wrapper -->	121	<!-- joined wrapper -->
122	</div>	122	</div>
123	<!-- full width -->	123	<!-- full width -->
124	</div>	124	</div>
125	<div class="comments-footer each-ft" v-if="cmnt.childInput">	125	<div class="comments-footer each-ft" v-if="cmnt.childInput">
126	<textarea v-model="comment"></textarea>	126	<textarea v-model="comment"></textarea>
127	<div class="comments-footer-wrp">	127	<div class="comments-footer-wrp">
128	<a	128	<a
129	@click="createChildComment(cmnt)"	129	@click="createChildComment(cmnt)"
130	href="javasript:void(0);"	130	href="javasript:void(0);"
131	class="add_comments_chat reply-Wdth"	131	class="add_comments_chat reply-Wdth"
132	>Reply</a	132	>Reply</a
133	>	133	>
134	<a	134	<a
135	href="javasript:void(0);"	135	href="javasript:void(0);"
136	class="discard_bt"	136	class="discard_bt"
137	@click="discardRply(cmnt)"	137	@click="discardRply(cmnt)"
138	><img src="../assets/images/discard.svg"	138	><img src="../assets/images/discard.svg"
139	/></a>	139	/></a>
140	</div>	140	</div>
141	</div>	141	</div>
142	<!-- parent -->	142	<!-- parent -->
143	<div	143	<div
144	class="child-full-width"	144	class="child-full-width"
145	v-for="(childCmnt, i) in cmnt.children"	145	v-for="(childCmnt, i) in cmnt.children"
146	:key="i"	146	:key="i"
147	>	147	>
148	<div class="full-width">	148	<div class="full-width">
149	<div class="b-user-head">	149	<div class="b-user-head">
150	<img :src="childCmnt.user.profilePic" />	150	<img :src="childCmnt.user.profilePic" />
151	<span class="head-content"	151	<span class="head-content"
152	>{{ childCmnt.user.name }}	152	>{{ childCmnt.user.name }}
153	</span>	153	</span>
154	<ul>	154	<ul>
155	<li>	155	<li>
156	<span></span	156	<span></span
157	><img src="../assets/images/u-info-icon.png" />{{	157	><img src="../assets/images/u-info-icon.png" />{{
158	childCmnt.user.karmaPoints	158	childCmnt.user.karmaPoints
159	}}pts	159	}}pts
160	</li>	160	</li>
161	<li>	161	<li>
162	<span></span	162	<span></span
163	>{{ dateGenerator(childCmnt.createdAt) }}days ago	163	>{{ dateGenerator(childCmnt.createdAt) }}days ago
164	</li>	164	</li>
165	</ul>	165	</ul>
166	</div>	166	</div>
167	<p>	167	<p>
168	{{ childCmnt.comment }}	168	{{ childCmnt.comment }}
169	</p>	169	</p>
170	<div class="joined_wrapper">	170	<div class="joined_wrapper">
171	<ul class="joined-info info_bc_spc">	171	<ul class="joined-info info_bc_spc">
172	<li>	172	<li>
173	<img src="../assets/images/purple-heart.png" />	173	<img src="../assets/images/purple-heart.png" />
174	</li>	174	</li>
175	<li>	175	<li>
176	<a href="javasript:void(0);">	176	<a href="javasript:void(0);">
177	{{ childCmnt.likes.length }}</a	177	{{ childCmnt.likes.length }}</a
178	>	178	>
179	</li>	179	</li>
180	</ul>	180	</ul>
181	</div>	181	</div>
182	</div>	182	</div>
183	</div>	183	</div>
184	<!-- eree -->	184	<!-- eree -->
185		185
186	<!-- comments footer -->	186	<!-- comments footer -->
187	</li>	187	</li>
188	</ul>	188	</ul>
189	</div>	189	</div>
190	<!-- bounce board body -->	190	<!-- bounce board body -->
191	<div class="comments-footer" v-if="parentInput">	191	<div class="comments-footer" v-if="parentInput">
192	<textarea v-model="comment"></textarea>	192	<textarea v-model="comment"></textarea>
193	<div class="comments-footer-wrp">	193	<div class="comments-footer-wrp">
194	<a	194	<a
195	href="javasript:void(0);"	195	href="javasript:void(0);"
196	class="add_comments_chat"	196	class="add_comments_chat"
197	@click="createComment"	197	@click="createComment"
198	><img src="../assets/images/add-comment.svg" /> Comment</a	198	><img src="../assets/images/add-comment.svg" /> Comment</a
199	>	199	>
200	</div>	200	</div>
201	</div>	201	</div>
202	<!-- comments footer -->	202	<!-- comments footer -->
203	</div>	203	</div>
204	</div>	204	</div>
205	<!-- bounceboard wrp -->	205	<!-- bounceboard wrp -->
206	<!-- chat box -->	206	<!-- chat box -->
207		207
208	<div class="allMWrp">	208	<div class="allMWrp">
209	<div class="mobile-screen-one p-left">	209	<div class="mobile-screen-one p-left">
210	<div class="top-area-blank"></div>	210	<div class="top-area-blank"></div>
211	<div class="m-screen-comments">	211	<div class="m-screen-comments">
212	<div class="single-author-li-comments">	212	<div class="single-author-li-comments">
213	<div class="a-intro-comments">	213	<div class="a-intro-comments">
214	<p>{{ currentSlideData.payload.comments[0].comment }}</p>	214	<p>{{ currentSlideData.payload.comments[0].comment }}</p>
215	<ul class="rly-comment-set">	215	<ul class="rly-comment-set">
216	<li>	216	<li>
217	<img src="../assets/images/color-heart.svg" />	217	<img src="../assets/images/color-heart.svg" />
218	<a href="javascript:void(0);">0</a>	218	<a href="javascript:void(0);">0</a>
219	</li>	219	</li>
220	<li>	220	<li>
221	<img src="../assets/images/rply.svg" />	221	<img src="../assets/images/rply.svg" />
222	<a href="javascript:void(0);" @click="open_ct_box"	222	<a href="javascript:void(0);" @click="open_ct_box"
223	>Reply</a	223	>Reply</a
224	>	224	>
225	</li>	225	</li>
226	</ul>	226	</ul>
227	</div>	227	</div>
228	<!-- comments box -->	228	<!-- comments box -->
229	</div>	229	</div>
230	<!-- single author comments -->	230	<!-- single author comments -->
231	<div class="single-author-li-comments">	231	<div class="single-author-li-comments">
232	<div class="a-intro-comments">	232	<div class="a-intro-comments">
233	<p>{{ currentSlideData.payload.comments[1].comment }}</p>	233	<p>{{ currentSlideData.payload.comments[1].comment }}</p>
234	<ul class="rly-comment-set">	234	<ul class="rly-comment-set">
235	<li>	235	<li>
236	<img src="../assets/images/color-heart.svg" />	236	<img src="../assets/images/color-heart.svg" />
237	<a href="javascript:void(0);">0</a>	237	<a href="javascript:void(0);">0</a>
238	</li>	238	</li>
239	<li>	239	<li>
240	<img src="../assets/images/rply.svg" />	240	<img src="../assets/images/rply.svg" />
241	<a href="javascript:void(0);" @click="open_ct_box"	241	<a href="javascript:void(0);" @click="open_ct_box"
242	>Reply</a	242	>Reply</a
243	>	243	>
244	</li>	244	</li>
245	</ul>	245	</ul>
246	</div>	246	</div>
247	<!-- comments box -->	247	<!-- comments box -->
248	</div>	248	</div>
249	<!-- single author comments -->	249	<!-- single author comments -->
250	</div>	250	</div>
251	<!-- comments -->	251	<!-- comments -->
252	<img	252	<img
253	:src="currentSlideData.payload.metaData.mobileImage1"	253	:src="currentSlideData.payload.metaData.mobileImage1"
254	class="m-screen"	254	class="m-screen"
255	/>	255	/>
256	<!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->	256	<!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->
257	<img	257	<img
258	:src="currentSlideData.payload.metaData.authorImage"	258	:src="currentSlideData.payload.metaData.authorImage"
259	class="user-photo-bottom"	259	class="user-photo-bottom"
260	/>	260	/>
261	</div>	261	</div>
262	<!-- mobile screen one -->	262	<!-- mobile screen one -->
263	<div class="mobile-screen-one p-right">	263	<div class="mobile-screen-one p-right">
264	<div class="top-area-blank"></div>	264	<div class="top-area-blank"></div>
265	<div class="view-ticket-wrp-ps">	265	<div class="view-ticket-wrp-ps">
266	<div class="single-author-li-comments">	266	<div class="single-author-li-comments">
267	<div class="a-intro-comments custom-selected-style">	267	<div class="a-intro-comments custom-selected-style">
268	<img src="../assets/images/rect.svg" class="rect" />	268	<img src="../assets/images/rect.svg" class="rect" />
269		269
270	<div class="top-wrp">	270	<div class="top-wrp">
271	{{ currentSlideData.payload.insight.tag }} Insight	271	{{ currentSlideData.payload.insight.tag }} Insight
272	<a href="#"><img src="../assets/images/link-red.svg" /></a>	272	<a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
273	</div>	273	</div>
274	<div class="top-head">	274	<div class="top-head">
275	{{ currentSlideData.payload.insight.title }}	275	{{ currentSlideData.payload.insight.title }}
276	</div>	276	</div>
277	<p>{{ currentSlideData.payload.insight.description }}</p>	277	<p>{{ currentSlideData.payload.insight.description }}</p>
278	<div class="footer">	278	<div class="footer">
279	<a href="#" class="cit-16"	279	<a href="javascript:void(0);" class="cit-16"
280	>{{	280	>{{
281	currentSlideData.payload.insight.citations.length	281	currentSlideData.payload.insight.citations.length
282	}}	282	}}
283	Citations</a	283	Citations</a
284	>	284	>
285	<a href="#" class="ft-share"	285	<a href="javascript:void(0);" class="ft-share"
286	><img src="../assets/images/reply-red.svg" /> Share from	286	><img src="../assets/images/reply-red.svg" /> Share from
287	library</a	287	library</a
288	>	288	>
289	</div>	289	</div>
290	<!-- footer -->	290	<!-- footer -->
291	</div>	291	</div>
292	<!-- comments box -->	292	<!-- comments box -->
293	</div>	293	</div>
294	<!-- single author comments -->	294	<!-- single author comments -->
295	</div>	295	</div>
296	<!-- comments -->	296	<!-- comments -->
297	<!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->	297	<!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->
298	<img	298	<img
299	:src="currentSlideData.payload.metaData.mobileImage2"	299	:src="currentSlideData.payload.metaData.mobileImage2"
300	class="m-screen"	300	class="m-screen"
301	/>	301	/>
302	</div>	302	</div>
303	<!-- mobile screen Two -->	303	<!-- mobile screen Two -->
304	</div>	304	</div>
305	<div class="footer-nav">	305	<div class="footer-nav">
306	<div class="footer-top white-bg">	306	<div class="footer-top white-bg">
307	<div class="row">	307	<div class="row">
308	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	308	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
309	<div class="row h-100p">	309	<div class="row h-100p">
310	<div	310	<div
311	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	311	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
312	>	312	>
313	<div class="ft-comments-group testi-photos-ct">	313	<div class="ft-comments-group testi-photos-ct">
314	<div class="c-with-photos">	314	<div class="c-with-photos">
315	<span class="count-comments"	315	<span class="count-comments"
316	>{{ commentList.length - 1 }}+ Comments</span	316	>{{ commentList.length - 1 }}+ Comments</span
317	><!-- count commets -->	317	><!-- count commets -->
318	<ul class="comments-photos">	318	<ul class="comments-photos">
319	<!-- <li><img src="../assets/images/c-photo-1.png" /></li>	319	<!-- <li><img src="../assets/images/c-photo-1.png" /></li>
320	<li><img src="../assets/images/c-photo-2.png" /></li> -->	320	<li><img src="../assets/images/c-photo-2.png" /></li> -->
321	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->	321	<!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
322	<!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> -->	322	<!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> -->
323	</ul>	323	</ul>
324	<!-- comment photos -->	324	<!-- comment photos -->
325	</div>	325	</div>
326	<div class="comments-detail all-c-space">	326	<div class="comments-detail all-c-space">
327	<span	327	<span
328	>{{ commentList[commentList.length - 1].user.name }}	328	>{{ commentList[commentList.length - 1].user.name }}
329	<a href="javascript:void(0);" @click="open_ct_box"	329	<a href="javascript:void(0);" @click="open_ct_box"
330	>View All</a	330	>View All</a
331	></span	331	></span
332	>	332	>
333	<p>	333	<p>
334	<!-- I wonder what the difference between “Dunzo Assistant”	334	<!-- I wonder what the difference between “Dunzo Assistant”
335	and “Pickup and Drop... -->	335	and “Pickup and Drop... -->
336	{{ commentList[commentList.length - 1].comment }}	336	{{ commentList[commentList.length - 1].comment }}
337	</p>	337	</p>
338	</div>	338	</div>
339	<!-- comments detail -->	339	<!-- comments detail -->
340	</div>	340	</div>
341	<!-- comments Group -->	341	<!-- comments Group -->
342	</div>	342	</div>
343	</div>	343	</div>
344	</div>	344	</div>
345	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	345	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
346	<div class="comment-frm no-c-frm">	346	<div class="comment-frm no-c-frm">
347	<div class="row">	347	<div class="row">
348	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	348	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
349	<div class="form-group frm-wdth addfrm-spc">	349	<div class="form-group frm-wdth addfrm-spc">
350	<input	350	<input
351	type="text"	351	type="text"
352	class="form-control"	352	class="form-control"
353	placeholder="Kathy, Something on your mind?"	353	placeholder="Kathy, Something on your mind?"
354	id="open_ct_box"	354	id="open_ct_box"
355	v-model="comment"	355	v-model="comment"
356	/>	356	/>
357	</div>	357	</div>
358	</div>	358	</div>
359	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	359	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
360	<a	360	<a
361	href="javascript:void(0);"	361	href="javascript:void(0);"
362	@click="createComment"	362	@click="createComment"
363	class="add-comment"	363	class="add-comment"
364	><img src="../assets/images/add-comment.svg" />	364	><img src="../assets/images/add-comment.svg" />
365	Comment</a	365	Comment</a
366	>	366	>
367	</div>	367	</div>
368	</div>	368	</div>
369	<!-- comment from -->	369	<!-- comment from -->
370	</div>	370	</div>
371	</div>	371	</div>
372	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	372	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
373	<ul class="top-intro-bt">	373	<ul class="top-intro-bt">
374	<li>	374	<li>
375	<a href="javascript:void(0);" @click="goBack"	375	<a href="javascript:void(0);" @click="goBack"
376	><img src="../assets/images/skip-prev.svg" /> Prev</a	376	><img src="../assets/images/skip-prev.svg" /> Prev</a
377	>	377	>
378	</li>	378	</li>
379	<li>	379	<li>
380	<a href="javascript:void(0);" @click="goNext"	380	<a href="javascript:void(0);" @click="goNext"
381	><img src="../assets/images/skip-next.svg" /> Skip to next	381	><img src="../assets/images/skip-next.svg" /> Skip to next
382	slide</a	382	slide</a
383	>	383	>
384	</li>	384	</li>
385	</ul>	385	</ul>
386	</div>	386	</div>
387	<!-- buttons list -->	387	<!-- buttons list -->
388	</div>	388	</div>
389	</div>	389	</div>
390	<!-- footer top -->	390	<!-- footer top -->
391	<div class="footer-bottom">	391	<div class="footer-bottom">
392	<ul>	392	<ul>
393	<li class="active"></li>	393	<li class="active"></li>
394	<li></li>	394	<li></li>
395	</ul>	395	</ul>
396	</div>	396	</div>
397	<!-- footer top -->	397	<!-- footer top -->
398	</div>	398	</div>
399	<!-- footer -->	399	<!-- footer -->
400	</div>	400	</div>
401	<!-- body wrapper -->	401	<!-- body wrapper -->
402	</div>	402	</div>
403	<!-- main wrapper -->	403	<!-- main wrapper -->
404	</main>	404	</main>
405	</template>	405	</template>
406		406
407	<script>	407	<script>
408	import Vue from "vue";	408	import Vue from "vue";
409	import router from "../router";	409	import router from "../router";
410	import axios from "axios";	410	import axios from "axios";
411	import moment from "moment";	411	import moment from "moment";
412	export default {	412	export default {
413	name: "TwoScreenWithInsight",	413	name: "TwoScreenWithInsight",
414	data() {	414	data() {
415	return {	415	return {
416	allSlide: [],	416	allSlide: [],
417	currentSlideIndex: null,	417	currentSlideIndex: null,
418	currentSlideData: null,	418	currentSlideData: null,
419	//	419	//
420	usertoken: null,	420	usertoken: null,
421	commentList: [],	421	commentList: [],
422	comment: null,	422	comment: null,
423	parentInput: true,	423	parentInput: true,
424	};	424	};
425	},	425	},
426	mounted() {	426	mounted() {
427	var allSlideData = localStorage.getItem(	427	var allSlideData = localStorage.getItem(
428	"spotlight_slide" + this.$route.params.caseStudyId	428	"spotlight_slide" + this.$route.params.caseStudyId
429	);	429	);
430	if (allSlideData) {	430	if (allSlideData) {
431	this.allSlide = JSON.parse(allSlideData);	431	this.allSlide = JSON.parse(allSlideData);
432	this.getCurrentSlideData();	432	this.getCurrentSlideData();
433	}	433	}
434	var userdata = localStorage.getItem("spotlight_usertoken");	434	var userdata = localStorage.getItem("spotlight_usertoken");
435	if (userdata) {	435	if (userdata) {
436	userdata = JSON.parse(userdata);	436	userdata = JSON.parse(userdata);
437	this.usertoken = userdata.token;	437	this.usertoken = userdata.token;
438	this.getComment();	438	this.getComment();
439	}	439	}
440	},	440	},
441	methods: {	441	methods: {
442	getCurrentSlideData() {	442	getCurrentSlideData() {
443	var i = this.allSlide.findIndex(	443	var i = this.allSlide.findIndex(
444	(slide_) => slide_.slideId == this.$route.params.slideId	444	(slide_) => slide_.slideId == this.$route.params.slideId
445	);	445	);
446	this.currentSlideIndex = i;	446	this.currentSlideIndex = i;
447	this.currentSlideData = this.allSlide[i];	447	this.currentSlideData = this.allSlide[i];
448	console.log("currentSlideData", this.currentSlideData);	448	console.log("currentSlideData", this.currentSlideData);
449	},	449	},
450	goNext() {	450	goNext() {
451	this.currentSlideIndex++;	451	this.currentSlideIndex++;
452	this.$router.push({	452	this.$router.push({
453	name: this.allSlide[this.currentSlideIndex].ur,	453	name: this.allSlide[this.currentSlideIndex].ur,
454	params: {	454	params: {
455	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	455	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
456	slideId: this.allSlide[this.currentSlideIndex].slideId,	456	slideId: this.allSlide[this.currentSlideIndex].slideId,
457	},	457	},
458	});	458	});
459	},	459	},
460	goBack() {	460	goBack() {
461	this.currentSlideIndex--;	461	this.currentSlideIndex--;
462	this.$router.push({	462	this.$router.push({
463	name: this.allSlide[this.currentSlideIndex].ur,	463	name: this.allSlide[this.currentSlideIndex].ur,
464	params: {	464	params: {
465	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	465	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
466	slideId: this.allSlide[this.currentSlideIndex].slideId,	466	slideId: this.allSlide[this.currentSlideIndex].slideId,
467	},	467	},
468	});	468	});
469	},	469	},
470	createComment() {	470	createComment() {
471	console.log("===", this.comment);	471	console.log("===", this.comment);
472	var obj = {	472	var obj = {
473	caseStudyId: this.currentSlideData.caseStudyId,	473	caseStudyId: this.currentSlideData.caseStudyId,
474	slideId: this.currentSlideData.slideId,	474	slideId: this.currentSlideData.slideId,
475	comment: this.comment,	475	comment: this.comment,
476	};	476	};
477	axios	477	axios
478	.post("/bounceBoard/comment", obj, {	478	.post("/bounceBoard/comment", obj, {
479	headers: {	479	headers: {
480	Authorization: "Bearer " + this.usertoken,	480	Authorization: "Bearer " + this.usertoken,
481	},	481	},
482	})	482	})
483	.then((response) => {	483	.then((response) => {
484	this.comment = null;	484	this.comment = null;
485	this.getComment();	485	this.getComment();
486	console.log(response);	486	console.log(response);
487	})	487	})
488	.catch((error) => {	488	.catch((error) => {
489	if (error.response) {	489	if (error.response) {
490	this.$toaster.error(error.response.data.message);	490	this.$toaster.error(error.response.data.message);
491	}	491	}
492	});	492	});
493	},	493	},
494	createChildComment(cmnt) {	494	createChildComment(cmnt) {
495	console.log(cmnt, "===", this.comment);	495	console.log(cmnt, "===", this.comment);
496	var obj = {	496	var obj = {
497	caseStudyId: this.currentSlideData.caseStudyId,	497	caseStudyId: this.currentSlideData.caseStudyId,
498	slideId: this.currentSlideData.slideId,	498	slideId: this.currentSlideData.slideId,
499	comment: this.comment,	499	comment: this.comment,
500	parentId: cmnt._id,	500	parentId: cmnt._id,
501	};	501	};
502	axios	502	axios
503	.post("/bounceBoard/comment", obj, {	503	.post("/bounceBoard/comment", obj, {
504	headers: {	504	headers: {
505	Authorization: "Bearer " + this.usertoken,	505	Authorization: "Bearer " + this.usertoken,
506	},	506	},
507	})	507	})
508	.then((response) => {	508	.then((response) => {
509	this.comment = null;	509	this.comment = null;
510	this.discardRply(cmnt);	510	this.discardRply(cmnt);
511	this.getComment();	511	this.getComment();
512	console.log(response);	512	console.log(response);
513	})	513	})
514	.catch((error) => {	514	.catch((error) => {
515	if (error.response) {	515	if (error.response) {
516	this.$toaster.error(error.response.data.message);	516	this.$toaster.error(error.response.data.message);
517	}	517	}
518	});	518	});
519	},	519	},
520	getComment() {	520	getComment() {
521	axios	521	axios
522	.get(	522	.get(
523	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	523	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
524	{	524	{
525	headers: {	525	headers: {
526	Authorization: "Bearer " + this.usertoken,	526	Authorization: "Bearer " + this.usertoken,
527	},	527	},
528	}	528	}
529	)	529	)
530	.then((response) => {	530	.then((response) => {
531	console.log(response.data);	531	console.log(response.data);
532	var comments = [];	532	var comments = [];
533	var keys = Object.keys(response.data.data);	533	var keys = Object.keys(response.data.data);
534	response.data.data;	534	response.data.data;
535	keys.forEach((key_) => {	535	keys.forEach((key_) => {
536	comments.push(response.data.data[key_]);	536	comments.push(response.data.data[key_]);
537	});	537	});
538	comments.forEach((coment_) => {	538	comments.forEach((coment_) => {
539	coment_.childInput = false;	539	coment_.childInput = false;
540	});	540	});
541	console.log("comments", comments);	541	console.log("comments", comments);
542	this.commentList = comments;	542	this.commentList = comments;
543	})	543	})
544	.catch((error) => console.log(error));	544	.catch((error) => console.log(error));
545	},	545	},
546	dateGenerator(curreDate) {	546	dateGenerator(curreDate) {
547	var todayDate = moment(new Date(), "DD.MM.YYYY");	547	var todayDate = moment(new Date(), "DD.MM.YYYY");
548	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	548	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
549	var result = todayDate.diff(endDate, "days");	549	var result = todayDate.diff(endDate, "days");
550	return result;	550	return result;
551	},	551	},
552	goToLogin() {	552	goToLogin() {
553	this.$router.push("/");	553	this.$router.push("/login");
554	},	554	},
555	goToSignUp() {	555	goToSignUp() {
556	this.$router.push("/signup");	556	this.$router.push("/");
557	},	557	},
558	chtbox_close() {	558	chtbox_close() {
559	$("#cht_box_close").removeClass("cht_close");	559	$("#cht_box_close").removeClass("cht_close");
560	$("#open_ct_box, .c_hide").show();	560	$("#open_ct_box, .c_hide").show();
561	$(".footer-top").addClass("white-bg");	561	$(".footer-top").addClass("white-bg");
562	},	562	},
563	open_ct_box() {	563	open_ct_box() {
564	$("#cht_box_close").addClass("cht_close");	564	$("#cht_box_close").addClass("cht_close");
565	$("#open_ct_box, .c_hide").hide();	565	$("#open_ct_box, .c_hide").hide();
566	$(".footer-top").removeClass("white-bg");	566	$(".footer-top").removeClass("white-bg");
567	},	567	},
568	eachRply(cmnt) {	568	eachRply(cmnt) {
569	cmnt.childInput = true;	569	cmnt.childInput = true;
570	this.parentInput = false;	570	this.parentInput = false;
571	},	571	},
572	discardRply(cmnt) {	572	discardRply(cmnt) {
573	cmnt.childInput = false;	573	cmnt.childInput = false;
574	this.parentInput = true;	574	this.parentInput = true;
575	},	575	},
576	},	576	},
577	};	577	};
578	//	578	//
579	</script>	579	</script>
580		580

src/components/TwoScreenWithoutInsight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="javasript:void(0);"	5	<a class="navbar-brand" href="javasript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="javasript:void(0);"	22	<a href="javasript:void(0);"
23	><img src="../assets/images/lock.svg"	23	><img src="../assets/images/lock.svg"
24	/></a>	24	/></a>
25	</div>	25	</div>
26	</nav>	26	</nav>
27	<!-- menu wrapper -->	27	<!-- menu wrapper -->
28	<div class="intro-startup">	28	<div class="intro-startup">
29	<!-- chat box -->	29	<!-- chat box -->
30	<div class="bounce-board-wrp" id="cht_box_close">	30	<div class="bounce-board-wrp" id="cht_box_close">
31	<div class="inner-wrp-bc">	31	<div class="inner-wrp-bc">
32	<div class="bc-top-head">	32	<div class="bc-top-head">
33	<span class="bc-head">	33	<span class="bc-head">
34	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	34	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
35	</span>	35	</span>
36	<div class="action-sort">	36	<div class="action-sort">
37	<span class="sort-by">SORT BY</span>	37	<span class="sort-by">SORT BY</span>
38	<div class="btn-group">	38	<div class="btn-group">
39	<button	39	<button
40	type="button"	40	type="button"
41	class="bc-sort-list dropdown-toggle"	41	class="bc-sort-list dropdown-toggle"
42	data-toggle="dropdown"	42	data-toggle="dropdown"
43	aria-haspopup="true"	43	aria-haspopup="true"
44	aria-expanded="false"	44	aria-expanded="false"
45	>	45	>
46	BEST	46	BEST
47	</button>	47	</button>
48	<div class="dropdown-menu short_by">	48	<div class="dropdown-menu short_by">
49	<a class="dropdown-item" href="javasript:void(0);"	49	<a class="dropdown-item" href="javasript:void(0);"
50	>BEST 1</a	50	>BEST 1</a
51	>	51	>
52	<a class="dropdown-item" href="javasript:void(0);"	52	<a class="dropdown-item" href="javasript:void(0);"
53	>BEST 2</a	53	>BEST 2</a
54	>	54	>
55	<a class="dropdown-item" href="javasript:void(0);"	55	<a class="dropdown-item" href="javasript:void(0);"
56	>BEST 3</a	56	>BEST 3</a
57	>	57	>
58	</div>	58	</div>
59	</div>	59	</div>
60	<a	60	<a
61	href="javasript:void(0);"	61	href="javasript:void(0);"
62	@click="chtbox_close"	62	@click="chtbox_close"
63	class="close_chat_bx"	63	class="close_chat_bx"
64	><img src="../assets/images/close.png" alt="close" /></a	64	><img src="../assets/images/close.png" alt="close" /></a
65	><!-- close -->	65	><!-- close -->
66	</div>	66	</div>
67	<!-- action sort -->	67	<!-- action sort -->
68	</div>	68	</div>
69	<!-- top head -->	69	<!-- top head -->
70	<div class="bounce-board-body">	70	<div class="bounce-board-body">
71		71
72	<!-- all user comments -->	72	<!-- all user comments -->
73	<ul class="bounced-user-comments">	73	<ul class="bounced-user-comments">
74	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	74	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
75	<div class="bc_brd_l"></div>	75	<div class="bc_brd_l"></div>
76	<!-- border -->	76	<!-- border -->
77	<div class="parent-full-width">	77	<div class="parent-full-width">
78	<div class="full-width">	78	<div class="full-width">
79	<div class="b-user-head">	79	<div class="b-user-head">
80	<img :src="cmnt.user.profilePic" />	80	<img :src="cmnt.user.profilePic" />
81	<span class="head-content">{{ cmnt.user.name }} </span>	81	<span class="head-content">{{ cmnt.user.name }} </span>
82	<ul>	82	<ul>
83	<li>	83	<li>
84	<span></span	84	<span></span
85	><img src="../assets/images/u-info-icon.png" />{{	85	><img src="../assets/images/u-info-icon.png" />{{
86	cmnt.user.karmaPoints	86	cmnt.user.karmaPoints
87	}}pts	87	}}pts
88	</li>	88	</li>
89	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>	89	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
90	</ul>	90	</ul>
91	</div>	91	</div>
92	<!-- header -->	92	<!-- header -->
93	<p>	93	<p>
94	{{ cmnt.comment }}	94	{{ cmnt.comment }}
95	</p>	95	</p>
96	<div class="joined_wrapper">	96	<div class="joined_wrapper">
97	<ul class="joined-info info_bc_spc">	97	<ul class="joined-info info_bc_spc">
98	<li>	98	<li>
99	<img src="../assets/images/purple-heart.png" />	99	<img src="../assets/images/purple-heart.png" />
100	</li>	100	</li>
101	<li><a href="javasript:void(0);"> 0</a></li>	101	<li><a href="javasript:void(0);"> 0</a></li>
102	<li class="comment-spc">	102	<li class="comment-spc">
103	<img src="../assets/images/purple-comment.png" />	103	<img src="../assets/images/purple-comment.png" />
104	</li>	104	</li>
105	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>	105	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
106	</ul>	106	</ul>
107	<div class="add_rply" v-if="!cmnt.childInput">	107	<div class="add_rply" v-if="!cmnt.childInput">
108	<input	108	<input
109	type="text"	109	type="text"
110	@click="eachRply(cmnt)"	110	@click="eachRply(cmnt)"
111	class="add_Rply_C"	111	class="add_Rply_C"
112	placeholder="Add your reply"	112	placeholder="Add your reply"
113	/>	113	/>
114	</div>	114	</div>
115	<!-- rly form -->	115	<!-- rly form -->
116	</div>	116	</div>
117	<!-- joined wrapper -->	117	<!-- joined wrapper -->
118	</div>	118	</div>
119	<!-- full width -->	119	<!-- full width -->
120	</div>	120	</div>
121	<div class="comments-footer each-ft" v-if="cmnt.childInput">	121	<div class="comments-footer each-ft" v-if="cmnt.childInput">
122	<textarea v-model="comment"></textarea>	122	<textarea v-model="comment"></textarea>
123	<div class="comments-footer-wrp">	123	<div class="comments-footer-wrp">
124	<a	124	<a
125	@click="createChildComment(cmnt)"	125	@click="createChildComment(cmnt)"
126	href="javasript:void(0);"	126	href="javasript:void(0);"
127	class="add_comments_chat reply-Wdth"	127	class="add_comments_chat reply-Wdth"
128	>Reply</a	128	>Reply</a
129	>	129	>
130	<a href="javasript:void(0);" class="discard_bt"	130	<a href="javasript:void(0);" class="discard_bt"
131	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"	131	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
132	/></a>	132	/></a>
133	</div>	133	</div>
134	</div>	134	</div>
135	<!-- parent -->	135	<!-- parent -->
136	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">	136	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
137	<div class="full-width">	137	<div class="full-width">
138	<div class="b-user-head">	138	<div class="b-user-head">
139	<img :src="childCmnt.user.profilePic" />	139	<img :src="childCmnt.user.profilePic" />
140	<span class="head-content">{{childCmnt.user.name }} </span>	140	<span class="head-content">{{childCmnt.user.name }} </span>
141	<ul>	141	<ul>
142	<li>	142	<li>
143	<span></span	143	<span></span
144	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts	144	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
145	</li>	145	</li>
146	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>	146	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
147	</ul>	147	</ul>
148	</div>	148	</div>
149	<p>	149	<p>
150	{{childCmnt.comment}}	150	{{childCmnt.comment}}
151	</p>	151	</p>
152	<div class="joined_wrapper">	152	<div class="joined_wrapper">
153	<ul class="joined-info info_bc_spc">	153	<ul class="joined-info info_bc_spc">
154	<li>	154	<li>
155	<img src="../assets/images/purple-heart.png" />	155	<img src="../assets/images/purple-heart.png" />
156	</li>	156	</li>
157	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>	157	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
158		158
159	</ul>	159	</ul>
160		160
161	</div>	161	</div>
162	</div>	162	</div>
163	</div>	163	</div>
164	<!-- eree -->	164	<!-- eree -->
165		165
166	<!-- comments footer -->	166	<!-- comments footer -->
167	</li>	167	</li>
168	</ul>	168	</ul>
169	</div>	169	</div>
170	<!-- bounce board body -->	170	<!-- bounce board body -->
171	<div class="comments-footer" v-if="parentInput">	171	<div class="comments-footer" v-if="parentInput">
172	<textarea v-model="comment"></textarea>	172	<textarea v-model="comment"></textarea>
173	<div class="comments-footer-wrp">	173	<div class="comments-footer-wrp">
174	<a	174	<a
175	href="javasript:void(0);"	175	href="javasript:void(0);"
176	class="add_comments_chat"	176	class="add_comments_chat"
177	@click="createComment"	177	@click="createComment"
178	><img src="../assets/images/add-comment.svg" /> Comment</a	178	><img src="../assets/images/add-comment.svg" /> Comment</a
179	>	179	>
180	</div>	180	</div>
181	</div>	181	</div>
182	<!-- comments footer -->	182	<!-- comments footer -->
183	</div>	183	</div>
184	</div>	184	</div>
185	<!-- bounceboard wrp -->	185	<!-- bounceboard wrp -->
186	<!-- chat box -->	186	<!-- chat box -->
187		187
188	<div class="allMWrp">	188	<div class="allMWrp">
189	<div class="mobile-screen-one p-left">	189	<div class="mobile-screen-one p-left">
190	<div class="top-area-blank"></div>	190	<div class="top-area-blank"></div>
191	<!-- fixed area -->	191	<!-- fixed area -->
192	<div class="m-screen-comments">	192	<div class="m-screen-comments">
193	<div class="single-author-li-comments">	193	<div class="single-author-li-comments">
194	<div class="a-intro-comments">	194	<div class="a-intro-comments">
195	<p>{{ currentSlideData.payload.comments[0].comment }}</p>	195	<p>{{ currentSlideData.payload.comments[0].comment }}</p>
196	<ul class="rly-comment-set">	196	<ul class="rly-comment-set">
197	<li>	197	<li>
198	<img src="../assets/images/color-heart.svg" />	198	<img src="../assets/images/color-heart.svg" />
199	<a href="javascript:void(0);">0</a>	199	<a href="javascript:void(0);">0</a>
200	</li>	200	</li>
201	<li>	201	<li>
202	<img src="../assets/images/rply.svg" />	202	<img src="../assets/images/rply.svg" />
203	<a href="javascript:void(0);" @click="open_ct_box"	203	<a href="javascript:void(0);" @click="open_ct_box"
204	>Reply</a	204	>Reply</a
205	>	205	>
206	</li>	206	</li>
207	</ul>	207	</ul>
208	</div>	208	</div>
209	<!-- comments box -->	209	<!-- comments box -->
210	</div>	210	</div>
211	<!-- single author comments -->	211	<!-- single author comments -->
212	<div class="single-author-li-comments">	212	<div class="single-author-li-comments">
213	<div class="a-intro-comments">	213	<div class="a-intro-comments">
214	<p>{{ currentSlideData.payload.comments[1].comment }}</p>	214	<p>{{ currentSlideData.payload.comments[1].comment }}</p>
215	<ul class="rly-comment-set">	215	<ul class="rly-comment-set">
216	<li>	216	<li>
217	<img src="../assets/images/color-heart.svg" />	217	<img src="../assets/images/color-heart.svg" />
218	<a href="javascript:void(0);">0</a>	218	<a href="javascript:void(0);">0</a>
219	</li>	219	</li>
220	<li>	220	<li>
221	<img src="../assets/images/rply.svg" />	221	<img src="../assets/images/rply.svg" />
222	<a href="javascript:void(0);" @click="open_ct_box"	222	<a href="javascript:void(0);" @click="open_ct_box"
223	>Reply</a	223	>Reply</a
224	>	224	>
225	</li>	225	</li>
226	</ul>	226	</ul>
227	</div>	227	</div>
228	<!-- comments box -->	228	<!-- comments box -->
229	</div>	229	</div>
230	<!-- single author comments -->	230	<!-- single author comments -->
231	</div>	231	</div>
232	<!-- comments -->	232	<!-- comments -->
233	<img	233	<img
234	:src="currentSlideData.payload.metaData.mobileImage1"	234	:src="currentSlideData.payload.metaData.mobileImage1"
235	class="m-screen"	235	class="m-screen"
236	/>	236	/>
237	<img	237	<img
238	:src="currentSlideData.payload.metaData.authorImage"	238	:src="currentSlideData.payload.metaData.authorImage"
239	class="user-photo-bottom"	239	class="user-photo-bottom"
240	/>	240	/>
241	</div>	241	</div>
242	<!-- mobile screen one -->	242	<!-- mobile screen one -->
243	<div class="mobile-screen-one p-right">	243	<div class="mobile-screen-one p-right">
244	<div class="top-area-blank"></div>	244	<div class="top-area-blank"></div>
245	<!-- fixed area -->	245	<!-- fixed area -->
246	<div class="m-screen-right">	246	<div class="m-screen-right">
247	<div class="single-author-li-comments">	247	<div class="single-author-li-comments">
248	<div class="a-intro-comments">	248	<div class="a-intro-comments">
249	<p>{{ currentSlideData.payload.comments[2].comment }}</p>	249	<p>{{ currentSlideData.payload.comments[2].comment }}</p>
250	<ul class="rly-comment-set">	250	<ul class="rly-comment-set">
251	<li>	251	<li>
252	<img src="../assets/images/color-heart.svg" />	252	<img src="../assets/images/color-heart.svg" />
253	<a href="javascript:void(0);">0</a>	253	<a href="javascript:void(0);">0</a>
254	</li>	254	</li>
255	<li>	255	<li>
256	<img src="../assets/images/rply.svg" />	256	<img src="../assets/images/rply.svg" />
257	<a href="javascript:void(0);" @click="open_ct_box"	257	<a href="javascript:void(0);" @click="open_ct_box"
258	>Reply</a	258	>Reply</a
259	>	259	>
260	</li>	260	</li>
261	</ul>	261	</ul>
262	</div>	262	</div>
263	<!-- comments box -->	263	<!-- comments box -->
264	</div>	264	</div>
265	<!-- single author comments -->	265	<!-- single author comments -->
266	<div class="single-author-li-comments">	266	<div class="single-author-li-comments">
267	<div class="a-intro-comments">	267	<div class="a-intro-comments">
268	<p>{{ currentSlideData.payload.comments[3].comment }}</p>	268	<p>{{ currentSlideData.payload.comments[3].comment }}</p>
269	<ul class="rly-comment-set">	269	<ul class="rly-comment-set">
270	<li>	270	<li>
271	<img src="../assets/images/color-heart.svg" />	271	<img src="../assets/images/color-heart.svg" />
272	<a href="javascript:void(0);">0</a>	272	<a href="javascript:void(0);">0</a>
273	</li>	273	</li>
274	<li>	274	<li>
275	<img src="../assets/images/rply.svg" />	275	<img src="../assets/images/rply.svg" />
276	<a href="javascript:void(0);" @click="open_ct_box"	276	<a href="javascript:void(0);" @click="open_ct_box"
277	>Reply</a	277	>Reply</a
278	>	278	>
279	</li>	279	</li>
280	</ul>	280	</ul>
281	</div>	281	</div>
282	<!-- comments box -->	282	<!-- comments box -->
283	</div>	283	</div>
284	<!-- single author comments -->	284	<!-- single author comments -->
285	</div>	285	</div>
286	<!-- comments -->	286	<!-- comments -->
287	<img	287	<img
288	:src="currentSlideData.payload.metaData.mobileImage2"	288	:src="currentSlideData.payload.metaData.mobileImage2"
289	class="m-screen"	289	class="m-screen"
290	/>	290	/>
291	<img	291	<img
292	:src="currentSlideData.payload.metaData.authorImage"	292	:src="currentSlideData.payload.metaData.authorImage"
293	class="user-photo-bottom-r"	293	class="user-photo-bottom-r"
294	/>	294	/>
295	</div>	295	</div>
296	<!-- mobile screen Two -->	296	<!-- mobile screen Two -->
297	</div>	297	</div>
298		298
299	<!-- single author comments -->	299	<!-- single author comments -->
300	<div class="footer-nav">	300	<div class="footer-nav">
301	<div class="footer-top white-bg">	301	<div class="footer-top white-bg">
302	<div class="row">	302	<div class="row">
303	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	303	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
304	<div class="row h-100p">	304	<div class="row h-100p">
305	<div	305	<div
306	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	306	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
307	>	307	>
308	<div class="ft-comments-group testi-photos-ct">	308	<div class="ft-comments-group testi-photos-ct">
309	<div class="c-with-photos">	309	<div class="c-with-photos">
310	<span class="count-comments"	310	<span class="count-comments"
311	>{{ commentList.length - 1 }}+ Comments</span	311	>{{ commentList.length - 1 }}+ Comments</span
312	><!-- count commets -->	312	><!-- count commets -->
313	<ul class="comments-photos">	313	<ul class="comments-photos">
314	<li><img src="../assets/images/c-photo-1.png" /></li>	314	<li><img src="../assets/images/c-photo-1.png" /></li>
315	<li><img src="../assets/images/c-photo-2.png" /></li>	315	<li><img src="../assets/images/c-photo-2.png" /></li>
316	<li><img src="../assets/images/c-photo-3.png" /></li>	316	<li><img src="../assets/images/c-photo-3.png" /></li>
317	</ul>	317	</ul>
318	<!-- comment photos -->	318	<!-- comment photos -->
319	</div>	319	</div>
320	<div class="comments-detail all-c-space">	320	<div class="comments-detail all-c-space">
321	<span	321	<span
322	>{{ commentList[commentList.length - 1].user.name }}	322	>{{ commentList[commentList.length - 1].user.name }}
323	<a href="javascript:void(0);" @click="open_ct_box"	323	<a href="javascript:void(0);" @click="open_ct_box"
324	>View All</a	324	>View All</a
325	></span	325	></span
326	>	326	>
327	<p>	327	<p>
328	<!-- I wonder what the difference between “Dunzo Assistant”	328	<!-- I wonder what the difference between “Dunzo Assistant”
329	and “Pickup and Drop... -->	329	and “Pickup and Drop... -->
330	{{ commentList[commentList.length - 1].comment }}	330	{{ commentList[commentList.length - 1].comment }}
331	</p>	331	</p>
332	</div>	332	</div>
333	<!-- comments detail -->	333	<!-- comments detail -->
334	</div>	334	</div>
335	<!-- comments Group -->	335	<!-- comments Group -->
336	</div>	336	</div>
337	</div>	337	</div>
338	</div>	338	</div>
339	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	339	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
340	<div class="comment-frm no-c-frm">	340	<div class="comment-frm no-c-frm">
341	<div class="row">	341	<div class="row">
342	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	342	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
343	<div class="form-group frm-wdth addfrm-spc">	343	<div class="form-group frm-wdth addfrm-spc">
344	<input	344	<input
345	type="text"	345	type="text"
346	class="form-control"	346	class="form-control"
347	placeholder="Kathy, Something on your mind?"	347	placeholder="Kathy, Something on your mind?"
348	id="open_ct_box"	348	id="open_ct_box"
349	v-model="comment"	349	v-model="comment"
350	/>	350	/>
351	</div>	351	</div>
352	</div>	352	</div>
353	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	353	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
354	<a	354	<a
355	href="javascript:void(0);"	355	href="javascript:void(0);"
356	@click="createComment"	356	@click="createComment"
357	class="add-comment"	357	class="add-comment"
358	><img src="../assets/images/add-comment.svg" />	358	><img src="../assets/images/add-comment.svg" />
359	Comment</a	359	Comment</a
360	>	360	>
361	</div>	361	</div>
362	</div>	362	</div>
363	<!-- comment from -->	363	<!-- comment from -->
364	</div>	364	</div>
365	</div>	365	</div>
366	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	366	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
367	<ul class="top-intro-bt">	367	<ul class="top-intro-bt">
368	<li>	368	<li>
369	<a href="javascript:void(0);" @click="goBack"	369	<a href="javascript:void(0);" @click="goBack"
370	><img src="../assets/images/skip-prev.svg" /> Prev</a	370	><img src="../assets/images/skip-prev.svg" /> Prev</a
371	>	371	>
372	</li>	372	</li>
373	<li>	373	<li>
374	<a href="javascript:void(0);" @click="goNext"	374	<a href="javascript:void(0);" @click="goNext"
375	><img src="../assets/images/skip-next.svg" /> Skip to next	375	><img src="../assets/images/skip-next.svg" /> Skip to next
376	slide</a	376	slide</a
377	>	377	>
378	</li>	378	</li>
379	</ul>	379	</ul>
380	</div>	380	</div>
381	<!-- buttons list -->	381	<!-- buttons list -->
382	</div>	382	</div>
383	</div>	383	</div>
384	<!-- footer top -->	384	<!-- footer top -->
385	<div class="footer-bottom">	385	<div class="footer-bottom">
386	<ul>	386	<ul>
387	<li class="active"></li>	387	<li class="active"></li>
388	<li></li>	388	<li></li>
389	</ul>	389	</ul>
390	</div>	390	</div>
391	<!-- footer top -->	391	<!-- footer top -->
392	</div>	392	</div>
393	<!-- footer -->	393	<!-- footer -->
394	</div>	394	</div>
395	<!-- body wrapper -->	395	<!-- body wrapper -->
396	</div>	396	</div>
397	<!-- main wrapper -->	397	<!-- main wrapper -->
398	</main>	398	</main>
399	</template>	399	</template>
400		400
401	<script>	401	<script>
402	import Vue from "vue";	402	import Vue from "vue";
403	import router from "../router";	403	import router from "../router";
404	import axios from "axios";	404	import axios from "axios";
405	import moment from 'moment';	405	import moment from 'moment';
406		406
407	export default {	407	export default {
408	name: "TwoScreenWithoutInsight",	408	name: "TwoScreenWithoutInsight",
409		409
410	data() {	410	data() {
411	return {	411	return {
412	allSlide: [],	412	allSlide: [],
413	currentSlideIndex: null,	413	currentSlideIndex: null,
414	currentSlideData: null,	414	currentSlideData: null,
415	//	415	//
416	usertoken: null,	416	usertoken: null,
417	commentList: [],	417	commentList: [],
418	comment: null,	418	comment: null,
419	parentInput: true,	419	parentInput: true,
420	};	420	};
421	},	421	},
422	mounted() {	422	mounted() {
423	var allSlideData = localStorage.getItem(	423	var allSlideData = localStorage.getItem(
424	"spotlight_slide" + this.$route.params.caseStudyId	424	"spotlight_slide" + this.$route.params.caseStudyId
425	);	425	);
426	if (allSlideData) {	426	if (allSlideData) {
427	this.allSlide = JSON.parse(allSlideData);	427	this.allSlide = JSON.parse(allSlideData);
428	this.getCurrentSlideData();	428	this.getCurrentSlideData();
429	}	429	}
430	var userdata = localStorage.getItem("spotlight_usertoken");	430	var userdata = localStorage.getItem("spotlight_usertoken");
431	if (userdata) {	431	if (userdata) {
432	userdata = JSON.parse(userdata);	432	userdata = JSON.parse(userdata);
433	this.usertoken = userdata.token;	433	this.usertoken = userdata.token;
434	this.getComment();	434	this.getComment();
435	}	435	}
436	},	436	},
437	methods: {	437	methods: {
438	getCurrentSlideData() {	438	getCurrentSlideData() {
439	var i = this.allSlide.findIndex(	439	var i = this.allSlide.findIndex(
440	(slide_) => slide_.slideId == this.$route.params.slideId	440	(slide_) => slide_.slideId == this.$route.params.slideId
441	);	441	);
442	this.currentSlideIndex = i;	442	this.currentSlideIndex = i;
443	this.currentSlideData = this.allSlide[i];	443	this.currentSlideData = this.allSlide[i];
444	console.log(this.currentSlideData, "this.usertoken", this.usertoken);	444	console.log(this.currentSlideData, "this.usertoken", this.usertoken);
445	console.log("currentSlideData", this.currentSlideData);	445	console.log("currentSlideData", this.currentSlideData);
446	},	446	},
447	goNext() {	447	goNext() {
448	this.currentSlideIndex++;	448	this.currentSlideIndex++;
449	this.$router.push({	449	this.$router.push({
450	name: this.allSlide[this.currentSlideIndex].ur,	450	name: this.allSlide[this.currentSlideIndex].ur,
451	params: {	451	params: {
452	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	452	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
453	slideId: this.allSlide[this.currentSlideIndex].slideId,	453	slideId: this.allSlide[this.currentSlideIndex].slideId,
454	},	454	},
455	});	455	});
456	},	456	},
457	goBack() {	457	goBack() {
458	this.currentSlideIndex--;	458	this.currentSlideIndex--;
459	this.$router.push({	459	this.$router.push({
460	name: this.allSlide[this.currentSlideIndex].ur,	460	name: this.allSlide[this.currentSlideIndex].ur,
461	params: {	461	params: {
462	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	462	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
463	slideId: this.allSlide[this.currentSlideIndex].slideId,	463	slideId: this.allSlide[this.currentSlideIndex].slideId,
464	},	464	},
465	});	465	});
466	},	466	},
467		467
468	createComment() {	468	createComment() {
469	console.log("===", this.comment);	469	console.log("===", this.comment);
470	var obj = {	470	var obj = {
471	caseStudyId: this.currentSlideData.caseStudyId,	471	caseStudyId: this.currentSlideData.caseStudyId,
472	slideId: this.currentSlideData.slideId,	472	slideId: this.currentSlideData.slideId,
473	comment: this.comment,	473	comment: this.comment,
474		474
475	};	475	};
476	axios	476	axios
477	.post("/bounceBoard/comment", obj, {	477	.post("/bounceBoard/comment", obj, {
478	headers: {	478	headers: {
479	Authorization: "Bearer " + this.usertoken,	479	Authorization: "Bearer " + this.usertoken,
480	},	480	},
481	})	481	})
482	.then((response) => {	482	.then((response) => {
483	this.comment = null;	483	this.comment = null;
484	this.getComment();	484	this.getComment();
485	console.log(response);	485	console.log(response);
486	})	486	})
487	.catch((error) => {	487	.catch((error) => {
488	if (error.response) {	488	if (error.response) {
489	this.$toaster.error(error.response.data.message);	489	this.$toaster.error(error.response.data.message);
490	}	490	}
491	});	491	});
492	},	492	},
493	createChildComment(cmnt) {	493	createChildComment(cmnt) {
494	console.log(cmnt,"===", this.comment);	494	console.log(cmnt,"===", this.comment);
495	var obj = {	495	var obj = {
496	caseStudyId: this.currentSlideData.caseStudyId,	496	caseStudyId: this.currentSlideData.caseStudyId,
497	slideId: this.currentSlideData.slideId,	497	slideId: this.currentSlideData.slideId,
498	comment: this.comment,	498	comment: this.comment,
499	parentId: cmnt._id,	499	parentId: cmnt._id,
500		500
501	};	501	};
502	axios	502	axios
503	.post("/bounceBoard/comment", obj, {	503	.post("/bounceBoard/comment", obj, {
504	headers: {	504	headers: {
505	Authorization: "Bearer " + this.usertoken,	505	Authorization: "Bearer " + this.usertoken,
506	},	506	},
507	})	507	})
508	.then((response) => {	508	.then((response) => {
509	this.comment = null;	509	this.comment = null;
510	this.discardRply(cmnt);	510	this.discardRply(cmnt);
511	this.getComment();	511	this.getComment();
512	console.log(response);	512	console.log(response);
513	})	513	})
514	.catch((error) => {	514	.catch((error) => {
515	if (error.response) {	515	if (error.response) {
516	this.$toaster.error(error.response.data.message);	516	this.$toaster.error(error.response.data.message);
517	}	517	}
518	});	518	});
519	},	519	},
520	getComment() {	520	getComment() {
521	axios	521	axios
522	.get(	522	.get(
523	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	523	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
524	{	524	{
525	headers: {	525	headers: {
526	Authorization: "Bearer " + this.usertoken,	526	Authorization: "Bearer " + this.usertoken,
527	},	527	},
528	}	528	}
529	)	529	)
530	.then((response) => {	530	.then((response) => {
531	console.log(response.data);	531	console.log(response.data);
532	var comments = [];	532	var comments = [];
533	var keys = Object.keys(response.data.data)	533	var keys = Object.keys(response.data.data)
534	response.data.data	534	response.data.data
535	keys.forEach((key_) => {	535	keys.forEach((key_) => {
536	comments.push(response.data.data[key_])	536	comments.push(response.data.data[key_])
537	});	537	});
538	comments.forEach((coment_)=>{	538	comments.forEach((coment_)=>{
539	coment_.childInput = false;	539	coment_.childInput = false;
540	});	540	});
541	console.log("comments",comments)	541	console.log("comments",comments)
542	this.commentList = comments;	542	this.commentList = comments;
543	})	543	})
544	.catch((error) => console.log(error));	544	.catch((error) => console.log(error));
545	},	545	},
546	dateGenerator(curreDate){	546	dateGenerator(curreDate){
547	var todayDate = moment(new Date(), "DD.MM.YYYY");	547	var todayDate = moment(new Date(), "DD.MM.YYYY");
548	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	548	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
549	var result = todayDate.diff(endDate, 'days');	549	var result = todayDate.diff(endDate, 'days');
550	return result;	550	return result;
551	},	551	},
552	goToLogin() {	552	goToLogin() {
553	this.$router.push("/");	553	this.$router.push("/login");
554	},	554	},
555	goToSignUp() {	555	goToSignUp() {
556	this.$router.push("/signup");	556	this.$router.push("/");
557	},	557	},
558	chtbox_close() {	558	chtbox_close() {
559	$("#cht_box_close").removeClass("cht_close");	559	$("#cht_box_close").removeClass("cht_close");
560	$("#open_ct_box, .c_hide").show();	560	$("#open_ct_box, .c_hide").show();
561	$(".footer-top").addClass("white-bg");	561	$(".footer-top").addClass("white-bg");
562	},	562	},
563	open_ct_box() {	563	open_ct_box() {
564	$("#cht_box_close").addClass("cht_close");	564	$("#cht_box_close").addClass("cht_close");
565	$("#open_ct_box, .c_hide").hide();	565	$("#open_ct_box, .c_hide").hide();
566	$(".footer-top").removeClass("white-bg");	566	$(".footer-top").removeClass("white-bg");
567	},	567	},
568	eachRply(cmnt) {	568	eachRply(cmnt) {
569	cmnt.childInput = true;	569	cmnt.childInput = true;
570	this.parentInput = false;	570	this.parentInput = false;
571	},	571	},
572	discardRply(cmnt) {	572	discardRply(cmnt) {
573	cmnt.childInput = false;	573	cmnt.childInput = false;
574	this.parentInput = true;	574	this.parentInput = true;
575		575
576	},	576	},
577	},	577	},
578	};	578	};
579	//	579	//
580	</script>	580	</script>
581		581

src/components/TwoScreengrabWithComments.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="allMWrp screenGrb-comments-wrp">	18	<div class="allMWrp screenGrb-comments-wrp">
19	<div class="mobile-screen-one p-left bc-transparent">	19	<div class="mobile-screen-one p-left bc-transparent">
20	<div class="m-screen-comments comments-left-without-bc">	20	<div class="m-screen-comments comments-left-without-bc">
21	<div class="single-author-li-comments">	21	<div class="single-author-li-comments">
22	<div class="a-intro-comments">	22	<div class="a-intro-comments">
23	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>	23	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
24	<ul class="rly-comment-set">	24	<ul class="rly-comment-set">
25	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	25	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
26	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	26	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
27	</ul>	27	</ul>
28	</div><!-- comments box -->	28	</div><!-- comments box -->
29	</div><!-- single author comments -->	29	</div><!-- single author comments -->
30	<div class="single-author-li-comments">	30	<div class="single-author-li-comments">
31	<div class="a-intro-comments">	31	<div class="a-intro-comments">
32	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>	32	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
33	<ul class="rly-comment-set">	33	<ul class="rly-comment-set">
34	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	34	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
35	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	35	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
36	</ul>	36	</ul>
37	</div><!-- comments box -->	37	</div><!-- comments box -->
38	</div><!-- single author comments -->	38	</div><!-- single author comments -->
39	</div><!-- comments -->	39	</div><!-- comments -->
40	<img src="../assets/images/comment-grab.png" class="m-screen spc-grbscreen1" />	40	<img src="../assets/images/comment-grab.png" class="m-screen spc-grbscreen1" />
41	<img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />	41	<img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />
42	</div><!-- mobile screen one -->	42	</div><!-- mobile screen one -->
43	<div class="mobile-screen-one p-right bc-transparent">	43	<div class="mobile-screen-one p-right bc-transparent">
44	<div class="view-ticket-wrp-ps comments-right-without-bc">	44	<div class="view-ticket-wrp-ps comments-right-without-bc">
45	<div class="single-author-li-comments ">	45	<div class="single-author-li-comments ">
46	<div class="a-intro-comments custom-selected-style">	46	<div class="a-intro-comments custom-selected-style">
47	<img src="../assets/images/rect.svg" class="rect" />	47	<img src="../assets/images/rect.svg" class="rect" />
48	<div class="top-wrp">	48	<div class="top-wrp">
49	Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	49	Design Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
50	</div>	50	</div>
51	<div class="top-head">Jakob’s law</div>	51	<div class="top-head">Jakob’s law</div>
52	<p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>	52	<p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>
53	<div class="footer">	53	<div class="footer">
54	<a href="#" class="cit-16">16 Citations</a>	54	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
55	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	55	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
56	</div><!-- footer -->	56	</div><!-- footer -->
57		57
58	</div><!-- comments box -->	58	</div><!-- comments box -->
59	</div><!-- single author comments -->	59	</div><!-- single author comments -->
60	</div><!-- comments -->	60	</div><!-- comments -->
61	<img src="../assets/images/grab2.png" class="m-screen" />	61	<img src="../assets/images/grab2.png" class="m-screen" />
62		62
63	</div><!-- mobile screen Two -->	63	</div><!-- mobile screen Two -->
64	</div>	64	</div>
65	<div class="footer-nav">	65	<div class="footer-nav">
66	<div class="footer-top white-bg">	66	<div class="footer-top white-bg">
67	<div class="row">	67	<div class="row">
68	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">	68	<div class="col-6 col-sm-7 col-md-7 col-lg-6 ">
69	<div class="row h-100p">	69	<div class="row h-100p">
70	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">	70	<div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
71	<ul class="top-intro-bt">	71	<ul class="top-intro-bt">
72	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	72	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
73	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	73	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
74	</ul>	74	</ul>
75	</div>	75	</div>
76	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">	76	<div class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r">
77	<div class="ft-comments-group no-comment-count">	77	<div class="ft-comments-group no-comment-count">
78	<div class="row">	78	<div class="row">
79		79
80	<div class="col-12">	80	<div class="col-12">
81	<img src="../assets/images/u-comments.svg" class="no-comments-img" />	81	<img src="../assets/images/u-comments.svg" class="no-comments-img" />
82	<div class="comments-detail">	82	<div class="comments-detail">
83	<span class="no-c-yet">No comments yet</span>	83	<span class="no-c-yet">No comments yet</span>
84	<p>Be the first one to post a comment to start a discussion</p>	84	<p>Be the first one to post a comment to start a discussion</p>
85	</div><!-- comments detail -->	85	</div><!-- comments detail -->
86	</div> </div>	86	</div> </div>
87	</div><!-- comments Group -->	87	</div><!-- comments Group -->
88	</div></div>	88	</div></div>
89	</div>	89	</div>
90	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">	90	<div class="col-6 col-sm-5 col-md-6 col-lg-6 ">
91		91
92	<div class="comment-frm no-c-frm">	92	<div class="comment-frm no-c-frm">
93	<div class="row">	93	<div class="row">
94	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	94	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
95	<div class="form-group frm-wdth">	95	<div class="form-group frm-wdth">
96	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	96	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
97	</div></div>	97	</div></div>
98	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	98	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
99	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	99	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
100	</div>	100	</div>
101	</div><!-- comment from -->	101	</div><!-- comment from -->
102	</div> </div></div>	102	</div> </div></div>
103	</div><!-- footer top -->	103	</div><!-- footer top -->
104	<div class="footer-bottom">	104	<div class="footer-bottom">
105	<ul>	105	<ul>
106	<li class="active"></li>	106	<li class="active"></li>
107	<li></li>	107	<li></li>
108	</ul>	108	</ul>
109	</div><!-- footer top -->	109	</div><!-- footer top -->
110	</div><!-- footer -->	110	</div><!-- footer -->
111	</div>	111	</div>
112	<!-- body wrapper -->	112	<!-- body wrapper -->
113	</div>	113	</div>
114	<!-- main wrapper -->	114	<!-- main wrapper -->
115	</main>	115	</main>
116	</template>	116	</template>
117		117
118	<script>	118	<script>
119	import Vue from "vue";	119	import Vue from "vue";
120	import router from "../router";	120	import router from "../router";
121		121
122	export default {	122	export default {
123	name: "TwoScreengrabWithComments",	123	name: "TwoScreengrabWithComments",
124		124
125	data() {	125	data() {
126	return {};	126	return {};
127	},	127	},
128	mounted() {},	128	mounted() {},
129	methods: {	129	methods: {
130	goToLogin() {	130	goToLogin() {
131	this.$router.push("/");	131	this.$router.push("/login");
132	},	132	},
133	goToSignUp() {	133	goToSignUp() {
134	this.$router.push("/signup");	134	this.$router.push("/");
135	},	135	},
136		136
137	},	137	},
138	};	138	};
139	</script>	139	</script>
140		140

src/components/TwoScreensWithTwoAuthor.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="allMWrp">	18	<div class="allMWrp">
19	<div class="mobile-screen-one p-left">	19	<div class="mobile-screen-one p-left">
20	<div class="m-screen-comments">	20	<div class="m-screen-comments">
21	<div class="single-author-li-comments">	21	<div class="single-author-li-comments">
22	<div class="a-intro-comments">	22	<div class="a-intro-comments">
23	<img src="../assets/images/user.png" class="user-b-1" />	23	<img src="../assets/images/user.png" class="user-b-1" />
24	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>	24	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
25	<ul class="rly-comment-set">	25	<ul class="rly-comment-set">
26	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	26	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
27	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	27	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
28	</ul>	28	</ul>
29	</div><!-- comments box -->	29	</div><!-- comments box -->
30	</div><!-- single author comments -->	30	</div><!-- single author comments -->
31	<div class="single-author-li-comments">	31	<div class="single-author-li-comments">
32	<div class="a-intro-comments">	32	<div class="a-intro-comments">
33	<img src="../assets/images/user.png" class="user-b-1" />	33	<img src="../assets/images/user.png" class="user-b-1" />
34	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>	34	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
35	<ul class="rly-comment-set">	35	<ul class="rly-comment-set">
36	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	36	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
37	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	37	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
38	</ul>	38	</ul>
39	</div><!-- comments box -->	39	</div><!-- comments box -->
40	</div><!-- single author comments -->	40	</div><!-- single author comments -->
41	</div><!-- comments -->	41	</div><!-- comments -->
42	<img src="../assets/images/help-screen.png" class="m-screen" />	42	<img src="../assets/images/help-screen.png" class="m-screen" />
43	<img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />	43	<img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />
44	</div><!-- mobile screen one -->	44	</div><!-- mobile screen one -->
45	<div class="mobile-screen-one p-right">	45	<div class="mobile-screen-one p-right">
46	<div class="help-view-ticket-right">	46	<div class="help-view-ticket-right">
47	<div class="single-author-li-comments ">	47	<div class="single-author-li-comments ">
48	<div class="a-intro-comments cust-user2-style">	48	<div class="a-intro-comments cust-user2-style">
49	<img src="../assets/images/user-2-set.svg" class="user-t-2" />	49	<img src="../assets/images/user-2-set.svg" class="user-t-2" />
50	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	50	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
51	<ul class="rly-comment-set">	51	<ul class="rly-comment-set">
52	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	52	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
53	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	53	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
54	</ul>	54	</ul>
55	</div><!-- comments box -->	55	</div><!-- comments box -->
56	</div><!-- single author comments -->	56	</div><!-- single author comments -->
57	<div class="single-author-li-comments">	57	<div class="single-author-li-comments">
58	<div class="a-intro-comments cust-user2-style">	58	<div class="a-intro-comments cust-user2-style">
59	<img src="../assets/images/user-2-set.svg" class="user-t-2" />	59	<img src="../assets/images/user-2-set.svg" class="user-t-2" />
60	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>	60	<p>I wonder what the difference between “ <strong>Dunzo Assistant </strong>” and “<strong>Pickup and Drop </strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
61	<ul class="rly-comment-set">	61	<ul class="rly-comment-set">
62	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	62	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
63	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	63	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
64	</ul>	64	</ul>
65	</div><!-- comments box -->	65	</div><!-- comments box -->
66	</div><!-- single author comments -->	66	</div><!-- single author comments -->
67	</div>	67	</div>
68	<img src="../assets/images/slide2.png" class="m-screen" />	68	<img src="../assets/images/slide2.png" class="m-screen" />
69		69
70	</div><!-- mobile screen Two -->	70	</div><!-- mobile screen Two -->
71	</div>	71	</div>
72	<div class="footer-nav">	72	<div class="footer-nav">
73	<div class="footer-top white-bg">	73	<div class="footer-top white-bg">
74	<div class="row">	74	<div class="row">
75	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">	75	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
76	<div class="row h-100p">	76	<div class="row h-100p">
77	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">	77	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
78	<ul class="top-intro-bt">	78	<ul class="top-intro-bt">
79	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	79	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
80	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	80	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
81	</ul>	81	</ul>
82	</div>	82	</div>
83	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">	83	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
84	<div class="ft-comments-group">	84	<div class="ft-comments-group">
85	<div class="c-with-photos">	85	<div class="c-with-photos">
86	<span class="count-comments">16+ Comments</span><!-- count commets -->	86	<span class="count-comments">16+ Comments</span><!-- count commets -->
87	<ul class="comments-photos">	87	<ul class="comments-photos">
88	<li><img src="../assets/images/c-photo-1.png" /></li>	88	<li><img src="../assets/images/c-photo-1.png" /></li>
89	<li><img src="../assets/images/c-photo-2.png" /></li>	89	<li><img src="../assets/images/c-photo-2.png" /></li>
90	<li><img src="../assets/images/c-photo-3.png" /></li>	90	<li><img src="../assets/images/c-photo-3.png" /></li>
91	</ul><!-- comment photos -->	91	</ul><!-- comment photos -->
92	</div>	92	</div>
93	<div class="comments-detail all-c-space">	93	<div class="comments-detail all-c-space">
94	<span>Saudrika commented <a href="#">View All</a></span>	94	<span>Saudrika commented <a href="javascript:void(0);">View All</a></span>
95	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>	95	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>
96	</div><!-- comments detail -->	96	</div><!-- comments detail -->
97		97
98	</div><!-- comments Group -->	98	</div><!-- comments Group -->
99	</div></div>	99	</div></div>
100	</div>	100	</div>
101	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">	101	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
102		102
103	<div class="comment-frm no-c-frm">	103	<div class="comment-frm no-c-frm">
104	<div class="row">	104	<div class="row">
105	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	105	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
106	<div class="form-group frm-wdth addfrm-spc">	106	<div class="form-group frm-wdth addfrm-spc">
107	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	107	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
108	</div></div>	108	</div></div>
109	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	109	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
110	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	110	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
111	</div>	111	</div>
112	</div><!-- comment from -->	112	</div><!-- comment from -->
113	</div> </div></div>	113	</div> </div></div>
114	</div><!-- footer top -->	114	</div><!-- footer top -->
115	<div class="footer-bottom">	115	<div class="footer-bottom">
116	<ul>	116	<ul>
117	<li class="active"></li>	117	<li class="active"></li>
118	<li></li>	118	<li></li>
119	</ul>	119	</ul>
120	</div><!-- footer top -->	120	</div><!-- footer top -->
121	</div><!-- footer -->	121	</div><!-- footer -->
122		122
123	</div>	123	</div>
124	<!-- body wrapper -->	124	<!-- body wrapper -->
125	</div>	125	</div>
126	<!-- main wrapper -->	126	<!-- main wrapper -->
127	</main>	127	</main>
128	</template>	128	</template>
129		129
130	<script>	130	<script>
131	import Vue from "vue";	131	import Vue from "vue";
132	import router from "../router";	132	import router from "../router";
133		133
134	export default {	134	export default {
135	name: "TwoScreensWithTwoAuthor",	135	name: "TwoScreensWithTwoAuthor",
136		136
137	data() {	137	data() {
138	return {};	138	return {};
139	},	139	},
140	mounted() {},	140	mounted() {},
141	methods: {	141	methods: {
142	goToLogin() {	142	goToLogin() {
143	this.$router.push("/");	143	this.$router.push("/login");
144	},	144	},
145	goToSignUp() {	145	goToSignUp() {
146	this.$router.push("/signup");	146	this.$router.push("/");
147	},	147	},
148		148
149	},	149	},
150	};	150	};
151	</script>	151	</script>
152		152

src/components/TwoWebScreenWithInsight.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3		3
4	<div class="container-fluid episode-intro">	4	<div class="container-fluid episode-intro">
5	<nav class="navbar navbar-expand-sm spotLight-nav">	5	<nav class="navbar navbar-expand-sm spotLight-nav">
6	<a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>	6	<a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">	7	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
8	<span class="navbar-toggler-icon"></span>	8	<span class="navbar-toggler-icon"></span>
9	<span class="navbar-toggler-icon"></span>	9	<span class="navbar-toggler-icon"></span>
10	<span class="navbar-toggler-icon"></span>	10	<span class="navbar-toggler-icon"></span>
11	</button>	11	</button>
12	<div class="user-profile-photo insights-profile">	12	<div class="user-profile-photo insights-profile">
13	<a href="#"><img src="../assets/images/user.png"></a>	13	<a href="javascript:void(0);"><img src="../assets/images/user.png"></a>
14	</div>	14	</div>
15	</nav>	15	</nav>
16	<!-- menu wrapper -->	16	<!-- menu wrapper -->
17	<div class="intro-startup">	17	<div class="intro-startup">
18	<div class="two-webscreen-insight">	18	<div class="two-webscreen-insight">
19	<div class="mobile-screen-one p-left bc-transparent">	19	<div class="mobile-screen-one p-left bc-transparent">
20	<div class="m-screen-comments two-webs-l-spc">	20	<div class="m-screen-comments two-webs-l-spc">
21	<div class="single-author-li-comments">	21	<div class="single-author-li-comments">
22	<div class="a-intro-comments">	22	<div class="a-intro-comments">
23	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>	23	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
24	<ul class="rly-comment-set">	24	<ul class="rly-comment-set">
25	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	25	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
26	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	26	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
27	</ul>	27	</ul>
28	</div><!-- comments box -->	28	</div><!-- comments box -->
29	</div><!-- single author comments -->	29	</div><!-- single author comments -->
30	<div class="single-author-li-comments">	30	<div class="single-author-li-comments">
31	<div class="a-intro-comments">	31	<div class="a-intro-comments">
32	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>	32	<p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
33	<ul class="rly-comment-set">	33	<ul class="rly-comment-set">
34	<li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>	34	<li><img src="../assets/images/color-heart.svg" /> <a href="javascript:void(0);">4</a></li>
35	<li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>	35	<li><img src="../assets/images/rply.svg" /> <a href="javascript:void(0);">Reply</a></li>
36	</ul>	36	</ul>
37	</div><!-- comments box -->	37	</div><!-- comments box -->
38	</div><!-- single author comments -->	38	</div><!-- single author comments -->
39	</div><!-- comments -->	39	</div><!-- comments -->
40		40
41	<img src="../assets/images/top-user-demo.svg" class="two-screen-user-photo-bottom" />	41	<img src="../assets/images/top-user-demo.svg" class="two-screen-user-photo-bottom" />
42	</div><!-- mobile screen one -->	42	</div><!-- mobile screen one -->
43	<div class="two-webscreen-r-insight">	43	<div class="two-webscreen-r-insight">
44	<div class="view-ticket-wrp-ps comments-right-without-bc">	44	<div class="view-ticket-wrp-ps comments-right-without-bc">
45	<div class="single-author-li-comments ">	45	<div class="single-author-li-comments ">
46	<div class="a-intro-comments custom-selected-style">	46	<div class="a-intro-comments custom-selected-style">
47	<img src="../assets/images/rect.svg" class="rect" />	47	<img src="../assets/images/rect.svg" class="rect" />
48	<div class="top-wrp">	48	<div class="top-wrp">
49	Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	49	Design Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
50	</div>	50	</div>
51	<div class="top-head">Jakob’s law</div>	51	<div class="top-head">Jakob’s law</div>
52	<p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>	52	<p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>
53	<div class="footer">	53	<div class="footer">
54	<a href="#" class="cit-16">16 Citations</a>	54	<a href="javascript:void(0);" class="cit-16">16 Citations</a>
55	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	55	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
56	</div><!-- footer -->	56	</div><!-- footer -->
57		57
58	</div><!-- comments box -->	58	</div><!-- comments box -->
59	</div><!-- single author comments -->	59	</div><!-- single author comments -->
60	</div><!-- comments -->	60	</div><!-- comments -->
61	</div><!-- single mobile Right insight -->	61	</div><!-- single mobile Right insight -->
62	</div><!-- Single Mobile Insight -->	62	</div><!-- Single Mobile Insight -->
63	<div class="footer-nav">	63	<div class="footer-nav">
64	<div class="footer-top white-bg">	64	<div class="footer-top white-bg">
65	<div class="row">	65	<div class="row">
66	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">	66	<div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
67	<div class="row h-100p">	67	<div class="row h-100p">
68	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">	68	<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
69	<ul class="top-intro-bt">	69	<ul class="top-intro-bt">
70	<li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>	70	<li><a href="javascript:void(0);"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
71	<li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>	71	<li><a href="javascript:void(0);"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
72	</ul>	72	</ul>
73	</div>	73	</div>
74	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">	74	<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
75	<div class="ft-comments-group">	75	<div class="ft-comments-group">
76	<div class="c-with-photos">	76	<div class="c-with-photos">
77	<span class="count-comments">16+ Comments</span><!-- count commets -->	77	<span class="count-comments">16+ Comments</span><!-- count commets -->
78	<ul class="comments-photos">	78	<ul class="comments-photos">
79	<li><img src="../assets/images/c-photo-1.png" /></li>	79	<li><img src="../assets/images/c-photo-1.png" /></li>
80	<li><img src="../assets/images/c-photo-2.png" /></li>	80	<li><img src="../assets/images/c-photo-2.png" /></li>
81	<li><img src="../assets/images/c-photo-3.png" /></li>	81	<li><img src="../assets/images/c-photo-3.png" /></li>
82	</ul><!-- comment photos -->	82	</ul><!-- comment photos -->
83	</div>	83	</div>
84	<div class="comments-detail all-c-space">	84	<div class="comments-detail all-c-space">
85	<span>Saudrika commented <a href="#">View All</a></span>	85	<span>Saudrika commented <a href="javascript:void(0);">View All</a></span>
86	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>	86	<p>I wonder what the difference between “Dunzo Assistant” and “Pickup and Drop...</p>
87	</div><!-- comments detail -->	87	</div><!-- comments detail -->
88		88
89	</div><!-- comments Group -->	89	</div><!-- comments Group -->
90	</div></div>	90	</div></div>
91	</div>	91	</div>
92	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">	92	<div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
93		93
94	<div class="comment-frm no-c-frm">	94	<div class="comment-frm no-c-frm">
95	<div class="row">	95	<div class="row">
96	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	96	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
97	<div class="form-group frm-wdth addfrm-spc">	97	<div class="form-group frm-wdth addfrm-spc">
98	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">	98	<input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
99	</div></div>	99	</div></div>
100	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	100	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
101	<a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>	101	<a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
102	</div>	102	</div>
103	</div><!-- comment from -->	103	</div><!-- comment from -->
104	</div> </div></div>	104	</div> </div></div>
105	</div><!-- footer top -->	105	</div><!-- footer top -->
106	<div class="footer-bottom">	106	<div class="footer-bottom">
107	<ul>	107	<ul>
108	<li class="active"></li>	108	<li class="active"></li>
109	<li></li>	109	<li></li>
110	</ul>	110	</ul>
111	</div><!-- footer top -->	111	</div><!-- footer top -->
112	</div><!-- footer -->	112	</div><!-- footer -->
113		113
114	</div>	114	</div>
115	<!-- body wrapper -->	115	<!-- body wrapper -->
116	</div>	116	</div>
117	<!-- main wrapper -->	117	<!-- main wrapper -->
118	</main>	118	</main>
119	</template>	119	</template>
120		120
121	<script>	121	<script>
122	import Vue from "vue";	122	import Vue from "vue";
123	import router from "../router";	123	import router from "../router";
124		124
125	export default {	125	export default {
126	name: "TwoWebScreenWithInsight",	126	name: "TwoWebScreenWithInsight",
127		127
128	data() {	128	data() {
129	return {};	129	return {};
130	},	130	},
131	mounted() {},	131	mounted() {},
132	methods: {	132	methods: {
133	goToLogin() {	133	goToLogin() {
134	this.$router.push("/");	134	this.$router.push("/login");
135	},	135	},
136	goToSignUp() {	136	goToSignUp() {
137	this.$router.push("/signup");	137	this.$router.push("/");
138	},	138	},
139		139
140	},	140	},
141	};	141	};
142	</script>	142	</script>
143		143

src/components/noscreenshotSingleautho.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"	5	<a class="navbar-brand" href="javascript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="#"><img src="../assets/images/lock.svg" /></a>	22	<a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a>
23	</div>	23	</div>
24	</nav>	24	</nav>
25	<!-- menu wrapper -->	25	<!-- menu wrapper -->
26	<div class="intro-startup">	26	<div class="intro-startup">
27		27
28	<!-- chat box -->	28	<!-- chat box -->
29	<div class="bounce-board-wrp" id="cht_box_close">	29	<div class="bounce-board-wrp" id="cht_box_close">
30	<div class="inner-wrp-bc">	30	<div class="inner-wrp-bc">
31	<div class="bc-top-head">	31	<div class="bc-top-head">
32	<span class="bc-head">	32	<span class="bc-head">
33	<img src="../assets/images/bounce-icon.svg" /> Bounce Board	33	<img src="../assets/images/bounce-icon.svg" /> Bounce Board
34	</span>	34	</span>
35	<div class="action-sort">	35	<div class="action-sort">
36	<span class="sort-by">SORT BY</span>	36	<span class="sort-by">SORT BY</span>
37	<div class="btn-group">	37	<div class="btn-group">
38	<button	38	<button
39	type="button"	39	type="button"
40	class="bc-sort-list dropdown-toggle"	40	class="bc-sort-list dropdown-toggle"
41	data-toggle="dropdown"	41	data-toggle="dropdown"
42	aria-haspopup="true"	42	aria-haspopup="true"
43	aria-expanded="false"	43	aria-expanded="false"
44	>	44	>
45	BEST	45	BEST
46	</button>	46	</button>
47	<div class="dropdown-menu short_by">	47	<div class="dropdown-menu short_by">
48	<a class="dropdown-item" href="javasript:void(0);"	48	<a class="dropdown-item" href="javasript:void(0);"
49	>BEST 1</a	49	>BEST 1</a
50	>	50	>
51	<a class="dropdown-item" href="javasript:void(0);"	51	<a class="dropdown-item" href="javasript:void(0);"
52	>BEST 2</a	52	>BEST 2</a
53	>	53	>
54	<a class="dropdown-item" href="javasript:void(0);"	54	<a class="dropdown-item" href="javasript:void(0);"
55	>BEST 3</a	55	>BEST 3</a
56	>	56	>
57	</div>	57	</div>
58	</div>	58	</div>
59	<a	59	<a
60	href="javasript:void(0);"	60	href="javasript:void(0);"
61	@click="chtbox_close"	61	@click="chtbox_close"
62	class="close_chat_bx"	62	class="close_chat_bx"
63	><img src="../assets/images/close.png" alt="close" /></a	63	><img src="../assets/images/close.png" alt="close" /></a
64	><!-- close -->	64	><!-- close -->
65	</div>	65	</div>
66	<!-- action sort -->	66	<!-- action sort -->
67	</div>	67	</div>
68	<!-- top head -->	68	<!-- top head -->
69	<div class="bounce-board-body">	69	<div class="bounce-board-body">
70		70
71	<!-- all user comments -->	71	<!-- all user comments -->
72	<ul class="bounced-user-comments">	72	<ul class="bounced-user-comments">
73	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">	73	<li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
74	<div class="bc_brd_l"></div>	74	<div class="bc_brd_l"></div>
75	<!-- border -->	75	<!-- border -->
76	<div class="parent-full-width">	76	<div class="parent-full-width">
77	<div class="full-width">	77	<div class="full-width">
78	<div class="b-user-head">	78	<div class="b-user-head">
79	<img :src="cmnt.user.profilePic" />	79	<img :src="cmnt.user.profilePic" />
80	<span class="head-content">{{ cmnt.user.name }} </span>	80	<span class="head-content">{{ cmnt.user.name }} </span>
81	<ul>	81	<ul>
82	<li>	82	<li>
83	<span></span	83	<span></span
84	><img src="../assets/images/u-info-icon.png" />{{	84	><img src="../assets/images/u-info-icon.png" />{{
85	cmnt.user.karmaPoints	85	cmnt.user.karmaPoints
86	}}pts	86	}}pts
87	</li>	87	</li>
88	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>	88	<li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
89	</ul>	89	</ul>
90	</div>	90	</div>
91	<!-- header -->	91	<!-- header -->
92	<p>	92	<p>
93	{{ cmnt.comment }}	93	{{ cmnt.comment }}
94	</p>	94	</p>
95	<div class="joined_wrapper">	95	<div class="joined_wrapper">
96	<ul class="joined-info info_bc_spc">	96	<ul class="joined-info info_bc_spc">
97	<li>	97	<li>
98	<img src="../assets/images/purple-heart.png" />	98	<img src="../assets/images/purple-heart.png" />
99	</li>	99	</li>
100	<li><a href="javasript:void(0);"> 0</a></li>	100	<li><a href="javasript:void(0);"> 0</a></li>
101	<li class="comment-spc">	101	<li class="comment-spc">
102	<img src="../assets/images/purple-comment.png" />	102	<img src="../assets/images/purple-comment.png" />
103	</li>	103	</li>
104	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>	104	<li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></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"></textarea>	121	<textarea v-model="comment"></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 href="javasript:void(0);" class="discard_bt"	129	<a href="javasript:void(0);" class="discard_bt"
130	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"	130	@click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
131	/></a>	131	/></a>
132	</div>	132	</div>
133	</div>	133	</div>
134	<!-- parent -->	134	<!-- parent -->
135	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">	135	<div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
136	<div class="full-width">	136	<div class="full-width">
137	<div class="b-user-head">	137	<div class="b-user-head">
138	<img :src="childCmnt.user.profilePic" />	138	<img :src="childCmnt.user.profilePic" />
139	<span class="head-content">{{childCmnt.user.name }} </span>	139	<span class="head-content">{{childCmnt.user.name }} </span>
140	<ul>	140	<ul>
141	<li>	141	<li>
142	<span></span	142	<span></span
143	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts	143	><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
144	</li>	144	</li>
145	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>	145	<li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
146	</ul>	146	</ul>
147	</div>	147	</div>
148	<p>	148	<p>
149	{{childCmnt.comment}}	149	{{childCmnt.comment}}
150	</p>	150	</p>
151	<div class="joined_wrapper">	151	<div class="joined_wrapper">
152	<ul class="joined-info info_bc_spc">	152	<ul class="joined-info info_bc_spc">
153	<li>	153	<li>
154	<img src="../assets/images/purple-heart.png" />	154	<img src="../assets/images/purple-heart.png" />
155	</li>	155	</li>
156	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>	156	<li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
157		157
158	</ul>	158	</ul>
159		159
160	</div>	160	</div>
161	</div>	161	</div>
162	</div>	162	</div>
163	<!-- eree -->	163	<!-- eree -->
164		164
165	<!-- comments footer -->	165	<!-- comments footer -->
166	</li>	166	</li>
167	</ul>	167	</ul>
168	</div>	168	</div>
169	<!-- bounce board body -->	169	<!-- bounce board body -->
170	<div class="comments-footer" v-if="parentInput">	170	<div class="comments-footer" v-if="parentInput">
171	<textarea v-model="comment"></textarea>	171	<textarea v-model="comment"></textarea>
172	<div class="comments-footer-wrp">	172	<div class="comments-footer-wrp">
173	<a	173	<a
174	href="javasript:void(0);"	174	href="javasript:void(0);"
175	class="add_comments_chat"	175	class="add_comments_chat"
176	@click="createComment"	176	@click="createComment"
177	><img src="../assets/images/add-comment.svg" /> Comment</a	177	><img src="../assets/images/add-comment.svg" /> Comment</a
178	>	178	>
179	</div>	179	</div>
180	</div>	180	</div>
181	<!-- comments footer -->	181	<!-- comments footer -->
182	</div>	182	</div>
183	</div>	183	</div>
184	<!-- bounceboard wrp -->	184	<!-- bounceboard wrp -->
185	<!-- chat box -->	185	<!-- chat box -->
186		186
187	<div class="single-author-comments">	187	<div class="single-author-comments">
188	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->	188	<!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
189	<div class="ct-l-400">	189	<div class="ct-l-400">
190	<div class="single-author-li-comments">	190	<div class="single-author-li-comments">
191	<div class="a-intro-comments right-corner">	191	<div class="a-intro-comments right-corner">
192	<p>	192	<p>
193	{{currentSlideData.payload.comments[0].comment}}	193	{{currentSlideData.payload.comments[0].comment}}
194	</p>	194	</p>
195	<ul class="rly-comment-set">	195	<ul class="rly-comment-set">
196	<li>	196	<li>
197	<img src="../assets/images/color-heart.svg" />	197	<img src="../assets/images/color-heart.svg" />
198	<a href="javascript:void(0);">0</a>	198	<a href="javascript:void(0);">0</a>
199	</li>	199	</li>
200	<li>	200	<li>
201	<img src="../assets/images/rply.svg" />	201	<img src="../assets/images/rply.svg" />
202	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	202	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
203	</li>	203	</li>
204	</ul>	204	</ul>
205	</div>	205	</div>
206		206
207	</div> <!-- comments box -->	207	</div> <!-- comments box -->
208	<div class="single-author-li-comments">	208	<div class="single-author-li-comments">
209	<div class="a-intro-comments right-corner">	209	<div class="a-intro-comments right-corner">
210	<p>	210	<p>
211	{{currentSlideData.payload.comments[0].comment}}	211	{{currentSlideData.payload.comments[0].comment}}
212	</p>	212	</p>
213	<ul class="rly-comment-set">	213	<ul class="rly-comment-set">
214	<li>	214	<li>
215	<img src="../assets/images/color-heart.svg" />	215	<img src="../assets/images/color-heart.svg" />
216	<a href="javascript:void(0);">0</a>	216	<a href="javascript:void(0);">0</a>
217	</li>	217	</li>
218	<li>	218	<li>
219	<img src="../assets/images/rply.svg" />	219	<img src="../assets/images/rply.svg" />
220	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>	220	<a href="javascript:void(0);" @click="open_ct_box">Reply</a>
221	</li>	221	</li>
222	</ul>	222	</ul>
223	</div>	223	</div>
224		224
225	</div> <!-- comments box -->	225	</div> <!-- comments box -->
226	</div>	226	</div>
227	<img	227	<img
228	class="s-user-comments m-0"	228	class="s-user-comments m-0"
229	:src="currentSlideData.payload.metaData.authorImage"	229	:src="currentSlideData.payload.metaData.authorImage"
230	/>	230	/>
231	<div class="comments-a-wrp ct-width">	231	<div class="comments-a-wrp ct-width">
232	<div class="single-author-li-comments ">	232	<div class="single-author-li-comments ">
233	<div class="a-intro-comments custom-selected-style custom-selected-style-2">	233	<div class="a-intro-comments custom-selected-style custom-selected-style-2">
234		234
235	<div class="top-wrp">	235	<div class="top-wrp">
236	{{currentSlideData.payload.insight.tag}} Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>	236	{{currentSlideData.payload.insight.tag}} Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
237	</div>	237	</div>
238	<div class="top-head">{{currentSlideData.payload.insight.title}}</div>	238	<div class="top-head">{{currentSlideData.payload.insight.title}}</div>
239	<p>{{currentSlideData.payload.insight.description}}	239	<p>{{currentSlideData.payload.insight.description}}
240	</p>	240	</p>
241	<div class="footer">	241	<div class="footer">
242	<a href="#" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>	242	<a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
243	<a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>	243	<a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
244	</div><!-- footer -->	244	</div><!-- footer -->
245		245
246	</div><!-- comments box -->	246	</div><!-- comments box -->
247	</div><!-- single author comments -->	247	</div><!-- single author comments -->
248	<!-- single author comments -->	248	<!-- single author comments -->
249		249
250	</div>	250	</div>
251	</div>	251	</div>
252	<!-- single author comments -->	252	<!-- single author comments -->
253	<div class="footer-nav">	253	<div class="footer-nav">
254	<div class="footer-top white-bg">	254	<div class="footer-top white-bg">
255	<div class="row">	255	<div class="row">
256	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">	256	<div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
257	<div class="row h-100p">	257	<div class="row h-100p">
258	<div	258	<div
259	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"	259	class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
260	>	260	>
261	<div class="ft-comments-group testi-photos-ct">	261	<div class="ft-comments-group testi-photos-ct">
262	<div class="c-with-photos">	262	<div class="c-with-photos">
263	<span class="count-comments"	263	<span class="count-comments"
264	>{{ commentList.length - 1 }}+ Comments</span	264	>{{ commentList.length - 1 }}+ Comments</span
265	><!-- count commets -->	265	><!-- count commets -->
266	<ul class="comments-photos">	266	<ul class="comments-photos">
267	<li><img src="../assets/images/c-photo-1.png" /></li>	267	<li><img src="../assets/images/c-photo-1.png" /></li>
268	<li><img src="../assets/images/c-photo-2.png" /></li>	268	<li><img src="../assets/images/c-photo-2.png" /></li>
269	<li><img src="../assets/images/c-photo-3.png" /></li>	269	<li><img src="../assets/images/c-photo-3.png" /></li>
270	</ul>	270	</ul>
271	<!-- comment photos -->	271	<!-- comment photos -->
272	</div>	272	</div>
273	<div class="comments-detail all-c-space">	273	<div class="comments-detail all-c-space">
274	<span	274	<span
275	>{{ commentList[commentList.length - 1].user.name }}	275	>{{ commentList[commentList.length - 1].user.name }}
276	<a href="javascript:void(0);" @click="open_ct_box"	276	<a href="javascript:void(0);" @click="open_ct_box"
277	>View All</a	277	>View All</a
278	></span	278	></span
279	>	279	>
280	<p>	280	<p>
281	<!-- I wonder what the difference between “Dunzo Assistant”	281	<!-- I wonder what the difference between “Dunzo Assistant”
282	and “Pickup and Drop... -->	282	and “Pickup and Drop... -->
283	{{ commentList[commentList.length - 1].comment }}	283	{{ commentList[commentList.length - 1].comment }}
284	</p>	284	</p>
285	</div>	285	</div>
286	<!-- comments detail -->	286	<!-- comments detail -->
287	</div>	287	</div>
288	<!-- comments Group -->	288	<!-- comments Group -->
289	</div>	289	</div>
290	</div>	290	</div>
291	</div>	291	</div>
292	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">	292	<div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
293	<div class="comment-frm no-c-frm">	293	<div class="comment-frm no-c-frm">
294	<div class="row">	294	<div class="row">
295	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">	295	<div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
296	<div class="form-group frm-wdth addfrm-spc">	296	<div class="form-group frm-wdth addfrm-spc">
297	<input	297	<input
298	type="text"	298	type="text"
299	class="form-control"	299	class="form-control"
300	placeholder="Kathy, Something on your mind?"	300	placeholder="Kathy, Something on your mind?"
301	id="open_ct_box"	301	id="open_ct_box"
302	v-model="comment"	302	v-model="comment"
303	/>	303	/>
304	</div>	304	</div>
305	</div>	305	</div>
306	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">	306	<div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
307	<a	307	<a
308	href="javascript:void(0);"	308	href="javascript:void(0);"
309	@click="createComment"	309	@click="createComment"
310	class="add-comment"	310	class="add-comment"
311	><img src="../assets/images/add-comment.svg" />	311	><img src="../assets/images/add-comment.svg" />
312	Comment</a	312	Comment</a
313	>	313	>
314	</div>	314	</div>
315	</div>	315	</div>
316	<!-- comment from -->	316	<!-- comment from -->
317	</div>	317	</div>
318	</div>	318	</div>
319	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">	319	<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
320	<ul class="top-intro-bt">	320	<ul class="top-intro-bt">
321	<li>	321	<li>
322	<a href="javascript:void(0);" @click="goBack"	322	<a href="javascript:void(0);" @click="goBack"
323	><img src="../assets/images/skip-prev.svg" /> Prev</a	323	><img src="../assets/images/skip-prev.svg" /> Prev</a
324	>	324	>
325	</li>	325	</li>
326	<li>	326	<li>
327	<a href="javascript:void(0);" @click="goNext"	327	<a href="javascript:void(0);" @click="goNext"
328	><img src="../assets/images/skip-next.svg" /> Skip to next	328	><img src="../assets/images/skip-next.svg" /> Skip to next
329	slide</a	329	slide</a
330	>	330	>
331	</li>	331	</li>
332	</ul>	332	</ul>
333	</div>	333	</div>
334	<!-- buttons list -->	334	<!-- buttons list -->
335	</div>	335	</div>
336	</div>	336	</div>
337	<!-- footer top -->	337	<!-- footer top -->
338	<div class="footer-bottom">	338	<div class="footer-bottom">
339	<ul>	339	<ul>
340	<li class="active"></li>	340	<li class="active"></li>
341	<li></li>	341	<li></li>
342	</ul>	342	</ul>
343	</div>	343	</div>
344	<!-- footer top -->	344	<!-- footer top -->
345	</div>	345	</div>
346	<!-- footer -->	346	<!-- footer -->
347	</div>	347	</div>
348	<!-- body wrapper -->	348	<!-- body wrapper -->
349	</div>	349	</div>
350	<!-- main wrapper -->	350	<!-- main wrapper -->
351	</main>	351	</main>
352	</template>	352	</template>
353		353
354	<script>	354	<script>
355	import Vue from "vue";	355	import Vue from "vue";
356	import router from "../router";	356	import router from "../router";
357	import axios from "axios";	357	import axios from "axios";
358	import moment from 'moment';	358	import moment from 'moment';
359	export default {	359	export default {
360	name: "noscreenshotSingleautho",	360	name: "noscreenshotSingleautho",
361	data() {	361	data() {
362	return {	362	return {
363	allSlide: [],	363	allSlide: [],
364	currentSlideIndex: null,	364	currentSlideIndex: null,
365	currentSlideData: null,	365	currentSlideData: null,
366	//	366	//
367	usertoken: null,	367	usertoken: null,
368	commentList: [],	368	commentList: [],
369	comment: null,	369	comment: null,
370	parentInput: true,	370	parentInput: true,
371	};	371	};
372	},	372	},
373	mounted() {	373	mounted() {
374	var allSlideData = localStorage.getItem(	374	var allSlideData = localStorage.getItem(
375	"spotlight_slide" + this.$route.params.caseStudyId	375	"spotlight_slide" + this.$route.params.caseStudyId
376	);	376	);
377	if (allSlideData) {	377	if (allSlideData) {
378	this.allSlide = JSON.parse(allSlideData);	378	this.allSlide = JSON.parse(allSlideData);
379	this.getCurrentSlideData();	379	this.getCurrentSlideData();
380	}	380	}
381	var userdata = localStorage.getItem("spotlight_usertoken");	381	var userdata = localStorage.getItem("spotlight_usertoken");
382	if (userdata) {	382	if (userdata) {
383	userdata = JSON.parse(userdata);	383	userdata = JSON.parse(userdata);
384	this.usertoken = userdata.token;	384	this.usertoken = userdata.token;
385	this.getComment();	385	this.getComment();
386	}	386	}
387	},	387	},
388	methods: {	388	methods: {
389	getCurrentSlideData() {	389	getCurrentSlideData() {
390	var i = this.allSlide.findIndex(	390	var i = this.allSlide.findIndex(
391	(slide_) => slide_.slideId == this.$route.params.slideId	391	(slide_) => slide_.slideId == this.$route.params.slideId
392	);	392	);
393	this.currentSlideIndex = i;	393	this.currentSlideIndex = i;
394	this.currentSlideData = this.allSlide[i];	394	this.currentSlideData = this.allSlide[i];
395	console.log("currentSlideData", this.currentSlideData);	395	console.log("currentSlideData", this.currentSlideData);
396	},	396	},
397	goNext() {	397	goNext() {
398	this.currentSlideIndex++;	398	this.currentSlideIndex++;
399	this.$router.push({	399	this.$router.push({
400	name: this.allSlide[this.currentSlideIndex].ur,	400	name: this.allSlide[this.currentSlideIndex].ur,
401	params: {	401	params: {
402	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	402	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
403	slideId: this.allSlide[this.currentSlideIndex].slideId,	403	slideId: this.allSlide[this.currentSlideIndex].slideId,
404	},	404	},
405	});	405	});
406	},	406	},
407	goBack() {	407	goBack() {
408	this.currentSlideIndex--;	408	this.currentSlideIndex--;
409	this.$router.push({	409	this.$router.push({
410	name: this.allSlide[this.currentSlideIndex].ur,	410	name: this.allSlide[this.currentSlideIndex].ur,
411	params: {	411	params: {
412	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	412	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
413	slideId: this.allSlide[this.currentSlideIndex].slideId,	413	slideId: this.allSlide[this.currentSlideIndex].slideId,
414	},	414	},
415	});	415	});
416	},	416	},
417	createComment() {	417	createComment() {
418	console.log("===", this.comment);	418	console.log("===", this.comment);
419	var obj = {	419	var obj = {
420	caseStudyId: this.currentSlideData.caseStudyId,	420	caseStudyId: this.currentSlideData.caseStudyId,
421	slideId: this.currentSlideData.slideId,	421	slideId: this.currentSlideData.slideId,
422	comment: this.comment,	422	comment: this.comment,
423		423
424	};	424	};
425	axios	425	axios
426	.post("/bounceBoard/comment", obj, {	426	.post("/bounceBoard/comment", obj, {
427	headers: {	427	headers: {
428	Authorization: "Bearer " + this.usertoken,	428	Authorization: "Bearer " + this.usertoken,
429	},	429	},
430	})	430	})
431	.then((response) => {	431	.then((response) => {
432	this.comment = null;	432	this.comment = null;
433	this.getComment();	433	this.getComment();
434	console.log(response);	434	console.log(response);
435	})	435	})
436	.catch((error) => {	436	.catch((error) => {
437	if (error.response) {	437	if (error.response) {
438	this.$toaster.error(error.response.data.message);	438	this.$toaster.error(error.response.data.message);
439	}	439	}
440	});	440	});
441	},	441	},
442	createChildComment(cmnt) {	442	createChildComment(cmnt) {
443	console.log(cmnt,"===", this.comment);	443	console.log(cmnt,"===", this.comment);
444	var obj = {	444	var obj = {
445	caseStudyId: this.currentSlideData.caseStudyId,	445	caseStudyId: this.currentSlideData.caseStudyId,
446	slideId: this.currentSlideData.slideId,	446	slideId: this.currentSlideData.slideId,
447	comment: this.comment,	447	comment: this.comment,
448	parentId: cmnt._id,	448	parentId: cmnt._id,
449		449
450	};	450	};
451	axios	451	axios
452	.post("/bounceBoard/comment", obj, {	452	.post("/bounceBoard/comment", obj, {
453	headers: {	453	headers: {
454	Authorization: "Bearer " + this.usertoken,	454	Authorization: "Bearer " + this.usertoken,
455	},	455	},
456	})	456	})
457	.then((response) => {	457	.then((response) => {
458	this.comment = null;	458	this.comment = null;
459	this.discardRply(cmnt);	459	this.discardRply(cmnt);
460	this.getComment();	460	this.getComment();
461	console.log(response);	461	console.log(response);
462	})	462	})
463	.catch((error) => {	463	.catch((error) => {
464	if (error.response) {	464	if (error.response) {
465	this.$toaster.error(error.response.data.message);	465	this.$toaster.error(error.response.data.message);
466	}	466	}
467	});	467	});
468	},	468	},
469	getComment() {	469	getComment() {
470	axios	470	axios
471	.get(	471	.get(
472	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,	472	`/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
473	{	473	{
474	headers: {	474	headers: {
475	Authorization: "Bearer " + this.usertoken,	475	Authorization: "Bearer " + this.usertoken,
476	},	476	},
477	}	477	}
478	)	478	)
479	.then((response) => {	479	.then((response) => {
480	console.log(response.data);	480	console.log(response.data);
481	var comments = [];	481	var comments = [];
482	var keys = Object.keys(response.data.data)	482	var keys = Object.keys(response.data.data)
483	response.data.data	483	response.data.data
484	keys.forEach((key_) => {	484	keys.forEach((key_) => {
485	comments.push(response.data.data[key_])	485	comments.push(response.data.data[key_])
486	});	486	});
487	comments.forEach((coment_)=>{	487	comments.forEach((coment_)=>{
488	coment_.childInput = false;	488	coment_.childInput = false;
489	});	489	});
490	console.log("comments",comments)	490	console.log("comments",comments)
491	this.commentList = comments;	491	this.commentList = comments;
492	})	492	})
493	.catch((error) => console.log(error));	493	.catch((error) => console.log(error));
494	},	494	},
495	dateGenerator(curreDate){	495	dateGenerator(curreDate){
496	var todayDate = moment(new Date(), "DD.MM.YYYY");	496	var todayDate = moment(new Date(), "DD.MM.YYYY");
497	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");	497	var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
498	var result = todayDate.diff(endDate, 'days');	498	var result = todayDate.diff(endDate, 'days');
499	return result;	499	return result;
500	},	500	},
501	goToLogin() {	501	goToLogin() {
502	this.$router.push("/");	502	this.$router.push("/login");
503	},	503	},
504	goToSignUp() {	504	goToSignUp() {
505	this.$router.push("/signup");	505	this.$router.push("/");
506	},	506	},
507	chtbox_close() {	507	chtbox_close() {
508	$("#cht_box_close").removeClass("cht_close");	508	$("#cht_box_close").removeClass("cht_close");
509	$("#open_ct_box, .c_hide").show();	509	$("#open_ct_box, .c_hide").show();
510	$(".footer-top").addClass("white-bg");	510	$(".footer-top").addClass("white-bg");
511	},	511	},
512	open_ct_box() {	512	open_ct_box() {
513	$("#cht_box_close").addClass("cht_close");	513	$("#cht_box_close").addClass("cht_close");
514	$("#open_ct_box, .c_hide").hide();	514	$("#open_ct_box, .c_hide").hide();
515	$(".footer-top").removeClass("white-bg");	515	$(".footer-top").removeClass("white-bg");
516	},	516	},
517	eachRply(cmnt) {	517	eachRply(cmnt) {
518	cmnt.childInput = true;	518	cmnt.childInput = true;
519	this.parentInput = false;	519	this.parentInput = false;
520	},	520	},
521	discardRply(cmnt) {	521	discardRply(cmnt) {
522	cmnt.childInput = false;	522	cmnt.childInput = false;
523	this.parentInput = true;	523	this.parentInput = true;
524		524
525	},	525	},
526	},	526	},
527	};	527	};
528	//	528	//
529	</script>	529	</script>
530		530

src/components/outro.vue

Diff comments View file @56f4b75

1	<template>	1	<template>
2	<main class="landing-page">	2	<main class="landing-page">
3	<div class="container-fluid episode-intro">	3	<div class="container-fluid episode-intro">
4	<nav class="navbar navbar-expand-sm spotLight-nav">	4	<nav class="navbar navbar-expand-sm spotLight-nav">
5	<a class="navbar-brand" href="#"	5	<a class="navbar-brand" href="javascript:void(0);"
6	><img src="../assets/images/logo.png"	6	><img src="../assets/images/logo.png"
7	/></a>	7	/></a>
8	<button	8	<button
9	class="navbar-toggler"	9	class="navbar-toggler"
10	type="button"	10	type="button"
11	data-toggle="collapse"	11	data-toggle="collapse"
12	data-target="#navbarsExample03"	12	data-target="#navbarsExample03"
13	aria-controls="navbarsExample03"	13	aria-controls="navbarsExample03"
14	aria-expanded="false"	14	aria-expanded="false"
15	aria-label="Toggle navigation"	15	aria-label="Toggle navigation"
16	>	16	>
17	<span class="navbar-toggler-icon"></span>	17	<span class="navbar-toggler-icon"></span>
18	<span class="navbar-toggler-icon"></span>	18	<span class="navbar-toggler-icon"></span>
19	<span class="navbar-toggler-icon"></span>	19	<span class="navbar-toggler-icon"></span>
20	</button>	20	</button>
21	<div class="user-profile-photo insights-profile">	21	<div class="user-profile-photo insights-profile">
22	<a href="#"><img src="../assets/images/user.png" /></a>	22	<a href="javascript:void(0);"><img src="../assets/images/user.png" /></a>
23	</div>	23	</div>
24	</nav>	24	</nav>
25	<!-- menu wrapper -->	25	<!-- menu wrapper -->
26	<div class="intro-startup">	26	<div class="intro-startup">
27	<div class="thanks-wrapper">	27	<div class="thanks-wrapper">
28	<div class="thanks-l-wrp">	28	<div class="thanks-l-wrp">
29	<div class="thanks-pay-wrp">	29	<div class="thanks-pay-wrp">
30	<!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->	30	<!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->
31	<img	31	<img
32	:src="currentSlideData.payload.metaData.authorImage[0]"	32	:src="currentSlideData.payload.metaData.authorImage[0]"
33	class="thanks-img"	33	class="thanks-img"
34	/>	34	/>
35	<div class="blacktext-wrp">	35	<div class="blacktext-wrp">
36	CHeck out other case studies here	36	CHeck out other case studies here
37	<img src="../assets/images/arrow-bottom.svg" />	37	<img src="../assets/images/arrow-bottom.svg" />
38	</div>	38	</div>
39	<ul class="">	39	<ul class="">
40	<li v-for="(study, i) in caseStudies" :key="i">	40	<li v-for="(study, i) in caseStudies" :key="i">
41	<a href="javascript:void(0);">	41	<a href="javascript:void(0);">
42	<img :src="study.intro.logoURL" />	42	<img :src="study.intro.logoURL" />
43	<span	43	<span
44	><img src="../assets/images/p-eye.svg" /> 0 Views</span	44	><img src="../assets/images/p-eye.svg" /> 0 Views</span
45	>	45	>
46	</a>	46	</a>
47	</li>	47	</li>
48		48
49	<!-- <li class="payments-spc-57">	49	<!-- <li class="payments-spc-57">
50	<a href="#">	50	<a href="javascript:void(0);">
51	<img src="../assets/images/g-pay.svg" />	51	<img src="../assets/images/g-pay.svg" />
52	<span	52	<span
53	><img src="../assets/images/p-eye.svg" /> 19.4k	53	><img src="../assets/images/p-eye.svg" /> 19.4k
54	Views</span	54	Views</span
55	>	55	>
56	</a>	56	</a>
57	</li>	57	</li>
58	<li>	58	<li>
59	<a href="#">	59	<a href="javascript:void(0);">
60	<img src="../assets/images/bb.svg" />	60	<img src="../assets/images/bb.svg" />
61	<span	61	<span
62	><img src="../assets/images/p-eye.svg" /> 19.4k	62	><img src="../assets/images/p-eye.svg" /> 19.4k
63	Views</span	63	Views</span
64	>	64	>
65	</a>	65	</a>
66	</li> -->	66	</li> -->
67	</ul>	67	</ul>
68	<!-- payments options -->	68	<!-- payments options -->
69	<!-- <ul class="">	69	<!-- <ul class="">
70	<li>	70	<li>
71	<a href="#">	71	<a href="javascript:void(0);">
72	<img src="../assets/images/payment.svg" />	72	<img src="../assets/images/payment.svg" />
73	<span	73	<span
74	><img src="../assets/images/p-eye.svg" /> 19.4k	74	><img src="../assets/images/p-eye.svg" /> 19.4k
75	Views</span	75	Views</span
76	>	76	>
77	</a>	77	</a>
78	</li>	78	</li>
79	<li class="payments-spc-57">	79	<li class="payments-spc-57">
80	<a href="#">	80	<a href="javascript:void(0);">
81	<img src="../assets/images/uc.svg" />	81	<img src="../assets/images/uc.svg" />
82	<span	82	<span
83	><img src="../assets/images/p-eye.svg" /> 19.4k	83	><img src="../assets/images/p-eye.svg" /> 19.4k
84	Views</span	84	Views</span
85	>	85	>
86	</a>	86	</a>
87	</li>	87	</li>
88	</ul> -->	88	</ul> -->
89	<!-- payments options -->	89	<!-- payments options -->
90	</div>	90	</div>
91	<!-- thanks pay wrp -->	91	<!-- thanks pay wrp -->
92	<img	92	<img
93	src="../assets/images/spot-light-bt.svg"	93	src="../assets/images/spot-light-bt.svg"
94	class="payment-spot-light-bt"	94	class="payment-spot-light-bt"
95	/>	95	/>
96	</div>	96	</div>
97	<!-- thanks left wrp -->	97	<!-- thanks left wrp -->
98	<div class="thanks-r-section">	98	<div class="thanks-r-section">
99	<div class="logo-common-wrp">	99	<div class="logo-common-wrp">
100	<a href="javascript:void(0);"	100	<a href="javascript:void(0);"
101	><img src="../assets/images/ps-growth.svg" />	101	><img src="../assets/images/ps-growth.svg" />
102	<span>Product Growth</span>	102	<span>Product Growth</span>
103	</a>	103	</a>
104	</div>	104	</div>
105	<!-- logo wrp -->	105	<!-- logo wrp -->
106	<div class="clearfix"></div>	106	<div class="clearfix"></div>
107	<p>	107	<p>
108	Don’t forget to <strong> join the discussion </strong> by	108	Don’t forget to <strong> join the discussion </strong> by
109	scrolling back and adding your comments!	109	scrolling back and adding your comments!
110	</p>	110	</p>
111	<div class="clearfix"></div>	111	<div class="clearfix"></div>
112	<a href="javascript:void(0);" class="back-bt" @click="goToProfile">	112	<a href="javascript:void(0);" class="back-bt" @click="goToProfile">
113	<span class="s1"></span>	113	<span class="s1"></span>
114	<span class="s2"></span>	114	<span class="s2"></span>
115	<span class="s3"></span>	115	<span class="s3"></span>
116	<span class="s4"></span>	116	<span class="s4"></span>
117	<img src="../assets/images/refresh.svg" /> Back to home	117	<img src="../assets/images/refresh.svg" /> Back to home
118	</a>	118	</a>
119	<ul class="rating-section">	119	<ul class="rating-section">
120	<li>	120	<li>
121	<p>	121	<p>
122	Excited to <strong> create case studies</strong> or help build	122	Excited to <strong> create case studies</strong> or help build
123	Product Growth?	123	Product Growth?
124	</p>	124	</p>
125	<a href="#" class="publish">Publish</a>	125	<a href="javascript:void(0);" class="publish">Publish</a>
126	</li>	126	</li>
127	<li>	127	<li>
128	<p class="wdth">How would you rate this case study?</p>	128	<p class="wdth">How would you rate this case study?</p>
129	<span class="rating-list">	129	<span class="rating-list">
130	<star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">	130	<star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">
131	</star-rating>	131	</star-rating>
132	<!-- <a href="javascript:void(0);"	132	<!-- <a href="javascript:void(0);"
133	><img src="../assets/images/f-review.svg"	133	><img src="../assets/images/f-review.svg"
134	/></a>	134	/></a>
135	<a href="javascript:void(0);"	135	<a href="javascript:void(0);"
136	><img src="../assets/images/f-review.svg"	136	><img src="../assets/images/f-review.svg"
137	/></a>	137	/></a>
138	<a href="javascript:void(0);"	138	<a href="javascript:void(0);"
139	><img src="../assets/images/e-review.svg"	139	><img src="../assets/images/e-review.svg"
140	/></a> -->	140	/></a> -->
141	</span>	141	</span>
142	</li>	142	</li>
143	</ul>	143	</ul>
144	<div class="follow-us-py">	144	<div class="follow-us-py">
145	<span>Follow us at</span>	145	<span>Follow us at</span>
146	<ul class="p-follows">	146	<ul class="p-follows">
147	<li>	147	<li>
148	<a href="#">	148	<a href="javascript:void(0);">
149	<img src="../assets/images/p-rss.svg" />	149	<img src="../assets/images/p-rss.svg" />
150	</a>	150	</a>
151	</li>	151	</li>
152	<li>	152	<li>
153	<a href="#">	153	<a href="javascript:void(0);">
154	<img src="../assets/images/p-linkedin.svg" />	154	<img src="../assets/images/p-linkedin.svg" />
155	</a>	155	</a>
156	</li>	156	</li>
157	<li>	157	<li>
158	<a href="#">	158	<a href="javascript:void(0);">
159	<img src="../assets/images/p-twitter.svg" />	159	<img src="../assets/images/p-twitter.svg" />
160	</a>	160	</a>
161	</li>	161	</li>
162	</ul>	162	</ul>
163	</div>	163	</div>
164	<!-- <star-rating v-model="rating"></star-rating> -->	164	<!-- <star-rating v-model="rating"></star-rating> -->
165		165
166	<!-- follow us -->	166	<!-- follow us -->
167	<div class="p-users">	167	<div class="p-users">
168	<span>Author</span>	168	<span>Author</span>
169	<h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>	169	<h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>
170	<!-- <span>Author</span>	170	<!-- <span>Author</span>
171	<h1>Pramod</h1>	171	<h1>Pramod</h1>
172	<span>Author</span>	172	<span>Author</span>
173	<h1>Sarthak</h1> -->	173	<h1>Sarthak</h1> -->
174	<span v-if="currentSlideData.payload.metaData.designer"	174	<span v-if="currentSlideData.payload.metaData.designer"
175	>Designer</span	175	>Designer</span
176	>	176	>
177	<h1>{{ currentSlideData.payload.metaData.designer }}</h1>	177	<h1>{{ currentSlideData.payload.metaData.designer }}</h1>
178	<span v-if="currentSlideData.payload.metaData.illustrations"	178	<span v-if="currentSlideData.payload.metaData.illustrations"
179	>Illustrations</span	179	>Illustrations</span
180	>	180	>
181	<h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>	181	<h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>
182	</div>	182	</div>
183	<!-- users -->	183	<!-- users -->
184	</div>	184	</div>
185	<!-- thanks payment right section -->	185	<!-- thanks payment right section -->
186	</div>	186	</div>
187	<!--- thanks wrapper -->	187	<!--- thanks wrapper -->
188	<div class="footer-nav">	188	<div class="footer-nav">
189	<div class="footer-top">	189	<div class="footer-top">
190	<ul class="top-intro-bt ps_right">	190	<ul class="top-intro-bt ps_right">
191	<li>	191	<li>
192	<a href="javascript:void(0);" @click="goBack"	192	<a href="javascript:void(0);" @click="goBack"
193	><img src="../assets/images/skip-prev.svg" /> Prev</a	193	><img src="../assets/images/skip-prev.svg" /> Prev</a
194	>	194	>
195	</li>	195	</li>
196	</ul>	196	</ul>
197	</div>	197	</div>
198	<!-- footer top -->	198	<!-- footer top -->
199	<div class="footer-bottom">	199	<div class="footer-bottom">
200	<ul>	200	<ul>
201	<li class="active"></li>	201	<li class="active"></li>
202	<li class="active"></li>	202	<li class="active"></li>
203	</ul>	203	</ul>
204	</div>	204	</div>
205	<!-- footer top -->	205	<!-- footer top -->
206	</div>	206	</div>
207	<!-- footer -->	207	<!-- footer -->
208	</div>	208	</div>
209	<!-- body wrapper -->	209	<!-- body wrapper -->
210	</div>	210	</div>
211	<!-- main wrapper -->	211	<!-- main wrapper -->
212	</main>	212	</main>
213	</template>	213	</template>
214		214
215	<script>	215	<script>
216	import Vue from "vue";	216	import Vue from "vue";
217	import router from "../router";	217	import router from "../router";
218	import axios from "axios";	218	import axios from "axios";
219		219
220	export default {	220	export default {
221	name: "Outro",	221	name: "Outro",
222		222
223	data() {	223	data() {
224	return {	224	return {
225	caseStudies: [],	225	caseStudies: [],
226	allSlide: [],	226	allSlide: [],
227	currentSlideIndex: null,	227	currentSlideIndex: null,
228	currentSlideData: null,	228	currentSlideData: null,
229	rating: 0,	229	rating: 0,
230	};	230	};
231	},	231	},
232	mounted() {	232	mounted() {
233	var allSlideData = localStorage.getItem(	233	var allSlideData = localStorage.getItem(
234	"spotlight_slide" + this.$route.params.caseStudyId	234	"spotlight_slide" + this.$route.params.caseStudyId
235	);	235	);
236	if (allSlideData) {	236	if (allSlideData) {
237	this.allSlide = JSON.parse(allSlideData);	237	this.allSlide = JSON.parse(allSlideData);
238	this.getCurrentSlideData();	238	this.getCurrentSlideData();
239	this.getCaseStudies();	239	this.getCaseStudies();
240	this.getRating();	240	this.getRating();
241	}	241	}
242	},	242	},
243	methods: {	243	methods: {
244	getCurrentSlideData() {	244	getCurrentSlideData() {
245	var i = this.allSlide.findIndex(	245	var i = this.allSlide.findIndex(
246	(slide_) => slide_.slideId == this.$route.params.slideId	246	(slide_) => slide_.slideId == this.$route.params.slideId
247	);	247	);
248	this.currentSlideIndex = i;	248	this.currentSlideIndex = i;
249	this.currentSlideData = this.allSlide[i];	249	this.currentSlideData = this.allSlide[i];
250	console.log("currentSlideData", this.currentSlideData);	250	console.log("currentSlideData", this.currentSlideData);
251	},	251	},
252	goNext() {	252	goNext() {
253	this.currentSlideIndex++;	253	this.currentSlideIndex++;
254	this.$router.push({	254	this.$router.push({
255	name: this.allSlide[this.currentSlideIndex].ur,	255	name: this.allSlide[this.currentSlideIndex].ur,
256	params: {	256	params: {
257	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	257	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
258	slideId: this.allSlide[this.currentSlideIndex].slideId,	258	slideId: this.allSlide[this.currentSlideIndex].slideId,
259	},	259	},
260	});	260	});
261	},	261	},
262	goBack() {	262	goBack() {
263	this.currentSlideIndex--;	263	this.currentSlideIndex--;
264	this.$router.push({	264	this.$router.push({
265	name: this.allSlide[this.currentSlideIndex].ur,	265	name: this.allSlide[this.currentSlideIndex].ur,
266	params: {	266	params: {
267	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,	267	caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
268	slideId: this.allSlide[this.currentSlideIndex].slideId,	268	slideId: this.allSlide[this.currentSlideIndex].slideId,
269	},	269	},
270	});	270	});
271	},	271	},
272		272
273	getCaseStudies() {	273	getCaseStudies() {
274	var userdata = localStorage.getItem("spotlight_usertoken");	274	var userdata = localStorage.getItem("spotlight_usertoken");
275	if (userdata) {	275	if (userdata) {
276	userdata = JSON.parse(userdata);	276	userdata = JSON.parse(userdata);
277	axios	277	axios
278	.get("/caseStudy/all", {	278	.get("/caseStudy/all", {
279	headers: {	279	headers: {
280	Authorization: "Bearer " + userdata.token,	280	Authorization: "Bearer " + userdata.token,
281	},	281	},
282	})	282	})
283	.then((response) => {	283	.then((response) => {
284	console.log(response.data.data.caseStudies);	284	console.log(response.data.data.caseStudies);
285	this.caseStudies = response.data.data.caseStudies;	285	this.caseStudies = response.data.data.caseStudies;
286	})	286	})
287	.catch((error) => console.log(error));	287	.catch((error) => console.log(error));
288	}	288	}
289	},	289	},
290		290
291	getRating() {	291	getRating() {
292	var userdata = localStorage.getItem("spotlight_usertoken");	292	var userdata = localStorage.getItem("spotlight_usertoken");
293	if (userdata) {	293	if (userdata) {
294	userdata = JSON.parse(userdata);	294	userdata = JSON.parse(userdata);
295	axios	295	axios
296	.get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {	296	.get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {
297	headers: {	297	headers: {
298	Authorization: "Bearer " + userdata.token,	298	Authorization: "Bearer " + userdata.token,
299	},	299	},
300	})	300	})
301	.then((response) => {	301	.then((response) => {
302	this.rating = response.data.data.Avgrating;	302	this.rating = response.data.data.Avgrating;
303	})	303	})
304	.catch((error) => console.log(error));	304	.catch((error) => console.log(error));
305	}	305	}
306	},	306	},
307	updateRating() {	307	updateRating() {
308	var userdata = localStorage.getItem("spotlight_usertoken");	308	var userdata = localStorage.getItem("spotlight_usertoken");
309	if (userdata) {	309	if (userdata) {
310	userdata = JSON.parse(userdata);	310	userdata = JSON.parse(userdata);
311	var obj = {	311	var obj = {
312	"caseStudyId":this.$route.params.caseStudyId,	312	"caseStudyId":this.$route.params.caseStudyId,
313	"rating":this.rating	313	"rating":this.rating
314	}	314	}
315	axios	315	axios
316	.post("/caseStudy/rating",obj, {	316	.post("/caseStudy/rating",obj, {
317	headers: {	317	headers: {
318	Authorization: "Bearer " + userdata.token,	318	Authorization: "Bearer " + userdata.token,
319	},	319	},
320	})	320	})
321	.then((response) => {	321	.then((response) => {
322	console.log("response",response)	322	console.log("response",response)
323	// this.rating = response.data.data.Avgrating;	323	// this.rating = response.data.data.Avgrating;
324	})	324	})
325	.catch((error) => console.log(error));	325	.catch((error) => console.log(error));
326	}	326	}
327	},	327	},
328	goToLogin() {	328	goToLogin() {
329	this.$router.push("/");	329	this.$router.push("/login");
330	},	330	},
331	goToSignUp() {	331	goToSignUp() {
332	this.$router.push("/signup");	332	this.$router.push("/");
333	},	333	},
334	goToProfile() {	334	goToProfile() {
335	this.$router.push("/profile");	335	this.$router.push("/profile");
336	},	336	},
337	},	337	},
338	};	338	};
339	</script>	339	</script>
340	<style>	340	<style>
341	.vue-star-rating-rating-text[data-v-fde73a0c] {	341	.vue-star-rating-rating-text[data-v-fde73a0c] {
342	margin-left: 7px;	342	margin-left: 7px;
343	display: none;	343	display: none;
344	}	344	}
345	</style>	345	</style>
346		346

src/router/index.js

Diff comments View file @56f4b75

1	import Vue from 'vue'	1	import Vue from 'vue'
2	import Router from 'vue-router'	2	import Router from 'vue-router'
3	import { authGuard } from "../auth/authGuard"	3	import { authGuard } from "../auth/authGuard"
4	import LandingPage from '@/components/LandingPage'	4	import LandingPage from '@/components/LandingPage'
5	import SignUp from '@/components/SignUp'	5	import SignUp from '@/components/SignUp'
6	import Reset from '@/components/Reset'	6	import Reset from '@/components/Reset'
7	import Profile from '@/components/Profile'	7	import Profile from '@/components/Profile'
8	import welcome from '@/components/welcome'	8	import welcome from '@/components/welcome'
9	import Intermediate from '@/components/Intermediate'	9	import Intermediate from '@/components/Intermediate'
10	import Insight from '@/components/Insight'	10	import Insight from '@/components/Insight'
11	import ProductInsight from '@/components/ProductInsight'	11	import ProductInsight from '@/components/ProductInsight'
12	import EpisodeIntro from '@/components/EpisodeIntro'	12	import EpisodeIntro from '@/components/EpisodeIntro'
13	import AuthorIntro from '@/components/AuthorIntro'	13	import AuthorIntro from '@/components/AuthorIntro'
14	import AuthorReadingNow from '@/components/AuthorReadingNow'	14	import AuthorReadingNow from '@/components/AuthorReadingNow'
15	import SingleAuthor from '@/components/SingleAuthor'	15	import SingleAuthor from '@/components/SingleAuthor'
16	import Outro from '@/components/outro'	16	import Outro from '@/components/outro'
17	import SingleMobileInsight from '@/components/SingleMobileInsight'	17	import SingleMobileInsight from '@/components/SingleMobileInsight'
18	import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight'	18	import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight'
19	import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne'	19	import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne'
20	import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne'	20	import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne'
21	import SingleMobileScreenInsightTwo from '@/components/SingleMobileScreenInsightTwo'	21	import SingleMobileScreenInsightTwo from '@/components/SingleMobileScreenInsightTwo'
22	import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight'	22	import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight'
23	import TwoScreenWithInsight from '@/components/TwoScreenWithInsight'	23	import TwoScreenWithInsight from '@/components/TwoScreenWithInsight'
24	import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments'	24	import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments'
25	import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight'	25	import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight'
26	import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor'	26	import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor'
27	import TwoAuthor from '@/components/TwoAuthor'	27	import TwoAuthor from '@/components/TwoAuthor'
28	import TwoAuthorDesktop from '@/components/TwoAuthorDesktop'	28	import TwoAuthorDesktop from '@/components/TwoAuthorDesktop'
29	import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow'	29	import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow'
30	import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments'	30	import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments'
31	import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor'	31	import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor'
32	import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor'	32	import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor'
33	import ToAddYourComment from '@/components/ToAddYourComment'	33	import ToAddYourComment from '@/components/ToAddYourComment'
34	import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard'	34	import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard'
35	import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat'	35	import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat'
36	import Otp from '@/components/Otp'	36	import Otp from '@/components/Otp'
37	import ChangePassword from '@/components/ChangePassword'	37	import ChangePassword from '@/components/ChangePassword'
38	import noscreenshotSingleautho from '@/components/noscreenshotSingleautho'	38	import noscreenshotSingleautho from '@/components/noscreenshotSingleautho'
39		39
40		40
41	import router from '../router'	41	import router from '../router'
42	Vue.use(Router)	42	Vue.use(Router)
43		43
44	export default new Router({	44	export default new Router({
45	mode: 'history',	45	mode: 'history',
46	routes: [{	46	routes: [{
47	path: '/',	47	path: '/login',
48	name: 'LandingPage',	48	name: 'LandingPage',
49	component: LandingPage,	49	component: LandingPage,
50	// beforeEnter: function(to, from, next) {	50	// beforeEnter: function(to, from, next) {
51	// var userdata = localStorage.getItem('spotlight_usertoken')	51	// var userdata = localStorage.getItem('spotlight_usertoken')
52	// if (userdata) {	52	// if (userdata) {
53	// router.push({ name: 'Welcome' })	53	// router.push({ name: 'Welcome' })
54	// }	54	// }
55	// next()	55	// next()
56	// }	56	// }
57	},	57	},
58	{	58	{
59	path: '/signup',	59	path: '/',
60	name: 'SignUp',	60	name: 'SignUp',
61	component: SignUp,	61	component: SignUp,
62	},	62	},
63	{	63	{
64	path: '/intermediate',	64	path: '/intermediate',
65	name: 'Intermediate',	65	name: 'Intermediate',
66	component: Intermediate	66	component: Intermediate
67	},	67	},
68	{	68	{
69	path: '/reset',	69	path: '/reset',
70	name: 'Reset',	70	name: 'Reset',
71	component: Reset,	71	component: Reset,
72	},	72	},
73	{	73	{
74	path: '/profile',	74	path: '/profile',
75	name: 'Profile',	75	name: 'Profile',
76	component: Profile,	76	component: Profile,
77	},	77	},
78	{	78	{
79	path: '/insight',	79	path: '/insight',
80	name: 'Insight',	80	name: 'Insight',
81	component: Insight,	81	component: Insight,
82	},	82	},
83	{	83	{
84	path: '/product-insight',	84	path: '/product-insight',
85	name: 'ProductInsight',	85	name: 'ProductInsight',
86	component: ProductInsight,	86	component: ProductInsight,
87	},	87	},
88	{	88	{
89	path: '/episode-intro/:caseStudyId/:slideId',	89	path: '/episode-intro/:caseStudyId/:slideId',
90	name: 'EpisodeIntro',	90	name: 'EpisodeIntro',
91	component: EpisodeIntro,	91	component: EpisodeIntro,
92	},	92	},
93	,	93	,
94	{	94	{
95	path: '/author-intro/:caseStudyId/:slideId',	95	path: '/author-intro/:caseStudyId/:slideId',
96	name: 'AuthorIntro',	96	name: 'AuthorIntro',
97	component: AuthorIntro,	97	component: AuthorIntro,
98	},	98	},
99	{	99	{
100	path: '/author-reading-now',	100	path: '/author-reading-now',
101	name: 'AuthorReadingNow',	101	name: 'AuthorReadingNow',
102	component: AuthorReadingNow,	102	component: AuthorReadingNow,
103	},	103	},
104	{	104	{
105	path: '/single-author',	105	path: '/single-author',
106	name: 'SingleAuthor',	106	name: 'SingleAuthor',
107	component: SingleAuthor,	107	component: SingleAuthor,
108	},	108	},
109	{	109	{
110	path: '/outro/:caseStudyId/:slideId',	110	path: '/outro/:caseStudyId/:slideId',
111	name: 'Outro',	111	name: 'Outro',
112	component: Outro,	112	component: Outro,
113	},	113	},
114	{	114	{
115	path: '/single-mobile-insight',	115	path: '/single-mobile-insight',
116	name: 'SingleMobileInsight',	116	name: 'SingleMobileInsight',
117	component: SingleMobileInsight,	117	component: SingleMobileInsight,
118	},	118	},
119	{	119	{
120	path: '/two-screen-without-insight/:caseStudyId/:slideId',	120	path: '/two-screen-without-insight/:caseStudyId/:slideId',
121	name: 'TwoScreenWithoutInsight',	121	name: 'TwoScreenWithoutInsight',
122	component: TwoScreenWithoutInsight,	122	component: TwoScreenWithoutInsight,
123	},	123	},
124	{	124	{
125	path: '/single-m-screen-insight-one/:caseStudyId/:slideId',	125	path: '/single-m-screen-insight-one/:caseStudyId/:slideId',
126	name: 'SingleMobileScreenInsightOne',	126	name: 'SingleMobileScreenInsightOne',
127	component: SingleMobileScreenInsightOne,	127	component: SingleMobileScreenInsightOne,
128	},	128	},
129	{	129	{
130	path: '/single-m-screen-insight-two/:caseStudyId/:slideId',	130	path: '/single-m-screen-insight-two/:caseStudyId/:slideId',
131	name: 'SingleMobileScreenInsightTwo',	131	name: 'SingleMobileScreenInsightTwo',
132	component: SingleMobileScreenInsightTwo,	132	component: SingleMobileScreenInsightTwo,
133	},	133	},
134	{	134	{
135	path: '/single-web-screen-insight-one',	135	path: '/single-web-screen-insight-one',
136	name: 'SingleWebScreenInsightOne',	136	name: 'SingleWebScreenInsightOne',
137	component: SingleWebScreenInsightOne,	137	component: SingleWebScreenInsightOne,
138	},	138	},
139	{	139	{
140	path: '/single-screengrab-one-insight',	140	path: '/single-screengrab-one-insight',
141	name: 'SingleScreengrabOneInsight',	141	name: 'SingleScreengrabOneInsight',
142	component: SingleScreengrabOneInsight,	142	component: SingleScreengrabOneInsight,
143	},	143	},
144	{	144	{
145	path: '/two-screen-with-insight/:caseStudyId/:slideId',	145	path: '/two-screen-with-insight/:caseStudyId/:slideId',
146	name: 'TwoScreenWithInsight',	146	name: 'TwoScreenWithInsight',
147	component: TwoScreenWithInsight,	147	component: TwoScreenWithInsight,
148	},	148	},
149	{	149	{
150	path: '/two-screengrab-with-comments',	150	path: '/two-screengrab-with-comments',
151	name: 'TwoScreengrabWithComments',	151	name: 'TwoScreengrabWithComments',
152	component: TwoScreengrabWithComments,	152	component: TwoScreengrabWithComments,
153	},	153	},
154	{	154	{
155	path: '/two-webscreen-with-insight',	155	path: '/two-webscreen-with-insight',
156	name: 'TwoWebScreenWithInsight',	156	name: 'TwoWebScreenWithInsight',
157	component: TwoWebScreenWithInsight,	157	component: TwoWebScreenWithInsight,
158	},	158	},
159	{	159	{
160	path: '/noscreenshot-single-author/:caseStudyId/:slideId',	160	path: '/noscreenshot-single-author/:caseStudyId/:slideId',
161	name: 'NoScreenshotSingleAuthor',	161	name: 'NoScreenshotSingleAuthor',
162	component: NoScreenshotSingleAuthor,	162	component: NoScreenshotSingleAuthor,
163	},	163	},
164	{	164	{
165	path: '/two-author-intro',	165	path: '/two-author-intro',
166	name: 'TwoAuthor',	166	name: 'TwoAuthor',
167	component: TwoAuthor,	167	component: TwoAuthor,
168	},	168	},
169	{	169	{
170	path: '/two-author-desktop',	170	path: '/two-author-desktop',
171	name: 'TwoAuthorDesktop',	171	name: 'TwoAuthorDesktop',
172	component: TwoAuthorDesktop,	172	component: TwoAuthorDesktop,
173	},	173	},
174	{	174	{
175	path: '/two-author-reading-now',	175	path: '/two-author-reading-now',
176	name: 'TwoAuthorReadingNow',	176	name: 'TwoAuthorReadingNow',
177	component: TwoAuthorReadingNow,	177	component: TwoAuthorReadingNow,
178	},	178	},
179	{	179	{
180	path: '/single-mobile-screen-chat-comments',	180	path: '/single-mobile-screen-chat-comments',
181	name: 'SingleMobileScreenChatComments',	181	name: 'SingleMobileScreenChatComments',
182	component: SingleMobileScreenChatComments,	182	component: SingleMobileScreenChatComments,
183	},	183	},
184	{	184	{
185	path: '/two-screen-with-two-author',	185	path: '/two-screen-with-two-author',
186	name: 'TwoScreensWithTwoAuthor',	186	name: 'TwoScreensWithTwoAuthor',
187	component: TwoScreensWithTwoAuthor,	187	component: TwoScreensWithTwoAuthor,
188	},	188	},
189	{	189	{
190	path: '/no-screenshot-two-author',	190	path: '/no-screenshot-two-author',
191	name: 'NoScreenshotTwoAuthor',	191	name: 'NoScreenshotTwoAuthor',
192	component: NoScreenshotTwoAuthor,	192	component: NoScreenshotTwoAuthor,
193	},	193	},
194	{	194	{
195	path: '/to-add-your-comment',	195	path: '/to-add-your-comment',
196	name: 'ToAddYourComment',	196	name: 'ToAddYourComment',
197	component: ToAddYourComment,	197	component: ToAddYourComment,
198	},	198	},
199	{	199	{
200	path: '/reading-flow-bounce-board',	200	path: '/reading-flow-bounce-board',
201	name: 'ReadingFlowBounceBoard',	201	name: 'ReadingFlowBounceBoard',
202	component: ReadingFlowBounceBoard,	202	component: ReadingFlowBounceBoard,
203	},	203	},
204	{	204	{
205	path: '/reading-flow-bounce-board-chat',	205	path: '/reading-flow-bounce-board-chat',
206	name: 'ReadingFlowBounceBoard_chat',	206	name: 'ReadingFlowBounceBoard_chat',
207	component: ReadingFlowBounceBoard_chat,	207	component: ReadingFlowBounceBoard_chat,
208	},	208	},
209	{	209	{
210	path: '/otp/:flag',	210	path: '/otp/:flag',
211	name: 'Otp',	211	name: 'Otp',
212	component: Otp,	212	component: Otp,
213	},	213	},
214	{	214	{
215	path: '/changepassword',	215	path: '/changepassword',
216	name: 'ChangePassword',	216	name: 'ChangePassword',
217	component: ChangePassword,	217	component: ChangePassword,
218	},	218	},
219	{	219	{
220	path: '/noscreenshot-s-autho/:caseStudyId/:slideId',	220	path: '/noscreenshot-s-autho/:caseStudyId/:slideId',
221	name: 'noscreenshotSingleautho',	221	name: 'noscreenshotSingleautho',
222	component: noscreenshotSingleautho,	222	component: noscreenshotSingleautho,
223	},	223	},
224	],	224	],
225	scrollBehavior(to, from, savedPosition) {	225	scrollBehavior(to, from, savedPosition) {
226	this.seen = false	226	this.seen = false
227	return { x: 0, y: 0 }	227	return { x: 0, y: 0 }
228	}	228	}
229	})	229	})
230		230
231	// noscreenshot-s-autho	231	// noscreenshot-s-autho
232	//two-screen-without-insight	232	//two-screen-without-insight
233	//single-m-screen-insight-one	233	//single-m-screen-insight-one
234	//two-screen-with-insight	234	//two-screen-with-insight