Version 5.0.0 beta 5

2025-12-19 17:04:22 -08:00
1 parent 2f24f9de48
commit 57d9db6ce2
@@ -348,7 +348,7 @@
 			<i></i>
 		{{endif}}
 		<div class='ipsCalendarDate'>
-			{{if $event->nextOccurrence( \IPS\calendar\Date::getDate(), 'startDate' )}}
+			{{if $event->nextOccurrence( $date, 'startDate' )}}
 				<span class='ipsCalendarDate__month'>{lang="_date_month_short" pluralize="$event->nextOccurrence( $date, 'startDate' )->format( 'n' )"}</span>
 				<span class='ipsCalendarDate__date'>{$event->nextOccurrence( $date, 'startDate' )->format( 'd' )}</span>
 			{{else}}
@@ -459,7 +459,7 @@
 					{{endif}}
 				{{endif}}
 			</div>
-			<h4 class='ipsData__title'><a href='{$event->url()}'>{$event->title}</a></h4>
+			<h3 class='ipsData__title'><a href='{$event->url()}'>{$event->title}</a></h3>
 			<p class="ipsData__desc">{$event->truncated(TRUE, 400)}</p>
 		</div>
 		{{if $event->container()->club() !== NULL || $event->venue || $event->location}}
@@ -489,7 +489,7 @@
 {{if \count( $featured )}}
 	<section class="ipsBox cEvents__overview-featured">
 		<header class="ipsBox__header">
-			<h3>Featured Events</h3>
+			<h2>Featured Events</h2>
 			{template="carouselNavigation" group="global" app="core" params="'carousel--events-featured'"}
 		</header>
 		<i-data>
@@ -510,7 +510,7 @@
 	{{$image = \IPS\File::get('core_Clubs', $event->container()->club()->profile_photo );}}
 {{endif}}

-<div class='ipsData__item'>
+<li class='ipsData__item'>
 	<a href="{$event->url()}" class="ipsLinkPanel" aria-hidden="true" tabindex="-1"><span>{$event->title}</span></a>
 	<figure class="ipsData__image">
 		{{if $image}}
@@ -533,9 +533,9 @@
 			{{if $event->_happening}}
 				<div class='ipsBadge'>{$event->_happening}</div>
 			{{endif}}
-			<h4 class='ipsData__title'>
+			<h3 class='ipsData__title'>
 				<a href="{$event->url()}">{$event->title}</a>
-			</h4>
+			</h3>
 			<p class='i-font-weight_500 i-font-size_-2 i-text-transform_uppercase'>
 				<time datetime='{expression="$event->_start_date->format( 'Y-m-d' )"}'>
 					{{if $event->nextOccurrence( \IPS\calendar\Date::getDate(), 'startDate' )}}
@@ -614,7 +614,7 @@
 			</ul>
 		{{endif}}
 	</div>
