Skip to content

Commit

Permalink
content/static: revamp main header and clean up markup
Browse files Browse the repository at this point in the history 
This is the first of many changes to spiff up golang.org a bit
to include our updated branding and iterate on the design.

Updates the html to be more modern and rewrites the header CSS to
be in line with our style guide (golang.org/wiki/CSSStyleGuide).

Additionally, removes the play popup widget in the header nav
in favor of linking directly to the playground and formats
the CSS using prettier.

Updates golang/go#9936

Change-Id: I9baf727f9e703b560ef786277b5d9859baa6fbfc
Reviewed-on: https://go-review.googlesource.com/c/website/+/178137
Reviewed-by: Katie Hockman <katie@golang.org>
  • Loading branch information
@andybons
andybons committed May 20, 2019
1 parent 5906675 commit 4de14c1
Show file tree
Hide file tree
Showing 5 changed files with 634 additions and 643 deletions.
1 change: 1 addition & 0 deletions content/static/go-logo-blue.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 44 additions & 32 deletions content/static/godoc.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<meta charset="utf-8">
<meta name="description" content="Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#375EAB">
<meta name="theme-color" content="#00ADD8">
{{with .Tabtitle}}
<title>{{html .}} - The Go Programming Language</title>
{{else}}
Expand All @@ -18,7 +18,7 @@
{{end}}
<script>window.initFuncs = [];</script>
{{with .GoogleAnalytics}}
<script type="text/javascript">
<script>
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "{{.}}"]);
window.trackPageview = function() {
Expand All @@ -41,34 +41,48 @@
{{end}}
{{with .Version}}<script>var goVersion = {{printf "%q" .}};</script>{{end}}
<script src="/lib/godoc/godocs.js" defer></script>
</head>
<body>

<div id='lowframe' style="position: fixed; bottom: 0; left: 0; height: 0; width: 100%; border-top: thin solid grey; background-color: white; overflow: auto;">
<div id="lowframe" style="position: fixed; bottom: 0; left: 0; height: 0; width: 100%; border-top: thin solid grey; background-color: white; overflow: auto;">
...
</div><!-- #lowframe -->

<div id="topbar"{{if .Title}} class="wide"{{end}}><div class="container">
<div class="top-heading" id="heading-wide"><a href="/">The Go Programming Language</a></div>
<div class="top-heading" id="heading-narrow"><a href="/">Go</a></div>
<a href="#" id="menu-button"><span id="menu-button-arrow">&#9661;</span></a>
<form method="GET" action="/search">
<div id="menu">
<a href="/doc/">Documents</a>
<a href="/pkg/">Packages</a>
<a href="/project/">The Project</a>
<a href="/help/">Help</a>
{{if not .GoogleCN}}
<a href="/blog/">Blog</a>
{{end}}
{{if (and .Playground .Title)}}
<a id="playgroundButton" href="http://play.golang.org/" title="Show Go Playground">Play</a>
{{end}}
<span class="search-box"><input type="search" id="search" name="q" placeholder="Search" aria-label="Search" required><button type="submit"><span><!-- magnifying glass: --><svg width="24" height="24" viewBox="0 0 24 24"><title>submit search</title><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg></span></button></span>
</div>
</form>

</div></div>
<header class="Header js-header">
<nav class="Header-nav {{if .Title}}Header-nav--wide{{end}}">
<a href="/"><img class="Header-logo" src="/lib/godoc/go-logo-blue.svg" alt="Go"></a>
<button class="Header-menuButton js-headerMenuButton" aria-label="Main menu" aria-expanded="false">
<div class="Header-menuButtonInner">
</button>
<ul class="Header-menu">
<li class="Header-menuItem"><a href="/doc/">Documents</a></li>
<li class="Header-menuItem"><a href="/pkg/">Packages</a></li>
<li class="Header-menuItem"><a href="/project/">The Project</a></li>
<li class="Header-menuItem"><a href="/help/">Help</a></li>
{{if not .GoogleCN}}
<li class="Header-menuItem"><a href="/blog/">Blog</a></li>
{{end}}
{{if (and .Playground .Title)}}
<li class="Header-menuItem"><a href="https://play.golang.org/">Play</a></li>
{{end}}
<li class="Header-menuItem Header-menuItem--search">
<form class="HeaderSearch" role="search" action="/search">
<input class="HeaderSearch-input"
type="search"
name="q"
placeholder="Search"
aria-label="Search"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
spellcheck="false"
required>
<button class="HeaderSearch-submit">
<!-- magnifying glass: --><svg class="HeaderSearch-icon" width="24" height="24" viewBox="0 0 24 24"><title>Search</title><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</button>
</form>
</li>
</ul>
</nav>
</header>

{{if .Playground}}
<div id="playground" class="play">
Expand Down Expand Up @@ -130,14 +144,12 @@ <h2>
</div><!-- .container -->
</div><!-- #page -->
{{if .GoogleAnalytics}}
<script type="text/javascript">
<script>
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{{end}}
</body>
</html>

57 changes: 6 additions & 51 deletions content/static/godocs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,12 @@
(function() {
'use strict';

// Mobile-friendly topbar menu
$(function() {
var menu = $('#menu');
var menuButton = $('#menu-button');
var menuButtonArrow = $('#menu-button-arrow');
menuButton.click(function(event) {
menu.toggleClass('menu-visible');
menuButtonArrow.toggleClass('vertical-flip');
event.preventDefault();
return false;
});
var headerEl = document.querySelector('.js-header');
var menuButtonEl = document.querySelector('.js-headerMenuButton');
menuButtonEl.addEventListener('click', function(e) {
e.preventDefault();
headerEl.classList.toggle('is-active');
menuButtonEl.setAttribute('aria-expanded', headerEl.classList.contains('is-active'));
});

/* Generates a table of contents: looks for h2 and h3 elements and generates
Expand Down Expand Up @@ -128,45 +123,6 @@ function bindToggleLinks(selector, prefix) {
});
}

function setupDropdownPlayground() {
if (!$('#page').is('.wide')) {
return; // don't show on front page
}
var button = $('#playgroundButton');
var div = $('#playground');
var setup = false;
button.toggle(function() {
button.addClass('active');
div.show();
if (setup) {
return;
}
setup = true;
playground({
'codeEl': $('.code', div),
'outputEl': $('.output', div),
'runEl': $('.run', div),
'fmtEl': $('.fmt', div),
'shareEl': $('.share', div),
'shareRedirect': '//play.golang.org/p/'
});
},
function() {
button.removeClass('active');
div.hide();
});
$('#menu').css('min-width', '+=60');

// Hide inline playground if we click somewhere on the page.
// This is needed in mobile devices, where the "Play" button
// is not clickable once the playground opens up.
$("#page").click(function() {
if (button.hasClass('active')) {
button.click();
}
});
}

function setupInlinePlayground() {
'use strict';
// Set up playground when each element is toggled.
Expand Down Expand Up @@ -374,7 +330,6 @@ $(document).ready(function() {
bindToggleLinks(".overviewLink", "");
bindToggleLinks(".examplesLink", "");
bindToggleLinks(".indexLink", "");
setupDropdownPlayground();
setupInlinePlayground();
fixFocus();
setupTypeInfo();
Expand Down
Loading

0 comments on commit 4de14c1

Please sign in to comment.