Skip to content

Commit e949f04

Browse files
authored
Merge pull request #11 from bmmmm/feat/signal-chat-ux-improvements
Feat/signal chat ux improvements
2 parents 0d0f19c + 0767b34 commit e949f04

20 files changed

Lines changed: 771 additions & 100 deletions

ascii/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
content="Interner ASCII-Spielplatz für bitcircus101 – nicht in der Navigation verlinkt."
1212
/>
1313
<link rel="icon" type="image/svg+xml" href="../images/favicon.svg" />
14-
<link rel="stylesheet" href="../style.css?v=4" />
14+
<link rel="stylesheet" href="../style.css?v=5" />
1515
</head>
1616
<body class="ascii-playground-body">
1717
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>

chat/index.html

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!doctype html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Signal-Gruppen | bitcircus101</title>
7+
<meta name="title" content="Signal-Gruppen | bitcircus101" />
8+
<meta
9+
name="description"
10+
content="Tritt den Signal-Gruppen des bitcircus101 bei – INFO für Ankündigungen, TALK für Diskussionen."
11+
/>
12+
<meta name="robots" content="index, follow" />
13+
<meta name="theme-color" content="#0d0d0d" />
14+
<meta property="og:type" content="website" />
15+
<meta property="og:url" content="https://bitcircus101.de/chat/" />
16+
<meta property="og:title" content="Signal-Gruppen | bitcircus101" />
17+
<meta property="og:description" content="Tritt den Signal-Gruppen des bitcircus101 bei – INFO für Ankündigungen, TALK für Diskussionen." />
18+
<meta property="og:image" content="https://bitcircus101.de/images/og-image.png" />
19+
<meta property="og:locale" content="de_DE" />
20+
<link rel="canonical" href="https://bitcircus101.de/chat/" />
21+
<link rel="icon" type="image/svg+xml" href="../images/favicon.svg" />
22+
<link rel="stylesheet" href="../style.css?v=5" />
23+
</head>
24+
<body class="chat-page">
25+
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
26+
<a class="chat-close" href="../index.html">Zurück zur Startseite [ESC]</a>
27+
28+
<main id="main-content" class="chat-main">
29+
<h1 class="sr-only">Signal-Gruppen – bitcircus101</h1>
30+
31+
<div class="chat-cards">
32+
<a
33+
class="chat-card chat-card--red"
34+
href="https://signal.group/#CjQKIE1y0qxqFK3-s2iaAfKoRpPr0d0SJ5xfo1CYx1i0OL3HEhBCwWp72gxe7qpDnikgHwmc"
35+
target="_blank"
36+
rel="noopener"
37+
aria-label="Signal INFO-Gruppe beitreten"
38+
>
39+
<h2 class="sr-only">Signal-Gruppe Info</h2>
40+
<pre class="chat-card__art">⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
41+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
42+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠋⣉⣤⣤⣤⣉⠛⢿⣿⣿⣿
43+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⣠⣴⡾⠟⠋⠉⠉⠉⠓⠀⠹⣿⣿
44+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⢁⣠⣶⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿
45+
⣿⣿⣿⣿⣿⣿⣿⡿⠟⢋⣠⣴⣾⣿⣿⣅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿
46+
⣿⣿⣿⣿⡿⠋⣁⣤⣶⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿
47+
⣿⣿⡿⢁⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡷⠀⠀⠀⠀⠀⠀⠀⣀⣴⣿⣿⣿
48+
⣿⡿⠀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⠁⣀⡀⠀⠀⢀⣠⣴⣿⣿⣿⣿⣿⣿
49+
⣿⡇⠀⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⢁⣤⡶⠟⠋⣠⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿
50+
⣿⣿⡀⢻⣯⡙⠛⠛⠋⠁⣀⣤⠾⠛⢁⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
51+
⣿⣿⣿⣄⡙⠻⠿⣶⠶⠿⠋⣁⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
52+
⣿⣿⣿⣿⣿⣶⣤⣤⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
53+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
54+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿</pre>
55+
<div class="chat-card__body">
56+
<span class="chat-card__label">[ INFO ]</span>
57+
<img
58+
class="chat-card__qr"
59+
src="../images/signal-group-info-qr.png"
60+
alt="Signal QR-Code – bitcircus101 Info"
61+
/>
62+
<span class="chat-card__desc">Ankündigungen · wann ist auf</span>
63+
</div>
64+
<span class="chat-card__url">signal.group/#CjQKIE1y0qxqFK3-s2iaAfKoRpPr0d0SJ5xfo1CYx1i0OL3HEhBCwWp72gxe7qpDnikgHwmc</span>
65+
</a>
66+
67+
<a
68+
class="chat-card chat-card--blue"
69+
href="https://signal.group/#CjQKIMlB_MPoq8u3B8dJMsoObtvYyPSdQQhQV2c99VBOEfEOEhBOskl_noYniXrJpnQepOXF"
70+
target="_blank"
71+
rel="noopener"
72+
aria-label="Signal TALK-Gruppe beitreten"
73+
>
74+
<h2 class="sr-only">Signal-Gruppe Talk</h2>
75+
<pre class="chat-card__art">⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
76+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
77+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠋⣉⣤⣤⣤⣉⠛⢿⣿⣿⣿
78+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⣠⣴⡾⠟⠋⠉⠉⠉⠓⠀⠹⣿⣿
79+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⢁⣠⣶⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿
80+
⣿⣿⣿⣿⣿⣿⣿⡿⠟⢋⣠⣴⣾⣿⣿⣅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿
81+
⣿⣿⣿⣿⡿⠋⣁⣤⣶⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿
82+
⣿⣿⡿⢁⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡷⠀⠀⠀⠀⠀⠀⠀⣀⣴⣿⣿⣿
83+
⣿⡿⠀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⠁⣀⡀⠀⠀⢀⣠⣴⣿⣿⣿⣿⣿⣿
84+
⣿⡇⠀⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⢁⣤⡶⠟⠋⣠⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿
85+
⣿⣿⡀⢻⣯⡙⠛⠛⠋⠁⣀⣤⠾⠛⢁⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
86+
⣿⣿⣿⣄⡙⠻⠿⣶⠶⠿⠋⣁⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
87+
⣿⣿⣿⣿⣿⣶⣤⣤⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
88+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
89+
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿</pre>
90+
<div class="chat-card__body">
91+
<span class="chat-card__label">[ TALK ]</span>
92+
<img
93+
class="chat-card__qr"
94+
src="../images/signal-group-talk-qr.png"
95+
alt="Signal QR-Code – bitcircus101 Talk"
96+
/>
97+
<span class="chat-card__desc">reden · diskutieren · fragen</span>
98+
</div>
99+
<span class="chat-card__url">signal.group/#CjQKIMlB_MPoq8u3B8dJMsoObtvYyPSdQQhQV2c99VBOEfEOEhBOskl_noYniXrJpnQepOXF</span>
100+
</a>
101+
</div>
102+
<p class="signal-hint">scannen oder klicken</p>
103+
</main>
104+
<script>
105+
(function () {
106+
var DEST = '../index.html';
107+
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
108+
var MS = reduced ? 0 : 300;
109+
110+
function doClose() {
111+
document.body.classList.add('chat-page--closing');
112+
setTimeout(function () { window.location.href = DEST; }, MS);
113+
}
114+
115+
// Close button
116+
var btn = document.querySelector('.chat-close');
117+
btn.addEventListener('click', function (e) {
118+
e.preventDefault();
119+
e.stopPropagation();
120+
doClose();
121+
});
122+
123+
// Keyboard: Escape key
124+
document.addEventListener('keydown', function (e) {
125+
if (e.key === 'Escape') doClose();
126+
});
127+
128+
// Click outside cards
129+
document.body.addEventListener('click', function (e) {
130+
var cards = document.querySelector('.chat-cards');
131+
if (cards && !cards.contains(e.target)) doClose();
132+
});
133+
})();
134+
</script>
135+
</body>
136+
</html>

