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);