Skip to content

Commit 5aa9ea8

Browse files
MinThaMieMinThaMie
committed
Make styling work, remove ember-anchor + updateAnchor implementation
1 parent 54db485 commit 5aa9ea8

File tree

8 files changed

+41
-91
lines changed

8 files changed

+41
-91
lines changed

‎app/components/class-field-description.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<section class='{{@type}}'>
2-
<h3 data-anchor='{{@field.name}}'>
2+
<h3 id='{{@field.name}}'>
33
<span class='{{@type}}-name'>{{@field.name}}</span>
44
{{#if @field.params}}
55
<span class='args'>
@@ -16,7 +16,7 @@
1616
<span class='access'>deprecated</span>
1717
{{/if}}
1818
{{!-- TODO: Fix this link for a11y --}}
19-
<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 --}}>
19+
<a class='class-field-description--link' href="#{{@field.name}}" role='link'>
2020
{{svg-jar 'link' width='20px' height='20px'}}
2121
</a>
2222
</h3>

‎app/components/class-field-description.js‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,4 @@ export default class ClassFieldDescription extends Component {
1212
this.args.field.class
1313
);
1414
}
15-
16-
/**
17-
* Callback for updating the anchor with the field name that was clicked by a user.
18-
*
19-
* @method updateAnchor
20-
* @method fieldName String The name representing the field that was clicked.
21-
*/
22-
@action
23-
updateAnchor(fieldName) {
24-
this.args.updateAnchor?.(fieldName);
25-
}
2615
}

‎app/components/ember-anchor.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎app/styles/app.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,19 @@ dd {
129129
color: var(--color-gray-600);
130130
}
131131

132+
.on-this-page-wrapper .access-checkbox-list {
133+
display: flex;
134+
flex-direction: column;
135+
}
136+
137+
.on-this-page-wrapper .api-index-filter {
138+
margin-top: var(--spacing-2)
139+
}
140+
141+
.on-this-page-wrapper ul {
142+
margin-top: 0;
143+
}
144+
132145
.whoops {
133146
display: flex;
134147
justify-content: center;

‎app/templates/class-index.hbs‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
22
<ApiIndex @itemData={{filteredModel}} @classNames="api__index__content" as |sectionData|>
33
{{#each sectionData.sections as |section|}}
4-
<h3 class="api-index-section-title">{{section.title}}</h3>
54
{{#if section.items}}
5+
<h3 class="api-index-section-title">{{section.title}}</h3>
66
<ul class="{{section.class}}">
77
{{#each section.items as |item|}}
88
<li data-test-item={{item.name}}>
9-
<LinkTo
10-
@route="{{this.parentName}}{{section.routeSuffix}}"
11-
@models={{array
12-
@model.project.id
13-
@model.projectVersion.compactVersion
14-
@model.name item.name
15-
}}
16-
@query={{hash anchor=item.name}}
9+
<a
10+
href="#{{item.name}}"
1711
>
1812
{{item.name}}
19-
</LinkTo>
13+
</a>
2014
</li>
2115
{{/each}}
2216
</ul>
23-
{{else}}
24-
<p>No documented items</p>
2517
{{/if}}
2618
{{/each}}
2719
</ApiIndex>

‎app/templates/project-version.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
2828
/>
2929
</EsSidebar>
30-
<section class="content">
30+
<section class="content-wrapper">
3131
{{outlet}}
3232
</section>
3333
</div>

‎app/templates/project-version/classes/class.hbs‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -69,31 +69,26 @@
6969
<ImportExample @item={{@model.name}} @package={{this.module}} />
7070
{{/if}}
7171
<p class="description">{{html-safe @model.description}}</p>
72-
73-
{{#if (or @model.methods @model.properties @model.events)}}
72+
<hr>
73+
{{#if @model.methods}}
74+
<h2>Methods</h2>
75+
<Methods @model={{@model}} @filterData={{this.filterData}}/>
76+
{{/if}}
77+
{{#if @model.properties}}
78+
<h2>Properties</h2>
79+
<Properties @model={{@model}} @filterData={{this.filterData}}/>
80+
{{/if}}
81+
{{#if @model.events}}
82+
<h2>Events</h2>
83+
<Events @model={{@model}} @filterData={{this.filterData}}/>
84+
{{/if}}
85+
</article>
86+
<div class="on-this-page-wrapper">
87+
<div class="on-this-page-wrapper-header">On this page</div>
88+
<hr>
89+
{{#if (or @model.methods @model.properties @model.events)}}
7490
<div class="tabbed-layout">
75-
<nav class="tabbed-layout__menu">
76-
<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">
77-
<span>Index</span>
78-
</LinkTo>
79-
{{#if @model.methods}}
80-
<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">
81-
<span>Methods</span>
82-
</LinkTo>
83-
{{/if}}
84-
{{#if @model.properties}}
85-
<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">
86-
<span>Properties</span>
87-
</LinkTo>
88-
{{/if}}
89-
{{#if @model.events}}
90-
<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">
91-
<span>Events</span>
92-
</LinkTo>
93-
{{/if}}
94-
</nav>
95-
<section>
96-
Show:
91+
<section class="access-checkbox-list">
9792
<label class="access-checkbox">
9893
<input id="inherited-toggle"
9994
data-test-checkbox="inherited"
@@ -128,8 +123,7 @@
128123
</label>
129124
</section>
130125
<hr>
131-
{{outlet}}
132126
</div>
127+
{{outlet}}
133128
{{/if}}
134-
135-
</article>
129+
</div>

‎app/utils/get-offset.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)