Added tooltips to the About and Releases links

Author: Kixiron

Cargo.toml

@@ -13,7 +13,7 @@ log = "0.4"
 regex = "1"
 structopt = "0.3"
 crates-index-diff = "7"
-reqwest = { version = "0.10.6", features = ["blocking", "json"] } # TODO: Remove blocking when async is ready
+reqwest = { version = "0.10.6", features = ["blocking", "json"] }# TODO: Remove blocking when async is ready
 semver = { version = "0.9", features = ["serde"] }
 slug = "=0.1.1"
 env_logger = "0.7"
@@ -56,7 +56,7 @@ serde_json = "1.0"
 # iron dependencies
 iron = "0.5"
 router = "0.5"
-staticfile = { version = "0.4", features = [ "cache" ] }
+staticfile = { version = "0.4", features = ["cache"] }
 tempfile = "3.1.0"
 
 # Templating
@@ -84,6 +84,11 @@ criterion = "0.3"
 kuchiki = "0.8"
 rand = "0.7.3"
 
+[build-dependencies]
+time = "0.1"
+git2 = { version = "0.13", default-features = false }
+sass-rs = "0.2.2"
+
 [[bench]]
 name = "html_parsing"
 harness = false
@@ -92,11 +97,6 @@ harness = false
 name = "compression"
 harness = false
 
-[build-dependencies]
-time = "0.1"
-git2 = { version = "0.13", default-features = false }
-sass-rs = "0.2"
-
 [[bin]]
 name = "cratesfyi"
 test = false

build.rs

@@ -1,26 +1,35 @@
 use git2::Repository;
-use std::env;
-use std::fs::{self, File};
-use std::io::Write;
-use std::path::Path;
+use std::{
+    env,
+    error::Error,
+    fs::{self, File},
+    io::Write,
+    path::Path,
+};
 
 fn main() {
     // Set the host target
     println!(
         "cargo:rustc-env=CRATESFYI_HOST_TARGET={}",
-        env::var("TARGET").unwrap()
+        env::var("TARGET").unwrap(),
     );
 
     // Don't rerun anytime a single change is made
-    println!("cargo:rerun-if-changed=templates/style.scss");
+    println!("cargo:rerun-if-changed=templates/style/base.scss");
+    println!("cargo:rerun-if-changed=templates/style/_rustdoc.scss");
+    println!("cargo:rerun-if-changed=templates/style/_vars.scss");
+    println!("cargo:rerun-if-changed=templates/style/_utils.scss");
+    println!("cargo:rerun-if-changed=templates/style/_navbar.scss");
     println!("cargo:rerun-if-changed=templates/menu.js");
     println!("cargo:rerun-if-changed=templates/index.js");
     // TODO: are these right?
     println!("cargo:rerun-if-changed=.git/HEAD");
     println!("cargo:rerun-if-changed=.git/index");
 
     write_git_version();
-    compile_sass();
+    if let Err(sass_err) = compile_sass() {
+        panic!("Error compiling SASS: {}", sass_err);
+    }
     copy_js();
 }
 
@@ -46,15 +55,24 @@ fn get_git_hash() -> Option<String> {
     })
 }
 
