diff --git a/assets/css/doors/article.css b/assets/css/doors/article.css index a3d6e3fa2a4..4bfef085d22 100644 --- a/assets/css/doors/article.css +++ b/assets/css/doors/article.css @@ -154,8 +154,31 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti .term-list a:hover{color:var(--ink)} .term-list a[aria-current]{color:var(--ink);font-weight:700;text-decoration:none} @media(max-width:1000px){.term-list{max-height:340px}} -.resource-open{margin:0 0 24px} +.resource-open{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 24px} .resource-open .btn{padding:10px 22px;font-size:17px} +.resource-open .btn .fa-external-link-alt{margin-inline-start:4px;font-size:14px} +.resource-host{font-size:16px;color:var(--soft);overflow-wrap:anywhere} +/* A resource entry: the entry, then its details card, then Previous and Next. On a desktop the card + sits in the left column beside both; the second row takes any extra height of a long card. */ +.article-layout .resource-kind{margin:0 0 12px;max-width:60ch;font-size:16px;font-weight:600;color:var(--soft)} +.article-layout .byline-more{display:inline} +.article-layout .byline-more>summary{display:inline-block;margin-inline-start:.3em;color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer} +.article-layout .byline-more>summary:hover{color:var(--ink)} +.article-layout .byline-more>p{margin:6px 0 0} +.article-layout.article-layout-resource .resource-keywords{margin-top:24px} +.article-layout-resource .article-card dd a{color:var(--link);text-decoration:underline;text-underline-offset:3px} +.article-layout-resource>.article-foot{margin-top:0} +@media(min-width:1001px){ + .article-layout-resource:not(.article-layout-wide){grid-template-rows:auto 1fr;row-gap:32px} + .article-layout-resource:not(.article-layout-wide)>.article-card{grid-row:1/span 2} + .article-layout-resource>.article-foot{grid-column:2;grid-row:2} +} +@media(max-width:1000px){ + .article-layout-resource .article-card{order:0} + .article-layout-resource .article-card .resource-type{display:none} + .article-layout-resource .article-card .resource-type+dd+dt{margin-top:0} + .article-layout .byline-more>summary{min-height:44px;display:inline-flex;align-items:center} +} .article-layout .article-tags{margin:0 0 18px} .article-layout .resource-keywords{max-width:32em;margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--soft)} .article-layout .resource-keywords strong{margin-inline-end:6px;color:var(--ink)} @@ -284,8 +307,6 @@ main:lang(ar) .article-layout .article-style,main:lang(ar) .article-layout .arti .booklet-open .btn{margin-inline-end:10px} @media(max-width:1000px){.profile-head .profile-org{font-weight:400}.profile-head ul.network-icon{margin:4px 0 0}.profile-head ul.network-icon a{text-decoration:none}} .article-layout .article-style .btn.btn-primary,.article-layout .article-style .btn.btn-lg{padding:10px 22px!important;font-size:17px!important} -.resource-facts{display:none} -@media(max-width:1000px){.resource-facts{display:block;margin:-6px 0 22px;font-size:16px;line-height:1.5;color:var(--soft)}.resource-facts strong{color:var(--ink);font-weight:600}} .byline-date{display:none} @media(max-width:1000px){.article-layout .byline-date{display:inline}} /* A search over a long list on the page (shortcodes/list_filter.html). */ diff --git a/layouts/curated_resources/single.html b/layouts/curated_resources/single.html index d5872c4e233..14752a88500 100644 --- a/layouts/curated_resources/single.html +++ b/layouts/curated_resources/single.html @@ -1,5 +1,6 @@ {{- define "main" -}} -{{/* A curated resource, on the reading layout: what it is on the left, and its details beside it. +{{/* A curated resource, on the reading layout: what it is first, then its details, then Previous and Next. + On a desktop the grid puts the details card in the left column; on a phone it follows the entry. Pages are generated from the FORRT database sheet, so any list field can be missing. */}} {{ $clean := dict }} {{ range slice "material_type" "education_level" "primary_user" "subject_areas" "language" "creators" }} @@ -7,49 +8,73 @@ {{ range index $.Params . }}{{ if . }}{{ $values = $values | append . }}{{ end }}{{ end }} {{ $clean = merge $clean (dict . $values) }} {{ end }} +{{/* The type also shows above the title, so on a phone its row in the card is left out. */}} {{ $details := slice - (dict "label" "Type of resources" "values" $clean.material_type) + (dict "label" "Type of resources" "values" $clean.material_type "class" "resource-type") (dict "label" "Education level(s)" "values" $clean.education_level) (dict "label" "Primary user(s)" "values" $clean.primary_user) (dict "label" "Subject area(s)" "values" $clean.subject_areas) (dict "label" "Language(s)" "values" $clean.language) }} +{{/* Cluster pages by name, matched in lower case, so a cluster in the card can link to its page. */}} +{{ $clusterPages := dict }} +{{ range $c := site.Data.clusters_v4.clusters }} + {{ with site.GetPage (printf "/clusters/cluster-%d" (int $c.number)) }}{{ $clusterPages = merge $clusterPages (dict (lower $c.name) .RelPermalink) }}{{ end }} +{{ end }} +{{ $url := partial "doors/resource_url" . }} +{{/* Where the button goes: the link's host without "www.", and doi.org for any DOI resolver. */}} +{{ $host := "" }} +{{ with $url }} + {{ $host = lower (urls.Parse .).Hostname | strings.TrimPrefix "www." }} + {{ if eq $host "dx.doi.org" }}{{ $host = "doi.org" }}{{ end }} +{{ end }} +{{/* Long creator lists show the first six names and keep the rest behind a disclosure, so the button stays in view. */}} +{{ $shown := 6 }}
-
-
-

