new feature list

tc39 · Feb 28, 2019 · a923c80 · a923c80
1 parent 5be87ba
commit a923c80
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 100 deletions.
diff --git a/_data/stage3.yml b/_data/stage3.yml
@@ -46,6 +46,8 @@
             });
         });
       }
+  resources:
+    - https://github.com/tc39/proposal-dynamic-import
 
 - title: Legacy RegExp features in JavaScript
   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.

diff --git a/_includes/intro.html b/_includes/intro.html
@@ -1,5 +1,5 @@
-<section class="intro">
-  <div class="g-row">
+<section >
+  <div class="g-row intro">
     <div class="g-col-4">
       <h2 class="section-headline">TC39</h2>
       <p>

diff --git a/_includes/proposals.html b/_includes/proposals.html
@@ -9,70 +9,73 @@ <h3>Stage 3</h3>
     </i>
     {% for proposal in site.data.stage3 %}
     <section class="featurelist__item">
-      <header class="featurelist__item__intro" tabindex="0">
-        <h4>{{ proposal.title }}</h4>
-        {% if proposal.description %}
-        <p>{{ proposal.description }}</p>
-        {% endif %}
-      </header>
-      <section class="featurelist__item__info" aria-hidden="true" tabindex="-1">
-        <div>
-          <div>
-            <h5>Status</h5>
-            <ul class="featurelist__item__status">
-              <li class="featurelist__item__owner">
-                <p>Author(s)</p>
-                {% if proposal.authors | size %}
-                <p>{{ proposal.authors | join: ", " }}</p>
-                {% else %}
-                <p>–</p>
-                {% endif %}
-              </li>
-              <li class="featurelist__item__owner">
-                <p>Champion(s)</p>
-                {% if proposal.champions | size %}
-                <p>{{ proposal.champions | join: ", " }}</p>
-                {% else %}
-                <p>–</p>
+      <section class="">
+        <header class="featurelist__item__intro" tabindex="0">
+          {% for url in proposal.resources %}
+          <section class="g-row">
+            <h4 class="featurelist__item__title flex-grow">
+              <a href="{{ url }}">{{ proposal.title }}</a>
+            </h4>
+            {% endfor %}
+            <section class="featurelist__item__tags flex-shrink" tabindex="-1">
+              <ul class="featurelist__item__status">
+                {% if proposal.presented | size %}
+                {% for presentation in proposal.presented %}
+                  <li class="featurelist__item__presented">
+                    <a href="{{ presentation.url }}">{{ presentation.date }}</a>
+                  </li>
+                {% endfor %}
                 {% endif %}
-              </li>
-              <li class="featurelist__item__tests">
-                <p>Test(s)</p>
                 {% if proposal.tests | size %}
-                <p>{% for url in proposal.tests %}<a href="{{ url }}">{{ url }}</a>{% endfor %}</p>
-                {% else %}
-                <p>–</p>
+                {% for url in proposal.tests %}
+                  <li class="featurelist__item__tests">
+                    <a href="{{ url }}">Tests</a>
+                  </li>
+                {% endfor %}
                 {% endif %}
-              </li>
-              <li class="featurelist__item__spec">
-                <p>Specification</p>
                 {% if proposal.specification %}
-                <a href="{{ proposal.specification }}">{{ proposal.specification }}</a>
-                {% else %}
-                <p>–</p>
+                <li class="featurelist__item__spec">
+                  <a href="{{ proposal.specification }}">Specification</a>
+                </li>
                 {% endif %}
-              </li>
-            </ul>
-          </div>
-          {% if proposal.example %}
+              </ul>
+            </section>
+          </section>
+          <section class="featurelist__item__author">
+          {% if proposal.authors | size %}
+          Author(s):
+          {{ proposal.authors | join: ", " }}
+          {% endif %}
+          {% if proposal.champions | size %}
+          |
+          Champion(s):
+          {{ proposal.champions | join: ", " }}
+          {% else %}
+          {% endif %}
+          </section>
+          {% if proposal.description %}
+          <section class="featurelist__item__desc">{{ proposal.description }}</section>
+          {% endif %}
+        {% if proposal.example %}
+        <div class="featurelist__item__example">Show Example</div>
+          {% endif %}
+        <section class="featurelist__item__info" tabindex="-1">
+        {% if proposal.example %}
           <div>
-            <h5>Example</h5>
-            <pre><code class="js">{{ proposal.example }}</code></pre>
+            <div>
+              <pre><code class="js">{{ proposal.example }}</code></pre>
+            </div>
           </div>
-          {% endif %}
-        </div>
-        {% if proposal.resources | size %}
-        <h5>Developer Resources</h5>
-        <ul class="featurelist__item__ressources">
-          {% for url in proposal.resources %}
-          <li>
-            <a href="{{ url }}">{{ url }}</a>
-          </li>
-          {% endfor %}
-        </ul>
         {% endif %}
+        </section>
+        </header>
       </section>
     </section>
     {% endfor %}
   </div>
+  <section class="featurelist__more">
+    <a href="https://github.com/tc39/proposals">
+      See more proposals
+    </a>
+  </section>
 </section>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -23,12 +23,6 @@ <h1 class="page-title">Specifying JavaScript.</h1>
       {% include intro.html %}
       {% include proposals.html %}
     </section>
-    <section class="footer">
-      <span class="footer-item">
-        <a href="https://github.com/tc39" class="btn menu-btn">GitHub</a>
-      </span>
-
-    </section>
     </main>
 
     <div class="popup">

