Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Central content + on-this-page styling #495

Merged
merged 1 commit into from
Jan 25, 2024
Merged

Central content + on-this-page styling #495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions addon/styles/addon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
@import 'well.css';
@import 'table-of-contents.css';
@import 'header-anchor';
@import 'central-content.css';
@import 'on-this-page.css';

/* Helpers */
@import 'helpers/index.css';
Expand Down
21 changes: 21 additions & 0 deletions addon/styles/central-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.content-wrapper {
display: grid;
gap: 3em;
grid-template-columns: minmax(20ch, 80ch) 16em;
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-4);
justify-content: center;
}

@media (max-width: 80em) {
.content-wrapper {
display: grid;
grid-template-columns: minmax(20ch, 80ch);
justify-content: center;
padding-bottom: var(--spacing-2);
}

.on-this-page-wrapper {
display: none;
}
}
24 changes: 24 additions & 0 deletions addon/styles/on-this-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.on-this-page-wrapper ul {
list-style: none;
padding: 0;
}

.on-this-page-wrapper ul li {
margin-bottom: var(--spacing-1);
}

.on-this-page-wrapper-header {
color: var(--color-gray-600);
margin-top: 0.6em;
}

.on-this-page-wrapper hr {
margin-top: 0;
display: none;
}

main .on-this-page-wrapper a {
text-decoration: none;
color: var(--color-text);
background: none;
}
54 changes: 54 additions & 0 deletions docs/concepts/central-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Central content

In our ecosystem we have a sidebar and the central content. This content includes the actual content and an [on this page menu](on-this-page) if there is one. The content should be centered in the container that it's place in. We use the `content-wrapper` class to indicate this structure. The [on this page menu](on-this-page) will dissappear at `80em`.

```html
<div class="content-wrapper">
<div id="article_1">
<div class="article-title">
<h1>
Introduction
</h1>
</div>
<hr>
<div><p>This section of the Guides describes the essential features of EmberData, a powerful set of tools for formatting requests, normalizing responses, and efficiently managing a local cache of data.</p>
<p>Ember.js itself works with any type of back end: REST, JSON:API, GraphQL, or anything else.</p></div>
</div>
<div class="on-this-page-wrapper">
<div class="on-this-page-wrapper-header">On this page</div>
<hr>
<ul>
<li>
<a href="#toc_what-are-emberdata-models">What are EmberData models?</a>
</li>
<li>
<a href="#toc_emberdata-flexibility">EmberData flexibility</a>
</li>
<li>
<a href="#toc_the-store-and-a-single-source-of-truth">The Store and a Single Source of Truth</a>
</li>
<li>
<a href="#toc_injecting-the-store">Injecting the store</a>
</li>
<li>
<a href="#toc_models">Models</a>
</li>
<li>
<a href="#toc_records">Records</a>
</li>
<li>
<a href="#toc_adapter">Adapter</a>
</li>
<li>
<a href="#toc_caching">Caching</a>
</li>
<li>
<a href="#toc_architecture-overview">Architecture Overview</a>
</li>
</ul>
</div>
</div>
```



39 changes: 39 additions & 0 deletions docs/concepts/on-this-page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# On This Page

To allow the users easy and quick access to all the content on the page we provide styling for an `on this page` list, using the `on-this-page-wrapper` class will make sure that the styling of the links is good, and also that it disappears at `80em` to keep the page responsive. This concept should be used within the [central-content](central-content) concept.

```html
<div class="on-this-page-wrapper">
<div class="on-this-page-wrapper-header">On this page</div>
<hr>
<ul>
<li>
<a href="#toc_what-are-emberdata-models">What are EmberData models?</a>
</li>
<li>
<a href="#toc_emberdata-flexibility">EmberData flexibility</a>
</li>
<li>
<a href="#toc_the-store-and-a-single-source-of-truth">The Store and a Single Source of Truth</a>
</li>
<li>
<a href="#toc_injecting-the-store">Injecting the store</a>
</li>
<li>
<a href="#toc_models">Models</a>
</li>
<li>
<a href="#toc_records">Records</a>
</li>
<li>
<a href="#toc_adapter">Adapter</a>
</li>
<li>
<a href="#toc_caching">Caching</a>
</li>
<li>
<a href="#toc_architecture-overview">Architecture Overview</a>
</li>
</ul>
</div>
```
Loading