Pager UI updates (#787)

* Move vars from Card to global scope

* Update UI for the medium viewport at Pager component

* Add details-padding argument to static-card-size

* Add details-padding-card to link bottom

* Fix medium breakpoint comment

Author: marinaaisa

src/components/Card.vue

@@ -151,17 +151,6 @@ export default {
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
-$details-padding: 17px;
-$content-margin: 4px;
-
-@mixin static-card-size($card-height, $img-height) {
-  @include inTargetWeb {
-    --card-height: #{$card-height};
-    --card-details-height: #{$card-height - $img-height - ($details-padding * 2)};
-  }
-  --card-cover-height: #{$img-height};
-}
-
 .card {
   overflow: hidden;
   display: block;
@@ -215,7 +204,7 @@ $content-margin: 4px;
 
 .details {
   background-color: var(--color-card-background);
-  padding: $details-padding;
+  padding: $details-padding-card;
   position: relative;
   height: var(--card-details-height);
   @include font-styles(card-content-small);
@@ -226,14 +215,14 @@ $content-margin: 4px;
 
   .floating-style & {
     --color-card-background: transparent;
-    padding: $details-padding 0;
+    padding: $details-padding-card 0;
   }
 }
 
 .eyebrow {
   color: var(--color-card-eyebrow);
   display: block;
-  margin-bottom: $content-margin;
+  margin-bottom: $content-margin-card;
   @include font-styles(card-eyebrow-small);
 
   .large & {
@@ -253,11 +242,11 @@ $content-margin: 4px;
 
 .card-content {
   color: var(--color-card-content-text);
-  margin-top: $content-margin;
+  margin-top: $content-margin-card;
 }
 
 .link {
-  bottom: 17px;
+  bottom: $details-padding-card;
   display: flex;
   align-items: center;
   position: absolute;

src/components/DocumentationTopic/TopicsLinkCardGrid.vue

@@ -17,7 +17,7 @@
     <template #page="{ page }">
       <Row :columns="{
         large: compactCards ? 3 : 2,
-        medium: 2,
+        medium: compactCards ? 3 : 2,
       }">
         <Column
           v-for="item in page"
@@ -82,7 +82,7 @@ export default {
     }) => (usePager ? {
       [TopicSectionsStyle.compactGrid]: {
         [BreakpointName.large]: 6,
-        [BreakpointName.medium]: 4,
+        [BreakpointName.medium]: 6,
         [BreakpointName.small]: 1,
       },
       [TopicSectionsStyle.detailedGrid]: {

src/components/Pager.vue

@@ -343,7 +343,7 @@ export default {
   justify-content: center;
   margin-top: 1rem;
 
-  @include breakpoint(small) {
+  @include breakpoint(medium) {
     display: none;
   }
 }

src/components/PagerControl.vue

@@ -54,7 +54,11 @@ export default {
   width: var(--control-size, 1rem);
 
   &[disabled] {
-    opacity: 0;
+    opacity: 0.6;
+
+    @include breakpoints-from(large) {
+      opacity: 0;
+    }
   }
 }
 

src/styles/core/_helpers.scss

@@ -32,6 +32,17 @@
   border: 0;
 }
 
+////
+/// Applies size for static cards
+////
+@mixin static-card-size($card-height, $img-height, $details-padding: $details-padding-card) {
+  @include inTargetWeb {
+    --card-height: #{$card-height};
+    --card-details-height: #{$card-height - $img-height - ($details-padding * 2)};
+  }
+  --card-cover-height: #{$img-height};
+}
+
 ////
 /// Used to apply the globalish styles that the ".section-content" class
 /// provided on /documentation pages

src/styles/core/_vars.scss

@@ -90,3 +90,7 @@ $localizedQuotes: (
 
 // Localized Fonts
 $localizedFonts: () !default;
+
+// Cards
+$details-padding-card: 17px;
+$content-margin-card: 4px;

tests/unit/components/DocumentationTopic/TopicsLinkCardGrid.spec.js

@@ -56,11 +56,11 @@ describe('TopicsLinkCardGrid', () => {
       expect(pager.exists()).toBe(true);
       expect(pager.props('pages').length).toBe(2);
 
-      // 10 items => 3 pages at medium breakpoint (4 links per page)
+      // 10 items => 2 pages at medium breakpoint (6 links per page)
       wrapper.setData({ breakpoint: BreakpointName.medium });
       pager = wrapper.find(Pager);
       expect(pager.exists()).toBe(true);
-      expect(pager.props('pages').length).toBe(3);
+      expect(pager.props('pages').length).toBe(2);
 
       // 10 items => 10 pages at small breakpoint (1 links per page)
       wrapper.setData({ breakpoint: BreakpointName.small });