diff --git a/_sass/_content.scss b/_sass/_content.scss
@@ -27,6 +27,10 @@
   @media (min-width: $bp-tablet) {
     padding: 130px 0;
 
+  .section-headline {
+    border-bottom: none;
+  }
+
     h3 {
       margin-left: -40px;
       margin-right: -40px;

diff --git a/_sass/_featurelist.scss b/_sass/_featurelist.scss
@@ -1,57 +1,75 @@
 .featurelist {
   &__item {
+    background-color: white;
     border-bottom: 1px solid $color-spacer;
+    font-size: 0.9em;
     margin-bottom: 1.125rem;
+    padding: 0 1rem 0 1rem;
     &__intro {
       cursor: pointer;
-      h4::before {
-        background: url(../img/menu-down.svg) no-repeat 50%;
-        background-size: 1.5rem;
-        content: "";
-        display: block;
-        float: right;
-        height: 1.5rem;
-        margin-left: 0.5rem;
-        transition: transform 600ms ease;
-        width: 1.5rem;
-        .open & {
-          transform: rotateX(180deg);
-        }
-        [dir="rtl"] & {
-          float: left;
-          margin-left: 0;
-          margin-right: 0.5rem;
-        }
-      }
     }
     &__info {
       max-height: 0;
       overflow: hidden;
       transition: max-height 600ms ease;
     }
+    &__tests {
+      background-color: $tag-tests;
+      border: 2px solid $tag-tests;
+      border-radius: 10px;
+    }
+    &__spec {
+      background-color: $tag-spec;
+      border: 2px solid $tag-spec;
+      border-radius: 10px;
+    }
+    &__presented {
+      background-color: $tag-presented;
+      border: 2px solid $tag-presented;
+      border-radius: 10px;
+    }
+    &__impl {
+      background-color: $tag-presented;
+      border: 2px solid $tag-presented;
+      border-radius: 10px;
+    }
+    &__ressources {
+      a {
+        word-break: break-all;
+      }
+    }
     &__status {
+      clear: both;
+      float: left;
+      font-size: 0.8em;
       list-style: none;
+      margin-top: 0;
       padding: 0;
-      li {
-        align-items: flex-start;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 0.5rem;
-        &:nth-of-type(odd) {
-          background: #eee;
-        }
-      }
       a {
         word-break: break-all;
       }
+      li {
+        display: inline-block;
+        margin-top: 0.5rem;
+        opacity: 0.5;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        &:hover {
+          opacity: 1;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+        }
+      }
       p {
         margin: 0;
       }
-    }
-    &__ressources {
-      a {
-        word-break: break-all;
+      @media (min-width: $bp-tablet) {
+        clear: none;
+        float: right;
+        margin-top: 0.5rem;
+        padding: 0 5px;
       }
     }
     .no-js &:focus-within &__info {
@@ -60,11 +78,66 @@
     .no-js &:focus-within &__intro h4::after {
       transform: rotateX(180deg);
     }
+    &__desc {
+      clear: both;
+      display: block;
+      margin: 1em 0 1em 0;
+      padding: 0;
+    }
+    &__authors {
+      display: block;
+      font-size: 1.1em;
+    }
+    &__author {
+      clear: both;
+      color: grey;
+      margin: 0;
+      padding-top: 0;
+    }
+    &__example {
+      display: inline-block;
+      margin-bottom: 1rem;
+      &::before {
+        background: url(../img/menu-down.svg) no-repeat 20%;
+        background-size: 1.2rem;
+        content: "";
+        display: block;
+        float: right;
+        height: 1.2em;
+        margin-left: 0.5rem;
+        transition: transform 600ms ease;
+        width: 1.2rem;
+        .open & {
+          transform: rotateX(180deg);
+        }
+        [dir="rtl"] & {
+          float: left;
+          margin-left: 0;
+          margin-right: 0.5rem;
+        }
+      }
+    }
+    h4 {
+      display: inline-block;
+      float: left;
+      font-size: 1.6em;
+      margin-bottom: 0.5em;
+      margin-top: 1em;
+      padding-bottom: 0;
+      padding-top: 0;
+      word-wrap: anywhere;
+        a {
+          text-decoration: none;
+        }
+    }
   }
   &__desc {
     display: block;
     font-size: 1.1em;
     margin-bottom: 4.5em;
     margin-top: 2em;
   }
+  &__more {
+    text-align: center;
+  }
 }
diff --git a/_sass/_grid.scss b/_sass/_grid.scss
@@ -1,16 +1,31 @@
-.g-row {
+.intro {
   margin: 0 ($grid-gutter / -2) (2 * $grid-gutter);
   [class*="g-col-"] {
     padding: 0 $grid-gutter / 2;
   }
+}
+.g-row {
   @media (min-width: $bp-tablet) {
     display: flex;
     flex-direction: row;
+    .flex-grow {
+      flex-grow: 1;
+    }
+    .flex-shrink {
+      flex-shrink: 1;
+    }
+    .g-col-2 {
+      flex: 0 0 200px;
+    }
     .g-col-4 {
       flex: 0 0 percentage(4/12);
     }
     .g-col-8 {
       flex: 0 0 percentage(8/12);
     }
+    .g-col-10 {
+      flex: 0 0 percentage(10/12);
+      flex-grow: 2;
+    }
   }
 }
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -15,6 +15,7 @@ body {
 }
 
 .main {
+  background-color: $color-bg;
   margin: 0 auto;
   max-width: 1280px;
   padding: 0 ($grid-gutter / 2);