Merge pull request #2 from rakeshAlgo/is-helpful-task

is this helpful task completed

Author: amarantha-k

src/css/doc.css

@@ -8,7 +8,7 @@
 .doc h4,
 .doc h5,
 .doc h6 {
-  font-weight: var(--weight-medium);
+  font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: 1.2;
   margin: 1.5rem 0 -0.25rem;
@@ -27,7 +27,7 @@
 }
 
 .doc h2 {
-  font-size: 1.875rem;
+  font-size: 2rem;
   margin: 2.25rem 0 2.5rem;
   max-width: fit-content;
   /* NOTE used to restrict width of key line */

src/css/is-this-helpful.css

@@ -21,14 +21,14 @@
   margin: 15px 0;
 }
 
-.is-this-helpful-box .btn-row .helpfull-btn {
+.is-this-helpful-box .btn-row .helpful-btn {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: var(--color-brand-gray4);
 }
 
-.is-this-helpful-box .btn-row .helpfull-btn:hover,
-.is-this-helpful-box .btn-row .helpfull-btn.active {
+.is-this-helpful-box .btn-row .helpful-btn:hover,
+.is-this-helpful-box .btn-row .helpful-btn.active {
   color: var(--color-brand-blue);
   text-decoration: none;
 }
@@ -44,7 +44,7 @@
   border-radius: 5px;
   border: 1px solid var(--color-brand-gray5);
   resize: vertical;
-  font-size: 1rem;
+  font-size: 0.875rem;
   color: var(--color-brand-gray4);
   font-family: "Source Sans Pro", sans-serif;
 }
@@ -98,6 +98,17 @@
   color: var(--color-brand-blue);
 }
 
+.toc .any-feedback a {
+  font-size: 0.875rem;
+  line-height: 20px;
+  text-decoration: none;
+  color: var(--color-brand-blue);
+  font-weight: var(--weight-normal);
+  margin-bottom: 15px;
+  display: inline-block;
+  width: 100%;
+}
+
 .is-this-helpful-box .action-btn-row .info-btn {
   font-size: 0.75rem;
   line-height: 0.75rem;

src/css/main.css

@@ -117,3 +117,9 @@ main p {
     align-items: flex-start;
   }
 }
+
+@media screen and (max-width: 767px) {
+  .main {
+    padding-bottom: 2rem;
+  }
+}

src/js/06-page-rating.js

