Frontend: Show description in photo viewer and card view
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
parent
950b6440be
commit
6936b7f8d1
722
frontend/package-lock.json
generated
722
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -28,7 +28,7 @@
|
|||
"@fortawesome/fontawesome-free": "^5.13.0",
|
||||
"acorn": "6.4.1",
|
||||
"ajv": "^6.12.2",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"autoprefixer": "^9.8.0",
|
||||
"axios": "^0.19.2",
|
||||
"axios-mock-adapter": "^1.18.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
|
@ -64,9 +64,9 @@
|
|||
"hls.js": "^0.13.2",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"http-proxy-middleware": "^0.19.1",
|
||||
"i18n-iso-countries": "^5.3.0",
|
||||
"i18n-iso-countries": "^5.4.0",
|
||||
"inject-loader": "^4.0.1",
|
||||
"karma": "^5.0.5",
|
||||
"karma": "^5.0.8",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "^2.1.1",
|
||||
"karma-htmlfile-reporter": "^0.3.8",
|
||||
|
@ -74,13 +74,13 @@
|
|||
"karma-verbose-reporter": "^0.0.6",
|
||||
"karma-webpack": "^4.0.2",
|
||||
"luxon": "^1.24.1",
|
||||
"mapbox-gl": "^1.10.0",
|
||||
"mapbox-gl": "^1.10.1",
|
||||
"material-design-icons-iconfont": "^5.0.1",
|
||||
"mediaelement": "^4.2.16",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"minimist": ">=1.2.5",
|
||||
"mocha": "^6.2.3",
|
||||
"moment-timezone": "^0.5.28",
|
||||
"moment-timezone": "^0.5.31",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"ora": "^3.4.0",
|
||||
"photoswipe": "^4.1.3",
|
||||
|
@ -99,6 +99,7 @@
|
|||
"sass-loader": "^7.3.1",
|
||||
"sinon": "^9.0.2",
|
||||
"sockette": "^2.0.6",
|
||||
"string-strip-html": "^4.4.5",
|
||||
"style-loader": "^0.23.1",
|
||||
"sugarss": "^2.0.0",
|
||||
"svg-url-loader": "^5.0.0",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import PhotoSwipe from "photoswipe";
|
||||
import PhotoSwipeUI_Default from "photoswipe/dist/photoswipe-ui-default.js";
|
||||
import Event from "pubsub-js";
|
||||
import stripHtml from "string-strip-html";
|
||||
|
||||
const thumbs = window.clientConfig.thumbnails;
|
||||
|
||||
|
@ -69,6 +70,25 @@ class Viewer {
|
|||
return item[button.id].src + "?download=1";
|
||||
}
|
||||
},
|
||||
addCaptionHTMLFn: function(item, captionEl, isFake) {
|
||||
// item - slide object
|
||||
// captionEl - caption DOM element
|
||||
// isFake - true when content is added to fake caption container
|
||||
// (used to get size of next or previous caption)
|
||||
|
||||
if(!item.title) {
|
||||
captionEl.children[0].innerHTML = '';
|
||||
return false;
|
||||
}
|
||||
|
||||
if(item.description) {
|
||||
captionEl.children[0].innerHTML = stripHtml(item.title) + '<br><span class="description">' + stripHtml(item.description) + '</span>';
|
||||
} else {
|
||||
captionEl.children[0].innerHTML = stripHtml(item.title);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
};
|
||||
|
||||
let gallery = new PhotoSwipe(this.getEl(), PhotoSwipeUI_Default, items, options);
|
||||
|
|
|
@ -87,20 +87,25 @@
|
|||
{{ photo.PhotoTitle | truncate(80) }}
|
||||
</button>
|
||||
</h3>
|
||||
<div class="caption mb-2" v-if="photo.PhotoDescription" title="Description">
|
||||
{{ photo.PhotoDescription }}
|
||||
</div>
|
||||
<div class="caption">
|
||||
<button @click.exact="editPhoto(index)">
|
||||
<v-icon size="14" title="Taken">date_range</v-icon>
|
||||
{{ photo.getDateString() }}
|
||||
</button>
|
||||
<br/>
|
||||
<button v-if="photo.PhotoVideo" @click.exact="openPhoto(index, true)" title="Video">
|
||||
<v-icon size="14">movie</v-icon>
|
||||
{{ photo.getVideoInfo() }}
|
||||
</button>
|
||||
<button v-else @click.exact="editPhoto(index)" title="Camera">
|
||||
<v-icon size="14">photo_camera</v-icon>
|
||||
{{ photo.getPhotoInfo() }}
|
||||
</button>
|
||||
<template v-if="!photo.PhotoDescription">
|
||||
<br/>
|
||||
<button v-if="photo.PhotoVideo" @click.exact="openPhoto(index, true)" title="Video">
|
||||
<v-icon size="14">movie</v-icon>
|
||||
{{ photo.getVideoInfo() }}
|
||||
</button>
|
||||
<button v-else @click.exact="editPhoto(index)" title="Camera">
|
||||
<v-icon size="14">photo_camera</v-icon>
|
||||
{{ photo.getPhotoInfo() }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-if="showLocation && photo.LocationID">
|
||||
<br/>
|
||||
<button @click.exact="openLocation(index)" title="Location">
|
||||
|
@ -108,6 +113,7 @@
|
|||
{{ photo.getLocation() }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- template v-if="debug">
|
||||
<br/>
|
||||
<button @click.exact="openUUID(index)" title="Unique ID">
|
||||
|
|
|
@ -11,6 +11,8 @@
|
|||
<div class="pswp__ui pswp__ui--hidden">
|
||||
|
||||
<div class="pswp__top-bar">
|
||||
<div class="pswp__taken hidden-xs-only">{{ item.taken }}</div>
|
||||
|
||||
<div class="pswp__counter"></div>
|
||||
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
|
|
|
@ -6,4 +6,39 @@
|
|||
padding: 10px;
|
||||
line-height: 20px;
|
||||
color: #E0E0E0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#p-photo-viewer .pswp__caption__center .description {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#p-photo-viewer .pswp__caption__center .taken {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#p-photo-viewer .pswp__taken {
|
||||
padding: 10px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #E0E0E0;
|
||||
font-weight: 300;
|
||||
width: auto;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
background: none;
|
||||
cursor: none;
|
||||
overflow: visible;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
float: left;
|
||||
opacity: 0.75;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
@ -8,6 +8,8 @@ class Thumb extends Model {
|
|||
return {
|
||||
uuid: "",
|
||||
title: "",
|
||||
taken: "",
|
||||
description: "",
|
||||
favorite: false,
|
||||
original_w: 0,
|
||||
original_h: 0,
|
||||
|
@ -29,6 +31,8 @@ class Thumb extends Model {
|
|||
const result = {
|
||||
uuid: "",
|
||||
title: "Not Found",
|
||||
taken: "",
|
||||
description: "",
|
||||
favorite: false,
|
||||
original_w: 0,
|
||||
original_h: 0,
|
||||
|
@ -69,6 +73,8 @@ class Thumb extends Model {
|
|||
const result = {
|
||||
uuid: photo.PhotoUUID,
|
||||
title: photo.PhotoTitle,
|
||||
taken: photo.getDateString(),
|
||||
description: photo.PhotoDescription,
|
||||
favorite: photo.PhotoFavorite,
|
||||
download_url: this.downloadUrl(photo),
|
||||
original_w: photo.FileWidth,
|
||||
|
@ -96,6 +102,8 @@ class Thumb extends Model {
|
|||
const result = {
|
||||
uuid: photo.PhotoUUID,
|
||||
title: photo.PhotoTitle,
|
||||
taken: photo.getDateString(),
|
||||
description: photo.PhotoDescription,
|
||||
favorite: photo.PhotoFavorite,
|
||||
download_url: this.downloadUrl(file),
|
||||
original_w: file.FileWidth,
|
||||
|
|
Loading…
Reference in a new issue