Skip to content

Commit f023eeb

Browse files
ijlee2ijlee2
authored
Merge pull request #83 from ember-learn/improve-semantics-and-responsiveness
Improved mobile responsiveness
2 parents 44f9f63 + 5cd5511 commit f023eeb

21 files changed

+626
-180
lines changed

‎app/components/code-snippet/template.hbs renamed to ‎app/components/code-snippet.hbs

File renamed without changes.

‎app/components/guide-section.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.title-container {
2+
align-items: center;
3+
background-color: #1C304A;
4+
display: grid;
5+
grid-gap: 0 1rem;
6+
grid-template-areas:
7+
"permalink title";
8+
grid-template-columns: auto 1fr;
9+
grid-template-rows: auto;
10+
margin-left: -2rem;
11+
padding: 1rem 2rem;
12+
width: fit-content;
13+
width: -moz-fit-content; /* Firefox */
14+
}
15+
16+
.title {
17+
color: #F1F1F1;
18+
grid-area: title;
19+
word-break: break-word;
20+
}
21+
22+
.permalink {
23+
color: #C1C1C1;
24+
grid-area: permalink;
25+
text-decoration: none;
26+
}
27+
28+
.subsection-container {
29+
margin-top: 2rem;
30+
}
31+
32+
.subsection-container ~ .subsection-container {
33+
margin-top: 3rem;
34+
}

‎app/components/guide-section.hbs

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{{#let
2+
@section.id
3+
(t (concat @section.id ".title"))
4+
as |sectionId sectionTitle|
5+
}}
6+
<section
7+
aria-labelledby={{sectionId}}
8+
data-test-section={{sectionTitle}}
9+
>
10+
<div local-class="title-container">
11+
<h2
12+
data-test-field="Section Title"
13+
id={{sectionId}}
14+
local-class="title"
15+
>
16+
{{sectionTitle}}
17+
</h2>
18+
19+
<a
20+
href="#{{sectionId}}"
21+
local-class="permalink"
22+
title={{sectionTitle}}
23+
>
24+
{{t "component.guide-section.section"}}
25+
</a>
26+
</div>
27+
28+
{{#each @section.subsections as |subsection|}}
29+
<div local-class="subsection-container">
30+
<GuideSection::Subsection
31+
@sectionId={{sectionId}}
32+
@subsection={{subsection}}
33+
/>
34+
</div>
35+
{{/each}}
36+
</section>
37+
{{/let}}

‎app/components/guide-section/subsection.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* Title */
2+
.title-container {
3+
align-items: center;
4+
border-bottom: 1px solid #E04E39;
5+
display: grid;
6+
grid-gap: 0 1rem;
7+
grid-template-areas:
8+
"permalink title";
9+
grid-template-columns: auto 1fr;
10+
grid-template-rows: auto;
11+
}
12+
13+
.title {
14+
grid-area: title;
15+
word-break: break-word;
16+
}
17+
18+
.permalink {
19+
grid-area: permalink;
20+
text-decoration: none;
21+
}
22+
23+
.description {
24+
margin-top: 0.5rem;
25+
}
26+
27+
/* Code examples */
28+
.code-examples-container {
29+
display: grid;
30+
grid-gap: 1rem 0;
31+
grid-template-areas:
32+
"ember-classic"
33+
"ember-octane";
34+
grid-template-columns: 1fr;
35+
grid-template-rows: auto auto;
36+
margin-top: 1.75rem;
37+
}
38+
39+
.ember-classic {
40+
grid-area: ember-classic;
41+
overflow-x: auto;
42+
width: 100%;
43+
}
44+
45+
.ember-octane {
46+
grid-area: ember-octane;
47+
overflow-x: auto;
48+
width: 100%;
49+
}
50+
51+
.code-examples-container[data-container-query-wide] {
52+
grid-gap: 0 2.5rem;
53+
grid-template-areas:
54+
"ember-classic ember-octane";
55+
grid-template-columns: 1fr 1fr;
56+
grid-template-rows: auto;
57+
}
58+
59+
/* Edit link */
60+
.edit-link-container {
61+
display: flex;
62+
justify-content: flex-end;
63+
margin-top: 1rem;
64+
}

‎app/components/guide-section/subsection/template.hbs renamed to ‎app/components/guide-section/subsection.hbs

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,47 @@
55
as |subsectionId subsectionTitle subsectionDescription|
66
}}
77
<section
8-
data-test-subsection={{subsectionTitle}}
98
aria-labelledby="{{@sectionId}}__{{subsectionId}}"
9+
data-test-subsection={{subsectionTitle}}
1010
>
11-
<h3
12-
data-test-field="Subsection Title"
13-
id="{{@sectionId}}__{{subsectionId}}"
14-
>
15-
<a href="#{{@sectionId}}__{{subsectionId}}" title={{subsectionTitle}} class="permalink">
16-
{{t "component.guide-section.section"}}
17-
</a>
18-
{{subsectionTitle}}
11+
<div local-class="title-container">
12+
<h3
13+
data-test-field="Subsection Title"
14+
id="{{@sectionId}}__{{subsectionId}}"
15+
local-class="title"
16+
>
17+
{{subsectionTitle}}
18+
</h3>
19+
1920
<a
20-
class="edit-translation-link"
21-
data-test-link="Edit Translation"
22-
href="https://github.com/ember-learn/ember-octane-vs-classic-cheat-sheet/edit/main/translations/{{@sectionId}}/{{subsectionId}}/{{this.intl.locale}}.yaml"
23-
rel="noopener noreferrer"
24-
target="_blank"
21+
href="#{{@sectionId}}__{{subsectionId}}"
22+
local-class="permalink"
23+
title={{subsectionTitle}}
2524
>
26-
{{t "component.guide-section.edit-translation-text"}}
25+
{{t "component.guide-section.section"}}
2726
</a>
28-
</h3>
27+
</div>
2928