@@ -1,45 +1,53 @@
-;(function () {
+;
+(function () {
   'use strict'
-
   var dialogBox = document.getElementById('dialogBox')
   var helpYesBtn = document.getElementById('yesBtn')
   var helpNoBtn = document.getElementById('noBtn')
   var skipBtnMsg = document.getElementById('skipBtnMsg')
   var feedBackFormBox = document.getElementById('additionalFeedbackBox')
-  var leaveAddtinalBox = document.getElementById('leaveAddtinalBox')
-  var skipLeaveBtn = document.getElementById('skipLeaveBtn')
+  //  var leaveAddtinalBox = document.getElementById('leaveAddtinalBox')
+  // var skipLeaveBtn = document.getElementById('skipLeaveBtn')
   var feedBackMsg = document.querySelector('.feed-back-msg')
   var submitBtn = document.querySelector('.submit-btn')
-  var leaveYesBtn = document.querySelector('.yes-btn')
+  // var leaveYesBtn = document.querySelector('.yes-btn')
   var feedbackInfoBtn = document.querySelector('.info-btn')
   var feedbackModal = document.querySelector('.feedback-modal')
   var closeModalPopup = document.querySelector('.close-popup')
+  var anyFeedbackBtn = document.querySelector('.any-feedback-btn')
   // for config
   var yesBtnData = helpYesBtn.dataset
   var noBtnData = helpNoBtn.dataset
 
   helpYesBtn.addEventListener('click', function (e) {
-    dialogBox.style.display = 'block'
+    // dialogBox.style.display = 'block'
     this.classList.add('active')
     helpNoBtn.classList.remove('active')
     console.log(yesBtnData, 16)
   })
   helpNoBtn.addEventListener('click', function (e) {
-    dialogBox.style.display = 'block'
+    // dialogBox.style.display = 'block'
     this.classList.add('active')
     helpYesBtn.classList.remove('active')
     console.log(noBtnData, 27)
   })
 
-  skipBtnMsg.addEventListener('click', function (e) {
-    feedBackFormBox.style.display = 'none'
-    leaveAddtinalBox.style.display = 'block'
-  })
-  skipLeaveBtn.addEventListener('click', function (e) {
-    leaveAddtinalBox.style.display = 'none'
+  anyFeedbackBtn.addEventListener('click', function (e) {
+    e.preventDefault()
+    dialogBox.style.display = 'block'
     feedBackFormBox.style.display = 'block'
+    this.classList.add('active')
   })
 
+  skipBtnMsg.addEventListener('click', function (e) {
+    dialogBox.style.display = 'none'
+    feedBackMsg.value = ''
+  })
+  // skipLeaveBtn.addEventListener('click', function (e) {
+  //   leaveAddtinalBox.style.display = 'none'
+  //   feedBackFormBox.style.display = 'block'
+  // })
+
   feedBackMsg.addEventListener('keyup', function (e) {
     var textareaValue = this.value
 
@@ -49,9 +57,6 @@
       submitBtn.classList.add('disabled')
     }
   })
-  leaveYesBtn.addEventListener('click', function (e) {
-    leaveAddtinalBox.style.display = 'none'
-  })
   feedbackInfoBtn.addEventListener('click', function (e) {
     feedbackModal.classList.add('show')
   })

src/partials/toc.hbs

@@ -2,37 +2,40 @@
   <div class="sidebar-box">
       <div class="toc-menu"></div>
         <div class="is-this-helpful-box">
-          <h4> Is this page helpful ?</h4>
+          <h4> Is this page helpful?</h4>
             <div class="btn-row">
-              <a href="#" class="like-btn helpfull-btn" id="yesBtn" data-page-rating="like" >
+              <a href="#" class="like-btn helpful-btn" id="yesBtn" data-page-rating="like" >
                      <i class="far fa-thumbs-up"></i>
                  Yes
 
                  </a>
-              <a href="#" class="dislike-btn helpfull-btn" id="noBtn"  data-page-rating="dislike"> <i class="far fa-thumbs-down"></i> No</a>
+              <a href="#" class="dislike-btn helpful-btn" id="noBtn"  data-page-rating="dislike"> <i class="far fa-thumbs-down"></i> No</a>
+            </div>
+            <div class="any-feedback">
+              <a href="#" class="btn any-feedback-btn">Leave Additional Feedback? </a>
             </div>
             <div class="dialog-box" id="dialogBox">
               <form>
-                  <div class="form-group " id="additionalFeedbackBox"> 
+                  <div class="form-group " id="additionalFeedbackBox">
                     <textarea class="input-control feed-back-msg" rows="8" placeholder="Any Additonal Feedback?"></textarea>
-                    
+
                     <div class="action-btn-row ">
                       <a href="#" class="skip-btn" id="skipBtnMsg">Skip</a>
                        <button class="submit-btn btn blue-btn disabled" > Submit  </button>
                        <a href="#" class="info-btn"><i class="fas fa-info-circle"></i></a>
                     </div>
-               
+
 
                   </div>
 
-                  <div class="leave-addtional-box" id="leaveAddtinalBox">
+                  {{!-- <div class="leave-addtional-box" id="leaveAddtinalBox">
                     <div class="text-msg"> <p>Leave Additional Feedback?</p> </div>
                          <div class="action-btn-row leave-feedback-btn-row">
                             <a href="#" class="skip-btn" id="skipLeaveBtn">Skip</a>
                             <button class="yes-btn btn blue-btn"> Yes  </button>
-                            
+
                       </div>
-                  </div>
+                  </div> --}}
               </form>
 
             </div>