bitPickups/friendica_2020-09-1_sharedHosting
1
0
Fork 0
Code Pull requests Activity

event items are now more themeable in the networkstream.

Browse source 
The event description stays the same - but the theme developer can provide an template how the other event data should be organized and look
This commit is contained in:
rabuzarus 2017-10-13 19:42:27 +02:00
commit 553428d1b1
8 changed files with 478 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

29
view/templates/event_stream_item.tpl Normal file
View file

@ -0,0 +1,29 @@
<div class="vevent">
<div class="summary event-summary">{{$title}}</div>
<div class="event-start">
<span class="event-label">{{$dtstart_label}}</span>&nbsp;
<span class="dtstart" title="$dtstart_title">{{$dtstart_dt}}</span>
</div>
{{if $finish}}
<div class="event-end">
<span class="event-label">{{$dtstart_label}}</span>&nbsp;
<span class="dend" title="$dtend_title">{{$dtend_dt}}</span>
</div>
{{/if}}
<div class="description event-description">{{$description}}</div>
{{if $location}}
<div class="event-location">
<span class="event-label">{{$location_label}}</span>&nbsp;
{{if $location.name}}
<span class="event-location">{{$location.name}}</span>
{{/if}}
{{if $location.map}}{{$location.map}}{{/if}}
</div>
{{/if}}
</div>

40
view/theme/frio/css/mod_events.css
View file

@ -97,13 +97,11 @@
width: 60px;
}
/**
* The event-card
*/
.event-card {
width: auto;
width: auto;
}
.event-card .event-label,
.event-card .location-label {
@ -114,41 +112,7 @@
padding: 9px;
padding-left: 0px;
}
.event-card .event-hover-left-date {
width: 60px;
}
.event-card .event-date-wrapper.medium > span {
display: block;
overflow: hidden;
text-align: center;
white-space: nowrap;
}
.event-card .event-date-wrapper.medium .event-hover-short-month {
font-size: 13px;
text-transform: uppercase;
}
.event-card .event-date-wrapper.medium .event-hover-short-date {
font-size: 24px;
line-height: 28px;
margin-top: 2px;
}
.event-card .event-card-basic-content .event-card-content {
width: 100%;
padding: 0 5px 0 15px;
box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
}
.event-card .event-hover-title {
font-size: 14px;
color: #555;
line-height: 15px;
font-weight: bold;
}
.event-card .event-hover-location {
margin-top: 10px;
font-size: 13px;
}
.event-card .event-hover-location .location {
color: #777;
font-size: 13px;
}
}

80
view/theme/frio/css/style.css
View file

