franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Media comment embedded in picture

Browse Source
This commit is contained in:
Franzz
2020-05-17 12:16:36 +02:00
parent 332f3df940
commit 7d9a61cdd4
5 changed files with 115 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
masks/project.html
View File

@@ -195,8 +195,8 @@ function initProject(sProjectCodeName, oFocusPost){
//Timezone difference notice
var bSameTime = ((new Date()).toLocaleString([], {timeZone: oSpot.consts.timezone}) == (new Date()).toLocaleString([], {timeZone: oSpot.vars(['project', 'timezone'])}));
self.tmp('site_tz_notice', bSameTime?'':' ('+getTimeZoneDesc(oSpot.consts.timezone)+')');
self.tmp('proj_tz_notice', bSameTime?'':' ('+getTimeZoneDesc(self.vars(['project', 'timezone']))+')');
self.tmp('site_tz_notice', bSameTime?'':getTimeZoneDesc(oSpot.consts.timezone));
self.tmp('proj_tz_notice', bSameTime?'':getTimeZoneDesc(self.vars(['project', 'timezone'])));
$.when(
//Markers: Spot Messages & Medias
@@ -572,14 +572,21 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
.append($('<h1>')
.addIcon('fa-message fa-fw fa-lg')
.append('Message '+oMsg.type+' '+oSpot.lang('counter', oMsg.displayed_id)))
.append($('<p>', {'class':'time'})
.addIcon('fa-time fa-fw fa-lg')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')+self.tmp('site_tz_notice')))
.append($('<p>', {'class':'coordinates'})
.addIcon('fa-coords fa-fw fa-lg', false)
.append(getGoogleMapsLink(oMsg)));
.append(getGoogleMapsLink(oMsg)))
.append($('<p>', {'class':'time'})
.addIcon('fa-time fa-fw fa-lg')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')));
//Tooltip medias
//Tooltip: Time Zone
if(self.tmp('site_tz_notice')!='') {
$Tooltip.append($('<p>', {'class':'timezone'})
.addIcon('fa-timezone fa-fw fa-lg')
.append(self.tmp('site_tz_notice')));
}
//Tooltip: Medias
if(oMsg.medias) {
var $Medias = $('<div>', {'class':'medias'});
$.each(oMsg.medias, function(iKey, asMedia) {
@@ -690,7 +697,7 @@ function setFeedUpdateTimer(iSeconds, fCallback) {
function getPost(asPost) {
asPost.headerless = asPost.headerless || false;
var $Post = $('<div>', {'class':'post '+asPost.type+(asPost.headerless?' headerless':'')});
var $Post = $('<div>', {'class':'post-item '+asPost.type+(asPost.headerless?' headerless':'')});
if(asPost.id) $Post.prop('id', asPost.type+'-'+asPost.id);
var sRelTime = (asPost.relative_time!='')?((self.vars('project') && self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
@@ -700,10 +707,11 @@ function getPost(asPost) {
switch(asPost.type) {
case 'message':
$Body = $('<div>')
$Body = $('<div>', {'class':'body-box'})
.data('id', asPost.id_message)
.append($('<p>').addIcon('fa-coords', true).append(getGoogleMapsLink(asPost)))
.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
.append($('<p>').addIcon('fa-time', true).append(sAbsTime))
.append((self.tmp('site_tz_notice')!='')?$('<p>').addIcon('fa-timezone', true).append(self.tmp('site_tz_notice')):'')
.append($('<a>', {'class':'drill'})
.append($('<img>', {'class':'staticmap', title: oSpot.lang('click_zoom'), src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)}))
.append($('<span>', {'class': 'drill-icon fa-stack'})
@@ -737,8 +745,8 @@ function getPost(asPost) {
);
break;
case 'media':
$Body = $('<div>').append(getMediaLink(asPost, 'post'));
if(asPost.comment) $Body.append($('<p>').text(asPost.comment));
$Body = $('<div>', {'class':'body-box'}).append(getMediaLink(asPost, 'post'));
if(asPost.comment) $Body.find('a.drill').append($('<span>', {'class':'comment'}).text(asPost.comment));
break;
case 'post':
$Body = $('<div>')
@@ -759,7 +767,7 @@ function getPost(asPost) {
$Post
.append($('<div>', {'class':'header'})
.append($('<span>', {'class':'index'}).addIcon('fa-'+sType))
.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+self.tmp('site_tz_notice'))))
.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+((self.tmp('site_tz_notice')!='')?' ('+self.tmp('site_tz_notice')+')':''))))
.append($('<div>', {'class':'body'}).append($Body));
if(asPost.displayed_id) $Post.find('.index').append(' '+oSpot.lang('counter', asPost.displayed_id));
@@ -787,7 +795,7 @@ function getMediaLink(asData, sType) {
var $Timezone = (self.tmp('site_tz_notice') == '')?'':
$('<span>', {'class': 'lb-caption-line'})
.addIcon('fa-timezone fa-lg fa-fw', true)
.append(getTimeZoneDesc(oSpot.consts.timezone));
.append(self.tmp('site_tz_notice'));
var $Title = $('<div>').append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn).append($Timezone);
var $Link =

1
style/_lightbox.scss
View File

@@ -10,6 +10,7 @@
.lightboxOverlay {
bottom: 0;
right: 0;
outline: none;
}
.lightbox {

136
style/_mask_project.scss
View File

@@ -302,8 +302,14 @@ $legend-color: $post-color;
margin-bottom: 0.5em;
}
}
.body-box {
position:relative;
display: flex;
flex-direction: column;
}
.post {
.post-item {
margin-bottom: $block-spacing;
background: $post-bg;
color: $post-color;
@@ -316,7 +322,7 @@ $legend-color: $post-color;
}
.message {
margin: 0.3em 0 0 0;
margin: 0;
}
.signature {
margin: 0.5em 0 0 0;
@@ -324,29 +330,33 @@ $legend-color: $post-color;
font-style: italic;
}
.header {
font-style: italic;
font-size: 0.8em;
padding: 0.5em 1em;
line-height: 1em;
span {
display: inline-block;
cursor: default;
font-size: 0.8em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&.index {
width: 25%;
font-style: normal;
}
&.time {
width: 75%;
text-align: right;
font-style: italic;
}
}
}
.body {
clear: both;
padding: 0em 1em 0.5em;
padding: 0em 1em 1em;
}
&.headerless {
.header {
display: none;
@@ -355,52 +365,16 @@ $legend-color: $post-color;
padding-top: 0.5em;
}
}
&.media {
background: $media-bg;
color: $media-color;
a {
display: inline-block;
width: 100%;
line-height: 0;
margin: 0;
&.drill {
font-size: 3em;
.fa-drill-picture {
color: transparent;
}
.fa-drill-video {
color: rgba(255, 255, 255, 0.5);
}
&:hover {
.fa-drill-picture, .fa-drill-video {
color: rgba($media-bg, 0.75);
}
}
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
}
p {
margin: 0;
text-align: justify;
}
}
&.message {
background: $message-bg;
color: $message-color;
p {
font-size: 0.9em;
margin: 0.5em 0;
margin: 0 0 .5em 0;
display: inline-block;
width: 100%;
}
a {
@@ -408,6 +382,8 @@ $legend-color: $post-color;
}
a.drill {
line-height: 0;
.drill-icon {
transform: translate(-16px, -32px);
@@ -435,6 +411,74 @@ $legend-color: $post-color;
cursor: pointer;
}
}
&.post {
.body {
padding: 0em 1em 0.5em;
}
}
&.media {
background: $media-bg;
color: $media-color;
.body {
a {
display: inline-block;
width: 100%;
margin: 0;
color: $media-color;
position: relative;
line-height: 0;
&.drill {
&:hover {
.drill-icon .fa-drill-picture, .drill-icon .fa-drill-video {
color: rgba($media-bg, 0.75);
}
.comment {
opacity: 0;
}
}
.drill-icon {
font-size: 3em;
.fa-drill-picture {
color: transparent;
}
.fa-drill-video {
color: rgba(255, 255, 255, 0.5);
}
}
}
img {
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
}
.comment {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: normal;
box-sizing: border-box;
margin: 0;
padding: 0.5em;
text-align: justify;
background: rgba(255, 255, 255, 0.6);
border-radius: 0 0 3px 3px;
transition: all 0.3s;
opacity: 1;
}
}
}
}
&.loading {
.body {
text-align: center;

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

2
style/spot.css.map
View File

File diff suppressed because one or more lines are too long