Resource entries: button in the first screen, shorter creator lists, linked clusters

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). */

layouts/curated_resources/single.html

@@ -1,55 +1,80 @@
 {{- 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" }}
   {{ $values := slice }}
   {{ 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 }}
 <div class="wrap">
-  <div class="article-layout">
-    <section class="article-card" aria-label="About this resource">
-      <h2>About this resource</h2>
-      <dl>
-        {{ range $details }}{{ if .values }}<dt>{{ .label }}</dt><dd>{{ delimit .values ", " }}</dd>{{ 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 }}<dt>Cluster</dt><dd>{{ delimit . ", " }}</dd>{{ end }}{{ end }}
-        <dt>Last updated</dt><dd>{{ .Lastmod.Format "2 January 2006" }}</dd>
-      </dl>
-    </section>
+  <div class="article-layout article-layout-resource">
     <article class="reading">
       <header class="article-head">
         <nav class="crumbs" aria-label="Breadcrumb"><a href="{{ "" | relLangURL }}">Home</a> <span aria-hidden="true">/</span> <a href="{{ relref . "/resources" }}">Resources</a> <span aria-hidden="true">/</span> <span aria-current="page">{{ .Title }}</span></nav>
-        {{ with $clean.material_type }}<div class="article-meta">{{ range . }}<span>{{ . }}</span>{{ end }}</div>{{ end }}
+        {{ with $clean.material_type }}<p class="resource-kind">{{ delimit . ", " }}</p>{{ end }}
         <h1>{{ .Title }}</h1>
         {{ with .Params.subtitle }}<p class="standfirst">{{ . | markdownify | emojify }}</p>{{ end }}
-        {{ with $clean.creators }}<div class="byline"><span class="byline-authors">By {{ delimit . ", " }}</span></div>{{ end }}
+        {{ with $clean.creators }}
+        <div class="byline"><div class="byline-authors">
+          {{- if gt (len .) (add $shown 1) -}}
+          By {{ delimit (first $shown .) ", " }}
+          <details class="byline-more"><summary>and {{ sub (len .) $shown }} more</summary><p>{{ delimit (after $shown .) ", " }}</p></details>
+          {{- else -}}
+          By {{ delimit . ", " }}
+          {{- end -}}
+        </div></div>
+        {{ end }}
       </header>
-      {{ with partial "doors/resource_url" . }}<p class="resource-open"><a class="btn btn-primary" href="{{ . }}">Open this resource</a></p>{{ 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 "<strong>Level</strong> %s" (delimit . ", " | htmlEscape)) }}{{ end }}
-      {{ with $clean.primary_user }}{{ $facts = $facts | append (printf "<strong>For</strong> %s" (delimit . ", " | htmlEscape)) }}{{ end }}
-      {{ with $clean.language }}{{ $facts = $facts | append (printf "<strong>Language</strong> %s" (delimit . ", " | htmlEscape)) }}{{ end }}
-      {{ with $facts }}<p class="resource-facts">{{ delimit . " · " | safeHTML }}</p>{{ end }}
+      {{ with $url }}
+      <p class="resource-open"><a class="btn btn-primary" href="{{ . }}"{{ with $host }} aria-describedby="resource-host"{{ end }}>Open this resource{{ if and $host (ne $host "forrt.org") }} <i class="fas fa-external-link-alt" aria-hidden="true"></i>{{ end }}</a>{{ with $host }} <span class="resource-host" id="resource-host">{{ . }}</span>{{ end }}</p>
+      {{ end }}
       <div class="article-style">
         {{ with .Params.abstract }}<h2>{{ i18n "abstract" }}</h2>{{ $.RenderString (dict "display" "block") . }}{{ end }}
         {{ partial "doors/content" .Content }}
       </div>
-      <div class="article-foot">
-        {{ partial "doors/resource_keywords" . }}
-        {{ if site.Params.section_pager }}<div class="article-widget">{{ partial "section_pager" . }}</div>{{ end }}
-        {{ partial "page_related" . }}
-      </div>
+      {{ partial "doors/resource_keywords" . }}
     </article>
+    <section class="article-card" aria-label="About this resource">
+      <h2>About this resource</h2>
+      <dl>
+        {{ range $details }}{{ if .values }}<dt{{ with .class }} class="{{ . }}"{{ end }}>{{ .label }}</dt><dd{{ with .class }} class="{{ . }}"{{ end }}>{{ delimit .values ", " }}</dd>{{ 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 `<a href="%s">%s</a>` . ($name | htmlEscape)) }}{{ else }}{{ $names = $names | append ($name | htmlEscape) }}{{ end }}{{ end }}
+          <dt>Cluster</dt><dd>{{ delimit $names ", " | safeHTML }}</dd>
+        {{ end }}{{ end }}
+        <dt>Last updated</dt><dd>{{ .Lastmod.Format "2 January 2006" }}</dd>
+      </dl>
+    </section>
+    <div class="article-foot">
+      {{ if site.Params.section_pager }}<div class="article-widget">{{ partial "section_pager" . }}</div>{{ end }}
+      {{ partial "page_related" . }}
+    </div>
   </div>
 </div>
 {{- end -}}