Skip to content

Commit e32c1fa

Browse files
codehagcodehag
authored
Merge pull request #101 from tc39/new-featurelist
new feature list
2 parents 26c2073 + 5882283 commit e32c1fa

File tree

10 files changed

+221
-100
lines changed

10 files changed

+221
-100
lines changed

‎_data/stage3.yml

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
});
3535
});
3636
}
37+
resources:
38+
- https://github.com/tc39/proposal-dynamic-import
3739

3840
- title: Legacy RegExp features in JavaScript
3941
description: This is a specification draft for the legacy (deprecated) RegExp features in JavaScript, i.e., static properties of the constructor like RegExp.$1 as well as the RegExp.prototype.compile method.

‎_includes/intro.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<section class="intro">
2-
<div class="g-row">
1+
<section >
2+
<div class="g-row intro">
33
<div class="g-col-4">
44
<h2 class="section-headline">TC39</h2>
55
<p>

‎_includes/proposals.html

+57-54
Original file line numberDiff line numberDiff line change
@@ -9,70 +9,73 @@ <h3>Stage 3</h3>
99
</i>
1010
{% for proposal in site.data.stage3 %}
1111
<section class="featurelist__item">
12-
<header class="featurelist__item__intro" tabindex="0">
13-
<h4>{{ proposal.title }}</h4>
14-
{% if proposal.description %}
15-
<p>{{ proposal.description }}</p>
16-
{% endif %}
17-
</header>
18-
<section class="featurelist__item__info" aria-hidden="true" tabindex="-1">
19-
<div>
20-
<div>
21-
<h5>Status</h5>
22-
<ul class="featurelist__item__status">
23-
<li class="featurelist__item__owner">
24-
<p>Author(s)</p>
25-
{% if proposal.authors | size %}
26-
<p>{{ proposal.authors | join: ", " }}</p>
27-
{% else %}
28-
<p>–</p>
29-
{% endif %}
30-
</li>
31-
<li class="featurelist__item__owner">
32-
<p>Champion(s)</p>
33-
{% if proposal.champions | size %}
34-
<p>{{ proposal.champions | join: ", " }}</p>
35-
{% else %}
36-
<p>–</p>
12+
<section class="">
13+
<header class="featurelist__item__intro" tabindex="0">
14+
{% for url in proposal.resources %}
15+
<section class="g-row">
16+
<h4 class="featurelist__item__title flex-grow">
17+
<a href="{{ url }}">{{ proposal.title }}</a>
18+
</h4>
19+
{% endfor %}
20+
<section class="featurelist__item__tags flex-shrink" tabindex="-1">
21+
<ul class="featurelist__item__status">
22+
{% if proposal.presented | size %}
23+
{% for presentation in proposal.presented %}
24+
<li class="featurelist__item__presented">
25+
<a href="{{ presentation.url }}">{{ presentation.date }}</a>
26+
</li>
27+
{% endfor %}
3728
{% endif %}
38-
</li>
39-
<li class="featurelist__item__tests">
40-
<p>Test(s)</p>
4129
{% if proposal.tests | size %}
42-
<p>{% for url in proposal.tests %}<a href="{{ url }}">{{ url }}</a>{% endfor %}</p>
43-
{% else %}
44-
<p>–</p>
30+
{% for url in proposal.tests %}
31+
<li class="featurelist__item__tests">
32+
<a href="{{ url }}">Tests</a>
33+
</li>
34+
{% endfor %}
4535
{% endif %}
46-
</li>
47-
<li class="featurelist__item__spec">
48-
<p>Specification</p>
4936
{% if proposal.specification %}
50-
<a href="{{ proposal.specification }}">{{ proposal.specification }}</a>
51-
{% else %}
52-
<p>–</p>
37+
<li class="featurelist__item__spec">
38+
<a href="{{ proposal.specification }}">Specification</a>
39+
</li>
5340
{% endif %}
54-
</li>
55-
</ul>
56-
</div>
57-
{% if proposal.example %}
41+
</ul>
42+
</section>
43+
</section>
44+
<section class="featurelist__item__author">
45+
{% if proposal.authors | size %}
46+
Author(s):
47+
{{ proposal.authors | join: ", " }}
48+
{% endif %}
49+
{% if proposal.champions | size %}
50+
|
51+
Champion(s):
52+
{{ proposal.champions | join: ", " }}
53+
{% else %}
54+
{% endif %}
55+
</section>
56+
{% if proposal.description %}
57+
<section class="featurelist__item__desc">{{ proposal.description }}</section>
58+
{% endif %}
59+
{% if proposal.example %}
60+
<div class="featurelist__item__example">Show Example</div>
61+
{% endif %}
62+
<section class="featurelist__item__info" tabindex="-1">
63+
{% if proposal.example %}
5864
<div>
59-
<h5>Example</h5>
60-
<pre><code class="js">{{ proposal.example }}</code></pre>
65+
<div>
66+
<pre><code class="js">{{ proposal.example }}</code></pre>
67+
</div>
6168
</div>
62-
{% endif %}
63-
</div>
64-
{% if proposal.resources | size %}
65-
<h5>Developer Resources</h5>
66-
<ul class="featurelist__item__ressources">
67-
{% for url in proposal.resources %}
68-
<li>
69-
<a href="{{ url }}">{{ url }}</a>
70-
</li>
71-
{% endfor %}
72-
</ul>
7369
{% endif %}
70+
</section>
71+
</header>
7472
</section>
7573
</section>
7674
{% endfor %}
7775
</div>
76+
<section class="featurelist__more">
77+
<a href="https://github.com/tc39/proposals">
78+
See more proposals
79+
</a>
80+
</section>
7881
</section>