-</div>]]></template>
+</li>]]></template>
 <template template_group="events" template_name="nearMe" template_data="$nearme, $mapMarkers" template_location="front" template_app="calendar"><![CDATA[<section class='ipsBox' data-controller='calendar.front.overview.nearMe' {{if settings.googlemaps AND !settings.mapbox}}data-nearme-use-google data-googlemaps-api-key='{setting="google_maps_api_key"}'{{endif}}>
 	<header class='ipsBox__header'>
 		<h2>{lang="events_happening_near_you"}</h2>
@@ -624,7 +624,7 @@
 		</label>
 	</header>
 	<div class='ipsBox__content'>
-		<p class='i-padding_3 i-color_soft'>{lang="showing_events_near_you"} <a href='{url="app=calendar&do=search&form_submitted=1&lat=0&lon=0"}' data-role='nearMeLink' data-action='moreNearMe'>{lang="see_more_events_near_you"} <i class='fa-solid fa-angle-right'></i></a></p>
+		<p class='i-padding_3 i-color_soft'>{lang="showing_events_near_you"} <a href='{url="app=calendar&do=search&form_submitted=1&lat=0&lon=0"}' data-role='nearMeLink' data-action='moreNearMe' class="i-font-weight_500 i-text-decoration_underline">{lang="see_more_events_near_you"} <i class='fa-solid fa-angle-right'></i></a></p>
 		<div class='ipsJS_hide' data-role='locationEvents'>
 			{template="nearMeContent" group="events" app="calendar" params="$nearme, $mapMarkers"}
 		</div>
@@ -652,7 +652,7 @@
 	<section class='ipsBox i-margin-bottom_block'>
 		<h2 class='ipsBox__header'>{lang="events_online_events"}</h2>
 		<div class='i-padding_3 i-background_2 i-border-end-start-radius_box i-border-end-end-radius_box'>
-			<ul class='ipsEventList'>
+			<ul class='ipsEventList ipsData ipsData--grid ipsData--events-list'>
 				{{foreach $events as $event}}
 					{template="event" app="calendar" group="events" params="$event, 'small'"}
 				{{endforeach}}
@@ -692,7 +692,7 @@
 		</div>
 	</div>
 	<div class='cEvents__searchMap cEvents__searchMap--loading event' data-role='searchResultsMap' {{if $mapMarkers}}data-markers="{$mapMarkers}"{{endif}}></div>
-	<ul class='ipsEventList {{if !\count( $results )}}ipsHide{{endif}}' data-role='searchResults'>
+	<ul class='ipsEventList ipsData ipsData--grid ipsData--events-list {{if !\count( $results )}}ipsHide{{endif}}' data-role='searchResults'>
 		{template="searchResults" app="calendar" group="events" params="$results"}
 	</ul>
 	<div class='i-padding_2'>
@@ -1371,39 +1371,46 @@
 		{{foreach $elements[''] as $key => $input}}
 		{{if $key === 'location'}}
 		<li class='cEvents__search__field cEvents__search__field--location'>
-			<label class='cEvents__search__label'>{lang="events_search_location"}</label>
-			<div class='cEvents__search__searchWrap i-flex i-gap_1'>
-				{{if $byLocation}}
-					{{$input->options['placeholder'] = \IPS\Member::loggedIn()->language()->addToStack( "events_search_your_location" );}}
-					{{$input->options['disabled'] = TRUE;}}
-					{$input->html()|raw}
-					<a href='#' class='ipsEventSearch__searchLocation i-align-self_center i-font-size_-2 i-font-weight_600 i-color_soft i-flex_00 ipsJS_show' hidden data-action='useMyLocation'><i class='fa-solid fa-crosshairs'></i> <span>{lang="events_search_use_location"}</span></a>
-					<a href='#' class='ipsEventSearch__searchLocation i-align-self_center i-font-size_-2 i-font-weight_600 i-color_soft i-flex_00 ipsJS_show' data-action='cancelLocation'><span>{lang="events_search_cancel_location"}</span></a>
-				{{else}}
-					{$input->html()|raw}
-					<a href='#' class='ipsEventSearch__searchLocation i-align-self_center i-font-size_-2 i-font-weight_600 i-color_soft i-flex_00 ipsJS_show' data-action='useMyLocation'><i class='fa-solid fa-crosshairs'></i> <span>{lang="events_search_use_location"}</span></a>
-					<a href='#' class='ipsEventSearch__searchLocation i-align-self_center i-font-size_-2 i-font-weight_600 i-color_soft i-flex_00 ipsJS_show' hidden data-action='cancelLocation'><span>{lang="events_search_cancel_location"}</span></a>
-				{{endif}}
+			<div class="i-flex i-justify-content_space-between">
+				<label class='cEvents__search__label' for="elInput_location">{lang="events_search_location"}</label>
+				<div class='i-flex i-gap_1'>
+					{{if $byLocation}}
+						{{$input->options['placeholder'] = \IPS\Member::loggedIn()->language()->addToStack( "events_search_your_location" );}}
+						{{$input->options['disabled'] = TRUE;}}
+						<button type="button" class='ipsEventSearch__searchLocation' hidden data-action='useMyLocation'><i class='fa-solid fa-crosshairs'></i> <span>{lang="events_search_use_location"}</span></button>
+						<button type="button" class='ipsEventSearch__searchLocation' data-action='cancelLocation'><span>{lang="events_search_cancel_location"}</span></button>
+					{{else}}
+						<button type="button" class='ipsEventSearch__searchLocation' data-action='useMyLocation'><i class='fa-solid fa-crosshairs'></i> <span>{lang="events_search_use_location"}</span></button>
+						<button type="button" class='ipsEventSearch__searchLocation' hidden data-action='cancelLocation'><span>{lang="events_search_cancel_location"}</span></button>
+					{{endif}}
+				</div>
 			</div>
+			{$input->html()|raw}
 		</li>
 		{{elseif $key === 'show'}}
 		<li class='cEvents__search__field cEvents__search__field--show'>
-			<label class='cEvents__search__label'>{lang="events_search_type"}</label>
-			{$input->html()|raw}
+			<label class="cEvents__search__input">
+				<span class='cEvents__search__label'>{lang="events_search_type"}</span>
+				{$input->html()|raw}
+			</label>
 		</li>
 		{{elseif $key === 'date'}}
 		<li class='cEvents__search__field cEvents__search__field--date cEvents__search__field--from'>
-			<label class='cEvents__search__label'>{lang="events_search_from"}</label>
-			{$input->start->html()|raw}
+			<label class="cEvents__search__input">
+				<span class='cEvents__search__label'>{lang="events_search_from"}</span>
+				{$input->start->html()|raw}
+			</label>
 		</li>
 		<li class='cEvents__search__field cEvents__search__field--date cEvents__search__field--to'>
-			<label class='cEvents__search__label'>{lang="events_search_to"}</label>
-			{$input->end->html()|raw}
+			<label class="cEvents__search__input">
+				<span class='cEvents__search__label'>{lang="events_search_to"}</span>
+				{$input->end->html()|raw}
+			</label>
 		</li>
 		{{endif}}
 		{{endforeach}}
 		<li class='cEvents__search__field cEvents__search__field--submit'>
-			<button type='submit' class='ipsButton ipsButton--primary i-width_100p'>{lang="events_search_search"}</button>
+			<button type='submit' class='ipsButton ipsButton--large ipsButton--primary i-width_100p'><i class="fa-solid fa-magnifying-glass"></i><span>{lang="events_search_search"}</span></button>
 		</li>
 	</ul>
 </form>]]></template>
