connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Hide event time display for single-slot events

Browse Source 
Hide time display for events with duration <= 30px (single time slots)
to maximize space for event titles in compact event boxes.

- Single-slot events show title only for better readability
- Applies to both 15-minute and 30-minute time increment modes
- Consistent behavior across static events and drag previews
- Improves UX for short duration events where time display crowds the title

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-03 15:39:15 -04:00
parent ceae654a39
commit 2b98c4d229
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/week_view.rs
View File

@@ -915,7 +915,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
// Event content // Event content
<div class="event-content"> <div class="event-content">
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div> <div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
{if !is_all_day { {if !is_all_day && duration_pixels > 30.0 {
html! { <div class="event-time">{time_display}</div> } html! { <div class="event-time">{time_display}</div> }
} else { } else {
html! {} html! {}
@@ -985,7 +985,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", preview_position, duration_pixels, event_color)} style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", preview_position, duration_pixels, event_color)}
> >
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div> <div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
<div class="event-time">{format!("{} - {}", new_start_time.format("%I:%M %p"), new_end_time.format("%I:%M %p"))}</div> {if duration_pixels > 30.0 {
html! { <div class="event-time">{format!("{} - {}", new_start_time.format("%I:%M %p"), new_end_time.format("%I:%M %p"))}</div> }
} else {
html! {}
}}
</div> </div>
} }
}, },
@@ -1014,7 +1018,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", new_start_pixels, new_height, event_color)} style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", new_start_pixels, new_height, event_color)}
> >
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div> <div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
<div class="event-time">{format!("{} - {}", new_start_time.format("%I:%M %p"), original_end.time().format("%I:%M %p"))}</div> {if new_height > 30.0 {
html! { <div class="event-time">{format!("{} - {}", new_start_time.format("%I:%M %p"), original_end.time().format("%I:%M %p"))}</div> }
} else {
html! {}
}}
</div> </div>
} }
}, },
@@ -1037,7 +1045,11 @@ pub fn week_view(props: &WeekViewProps) -> Html {
style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", original_start_pixels, new_height, event_color)} style={format!("top: {}px; height: {}px; background-color: {}; opacity: 0.7;", original_start_pixels, new_height, event_color)}
> >
<div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div> <div class="event-title">{event.summary.as_ref().unwrap_or(&"Untitled".to_string())}</div>
<div class="event-time">{format!("{} - {}", original_start.time().format("%I:%M %p"), new_end_time.format("%I:%M %p"))}</div> {if new_height > 30.0 {
html! { <div class="event-time">{format!("{} - {}", original_start.time().format("%I:%M %p"), new_end_time.format("%I:%M %p"))}</div> }
} else {
html! {}
}}
</div> </div>
} }
} }