dankedankedanke.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
<meta property="og:type" content="website" />
1111
<meta property="og:title" content="Danke für deinen Beitrag – bitcircus101" />
1212
<meta property="og:description" content="Dein Beitrag hält den Hackspace am Laufen. Danke!" />
13-
<meta property="og:image" content="https://bitcircus101.de/images/img1.jpeg" />
13+
<meta property="og:image" content="https://bitcircus101.de/images/og-image.png" />
1414
<link rel="icon" type="image/svg+xml" href="images/favicon.svg" />
15-
<link rel="stylesheet" href="style.css?v=4" />
15+
<link rel="stylesheet" href="style.css?v=5" />
1616
</head>
1717
<body>
1818
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
@@ -38,7 +38,7 @@
3838
<li><a href="raum-nutzen.html">Raum nutzen</a></li>
3939
<li><a href="donations.html" class="nav__cta">Unterstützen</a></li>
4040
<li><a href="index.html#contact">Kontakt</a></li>
41-
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673;</a></li>
41+
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673; RSS</a></li>
4242
</ul>
4343
</nav>
4444
</header>
@@ -61,7 +61,7 @@ <h1>DANKE.</h1>
6161
| |
6262
+--------------------+</pre>
6363
<div class="back-link">
64-
<a href="index.html">← Zurück zur Startseite</a>
64+
<a href="index.html" class="btn btn-shimmer">← Zurück zur Startseite</a>
6565
</div>
6666
</section>
6767
</div>

