Skip to content

Commit 59aafbf

Browse files
GuillaumeGomezGuillaumeGomez
committed
Convert documentation tab into button
1 parent f54bf1d commit 59aafbf

File tree

3 files changed

+158
-138
lines changed

3 files changed

+158
-138
lines changed

‎templates/crate/details.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,6 @@
4545
{%- endif -%}
4646

4747
{# If the crate has a custom doc url, show it #}
48-
{%- if details.documentation_url -%}
49-
<li class="pure-menu-item">
50-
<a href="{{ details.documentation_url }}" title="Canonical documentation" class="pure-menu-link">
51-
{{ "file-alt" | far(fw=true) }} Documentation
52-
</a>
53-
</li>
54-
{%- endif -%}
5548

5649
{# If the release has a repository, show it #}
5750
{%- if details.repository_url -%}

‎templates/header/package_navigation.html

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -15,85 +15,85 @@
1515
{% macro package_navigation(title=false, metadata, platforms=false, active_tab) %}
1616
<div class="cratesfyi-package-container">
1717
<div class="container">
18-
{# Page title #}
19-
<h1 id="crate-title">
20-
{%- if title -%}
21-
{{ title }}
22-
{%- else -%}
23-
{{ metadata.name }} {{ metadata.version }}
24-
{{ "copy" | far(id="clipboard", aria_label="Copy crate name and version information", fa=true) }}
25-
{%- endif -%}
26-
</h1>
18+
<div class="description-container">
19+
{# The partial path of the crate, `:name/:release` #}
20+
{%- set crate_path = metadata.name ~ "/" ~ metadata.version -%}
2721

28-
{# Page description #}
29-
<div class="description">
30-
{%- if metadata.description -%}
31-
{{ metadata.description }}
32-
{%- endif -%}
33-
</div>
22+
{# If docs are built, show a button for them #}
3423

35-
<div class="pure-menu pure-menu-horizontal">
36-
{# If there are platforms, show a dropdown with them #}
37-
{%- if platforms -%}
38-
<ul class="pure-menu-list platforms-menu">
39-
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
40-
<a href="#" class="pure-menu-link">Platform</a>
41-
<ul class="pure-menu-children">
42-
{%- for platform in platforms -%}
43-
<li class="pure-menu-item">
44-
<a href="/{{ metadata.name }}/{{ metadata.version }}/{{ platform }}/{{ metadata.target_name }}/"
45-
class="pure-menu-link">
46-
{{ platform }}
47-
</a>
48-
</li>
49-
{%- endfor -%}
50-
</ul>
51-
</li>
52-
</ul>
53-
{%- endif -%}
24+
{# Page title #}
25+
<h1 id="crate-title">
26+
{%- if title -%}
27+
{{ title }}
28+
{%- else -%}
29+
{{ metadata.name }} {{ metadata.version }}
30+
{{ "copy" | far(id="clipboard", aria_label="Copy crate name and version information", fa=true) }}
31+
{%- endif -%}
32+
</h1>
33+
34+
{# Page description #}
35+
<div class="description">
36+
{%- if metadata.description -%}
37+
{{ metadata.description }}
38+
{%- endif -%}
39+
</div>
5440

55-
<ul class="pure-menu-list">
56-
{# The partial path of the crate, `:name/:release` #}
57-
{%- set crate_path = metadata.name ~ "/" ~ metadata.version -%}
5841

59-
{# If docs are built, show a tab for them #}
60-
{%- if metadata.rustdoc_status -%}
61-
<li class="pure-menu-item">
62-
{# The docs tab redirects to the docs, so the tab will never be selected and seen #}
63-
<a href="/{{ crate_path | safe }}/{{ metadata.target_name }}/" class="pure-menu-link">
64-
{{ "book" | fas(fw=true) }}
65-
<span class="title"> Documentation</span>
66-
</a>
67-
</li>
42+
<div class="pure-menu pure-menu-horizontal">
43+
{# If there are platforms, show a dropdown with them #}
44+
{%- if platforms -%}
45+
<ul class="pure-menu-list platforms-menu">
46+
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
47+
<a href="#" class="pure-menu-link">Platform</a>
48+
<ul class="pure-menu-children">
49+
{%- for platform in platforms -%}
50+
<li class="pure-menu-item">
51+
<a href="/{{ metadata.name }}/{{ metadata.version }}/{{ platform }}/{{ metadata.target_name }}/"
52+
class="pure-menu-link">
53+
{{ platform }}
54+
</a>
55+
</li>
56+
{%- endfor -%}
57+
</ul>
58+
</li>
59+
</ul>
6860
{%- endif -%}
6961

70-
{# The crate information tab #}
71-
<li class="pure-menu-item"><a href="/crate/{{ crate_path | safe }}"
72-
class="pure-menu-link{% if active_tab == 'crate' %} pure-menu-active{% endif %}">
73-
{{ "cube" | fas(fw=true) }}
74-
<span class="title"> Crate</span>
75-
</a>
76-
</li>
62+
<ul class="pure-menu-list">
63+
{# The crate information tab #}
64+
<li class="pure-menu-item"><a href="/crate/{{ crate_path | safe }}"
65+
class="pure-menu-link{% if active_tab == 'crate' %} pure-menu-active{% endif %}">
66+
{{ "cube" | fas(fw=true) }}
67+
<span class="title"> Crate</span>
68+
</a>
69+
</li>
7770

78-
{# The source view tab #}
79-
<li class="pure-menu-item">
80-
<a href="/crate/{{ crate_path | safe }}/source/"
81-
class="pure-menu-link{% if active_tab == 'source' %} pure-menu-active{% endif %}">
82-
{{ "folder-open" | far(fw=true) }}
83-
<span class="title"> Source</span>
84-
</a>
85-
</li>
71+
{# The source view tab #}
72+
<li class="pure-menu-item">
73+
<a href="/crate/{{ crate_path | safe }}/source/"
74+
class="pure-menu-link{% if active_tab == 'source' %} pure-menu-active{% endif %}">
75+
{{ "folder-open" | far(fw=true) }}
76+
<span class="title"> Source</span>
77+
</a>
78+
</li>
8679

87-
{# The builds tab #}
88-
<li class="pure-menu-item">
89-
<a href="/crate/{{ crate_path | safe }}/builds"
90-
class="pure-menu-link{% if active_tab == 'builds' %} pure-menu-active{% endif %}">
91-
{{ "cogs" | fas }}
92-
<span class="title"> Builds</span>
93-
</a>
94-
</li>
95-
</ul>
80+
{# The builds tab #}
81+
<li class="pure-menu-item">
82+
<a href="/crate/{{ crate_path | safe }}/builds"
83+
class="pure-menu-link{% if active_tab == 'builds' %} pure-menu-active{% endif %}">
84+
{{ "cogs" | fas }}
85+
<span class="title"> Builds</span>
86+
</a>
87+
</li>
88+
</ul>
89+
</div>
9690
</div>
91+
92+
{%- if metadata.rustdoc_status -%}
93+
<a href="/{{ crate_path | safe }}/{{ metadata.target_name }}/" class="doc-link">
94+
{{ "book" | fas(fw=true) }} Documentation
95+
</a>
96+
{%- endif -%}
9797
</div>
9898
</div>
9999
{% endmacro package_navigation %}

‎templates/style/base.scss

Lines changed: 88 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -444,83 +444,110 @@ div.cratesfyi-package-container {
444444
border-bottom: 1px solid $color-border;
445445
margin-bottom: 20px;
446446

447-
h1 {
448-
margin: 0;
449-
padding: 15px 0 0 14px;
450-
}
451-
452-
div.description {
453-
font-family: $font-family-serif;
454-
margin: 0;
455-
padding: 0 0 15px 14px;
456-
457-
@media #{$media-sm} {
458-
white-space: nowrap;
459-
overflow: hidden;
460-
text-overflow: ellipsis;
461-
}
462-
}
463-
464-
div.description-in-rustdoc {
465-
padding: 10px 0 10px 14px;
466-
}
447+
.container {
448+
display: flex;
449+
align-items: center;
467450

468-
.pure-menu {
469-
margin-bottom: -1px;
470-
padding-left: 14px;
451+
.description-container {
452+
flex-grow: 3;
471453

472-
.pure-menu-link {
473-
color: #666;
474-
font-size: 14px;
475-
padding: 0.4em 1em 0.3em 1em;
454+
h1 {
455+
margin: 0;
456+
padding: 15px 0 0 14px;
457+
}
476458

477-
.title {
459+
div.description {
478460
display: none;
479461

480462
@media #{$media-sm} {
481-
display: inline;
463+
font-family: $font-family-serif;
464+
margin: 0;
465+
padding: 2px 0 14px 15px;
466+
display: block;
482467
}
483468
}
484-
}
485469

486-
.pure-menu-active {
487-
color: $color-standard;
488-
background-color: #fff;
489-
border-top: 1px solid $color-border;
490-
border-left: 1px solid $color-border;
491-
border-right: 1px solid $color-border;
492-
border-top-left-radius: 4px;
493-
border-top-right-radius: 4px;
494-
border-bottom: 2px solid #fff;
495-
}
470+
div.description-in-rustdoc {
471+
padding: 10px 0 10px 14px;
472+
}
496473

497-
.pure-menu-active:hover {
498-
background-color: #fff !important;
499-
}
474+
.pure-menu {
475+
margin-bottom: -1px;
476+
padding-left: 14px;
500477

501-
.pure-menu-link:hover {
502-
color: #000;
503-
background-color: inherit;
504-
}
505-
}
478+
.pure-menu-link {
479+
color: #666;
480+
font-size: 14px;
481+
padding: 0.4em 1em 0.3em 1em;
506482

507-
ul.platforms-menu {
508-
float: right;
509-
display: none;
483+
.title {
484+
display: none;
510485

511-
ul.pure-menu-children {
512-
left: auto;
513-
right: 0;
514-
border: 1px solid $color-border;
515-
border-radius: 2px;
516-
}
486+
@media #{$media-sm} {
487+
display: inline;
488+
}
489+
}
490+
}
517491

518-
.pure-menu-has-children > .pure-menu-link:after {
519-
font-size: 14px;
492+
.pure-menu-active {
493+
color: $color-standard;
494+
background-color: #fff;
495+
border-top: 1px solid $color-border;
496+
border-left: 1px solid $color-border;
497+
border-right: 1px solid $color-border;
498+
border-top-left-radius: 4px;
499+
border-top-right-radius: 4px;
500+
border-bottom: 2px solid #fff;
501+
}
502+
503+
.pure-menu-active:hover {
504+
background-color: #fff !important;
505+
}
506+
507+
.pure-menu-link:hover {
508+
color: #000;
509+
background-color: inherit;
510+
}
511+
}
512+
513+
ul.platforms-menu {
514+
float: right;
515+
display: none;
516+
517+
ul.pure-menu-children {
518+
left: auto;
519+
right: 0;
520+
border: 1px solid $color-border;
521+
border-radius: 2px;
522+
}
523+
524+
.pure-menu-has-children > .pure-menu-link:after {
525+
font-size: 14px;
526+
}
527+
528+
@media #{$media-sm} {
529+
display: inline-block;
530+
}
531+
}
520532
}
521533

522-
@media #{$media-sm} {
523-
display: inline-block;
534+
.doc-link {
535+
margin: 0 10px;
536+
height: min-content;
537+
background: #fff;
538+
padding: 10px;
539+
border: 1px solid #ccc;
540+
border-radius: 5px;
541+
display: flex;
542+
543+
.fas {
544+
margin-top: 2px;
545+
margin-right: 6px;
546+
}
547+
548+
&:hover {
549+
border-color: #81c5ee;
550+
}
524551
}
525552
}
526553
}

0 commit comments

Comments
 (0)