diff --git a/geniza/corpus/templates/corpus/document_detail.html b/geniza/corpus/templates/corpus/document_detail.html
index fdc154465..c1a9ea4dc 100644
--- a/geniza/corpus/templates/corpus/document_detail.html
+++ b/geniza/corpus/templates/corpus/document_detail.html
@@ -123,6 +123,39 @@
+ {% if document.has_image or document.digital_editions.count or document.digital_translations.count %}
+ {% with n_transcriptions=document.digital_editions.count n_translations=document.digital_translations.count %}
+
+ {# Translators: label for document content stats (number of translations, transcriptions, images) #}
+ {% translate "What's in the PGP" %}
+
+ {# translators: indicator that a document has an image #}
+ {% if document.has_image %}- {% translate 'Image' %}
{% endif %}
+ {% if n_transcriptions > 0 %}
+ {# translators: n_transcriptions is the number of a document's digitized transcriptions #}
+ -
+ {% blocktranslate count counter=n_transcriptions trimmed %}
+ {{ n_transcriptions }} Transcription
+ {% plural %}
+ {{ n_transcriptions }} Transcriptions
+ {% endblocktranslate %}
+
+ {% endif %}
+ {% if n_translations > 0 %}
+ {# translators: n_translations is the number of a document's digitized translations #}
+ -
+ {% blocktranslate count counter=n_translations trimmed %}
+ {{ n_translations }} Translation
+ {% plural %}
+ {{ n_translations }} Translations
+ {% endblocktranslate %}
+
+ {% endif %}
+
+
+ {% endwith %}
+ {% endif %}
+
{# Translators: label for document description #}
{% translate 'Description' %}
diff --git a/geniza/corpus/tests/test_corpus_templates.py b/geniza/corpus/tests/test_corpus_templates.py
index 87041a838..aa71d460d 100644
--- a/geniza/corpus/tests/test_corpus_templates.py
+++ b/geniza/corpus/tests/test_corpus_templates.py
@@ -433,6 +433,44 @@ def test_source_location(self, client, document, source):
)
assertNotContains(response, "p. 25") # should not show when removed
+ def test_whats_in_pgp(self, client, document, source, unpublished_editions):
+ """Document detail template should show what's in the PGP"""
+ # has no image, transcription or translation
+ empty_doc = Document.objects.create()
+ response = client.get(empty_doc.get_absolute_url())
+ assertNotContains(response, "What's in the PGP")
+
+ # has image but no transcription or translation
+ response = client.get(document.get_absolute_url())
+ assertContains(response, "What's in the PGP")
+ assertContains(response, 'Image')
+ assertNotContains(response, '')
+ assertNotContains(response, '')
+
+ # add a footnote with a digital edition
+ Footnote.objects.create(
+ content_object=document,
+ source=unpublished_editions,
+ doc_relation=[Footnote.DIGITAL_EDITION],
+ )
+ response = client.get(document.get_absolute_url())
+ assertContains(response, '')
+ assertContains(response, "1 Transcription")
+
+ # add two footnotes with digital translation
+ Footnote.objects.create(
+ content_object=document,
+ source=source,
+ doc_relation=[Footnote.DIGITAL_TRANSLATION],
+ )
+ Footnote.objects.create(
+ content_object=document,
+ source=unpublished_editions,
+ doc_relation=[Footnote.DIGITAL_TRANSLATION],
+ )
+ response = client.get(document.get_absolute_url())
+ assertContains(response, "2 Translations")
+
class TestDocumentTabsSnippet:
def test_detail_link(self, client, document):
diff --git a/sitemedia/scss/pages/_document.scss b/sitemedia/scss/pages/_document.scss
index c08f37ecc..0c83ef428 100644
--- a/sitemedia/scss/pages/_document.scss
+++ b/sitemedia/scss/pages/_document.scss
@@ -21,9 +21,11 @@
main.document {
max-width: 100vw;
@include breakpoints.for-tablet-landscape-up {
- box-sizing: content-box;
- * {
- max-width: 896px;
+ .container,
+ .container *,
+ section,
+ section * {
+ max-width: calc(896px + 2rem);
}
}
// Primary container
@@ -98,14 +100,12 @@ main.document {
margin: 2rem 0 0;
align-self: flex-start;
margin-left: 0;
- padding: 0 spacing.$spacing-md 2rem;
}
}
- // "Description" header and content
+ // "what's in the PGP" and "description"
+ section.content-stats,
section.description {
- padding-bottom: 2rem;
margin: spacing.$spacing-md 0 0;
- border-bottom: 1px solid var(--disabled);
@include breakpoints.for-tablet-landscape-up {
margin: 2rem 0 0;
}
@@ -118,6 +118,68 @@ main.document {
@include meta-marker;
}
}
+ }
+ // what's in the pgp
+ section.content-stats ul {
+ display: flex;
+ flex-flow: row wrap;
+ margin-left: 1.25rem;
+ gap: 1rem;
+ @include breakpoints.for-tablet-landscape-up {
+ gap: 1.5rem;
+ }
+ li + li {
+ border-left: 1px solid var(--disabled);
+ padding-left: 1rem;
+ @include breakpoints.for-tablet-landscape-up {
+ padding-left: 1.5rem;
+ }
+ }
+ li {
+ display: flex;
+ align-items: center;
+ gap: 0.625rem;
+ &::before {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ background-color: var(--background-light);
+ width: 1.5rem;
+ height: 1.5rem;
+ @include breakpoints.for-tablet-landscape-up {
+ width: 2rem;
+ height: 2rem;
+ }
+ }
+ }
+ li.has-image::before {
+ content: "\f1dd"; // phosphor ph-image icon
+ @include typography.icon-button-sm;
+ @include breakpoints.for-tablet-landscape-up {
+ @include typography.icon-button-md;
+ }
+ }
+ li.transcription-count::before {
+ content: "a";
+ font-size: typography.$text-size-xl;
+ @include breakpoints.for-tablet-landscape-up {
+ font-size: typography.$text-size-4xl;
+ }
+ }
+ li.translation-count::before {
+ content: "א";
+ @include typography.transcription;
+ @include breakpoints.for-tablet-landscape-up {
+ font-size: typography.$text-size-4xl;
+ padding-bottom: 2px;
+ }
+ }
+ }
+ // Description
+ section.description {
+ padding-bottom: 2rem;
+ border-bottom: 1px solid var(--disabled);
p {
white-space: pre-line;
padding-left: 1.25rem;
@@ -142,6 +204,7 @@ main.document {
@include breakpoints.for-tablet-landscape-up {
width: 896px;
margin: 2rem 0;
+ padding: 0;
}
@include typography.body;
color: var(--extra-metadata-text);