donations.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@
2424
property="og:description"
2525
content="bitcircus101 wird komplett durch die Community getragen. Hilf mit, dass der Hackspace in Bonn weiter läuft."
2626
/>
27-
<meta property="og:image" content="https://bitcircus101.de/images/img1.jpeg" />
27+
<meta property="og:image" content="https://bitcircus101.de/images/og-image.png" />
2828
<meta property="og:locale" content="de_DE" />
2929
<meta name="twitter:card" content="summary_large_image" />
3030
<meta name="twitter:title" content="Unterstütze bitcircus101 | Hackspace Bonn unterstützen" />
3131
<meta name="twitter:description" content="Hilf mit deinem Beitrag, dass bitcircus101 ein kreativer und technischer Freiraum in Bonn bleibt." />
32-
<meta name="twitter:image" content="https://bitcircus101.de/images/img1.jpeg" />
32+
<meta name="twitter:image" content="https://bitcircus101.de/images/og-image.png" />
3333
<link rel="canonical" href="https://bitcircus101.de/donations.html" />
3434
<link rel="icon" type="image/svg+xml" href="images/favicon.svg" />
35-
<link rel="stylesheet" href="style.css?v=4" />
35+
<link rel="stylesheet" href="style.css?v=5" />
3636
</head>
3737
<body>
3838
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
@@ -95,7 +95,7 @@ <h2 id="site-notice-title" class="site-notice__title">
9595
<li><a href="raum-nutzen.html">Raum nutzen</a></li>
9696
<li><a href="donations.html" class="nav__cta">Unterstützen</a></li>
9797
<li><a href="index.html#contact">Kontakt</a></li>
98-
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673;</a></li>
98+
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673; RSS</a></li>
9999
</ul>
100100
</nav>
101101
</header>
@@ -208,7 +208,7 @@ <h3>Ko&#x2011;fi</h3>
208208
</div>
209209
</div>
210210
<div class="back-link">
211-
<a href="index.html">← Zurück zur Startseite</a>
211+
<a href="index.html" class="btn btn-shimmer">← Zurück zur Startseite</a>
212212
</div>
213213
</section>
214214
</div>

events.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@
2121
property="og:description"
2222
content="Alle Termine im bitcircus101 Hackspace Bonn. linkup, Lightning Talks, offene Freitagabende."
2323
/>
24-
<meta property="og:image" content="https://bitcircus101.de/images/img1.jpeg" />
24+
<meta property="og:image" content="https://bitcircus101.de/images/og-image.png" />
2525
<meta property="og:locale" content="de_DE" />
2626
<meta name="twitter:card" content="summary_large_image" />
2727
<meta name="twitter:title" content="Veranstaltungen – bitcircus101 Hackspace Bonn" />
2828
<meta name="twitter:description" content="Alle Termine im bitcircus101 Hackspace Bonn. linkup, Lightning Talks, offene Freitagabende." />
29-
<meta name="twitter:image" content="https://bitcircus101.de/images/img1.jpeg" />
29+
<meta name="twitter:image" content="https://bitcircus101.de/images/og-image.png" />
3030
<meta name="theme-color" content="#0d0d0d" />
3131
<link rel="canonical" href="https://bitcircus101.de/events.html" />
3232
<link rel="alternate" type="application/rss+xml" title="bitcircus101 Termine" href="feed.xml" />
3333
<link rel="icon" type="image/svg+xml" href="images/favicon.svg" />
34-
<link rel="stylesheet" href="style.css?v=4" />
34+
<link rel="stylesheet" href="style.css?v=5" />
3535
</head>
3636
<body>
3737
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
@@ -57,7 +57,7 @@
5757
<li><a href="raum-nutzen.html">Raum nutzen</a></li>
5858
<li><a href="donations.html" class="nav__cta">Unterstützen</a></li>
5959
<li><a href="index.html#contact">Kontakt</a></li>
60-
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673;</a></li>
60+
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673; RSS</a></li>
6161
</ul>
6262
</nav>
6363
</header>
@@ -112,7 +112,7 @@ <h2 class="events-subscribe__title">bitcircus101 Kalender</h2>
112112

