hqhhuang
diff --git a/‎src/components/Badge.vue‎
Lines changed: 3 additions & 2 deletions b/‎src/components/Badge.vue‎
Lines changed: 3 additions & 2 deletions
diff --git a/‎src/components/DocumentationTopic.vue‎
Lines changed: 42 additions & 67 deletions b/‎src/components/DocumentationTopic.vue‎
Lines changed: 42 additions & 67 deletions
diff --git a/‎src/components/DocumentationTopic/ContentTable.vue‎
Lines changed: 5 additions & 1 deletion b/‎src/components/DocumentationTopic/ContentTable.vue‎
Lines changed: 5 additions & 1 deletion
diff --git a/‎src/components/DocumentationTopic/ContentTableSection.vue‎
Lines changed: 8 additions & 43 deletions b/‎src/components/DocumentationTopic/ContentTableSection.vue‎
Lines changed: 8 additions & 43 deletions
diff --git a/‎src/components/DocumentationTopic/PrimaryContent.vue‎
Lines changed: 0 additions & 8 deletions b/‎src/components/DocumentationTopic/PrimaryContent.vue‎
Lines changed: 0 additions & 8 deletions
diff --git a/‎src/components/DocumentationTopic/RelationshipsList.vue‎
Lines changed: 2 additions & 11 deletions b/‎src/components/DocumentationTopic/RelationshipsList.vue‎
Lines changed: 2 additions & 11 deletions
diff --git a/‎src/components/DocumentationTopic/Summary.vue‎
Lines changed: 7 additions & 4 deletions b/‎src/components/DocumentationTopic/Summary.vue‎
Lines changed: 7 additions & 4 deletions
@@ -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);
 
