From 553428d1b197c73f845855cdfd46efe3614db032 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Fri, 13 Oct 2017 19:42:27 +0200
Subject: [PATCH 1/2] event items are now more themeable in the networkstream.
 The event description stays the same - but the theme developer can provide an
 template how the other event data should be organized and look

---
 include/event.php                             | 299 ++++++++++++++----
 include/text.php                              |  81 +++--
 view/templates/event_stream_item.tpl          |  29 ++
 view/theme/frio/css/mod_events.css            |  40 +--
 view/theme/frio/css/style.css                 |  80 +++++
 view/theme/frio/js/mod_events.js              |  21 +-
 view/theme/frio/js/theme.js                   |  38 ++-
 .../frio/templates/event_stream_item.tpl      |  44 +++
 8 files changed, 478 insertions(+), 154 deletions(-)
 create mode 100644 view/templates/event_stream_item.tpl
 create mode 100644 view/theme/frio/templates/event_stream_item.tpl

diff --git a/include/event.php b/include/event.php
index 7840032c77..e36aa4262d 100644
--- a/include/event.php
+++ b/include/event.php
@@ -17,7 +17,7 @@ function format_event_html($ev, $simple = false) {
 		return '';
 	}
 
-	$bd_format = t('l F d, Y \@ g:i A') ; // Friday January 18, 2011 @ 8 AM
+	$bd_format = t('l F d, Y \@ g:i A') ; // Friday January 18, 2011 @ 8 AM.
 
 	$event_start = (($ev['adjust']) ? day_translate(datetime_convert('UTC', date_default_timezone_get(),
 			$ev['start'] , $bd_format ))
@@ -71,7 +71,7 @@ function format_event_html($ev, $simple = false) {
 			. bbcode($ev['location'])
 			. '</span></p>' . "\r\n";
 
-		// Include a map of the location if the [map] BBCode is used
+		// Include a map of the location if the [map] BBCode is used.
 		if (strpos($ev['location'], "[map") !== false) {
 			$map = generate_named_map($ev['location']);
 			if ($map !== $ev['location']) {
@@ -84,6 +84,12 @@ function format_event_html($ev, $simple = false) {
 	return $o;
 }
 
+/**
+ * @brief Convert an array with event data to bbcode.
+ * 
+ * @param array $ev Array which conains the event data.
+ * @return string The event as a bbcode formatted string.
+ */
 function format_event_bbcode($ev) {
 
 	$o = '';
@@ -115,6 +121,13 @@ function format_event_bbcode($ev) {
 	return $o;
 }
 
+/**
+ * @brief Extract bbcode formatted event data from a string
+ *     and convert it to html.
+ * 
+ * @params: string $s The string which should be parsed for event data.
+ * @return string The html output.
+ */
 function bbtovcal($s) {
 	$o = '';
 	$ev = bbtoevent($s);
@@ -126,6 +139,12 @@ function bbtovcal($s) {
 	return $o;
 }
 
+/**
+ * @brief Extract bbcode formatted event data from a string.
+ * 
+ * @params: string $s The string which should be parsed for event data.
+ * @return array The array with the event information.
+ */
 function bbtoevent($s) {
 
 	$ev = array();
@@ -165,7 +184,6 @@ function bbtoevent($s) {
 	return $ev;
 }
 
-
 function sort_by_date($a) {
 
 	usort($a,'ev_compare');
@@ -184,6 +202,15 @@ function ev_compare($a,$b) {
 	return strcmp($date_a, $date_b);
 }
 
+/**
+ * @brief Delete an event from the event table.
+ * 
+ * Note: This function does only delete the event from the event table not its
+ * related entry in the item table.
+ * 
+ * @param int $event_id Event ID.
+ * @return void
+ */
 function event_delete($event_id) {
 	if ($event_id == 0) {
 		return;
@@ -193,6 +220,14 @@ function event_delete($event_id) {
 	logger("Deleted event ".$event_id, LOGGER_DEBUG);
 }
 
+/**
+ * @brief Store the event.
+ * 
+ * Store the event in the event table and create an event item in the item table.
+ * 
+ * @param array $arr Array with event data.
+ * @return int The event id.
+ */
 function event_store($arr) {
 
 	require_once 'include/datetime.php';
@@ -225,7 +260,7 @@ function event_store($arr) {
 	}
 
 
-	// Existing event being modified
+	// Existing event being modified.
 
 	if ($arr['id']) {
 
@@ -298,7 +333,6 @@ function event_store($arr) {
 
 		return $item_id;
 	} else {
-
 		// New event. Store it.
 
 		$r = q("INSERT INTO `event` (`uid`,`cid`,`guid`,`uri`,`created`,`edited`,`start`,`finish`,`summary`, `desc`,`location`,`type`,
@@ -322,7 +356,6 @@ function event_store($arr) {
 			dbesc($arr['allow_gid']),
 			dbesc($arr['deny_cid']),
 			dbesc($arr['deny_gid'])
-
 		);
 
 		$r = q("SELECT * FROM `event` WHERE `uri` = '%s' AND `uid` = %d LIMIT 1",
@@ -396,9 +429,14 @@ function event_store($arr) {
 	}
 }
 
+/**
+ * @brief Create an array with translation strings used for events.
+ * 
+ * @return array Array with translations strings.
+ */
 function get_event_strings() {
 
-	// First day of the week (0 = Sunday)
+	// First day of the week (0 = Sunday).
 	$firstDay = get_pconfig(local_user(), 'system', 'first_day_of_week');
 	if ($firstDay === false) {
 		$firstDay = 0;
@@ -466,17 +504,17 @@ function get_event_strings() {
 }
 
 /**
- * @brief Removes duplicated birthday events
+ * @brief Removes duplicated birthday events.
  *
- * @param array $dates Array of possibly duplicated events
- * @return array Cleaned events
+ * @param array $dates Array of possibly duplicated events.
+ * @return array Cleaned events.
  *
- * @todo We should replace this with a separate update function if there is some time left
+ * @todo We should replace this with a separate update function if there is some time left.
  */
 function event_remove_duplicates($dates) {
 	$dates2 = array();
 
-	foreach ($dates AS $date) {
+	foreach ($dates as $date) {
 		if ($date['type'] == 'birthday') {
 			$dates2[$date['uid'] . "-" . $date['cid'] . "-" . $date['start']] = $date;
 		} else {
@@ -487,7 +525,7 @@ function event_remove_duplicates($dates) {
 }
 
 /**
- * @brief Get an event by its event ID
+ * @brief Get an event by its event ID.
  *
  * @param type $owner_uid The User ID of the owner of the event
  * @param type $event_params An assoziative array with
@@ -496,7 +534,7 @@ function event_remove_duplicates($dates) {
  * @return array Query result
  */
 function event_by_id($owner_uid = 0, $event_params, $sql_extra = '') {
-	// ownly allow events if there is a valid owner_id
+	// Ownly allow events if there is a valid owner_id.
 	if ($owner_uid == 0) {
 		return;
 	}
@@ -516,26 +554,27 @@ function event_by_id($owner_uid = 0, $event_params, $sql_extra = '') {
 }
 
 /**
- * @brief Get all events in a specific timeframe
+ * @brief Get all events in a specific timeframe.
  *
- * @param int $owner_uid The User ID of the owner of the events
+ * @param int $owner_uid The User ID of the owner of the events.
  * @param array $event_params An assoziative array with
- *	int 'ignored' =>
- *	string 'start' => Start time of the timeframe
- *	string 'finish' => Finish time of the timeframe
- *	string 'adjust_start' =>
+ *	int 'ignored' =><br>
+ *	string 'start' => Start time of the timeframe.<br>
+ *	string 'finish' => Finish time of the timeframe.<br>
+ *	string 'adjust_start' =><br>
  *	string 'adjust_start' =>
  *
- * @param string $sql_extra Additional sql conditions (e.g. permission request)
- * @return array Query results
+ * @param string $sql_extra Additional sql conditions (e.g. permission request).
+ * 
+ * @return array Query results.
  */
 function events_by_date($owner_uid = 0, $event_params, $sql_extra = '') {
-	// Only allow events if there is a valid owner_id
+	// Only allow events if there is a valid owner_id.
 	if ($owner_uid == 0) {
 		return;
 	}
 
-	// Query for the event by date
+	// Query for the event by date.
 	$r = q("SELECT `event`.*, `item`.`id` AS `itemid`,`item`.`plink`,
 				`item`.`author-name`, `item`.`author-avatar`, `item`.`author-link` FROM `event`
 			LEFT JOIN `item` ON `item`.`event-id` = `event`.`id` AND `item`.`uid` = `event`.`uid`
@@ -559,10 +598,10 @@ function events_by_date($owner_uid = 0, $event_params, $sql_extra = '') {
 }
 
 /**
- * @brief Convert an array query results in an arry which could be used by the events template
+ * @brief Convert an array query results in an arry which could be used by the events template.
  *
- * @param array $arr Event query array
- * @return array Event array for the template
+ * @param array $arr Event query array.
+ * @return array Event array for the template.
  */
 function process_events($arr) {
 	$events=array();
@@ -571,7 +610,6 @@ function process_events($arr) {
 	$fmt = t('l, F j');
 	if (count($arr)) {
 		foreach ($arr as $rr) {
-
 			$j = (($rr['adjust']) ? datetime_convert('UTC', date_default_timezone_get(), $rr['start'], 'j') : datetime_convert('UTC', 'UTC', $rr['start'], 'j'));
 			$d = (($rr['adjust']) ? datetime_convert('UTC', date_default_timezone_get(), $rr['start'], $fmt) : datetime_convert('UTC', 'UTC', $rr['start'], $fmt));
 			$d = day_translate($d);
@@ -588,7 +626,7 @@ function process_events($arr) {
 			$last_date = $d;
 
 			// Show edit and drop actions only if the user is the owner of the event and the event
-			// is a real event (no bithdays)
+			// is a real event (no bithdays).
 			if (local_user() && local_user() == $rr['uid'] && $rr['type'] == 'event') {
 				$edit = ((! $rr['cid']) ? array(System::baseUrl() . '/events/event/' . $rr['id'], t('Edit event'), '', '') : null);
 				$drop = array(System::baseUrl() . '/events/drop/' . $rr['id'], t('Delete event'), '', '');
@@ -626,13 +664,13 @@ function process_events($arr) {
 }
 
 /**
- * @brief Format event to export format (ical/csv)
+ * @brief Format event to export format (ical/csv).
  *
- * @param array $events Query result for events
- * @param string $format The output format (ical/csv)
- * @param string $timezone The timezone of the user (not implemented yet)
+ * @param array $events Query result for events.
+ * @param string $format The output format (ical/csv).
+ * @param string $timezone The timezone of the user (not implemented yet).
  *
- * @return string Content according to selected export format
+ * @return string Content according to selected export format.
  */
 function event_format_export ($events, $format = 'ical', $timezone) {
 	if (! ((is_array($events)) && count($events))) {
@@ -640,7 +678,7 @@ function event_format_export ($events, $format = 'ical', $timezone) {
 	}
 
 	switch ($format) {
-		// Format the exported data as a CSV file
+		// Format the exported data as a CSV file.
 		case "csv":
 			header("Content-type: text/csv");
 			$o = '"Subject", "Start Date", "Start Time", "Description", "End Date", "End Time", "Location"' . PHP_EOL;
@@ -661,7 +699,7 @@ function event_format_export ($events, $format = 'ical', $timezone) {
 			}
 			break;
 
-		// Format the exported data as a ics file
+		// Format the exported data as a ics file.
 		case "ical":
 			header("Content-type: text/ics");
 			$o = 'BEGIN:VCALENDAR' . PHP_EOL
@@ -676,7 +714,6 @@ function event_format_export ($events, $format = 'ical', $timezone) {
 			//       but test your solution against http://icalvalid.cloudapp.net/
 			//       also long lines SHOULD be split at 75 characters length
 			foreach ($events as $event) {
-
 				if ($event['adjust'] == 1) {
 					$UTC = 'Z';
 				} else {
@@ -729,32 +766,32 @@ function event_format_export ($events, $format = 'ical', $timezone) {
 }
 
 /**
- * @brief Get all events for a user ID
- *
- *    The query for events is done permission sensitive
+ * @brief Get all events for a user ID.
+ * 
+ *    The query for events is done permission sensitive.
  *    If the user is the owner of the calendar he/she
  *    will get all of his/her available events.
  *    If the user is only a visitor only the public events will
- *    be available
+ *    be available.
  *
- * @param int $uid The user ID
- * @param int $sql_extra Additional sql conditions for permission
+ * @param int $uid The user ID.
+ * @param int $sql_extra Additional sql conditions for permission.
  *
- * @return array Query results
+ * @return array Query results.
  */
 function events_by_uid($uid = 0, $sql_extra = '') {
 	if ($uid == 0) {
 		return;
 	}
 
-	// The permission condition if no condition was transmitted
+	// The permission condition if no condition was transmitted.
 	if ($sql_extra == '') {
 		$sql_extra = " AND `allow_cid` = '' AND `allow_gid` = '' ";
 	}
 
 	// Does the user who requests happen to be the owner of the events
 	// requested? then show all of your events, otherwise only those that
-	// don't have limitations set in allow_cid and allow_gid
+	// don't have limitations set in allow_cid and allow_gid.
 	if (local_user() == $uid) {
 		$r = q("SELECT `start`, `finish`, `adjust`, `summary`, `desc`, `location`, `nofinish`
 			FROM `event` WHERE `uid`= %d AND `cid` = 0 ",
@@ -774,42 +811,42 @@ function events_by_uid($uid = 0, $sql_extra = '') {
 
 /**
  *
- * @param int $uid The user ID
- * @param string $format Output format (ical/csv)
- * @return array With the results
- *	bool 'success' => True if the processing was successful
- *	string 'format' => The output format
- *	string 'extension' => The file extension of the output format
- *	string 'content' => The formatted output content
+ * @param int $uid The user ID.
+ * @param string $format Output format (ical/csv).
+ * @return array With the results:
+ *	bool 'success' => True if the processing was successful,<br>
+ *	string 'format' => The output format,<br>
+ *	string 'extension' => The file extension of the output format,<br>
+ *	string 'content' => The formatted output content.<br>
  *
- * @todo Respect authenticated users with events_by_uid()
+ * @todo Respect authenticated users with events_by_uid().
  */
 function event_export($uid, $format = 'ical') {
 
 	$process = false;
 
-	// We are allowed to show events
-	// get the timezone the user is in
+	// We are allowed to show events.
+	// Get the timezone the user is in.
 	$r = q("SELECT `timezone` FROM `user` WHERE `uid` = %d LIMIT 1", intval($uid));
 	if (dbm::is_result($r)) {
 		$timezone = $r[0]['timezone'];
 	}
 
-	// Get all events which are owned by a uid (respects permissions);
+	// Get all events which are owned by a uid (respects permissions).
 	$events = events_by_uid($uid);
 
-	// We have the events that are available for the requestor
-	// now format the output according to the requested format
+	// We have the events that are available for the requestor.
+	// Now format the output according to the requested format.
 	if (count($events)) {
 		$res = event_format_export($events, $format, $timezone);
 	}
 
-	// If there are results the precess was successfull
+	// If there are results the precess was successfull.
 	if (x($res)) {
 		$process = true;
 	}
 
-	// Get the file extension for the format
+	// Get the file extension for the format.
 	switch ($format) {
 		case "ical":
 			$file_ext = "ics";
@@ -834,33 +871,33 @@ function event_export($uid, $format = 'ical') {
 }
 
 /**
- * @brief Get the events widget
+ * @brief Get the events widget.
  *
- * @return string Formated html of the evens widget
+ * @return string Formated html of the evens widget.
  */
 function widget_events() {
 	$a = get_app();
 
 	$owner_uid = $a->data['user']['uid'];
 	// $a->data is only available if the profile page is visited. If the visited page is not part
-	// of the profile page it should be the personal /events page. So we can use $a->user
+	// of the profile page it should be the personal /events page. So we can use $a->user.
 	$user = ($a->data['user']['nickname'] ? $a->data['user']['nickname'] : $a->user['nickname']);
 
 
-	// The permission testing is a little bit tricky because we have to respect many cases
+	// The permission testing is a little bit tricky because we have to respect many cases.
 
-	// It's not the private events page (we don't get the $owner_uid for /events)
+	// It's not the private events page (we don't get the $owner_uid for /events).
 	if (! local_user() && ! $owner_uid) {
 		return;
 	}
 
 	/*
-	 * Cal logged in user (test permission at foreign profile page)
-	 * If the $owner uid is available we know it is part of one of the profile pages (like /cal)
+	 * Cal logged in user (test permission at foreign profile page).
+	 * If the $owner uid is available we know it is part of one of the profile pages (like /cal).
 	 * So we have to test if if it's the own profile page of the logged in user
 	 * or a foreign one. For foreign profile pages we need to check if the feature
 	 * for exporting the cal is enabled (otherwise the widget would appear for logged in users
-	 * on foreigen profile pages even if the widget is disabled)
+	 * on foreigen profile pages even if the widget is disabled).
 	 */
 	if (intval($owner_uid) && local_user() !== $owner_uid && ! feature_enabled($owner_uid, "export_calendar")) {
 		return;
@@ -868,7 +905,7 @@ function widget_events() {
 
 	/*
 	 * If it's a kind of profile page (intval($owner_uid)) return if the user not logged in and
-	 * export feature isn't enabled
+	 * export feature isn't enabled.
 	 */
 	if (intval($owner_uid) && ! local_user() && ! feature_enabled($owner_uid, "export_calendar")) {
 		return;
@@ -881,3 +918,125 @@ function widget_events() {
 		'$user' => $user
 	));
 }
+
+/**
+ * @brief Format an item array with event data to HTML.
+ * 
+ * @param arr $item Array with item and event data.
+ * @return string HTML output.
+ */
+function format_event_item($item) {
+	$same_date = false;
+	$finish    = false;
+
+	// Set the different time formats.
+	$dformat       = t('l F d, Y \@ g:i A'); // Friday January 18, 2011 @ 8:01 AM.
+	$dformat_short = t('D g:i A'); // Fri 8:01 AM.
+	$tformat       = t('g:i A'); // 8:01 AM.
+
+	// Convert the time to different formats.
+	$dtstart_dt = (($item['event-adjust']) ? day_translate(datetime_convert('UTC', date_default_timezone_get(), $item['event-start'], $dformat)) : day_translate(datetime_convert('UTC', 'UTC', $item['event-start'], $dformat)));
+	$dtstart_title = datetime_convert('UTC', 'UTC', $item['event-start'], (($item['event-adjust']) ? ATOM_TIME : 'Y-m-d\TH:i:s'));
+	// Format: Jan till Dec.
+	$month_short = (($item['event-adjust']) ? day_short_translate(datetime_convert('UTC', date_default_timezone_get(), $item['event-start'], 'M')) : day_short_translate(datetime_convert('UTC', 'UTC', $item['event-start'], 'M')));
+	// Format: 1 till 31.
+	$date_short = (($item['event-adjust']) ? datetime_convert('UTC', date_default_timezone_get(), $item['event-start'], 'j') : datetime_convert('UTC', 'UTC', $item['event-start'], 'j'));
+	$start_time = (($item['event-adjust']) ? datetime_convert('UTC', date_default_timezone_get(), $item['event-start'], $tformat) : datetime_convert('UTC', 'UTC', $item['event-start'], $tformat));
+	$start_short = (($item['event-adjust']) ? day_short_translate(datetime_convert('UTC', date_default_timezone_get(), $item['event-start'], $dformat_short)) : day_short_translate(datetime_convert('UTC', 'UTC', $item['event-start'], $dformat_short)));
+
+	// If the option 'nofinisch' isn't set, we need to format the finish date/time.
+	if (!$item['event-nofinish']) {
+		$finish = true;
+		$dtend_dt  = (($item['event-adjust']) ? day_translate(datetime_convert('UTC', date_default_timezone_get(), $item['event-finish'], $dformat)) : day_translate(datetime_convert('UTC', 'UTC', $item['event-finish'], $dformat)));
+		$dtend_title = datetime_convert('UTC', 'UTC', $item['event-finish'], (($item['event-adjust'])   ? ATOM_TIME : 'Y-m-d\TH:i:s'));
+		$end_short = (($item['event-adjust']) ? day_short_translate(datetime_convert('UTC', date_default_timezone_get(), $item['event-finish'], $dformat_short)) : day_short_translate(datetime_convert('UTC', 'UTC', $item['event-finish'], $dformat_short)));
+		$end_time = (($item['event-adjust']) ? datetime_convert('UTC', date_default_timezone_get(), $item['event-finish'], $tformat) : datetime_convert('UTC', 'UTC', $item['event-finish'], $tformat));
+		// Check if start and finish time is at the same day.
+		if (substr($dtstart_title, 0, 10) === substr($dtend_title, 0, 10)) {
+			$same_date = true;
+		}
+	}
+
+	// Format the event location.
+	$evloc = event_location2array($item['event-location']);
+	$location = array(
+		'name' => prepare_text($evloc['name'])
+	);
+	// Construct the map HTML.
+	if (isset($evloc['address'])) {
+		$location['map'] = '<div class="map">' . generate_named_map($evloc['address']) . '</div>';
+	} elseif (isset($evloc['coordinates'])) {
+		$location['map'] = '<div class="map">' . generate_map(str_replace('/', ' ', $evloc['coordinates'])) . '</div>';
+	}
+
+	$event = replace_macros(get_markup_template('event_stream_item.tpl'), array(
+		'$id'             => $item['event-id'],
+		'$title'          => prepare_text($item['event-summary']),
+		'$dtstart_label'  => t('Starts:'),
+		'$dtstart_title'  => $dtstart_title,
+		'$dtstart_dt'     => $dtstart_dt,
+		'$finish'         => $finish,
+		'$dtend_label'    => t('Finishes:'),
+		'$dtend_title'    => $dtend_title,
+		'$dtend_dt'       => $dtend_dt,
+		'$month_short'    => $month_short,
+		'$date_short'     => $date_short,
+		'$same_date'      => $same_date,
+		'$start_time'     => $start_time,
+		'$start_short'    => $start_short,
+		'$end_time'       => $end_time,
+		'$end_short'      => $end_short,
+		'$author_name'    => $item['author-name'],
+		'$author_link'    => $item['author-link'],
+		'$author_avatar'  => $item['author-avatar'],
+		'$description'	  => prepare_text($item['event-desc']),
+		'$location_label' => t('Location:'),
+		'$show_map_label' => t('Show map'),
+		'$hide_map_label' => t('Hide map'),
+		'$map_btn_label'  => t('Show map'),
+		'$location'       => $location
+	));
+
+	return $event;
+}
+
+/**
+ * @brief Format a string with map bbcode to an array with location data.
+ * 
+ * Note: The string must only contain location data. A string with no bbcode will be
+ * handled as location name.
+ * 
+ * @param string $s The string with the bbcode formatted location data.
+ * 
+ * @return array The array with the location data.
+ *  'name' => The name of the location,<br>
+ * 'address' => The address of the location,<br>
+ * 'coordinates' => Latitude‎ and longitude‎ (e.g. '48.864716,2.349014').<br>
+ */
+function event_location2array($s = '') {
+	if ($s == '') {
+		return;
+	}
+
+	$location = array('name' => $s);
+
+	// Map tag with location name - e.g. [map]Paris[/map].
+	if (strpos($s, '[/map]') !== false) {
+		$found = preg_match("/\[map\](.*?)\[\/map\]/ism", $s, $match);
+		if (intval($found) > 0 && array_key_exists(1, $match)) {
+			$location['address'] =  $match[1];
+			// Remove the map bbcode from the location name.
+			$location['name'] = str_replace($match[0], "", $s);
+		}
+	// Map tag with coordinates - e.g. [map=48.864716,2.349014].
+	} elseif (strpos($s, '[map=') !== false) {
+		$found = preg_match("/\[map=(.*?)\]/ism", $s, $match);
+		if (intval($found) > 0 && array_key_exists(1, $match)) {
+			$location['coordinates'] =  $match[1];
+			// Remove the map bbcode from the location name.
+			$location['name'] = str_replace($match[0], "", $s);
+		}
+	}
+
+	return $location;
+}
diff --git a/include/text.php b/include/text.php
index dc34edcd22..8f0ff6e73e 100644
--- a/include/text.php
+++ b/include/text.php
@@ -1191,12 +1191,11 @@ function get_mood_verbs() {
 	return $arr;
 }
 
-if (! function_exists('day_translate')) {
 /**
- * Translate days and months names
- *
- * @param string $s
- * @return string
+ * @brief Translate days and months names.
+ * 
+ * @param string $s String with day or month name.
+ * @return string Translated string.
  */
 function day_translate($s) {
 	$ret = str_replace(array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'),
@@ -1208,8 +1207,23 @@ function day_translate($s) {
 		$ret);
 
 	return $ret;
-}}
+}
 
+/**
+ * @brief Translate short days and months names.
+ * 
+ * @param string $s String with short day or month name.
+ * @return string Translated string.
+ */
+function day_short_translate($s) {
+	$ret = str_replace(array('Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'),
+		array(t('Mon'), t('Tue'), t('Wed'), t('Thu'), t('Fri'), t('Sat'), t('Sund')),
+		$s);
+	$ret = str_replace(array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov','Dec'),
+		array(t('Jan'), t('Feb'), t('Mar'), t('Apr'), t('May'), ('Jun'), t('Jul'), t('Aug'), t('Sep'), t('Oct'), t('Nov'), t('Dec')),
+		$ret);
+	return $ret;
+}
 
 if (! function_exists('normalise_link')) {
 /**
@@ -1288,13 +1302,9 @@ function put_item_in_cache(&$item, $update = false) {
 	}
 }
 
-// Given an item array, convert the body element from bbcode to html and add smilie icons.
-// If attach is true, also add icons for item attachments
-
-if (! function_exists('prepare_body')) {
 /**
- * Given an item array, convert the body element from bbcode to html and add smilie icons.
- * If attach is true, also add icons for item attachments
+ * @brief Given an item array, convert the body element from bbcode to html and add smilie icons.
+ * If attach is true, also add icons for item attachments.
  *
  * @param array $item
  * @param boolean $attach
@@ -1314,6 +1324,13 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 	$hashtags = array();
 	$mentions = array();
 
+	// In order to provide theme developers more possibilities, event items
+	// are treated differently.
+	if ($item['object-type'] === ACTIVITY_OBJ_EVENT && isset($item['event-id'])) {
+		$ev = format_event_item($item);
+		return $ev;
+	}
+
 	if (!get_config('system','suppress_tags')) {
 		$taglist = dba::p("SELECT `type`, `term`, `url` FROM `term` WHERE `otype` = ? AND `oid` = ? AND `type` IN (?, ?) ORDER BY `tid`",
 				intval(TERM_OBJ_POST), intval($item['id']), intval(TERM_HASHTAG), intval(TERM_MENTION));
@@ -1346,10 +1363,10 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 	$item['hashtags'] = $hashtags;
 	$item['mentions'] = $mentions;
 
-	// Update the cached values if there is no "zrl=..." on the links
-	$update = (!local_user() and !remote_user() and ($item["uid"] == 0));
+	// Update the cached values if there is no "zrl=..." on the links.
+	$update = (!local_user() && !remote_user() && ($item["uid"] == 0));
 
-	// Or update it if the current viewer is the intented viewer
+	// Or update it if the current viewer is the intented viewer.
 	if (($item["uid"] == local_user()) && ($item["uid"] != 0)) {
 		$update = true;
 	}
@@ -1362,7 +1379,7 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 	$s = $prep_arr['html'];
 
 	if (! $attach) {
-		// Replace the blockquotes with quotes that are used in mails
+		// Replace the blockquotes with quotes that are used in mails.
 		$mailquote = '<blockquote type="cite" class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">';
 		$s = str_replace(array('<blockquote>', '<blockquote class="spoiler">', '<blockquote class="author">'), array($mailquote, $mailquote, $mailquote), $s);
 		return $s;
@@ -1375,7 +1392,7 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 		foreach ($arr as $r) {
 			$matches = false;
 			$icon = '';
-			$cnt = preg_match_all('|\[attach\]href=\"(.*?)\" length=\"(.*?)\" type=\"(.*?)\" title=\"(.*?)\"|',$r,$matches, PREG_SET_ORDER);
+			$cnt = preg_match_all('|\[attach\]href=\"(.*?)\" length=\"(.*?)\" type=\"(.*?)\" title=\"(.*?)\"|',$r ,$matches, PREG_SET_ORDER);
 			if ($cnt) {
 				foreach ($matches as $mtch) {
 					$mime = $mtch[3];
@@ -1408,9 +1425,9 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 						));
 					}
 
-					$filetype = strtolower(substr($mime, 0, strpos($mime,'/')));
+					$filetype = strtolower(substr($mime, 0, strpos($mime, '/')));
 					if ($filetype) {
-						$filesubtype = strtolower(substr($mime, strpos($mime,'/') + 1));
+						$filesubtype = strtolower(substr($mime, strpos($mime, '/') + 1));
 						$filesubtype = str_replace('.', '-', $filesubtype);
 					} else {
 						$filetype = 'unkn';
@@ -1430,19 +1447,19 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 		$s .= '<div class="body-attach">'.$as.'<div class="clear"></div></div>';
 	}
 
-	// map
+	// Map.
 	if (strpos($s, '<div class="map">') !== false && x($item, 'coord')) {
 		$x = generate_map(trim($item['coord']));
 		if ($x) {
-			$s = preg_replace('/\<div class\=\"map\"\>/','$0' . $x,$s);
+			$s = preg_replace('/\<div class\=\"map\"\>/', '$0' . $x, $s);
 		}
 	}
 
 
-	// Look for spoiler
+	// Look for spoiler.
 	$spoilersearch = '<blockquote class="spoiler">';
 
-	// Remove line breaks before the spoiler
+	// Remove line breaks before the spoiler.
 	while ((strpos($s, "\n" . $spoilersearch) !== false)) {
 		$s = str_replace("\n" . $spoilersearch, $spoilersearch, $s);
 	}
@@ -1458,7 +1475,7 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 		$s = substr($s, 0, $pos) . $spoilerreplace . substr($s, $pos + strlen($spoilersearch));
 	}
 
-	// Look for quote with author
+	// Look for quote with author.
 	$authorsearch = '<blockquote class="author">';
 
 	while ((strpos($s, $authorsearch) !== false)) {
@@ -1469,7 +1486,7 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 		$s = substr($s, 0, $pos) . $authorreplace . substr($s, $pos + strlen($authorsearch));
 	}
 
-	// replace friendica image url size with theme preference
+	// Replace friendica image url size with theme preference.
 	if (x($a->theme_info, 'item_image_size')){
 		$ps = $a->theme_info['item_image_size'];
 		$s = preg_replace('|(<img[^>]+src="[^"]+/photo/[0-9a-f]+)-[0-9]|', "$1-" . $ps, $s);
@@ -1479,15 +1496,13 @@ function prepare_body(&$item, $attach = false, $preview = false) {
 	call_hooks('prepare_body_final', $prep_arr);
 
 	return $prep_arr['html'];
-}}
+}
 
-
-if (! function_exists('prepare_text')) {
 /**
- * Given a text string, convert from bbcode to html and add smilie icons.
+ * @brief Given a text string, convert from bbcode to html and add smilie icons.
  *
- * @param string $text
- * @return string
+ * @param string $text String with bbcode.
+ * @return string Formattet HTML.
  */
 function prepare_text($text) {
 
@@ -1500,9 +1515,7 @@ function prepare_text($text) {
 	}
 
 	return trim($s);
-}}
-
-
+}
 
 /**
  * return array with details for categories and folders for an item
diff --git a/view/templates/event_stream_item.tpl b/view/templates/event_stream_item.tpl
new file mode 100644
index 0000000000..16d122167d
--- /dev/null
+++ b/view/templates/event_stream_item.tpl
@@ -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>
diff --git a/view/theme/frio/css/mod_events.css b/view/theme/frio/css/mod_events.css
index 6932b1d507..65344ede95 100644
--- a/view/theme/frio/css/mod_events.css
+++ b/view/theme/frio/css/mod_events.css
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 91ca763a75..6bf57506c7 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -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;
 }
+
diff --git a/view/theme/frio/js/mod_events.js b/view/theme/frio/js/mod_events.js
index 5bd7c94498..9d10bbb8e7 100644
--- a/view/theme/frio/js/mod_events.js
+++ b/view/theme/frio/js/mod_events.js
@@ -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;
 }
diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 0329ae6c82..82cbace5cb 100644
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -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() {
diff --git a/view/theme/frio/templates/event_stream_item.tpl b/view/theme/frio/templates/event_stream_item.tpl
new file mode 100644
index 0000000000..2b367dcc6e
--- /dev/null
+++ b/view/theme/frio/templates/event_stream_item.tpl
@@ -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>

From dcbf4d6d11b7128d2410fe3778417f7fa05c403c Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Fri, 13 Oct 2017 20:03:47 +0200
Subject: [PATCH 2/2] fix event html construction (fixes #2646)

---
 include/event.php             | 22 ++++++++++------------
 view/global.css               | 18 ++++++++++++++++++
 view/theme/frio/css/style.css | 10 ++++++++++
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/include/event.php b/include/event.php
index e36aa4262d..ca957d0482 100644
--- a/include/event.php
+++ b/include/event.php
@@ -12,7 +12,6 @@ require_once 'include/map.php';
 require_once 'include/datetime.php';
 
 function format_event_html($ev, $simple = false) {
-
 	if (! ((is_array($ev)) && count($ev))) {
 		return '';
 	}
@@ -32,7 +31,7 @@ function format_event_html($ev, $simple = false) {
 	if ($simple) {
 		$o = "<h3>" . bbcode($ev['summary']) . "</h3>";
 
-		$o .= "<p>" . bbcode($ev['desc']) . "</p>";
+		$o .= "<div>" . bbcode($ev['desc']) . "</div>";
 
 		$o .= "<h4>" . t('Starts:') . "</h4><p>" . $event_start . "</p>";
 
@@ -49,27 +48,26 @@ function format_event_html($ev, $simple = false) {
 
 	$o = '<div class="vevent">' . "\r\n";
 
+	$o .= '<div class="summary event-summary">' . bbcode($ev['summary']) . '</div>' . "\r\n";
 
-	$o .= '<p class="summary event-summary">' . bbcode($ev['summary']) . '</p>' . "\r\n";
-
-	$o .= '<p class="description event-description">' . bbcode($ev['desc']) . '</p>' . "\r\n";
-
-	$o .= '<p class="event-start">' . t('Starts:') . ' <abbr class="dtstart" title="'
+	$o .= '<div class="event-start"><span class="event-label">' . t('Starts:') . '</span>&nbsp;<span class="dtstart" title="'
 		. datetime_convert('UTC', 'UTC', $ev['start'], (($ev['adjust']) ? ATOM_TIME : 'Y-m-d\TH:i:s' ))
 		. '" >'.$event_start
-		. '</abbr></p>' . "\r\n";
+		. '</span></div>' . "\r\n";
 
 	if (! $ev['nofinish']) {
-		$o .= '<p class="event-end" >' . t('Finishes:') . ' <abbr class="dtend" title="'
+		$o .= '<div class="event-end" ><span class="event-label">' . t('Finishes:') . '</span>&nbsp;<span class="dtend" title="'
 			. datetime_convert('UTC', 'UTC', $ev['finish'], (($ev['adjust']) ? ATOM_TIME : 'Y-m-d\TH:i:s' ))
 			. '" >'.$event_end
-			. '</abbr></p>' . "\r\n";
+			. '</span></div>' . "\r\n";
 	}
 
+	$o .= '<div class="description event-description">' . bbcode($ev['desc']) . '</div>' . "\r\n";
+
 	if (strlen($ev['location'])) {
-		$o .= '<p class="event-location"> ' . t('Location:') . ' <span class="location">'
+		$o .= '<div class="event-location"><span class="event-label">' . t('Location:') . '</span>&nbsp;<span class="location">'
 			. bbcode($ev['location'])
-			. '</span></p>' . "\r\n";
+			. '</span></div>' . "\r\n";
 
 		// Include a map of the location if the [map] BBCode is used.
 		if (strpos($ev['location'], "[map") !== false) {
diff --git a/view/global.css b/view/global.css
index ab57a762dd..e990060943 100644
--- a/view/global.css
+++ b/view/global.css
@@ -179,6 +179,24 @@ blockquote.shared_content {
   border: none;
 }
 
+/* Events */
+.event-summary {
+  margin: 0px 0px 10px 0px;
+  font-weight: bold;
+}
+
+.vevent .event-summary {
+  margin: 0px 0px 10px 0px;
+}
+
+.vevent .event-description {
+  padding: 10px 0;
+}
+
+.event-label {
+  font-weight: bold;
+}
+
 .settings-heading a:after{
   content: ' »';
 }
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 6bf57506c7..a3d48d9ffb 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2447,9 +2447,19 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 .event-buttons .plink-event-link {
     margin-left: 20px;
 }
+.vevent .event-summary {
+    font-size: 16px;
+}
 .vevent .event-description {
     padding: 10px 0;
 }
+.vevent .event-location .location {
+    font-size: inherit;
+    color: inherit;
+}
+.modal-body .vevent .event-summary {
+    display: none;
+}
 
 /* Event Cards */
 .event-card-details, .event-card-header {