Skip to content

Commit 47151e4

Browse files
andybonsandybons
committed
content/static,internal: allow fluid width for documentation
This change places the side navigation flush left and allows the documentation to expand to fill the rest of the page. The documentation container has a maximum width of 60rem (960px) and is flush left in the main container when it can no longer expand. Also moves tab name strings into constants and documents the fields on the basePage struct. Updates golang/go#40612 Fixes golang/go#40557 Change-Id: Ia1be6ffb04d6c8819371ad12f56e133e2167d2fd Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/248857 Run-TryBot: Andrew Bonventre <[email protected]> TryBot-Result: kokoro <[email protected]> Reviewed-by: Jamal Carvalho <[email protected]>
1 parent 2d59a7f commit 47151e4

File tree

9 files changed

+125
-55
lines changed

9 files changed

+125
-55
lines changed

‎content/static/css/sidenav.css

+23-2
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,23 @@
102102
); /* Move hidden anchor content for deep linking with a sticky header. */
103103
}
104104
.Documentation {
105-
column-gap: 2.8125rem;
105+
column-gap: 2rem;
106106
display: grid;
107-
grid-template-columns: 1fr minmax(0, 3fr);
107+
grid-template-columns: 17.5rem minmax(0, auto);
108+
}
109+
/**
110+
* Remove once Doc HTML is fully rolled out, as js-* styles should NEVER be
111+
* styled per https://golang.org/wiki/CSSStyleGuide.
112+
*/
113+
.js-docContent,
114+
.Documentation-content {
115+
max-width: 60rem;
116+
min-width: 0;
117+
width: 100%;
108118
}
109119
.Documentation-build {
110120
grid-column: span 2;
121+
text-align: center;
111122
}
112123
.DocNav {
113124
display: block;
@@ -238,3 +249,13 @@
238249
display: none;
239250
}
240251
}
252+
@media only screen and (min-width: 100rem) {
253+
.Documentation {
254+
grid-template-columns: 22rem minmax(0, auto);
255+
}
256+
}
257+
@media only screen and (min-width: 130rem) {
258+
.Documentation {
259+
grid-template-columns: 35rem minmax(0, auto);
260+
}
261+
}

‎content/static/css/stylesheet.css

