Skip to content

Commit

Permalink
Make styling work, remove ember-anchor + updateAnchor implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
MinThaMie authored and mansona committed Jul 11, 2024
1 parent 20bbf9a commit 9f021a6
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 92 deletions.
4 changes: 2 additions & 2 deletions app/components/class-field-description.hbs
Original file line number Diff line number Diff line change
@@ -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'>
Expand All @@ -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>
Expand Down
12 changes: 0 additions & 12 deletions app/components/class-field-description.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { inject as service } from '@ember/service';
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ClassFieldDescription extends Component {
@service
Expand All @@ -12,15 +11,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);
}
}
29 changes: 0 additions & 29 deletions app/components/ember-anchor.js

This file was deleted.

13 changes: 13 additions & 0 deletions app/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 4 additions & 12 deletions app/templates/class-index.hbs
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/templates/project-version.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
@isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
/>
</EsSidebar>
<section class="content">
<section class="content-wrapper">
{{outlet}}
</section>
</div>
48 changes: 21 additions & 27 deletions app/templates/project-version/classes/class.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -69,31 +69,26 @@
<ImportExample @item={{@model.name}} @package={{this.module}} />
{{/if}}
<p class="description"><MarkdownToHtml @markdown={{@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"
Expand Down Expand Up @@ -128,8 +123,7 @@
</label>
</section>
<hr>
{{outlet}}
</div>
{{outlet}}
{{/if}}

</article>
</div>
9 changes: 0 additions & 9 deletions app/utils/get-offset.js

This file was deleted.

0 comments on commit 9f021a6

Please sign in to comment.