Merge pull request #1367 from GuillaumeGomez/footer

Add footer

Author: GuillaumeGomez

templates/base.html

@@ -29,6 +29,7 @@
         {%- block header %}{% endblock header -%}
 
         {%- block body -%}{%- endblock body -%}
+        {%- include "footer.html" -%}
 
         <script type="text/javascript" nonce="{{ csp_nonce }}" src="/-/static/menu.js?{{ docsrs_version() | slugify }}"></script>
         <script type="text/javascript" nonce="{{ csp_nonce }}" src="/-/static/index.js?{{ docsrs_version() | slugify }}"></script>

templates/core/about/badges.html

@@ -5,7 +5,7 @@
 {%- block body -%}
 	<h1>Badges</h1>
 
-	<div>
+	<div class="about-page">
 	<div class="container pure-u-5-6 about">
 	<p>
 		You can use badges to show state of your documentation to your users.

templates/core/about/builds.html

@@ -5,7 +5,7 @@
 {%- block body -%}
     {%- set docsrs_repo = "https://github.com/rust-lang/docs.rs" -%}
     <h1>Builds</h1>
-    <div>
+    <div class="about-page">
     <div class="container pure-u-5-6 about">
     <p>
         Docs.rs automatically builds documentation for crates released on <a href="https://crates.io/">crates.io</a>.

templates/core/about/index.html

@@ -6,7 +6,7 @@
     {%- set docsrs_repo = "https://github.com/rust-lang/docs.rs" -%}
 
     <h1 id="crate-title">About Docs.rs</h1>
-    <div>
+    <div class="about-page">
     <div class="container pure-u-5-6 about">
         <p>
             Docs.rs is an

templates/core/about/metadata.html

@@ -5,7 +5,7 @@
 {%- block body -%}
 	<h1>Metadata for custom builds</h1>
 
-	<div>
+	<div class="about-page">
 	<div class="container pure-u-5-6 about">
 	<p>
 		You can customize docs.rs builds by defining <code>[package.metadata.docs.rs]</code>

templates/core/about/redirections.html

@@ -5,7 +5,7 @@
 {%- block body -%}
     <h1>Shorthand URLs</h1>
 
-    <div>
+    <div class="about-page">
     <div class="container pure-u-5-6 about">
         <p>
             Docs.rs uses semver to parse URLs. You can use this feature to access

templates/footer.html

@@ -0,0 +1,5 @@
+<div class="docs-rs-footer">
+    <a href="/about">About docs.rs</a>
+    <a href="https://foundation.rust-lang.org/policies/privacy-policy/#docs.rs">Privacy policy</a>
+    <a href="/releases/queue">Build queue</a>
+</div>

templates/header/topbar_begin.html

@@ -34,20 +34,6 @@
 
                 #}<ul class="pure-menu-list pure-menu-right">
                     <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt-children">