@@ -15,47 +15,46 @@
         <slot name="above-title" />
         <Title :eyebrow="roleHeading">{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
+        <Availability v-if="platforms" :platforms="platforms" />
       </DocumentationHero>
-      <div class="container content-grid" :class="{ 'full-width': hideSummary }">
-        <Description :hasOverview="hasOverview">
-          <RequirementMetadata
-            v-if="isRequirement"
-            :defaultImplementationsCount="defaultImplementationsCount"
-          />
-          <Aside v-if="deprecationSummary && deprecationSummary.length" kind="deprecated">
-            <ContentNode :content="deprecationSummary" />
-          </Aside>
-          <Aside
-            v-if="downloadNotAvailableSummary && downloadNotAvailableSummary.length"
-            kind="note"
-          >
-            <ContentNode :content="downloadNotAvailableSummary" />
-          </Aside>
-          <DownloadButton v-if="sampleCodeDownload" :action="sampleCodeDownload.action" />
-        </Description>
         <Summary v-if="!hideSummary">
-          <LanguageSwitcher
-            v-if="shouldShowLanguageSwitcher"
-            :interfaceLanguage="interfaceLanguage"
-            :objcPath="objcPath"
-            :swiftPath="swiftPath"
-          />
-          <Availability v-if="platforms" :platforms="platforms" />
           <TechnologyList v-if="modules" :technologies="modules" />
           <TechnologyList
             v-if="extendsTechnology"
             class="extends-technology"
             title="Extends"
             :technologies="[{ name: extendsTechnology }]"
           />
-          <OnThisPageNav v-if="onThisPageSections.length > 1" :sections="onThisPageSections" />
+          <LanguageSwitcher
+            v-if="shouldShowLanguageSwitcher"
+            :interfaceLanguage="interfaceLanguage"
+            :objcPath="objcPath"
+            :swiftPath="swiftPath"
+          />
         </Summary>
-        <PrimaryContent
-          v-if="primaryContentSections && primaryContentSections.length"
-          :conformance="conformance"
-          :sections="primaryContentSections"
-        />
-      </div>
+        <div class="container">
+          <Description :hasOverview="hasOverview">
+            <RequirementMetadata
+              v-if="isRequirement"
+              :defaultImplementationsCount="defaultImplementationsCount"
+            />
+            <Aside v-if="deprecationSummary && deprecationSummary.length" kind="deprecated">
+              <ContentNode :content="deprecationSummary" />
+            </Aside>
+            <Aside
+              v-if="downloadNotAvailableSummary && downloadNotAvailableSummary.length"
+              kind="note"
+            >
+              <ContentNode :content="downloadNotAvailableSummary" />
+            </Aside>
+            <DownloadButton v-if="sampleCodeDownload" :action="sampleCodeDownload.action" />
+          </Description>
+          <PrimaryContent
+            v-if="primaryContentSections && primaryContentSections.length"
+            :conformance="conformance"
+            :sections="primaryContentSections"
+          />
+        </div>
       <Topics
         v-if="topicSections"
         :sections="topicSections"
@@ -95,7 +94,6 @@ import CallToActionButton from './CallToActionButton.vue';
 import DefaultImplementations from './DocumentationTopic/DefaultImplementations.vue';
 import Description from './DocumentationTopic/Description.vue';
 import TechnologyList from './DocumentationTopic/Summary/TechnologyList.vue';
-import OnThisPageNav from './DocumentationTopic/Summary/OnThisPageNav.vue';
 import PrimaryContent from './DocumentationTopic/PrimaryContent.vue';
 import Relationships from './DocumentationTopic/Relationships.vue';
 import RequirementMetadata from './DocumentationTopic/Description/RequirementMetadata.vue';
@@ -134,7 +132,6 @@ export default {
     DownloadButton: CallToActionButton,
     TechnologyList,
     LanguageSwitcher,
-    OnThisPageNav,
     PrimaryContent,
     Relationships,
     RequirementMetadata,
@@ -284,9 +281,18 @@ export default {
         0,
       );
     },
-    hasOverview: ({ primaryContentSections = [] }) => primaryContentSections.filter(section => (
-      section.kind === PrimaryContent.constants.SectionKind.content
-    )).length > 0,
+    hasOverview:
+      ({ primaryContentSections = [], abstract = [] }) => primaryContentSections.filter(section => (
+        section.kind === PrimaryContent.constants.SectionKind.content
+      )).length > 0 || abstract.length > 0,
+    // Use `variants` data to build a map of paths associated with each unique
+    // `interfaceLanguage` trait.
+    languagePaths: ({ variants }) => variants.reduce((memo, variant) => (
+      variant.traits.reduce((_memo, trait) => (!trait.interfaceLanguage ? _memo : ({
+        ..._memo,
+        [trait.interfaceLanguage]: (_memo[trait.interfaceLanguage] || []).concat(variant.paths),
+      })), memo)
+    ), {}),
     onThisPageSections() {
       return this.topicState.onThisPageSections;
     },
@@ -370,37 +376,6 @@ export default {
   @include dynamic-content-container;
 }
 
-.content-grid {
-  display: grid;
-  grid-template-columns: 75% 25%;
-  grid-template-rows: auto minmax(0, 1fr);
-
-  @include breakpoint(small) {
-    display: block;
-  }
-
-  &:before, &:after {
-    display: none;
-  }
-
-  &.full-width {
-    grid-template-columns: 100%;
-  }
-}
-
-.description {
-  grid-column: 1;
-}
-
-.summary {
-  grid-column: 2;
-  grid-row: 1 / -1;
-}
-
-.primary-content {
-  grid-column: 1;
-}
-
 .button-cta {
   margin-top: 2em;
 }
 
@@ -47,14 +47,18 @@ export default {
   @include inTargetIde {
     background: var(--color-content-table-content-color);
   }
-  padding: $section-spacing-single-side 0;
 }
 
 .container {
   @include dynamic-content-container;
+  padding-bottom: $section-spacing-single-side;
 }
 
 .title {
   @include font-styles(heading-2-reduced);
+  padding-top: $section-spacing-single-side;
+  border-top-color: var(--color-grid);
+  border-top-style: solid;
+  border-top-width: 1px;
 }
 </style>
@@ -9,82 +9,48 @@
 -->
 
 <template>
-  <Row class="contenttable-section">
-    <Column class="section-title" :span="span.title">
+  <div class="contenttable-section">
+    <div class="section-title">
       <slot name="title">
         <h3 class="title">{{ title }}</h3>
       </slot>
-    </Column>
-    <Column class="section-content" :span="span.content">
+    </div>
+    <div class="section-content">
       <slot name="abstract" />
       <slot name="discussion" />
       <slot />
-    </Column>
-  </Row>
+    </div>
+  </div>
 </template>
 
 <script>
-import GridColumn from 'docc-render/components/GridColumn.vue';
-import GridRow from 'docc-render/components/GridRow.vue';
-
 export default {
   name: 'ContentTableSection',
-  components: {
-    Column: GridColumn,
-    Row: GridRow,
-  },
   props: {
     title: {
       type: String,
       required: true,
     },
   },
-  computed: {
-    span() {
-      return {
-        title: {
-          large: 3,
-          medium: 3,
-          small: 12,
-        },
-        content: {
-          large: 9,
-          medium: 9,
-          small: 12,
-        },
-      };
-    },
-  },
 };
 </script>
 
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
-@mixin section-border($position) {
-  border-#{$position}-color: var(--color-grid);
-  border-#{$position}-style: solid;
-  border-#{$position}-width: 1px;
+.title + .contenttable-section {
+  margin-top: 0;
 }
 
 .contenttable-section {
-  @include section-border(top);
   align-items: baseline;
-  display: flex;
-  margin: $contenttable-spacing-single-side 0;
   padding-top: $contenttable-spacing-single-side;
 
   &:last-child {
     margin-bottom: 0;
   }
 }
 
-.section {
-  &-content {
-    padding-left: rem(17px)
-  }
-}
-
 /deep/ .title {
   @include font-styles(label);
 }
@@ -105,7 +71,6 @@ export default {
   }
 
   /deep/ .title {
-    @include section-border(bottom);
     margin: 0 0 $contenttable-spacing-single-side 0;
     padding-bottom: 0.5rem;
   }
 
@@ -150,14 +150,6 @@ export default {
 }
 
 .primary-content {
-  &::before {
-    border-top-color: var(--colors-grid, var(--color-grid));
-    border-top-style: solid;
-    border-top-width: 1px;
-    content: '';
-    display: block;
-  }
-
   /deep/ {
     & > * {
       margin-bottom: $section-spacing-single-side;
 
@@ -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;
-    }
   }
 }
 
 
@@ -25,19 +25,22 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .summary {
+  @include font-styles(body-reduced);
   color: var(--colors-secondary-label, var(--color-secondary-label));
-  font-size: rem(16px);
-  margin-bottom: $section-spacing-single-side;
-  padding: 5px 0 0 4em;
+  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));
   }
Original file line number	Diff line number	Diff line change
`@@ -47,14 +47,18 @@ export default {`
`47`	`47`	`@include inTargetIde {`
`48`	`48`	`background: var(--color-content-table-content-color);`
`49`	`49`	`}`
`50`		`- padding: $section-spacing-single-side 0;`
`51`	`50`	`}`
`52`	`51`
`53`	`52`	`.container {`
`54`	`53`	`@include dynamic-content-container;`
	`54`	`+ padding-bottom: $section-spacing-single-side;`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.title {`
`58`	`58`	`@include font-styles(heading-2-reduced);`
	`59`	`+ padding-top: $section-spacing-single-side;`
	`60`	`+ border-top-color: var(--color-grid);`
	`61`	`+ border-top-style: solid;`
	`62`	`+ border-top-width: 1px;`
`59`	`63`	`}`
`60`	`64`	`</style>`