From 56b6fba09e737215eb7a8b023f4bb8ce3ad5f122 Mon Sep 17 00:00:00 2001
From: Timm Fitschen <t.fitschen@indiscale.com>
Date: Fri, 26 Jun 2020 10:26:37 +0200
Subject: [PATCH] EHN: new css classes for ext_bottom_line module
---
CHANGELOG.md | 3 +++
src/core/css/webcaosdb.css | 9 +++++++++
src/core/js/ext_bottom_line.js | 4 ++--
3 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 323abc3f..19d96209 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added (for new features, dependecies etc.)
+* new CSS classes for the styling of the default image and video preview of the
+ `ext_bottom_line` module: `caosdb-v-bottom-line-image-preview` and
+ `caosdb-v-bottom-line-video-preview`.
* basic support for entity versioning:
* entity.xsl generates a versioning button which opens a versioning info modal.
* `preview` also works for versioned references
diff --git a/src/core/css/webcaosdb.css b/src/core/css/webcaosdb.css
index ea7ca2a8..21a73e3a 100644
--- a/src/core/css/webcaosdb.css
+++ b/src/core/css/webcaosdb.css
@@ -27,6 +27,15 @@ body {
flex-direction: column;
}
+.caosdb-v-bottom-line-image-preview > img {
+ max-width: 400px;
+ max-height: 280px;
+}
+
+.caosdb-v-bottom-line-image-preview {
+ text-align: center;
+}
+
button.caosdb-v-entity-version-button {
height: 15px;
}
diff --git a/src/core/js/ext_bottom_line.js b/src/core/js/ext_bottom_line.js
index 25897319..1bcf73de 100644
--- a/src/core/js/ext_bottom_line.js
+++ b/src/core/js/ext_bottom_line.js
@@ -103,7 +103,7 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
*/
const _create_video_preview = function(entity) {
var path = connection.getFileSystemPath() + getEntityPath(entity);
- return $(`<video controls="controls"><source src="${path}"/></video>`)[0];
+ return $(`<div class="caosdb-v-bottom-line-video-preview"><video controls="controls"><source src="${path}"/></video></div>`)[0];
}
/**
@@ -114,7 +114,7 @@ var ext_bottom_line = function($, logger, is_in_view_port, load_config, getEntit
*/
const _create_picture_preview = function(entity) {
var path = connection.getFileSystemPath() + getEntityPath(entity);
- return $(`<img class="entity-image-preview" style="max-width: 200px; max-height=140px;" src="${path}"/>`)[0];
+ return $(`<div class="caosdb-v-bottom-line-image-preview"><img src="${path}"/></div>`)[0];
}
var fallback_preview = undefined;
--
GitLab