Mercurial > xmpp-account-manager
changeset 63:ee1df80a1715 default tip
Nicer-looking input form
| author | mathieui |
|---|---|
| date | Sun, 24 May 2020 14:19:29 +0200 |
| parents | 46ca1aa08146 |
| children | |
| files | client.js index.xhtml locale/django.pot locale/en/LC_MESSAGES/django.po locale/fr/LC_MESSAGES/django.po style.css |
| diffstat | 6 files changed, 24 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client.js +++ b/client.js @@ -128,6 +128,8 @@ document.addEventListener('DOMContentLoa function onConnected() { + const connection_form = document.getElementById('connection'); + connection_form.classList.remove('initial-login'); const new_node = document.createElementNS('http://www.w3.org/1999/xhtml', 'span'); const parent_node = connect.parentNode; const text = document.createTextNode(`{% trans 'Logged in as ${connection.authzid} ' %}`);
--- a/index.xhtml +++ b/index.xhtml @@ -10,7 +10,7 @@ <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> - <title>{% trans 'XMPP account manager' %}</title> + <title>{% trans 'XMPP Account Manager' %}</title> <link rel="canonical" content-type="text/html" href="https://linkmauve.fr/xmpp-account-manager/"/> <link rel="stylesheet" href="share/bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" href="style.css"/> @@ -18,13 +18,13 @@ <body> <div class="container"> +<h1>{% trans 'XMPP Account Manager' %}</h1> <div class="row"> -<form id="connection"> +<form id="connection" class="initial-login"> <input type="email" id="jid" placeholder="JID" title="{% trans 'Enter your JID (or XMPP address), on the form “you@your-server.tld”' %}"/> <input type="password" id="pass" placeholder="Password" title="{% trans 'Enter the password used for this JID' %}"/> -<input type="submit" id="connect" value="Log in"/> -<img width="24" height="24" id="connect-spinner" hidden=""/> +<input type="submit" id="connect" value="Log in"/> <img width="24" height="24" id="connect-spinner" hidden=""/> </form> </div>
--- a/locale/django.pot +++ b/locale/django.pot @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2020-05-24 13:15+0200\n" +"POT-Creation-Date: 2020-05-24 14:22+0200\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Language-Team: LANGUAGE <LL@li.org>\n" @@ -27,7 +27,7 @@ msgstr "" msgid "Log in" msgstr "" -msgid "XMPP account manager" +msgid "XMPP Account Manager" msgstr "" msgid "Enter your JID (or XMPP address), on the form “you@your-server.tld”"
--- a/locale/en/LC_MESSAGES/django.po +++ b/locale/en/LC_MESSAGES/django.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2020-05-24 13:15+0200\n" +"POT-Creation-Date: 2020-05-24 14:22+0200\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Language-Team: LANGUAGE <LL@li.org>\n" @@ -28,7 +28,7 @@ msgstr "" msgid "Log in" msgstr "" -msgid "XMPP account manager" +msgid "XMPP Account Manager" msgstr "" msgid "Enter your JID (or XMPP address), on the form “you@your-server.tld”"
--- a/locale/fr/LC_MESSAGES/django.po +++ b/locale/fr/LC_MESSAGES/django.po @@ -8,7 +8,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2020-05-24 13:15+0200\n" +"POT-Creation-Date: 2020-05-24 14:22+0200\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Language-Team: LANGUAGE <LL@li.org>\n" @@ -28,7 +28,7 @@ msgstr "" msgid "Log in" msgstr "" -msgid "XMPP account manager" +msgid "XMPP Account Manager" msgstr "" msgid "Enter your JID (or XMPP address), on the form “you@your-server.tld”"
--- a/style.css +++ b/style.css @@ -27,6 +27,18 @@ h1 img { #connect { margin-top: 1em; } +.initial-login { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #CCC; + border-radius: 10px; +} +.initial-login > input { + display: block; + margin: 1em; +} .navbar { background-color: #6197d6; background-image: linear-gradient(to right, #000080, #6197d6);