@ -2447,7 +2447,86 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
.event-buttons .plink-event-link {
margin-left: 20px;
}
.vevent .event-description {
padding: 10px 0;
}
/* Event Cards */
.event-card-details, .event-card-header {
width: 100%;
}
.event-card-header, .event-card-left-date {
float: left;
}
.vevent .event-card-header {
display: table;
}
.event-card-left-date {
width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */
}
.event-card .event-date-wrapper > span {
display: block;
overflow: hidden;
text-align: center;
white-space: nowrap;
}
.event-card .event-date-wrapper .event-card-short-month {
font-size: 13px;
text-transform: uppercase;
}
.event-card .event-date-wrapper.medium .event-card-short-date {
font-size: 24px;
line-height: 28px;
margin-top: 2px;
}
.event-card .event-card-content {
width: 100%;
padding: 0 5px 0 15px;
box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
color: #777;
position: relative;
}
.event-card .event-card-content .event-map-btn {
position: absolute;
right: 0;
top:0;
line-height: 15px;
}
.event-card .event-card-title {
font-size: 14px;
color: #555;
line-height: 15px;
font-weight: bold;
}
.event-card .event-card-location {
margin-top: 10px;
font-size: 13px;
}
.event-card .event-card-location br {
content: " ";
}
.event-card .event-card-location br::after {
content: " ";
}
.event-card-profile-name a {
color: $link_color;
}
.event-card-profile-name a:hover {
color: $link_hover_color;
}
.event-card .event-card-content .event-location-map {
position: absolute;
left: -9999px;
top: -9999px;
}
.event-card .event-card-content .event-location-map .map{
margin-top: 10px;
}
.event-card .event-description .seperator {
margin-top: 0;
box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset;
}
/* Photos Pages */
#photo-photo {
position: relative;
@ -2885,3 +2964,4 @@ body .tread-wrapper .hovercard:hover .hover-card-content a {
section .profile-match-wrapper {
float: left;
}

21
view/theme/frio/js/mod_events.js
View file

@ -127,17 +127,17 @@ function changeView(action, viewName) {
function eventHoverBodyTemplate() {
var template = '\
<div class="event-card-basic-content media">\
<div class="hover-card-details">\
<div class="hover-card-header left-align">\
<div class="event-hover-left-date left-align">\
<div class="event-card-details">\
<div class="event-card-header">\
<div class="event-card-left-date">\
<span class="event-date-wrapper medium">\
<span class="event-hover-short-month">{5}</span>\
<span class="event-hover-short-date">{6}</span>\
<span class="event-card-short-month">{5}</span>\
<span class="event-card-short-date">{6}</span>\
</span>\
</div>\
<div class="event-card-content media-body">\
<div class="event-hover-title">{2}</div>\
<div class="event-property"><span class="event-hover-date">{4}</span>{3}\
<div class="event-card-title">{2}</div>\
<div class="event-property"><span class="event-card-date">{4}</span>{3}\
{1}\
</div>\
</div>\
@ -150,14 +150,15 @@ function eventHoverBodyTemplate() {
// The template for presenting the event location in the event hover-card
function eventHoverLocationTemplate() {
var template = '<span class="event-hover-location"> {0}</span></div>';
var template = '<span role="presentation" aria-hidden="true"> · </span>\
<span class="event-card-location"> {0}</span></div>';
return template;
}
function eventHoverProfileNameTemplate() {
var template = '\
<div class="event-hover-profile-name profile-entry-name">\
<span class="left-align1"><a href="{0}" class="userinfo">{1}</a></span>\
<div class="event-card-profile-name profile-entry-name">\
<a href="{0}" class="userinfo">{1}</a>\
</div>';
return template;
}

38
view/theme/frio/js/theme.js
View file

@ -353,6 +353,11 @@ $(document).ready(function(){
$("body").removeClass("aside-out");
});
// Event listener for 'Show & hide event map' button in the network stream.
$("body").on("click", ".event-map-btn", function() {
showHideEventMap(this);
});
});
function openClose(theID) {
@ -375,7 +380,6 @@ function showHide(theID) {
}
}
function showHideComments(id) {
if( $('#collapsed-comments-' + id).is(':visible')) {
$('#collapsed-comments-' + id).slideUp();
@ -389,6 +393,37 @@ function showHideComments(id) {
}
}
// Show & hide event map in the network stream by button click.
function showHideEventMap(elm) {
// Get the id of the map element - it should be provided through
// the atribute "data-map-id".
var mapID = elm.getAttribute('data-map-id');
// Get translation labels.
var mapshow = elm.getAttribute('data-show-label');
var maphide = elm.getAttribute('data-hide-label');
// Change the button labels.
if (elm.innerText == mapshow) {
$('#' + elm.id).text(maphide);
} else {
$('#' + elm.id).text(mapshow);
}
// Because maps are iframe elements, we cant hide it through css (display: none).
// We solve this issue by putting the map outside the screen with css.
// So the first time the 'Show map' button is pressed we move the map
// element into the screen area.
var mappos = $('#' + mapID).css('position');
if (mappos === 'absolute') {
$('#' + mapID).hide();
$('#' + mapID).css({position: 'relative', left: 'auto', top: 'auto'});
openClose(mapID);
} else {
openClose(mapID);
}
return false;
}
function justifyPhotos() {
justifiedGalleryActive = true;
@ -506,7 +541,6 @@ function filter_replace(item) {
};
})( jQuery );
// current time in milliseconds, to send each request to make sure
// we 're not getting 304 response
function timeNow() {

44
view/theme/frio/templates/event_stream_item.tpl Normal file
View file

@ -0,0 +1,44 @@
<div class="vevent event-card">
<div class="vevent-header">
<div class="event-card-details">
<div class="event-card-header">
<div class="event-card-left-date">
<span class="event-date-wrapper medium">
<span class="event-card-short-month">{{$month_short}}</span>
<span class="event-card-short-date">{{$date_short}}</span>
</span>
</div>
<div class="event-card-content media-body">
<div class="event-title event-card-title summary event-summary">{{$title}}</div>
{{if $location.map}}<button id="event-map-btn-{{$id}}" class="event-map-btn btn-link fakelink nav nav-pills preferences" data-map-id="event-location-map-{{$id}}" data-show-label="{{$show_map_label}}" data-hide-label="{{$hide_map_label}}">{{$map_btn_label}}</button>{{/if}}
<div class="event-property">
<span class="event-date">
<span class="event-start dtstart" title="{{$dtstart_title}}">{{$start_short}}</span>
{{if $finish}} - <span class="event-end dtend" title="{{$dtend_title}}">{{if $same_date}}{{$end_time}}{{else}}{{$end_short}}{{/if}}</span>{{/if}}
</span>
{{if $location.name}}
<span role="presentation" aria-hidden="true"> · </span>
<span class="event-location event-card-location">{{$location.name}}</span>
{{/if}}
</div>
<div class="event-card-profile-name profile-entry-name">
<a href="{{$author_link}}" class="userinfo">{{$author_name}}</a>
</div>
{{if $location.map}}
<div id="event-location-map-{{$id}}" class="event-location-map">{{$location.map}}</div>
{{/if}}
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
{{if $description}}
<div class="description event-description">
<hr class="seperator" />
{{$description}}
</div>
{{/if}}
</div>