30-
<p data-test-field="Subsection Description">
29+
<p
30+
data-test-field="Subsection Description"
31+
local-class="description"
32+
>
3133
{{subsectionDescription}}
3234
</p>
3335

34-
<div class="grid">
35-
<div data-test-ember-classic>
36-
<h4>{{t "component.guide-section.subsection.classic"}}</h4>
36+
<ContainerQuery
37+
@features={{hash
38+
wide=(cq-width min=900)
39+
}}
40+
local-class="code-examples-container"
41+
>
42+
<div
43+
data-test-ember-classic
44+
local-class="ember-classic"
45+
>
46+
<h4 local-class="subtitle">
47+
{{t "component.guide-section.subsection.classic"}}
48+
</h4>
3749

3850
{{#each @subsection.classicFiles as |file|}}
3951
<CodeSnippet
@@ -48,8 +60,13 @@
4860
{{/if}}
4961
</div>
5062

51-
<div data-test-ember-octane>
52-
<h4>{{t "component.guide-section.subsection.octane"}}</h4>
63+
<div
64+
data-test-ember-octane
65+
local-class="ember-octane"
66+
>
67+
<h4 local-class="subtitle">
68+
{{t "component.guide-section.subsection.octane"}}
69+
</h4>
5370

5471
{{#each @subsection.octaneFiles as |file|}}
5572
<CodeSnippet
@@ -63,6 +80,18 @@
6380
</p>
6481
{{/if}}
6582
</div>
83+
</ContainerQuery>
84+
85+
<div local-class="edit-link-container">
86+
<a
87+
data-test-link="Edit Translation"
88+
href="https://github.com/ember-learn/ember-octane-vs-classic-cheat-sheet/edit/main/translations/{{@sectionId}}/{{subsectionId}}/{{this.intl.locale}}.yaml"
89+
local-class="edit-link"
90+
rel="noopener noreferrer"
91+
target="_blank"
92+
>
93+
{{t "component.guide-section.edit-translation-text"}}
94+
</a>
6695
</div>
6796
</section>
6897
{{/let}}

‎app/components/guide-section/subsection/component.js renamed to ‎app/components/guide-section/subsection.js

File renamed without changes.

‎app/components/guide-section/template.hbs

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

‎app/components/locale-menu.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.select {
7+
margin: 0.5rem 0 0 0;
8+
padding: 0.25rem 0.5rem;
9+
}
10+
11+
.container[data-container-query-wide] {
12+
align-items: center;
13+
flex-direction: row;
14+
}
15+
16+
.container[data-container-query-wide] .select {
17+
margin: 0 0 0 0.5rem;
18+
}

‎app/components/locale-menu.hbs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<ContainerQuery
2+
@features={{hash
3+
wide=(cq-width min=480)
4+
}}
5+
local-class="container"
6+
>
7+
<label for="locale-menu">
8+
{{t "component.locale-menu.locale-select.label"}}
9+
</label>
10+
11+
<select
12+
data-test-field="Locale"
13+
id="locale-menu"
14+
local-class="select"
15+
{{on "input" this.updateLocale}}
16+
>
17+
<option value="" disabled selected>
18+
{{t "component.locale-menu.locale-select.placeholder"}}
19+
</option>
20+
21+
{{#each this.locale.menuOptions as |menuOption|}}
22+
<option data-test-option value={{menuOption.value}}>
23+
{{menuOption.label}}
24+
</option>
25+
{{/each}}
26+
</select>
27+
</ContainerQuery>

‎app/components/locale-menu/component.js renamed to ‎app/components/locale-menu.js

File renamed without changes.

0 commit comments

Comments
 (0)