About this resource

-
- {{ range $details }}{{ if .values }}
{{ .label }}
{{ delimit .values ", " }}
{{ end }}{{ end }} - {{/* The clusters the directory filters by, from forrt_clusters_new; none when that is empty. */}} - {{ with index (partialCached "doors/resource_index" (site.GetPage "/resources") "resources").items .RelPermalink }}{{ with .clusters }}
Cluster
{{ delimit . ", " }}
{{ end }}{{ end }} -
Last updated
{{ .Lastmod.Format "2 January 2006" }}
-
-
+
- {{ with $clean.material_type }}{{ end }} + {{ with $clean.material_type }}

{{ delimit . ", " }}

{{ end }}

{{ .Title }}

{{ with .Params.subtitle }}

{{ . | markdownify | emojify }}

{{ end }} - {{ with $clean.creators }}{{ end }} + {{ with $clean.creators }} + + {{ end }}
- {{ with partial "doors/resource_url" . }}

Open this resource

{{ end }} - {{/* On a narrow screen the side card follows the whole entry, so who it is for comes first here. */}} - {{ $facts := slice }} - {{ with $clean.education_level }}{{ $facts = $facts | append (printf "Level %s" (delimit . ", " | htmlEscape)) }}{{ end }} - {{ with $clean.primary_user }}{{ $facts = $facts | append (printf "For %s" (delimit . ", " | htmlEscape)) }}{{ end }} - {{ with $clean.language }}{{ $facts = $facts | append (printf "Language %s" (delimit . ", " | htmlEscape)) }}{{ end }} - {{ with $facts }}

{{ delimit . " ยท " | safeHTML }}

{{ end }} + {{ with $url }} +

Open this resource{{ if and $host (ne $host "forrt.org") }} {{ end }}{{ with $host }} {{ . }}{{ end }}

+ {{ end }}
{{ with .Params.abstract }}

{{ i18n "abstract" }}

{{ $.RenderString (dict "display" "block") . }}{{ end }} {{ partial "doors/content" .Content }}
-
- {{ partial "doors/resource_keywords" . }} - {{ if site.Params.section_pager }}
{{ partial "section_pager" . }}
{{ end }} - {{ partial "page_related" . }} -
+ {{ partial "doors/resource_keywords" . }}
+
+

About this resource

+
+ {{ range $details }}{{ if .values }}{{ .label }}{{ delimit .values ", " }}{{ end }}{{ end }} + {{/* The clusters the directory filters by, from forrt_clusters_new; none when that is empty. */}} + {{ with index (partialCached "doors/resource_index" (site.GetPage "/resources") "resources").items .RelPermalink }}{{ with .clusters }} + {{ $names := slice }} + {{ range $name := . }}{{ with index $clusterPages (lower $name) }}{{ $names = $names | append (printf `%s` . ($name | htmlEscape)) }}{{ else }}{{ $names = $names | append ($name | htmlEscape) }}{{ end }}{{ end }} +
Cluster
{{ delimit $names ", " | safeHTML }}
+ {{ end }}{{ end }} +
Last updated
{{ .Lastmod.Format "2 January 2006" }}
+
+
+
+ {{ if site.Params.section_pager }}
{{ partial "section_pager" . }}
{{ end }} + {{ partial "page_related" . }} +
{{- end -}}