Convert documentation tab into button

Author: GuillaumeGomez

templates/crate/details.html

@@ -45,13 +45,6 @@
                         {%- endif -%}
 
                         {# If the crate has a custom doc url, show it #}
-                        {%- if details.documentation_url -%}
-                            <li class="pure-menu-item">
-                                <a href="{{ details.documentation_url }}" title="Canonical documentation" class="pure-menu-link">
-                                    {{ "file-alt" | far(fw=true) }} Documentation
-                                </a>
-                            </li>
-                        {%- endif -%}
 
                         {# If the release has a repository, show it #}
                         {%- if details.repository_url -%}

templates/header/package_navigation.html

@@ -15,6 +15,11 @@
 {% macro package_navigation(title=false, metadata, platforms=false, active_tab) %}
     <div class="cratesfyi-package-container">
         <div class="container">
+            {# The partial path of the crate, `:name/:release` #}
+            {%- set crate_path = metadata.name ~ "/" ~ metadata.version -%}
+
+            {# If docs are built, show a button for them #}
+
             {# Page title #}
             <h1 id="crate-title">
                 {%- if title -%}
@@ -25,10 +30,17 @@ <h1 id="crate-title">
                 {%- endif -%}
             </h1>
 
-            {# Page description #}
-            <div class="description">
-                {%- if metadata.description -%}
-                    {{ metadata.description }}
+            <div class="description-container">
+                {# Page description #}
+                <div class="description">
+                    {%- if metadata.description -%}
+                        {{ metadata.description }}
+                    {%- endif -%}
+                </div>
+                {%- if metadata.rustdoc_status -%}
+                    <a href="/{{ crate_path | safe }}/{{ metadata.target_name }}/" class="doc-link">
+                        {{ "book" | fas(fw=true) }} Documentation
+                    </a>
                 {%- endif -%}
             </div>
 
@@ -53,20 +65,6 @@ <h1 id="crate-title">
                 {%- endif -%}
 
                 <ul class="pure-menu-list">
-                    {# The partial path of the crate, `:name/:release` #}
-                    {%- set crate_path = metadata.name ~ "/" ~ metadata.version -%}
-
-                    {# If docs are built, show a tab for them #}
-                    {%- if metadata.rustdoc_status -%}
-                        <li class="pure-menu-item">
-                            {# The docs tab redirects to the docs, so the tab will never be selected and seen #}
-                            <a href="/{{ crate_path | safe }}/{{ metadata.target_name }}/" class="pure-menu-link">
-                                {{ "book" | fas(fw=true) }}
-                                <span class="title"> Documentation</span>
-                            </a>
-                        </li>
-                    {%- endif -%}
-
                     {# The crate information tab #}
                     <li class="pure-menu-item"><a href="/crate/{{ crate_path | safe }}"
                             class="pure-menu-link{% if active_tab == 'crate' %} pure-menu-active{% endif %}">

templates/style/base.scss

@@ -523,6 +523,33 @@ div.cratesfyi-package-container {
             display: inline-block;
         }
     }
+
+    .description-container {
+        display: flex;
+
+        .description {
+            padding-top: 6px;
+        }
+
+        .doc-link {
+            display: flex;
+            margin-right: 10px;
+            height: min-content;
+            background: #fff;
+            padding: 7px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+
+            .fas {
+                margin-top: 2px;
+                margin-right: 4px;
+            }
+
+            &:hover {
+                border-color: #81c5ee;
+            }
+        }
+    }
 }
 
 div.cratesfyi-package-container-rustdoc {