Make styling work, remove ember-anchor + updateAnchor implementation

Author: MinThaMie

app/components/class-field-description.hbs

@@ -1,5 +1,5 @@
 <section class='{{@type}}'>
-  <h3 data-anchor='{{@field.name}}'>
+  <h3 id='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -16,7 +16,7 @@
       <span class='access'>deprecated</span>
     {{/if}}
     {{!-- TODO: Fix this link for a11y --}}
-    <a class='class-field-description--link' data-test-anchor="{{@field.name}}" role='link' {{on 'click' (fn this.updateAnchor @field.name)}} {{!-- template-lint-disable link-href-attributes --}}>
+    <a class='class-field-description--link' href="#{{@field.name}}" role='link'>
       {{svg-jar 'link' width='20px' height='20px'}}
     </a>
   </h3>

app/components/class-field-description.js

@@ -12,15 +12,4 @@ export default class ClassFieldDescription extends Component {
       this.args.field.class
     );
   }
-
-  /**
-   * Callback for updating the anchor with the field name that was clicked by a user.
-   *
-   * @method updateAnchor
-   * @method fieldName String The name representing the field that was clicked.
-   */
-  @action
-  updateAnchor(fieldName) {
-    this.args.updateAnchor?.(fieldName);
-  }
 }

app/components/ember-anchor.js

@@ -129,6 +129,19 @@ dd {
   color: var(--color-gray-600);
 }
 
+.on-this-page-wrapper .access-checkbox-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.on-this-page-wrapper .api-index-filter {
+  margin-top: var(--spacing-2)
+}
+
+.on-this-page-wrapper ul {
+  margin-top: 0;
+}
+
 .whoops {
   display: flex;
   justify-content: center;

app/styles/app.css

@@ -1,27 +1,19 @@
 <ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
   <ApiIndex @itemData={{filteredModel}} @classNames="api__index__content" as |sectionData|>
     {{#each sectionData.sections as |section|}}
-      <h3 class="api-index-section-title">{{section.title}}</h3>
       {{#if section.items}}
+      <h3 class="api-index-section-title">{{section.title}}</h3>
         <ul class="{{section.class}}">
           {{#each section.items as |item|}}
             <li data-test-item={{item.name}}>
-              <LinkTo
-                @route="{{this.parentName}}{{section.routeSuffix}}"
-                @models={{array
-                  @model.project.id
-                  @model.projectVersion.compactVersion
-                  @model.name item.name
-                }}
-                @query={{hash anchor=item.name}}
+              <a
+                href="#{{item.name}}"
               >
                 {{item.name}}
-              </LinkTo>
+              </a>
             </li>
           {{/each}}
         </ul>
-      {{else}}
-        <p>No documented items</p>
       {{/if}}
     {{/each}}
   </ApiIndex>

app/templates/class-index.hbs

@@ -27,7 +27,7 @@
       @isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
     />
   </EsSidebar>
-  <section class="content">
+  <section class="content-wrapper">
     {{outlet}}
   </section>
 </div>

app/templates/project-version.hbs

@@ -69,31 +69,26 @@
     <ImportExample @item={{@model.name}} @package={{this.module}} />
   {{/if}}
   <p class="description">{{html-safe @model.description}}</p>
-
-  {{#if (or @model.methods @model.properties @model.events)}}
+  <hr>
+  {{#if @model.methods}}
+  <h2>Methods</h2>
+  <Methods @model={{@model}} @filterData={{this.filterData}}/>
+  {{/if}}
+  {{#if @model.properties}}
+  <h2>Properties</h2>
+  <Properties @model={{@model}} @filterData={{this.filterData}}/>
+  {{/if}}
+  {{#if @model.events}}
+  <h2>Events</h2>
+  <Events @model={{@model}} @filterData={{this.filterData}}/>
+  {{/if}}
+</article>
+<div class="on-this-page-wrapper">
+    <div class="on-this-page-wrapper-header">On this page</div>
+    <hr>
+{{#if (or @model.methods @model.properties @model.events)}}
     <div class="tabbed-layout">
-      <nav class="tabbed-layout__menu">
-        <LinkTo @route={{concat this.parentName ".index" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".index"}} data-test-tab="index">
-          <span>Index</span>
-        </LinkTo>
-        {{#if @model.methods}}
-          <LinkTo @route={{concat this.parentName ".methods" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".methods"}} data-test-tab="methods">
-            <span>Methods</span>
-          </LinkTo>
-        {{/if}}
-        {{#if @model.properties}}
-          <LinkTo @route={{concat this.parentName ".properties" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".properties"}} data-test-tab="properties">
-            <span>Properties</span>
-          </LinkTo>
-        {{/if}}
-        {{#if @model.events}}
-          <LinkTo @route={{concat this.parentName ".events" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".events"}} data-test-tab="events">
-            <span>Events</span>
-          </LinkTo>
-        {{/if}}
-      </nav>
-      <section>
-        Show:
+      <section class="access-checkbox-list">
         <label class="access-checkbox">
           <input id="inherited-toggle"
                  data-test-checkbox="inherited"
@@ -128,8 +123,7 @@
         </label>
       </section>
       <hr>
-      {{outlet}}
     </div>
+    {{outlet}}
   {{/if}}
-
-</article>
+</div>