From 8b92f49f5485283f2b8971e4224d81908f9947d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Dunglas?= Date: Sun, 7 Jun 2020 23:48:40 +0200 Subject: [PATCH] fix: Fix invalid HTML and improve UX --- examples/chat/templates/chat.html | 77 +++++++------ examples/chat/templates/join.html | 30 ++--- examples/chat/templates/layout.html | 63 ++++++----- public/app.css | 8 +- public/app.js | 10 +- public/index.html | 163 ++++++++++++++-------------- 6 files changed, 182 insertions(+), 169 deletions(-) diff --git a/examples/chat/templates/chat.html b/examples/chat/templates/chat.html index 46a38219..b18ce3e0 100644 --- a/examples/chat/templates/chat.html +++ b/examples/chat/templates/chat.html @@ -1,55 +1,54 @@ {% extends "layout.html" %} {% block content %} -
-
-
-
- -
+
+
+
+
+ +
-
-
-
- -
-
- -
+ +
+
+
- -
+
+ +
+
+
+
-
-
-

Online

- - +
+
+

Online

-
+ -
+
+ + + +
+ +
-
+
+
- - + + {% endblock %} diff --git a/examples/chat/templates/join.html b/examples/chat/templates/join.html index 6c275134..8d6be4c7 100644 --- a/examples/chat/templates/join.html +++ b/examples/chat/templates/join.html @@ -1,19 +1,19 @@ {% extends "layout.html" %} {% block content %} -
-

Join the chat

-
-
-
- - - - -
-
- -
+
+

Join the chat

+ +
+
+ + + +
- -
+
+ +
+
+ +
{% endblock %} diff --git a/examples/chat/templates/layout.html b/examples/chat/templates/layout.html index 9021c51e..141c1bf3 100644 --- a/examples/chat/templates/layout.html +++ b/examples/chat/templates/layout.html @@ -1,35 +1,40 @@ - - - - - A chat using Mercure - - - - - -
-
-
-
-

- Mercure -

-

Demo Chat App (sources)

-
-
+ + + + + A chat using Mercure + + + + + + +
+
+
+
+

+ Mercure +

+

Demo Chat App (sources)

-
-
{% block content %}{% endblock %}
- - +
+
+
{% block content %}{% endblock %}
+ + + diff --git a/public/app.css b/public/app.css index deac72b1..fc07fb9a 100644 --- a/public/app.css +++ b/public/app.css @@ -1,3 +1,7 @@ -h1 { - margin-top: 15px; +.hero { + margin-bottom: 15px; +} + +.hero img { + width: 40%; } diff --git a/public/app.js b/public/app.js index 10c62c89..15c96234 100644 --- a/public/app.js +++ b/public/app.js @@ -15,7 +15,7 @@ function error(e) { const message = e.toString(); console.error(e); - alert(message === "[object Event]" ? "EventSource error" : message); + alert(message); } function getHubUrl(response) { @@ -123,17 +123,17 @@ foo`; if (!ol) { ol = document.createElement("ol"); ol.reversed = true; - + updates.textContent = ""; updates.appendChild(ol); } const li = document.importNode(template.content, true); - li.querySelector("h1").textContent = e.lastEventId; + li.querySelector("h2").textContent = e.lastEventId; li.querySelector("pre").textContent = e.data; ol.firstChild ? ol.insertBefore(li, ol.firstChild) : ol.appendChild(li); }; - eventSource.onerror = error; + eventSource.onerror = console.error; this.elements.unsubscribe.disabled = false; }; subscribeForm.elements.unsubscribe.onclick = function () { @@ -157,7 +157,7 @@ foo`; }); topics.value.split("\n").forEach((topic) => body.append("topic", topic)); - priv.checked && body.append("private", "on") + priv.checked && body.append("private", "on"); const opt = { method: "POST", body }; if (settingsForm.authorization.value === "header") diff --git a/public/index.html b/public/index.html index ebd5580b..dca152dc 100644 --- a/public/index.html +++ b/public/index.html @@ -9,108 +9,112 @@ -
+

- Mercure + Mercure

-

Debugging Tools

+

Debugging Tools

+
-
-

Settings

+
+
+

Settings

-
-
- - + +
+ + -

- Will be filled automatically if you discover a resource. -

-
+

+ Will be filled automatically if you discover a resource. +

+
-
- +
+ -
- - -
+
+ + +
-

- The mercureAuthorization cookie will be set automatically by the server only if you discover a demo endpoint. -

-
+

+ The mercureAuthorization cookie will be set automatically by the server only if + you discover a demo endpoint. +

+
-
- - +
+ + -

- Required to publish, or to subscribe to private updates.
- Claim structure to use: - 

{
+                        

+                            
Required to publish, or to subscribe to private updates.

+                                Claim structure to use:

+                            
{
   "mercure": {
     "subscribe": ["list of topic selectors, * for all, omit for public only"],
     "publish": ["list of topic selectors, * for all, omit to not allow to publish"]
   }
 }


-                        Create a token
-                        (demo key: !ChangeMe!)
-                    

-                

-            
-
+ Create a + token + (demo key: !ChangeMe!) +
+
+ + -
+
+

Discover

-
-

Discover

+
+
+ +
+ +
- -
- -
- +

+ URL returning a Link rel="mercure" HTTP header to init the discovery.
+ Demo endpoints: any subpath of /demo. +

-

- URL returning a Link rel="mercure" HTTP header to init the discovery.
- Demo endpoints: any subpath of /demo. -

-
- -
- -
- -
- -

Data to return. Supported only by demo endpoints.

-
+
- -
-
+

Data to return. Supported only by demo endpoints.

+
+ + + +
-
+
-

Subscribe

+

Subscribe

@@ -118,12 +122,13 @@

Subscribe

-

- One URI template or string per line (try the tester).
- Use * to subscribe to all topics.
- Examples: -


-

+
+

One URI template or string per line + (try the tester).

+

Use * to subscribe to all topics.

+

Examples:

+
+
@@ -137,21 +142,21 @@

Subscribe

-
Not subscribed.
+
Not subscribed.
- +
-

Publish

+

Publish