@@ -1857,7 +1864,7 @@
 				{template="shareButton" app="core" group="sharelinks" params="$event"}
 			{{endif}}
 			{{if $event->canRemind()}}
-				{template="reminder" app="calendar" group="view" params="$event, $reminder"}
+				{template="reminder" app="calendar" group="view" params="$event, $event->getReminder()"}
 			{{endif}}
 			{{if \IPS\Application::appIsEnabled('cloud')}}
 				{template="spam" app="cloud" group="spam" params="$event"}
@@ -2072,24 +2079,18 @@
 		<div data-ips-hook="rsvpWrapper" class='ipsBox ipsPull'>
 			{template="rsvpControls" group="view" params="$event, $attendees"}
 			<h3 class='ipsTitle ipsTitle--h3 ipsHide'>{lang="event_rsvp_attendees"}</h3>
-			<div class='ipsTabs ipsTabs_small ipsTabs--stretch' id='elAttendees{$tabId}' data-ipsTabBar data-ipsTabBar-contentArea='#elAttendees{$tabId}_content'>
-				<ul data-ips-hook="rsvpTabs" role="tablist">
-					<li>
-						<a href='#ipsTabs_elAttendees{$tabId}_elGoing_panel' id='elGoing' class='ipsTabs__tab ipsTabs__tab--active' role="tab" aria-selected='true'>{{if $event->hasPassed()}}{lang="rsvp_attendees_past"}{{else}}{lang="rsvp_attendees"}{{endif}} {{if \count($attendees[1])}}({expression="\count($attendees[1])"}){{endif}}</a>
-					</li>
+			<i-tabs class='ipsTabs ipsTabs--small ipsTabs--stretch' id='ipsTabs_elAttendees{$tabId}' data-ipsTabBar data-ipsTabBar-contentArea='#ipsTabs_elAttendees{$tabId}_content'>
+				<div data-ips-hook="rsvpTabs" role="tablist">
+					<button type="button" id='ipsTabs_elAttendees{$tabId}_elGoing' class='ipsTabs__tab' role="tab" aria-controls="ipsTabs_elAttendees{$tabId}_elGoing_panel" aria-selected='true'>{{if $event->hasPassed()}}{lang="rsvp_attendees_past"}{{else}}{lang="rsvp_attendees"}{{endif}} {{if \count($attendees[1])}}({expression="\count($attendees[1])"}){{endif}}</button>
 					{{if $event->rsvp_limit == -1}}
