Merge pull request #184 from hlxsites/bug/sidebar-customerquote-issue

Bug/sidebar customerquote issue

blocks/sidebar-customerquote/sidebar-customerquote.css

@@ -1,16 +1,27 @@
 /* customer quotes css */
+.sidebar-customerquote {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 11px rgba(0,0,0,10%);
+  display: block;
+  padding: 7%;
+}
 
-.quote-box {
+.quote-wrapper{
   background: #f5f5f5;
   padding: 30px;
   padding-bottom: 15px;
   border-radius: 4px;
   background-clip: padding-box;
   position: relative;
-  margin-bottom: 30px;
+  color: #666;
 }
 
-.quote-box::after {
+.sidebar-customerquote:not(:first-child) {
+  margin-top: 25px;
+}
+
+.quote-wrapper.bottom-icon::after {
   content: "";
   display: block;
   width: 0;
@@ -24,45 +35,26 @@
   left: 50%;
 }
 
-.quote {
-  border: 0;
-  padding: 0;
-  font-size: 16px;
-  color: #666;
-  margin: 0;
-}
-
-.details {
+.quote-wrapper .details {
   font-size: 13px;
-}
-
-.name {
   display: block;
   font-weight: normal;
   font-family: Montserrat, sans-serif;
+  padding-top: 8px;
+  color: rgba(26, 25, 25);
 }
 
-.quote-box .title {
+.quote-wrapper .title {
   display: block;
   color: #b3b3b3;
   margin-bottom: 0;
   font-weight: normal;
   font-size: 13px;
 }
 
-.quote-box .fa {
-  font-size: 18px;
-  position: absolute;
-  right: 30px;
-  bottom: 30px;
-}
-
-.img-rounded {
-  border-radius: 6px;
-}
-
 .testimonial-headshot {
   text-align: center;
+  margin-top: 30px;
 }
 
 .testimonial-headshot img {

blocks/sidebar-customerquote/sidebar-customerquote.js

@@ -1,43 +1,14 @@
 export default function decorate(block) {
-  const clonedBlock = block.cloneNode(true);
-  const pictureElement = clonedBlock.querySelector('picture');
-  const moduleDiv = document.createElement('div');
-  moduleDiv.classList.add('hs_cos_wrapper', 'hs_cos_wrapper_widget', 'hs_cos_wrapper_type_module', 'module-1');
-  moduleDiv.setAttribute('data-hs-cos-type', 'module');
-  moduleDiv.setAttribute('data-hs-cos-general-type', 'widget');
-  const quoteboxDiv = document.createElement('div');
-  quoteboxDiv.classList.add('quote-box');
-  const blockquoteDiv = document.createElement('blockquote');
-  blockquoteDiv.classList.add('quote');
-  blockquoteDiv.textContent = clonedBlock.querySelector('blockquote > p').textContent;
-  quoteboxDiv.append(blockquoteDiv);
-  const para = document.createElement('p');
-  para.classList.add('details');
-  const spanInside = document.createElement('span');
-  spanInside.classList.add('name');
-  spanInside.textContent = clonedBlock.querySelector('blockquote + p').textContent;
-  para.append(spanInside);
-  const spanTitle = document.createElement('span');
-  spanTitle.classList.add('title');
-  spanTitle.textContent = clonedBlock.querySelector('blockquote + p + p').textContent;
-  para.append(spanTitle);
-  quoteboxDiv.append(para);
-  const spanIconWrapper = document.createElement('span');
-  spanIconWrapper.classList.add('accentColor1', 'fa');
-  const spanIcon = document.createElement('i');
-  spanIcon.classList.add('fa', 'fa-quote-right');
-  spanIconWrapper.append(spanIcon);
-  quoteboxDiv.append(spanIconWrapper);
-  const imageWrapper = document.createElement('div');
-  imageWrapper.classList.add('testimonial-headshot', 'text-center');
-  const image = document.createElement('img');
-  image.setAttribute('width', `${pictureElement.querySelector('img').width}`);
-  image.setAttribute('height', `${pictureElement.querySelector('img').height}`);
-  image.setAttribute('alt', `${pictureElement.querySelector('img').alt}`);
-  image.setAttribute('src', `${pictureElement.querySelector('img').src}`);
-  imageWrapper.append(image);
-  moduleDiv.append(quoteboxDiv);
-  moduleDiv.append(imageWrapper);
+  const quoteWrapper = document.createElement('div');
+  quoteWrapper.classList.add('quote-wrapper');
+  [...block.children].forEach((element) => { quoteWrapper.append(element); });
+  quoteWrapper.children[1].classList.add('details');
+  quoteWrapper.children[2].classList.add('title');
   block.textContent = '';
-  block.append(moduleDiv);
+  block.append(quoteWrapper);
+  if (quoteWrapper.children[3] && quoteWrapper.children[3].querySelector('picture')) {
+    quoteWrapper.children[3].classList.add('testimonial-headshot');
+    quoteWrapper.classList.add('bottom-icon');
+    block.appendChild(quoteWrapper.children[3]);
+  }
 }

templates/Default/Default.js

@@ -67,6 +67,6 @@ export default function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
-  setSidebarMaxHeight();
+  setTimeout(() => { setSidebarMaxHeight(); }, 1000);
   setSidebarHeight();
 }