Merge pull request #2711 from themeum/fix-announcements

Announcements date filter does not work fixed

Author: sazedul-haque

assets/core/scss/components/_modal.scss

@@ -79,6 +79,7 @@
 
   &-title {
     @include tutor-typography('h5', 'semibold', 'secondary', 'heading');
+    margin: 0;
   }
 
   &-subtitle {

assets/core/scss/mixins/_avatars.scss

@@ -31,7 +31,7 @@
 // Avatar sizes map
 $tutor-avatar-sizes: (
   20: (
-    font-size: 'tiny',
+    font-size: 'tiny-2',
     icon-size: 12px,
   ),
   24: (

assets/core/scss/utilities/_layout.scss

@@ -45,6 +45,7 @@ $justify-utils: (
 );
 
 $align-items-utils: (
+  items-normal: normal,
   items-start: flex-start,
   items-end: flex-end,
   items-center: center,

assets/core/ts/components/popover.ts

@@ -109,11 +109,23 @@ export const popover = (props: PopoverProps = {}) => ({
     const content = this.$refs.content;
     if (content) {
       content.style.visibility = 'hidden';
+      // Initialize with off-screen position to avoid flashes if visibility fails
+      content.style.left = '-9999px';
+      content.style.top = '-9999px';
     }
 
     this.open = true;
 
     const afterShow = () => {
+      if (!this.open) return;
+
+      const dimensions = this.getContentDimensions(content);
+      // If measurement failed (0 size), Safari might not have rendered it yet. Retry.
+      if (dimensions.width === 0 && dimensions.height === 0) {
+        requestAnimationFrame(afterShow);
+        return;
+      }
+
       this.updatePosition();
       if (content) {
         content.style.visibility = 'visible';
@@ -211,6 +223,13 @@ export const popover = (props: PopoverProps = {}) => ({
 
     const triggerRect = trigger.getBoundingClientRect();
     const contentDimensions = this.getContentDimensions(content);
+
+    // If measurement failed (0 size), retry on next frame
+    if (this.open && contentDimensions.width === 0 && contentDimensions.height === 0) {
+      requestAnimationFrame(() => this.updatePosition());
+      return;
+    }
+
     const viewport = {
       width: window.innerWidth,
       height: window.innerHeight,
@@ -331,12 +350,22 @@ export const popover = (props: PopoverProps = {}) => ({
   },
 
   getContentDimensions(content: HTMLElement): PopoverDimensions {
-    const rect = content.getBoundingClientRect();
+    // Temporarily reset transforms/transitions for accurate measurement
+    const originalTransform = content.style.transform;
+    const originalTransition = content.style.transition;
+    content.style.transform = 'none';
+    content.style.transition = 'none';
 
-    return {
+    const rect = content.getBoundingClientRect();
+    const dimensions = {
       width: content.offsetWidth || rect.width,
       height: content.offsetHeight || rect.height,
     };
+
+    content.style.transform = originalTransform;
+    content.style.transition = originalTransition;
+
+    return dimensions;
   },
 
   convertViewportPositionToContentPosition(content: HTMLElement, position: { top: number; left: number }) {

templates/dashboard/announcements.php

@@ -108,8 +108,9 @@ class="tutor-dashboard-announcements"
 					->render();
 
 				DateFilter::make()
-						->type( DateFilter::TYPE_SINGLE )
+						->type( DateFilter::TYPE_RANGE )
 						->placement( DateFilter::PLACEMENT_BOTTOM_END )
+						->hide_initial_label()
 						->attr( 'class', 'tutor-hidden tutor-sm-flex' )
 						->render();
 
@@ -136,8 +137,9 @@ class="tutor-dashboard-announcements"
 			<div class="tutor-flex tutor-items-center tutor-gap-3">
 				<?php
 					DateFilter::make()
-						->type( DateFilter::TYPE_SINGLE )
+						->type( DateFilter::TYPE_RANGE )
 						->placement( DateFilter::PLACEMENT_BOTTOM_END )
+						->hide_initial_label()
 						->attr( 'class', 'tutor-sm-hidden' )
 						->render();
 
@@ -164,7 +166,7 @@ class="tutor-dashboard-announcements"
 					<div class="tutor-announcement-item">
 						<div class="tutor-flex tutor-items-center tutor-justify-between tutor-mb-5">
 							<div class="tutor-flex tutor-items-center tutor-gap-3">
-								<?php SvgIcon::make()->name( Icon::ANNOUNCEMENT )->render(); ?>
+								<?php SvgIcon::make()->name( Icon::ANNOUNCEMENT )->color( Color::IDLE )->render(); ?>
 								<div class="tutor-tiny tutor-text-secondary">
 									<?php echo esc_html( tutor_i18n_get_formated_date( $announcement->post_date ) ); ?>
 								</div>

templates/dashboard/instructor/home.php

@@ -325,7 +325,7 @@ function ( $carry, $section ) {
 	class="tutor-flex tutor-flex-column tutor-gap-6"
 >
 	<!-- Filters -->
-	<div class="tutor-flex tutor-justify-between tutor-align-center">
+	<div class="tutor-flex tutor-justify-between tutor-items-center">
 		<?php if ( $tutor_pro_enabled ) : ?>
 			<?php DateFilter::make()->type( DateFilter::TYPE_RANGE )->render(); ?>
 		<?php endif; ?>
@@ -445,7 +445,7 @@ class="tutor-dashboard-home-card"
 				x-show="watch('top_performing_courses')"
 				x-cloak
 			> 
-				<div class="tutor-flex tutor-row tutor-justify-between tutor-align-center tutor-gap-9">
+				<div class="tutor-flex tutor-row tutor-justify-between tutor-items-center tutor-gap-9">
 					<div class="tutor-small">
 						<?php esc_html_e( 'Top Performing Courses', 'tutor' ); ?>
 					</div>

templates/dashboard/instructor/home/recent-student-review-item.php

@@ -24,31 +24,36 @@
 		</div>
 
 		<!-- Review Content -->
-		<div class="tutor-flex-1 tutor-flex tutor-flex-column tutor-gap-3">
+		<div class="tutor-flex-1 tutor-flex tutor-flex-column tutor-gap-4">
 			<!-- Header: Name and Rating -->
 			<div class="tutor-flex tutor-justify-between tutor-items-start">
-				<div class="tutor-flex tutor-flex-column tutor-gap-1">
+				<div class="tutor-flex tutor-flex-column tutor-gap-1 tutor-flex-1">
 					<div class="tutor-small tutor-font-semibold">
 						<?php echo esc_html( $review['user']['name'] ); ?>
 					</div>
-					<div class="tutor-flex tutor-gap-5 tutor-items-center">
-						<span class="tutor-badge"><?php echo esc_html( $review['course_name'] ); ?></span>
-						<span class="tutor-text-subdued tutor-tiny">
-							<?php
-							echo esc_html(
-								sprintf(
-									/* translators: %s: Human-readable time difference. */
-									__( '%s ago', 'tutor' ),
-									human_time_diff( strtotime( $review['date'] ) )
-								)
-							);
-							?>
-						</span>
+					<div class="tutor-flex tutor-gap-5 tutor-items-center tutor-sm-flex-column tutor-sm-items-normal tutor-sm-gap-4">
+						<div class="tutor-badge"><?php echo esc_html( $review['course_name'] ); ?></div>
+						<div class="tutor-flex tutor-items-center tutor-justify-between">
+							<div class="tutor-hidden tutor-sm-block">
+								<?php StarRating::make()->rating( $review['rating'] ?? 0 )->render(); ?>
+							</div>
+							<div class="tutor-text-subdued tutor-tiny">
+								<?php
+								echo esc_html(
+									sprintf(
+										/* translators: %s: Human-readable time difference. */
+										__( '%s ago', 'tutor' ),
+										human_time_diff( strtotime( $review['date'] ) )
+									)
+								);
+								?>
+							</div>
+						</div>
 					</div>
 				</div>
 
 				<!-- Star Rating -->
-				<div>
+				<div class="tutor-sm-hidden">
 					<?php StarRating::make()->rating( $review['rating'] ?? 0 )->render(); ?>
 				</div>
 			</div>