From d20e0f2a191748e7072e3c91d5ce4d0bda3c5779 Mon Sep 17 00:00:00 2001
From: Emmanouil Konstantinidis <hello@manos.im>
Date: Wed, 8 Feb 2017 15:39:09 +0000
Subject: [PATCH] Section & Link Titles

---
 .../static/rest_framework/docs/css/base.css   | 19 ++++++++++++++-----
 .../rest_framework/docs/document.html         |  4 +++-
 .../templates/rest_framework/docs/link.html   | 12 ++++++++++--
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/rest_framework/static/rest_framework/docs/css/base.css b/rest_framework/static/rest_framework/docs/css/base.css
index a8e98a37b..ad19b1daf 100644
--- a/rest_framework/static/rest_framework/docs/css/base.css
+++ b/rest_framework/static/rest_framework/docs/css/base.css
@@ -186,21 +186,29 @@ body {
   padding: 0px;
 }
 
-.coredocs-section {
+.coredocs-section-title {
     margin-top: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid lightgrey;
 }
 
-.coredocs-section span {
+.coredocs-link-title a,
+.coredocs-section-title a {
   display: none;
 }
 
-.coredocs-section:hover span {
-  display: inline;
+.coredocs-link-title a,
+.coredocs-section-title a {
+  text-decoration: none;
 }
 
-.coredocs-section:last-child {
+.coredocs-link-title:hover a,
+.coredocs-section-title:hover a {
+  display: inline;
+  font-size: 20px;
+}
+
+.coredocs-section-title:last-child {
     margin-top: 0;
 }
 
@@ -269,4 +277,5 @@ body {
 .code-samples pre {
   margin-top: 20px;
 }
+
 /* @end Docs Content */
diff --git a/rest_framework/templates/rest_framework/docs/document.html b/rest_framework/templates/rest_framework/docs/document.html
index 9461ffd8f..22af83338 100644
--- a/rest_framework/templates/rest_framework/docs/document.html
+++ b/rest_framework/templates/rest_framework/docs/document.html
@@ -1,7 +1,9 @@
 {% load rest_framework %}
 
 {% for section_key, section in document.data.items %}
-    <h2 id="{{ section_key }}" class="coredocs-section">{{ section_key }} <span>#</span></h2>
+    <h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+</a></h2>
+
     {% for link_key, link in section.links.items %}
         {% include "rest_framework/docs/link.html" %}
     {% endfor %}
diff --git a/rest_framework/templates/rest_framework/docs/link.html b/rest_framework/templates/rest_framework/docs/link.html
index 51d35a65e..0476e3f8e 100644
--- a/rest_framework/templates/rest_framework/docs/link.html
+++ b/rest_framework/templates/rest_framework/docs/link.html
@@ -2,9 +2,17 @@
 <div class="row coredocs-link">
 
 <div class="col-md-6 docs-content">
-<button class="btn btn-sm btn-success" style="float: right; margin-top: 20px" data-toggle="modal" data-target="#{{ section_key }}_{{ link_key }}_modal">Interact</button>
+    <button
+        class="btn btn-sm btn-success"
+        style="float: right; margin-top: 20px"
+        data-toggle="modal"
+        data-target="#{{ section_key }}_{{ link_key }}_modal">
+        Interact
+    </button>
+
+    <h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+</a></h3>
 
-<h3 id="{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</h3>
     <div class="meta">
         <span class="label label-primary">{{ link.action|upper }}</span>
         <code>{{ link.url }}</code>