Address PR feedback: mobile view, spacings

Address PR feedback: mobile view, spacings

Author: hqhhuang

src/components/Badge.vue

@@ -47,7 +47,8 @@ $badge-border-radius: $border-radius - 1px !default;
 
 @mixin badge-variation($color) {
   --badge-color: var(--color-badge-#{$color});
-  --badge-dark-color: var(--color-badge-dark-#{$color})
+  --badge-dark-color: var(--color-badge-dark-#{$color});
+  --badge-text-color: var(--color-badge-text-#{$color});
 }
 
 .badge {
@@ -61,7 +62,7 @@ $badge-border-radius: $border-radius - 1px !default;
   border-radius: $badge-border-radius;
   margin-left: 10px;
   border: 1px solid var(--badge-color);
-  color: var(--badge-color);
+  color: var(--badge-text-color);
 
   .theme-dark & {
     --badge-color: var(--badge-dark-color);

src/components/DocumentationTopic.vue

@@ -17,7 +17,7 @@
           <Abstract v-if="abstract" :content="abstract" />
           <Availability v-if="platforms" :platforms="platforms" />
         </DocumentationHero>
-        <Summary v-if="!hideSummary" class="ribbon">
+        <Summary v-if="!hideSummary">
           <TechnologyList v-if="modules" :technologies="modules" />
           <TechnologyList
             v-if="extendsTechnology"
@@ -32,7 +32,7 @@
             :swiftPath="swiftPath"
           />
         </Summary>
-        <div class="container" :class="{ 'full-width': hideSummary }">
+        <div class="container">
           <Description :hasOverview="hasOverview">
             <RequirementMetadata
               v-if="isRequirement"
@@ -362,12 +362,6 @@ export default {
   }
 }
 
-.ribbon {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
 .container {
   @include breakpoint-dynamic-sidebar-content;
   outline-style: none;

src/components/DocumentationTopic/ContentTableSection.vue

@@ -10,12 +10,12 @@
 
 <template>
   <div class="contenttable-section">
-    <div class="section-title" :span="span.title">
+    <div class="section-title">
       <slot name="title">
         <h3 class="title">{{ title }}</h3>
       </slot>
     </div>
-    <div class="section-content" :span="span.content">
+    <div class="section-content">
       <slot name="abstract" />
       <slot name="discussion" />
       <slot />
@@ -32,22 +32,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    span() {
-      return {
-        title: {
-          large: 3,
-          medium: 3,
-          small: 12,
-        },
-        content: {
-          large: 9,
-          medium: 9,
-          small: 12,
-        },
-      };
-    },
-  },
 };
 </script>
 

src/components/DocumentationTopic/RelationshipsList.vue

@@ -128,20 +128,16 @@ export default {
 .relationships-list {
   list-style: none;
 
-  &.column {
-    margin: 0;
-  }
-
   // The "inline" style displays items on a single line as a
   // comma-separated list with a maximum number of 3 items. This style should
   // not be used for a list that contains any items with availability
   // constraints information.
   &.inline {
-    columns: 1;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    margin: 0;
+    margin-top: 15px;
+    margin-left: 0;
 
     li:not(:last-child)::after {
       content: ",\00a0"
@@ -155,11 +151,6 @@ export default {
     &:after {
       margin-top: $change-coin-y-offset-reduced;
     }
-
-    // ensure that column layout stays a block content
-    &.column {
-      display: block;
-    }
   }
 }
 

src/components/DocumentationTopic/Summary.vue

@@ -27,19 +27,20 @@ export default {
 .summary {
   color: var(--colors-secondary-label, var(--color-secondary-label));
   font-size: rem(16px);
-  padding: 5px 0;
+  padding: 11px 0;
   background-color: var(--color-fill-gray-quaternary);
   display: flex;
   align-items: center;
+  justify-content: center;
 
   @include breakpoint(medium) {
     padding-left: 2em;
   }
 
   @include breakpoint(small) {
+    flex-direction: column;
     padding-left: 0;
     margin-bottom: rem(40px);
-    display: grid;
     grid-gap: rem(16px);
     grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
   }

src/components/DocumentationTopic/Summary/Availability.vue

@@ -18,36 +18,36 @@
         class="platform"
         :change="!!changeFor(platform.name)"
       >
-        <AvailabilityBadge>
+        <Badge>
           <AvailabilityRange
             :deprecatedAt="platform.deprecatedAt"
             :introducedAt="platform.introducedAt"
             :platformName="platform.name"
           />
-        </AvailabilityBadge>
-        <AvailabilityBadge v-if="platform.deprecatedAt" variant="deprecated" />
-        <AvailabilityBadge v-else-if="platform.beta" variant="beta" />
+        </Badge>
+        <Badge v-if="platform.deprecatedAt" variant="deprecated" />
+        <Badge v-else-if="platform.beta" variant="beta" />
       </Item>
     </List>
   </Section>
 </template>
 
 <script>
+import Badge from 'docc-render/components/Badge.vue';
 import { getAPIChanges } from 'docc-render/mixins/apiChangesHelpers';
 import { ChangeTypes } from 'docc-render/constants/Changes';
 import AvailabilityRange from './AvailabilityRange.vue';
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 import Section from './Section.vue';
-import AvailabilityBadge from './AvailabilityBadge.vue';
 
 export default {
   name: 'Availability',
   mixins: [getAPIChanges],
   inject: ['identifier', 'store'],
   components: {
+    Badge,
     AvailabilityRange,
-    AvailabilityBadge,
     Item: ListItem,
     List,
     Section,
@@ -99,10 +99,14 @@ export default {
 .availability, .platform {
   box-sizing: inherit;
   display: inline-block;
+
+  @include breakpoint(small) {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .platform {
-  padding-right: 2rem;
   box-sizing: border-box;
 
   &::after {
@@ -112,17 +116,14 @@ export default {
     margin-top: 6px;
   }
 
-  &-badge {
-    margin-left: rem(8px);
-  }
+  // &-badge {
+  //   margin-left: rem(8px);
+  // }
 
   @include change-highlight-horizontal-spacing();
   padding-left: 0;
-
+  padding-right: 0;
   margin-bottom: 0.25rem;
-  &:last-child {
-    margin-bottom: 0;
-  }
 
   @include change-highlight-vertical-spacing();
 
@@ -141,4 +142,9 @@ export default {
     @include change-highlight-horizontal-text-alignment();
   }
 }
+
+.badge {
+  border-radius: 10.82px;
+  margin-left: 0;
+}
 </style>

src/components/DocumentationTopic/Summary/AvailabilityBadge.vue

@@ -126,12 +126,14 @@ export default {
   font-size: 14px;
   margin-top: 0;
   display: flex;
-  flex-direction: row;
 }
 
 .language-option {
+  &.swift {
+    margin-right: 10px;
+  }
+
   @include breakpoint(small) {
-    display: block;
     margin-bottom: 0.25rem;
   }
 
@@ -143,7 +145,6 @@ export default {
   @include breakpoints-from(medium) {
     &.swift {
       border-right: 1px solid var(--color-fill-gray-tertiary);
-      margin-right: 10px;
     }
   }
 }

src/components/DocumentationTopic/Summary/LanguageSwitcher.vue

@@ -17,11 +17,16 @@ export default { name: 'Section' };
 </script>
 
 <style scoped lang="scss">
+@import 'docc-render/styles/_core.scss';
 .summary-section {
   margin-right: 1.5rem;
 
   &:last-of-type {
     margin-right: 0;
   }
+
+  @include breakpoint(small) {
+    margin-right: 0;
+  }
 }
 </style>