Add intra page links

emberobserver · Jul 2, 2019 · ebfb843 · ebfb843
1 parent a92a5b1
commit ebfb843
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/app/styles/_addons_show.scss b/app/styles/_addons_show.scss
@@ -249,4 +249,9 @@
   .readme {
     @include readme-styles();
   }
+
+  .icon-link {
+    width: 0.6em;
+    height: 0.6em;
+  }
 }
diff --git a/app/templates/addons/show.hbs b/app/templates/addons/show.hbs
@@ -31,8 +31,11 @@
       <span>{{#link-to "addons.top"}}Ranks #{{addon.ranking}} of the top 100 addons!{{/link-to}}</span>
     {{/if}}
     {{score-detail addon=addon}}
-    <section class="categories">
-      <h4>Categories</h4>
+    <section id="categories" class="categories">
+      <h4>
+        Categories
+        <a href="#categories">{{svg-icon "link" title="Categories"}}</a>
+      </h4>
       <p>
         {{inline-category-list categories=addon.categories}}
         {{#unless addon.categories}}
@@ -42,7 +45,10 @@
     </section>
     {{#if hasGithubData}}
       <section class="repo-info test-github-data">
-        <h4>GitHub</h4>
+        <h4 id="githubStats">
+          GitHub
+          <a href="#githubStats">{{svg-icon "link" title="Github"}}</a>
+        </h4>
 
         {{#if addon.isTopStarred}}
           <small>TOP 10% STARRED</small>
@@ -66,7 +72,10 @@
     {{/if}}
 
     <section class="latest-review">
-      <h4>Review</h4>
+      <h4 id="review">
+        Review
+        <a href="#review">{{svg-icon "link" title="Review"}}</a>
+      </h4>
       {{#if latestReview}}
         {{#unless isLatestReviewForLatestVersion}}
           <em class="test-review-new-version-warning">{{svg-icon "new-releases"}} New versions of this addon have been released since this review was undertaken.</em>
@@ -78,7 +87,10 @@
     </section>
 
     <section class="addon-dependencies">
-      <h4>Dependencies</h4>
+      <h4 id="dependencies">
+        Dependencies
+        <a href="#dependencies">{{svg-icon "link" title="Dependencies"}}</a>
+      </h4>
       {{dependency-table addonVersion=latestVersion}}
     </section>
 

diff --git a/app/templates/components/svg-icons.hbs b/app/templates/components/svg-icons.hbs
@@ -1,6 +1,11 @@
 {{! template-lint-disable no-inline-styles}}
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
+    <symbol id="icon-link" viewBox="0 0 16 16">
+      <path d="M6.879 9.934c-0.208 0-0.416-0.079-0.575-0.238-1.486-1.486-1.486-3.905 0-5.392l3-3c0.72-0.72 1.678-1.117 2.696-1.117s1.976 0.397 2.696 1.117c1.486 1.487 1.486 3.905 0 5.392l-1.371 1.371c-0.317 0.317-0.832 0.317-1.149 0s-0.317-0.832 0-1.149l1.371-1.371c0.853-0.853 0.853-2.241 0-3.094-0.413-0.413-0.963-0.641-1.547-0.641s-1.134 0.228-1.547 0.641l-3 3c-0.853 0.853-0.853 2.241 0 3.094 0.317 0.317 0.317 0.832 0 1.149-0.159 0.159-0.367 0.238-0.575 0.238z"></path>
+      <path d="M4 15.813c-1.018 0-1.976-0.397-2.696-1.117-1.486-1.486-1.486-3.905 0-5.392l1.371-1.371c0.317-0.317 0.832-0.317 1.149 0s0.317 0.832 0 1.149l-1.371 1.371c-0.853 0.853-0.853 2.241 0 3.094 0.413 0.413 0.962 0.641 1.547 0.641s1.134-0.228 1.547-0.641l3-3c0.853-0.853 0.853-2.241 0-3.094-0.317-0.317-0.317-0.832 0-1.149s0.832-0.317 1.149 0c1.486 1.486 1.486 3.905 0 5.392l-3 3c-0.72 0.72-1.678 1.117-2.696 1.117z"></path>
+    </symbol>
+
     <symbol id="icon-google" viewBox="0 0 32 32">
 
       <path d="M16.319 13.713v5.487h9.075c-0.369 2.356-2.744 6.9-9.075 6.9-5.463 0-9.919-4.525-9.919-10.1s4.456-10.1 9.919-10.1c3.106 0 5.188 1.325 6.375 2.469l4.344-4.181c-2.788-2.612-6.4-4.188-10.719-4.188-8.844 0-16 7.156-16 16s7.156 16 16 16c9.231 0 15.363-6.494 15.363-15.631 0-1.050-0.113-1.85-0.25-2.65l-15.113-0.006z"></path>