diff --git a/CHANGELOG.md b/CHANGELOG.md
index d47d900e45b9e2e8bf8441273d54ff723c88b185..d638708ead37eb4bc854e3ea881b0fd75c10b426 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
* `BUILD_MODULE_EXT_ENTITY_ACL_USER_MANAGEMENT_BUTTON` build variable with which
a button to the user management is added to the navbar for users with role
administration if `BUILD_MODULE_EXT_ENTITY_ACL=ENABLED`.
+* `BUILD_LONG_TEXT_PROPERTY_THRESHOLD_SINGLE` and
+ `BUILD_LONG_TEXT_PROPERTY_THRESHOLD_LIST` build variable. Any numeric value>0
+ will cause text properties with values longer than the threshold to be put
+ into a `details` tag with a shortened summary. `DISABLED` will disable this
+ feature. Defaults: 140 characters for single values, 40 for list values.
### Changed (for changes in existing functionality)
diff --git a/build.properties.d/00_default.properties b/build.properties.d/00_default.properties
index d21943b6fc51abf370b2939a7ac8a6bad72e9a04..7b6b38a6af7ec59522e4bd07de1d8ce45330b15b 100644
--- a/build.properties.d/00_default.properties
+++ b/build.properties.d/00_default.properties
@@ -66,6 +66,10 @@ BUILD_EXT_REFERENCES_CUSTOM_RESOLVER=caosdb_default_person_reference
BUILD_MODULE_EXT_EDITMODE_WYSIWYG_TEXT=DISABLED
BUILD_MODULE_EXT_PROPERTY_DISPLAY=DISABLED
+### Put long text property values into a details tag. "DISABLED" means disabled.
+BUILD_LONG_TEXT_PROPERTY_THRESHOLD_LIST=40
+BUILD_LONG_TEXT_PROPERTY_THRESHOLD_SINGLE=140
+
##############################################################################
# Navbar properties
##############################################################################
diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index 248f3444962a839193016a42dc4e9f730ba7d448..ba4bedebc95f571fb09ee73dea0781cf94e7f8b3 100644
--- a/src/core/css/webcaosdb.css
+++ b/src/core/css/webcaosdb.css
@@ -819,3 +819,96 @@ details p {
margin-right: 4px;
font-size: 11px;
}
+
+/* handle long text properties (single value) */
+
+.caosdb-f-property-value details summary {
+ display: inline;
+}
+
+.caosdb-f-property-value .spacer::after {
+ margin: 0;
+ content: "(show less)";
+ visibility: hidden;
+}
+
+.caosdb-f-property-value details[open] summary * {
+ display: none;
+}
+
+.caosdb-f-property-value details[open] summary {
+ float: right;
+}
+
+.caosdb-f-property-value details summary::after {
+ content: "... (show more)";
+ color: blue;
+}
+
+.caosdb-f-property-value details[open] summary::after {
+ content: "(show less)";
+
+ padding-right: calc(var(--bs-gutter-x) * .5);
+ position: absolute;
+ bottom: 0;
+ right: 0;
+}
+
+/* handle long text properties (list) */
+
+.caosdb-f-property-value .caosdb-value-list .spacer::after {
+ display: block;
+}
+
+.caosdb-f-property-value .caosdb-value-list details summary::after {
+ content: "...";
+}
+
+
+.caosdb-f-property-value .caosdb-value-list details[open] summary {
+ float: none;
+}
+
+.caosdb-f-property-value .caosdb-value-list details[open] summary::after {
+ content: "(show less)";
+ padding-right: calc(var(--bs-gutter-x) * .5);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: unset;
+}
+
+.caosdb-f-property-value .caosdb-value-list details[open] {
+ position: relative;
+ max-width: 80vw;
+}
+
+@media (min-width: 576px) {
+ .caosdb-f-property-value .caosdb-value-list details[open] {
+ max-width: 200px;
+ }
+}
+
+@media (min-width: 768px) {
+ .caosdb-f-property-value .caosdb-value-list details[open] {
+ max-width: 400px;
+ }
+}
+
+@media (min-width: 992px) {
+ .caosdb-f-property-value .caosdb-value-list details[open] {
+ max-width: 530px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .caosdb-f-property-value .caosdb-value-list details[open] {
+ max-width: 670px;
+ }
+}
+
+@media (min-width: 1400px) {
+ .caosdb-f-property-value .caosdb-value-list details[open] {
+ max-width: 800px;
+ }
+}
diff --git a/src/core/xsl/entity.xsl b/src/core/xsl/entity.xsl
index 3881e722608c6013b433a815f2db72a1896cd76e..9b485331fb4d4b40a2de3cac9ea50b82b57457ee 100644
--- a/src/core/xsl/entity.xsl
+++ b/src/core/xsl/entity.xsl
@@ -298,6 +298,7 @@
<xsl:param name="reference"/>
<xsl:param name="boolean"/>
<xsl:param name="datetime"/>
+ <xsl:param name="long-text-threshold"/>
<xsl:choose>
<xsl:when test="normalize-space($value)!=''">
<xsl:choose>
@@ -331,23 +332,38 @@
<xsl:value-of select="$value"/>
</xsl:element>
</xsl:when>
+ <!-- DEPRECATED css class .caosdb-property-text-value - Use
+ .caosdb-f-property-single-raw-value or introduce new
+ .caosdb-v-property-text-value -->
<xsl:otherwise>
- <xsl:element name="span">
- <xsl:attribute name="class">
- <!-- DEPRECATED css class .caosdb-property-text-value - Use
- .caosdb-f-property-single-raw-value or introduce new
- .caosdb-v-property-text-value -->
- <xsl:value-of select="'caosdb-f-property-single-raw-value caosdb-property-text-value caosdb-f-property-text-value caosdb-v-property-text-value'"/>
- </xsl:attribute>
- <xsl:call-template name="trim">
- <xsl:with-param name="str">
- <xsl:value-of select="$value"/>
- </xsl:with-param>
- </xsl:call-template>
- </xsl:element>
+ <xsl:choose>
+ <xsl:when test="$long-text-threshold != 'DISABLED' and string-length(normalize-space($value))>$long-text-threshold">
+ <details>
+ <span class="caosdb-f-property-single-raw-value caosdb-property-text-value caosdb-f-property-text-value caosdb-v-property-text-value">
+ <xsl:call-template name="trim">
+ <xsl:with-param name="str">
+ <xsl:value-of select="$value"/>
+ </xsl:with-param>
+ </xsl:call-template>
+ </span>
+ <span class="spacer"></span>
+ <summary><div title="show more"><span class="caosdb-f-property-text-value"><xsl:value-of select="substring(normalize-space($value),0,$long-text-threshold)"/></span></div></summary>
+ </details>
+ </xsl:when>
+ <xsl:otherwise>
+ <span class="caosdb-f-property-single-raw-value caosdb-property-text-value caosdb-f-property-text-value caosdb-v-property-text-value">
+ <xsl:call-template name="trim">
+ <xsl:with-param name="str">
+ <xsl:value-of select="$value"/>
+ </xsl:with-param>
+ </xsl:call-template>
+ </span>
+ </xsl:otherwise>
+ </xsl:choose>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
+ <!-- this is for empty values -->
<xsl:otherwise>
<!-- DEPRECATED css class .caosdb-property-text-value - Use
.caosdb-f-property-single-raw-value or introduce new
@@ -416,6 +432,9 @@
<xsl:with-param name="datetime">
<xsl:value-of select="../@datatype='LIST<DATETIME>'"/>
</xsl:with-param>
+ <xsl:with-param name="long-text-threshold">
+ <xsl:value-of select="'${BUILD_LONG_TEXT_PROPERTY_THRESHOLD_LIST}'"/>
+ </xsl:with-param>
</xsl:call-template>
</xsl:element>
</xsl:for-each>
@@ -470,6 +489,9 @@
<xsl:with-param name="datetime">
<xsl:value-of select="@datatype='DATETIME'"/>
</xsl:with-param>
+ <xsl:with-param name="long-text-threshold">
+ <xsl:value-of select="'${BUILD_LONG_TEXT_PROPERTY_THRESHOLD_SINGLE}'"/>
+ </xsl:with-param>
</xsl:call-template>
</xsl:otherwise>
</xsl:choose>