Layout link meta

rest_framework/static/rest_framework/docs/css/base.css

@@ -192,6 +192,14 @@ body {
     border-bottom: 1px solid lightgrey;
 }
 
+.coredocs-section span {
+  display: none;
+}
+
+.coredocs-section:hover span {
+  display: inline;
+}
+
 .coredocs-section:last-child {
     margin-top: 0;
 }
@@ -242,6 +250,18 @@ body {
 
 /* @group Docs Content */
 
+.docs-content .meta .label {
+    vertical-align: middle;
+    font-size: 14px;
+    font-weight: normal;
+}
+
+.docs-content .meta code {
+    vertical-align: middle;
+    padding: .2em .6em .3em;
+    font-size: 14px;
+}
+
 .docs-content .btn {
   font-size: inherit;
 }

rest_framework/templates/rest_framework/docs/document.html

@@ -1,7 +1,7 @@
 {% load rest_framework %}
 
 {% for section_key, section in document.data.items %}
-    <h2 id="{{ section_key }}" class="coredocs-section"><i class="fa fa-angle-right"></i> {{ section_key }}</h2>
+    <h2 id="{{ section_key }}" class="coredocs-section">{{ section_key }} <span>#</span></h2>
     {% for link_key, link in section.links.items %}
         {% include "rest_framework/docs/link.html" %}
     {% endfor %}

rest_framework/templates/rest_framework/docs/link.html

@@ -5,9 +5,10 @@
 <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 }}">{{ link.title|default:link_key }}</h3>
-    <p>
-        <span class="label label-primary">{{ link.action|upper }}</span> <code>{{ link.url }}</code>
-    </p>
+    <div class="meta">
+        <span class="label label-primary">{{ link.action|upper }}</span>
+        <code>{{ link.url }}</code>
+    </div>
 
     <p>{% render_markdown link.description %}</p>