Merge pull request #82 from OpenSourceOrg/add/39-event-manager-updates

Event manager updates

Author: bernattorras

.gitignore

@@ -20,6 +20,7 @@ mu-plugins/*
 !mu-plugins/osi-event-list
 !mu-plugins/osi-sponsors-list
 !websub-compat.php
+!mu-plugins/osi-events-manager-tweaks
 
 themes/*
 !themes/osi

mu-plugins/osi-events-manager-tweaks/osi-events-manager-tweaks.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Plugin Name: OSI Events Manager Tweaks
+ * Description: Customizations for the Events Manager plugin.
+ * Version: 1.0.0
+ * Author: WordPress.com Special Projects
+ * Author URI: https://wpspecialprojects.wordpress.com/
+ */
+
+ /**
+ * Remove the event time zone if the event is all day.
+ *
+ * @param string $replace         The string to replace.
+ * @param EM_Event $EM_Event      The event object.
+ * @param string $full_result     The full result.
+ * @param string $target          The target.
+ * @param array $placeholder_atts The placeholder attributes.
+ *
+ * @return string
+*/
+function osi_em_event_output_placeholder( $replace, $EM_Event, $full_result, $target, $placeholder_atts ) {
+	if ( '#_EVENTTIMEZONE' === $full_result ) {
+		$event_times = $EM_Event->output('#_EVENTTIMES');
+		if ( 'All Day' === $event_times ) {
+			$replace = '';
+		}
+	}
+	return $replace;
+}
+add_filter('em_event_output_placeholder', 'osi_em_event_output_placeholder', 10, 5);
+
+/**
+ * Display "Free" for events with a price of 0.00.
+ *
+ * @param string $formatted_price The formatted price.
+ * @param string $price           The price.
+ * @param string $currency        The currency.
+ * @param string $format          The format.
+ * @return void
+ */
+function osi_format_event_manager_price( $formatted_price, $price, $currency, $format ) {
+	if( 0.00 === (float)$price ) {
+		$formatted_price = 'Free';
+	}
+
+	return $formatted_price;
+}
+add_filter('em_get_currency_formatted', 'osi_format_event_manager_price', 10, 4 );

themes/osi/assets/css/editor-style.css

@@ -53,3 +53,67 @@ form.wp-block-jetpack-contact-form {
 .wp-block-coblocks-posts__item {
     margin-bottom: 2.5em;
 }
+
+/*
+* Events Manager
+* - Booking's Submit Button
+*   -- Feels very nasty, but I had to add !important, as the plugin's CSS is also using !important!
+* - Mobile Styling
+*/
+
+.em-booking-form-section-confirm .em-booking-form-buttons input[type=submit].em-form-submit {
+    color: var(--wp--custom--button--color--text) !important;
+    background-color: var(--wp--custom--button--color--background) !important;
+    border: var(--wp--custom--button--border--width) var(--wp--custom--button--border--style) var(--wp--custom--button--border--color)  !important;
+    border-radius: var(--wp--custom--button--border--radius) !important;
+    display: inline-block !important;
+    font-family: var(--wp--custom--button--typography--font-family) !important;
+    font-size: var(--wp--custom--button--typography--font-size) !important;
+    -webkit-font-smoothing: auto !important;
+    font-weight: var(--wp--custom--button--typography--font-weight) !important;
+    height: auto !important;
+    padding: var(--wp--custom--button--spacing--padding--top) var(--wp--custom--button--spacing--padding--right) var(--wp--custom--button--spacing--padding--bottom) var(--wp--custom--button--spacing--padding--left) !important;
+    text-decoration: none !important;
+    transition: all 0.3s !important;
+    width: auto !important;
+
+    &:hover, &:focus {
+        background-color: var(--wp--custom--button--hover--color--background) !important;
+        border-color: var(--wp--custom--button--hover--border--color) !important;
+        border-width: var(--wp--custom--button--border--width) !important;
+        color: var(--wp--custom--button--hover--color--text) !important;
+        text-decoration: none !important;
+        transition: all 0.3s !important;
+    }
+}
+
+/* Specific styling for mobile devices */
+@media only screen and (max-width: 768px) {
+
+    .header-main-small {
+        display: block !important;
+    }
+
+    /* Adjust featured image size on mobile devices */
+    .single-event .wp-block-cover__image-background {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+    }
+
+    /* Ensure the cover container does not add extra padding or margins */
+    .single-event .entry-header .wp-block-cover.alignfull {
+        padding: 0;
+    }
+}
+
+/* Ensures the small header is hidden on larger screens */
+.header-main-small {
+    display: none;
+}
+
+/* Adjust the aspect ratio of the cover image */
+.single-event .entry-header .wp-block-cover {
+    aspect-ratio: 16 / 9;
+    min-height: auto;
+}