-						<li>
-							<a href='#ipsTabs_elAttendees{$tabId}_elMaybe_panel' id='elMaybe' class='ipsTabs__tab' role="tab" aria-selected='false'>{lang="rsvp_maybe_attendees"} {{if \count($attendees[2])}}({expression="\count($attendees[2])"}){{endif}}</a>
-						</li>	
-					{{endif}}	
-					<li>
-						<a href='#ipsTabs_elAttendees{$tabId}_elNotGoing_panel' id='elNotGoing' class='ipsTabs__tab' role="tab" aria-selected='false'>{lang="rsvp_notgoing_attendees"} {{if \count($attendees[0])}}({expression="\count($attendees[0])"}){{endif}}</a>
-					</li>
-				</ul>
+						<button type="button" id='ipsTabs_elAttendees{$tabId}_elMaybe' class='ipsTabs__tab' role="tab" aria-controls="ipsTabs_elAttendees{$tabId}_elMaybe_panel" aria-selected='false'>{lang="rsvp_maybe_attendees"} {{if \count($attendees[2])}}({expression="\count($attendees[2])"}){{endif}}</button>	
+					{{endif}}
+					<button type="button" id='ipsTabs_elAttendees{$tabId}_elNotGoing' class='ipsTabs__tab' role="tab" aria-controls="ipsTabs_elAttendees{$tabId}_elNotGoing_panel" aria-selected='false'>{lang="rsvp_notgoing_attendees"} {{if \count($attendees[0])}}({expression="\count($attendees[0])"}){{endif}}</button>
+				</div>
 				{template="tabScrollers" app="core" group="global" location="global"}
-			</div>
-			<div id='elAttendees{$tabId}_content' class='ipsTabs__panels ipsTabs__panels--padded'>
-				<div data-ips-hook="rsvpAttendees" id="ipsTabs_elAttendees{$tabId}_elGoing_panel" class='ipsTabs__panel'>
+			</i-tabs>
+			<div id='ipsTabs_elAttendees{$tabId}_content' class='ipsTabs__panels ipsTabs__panels--padded'>
+				<div data-ips-hook="rsvpAttendees" id="ipsTabs_elAttendees{$tabId}_elGoing_panel" class='ipsTabs__panel' role="tabpanel" aria-labelledby="ipsTabs_elAttendees{$tabId}_elGoing">
 					{{if \count($attendees[1]) }}
 						<ul class='ipsGrid ipsGrid--event-attendees i-basis_40'>
 							{{foreach $attendees[1] as $attendee}}
@@ -2115,7 +2116,7 @@
 					{{endif}}
 				</div>
 				{{if $event->rsvp_limit == -1}}
