content/static: html template and styles for directories section
Creates the html template for the directories section of the unit page.
Change-Id: Ie52a432096d0b7eec9ff6a6b06581954cce92485
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/255041
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit.css b/content/static/css/unit.css
index 6f37702..52fbe91 100644
--- a/content/static/css/unit.css
+++ b/content/static/css/unit.css
@@ -7,6 +7,7 @@
@import './unit_header.css';
@import './unit_readme.css';
@import './unit_docs.css';
+@import './unit_directories.css';
.UnitContent {
max-width: 60rem;
diff --git a/content/static/css/unit_directories.css b/content/static/css/unit_directories.css
new file mode 100644
index 0000000..23826b9
--- /dev/null
+++ b/content/static/css/unit_directories.css
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+.UnitDirectories {
+ margin: 2rem 0;
+ overflow-x: auto;
+}
+.UnitDirectories::before {
+ content: '';
+ display: block;
+ position: relative;
+ width: 0;
+ height: 5em;
+ margin-top: -5em;
+}
+.UnitDirectories-title {
+ border-bottom: 0.0625rem solid var(--gray-8);
+ display: flex;
+ font-size: 1.375rem;
+ margin: 1rem 0 0 0;
+ padding-bottom: 1rem;
+}
+.UnitDirectories-title img {
+ height: 16px;
+ margin: auto 1rem auto 0;
+ width: auto;
+}
+.UnitDirectories-table {
+ margin-top: 1.5rem;
+ width: 100%;
+}
+.UnitDirectories-tableHeader {
+ background-color: var(--gray-9);
+}
+.UnitDirectories td {
+ border-bottom: 0.0625rem solid var(--gray-8);
+ max-width: 32rem;
+ padding: 0.75rem 0;
+ padding-right: 1rem;
+ padding: 0.5rem 1rem;
+}
+.UnitDirectories th {
+ text-align: left;
+ border-bottom: 0.0625rem solid var(--gray-8);
+ padding-right: 1rem;
+ padding-bottom: 0.5rem 1rem;
+ padding: 0.5rem 1rem;
+}
+.UnitDirectories-moduleTag {
+ background-color: var(--blue);
+ border-radius: 0.15rem;
+ color: var(--gray-1);
+ font-size: 0.74rem;
+ padding: 0.2rem 0.4rem;
+}
diff --git a/content/static/html/helpers/_unit_directories.tmpl b/content/static/html/helpers/_unit_directories.tmpl
new file mode 100644
index 0000000..ac41452
--- /dev/null
+++ b/content/static/html/helpers/_unit_directories.tmpl
@@ -0,0 +1,38 @@
+<!--
+ Copyright 2020 The Go Authors. All rights reserved.
+ Use of this source code is governed by a BSD-style
+ license that can be found in the LICENSE file.
+-->
+
+{{define "unit_directories"}}
+ <div class="UnitDirectories">
+ <h2 class="UnitDirectories-title">
+ <img height="25px" width="20px" src="/static/img/pkg-icon-folder_20x16.svg">Directories
+ </h2>
+ {{if .Packages}}
+ <table class="UnitDirectories-table">
+ <tr class="UnitDirectories-tableHeader">
+ <th>Path</th>
+ <th>Synopsis</th>
+ </tr>
+ {{range .Packages}}
+ <tr>
+ <td>
+ <a href="{{.URL}}">{{.PathAfterDirectory}}</a>
+ </td>
+ <td>{{.Synopsis}}</td>
+ </tr>
+ {{end}}
+ {{range .NestedModules}}
+ <tr>
+ <td>
+ <span class="UnitDirectories-moduleTag">MODULE</span>
+ <a href="/{{.ModulePath}}">{{.ModulePath}}</a>
+ </td>
+ <td></td>
+ </tr>
+ {{end}}
+ </table>
+ {{end}}
+ </div>
+{{end}}
\ No newline at end of file
diff --git a/content/static/html/helpers/_unit_docs.tmpl b/content/static/html/helpers/_unit_docs.tmpl
index 8172556..b207ad1 100644
--- a/content/static/html/helpers/_unit_docs.tmpl
+++ b/content/static/html/helpers/_unit_docs.tmpl
@@ -5,14 +5,14 @@
-->
{{define "unit_docs"}}
- {{if .Unit.Documentation }}
- <div class="UnitDocs">
- <h2 class="UnitDocs-title">
- <img height="25px" width="20px" src="/static/img/pkg-icon-docs_20x12.svg">Documentation
- </h2>
+ <div class="UnitDocs">
+ <h2 class="UnitDocs-title">
+ <img height="25px" width="20px" src="/static/img/pkg-icon-docs_20x12.svg">Documentation
+ </h2>
+ {{if .Unit.Documentation }}
<div class="Documentation">
{{.Unit.Documentation.HTML}}
</div>
- </div>
- {{end}}
-{{end}}
\ No newline at end of file
+ {{end}}
+ </div>
+{{end}}
diff --git a/content/static/html/helpers/_unit_readme.tmpl b/content/static/html/helpers/_unit_readme.tmpl
index eef1dd3..4475e29 100644
--- a/content/static/html/helpers/_unit_readme.tmpl
+++ b/content/static/html/helpers/_unit_readme.tmpl
@@ -5,17 +5,17 @@
-->
{{define "unit_readme"}}
- {{if .Readme }}
- <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}}" id="readme-top">
- <h2 class="UnitReadme-title">
- <img height="25px" width="20px" src="/static/img/pkg-icon-readme_20x16.svg">README
- </h2>
+ <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}}" id="readme-top">
+ <h2 class="UnitReadme-title">
+ <img height="25px" width="20px" src="/static/img/pkg-icon-readme_20x16.svg">README
+ </h2>
+ {{if .Readme }}
<div class="UnitReadme-content">
<div class="Overview-readmeContent">{{.Readme}}</div>
<div class="UnitReadme-fadeOut"></div>
</div>
<a class="UnitReadme-expandLink" href="?readme#readme-top">Expand ▾</a>
<a class="UnitReadme-collapseLink" href="?#readme-top">Collapse ▴</a>
- </div>
- {{end}}
+ {{end}}
+ </div>
{{end}}
diff --git a/content/static/html/pages/unit_details.tmpl b/content/static/html/pages/unit_details.tmpl
index be5b790..a580112 100644
--- a/content/static/html/pages/unit_details.tmpl
+++ b/content/static/html/pages/unit_details.tmpl
@@ -7,4 +7,5 @@
{{define "unit_content"}}
{{block "unit_readme" .}}{{end}}
{{block "unit_docs" .}}{{end}}
+ {{block "unit_directories" .}}{{end}}
{{end}}
diff --git a/content/static/img/pkg-icon-folder_20x16.svg b/content/static/img/pkg-icon-folder_20x16.svg
new file mode 100644
index 0000000..2b18852
--- /dev/null
+++ b/content/static/img/pkg-icon-folder_20x16.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16"><defs><path id="a" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(-2 -4)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g fill="#5F6368" mask="url(#b)"><path d="M0 0h24v24H0z"/></g></g></svg>
\ No newline at end of file
