Skip to content

Commit

Permalink
fix: Fix invalid HTML and improve UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@dunglas
dunglas committed Jun 7, 2020
1 parent 3b91a50 commit 52735e9
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 169 deletions.
77 changes: 38 additions & 39 deletions examples/chat/templates/chat.html
View file
@@ -1,55 +1,54 @@
{% extends "layout.html" %}
{% block content %}
<section class="section" id="chat">
<div class="columns">
<div class="column is-three-quarters">
<div class="box">
<template id="message">
<div><strong class="username">K茅vin</strong>: <span class="msg"></span></div>
</template>
<div id="messages"></div>
<section class="section" id="chat">
<div class="columns">
<div class="column is-three-quarters">
<div class="box">
<template id="message">
<div><strong class="username">K茅vin</strong>: <span class="msg"></span></div>
</template>
<div id="messages"></div>

<form>
<div class="field has-addons">
<div class="control is-expanded">
<input name="message" placeholder="Your message..." autocomplete="off" required class="input is-small is-fullwidth">
</div>
<div class="control">
<button class="button is-primary is-small">Post</button>
</div>
<form>
<div class="field has-addons">
<div class="control is-expanded">
<input name="message" placeholder="Your message..." autocomplete="off" required
class="input is-small is-fullwidth">
</div>
</form>
</div>
<div class="control">
<button class="button is-primary is-small">Post</button>
</div>
</div>
</form>
</div>
</div>

<div class="column">
<div class="panel">
<p class="panel-heading">Online</p>

<template id="online-user">
<div class="panel-block">
<span class="panel-icon">
<i class="fas fa-user" aria-hidden="true"></i>
</span>
<span class="username"></span>
</div>
</template>
<div class="column">
<div class="panel">
<p class="panel-heading">Online</p>

<div class="panel-block is-active">
<template id="online-user">
<div class="panel-block">
<span class="panel-icon">
<i class="fas fa-smile" aria-hidden="true"></i>
<i class="fas fa-user" aria-hidden="true"></i>
</span>
<span id="username" title="This is you"></span>
<span class="username"></span>
</div>
</template>

<div id="user-list"></div>
<div class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-smile" aria-hidden="true"></i>
</span>
<span id="username" title="This is you"></span>
</div>

<div id="user-list"></div>
</div>
</div>
</section>
</div>
</section>

<script type="application/json" id="config">
{{ config|tojson|safe }}
</script>
<script src="/static/chat.js"></script>
<script type="application/json" id="config">{{ config|tojson|safe }}</script>
<script src="/static/chat.js"></script>
{% endblock %}
30 changes: 15 additions & 15 deletions examples/chat/templates/join.html
View file
@@ -1,19 +1,19 @@
{% extends "layout.html" %}
{% block content %}
<section class="section has-text-centered">
<h1 class="title">Join the chat</h1>
<form method="POST" action="{{ url_for('chat') }}">
<div class="field is-grouped is-grouped-centered">
<div class="control has-icons-left">
<input name="username" placeholder="Username" size="20" required class="input">
<span class="icon is-small is-left">
<i class="fas fa-smile"></i>
</span>
</div>
<div class="control">
<button class="button is-primary">Join!</button>
</div>
<section class="section has-text-centered">
<h1 class="title">Join the chat</h1>
<form method="POST" action="{{ url_for('chat') }}">
<div class="field is-grouped is-grouped-centered">
<div class="control has-icons-left">
<input name="username" placeholder="Username" size="20" required class="input">
<span class="icon is-small is-left">
<i class="fas fa-smile"></i>
</span>
</div>
</form>
</section>
<div class="control">
<button class="button is-primary">Join!</button>
</div>
</div>
</form>
</section>
{% endblock %}
63 changes: 34 additions & 29 deletions examples/chat/templates/layout.html
View file
@@ -1,35 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A chat using Mercure</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8/css/bulma.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/static/app.css">
</head>

<body>
<div class="hero is-light is-small">
<div class="hero-body has-text-centered">
<div class="container">
<div class="column is-three-fifths is-offset-one-fifth">
<h1 class="title">
<a href="https://mercure.rocks"><img src="https://mercure.rocks/static/logo.svg" alt="Mercure"></a>
</h1>
<h2 class="subtitle">Demo Chat App (<a href="https://github.com/dunglas/mercure/tree/master/examples/chat">sources</a>)</h2>
</div>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A chat using Mercure</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8/css/bulma.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href="/static/app.css">
</head>

<body>
<div class="hero is-light is-small">
<div class="hero-body has-text-centered">
<div class="container">
<div class="column is-three-fifths is-offset-one-fifth">
<h1 class="title">
<a href="https://mercure.rocks"><img src="https://mercure.rocks/static/logo.svg" alt="Mercure"></a>
</h1>
<h2 class="subtitle">Demo Chat App (<a
href="https://github.com/dunglas/mercure/tree/master/examples/chat">sources</a>)</h2>
</div>
</div>
<main role="main" class="container">{% block content %}{% endblock %}</main>
<footer class="footer">
<div class="content has-text-centered">
<p>
This is a demo chat using <a href="https://mercure.rocks">Mercure</a>.<br><a href="https://github.com/dunglas/mercure/tree/master/examples/chat">Source code</a>
</p>
</div>
</footer>
</body>
</div>
</div>
<main role="main" class="container">{% block content %}{% endblock %}</main>
<footer class="footer">
<div class="content has-text-centered">
<p>
This is a demo chat using <a href="https://mercure.rocks">Mercure</a>.<br><a
href="https://github.com/dunglas/mercure/tree/master/examples/chat">Source code</a>
</p>
</div>
</footer>
</body>

</html>
8 changes: 6 additions & 2 deletions public/app.css
View file
@@ -1,3 +1,7 @@
h1 {
margin-top: 15px;
.hero {
margin-bottom: 15px;
}

.hero img {
width: 40%;
}
10 changes: 5 additions & 5 deletions public/app.js
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 () {
Expand All @@ -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")
Expand Down

0 comments on commit 52735e9

Please sign in to comment.