content/static: responsive design updates
Creates intermediary layout for header details and
right sidebar content on unit pages to better support
screen widths 832px - 1024px.
Change-Id: I4d9957f2dd17b8d945858b506ac71fc23b53addc
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/307850
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 41c1b56..cd29687 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -152,7 +152,7 @@
padding-right: 1rem;
}
@media only screen and (min-width: 57.5rem) {
- .Site-margin {
+ .Site-margin {
max-width: 98rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index 105ff5f..b3ea76e 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -115,11 +115,14 @@
.UnitHeader--full .UnitHeader-details {
display: flex;
}
-@media only screen and (min-width: 64rem) {
+@media only screen and (min-width: 52rem) {
.UnitHeader-details {
align-items: center;
flex-direction: row;
}
+ .UnitHeader--full .UnitHeader-details {
+ flex-wrap: wrap;
+ }
}
@media only screen and (min-width: 70rem) {
.UnitHeader-details {
@@ -133,7 +136,7 @@
line-height: 1.75rem;
}
-@media only screen and (min-width: 64rem) {
+@media only screen and (min-width: 52rem) {
.UnitHeader-detailItem:not(:last-of-type)::after {
content: '|';
padding: 1rem;
diff --git a/content/static/css/unit_meta.css b/content/static/css/unit_meta.css
index 0f1bb91..46dea43 100644
--- a/content/static/css/unit_meta.css
+++ b/content/static/css/unit_meta.css
@@ -5,55 +5,115 @@
*/
.UnitMeta {
- display: block;
+ align-items: baseline;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 0.5rem;
}
-.UnitMeta a {
- display: block;
- margin-bottom: 1rem;
+@media screen and (max-width: 51.9375rem), (min-width: 64rem) {
+ .UnitMeta > div {
+ padding-bottom: 0.75rem;
+ }
+ .UnitMeta > h2 {
+ padding-bottom: 0.5rem;
+ }
+}
+@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
+ .UnitMeta {
+ align-items: baseline;
+ display: grid;
+ gap: 0.5rem 2.5rem;
+ grid-auto-columns: auto 1fr auto;
+ grid-template-areas:
+ 'a b c'
+ 'd e .'
+ 'f g .';
+ justify-content: space-between;
+ word-break: break-word;
+ }
+ .UnitMeta-detailsTitle {
+ grid-area: a;
+ }
+ .UnitMeta-details {
+ grid-area: b;
+ }
+ .UnitMeta-learn {
+ grid-area: c;
+ position: initial;
+ text-align: right;
+ }
+ .UnitMeta-repoTitle {
+ grid-area: d;
+ }
+ .UnitMeta-repo {
+ grid-area: e;
+ }
+ .UnitMeta-linksTitle {
+ grid-area: f;
+ }
+ .UnitMeta-links {
+ grid-area: g;
+ }
+}
+.UnitMeta-learn {
+ font-size: 0.875rem;
+ position: absolute;
+ right: 1rem;
+}
+@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
+ .UnitMeta-learn {
+ padding-top: 0.25rem;
+ }
+}
+.UnitMeta-repo a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+}
+.UnitMeta-detailsTitle,
+.UnitMeta-linksTitle,
+.UnitMeta-repoTitle {
+ font-size: 1rem;
+ margin: 0;
+ white-space: nowrap;
+}
+.UnitMeta-links,
+.UnitMeta-repo {
width: 100%;
}
-.UnitMeta-header {
- font-weight: bold;
- margin: 1.125rem 0;
-}
+.UnitMeta-details ul,
+.UnitMeta-links ul,
.UnitMeta-repo {
- font-size: 1rem;
- margin-bottom: 0.5rem;
-}
-
-.UnitMetaDetails-header {
+ color: var(--gray-4);
display: flex;
- font-size: 1rem;
- font-weight: bold;
- justify-content: space-between;
- line-height: 1rem;
- margin-bottom: 0.5rem;
- padding-bottom: 0.5rem;
+ flex-direction: column;
+ font-size: 0.875rem;
+ line-height: 1.75rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
+ width: 100%;
}
-@media only screen and (min-width: 64rem) {
- .UnitMetaDetails-header {
- border-bottom: 0.0625rem solid var(--gray-8);
- margin-top: 0.625rem;
+@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
+ .UnitMeta-details ul,
+ .UnitMeta-links ul,
+ .UnitMeta-repo {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.125rem 1rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ white-space: nowrap;
}
}
-.UnitMetaDetails a {
- font-size: 1rem;
- font-weight: normal;
- text-transform: none;
-}
-.UnitMetaDetails .UnitMetaDetails-header > a {
- font-size: 0.875rem;
-}
-.UnitMetaDetails ul {
- list-style: none;
- padding-inline-start: 0;
-}
-.UnitMetaDetails li {
- font-size: 1rem;
- margin-bottom: 0.75rem;
+.UnitMeta-details li,
+.UnitMeta-links li {
+ overflow: hidden;
+ padding-right: 1rem;
+ text-overflow: ellipsis;
white-space: nowrap;
}
.UnitMetaDetails-icon {
diff --git a/content/static/html/helpers/_unit_meta.tmpl b/content/static/html/helpers/_unit_meta.tmpl
index a702e90..4b3b41d 100644
--- a/content/static/html/helpers/_unit_meta.tmpl
+++ b/content/static/html/helpers/_unit_meta.tmpl
@@ -5,30 +5,42 @@
-->
{{define "unit_meta"}}
- {{template "unit_meta_details" .}}
<div class="UnitMeta">
- <div class="UnitMeta-header">Repository</div>
- {{if .Details.RepositoryURL}}
- <a href="{{.Details.RepositoryURL}}" title="{{.Details.RepositoryURL}}" target="_blank" rel="noopener">
- {{.Details.RepositoryURL}}
- </a>
- {{else}}
- Repository URL not available.
- {{end}}
+ <h2 class="UnitMeta-detailsTitle">Details</h2>
+ <div class="UnitMeta-details">
+ {{template "unit_meta_details" .}}
+ </div>
+ <div class="UnitMeta-learn">
+ <a href="/about#best-practices-h2">Learn more</a>
+ </div>
+ <h2 class="UnitMeta-repoTitle">Repository</h2>
+ <div class="UnitMeta-repo">
+ {{if .Details.RepositoryURL}}
+ <a href="{{.Details.RepositoryURL}}" title="{{.Details.RepositoryURL}}" target="_blank" rel="noopener">
+ {{.Details.RepositoryURL}}
+ </a>
+ {{else}}
+ Repository URL not available.
+ {{end}}
+ </div>
{{if or .Details.ReadmeLinks .Details.DocLinks .Details.ModuleReadmeLinks}}
- <div class="UnitMeta-header">Links</div>
+ <h2 class="UnitMeta-linksTitle">Links</h2>
{{end}}
- {{template "unit_meta_links" .Details.ReadmeLinks}}
- {{template "unit_meta_links" .Details.DocLinks}}
- {{template "unit_meta_links" .Details.ModuleReadmeLinks}}
+ <div class="UnitMeta-links">
+ <ul>
+ {{template "unit_meta_links" .Details.ReadmeLinks}}
+ {{template "unit_meta_links" .Details.DocLinks}}
+ {{template "unit_meta_links" .Details.ModuleReadmeLinks}}
+ </ul>
+ </div>
</div>
{{end}}
{{define "unit_meta_links"}}
{{range .}}
- <div class="UnitMeta-repo">
+ <li>
<a href="{{.Href}}" title="{{.Href}}" target="_blank" rel="noopener">{{.Body}}</a>
- </div>
+ </li>
{{end}}
{{end}}
@@ -52,29 +64,26 @@
{{end}}
{{define "unit_meta_details"}}
- <div class="UnitMetaDetails">
- <div class="UnitMetaDetails-header">Details<a href="/about#best-practices-h2">Learn more</a></div>
- <ul>
- <li>
- {{template "unit_meta_details_check" .Unit.HasGoMod}}
- Valid <a href="{{.Details.ModFileURL}}" target="_blank">go.mod</a> file
- {{template "unit_meta_details_toggletip" "The Go module system was introduced in Go 1.11 and is the official dependency management solution for Go."}}
- </li>
- <li>
- {{template "unit_meta_details_check" .Unit.IsRedistributable}}
- Redistributable license
- {{template "unit_meta_details_toggletip" "Redistributable licenses place minimal restrictions on how software can be used, modified, and redistributed."}}
- </li>
- <li>
- {{template "unit_meta_details_check" .Details.IsTaggedVersion}}
- Tagged version
- {{template "unit_meta_details_toggletip" "Modules with tagged versions give importers more predictable builds."}}
- </li>
- <li>
- {{template "unit_meta_details_check" .Details.IsStableVersion}}
- Stable version
- {{template "unit_meta_details_toggletip" "When a project reaches major version v1 it is considered stable."}}
- </li>
- </ul>
- </div>
+ <ul>
+ <li>
+ {{template "unit_meta_details_check" .Unit.HasGoMod}}
+ Valid <a href="{{.Details.ModFileURL}}" target="_blank">go.mod</a> file
+ {{template "unit_meta_details_toggletip" "The Go module system was introduced in Go 1.11 and is the official dependency management solution for Go."}}
+ </li>
+ <li>
+ {{template "unit_meta_details_check" .Unit.IsRedistributable}}
+ Redistributable license
+ {{template "unit_meta_details_toggletip" "Redistributable licenses place minimal restrictions on how software can be used, modified, and redistributed."}}
+ </li>
+ <li>
+ {{template "unit_meta_details_check" .Details.IsTaggedVersion}}
+ Tagged version
+ {{template "unit_meta_details_toggletip" "Modules with tagged versions give importers more predictable builds."}}
+ </li>
+ <li>
+ {{template "unit_meta_details_check" .Details.IsStableVersion}}
+ Stable version
+ {{template "unit_meta_details_toggletip" "When a project reaches major version v1 it is considered stable."}}
+ </li>
+ </ul>
{{end}}
diff --git a/content/static/img/pkg-icon-help_24x24.svg b/content/static/img/pkg-icon-help_24x24.svg
index ac7a460..2508a31 100644
--- a/content/static/img/pkg-icon-help_24x24.svg
+++ b/content/static/img/pkg-icon-help_24x24.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#6e7072" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
\ No newline at end of file
