content/static: html template and styles for readme section
Creates the html template for the new readme. Part of a series of
changes related to the new unit page.
Change-Id: Idbddcd00837aaa399d64aff4ef897d8dd75d0136
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/254842
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 2599425..e682cf3 100644
--- a/content/static/css/unit.css
+++ b/content/static/css/unit.css
@@ -4,7 +4,8 @@
* license that can be found in the LICENSE file.
*/
-@import './_unit_header.css';
+@import './unit_header.css';
+@import './unit_readme.css';
.UnitContent {
max-width: 60rem;
diff --git a/content/static/css/_unit_header.css b/content/static/css/unit_header.css
similarity index 100%
rename from content/static/css/_unit_header.css
rename to content/static/css/unit_header.css
diff --git a/content/static/css/unit_readme.css b/content/static/css/unit_readme.css
new file mode 100644
index 0000000..ec11e51
--- /dev/null
+++ b/content/static/css/unit_readme.css
@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+.UnitReadme {
+ margin-top: 2rem;
+}
+.UnitReadme::before {
+ content: '';
+ display: block;
+ position: relative;
+ width: 0;
+ height: 5em;
+ margin-top: -5em;
+}
+.UnitReadme-title {
+ border-bottom: 0.0625rem solid var(--gray-8);
+ display: flex;
+ font-size: 1.375rem;
+ margin: 1rem 0 0 0;
+ padding-bottom: 1rem;
+}
+.UnitReadme-title img {
+ margin-right: 1rem;
+}
+.UnitReadme-content {
+ position: relative;
+ max-height: 20rem;
+ overflow: hidden;
+}
+.UnitReadme-fadeOut {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ margin: 0;
+ padding: 30px 0;
+ background-image: linear-gradient(to bottom, transparent, var(--white));
+}
+.UnitReadme-expandLink {
+ cursor: pointer;
+ padding: 10px 0;
+ color: var(--turq-dark);
+}
+.UnitReadme-collapseLink {
+ cursor: pointer;
+ display: none;
+ padding: 10px 0;
+ color: var(--turq-dark);
+}
+.UnitReadme--expanded .UnitReadme-content {
+ max-height: initial;
+}
+.UnitReadme--expanded .UnitReadme-fadeOut {
+ display: none;
+}
+.UnitReadme--expanded .UnitReadme-expandLink {
+ display: none;
+}
+.UnitReadme--expanded .UnitReadme-collapseLink {
+ display: block;
+}
diff --git a/content/static/html/helpers/_unit_header.tmpl b/content/static/html/helpers/_unit_header.tmpl
index 9e700d4..35fe984 100644
--- a/content/static/html/helpers/_unit_header.tmpl
+++ b/content/static/html/helpers/_unit_header.tmpl
@@ -1,5 +1,5 @@
<!--
- Copyright 2019 The Go Authors. All rights reserved.
+ 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.
-->
@@ -66,4 +66,4 @@
{{end}}
</div>
</header>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/content/static/html/helpers/_unit_readme.tmpl b/content/static/html/helpers/_unit_readme.tmpl
new file mode 100644
index 0000000..eef1dd3
--- /dev/null
+++ b/content/static/html/helpers/_unit_readme.tmpl
@@ -0,0 +1,21 @@
+<!--
+ 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_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-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}}
diff --git a/content/static/html/pages/unit_details.tmpl b/content/static/html/pages/unit_details.tmpl
index 627f050..d215a79 100644
--- a/content/static/html/pages/unit_details.tmpl
+++ b/content/static/html/pages/unit_details.tmpl
@@ -5,5 +5,5 @@
-->
{{define "unit_content"}}
-
+ {{block "unit_readme" .}}{{end}}
{{end}}
