From c9124cb5eb6631c79f2f47bb2893081e0cbc7345 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Thu, 4 Nov 2021 22:32:17 -0400 Subject: [PATCH] Make web ui prettier --- config/config.go | 2 +- server/index.html | 21 ++++---- server/static/css/app.css | 69 +++++++++++++++++++++++-- server/static/img/delete_black_24dp.svg | 1 - server/static/js/app.js | 11 ++-- 5 files changed, 81 insertions(+), 23 deletions(-) delete mode 100644 server/static/img/delete_black_24dp.svg diff --git a/config/config.go b/config/config.go index b244349b..f80cc9ab 100644 --- a/config/config.go +++ b/config/config.go @@ -21,7 +21,7 @@ const ( var ( defaultGlobalTopicLimit = 5000 defaultVisitorRequestLimit = rate.Every(10 * time.Second) - defaultVisitorRequestLimitBurst = 50 + defaultVisitorRequestLimitBurst = 60 defaultVisitorSubscriptionLimit = 30 ) diff --git a/server/index.html b/server/index.html index 3cbef71f..dab03f14 100644 --- a/server/index.html +++ b/server/index.html @@ -65,25 +65,25 @@

+

Subscribe in this Web UI

+

+

+ Subscribe to topics here and receive messages as desktop notification. Topics are not password-protected, + so choose a name that's not easy to guess. Once subscribed, you can publish messages via PUT/POST. +

-

Subscribe via web

-

-

- Messages published to topics subscribed here will show up as desktop notification. - Topics are not password-protected, so choose a name that's not easy to guess. Once subscribed, you can - publish messages via PUT/POST. -

+ Topic:

+

Subscribed topics:

+
    -

    Subscribed topics:

    -
    -

    Subscribe via phone

    +

    Subscribe via Android App

    You can use the Ntfy Android App to receive notifications directly on your phone. Just like the server, this app is also open source. @@ -190,7 +190,6 @@ is the Firebase Cloud Messaging (FCM) service, which is required to provide instant Android notifications (see FAQ for details).

    -

    The web server does not log or otherwise store request paths, remote IP addresses or even topics or messages, aside from a short on-disk cache (up to a day) to support service restarts. diff --git a/server/static/css/app.css b/server/static/css/app.css index cc9a67b9..664bd438 100644 --- a/server/static/css/app.css +++ b/server/static/css/app.css @@ -58,9 +58,9 @@ code { border-radius: 3px; margin-top: 10px; margin-bottom: 20px; + overflow-x: scroll; } - /* Lato font (OFL), https://fonts.google.com/specimen/Lato#about, embedded with the help of https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin */ @@ -118,6 +118,69 @@ li { font-size: 0.9em; } +/* Subscribe box SMALL SCREEN */ +@media only screen and (max-width: 1599px) { + #subscribeBox #subscribeForm { + border-left: 4px solid #3a9784; + padding: 10px; + } + + #subscribeBox h3 { + margin-top: 0; + margin-bottom: 0; + font-size: 1.1em; + } + + #subscribeBox #topicsHeader { + margin-bottom: 0; + } + + #subscribeBox input { + height: 24px; + min-width: 200px; + max-width: 300px; + border-radius: 3px; + border: none; + border-bottom: 1px solid #aaa; + font-size: 0.8em; + } + + #subscribeBox input:focus { + border-bottom: 2px solid #3a9784; + outline: none; + } + + #subscribeBox ul { + margin: 0; + padding: 0; + } + + #subscribeBox li { + margin: 3px 0; + padding: 0; + } + + #subscribeBox li img { + width: 15px; + height: 15px; + vertical-align: bottom; + } + + #subscribeBox button { + font-size: 0.8em; + background: #3a9784; + border-radius: 3px; + padding: 5px; + color: white; + cursor: pointer; + } + + #subscribeBox button:hover { + background: #317f6f; + } +} + +/* Subscribe box BIG SCREEN */ @media only screen and (min-width: 1600px) { #subscribeBox { position: fixed; @@ -175,11 +238,9 @@ li { font-size: 0.7em; background: #3a9784; border-radius: 3px; - padding: 3px 5px; + padding: 5px; color: white; cursor: pointer; - border-top: solid transparent 2px; - border-bottom: solid transparent 2px; } #subscribeBox button:hover { diff --git a/server/static/img/delete_black_24dp.svg b/server/static/img/delete_black_24dp.svg deleted file mode 100644 index 58c6697d..00000000 --- a/server/static/img/delete_black_24dp.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/server/static/js/app.js b/server/static/js/app.js index 24d4f5d0..7e67631d 100644 --- a/server/static/js/app.js +++ b/server/static/js/app.js @@ -16,7 +16,6 @@ const topicsList = document.getElementById("topicsList"); const topicField = document.getElementById("topicField"); const notifySound = document.getElementById("notifySound"); const subscribeButton = document.getElementById("subscribeButton"); -const subscribeForm = document.getElementById("subscribeForm"); const errorField = document.getElementById("error"); const subscribe = (topic) => { @@ -40,7 +39,7 @@ const subscribeInternal = (topic, delaySec) => { if (!topicEntry) { topicEntry = document.createElement('li'); topicEntry.id = `topic-${topic}`; - topicEntry.innerHTML = `${topic} `; + topicEntry.innerHTML = `${topic} `; topicsList.appendChild(topicEntry); } topicsHeader.style.display = ''; @@ -48,13 +47,13 @@ const subscribeInternal = (topic, delaySec) => { // Open event source let eventSource = new EventSource(`${topic}/sse`); eventSource.onopen = () => { - topicEntry.innerHTML = `${topic} `; + topicEntry.innerHTML = `${topic} `; delaySec = 0; // Reset on successful connection }; eventSource.onerror = (e) => { + topicEntry.innerHTML = `${topic} (Reconnecting) `; + eventSource.close(); const newDelaySec = (delaySec + 5 <= 15) ? delaySec + 5 : 15; - topicEntry.innerHTML = `${topic} (Reconnecting in ${newDelaySec}s ...) `; - eventSource.close() subscribeInternal(topic, newDelaySec); }; eventSource.onmessage = (e) => { @@ -83,7 +82,7 @@ const unsubscribe = (topic) => { const test = (topic) => { fetch(`/${topic}`, { method: 'PUT', - body: `This is a test notification sent from the Ntfy Web UI. It was sent at ${new Date().toString()}.` + body: `This is a test notification sent by the ntfy.sh Web UI at ${new Date().toString()}.` }) };