113113
<section aria-labelledby="events-list-heading">
114114
<h2 id="events-list-heading" class="sr-only">Kommende Termine</h2>
115-
<div id="events-list" class="events-list">
115+
<div id="events-list" class="events-list" aria-live="polite" aria-busy="true">
116116
<noscript>
117117
<p>JavaScript wird für die Kalender-Anzeige benötigt.
118118
<a href="https://nc.6bm.de/apps/calendar/p/DCaFSYECrcTJRJjC" target="_blank" rel="noopener">Kalender direkt öffnen ↗</a></p>
@@ -127,7 +127,7 @@ <h2 id="events-list-heading" class="sr-only">Kommende Termine</h2>
127127
</section>
128128
</section>
129129
<div class="back-link">
130-
<a href="index.html">← Zurück zur Startseite</a>
130+
<a href="index.html" class="btn btn-shimmer">← Zurück zur Startseite</a>
131131
</div>
132132
</div>
133133
</main>

events.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@
102102
'<p><a href="' + CALENDAR_URL + '" target="_blank" rel="noopener">' +
103103
"Kalender \u00f6ffnen \u2197</a></p>";
104104
}
105+
el.removeAttribute("aria-busy");
105106
return;
106107
}
107108

@@ -280,8 +281,11 @@
280281
html += '<p class="event-card__desc">' + esc(e.description) + "</p>";
281282
}
282283
if (e.location) {
283-
html += '<p class="event-card__location">' +
284-
'\u25cb ' + esc(e.location) + "</p>";
284+
var osmLoc = encodeURIComponent(e.location);
285+
html += '<a class="event-card__location" href="' +
286+
'https://www.openstreetmap.org/search?query=' + osmLoc +
287+
'" target="_blank" rel="noopener" title="Auf Karte anzeigen">' +
288+
'\u25cb ' + esc(e.location) + "</a>";
285289
}
286290
// Meta: time + tags
287291
html += '<div class="event-card__meta">';
@@ -322,6 +326,7 @@
322326
});
323327

324328
el.innerHTML = html;
329+
el.removeAttribute("aria-busy");
325330

326331
// Permalink: copy URL to clipboard on click
327332
el.querySelectorAll(".event-action--link").forEach(function (btn) {
@@ -510,6 +515,7 @@
510515
"<p>Termine direkt ansehen: " +
511516
'<a href="' + CALENDAR_URL + '" target="_blank" rel="noopener">' +
512517
"Kalender \u00f6ffnen \u2197</a></p></div>";
518+
el.removeAttribute("aria-busy");
513519
}
514520

515521
// ── Last Sync Display ────────────────────────────────────────────────────

images/og-image.png

1.88 MB
Loading

impressum-datenschutz.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
href="https://bitcircus101.de/impressum-datenschutz.html"
3838
/>
3939
<link rel="icon" type="image/svg+xml" href="images/favicon.svg" />
40-
<link rel="stylesheet" href="style.css?v=4" />
40+
<link rel="stylesheet" href="style.css?v=5" />
4141
</head>
4242
<body>
4343
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
@@ -63,7 +63,7 @@
6363
<li><a href="raum-nutzen.html">Raum nutzen</a></li>
6464
<li><a href="donations.html" class="nav__cta">Unterstützen</a></li>
6565
<li><a href="index.html#contact">Kontakt</a></li>
66-
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673;</a></li>
66+
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673; RSS</a></li>
6767
</ul>
6868
</nav>
6969
</header>
@@ -219,7 +219,7 @@ <h3>Änderungen</h3>
219219
Datum der letzten Änderung verfügbar.
220220
</p>
221221
<div class="back-link">
222-
<a href="index.html">← Zurück zur Startseite</a>
222+
<a href="index.html" class="btn btn-shimmer">← Zurück zur Startseite</a>
223223
</div>
224224
</section>
225225
</div>

includes/site-header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<li><a href="raum-nutzen.html">Raum nutzen</a></li>
2121
<li><a href="donations.html" class="nav__cta">Unterstützen</a></li>
2222
<li><a href="index.html#contact">Kontakt</a></li>
23-
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673;</a></li>
23+
<li><a href="feed.xml" class="nav__rss" title="RSS Feed" aria-label="RSS-Feed der Termine">&#9673; RSS</a></li>
2424
</ul>
2525
</nav>
2626
</header>

0 commit comments

Comments
 (0)