-					<div data-ips-hook="rsvpMaybeWrapper" id="ipsTabs_elAttendees{$tabId}_elMaybe_panel" class='ipsTabs__panel'>
+					<div data-ips-hook="rsvpMaybeWrapper" id="ipsTabs_elAttendees{$tabId}_elMaybe_panel" class='ipsTabs__panel' role="tabpanel" aria-labelledby="ipsTabs_elAttendees{$tabId}_elMaybe" hidden>
 						{{if \count($attendees[2]) }}
 							<ul data-ips-hook="rsvpMaybe" class='ipsGrid ipsGrid--event-attendees i-basis_40'>
 								{{foreach $attendees[2] as $attendee}}
@@ -2141,7 +2142,7 @@
 						{{endif}}
 					</div>
 				{{endif}}
-				<div data-ips-hook="rsvpNotGoingWrapper" id="ipsTabs_elAttendees{$tabId}_elNotGoing_panel" class='ipsTabs__panel'>
+				<div data-ips-hook="rsvpNotGoingWrapper" id="ipsTabs_elAttendees{$tabId}_elNotGoing_panel" class='ipsTabs__panel' role="tabpanel" aria-labelledby="ipsTabs_elAttendees{$tabId}_elNotGoing" hidden>
 					{{if \count($attendees[0]) }}
 						<ul data-ips-hook="rsvpNotGoing" class='ipsGrid ipsGrid--event-attendees i-basis_40'>
 							{{foreach $attendees[0] as $attendee}}
@@ -2984,7 +2985,6 @@ tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:
 .ipsData--events-featured .ipsCalendarDate{
 	width: 3.3em;
 	position: absolute;
-	top: 6em;
 	inset-inline-start: 1.5em;
 }

@@ -2998,29 +2998,37 @@ tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:
 .cEvents__search {
 	display: flex;
 	flex-wrap: wrap;
-	align-items: flex-end;
-	gap: 1em;
+	gap: 1.8em 1em;
 }

 	.cEvents__search > *{
 		flex: 1 1 100%;
 	}

+.ipsEventSearch__searchLocation{
+	flex: 0 0 auto;
+	font-weight: 600;
+	font-size: .9em;
+	align-self: start;
+}
+
+	.ipsEventSearch__searchLocation:hover{
+		text-decoration: underline;
+	}
+
 .cEvents__search__field--date {
-	flex-basis: 280px;
+	flex-basis: 150px;
 }

 	.cEvents__search__field--date input{
-		max-width: none;
+		width: 100%;
 	}

 .cEvents__search__label {
 	color: var(--i-color_hard);
-	font-size: 11px;
-	text-transform: uppercase;
 	display: block;
-	font-weight: 500;
-	margin-bottom: 0.4em;
+	font-weight: 600;
+	margin-bottom: .5em;
 }

 .cEvents__search__searchWrap :is([type="text"], [type="search"]) {
@@ -3050,29 +3058,22 @@ tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:
 }

 /* Listing */
-.ipsData--events-list .ipsCalendarDate{
-	position: absolute;
-	width: 50px;
-	top: 10px;
-	inset-inline-start: 10px;
+.cEvent__onlineLogo{
+	inset: auto;
+	bottom: 5px;
+	inset-inline-end: 5px;
+	background: var(--i-background_1);
+	padding: 8px 12px;
+	pointer-events: none;
+	border-start-start-radius: var(--i-box--bo-ra);
 }

-	.cEvent__onlineLogo{
-		inset: auto;
-		bottom: 5px;
-		inset-inline-end: 5px;
-		background: var(--i-background_1);
-		padding: 8px 12px;
-		pointer-events: none;
-		border-start-start-radius: var(--i-box--bo-ra);
+	.cEvent__onlineLogo svg{
+		display: block;
+		width: auto;
+		height: 12px;
 	}

-		.cEvent__onlineLogo svg{
-			display: block;
-			width: auto;
-			height: 12px;
-		}
-
 /* Near me section */
 .ipsEventsNearMe__map{
 	padding: 10px;
@@ -3139,8 +3140,7 @@ tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:
 }

 .cEvents__monthNav__year {
-	font-size: .85em;
-	opacity: .5;
+	font-size: .9em;
 }

 	.cEvents__skeleton--map {