-fn compile_sass() {
-    use sass_rs::Context;
+fn compile_sass() -> Result<(), Box<dyn Error>> {
+    use sass_rs::{Context, Options, OutputStyle};
 
-    let mut file_context =
-        Context::new_file(concat!(env!("CARGO_MANIFEST_DIR"), "/templates/style.scss")).unwrap();
-    let css = file_context.compile().unwrap();
-    let dest_path = Path::new(&env::var("OUT_DIR").unwrap()).join("style.css");
-    let mut file = File::create(&dest_path).unwrap();
-    file.write_all(css.as_bytes()).unwrap();
+    const STYLE_DIR: &str = concat!(env!("CARGO_MANIFEST_DIR"), "/templates/style");
+
+    let mut context = Context::new_file(format!("{}/base.scss", STYLE_DIR))?;
+    context.set_options(Options {
+        output_style: OutputStyle::Compressed,
+        include_paths: vec![STYLE_DIR.to_owned()],
+        ..Default::default()
+    });
+
+    let css = context.compile()?;
+    let dest_path = Path::new(&env::var("OUT_DIR")?).join("style.css");
+    let mut file = File::create(&dest_path)?;
+    file.write_all(css.as_bytes())?;
+
+    Ok(())
 }
 
 fn copy_js() {

src/web/page/templates.rs

@@ -54,7 +54,6 @@ impl TemplateData {
                 template_data
                     .templates
                     .swap(Arc::new(load_templates(&mut conn)?));
-                log::info!("Reloaded templates");
 
                 Ok(())
             }
@@ -65,7 +64,9 @@ impl TemplateData {
 
             while rx.recv().is_ok() {
                 if let Err(err) = reload(&template_data, &pool) {
-                    log::error!("failed to reload templates: {:?}", err);
+                    log::error!("Failed to reload templates:\n{}", err);
+                } else {
+                    log::info!("Reloaded templates");
                 }
             }
         });

templates/header/topbar.html

@@ -24,16 +24,28 @@
                 </a>
 
                 <ul class="pure-menu-list">
-                    <li class="pure-menu-item">
-                        <a href="/about" class="pure-menu-link">
+                    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+                        <a href="/about" class="pure-menu-link disable-menu-arrow">
                             About
                         </a>
+
+                        <ul class="pure-menu-children">
+                            <a href="/about" class="pure-menu-link">
+                                Documentation about builds, badges and more
+                            </a>
+                        </ul>
                     </li>
 
-                    <li class="pure-menu-item">
-                        <a href="/releases" class="pure-menu-link">
+                    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+                        <a href="/releases" class="pure-menu-link disable-menu-arrow">
                             Releases
                         </a>
+
+                        <ul class="pure-menu-children">
+                            <a href="/releases" class="pure-menu-link">
+                                Recent releases, the release queue and build failures
+                            </a>
+                        </ul>
                     </li>
 
                     {# The Rust dropdown menu #}

templates/style/_navbar.scss

@@ -0,0 +1,148 @@
+// FIXME: Use modules
+@import "vars", "utils";
+
+div.nav-container {
+    // Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
+    z-index: 999;
+    height: $top-navbar-height;
+    border-bottom: 1px solid $color-border;
+    background-color: #fff;
+    left: 0;
+    right: 0;
+    top: 0;
+    position: fixed;
+
+    li {
+        border-left: 1px solid $color-border;
+    }
+
+    .pure-menu-has-children > .pure-menu-link:after {
+        font-size: 0.8em;
+    }
+
+    .pure-menu-link {
+        font-size: 0.8em;
+        font-weight: 400;
+
+        &:hover {
+            color: $color-standard;
+            background-color: inherit;
+        }
+    }
+
+    form.landing-search-form-nav {
+        max-width: 1200px;
+
+        #search-input-nav {
+            float: right;
+            max-width: 150px;
+            display: none;
+            border-left: 1px solid $color-border;
+
+            @media #{$media-sm} {
+                display: block;
+            }
+
+            @media #{$media-md} {
+                max-width: 200px;
+            }
+
+            label {
+                color: #777;
+                cursor: pointer;
+                padding-left: 0.5rem;
+                font-size: 0.8em;
+            }
+
+            input {
+                border: none;
+                margin: 0 1em 0 0;
+                font-size: 0.8em;
+                box-shadow: none;
+                background-color: #fff;
+                height: 31px;
+            }
+        }
+
+        input.search-input-nav:focus {
+            outline: unset;
+        }
+    }
+
+    .pure-menu-children {
+        border: 1px solid $color-border;
+        border-radius: 0 0 2px 2px;
+        margin-left: -1px;
+
+        li {
+            border-left: none;
+        }
+    }
+
+    // used for latest version warning
+    .warn,
+    .warn:hover {
+        color: $color-type;
+    }
+
+    a.warn:hover {
+        color: darken($color-type, 10%);
+    }
+
+    // used for global alerts
+    .error {
+        color: $color-red;
+
+        &:hover {
+            color: darken($color-red, 10%);
+        }
+    }
+
+    div.rustdoc-navigation {
+        span.title {
+            display: none;
+
+            @media #{$media-sm} {
+                display: inline;
+            }
+        }
+
+        div.package-details-menu {
+            width: 350px;
+
+            p.description {
+                font-family: $font-family-sans;
+                font-size: 0.8em;
+                color: #777; // color from pure
+                padding: 0.5em 1em;
+                margin: 0;
+            }
+
+            ul.pure-menu-list {
+                width: 100%;
+            }
+
+            div.right-border {
+                border-right: 1px solid $color-border;
+            }
+
+            a.pure-menu-link {
+                word-wrap: normal;
+                white-space: normal;
+            }
+
+            div.sub-menu {
+                max-height: 150px;
+                overflow-y: auto;
+
+                ul.pure-menu-list {
+                    border-top: none;
+                }
+
+                li.pure-menu-item:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+}

templates/style/_rustdoc.scss

@@ -0,0 +1,45 @@
+// FIXME: Use modules
+@import "vars";
+
+// rustdoc overrides
+div.rustdoc {
+    font-family: $font-family-serif;
+    padding: 10px 15px 20px 15px;
+    position: relative;
+
+    @media (max-width: 700px) {
+        padding-top: 0;
+    }
+
+    .sidebar {
+        @media (min-width: 701px) {
+            margin-top: $top-navbar-height;
+        }
+
+        .block > ul > li {
+            margin-right: -10px;
+        }
+
+        @media (max-width: 700px) {
+            &.mobile {
+                top: $top-navbar-height;
+
+                .sidebar-elems .show-it {
+                    top: 77px;
+                }
+
+                #sidebar-filler {
+                    top: $top-navbar-height;
+                }
+            }
+        }
+    }
+
+    #source-sidebar {
+        top: $top-navbar-height;
+    }
+
+    #sidebar-toggle {
+        top: 62px;
+    }
+}

templates/style/_utils.scss

@@ -0,0 +1,34 @@
+// FIXME: Use modules
+@import "vars";
+
+// Info and warning notifications
+div {
+    .info {
+        font-family: $font-family-sans;
+        border-radius: 4px;
+        background-color: $color-background-code;
+        padding: 0.4em 1em;
+        text-align: center;
+        margin-bottom: 10px;
+
+        a {
+            color: $color-url;
+            text-decoration: underline;
+        }
+    }
+
+    .warning {
+        @extend .info;
+
+        background-color: lighten($color-type, 45%);
+    }
+}
+
+// Disable the dropdown arrow for pure menu items
+// It's a wonderful hack, but it allows us to hijack pure's dropdown menus to
+// make tooltips that appear when you hover over them that don't have the little
+// arrow on the link itself
+.disable-menu-arrow,
+.pure-menu-has-children > .disable-menu-arrow.pure-menu-link:after {
+    content: "" !important;
+}