Heavily customized version of smokesignal - https://whtwnd.com/kayrozen.com/3lpwe4ymowg2t
kayrozen.com
1<!-- User's Calendars -->
2<div id="calendars-container">
3 {% if calendars %}
4 {% for calendar in calendars %}
5 <div class="card mb-4">
6 <div class="card-content">
7 <div class="media">
8 <div class="media-left">
9 <span class="icon is-large">
10 <i class="fas fa-calendar fa-2x"></i>
11 </span>
12 </div>
13 <div class="media-content">
14 <a href="/bookmark-calendars/{{ calendar.calendar_id }}" class="has-text-dark">
15 <p class="title is-4">{{ calendar.name }}</p>
16 {% if calendar.description %}
17 <p class="subtitle is-6">{{ calendar.description }}</p>
18 {% endif %}
19 </a>
20 <div class="tags">
21 {% for tag in calendar.tags %}
22 <span class="tag is-primary">{{ tag }}</span>
23 {% endfor %}
24 </div>
25 <p class="has-text-grey">
26 <span class="icon">
27 <i class="fas fa-calendar-check"></i>
28 </span>
29 {{ calendar.event_count }} {{ t("events") }}
30 {% if calendar.is_public %}
31 <span class="tag is-info is-light ml-2">{{ t("public") }}</span>
32 {% endif %}
33 </p>
34 </div>
35 <div class="media-right">
36 <div class="dropdown is-right">
37 <div class="dropdown-trigger">
38 <button class="button is-small" aria-haspopup="true" onclick="toggleDropdown(this)">
39 <span class="icon">
40 <i class="fas fa-ellipsis-v"></i>
41 </span>
42 </button>
43 </div>
44 <div class="dropdown-menu">
45 <div class="dropdown-content">
46 <a href="/bookmark-calendars/{{ calendar.calendar_id }}" class="dropdown-item">
47 <span class="icon">
48 <i class="fas fa-eye"></i>
49 </span>
50 {{ t("view-calendar") }}
51 </a>
52 <a href="/bookmark-calendars/{{ calendar.calendar_id }}.ics" class="dropdown-item">
53 <span class="icon">
54 <i class="fas fa-download"></i>
55 </span>
56 {{ t("export-calendar") }}
57 </a>
58 <hr class="dropdown-divider">
59 <a class="dropdown-item has-text-danger"
60 hx-delete="/bookmark-calendars/{{ calendar.calendar_id }}"
61 hx-target="closest .card"
62 hx-swap="outerHTML"
63 hx-confirm="{{ t('confirm-delete-calendar') }}">
64 <span class="icon">
65 <i class="fas fa-trash"></i>
66 </span>
67 {{ t("delete-calendar") }}
68 </a>
69 </div>
70 </div>
71 </div>
72 </div>
73 </div>
74 </div>
75 </div>
76 {% endfor %}
77 {% else %}
78 <div class="notification is-info">
79 <p>{{ t("no-calendars-yet") }}</p>
80 <p>{{ t("create-first-calendar-help") }}</p>
81 </div>
82 {% endif %}
83</div>