Skip to content

Commit d688dc7

Browse files
GuillaumeGomezGuillaumeGomez
committed
Convert documentation tab into button
1 parent 3af2150 commit d688dc7

File tree

3 files changed

+164
-140
lines changed

3 files changed

+164
-140
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: 94 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -444,87 +444,118 @@ 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;
447+
.container {
448+
display: flex;
449+
align-items: center;
450450

451-
&.no-description {
452-
padding-bottom: 15px;
453-
}
454-
}
451+
.description-container {
452+
flex-grow: 3;
455453

456-
div.description {
457-
font-family: $font-family-serif;
458-
margin: 0;
459-
padding: 0 0 15px 14px;
460-
461-
@media #{$media-sm} {
462-
white-space: nowrap;
463-
overflow: hidden;
464-
text-overflow: ellipsis;
465-
}
466-
}
467-
468-
div.description-in-rustdoc {
469-
padding: 10px 0 10px 14px;
470-
}
454+
h1 {
455+
margin: 0;
456+
padding: 15px 14px;
471457

472-
.pure-menu {
473-
margin-bottom: -1px;
474-
padding-left: 14px;
458+
@media #{$media-sm} {
459+
padding: 15px 0 0 14px;
460+
}
475461

476-
.pure-menu-link {
477-
color: #666;
478-
font-size: 14px;
479-
padding: 0.4em 1em 0.3em 1em;
462+
&.no-description {
463+
padding-bottom: 15px;
464+
}
465+
}
480466

481-
.title {
467+
div.description {
482468
display: none;
483469

484470
@media #{$media-sm} {
485-
display: inline;
471+
font-family: $font-family-serif;
472+
margin: 0;
473+
padding: 2px 0 14px 15px;
474+
display: block;
486475
}
487476
}
488-
}
489477

490-
.pure-menu-active {
491-
color: $color-standard;
492-
background-color: #fff;
493-
border-top: 1px solid $color-border;
494-
border-left: 1px solid $color-border;
495-
border-right: 1px solid $color-border;
496-
border-top-left-radius: 4px;
497-
border-top-right-radius: 4px;
498-
border-bottom: 2px solid #fff;
499-
}
478+
div.description-in-rustdoc {
479+
padding: 10px 0 10px 14px;
480+
}
500481

501-
.pure-menu-active:hover {
502-
background-color: #fff !important;
503-
}
482+
.pure-menu {
483+
margin-bottom: -1px;
484+
padding-left: 14px;
504485

505-
.pure-menu-link:hover {
506-
color: #000;
507-
background-color: inherit;
508-
}
509-
}
486+
.pure-menu-link {
487+
color: #666;
488+
font-size: 14px;
489+
padding: 0.4em 1em 0.3em 1em;
510490

511-
ul.platforms-menu {
512-
float: right;
513-
display: none;
491+
.title {
492+
display: none;
514493

515-
ul.pure-menu-children {
516-
left: auto;
517-
right: 0;
518-
border: 1px solid $color-border;
519-
border-radius: 2px;
520-
}
494+
@media #{$media-sm} {
495+
display: inline;
496+
}
497+
}
498+
}
521499

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

526-
@media #{$media-sm} {
527-
display: inline-block;
542+
.doc-link {
543+
margin: 0 10px;
544+
height: min-content;
545+
background: #fff;
546+
padding: 10px;
547+
border: 1px solid #ccc;
548+
border-radius: 5px;
549+
display: flex;
550+
551+
.fas {
552+
margin-top: 2px;
553+
margin-right: 6px;
554+
}
555+
556+
&:hover {
557+
border-color: #81c5ee;
558+
}
528559
}
529560
}
530561
}

0 commit comments

Comments
 (0)