-                        <a href="/about" class="pure-menu-link">
-                            <span title="About">{{ "info-circle" | fas }}</span>
-                            <span class="title">About</span>
-                        </a>
-
-                        <ul class="pure-menu-children">
-                            {{ macros::menu_link(href="/about/badges", text="Badges") }}
-                            {{ macros::menu_link(href="/about/builds", text="Builds") }}
-                            {{ macros::menu_link(href="/about/metadata", text="Metadata") }}
-                            {{ macros::menu_link(href="/about/redirections", text="Shorthand URLs") }}
-                        </ul>
-                    </li>{#
-
-                    #}<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt-children">
                         <a href="/releases" class="pure-menu-link">
                             <span title="Releases">{{ "leaf" | fas }}</span>
                             <span class="title">Releases</span>

templates/rustdoc/body.html

@@ -33,3 +33,4 @@
 
 {# see comment in ../../static/storage-change-detection.html for details #}
 <iframe src="/-/static/storage-change-detection.html" width="0" height="0" style="display: none"></iframe>
+{%- include "footer.html" -%}

templates/style/_navbar.scss

@@ -139,8 +139,8 @@ div.nav-container {
     // These hardcoded values are "magic", in the sense they were observed to be the lowest-possible
     // thresholds through experimentation with a package name that hit the max-width of the element.
     $full-width: 1142px;
-    $medium-width: 994px;
-    $narrow-width: 901px;
+    $medium-width: 837px;
+    $narrow-width: 783px;
 
     // use a .title span inside a menu to hide it on small screens
     span.title {

templates/style/_vars.scss

@@ -7,6 +7,7 @@ $font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono
 
 // Sizes
 $top-navbar-height: 32px; // height of the floating top navbar
+$footer-height: 30px; // height of the floating footer
 
 // Pure compatible media queries
 // usage:

templates/style/base.scss

@@ -1,5 +1,5 @@
 // FIXME: Use modules
-@import "vars", "utils", "navbar", "themes", "fa";
+@import "vars", "utils", "navbar", "themes", "fa", "footer";
 
 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
 @font-face {
@@ -74,6 +74,8 @@ textarea,
 body {
     padding: 0;
     margin: 0;
+    position: relative;
+    min-height: calc(100vh - #{$top-navbar-height});
 
     * {
         -webkit-box-sizing: border-box;
@@ -168,6 +170,10 @@ body {
     g.highcharts-grid > path {
         stroke: var(--chart-grid) !important;
     }
+
+    > .about-page {
+        padding-bottom: calc(#{$footer-height} + 2px);
+    }
 }
 
 pre {
@@ -180,6 +186,11 @@ div.container {
     max-width: 1160px;
     margin: 0 auto;
     text-align: left;
+
+    > .chartjs-render-monitor {
+        // This is to prevent the canvas text to go under the footer.
+        padding-bottom: 35px;
+    }
 }
 
 div.landing {
@@ -211,7 +222,7 @@ div.landing {
 
 div.recent-releases-container {
     text-align: left;
-    margin-bottom: 50px;
+    padding-bottom: 50px;
 
     ul,
     li {
@@ -396,9 +407,10 @@ div.package-sheet-container {
 }
 
 div.package-page-container {
+    padding-bottom: 50px;
+
     div.package-menu {
         padding: 0 10px;
-        margin-bottom: 50px;
 
         li.pure-menu-heading {
             font-size: 1.3em;

templates/style/footer.scss

@@ -0,0 +1,30 @@
+@import "vars";
+
+.docs-rs-footer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 0.9em;
+    height: $footer-height;
+    background: var(--color-background);
+    border-top: 1px solid var(--color-border);
+    font-family: $font-family-sans;
+
+    > a {
+        font-weight: 400;
+        border-right: 1px solid var(--color-border);
+        padding: 4px 8px;
+        height: 100%;
+        display: inline-block;
+        color: var(--color-navbar-standard);
+
+        &:hover {
+            color: var(--color-standard);
+        }
+        &:first-child {
+            border-left: 1px solid var(--color-border);
+        }
+    }
+}

templates/style/rustdoc.scss

@@ -1,5 +1,10 @@
 // FIXME: Use modules
-@import "vars", "navbar", "themes", "fa";
+@import "vars", "navbar", "themes", "fa", "footer";
+
+// This rule is needed to be sure that the footer will always be at the bottom of the page.
+body.rustdoc-page {
+    min-height: 100vh;
+}
 
 // Force the navbar to be left-aligned on rustdoc pages
 body.rustdoc-page > .nav-container > .container {
@@ -8,6 +13,34 @@ body.rustdoc-page > .nav-container > .container {
 
 div.container-rustdoc {
     text-align: left;
+
+    > .docs-rs-footer {
+        bottom: -20px;
+    }
+}
+
+div.container-rustdoc:not(.source) {
+    > .docs-rs-footer {
+        right: -15px;
+        width: calc(100vw - 212px);
+    }
+
+    // This is when the rustdoc sidebar "disappears" (for mobile mode).
+    @media (max-width: 700px) {
+        > .docs-rs-footer:not(.source) {
+            width: 100vw;
+        }
+    }
+}
+
+div.container-rustdoc.source {
+    > .docs-rs-footer {
+        width: 100vw;
+        left: -15px;
+        // This is needed because even though the sidebar only contains the header, it still takes
+        // all the height.
+        z-index: 1;
+    }
 }
 
 // this is a super nasty override for help dialog in rustdocs