+21-1
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,11 @@ code {
119119
.Site-footer {
120120
margin-top: 5rem;
121121
}
122+
@media only screen and (min-width: 57.7rem) {
123+
.Site-content {
124+
padding: 0 1.5rem;
125+
}
126+
}
122127

123128
.FeedbackButton {
124129
cursor: pointer;
@@ -160,6 +165,9 @@ code {
160165
min-height: 2.5rem;
161166
padding: 0.5rem 1.5rem;
162167
}
168+
.Site--wide .Banner-inner {
169+
max-width: none;
170+
}
163171
.Banner-message {
164172
color: #fff;
165173
margin-right: 1.25rem;
@@ -180,6 +188,9 @@ code {
180188
margin: 0 auto;
181189
max-width: 75.75rem;
182190
}
191+
.Site--wide .Header {
192+
max-width: none;
193+
}
183194
.Site-header {
184195
background: var(--turq-dark);
185196
box-shadow: 0 0.0625rem 0.125rem rgba(171, 171, 171, 0.3);
@@ -698,6 +709,9 @@ code {
698709
margin: 0 auto;
699710
max-width: 60em;
700711
}
712+
.Site--wide .DetailsContent {
713+
max-width: none;
714+
}
701715
.DetailsContent :target::before {
702716
content: ' ';
703717
display: block;
@@ -879,6 +893,9 @@ code {
879893
padding: 0 0.5rem;
880894
position: relative;
881895
}
896+
.Site--wide .DetailsNavFixed-container {
897+
max-width: none;
898+
}
882899
.DetailsNavFixed-logoLink {
883900
margin-right: 1rem;
884901
}
@@ -929,7 +946,7 @@ code {
929946
}
930947
@media only screen and (min-width: 37.5rem) {
931948
.DetailsNavFixed-container {
932-
padding: 0 0.5rem;
949+
padding: 0 1rem 0 1.5rem;
933950
}
934951
.DetailsNavFixed-logo {
935952
height: 1.9541rem;
@@ -1033,6 +1050,9 @@ code {
10331050
max-width: 60em;
10341051
position: relative;
10351052
}
1053+
.Site--wide .Container {
1054+
max-width: none;
1055+
}
10361056
.GodocButton,
10371057
.GodocButton:link,
10381058
.GodocButton:visited {

‎content/static/html/base.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
{{block "main_content_stylesheet" .}}{{end}}
2020
<link href="/third_party/dialog-polyfill/dialog-polyfill.css?version={{.AppVersionLabel}}" rel="stylesheet">
2121
<title>{{if .HTMLTitle}}{{.HTMLTitle}} · {{end}}pkg.go.dev</title>
22-
<body class="Site">
22+
<body class="Site{{if .AllowWideContent}} Site--wide{{end}}">
2323
<header class="Site-header Site-header--dark">
2424
<div class="Banner">
2525
<div class="Banner-inner">

‎internal/fetch/dochtml/template.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ var htmlPackage = template.Must(template.New("package").Funcs(
202202
</nav>
203203
{{end}}
204204
205-
<div class="js-docContent"> {{/* Documentation content container */}}
205+
<div class="Documentation-content js-docContent"> {{/* Documentation content container */}}
206206
207207
{{- if or .Doc (index .Examples.Map "") -}}
208208
<section class="Documentation-overview">

‎internal/frontend/directory.go

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ func (s *Server) serveDirectoryPage(ctx context.Context, w http.ResponseWriter,
4545
tab := r.FormValue("tab")
4646
settings, ok := directoryTabLookup[tab]
4747
if tab == "" || !ok || settings.Disabled {
48-
tab = "subdirectories"
48+
tab = tabSubdirectories
4949
settings = directoryTabLookup[tab]
5050
}
5151
header := createDirectoryHeader(vdir.Path, &vdir.ModuleInfo, vdir.Licenses)
@@ -76,7 +76,7 @@ func (s *Server) legacyServeDirectoryPage(ctx context.Context, w http.ResponseWr
7676
tab := r.FormValue("tab")
7777
settings, ok := directoryTabLookup[tab]
7878
if tab == "" || !ok || settings.Disabled {
79-
tab = "subdirectories"
79+
tab = tabSubdirectories
8080
settings = directoryTabLookup[tab]
8181
}
8282
licenses, err := ds.LegacyGetModuleLicenses(ctx, dbDir.ModulePath, dbDir.Version)

‎internal/frontend/module.go

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ func (s *Server) serveModulePage(ctx context.Context, w http.ResponseWriter, r *
6060
tab := r.FormValue("tab")
6161
settings, ok := moduleTabLookup[tab]
6262
if !ok {
63-
tab = "overview"
64-
settings = moduleTabLookup["overview"]
63+
tab = tabOverview
64+
settings = moduleTabLookup[tabOverview]
6565
}
6666
canShowDetails := modHeader.IsRedistributable || settings.AlwaysShowDetails
6767
var details interface{}

‎internal/frontend/package.go

+6-4
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,9 @@ func (s *Server) legacyServePackagePageWithPackage(w http.ResponseWriter, r *htt
101101
if !ok {
102102
var tab string
103103
if pkg.LegacyPackage.IsRedistributable {
104-
tab = "doc"
104+
tab = tabDoc
105105
} else {
106-
tab = "overview"
106+
tab = tabOverview
107107
}
108108
http.Redirect(w, r, fmt.Sprintf(r.URL.Path+"?tab=%s", tab), http.StatusFound)
109109
return nil
@@ -144,6 +144,7 @@ func (s *Server) legacyServePackagePageWithPackage(w http.ResponseWriter, r *htt
144144
linkVersion(pkg.Version, pkg.ModulePath),
145145
),
146146
}
147+
page.basePage.AllowWideContent = tab == tabDoc
147148
s.servePage(r.Context(), w, settings.TemplateName, page)
148149
return nil
149150
}
@@ -191,9 +192,9 @@ func (s *Server) servePackagePage(ctx context.Context,
191192
if !ok {
192193
var tab string
193194
if vdir.Directory.IsRedistributable {
194-
tab = "doc"
195+
tab = tabDoc
195196
} else {
196-
tab = "overview"
197+
tab = tabOverview
197198
}
198199
http.Redirect(w, r, fmt.Sprintf(r.URL.Path+"?tab=%s", tab), http.StatusFound)
199200
return nil
@@ -228,6 +229,7 @@ func (s *Server) servePackagePage(ctx context.Context,
228229
Tabs: packageTabSettings,
229230
PageType: pageType,
230231
}
232+
page.basePage.AllowWideContent = tab == tabDoc
231233
s.servePage(ctx, w, settings.TemplateName, page)
232234
return nil
233235
}

‎internal/frontend/server.go

+23-6
Original file line numberDiff line numberDiff line change
@@ -194,13 +194,30 @@ func (s *Server) staticPageHandler(templateName, title string) http.HandlerFunc
194194

195195
// basePage contains fields shared by all pages when rendering templates.
196196
type basePage struct {
197-
HTMLTitle string
198-
Query string
199-
Experiments *experiment.Set
200-
GodocURL string
201-
DevMode bool
202-
AppVersionLabel string
197+
// HTMLTitle is the value to use in the page’s <title> tag.
198+
HTMLTitle string
199+
200+
// Query is the current search query (if applicable).
201+
Query string
202+
203+
// Experiments contains the experiments currently active.
204+
Experiments *experiment.Set
205+
206+
// GodocURL is the URL of the corresponding page on godoc.org (if applicable).
207+
GodocURL string
208+
209+
// DevMode indicates whether the server is running in development mode.
210+
DevMode bool
211+
212+
// AppVersionLabel contains the current version of the app.
213+
AppVersionLabel string
214+
215+
// GoogleTagManagerID is the ID used to load Google Tag Manager.
203216
GoogleTagManagerID string
217+
218+
// AllowWideContent indicates whether the content should be displayed in a
219+
// way that’s amenable to wider viewports.
220+
AllowWideContent bool
204221
}
205222

206223
// licensePolicyPage is used to generate the static license policy page.

0 commit comments

Comments
 (0)