‎_layouts/default.html

-6
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ <h1 class="page-title">Specifying JavaScript.</h1>
2323
{% include intro.html %}
2424
{% include proposals.html %}
2525
</section>
26-
<section class="footer">
27-
<span class="footer-item">
28-
<a href="https://github.com/tc39" class="btn menu-btn">GitHub</a>
29-
</span>
30-
31-
</section>
3226
</main>
3327

3428
<div class="popup">

‎_sass/_content.scss

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
@media (min-width: $bp-tablet) {
2828
padding: 130px 0;
2929

30+
.section-headline {
31+
border-bottom: none;
32+
}
33+
3034
h3 {
3135
margin-left: -40px;
3236
margin-right: -40px;

‎_sass/_featurelist.scss

+124-32
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,108 @@
11
.featurelist {
22
&__item {
3+
background-color: white;
34
border-bottom: 1px solid $color-spacer;
5+
font-size: 0.9em;
46
margin-bottom: 1.125rem;
7+
padding: 0 1rem 0 1rem;
58
&__intro {
69
cursor: pointer;
7-
h4::before {
8-
background: url(../img/menu-down.svg) no-repeat 50%;
9-
background-size: 1.5rem;
10-
content: "";
11-
display: block;
12-
float: right;
13-
height: 1.5rem;
14-
margin-left: 0.5rem;
15-
transition: transform 600ms ease;
16-
width: 1.5rem;
17-
.open & {
18-
transform: rotateX(180deg);
19-
}
20-
[dir="rtl"] & {
21-
float: left;
22-
margin-left: 0;
23-
margin-right: 0.5rem;
24-
}
25-
}
2610
}
2711
&__info {
2812
max-height: 0;
2913
overflow: hidden;
3014
transition: max-height 600ms ease;
3115
}
16+
&__ressources {
17+
a {
18+
word-break: break-all;
19+
}
20+
}
3221
&__status {
22+
clear: both;
23+
float: left;
24+
font-size: 0.8em;
3325
list-style: none;
26+
margin-top: 0;
3427
padding: 0;
35-
li {
36-
align-items: flex-start;
37-
display: flex;
38-
flex-wrap: wrap;
39-
justify-content: space-between;
40-
padding: 0.5rem;
41-
&:nth-of-type(odd) {
42-
background: #eee;
43-
}
44-
}
4528
a {
4629
word-break: break-all;
4730
}
31+
li {
32+
display: inline-block;
33+
margin-top: 0.5rem;
34+
opacity: 1;
35+
padding-left: 0.5rem;
36+
padding-right: 0.5rem;
37+
&:hover {
38+
background-color: transparent;
39+
}
40+
a {
41+
color: white;
42+
text-decoration: none;
43+
}
44+
}
4845
p {
4946
margin: 0;
5047
}
48+
@media (min-width: $bp-tablet) {
49+
clear: none;
50+
float: right;
51+
margin-top: 0.5rem;
52+
padding: 0 5px;
53+
}
5154
}
52-
&__ressources {
53-
a {
54-
word-break: break-all;
55+
h4 {
56+
display: inline-block;
57+
float: left;
58+
font-size: 1.6em;
59+
margin-bottom: 0.5em;
60+
margin-top: 1em;
61+
padding-bottom: 0;
62+
padding-top: 0;
63+
word-wrap: anywhere;
64+
a {
65+
text-decoration: none;
66+
}
67+
}
68+
&__tests {
69+
background-color: $tag-tests;
70+
border: 2px solid $tag-tests;
71+
border-radius: 10px;
72+
&:hover {
73+
a {
74+
color: $tag-tests;
75+
}
76+
}
77+
}
78+
&__spec {
79+
background-color: $tag-spec;
80+
border: 2px solid $tag-spec;
81+
border-radius: 10px;
82+
&:hover {
83+
a {
84+
color: $tag-spec;
85+
}
86+
}
87+
}
88+
&__presented {
89+
background-color: $tag-presented;
90+
border: 2px solid $tag-presented;
91+
border-radius: 10px;
92+
&:hover {
93+
a {
94+
color: $tag-presented;
95+
}
96+
}
97+
}
98+
&__impl {
99+
background-color: $tag-presented;
100+
border: 2px solid $tag-presented;
101+
border-radius: 10px;
102+
&:hover {
103+
a {
104+
color: $tag-tests;
105+
}
55106
}
56107
}
57108
.no-js &:focus-within &__info {
@@ -60,11 +111,52 @@
60111
.no-js &:focus-within &__intro h4::after {
61112
transform: rotateX(180deg);
62113
}
114+
&__desc {
115+
clear: both;
116+
display: block;
117+
margin: 1em 0 1em 0;
118+
padding: 0;
119+
}
120+
&__author {
121+
clear: both;
122+
color: grey;
123+
font-weight: 800;
124+
margin: 0;
125+
padding-top: 0;
126+
}
127+
&__example {
128+
display: inline-block;
129+
font-weight: 800;
130+
margin-bottom: 1rem;
131+
text-decoration: underline;
132+
&::before {
133+
background: url(../img/menu-down.svg) no-repeat 20%;
134+
background-size: 1.2rem;
135+
content: "";
136+
display: block;
137+
float: right;
138+
height: 1.2em;
139+
margin-left: 0.5rem;
140+
transition: transform 600ms ease;
141+
width: 1.2rem;
142+
.open & {
143+
transform: rotateX(180deg);
144+
}
145+
[dir="rtl"] & {
146+
float: left;
147+
margin-left: 0;
148+
margin-right: 0.5rem;
149+
}
150+
}
151+
}
63152
}
64153
&__desc {
65154
display: block;
66155
font-size: 1.1em;
67156
margin-bottom: 4.5em;
68157
margin-top: 2em;
69158
}
159+
&__more {
160+
text-align: center;
161+
}
70162
}

‎_sass/_grid.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
1-
.g-row {
1+
.intro {
22
margin: 0 ($grid-gutter / -2) (2 * $grid-gutter);
33
[class*="g-col-"] {
44
padding: 0 $grid-gutter / 2;
55
}
6+
}
7+
.g-row {
68
@media (min-width: $bp-tablet) {
79
display: flex;
810
flex-direction: row;
11+
.flex-grow {
12+
flex-grow: 1;
13+
}
14+
.flex-shrink {
15+
flex-shrink: 1;
16+
}
17+
.g-col-2 {
18+
flex: 0 0 200px;
19+
}
920
.g-col-4 {
1021
flex: 0 0 percentage(4/12);
1122
}
1223
.g-col-8 {
1324
flex: 0 0 percentage(8/12);
1425
}
26+
.g-col-10 {
27+
flex: 0 0 percentage(10/12);
28+
flex-grow: 2;
29+
}
1530
}
1631
}

0 commit comments

Comments
 (0)