Card layout updates (#1005)

Update the layout of the card feedback buttons so that they are located in their own row underneath the CTAs and the card content This change was in response to feedback from Product/UX. This PR moves the feedback buttons out from the `HitchhikerCard-actions` div into the card body. We also remove the `HichhikerCard-actions` div since that was only there so that the buttons could be next to the CTAs. This allows the card content to be full width when CTAs are not present. It adds some extra height to most cards since there's an entire row dedicated to the feedback buttons, however UX was happy with this decision. As part of this change, I removed some styling which is no longer relevant. This PR also ensures that the feedback buttons are in the bottom right on grid layout. (Previously the buttons could appear just below the card content in grid layout just below the CTAs) Also set a fixed feedbackContent height so that the cards don't shift when the buttons are pressed. J=SLAP-1702 TEST=manual Visual inspect all cards with feedback buttons enabled and also check mobile layouts. Test the product cards on the grid layout and confirm the feedback buttons are in the bottom right. Test clicking the feedback buttons and observing that the cards do not shift
yext · Nov 15, 2021 · d4a56a7 · d4a56a7
1 parent ed5f811
commit d4a56a7
Show file tree

Hide file tree

Showing 44 changed files with 157 additions and 297 deletions.
diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
@@ -7,11 +7,9 @@
       <div class="HitchhikerDocumentStandard-info">
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
@@ -32,8 +32,7 @@
         {{/if}}
         {{> 'details'}}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+      {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
         <div class="HitchhikerEventStandard-ctasWrapper">
           {{#if (all card.CTA1.url card.CTA1.label)}}
           <div class="HitchhikerEventStandard-primaryCTA">
@@ -50,10 +49,9 @@
           </div>
           {{/if}}
         </div>
-        {{/if}}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{/if}}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
@@ -19,27 +19,25 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    <div class="HitchhikerCard-actions">
-      {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
-        <div class="HitchhikerFaqAccordion-ctasWrapper">
-          {{#if card.CTA1.url}}
-          <div class="HitchhikerFaqAccordion-primaryCTA">
-            {{#with card.CTA1}}
-              {{> CTA }}
-            {{/with}}
-          </div>
-          {{/if}}
-          {{#if card.CTA2.url}}
-          <div class="HitchhikerFaqAccordion-secondaryCTA">
-            {{#with card.CTA2}}
-              {{> CTA }}
-            {{/with}}
-          </div>
-          {{/if}}
+    {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
+      <div class="HitchhikerFaqAccordion-ctasWrapper">
+        {{#if card.CTA1.url}}
+        <div class="HitchhikerFaqAccordion-primaryCTA">
+          {{#with card.CTA1}}
+            {{> CTA }}
+          {{/with}}
         </div>
-      {{/if}}
-      {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-    </div>
+        {{/if}}
+        {{#if card.CTA2.url}}
+        <div class="HitchhikerFaqAccordion-secondaryCTA">
+          {{#with card.CTA2}}
+            {{> CTA }}
+          {{/with}}
+        </div>
+        {{/if}}
+      </div>
+    {{/if}}
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -19,11 +19,9 @@
         {{> list }}
         {{> phone }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
@@ -7,11 +7,9 @@
       <div class="HitchhikerJobStandard-info">
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
@@ -4,10 +4,8 @@
     {{> subtitle }}
     <div class="HitchhikerLinkStandard-contentWrapper">
       {{> details }}
-      <div class="HitchhikerCard-actions">
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -24,11 +24,9 @@
         {{> contactInfo }}
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 </div>

diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
@@ -8,8 +8,7 @@
         {{> list }}
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+      {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
         <div class="HitchhikerMenuItemStandard-ctasWrapper">
           {{#with card.CTA1}}
           {{> CTA ctaName="primaryCTA" }}
@@ -18,10 +17,9 @@
           {{> CTA ctaName="secondaryCTA" }}
           {{/with}}
         </div>
-        {{/if}}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{/if}}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
@@ -32,28 +32,26 @@
         {{/if}}
         {{> 'details'}}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-          <div class="HitchhikerEventStandard-ctasWrapper">
-            {{#if (all card.CTA1.url card.CTA1.label)}}
-            <div class="HitchhikerEventStandard-primaryCTA">
-              {{#with card.CTA1}}
-                {{> CTA }}
-              {{/with}}
-            </div>
-            {{/if}}
-            {{#if (all card.CTA2.url card.CTA2.label)}}
-            <div class="HitchhikerEventStandard-secondaryCTA">
-              {{#with card.CTA2}}
-                {{> CTA }}
-              {{/with}}
-            </div>
-            {{/if}}
+      {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+        <div class="HitchhikerEventStandard-ctasWrapper">
+          {{#if (all card.CTA1.url card.CTA1.label)}}
+          <div class="HitchhikerEventStandard-primaryCTA">
+            {{#with card.CTA1}}
+              {{> CTA }}
+            {{/with}}
           </div>
-        {{/if}}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+          {{/if}}
+          {{#if (all card.CTA2.url card.CTA2.label)}}
+          <div class="HitchhikerEventStandard-secondaryCTA">
+            {{#with card.CTA2}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
+        </div>
+      {{/if}}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
@@ -19,27 +19,25 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    <div class="HitchhikerCard-actions">
-      {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
-        <div class="HitchhikerFaqAccordion-ctasWrapper">
-          {{#if card.CTA1.url}}
-          <div class="HitchhikerFaqAccordion-primaryCTA">
-            {{#with card.CTA1}}
-              {{> CTA }}
-            {{/with}}
-          </div>
-          {{/if}}
-          {{#if card.CTA2.url}}
-          <div class="HitchhikerFaqAccordion-secondaryCTA">
-            {{#with card.CTA2}}
-              {{> CTA }}
-            {{/with}}
-          </div>
-          {{/if}}
+    {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
+      <div class="HitchhikerFaqAccordion-ctasWrapper">
+        {{#if card.CTA1.url}}
+        <div class="HitchhikerFaqAccordion-primaryCTA">
+          {{#with card.CTA1}}
+            {{> CTA }}
+          {{/with}}
         </div>
-      {{/if}}
-      {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-    </div>
+        {{/if}}
+        {{#if card.CTA2.url}}
+        <div class="HitchhikerFaqAccordion-secondaryCTA">
+          {{#with card.CTA2}}
+            {{> CTA }}
+          {{/with}}
+        </div>
+        {{/if}}
+      </div>
+    {{/if}}
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
@@ -19,11 +19,9 @@
         {{> list }}
         {{> phone }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
@@ -7,11 +7,9 @@
       <div class="HitchhikerJobStandard-info">
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
@@ -4,10 +4,8 @@
     {{> subtitle }}
     <div class="HitchhikerLinkStandard-contentWrapper">
       {{> details }}
-      <div class="HitchhikerCard-actions">
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
@@ -24,11 +24,9 @@
         {{> contactInfo }}
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 </div>

diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs
@@ -8,7 +8,6 @@
         {{> list }}
         {{> details }}
       </div>
-      <div class="HitchhikerCard-actions">
         {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
           <div class="HitchhikerMenuItemStandard-ctasWrapper">
             {{#with card.CTA1}}
@@ -19,9 +18,8 @@
             {{/with}}
           </div>
         {{/if}}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs
@@ -13,10 +13,8 @@
       {{> subtitle }}
       <div class="HitchhikerProductProminentImage-contentWrapper">
         {{> details }}
-        <div class="HitchhikerCard-actions">
-          {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-        </div>
       </div>
+      {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
     </div>
   {{#if card.url}}</a>{{/if}}
 </div>

diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs
@@ -5,11 +5,9 @@
     {{> subtitle }}
     <div class="HitchhikerProductProminentImage-contentWrapper">
       {{> details }}
-      <div class="HitchhikerCard-actions">
-        {{> ctas }}
-        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-      </div>
+      {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 

diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs
@@ -4,6 +4,7 @@
     {{> title }}
     {{> subtitle }}
     {{> content }}
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 
@@ -49,13 +50,10 @@
 {{/inline}}
 
 {{#*inline 'content'}}
-{{#if (any card.details (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label) card.feedbackEnabled)}}
+{{#if (any card.details (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
   <div class="HitchhikerProductProminentVideo-contentWrapper">
     {{> details }}
-    <div class="HitchhikerCard-actions">
-      {{> ctas }}
-      {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
-    </div>
+    {{> ctas }}
   </div>
 {{/if}}
 {{/inline}}