Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<div class="bookmark-calendar-container">
2 <div class="columns">
3 <div class="column">
4 <!-- Timeline View -->
5 <div class="timeline-container" id="timeline-container">
6 {% if events %}
7 <div class="timeline">
8 {% for bookmarked_event in events %}
9 <div class="timeline-item">
10 <div class="timeline-marker is-icon">
11 <i class="fas fa-bookmark" style="color: #ff6b6b;"></i>
12 </div>
13 <div class="timeline-content">
14 <div class="event-card box">
15 {% if bookmarked_event.bookmark.tags %}
16 <div class="tags mb-3">
17 {% for tag in bookmarked_event.bookmark.tags %}
18 <span class="tag is-primary is-small">{{ tag }}</span>
19 {% endfor %}
20 </div>
21 {% endif %}
22
23 <h5 class="title is-5">{{ bookmarked_event.event_details.name }}</h5>
24 {% if bookmarked_event.event_details.description %}
25 <p class="content">{{ bookmarked_event.event_details.description }}</p>
26 {% endif %}
27
28 <div class="columns is-mobile">
29 <div class="column">
30 {% if bookmarked_event.event_details.starts_at %}
31 <p class="has-text-grey">
32 <span class="icon">
33 <i class="fas fa-calendar"></i>
34 </span>
35 {{ bookmarked_event.event_details.starts_at | date(format="%B %d, %Y") }}
36 </p>
37 {% endif %}
38 {% if bookmarked_event.event_details.locations and bookmarked_event.event_details.locations|length > 0 %}
39 <p class="has-text-grey">
40 <span class="icon">
41 <i class="fas fa-map-marker-alt"></i>
42 </span>
43 <!-- Simple location display - you can enhance this -->
44 {{ t("event-location") }}
45 </p>
46 {% endif %}
47 </div>
48 <div class="column is-narrow">
49 <div class="buttons">
50 <a href="/events/{{ bookmarked_event.event_rkey }}" class="button is-small is-primary">
51 {{ t("view-event") }}
52 </a>
53 <button class="button is-small is-danger is-outlined"
54 hx-delete="/bookmarks/{{ bookmarked_event.bookmark.bookmark_aturi | replace(from='at://', to='') | urlencode }}"
55 hx-confirm="{{ t('confirm-remove-bookmark') }}"
56 hx-target="closest .timeline-item"
57 hx-swap="outerHTML">
58 <span class="icon">
59 <i class="fas fa-trash"></i>
60 </span>
61 <span>{{ t("remove-bookmark") }}</span>
62 </button>
63 </div>
64 </div>
65 </div>
66
67 <footer class="is-size-7 has-text-grey mt-3">
68 {{ t("bookmarked-on", date=bookmarked_event.bookmark.created_at | date(format="%B %d, %Y")) }}
69 </footer>
70 </div>
71 </div>
72 </div>
73 {% endfor %}
74 </div>
75 {% else %}
76 <div class="has-text-centered py-6">
77 <span class="icon is-large has-text-grey-light">
78 <i class="fas fa-calendar-times fa-3x"></i>
79 </span>
80 <p class="title is-4 has-text-grey">{{ t("no-bookmarked-events") }}</p>
81 <p class="subtitle has-text-grey">{{ t("start-bookmarking-events") }}</p>
82 </div>
83 {% endif %}
84 </div>
85 </div>
86 <div class="column">
87 <div class="is-pulled-right">
88 {% include 'mini_calendar.html' %}
89 </div>
90 </div>
91 </div>
92</div>