From 43f285e008626b5d75768906888bc5169b6c77f0 Mon Sep 17 00:00:00 2001
From: "Schimon Jehudah, Adv." <sjehuda@yandex.com>
Date: Wed, 9 Oct 2024 23:07:16 +0300
Subject: [PATCH] CSS    : Improve the design of the graphics container; CSS   
 : Improve the design of actions bar; Python : Add multiple actions (URI Query
 Types).

---
 README.md          |  4 +--
 css/stylesheet.css | 81 ++++++++++++++++++++++++++++++++++++++--------
 fasi.py            | 26 +++++++++------
 xhtml/disco.xhtml  |  4 +--
 xhtml/jid.xhtml    | 13 ++++----
 xhtml/node.xhtml   |  4 +--
 xhtml/result.xhtml |  4 +--
 7 files changed, 99 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index c8f0839..c5797a0 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ FASI is written in Python and utilizes Jinja2, FastAPI and Slixmpp.
 
 FASI require an XMPP account to work, it only needs an XMPP server.
 
-## Features
+## Supported features
 
 - MUC
 - Photo
@@ -65,7 +65,7 @@ FASI require an XMPP account to work, it only needs an XMPP server.
 - Service Discovery
 - vCard
 
-## XEP
+## Supported XEP specifications
 
 - XEP-0030: Service Discovery
 - XEP-0045: Multi-User Chat
diff --git a/css/stylesheet.css b/css/stylesheet.css
index d0fe946..6aa8f49 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -84,7 +84,7 @@ input:not(
 }
 
 label,
-#action,
+#action > a,
 #exception,
 #xmpp-uri,
 #preview {
@@ -101,7 +101,14 @@ label,
   /* padding-bottom: 1em; */
 }
 
-#action,
+#action > a {
+  display: inline-block;
+  font-size: 1.2em;
+  min-width: 90px;
+  padding: 0.5em;
+  width: 15%;
+}
+
 #download,
 #input {
   border-radius: 26px;
@@ -109,17 +116,21 @@ label,
   padding: 0.5em;
 }
 
+#action {
+  margin-bottom: 1em;
+}
+
 #action,
 #input {
   background: #13b5ea; /* #002b5c */
 }
 
-#action:hover,
+#action > a:hover,
 #input:hover {
   background: #1b3967;
 }
 
-#action,
+#action > a,
 #download,
 #download-narrow,
 #input {
@@ -181,12 +192,16 @@ h1 {
 }
 */
 
+#graphics,
+#photo {
+  border-radius: 50px;
+}
+
 #graphics {
   background: #f2f2f2;
   border: 1px solid #c0c0c0;
-  border-radius: 50px;
   margin: auto;
-  max-width: 80%;
+  max-width: 560px; /* 80% */
   padding: 15px;
   width: 40em;
 }
@@ -217,6 +232,11 @@ h3, h4, h5 {
   padding-right: 2em;
 }
 
+#container-of-profile {
+  /* margin: auto; */
+  padding-bottom: 0.5em;
+}
+
 #profile {
   background: #f5f5f5;
   border-radius: 30px;
@@ -346,11 +366,6 @@ h3, h4, h5 {
     filter: drop-shadow(2px 4px 6px grey); /* TODO Reverse color */
   }
 
-  #message {
-    background: #fbfbfe;
-  }
-
-  #message,
   #note {
     color: #2b2a33;
   }
@@ -386,7 +401,7 @@ h3, h4, h5 {
 }
 */
 
-@media (max-width: 870px) {
+@media (max-width: 885px) {
 
   h1 {
     margin-bottom: 1em;
@@ -405,11 +420,16 @@ h3, h4, h5 {
   #photo,
   #qrcode {
     display: block;
-    border-radius: 50px;
+    /* border-radius: 50px; */
     margin: auto;
     margin-bottom: 2.5em;
   }
 
+  #qrcode {
+    outline: solid;
+    outline-color: #333;
+  }
+
 }
 
 @media (max-width: 725px) {
@@ -437,6 +457,10 @@ h3, h4, h5 {
     display: unset;
   }
 
+  #container-of-profile {
+    padding-bottom: unset;
+  }
+
   #profile {
     border-radius: unset;
     filter: unset;
@@ -448,6 +472,24 @@ h3, h4, h5 {
     width: unset;
   }
 
+  #action {
+    background: unset;
+  }
+
+  #action > a {
+    background: #13b5ea; /* #002b5c */
+  }
+
+  #action > a:first-child {
+    border-bottom-left-radius: 2em;
+    border-top-left-radius: 2em;
+  }
+
+  #action > a:last-child {
+    border-bottom-right-radius: 2em;
+    border-top-right-radius: 2em;
+  }
+
   #note {
     display: block;
     font-weight: unset;
@@ -477,3 +519,16 @@ h3, h4, h5 {
   }
 
 }
+
+@media (max-width: 572px) {
+
+  #action > a:nth-child(2) {
+    border-bottom-right-radius: 2em;
+    border-top-right-radius: 2em;
+  }
+
+  #action > a:nth-child(3) {
+    display: none;
+  }
+
+}
diff --git a/fasi.py b/fasi.py
index 8151b58..280cc15 100644
--- a/fasi.py
+++ b/fasi.py
@@ -324,19 +324,21 @@ class HttpInstance:
                 jid_info = await XmppXep0030.get_jid_info(xmpp_instance, jid_bare)
                 jid_info_iq = jid_info['iq']
                 jid_kind = jid_info['kind']
+                links = []
                 if jid_info['error']:
                     message = '{}: {} (XEP-0030)'.format(jid_info['text'], jid_info['condition'])
                     action = 'Connect with'
-                    link_text = 'Connect'
                     link_href = 'xmpp:{}'.format(jid_bare)
+                    links.append(['Connect', link_href])
                     xmpp_uri = jid_bare
                 elif jid_kind in ('conference', 'server'):
-                    action = link_text = 'Discover'
+                    action = 'Discover'
                     if jid_kind == 'conference':
                         instance = 'conferences'
                     elif jid_kind == 'server':
                         instance = 'services'
                     link_href = 'xmpp:{}?disco;type=get;request=items'.format(jid_bare)
+                    links.append(['Discover', link_href])
                     view_href = '/d/' + jid_bare
                     xmpp_uri = jid_bare
                 elif jid_kind in ('mix', 'muc'):
@@ -344,8 +346,8 @@ class HttpInstance:
                     # TODO Set group chat subject as description.
                     action = 'Join to'
                     instance = 'participants'
-                    link_text = 'Join'
                     link_href = 'xmpp:{}?join'.format(jid_bare)
+                    links.append(['Join', link_href])
                     view_href = '/v/' + jid_bare
                     xmpp_uri = jid_bare
                 #    room_info = await XmppXep0045.get_room_data(xmpp_instance, jid_bare)
@@ -355,23 +357,28 @@ class HttpInstance:
                     if node_name:
                         action = 'Subscribe to'
                         instance = 'articles'
-                        link_text = 'Subscribe'
                         link_href = 'xmpp:{}?pubsub;node={};action=subscribe'.format(jid_bare, node_name)
+                        links.append(['Subscribe', link_href])
+                        links.append(['View', 'xmpp:{}?pubsub;node={}'.format(jid_bare, node_name)])
                         view_href = '/d/{}/{}'.format(jid_bare, node_name)
                         xmpp_uri = '{}?;node={}'.format(jid_bare, node_name)
                     else:
-                        action = link_text = 'Browse'
+                        action = 'Browse'
                         instance = 'nodes'
                         link_href = 'xmpp:{}?disco;type=get;request=items'.format(jid_bare)
+                        links.append(['Browse', link_href])
                         view_href = '/d/' + jid_bare
                         xmpp_uri = jid_bare
                 else:
-                    action = link_text = 'Message'
+                    action = 'Message'
                     instance = 'articles'
                     link_href = 'xmpp:{}?message'.format(jid_bare)
+                    links.append(['Add', 'xmpp:{}?roster'.format(jid_bare)])
+                    links.append(['Message', link_href])
                     node_name = 'urn:xmpp:microblog:0'
                     view_href = '/d/{}/{}'.format(jid_bare, node_name)
                     xmpp_uri = jid_bare
+                links.append(['vCard', 'xmpp:{}?vcard'.format(jid_bare)])
 
                 # JID item count
                 count = None
@@ -479,7 +486,7 @@ class HttpInstance:
                 action = 'Error'
                 title = 'Slixmpp error'
                 xmpp_uri = jid
-                count = filename = jid_bare = jid_kind = link_href = link_text = message = selection = url = None
+                count = filename = jid_bare = jid_kind = links = message = selection = url = None
 
             template_file = 'jid.xhtml'
             template_dict = {
@@ -490,8 +497,7 @@ class HttpInstance:
                 'filename' : filename,
                 'jid_bare' : jid_bare,
                 'jid_kind' : jid_kind,
-                'link_href' : link_href,
-                'link_text' : link_text,
+                'links' : links,
                 'message' : message,
                 'note' : note,
                 'request' : request,
@@ -672,7 +678,7 @@ class Graphics:
         #qrcode_graphics = qrcode.make(text)
         qr = qrcode.QRCode(border=2, box_size=10)
         qr.add_data(text)
-        qrcode_graphics = qr.make_image(fill_color='#000', back_color='#f2f2f2')
+        qrcode_graphics = qr.make_image(fill_color='#333', back_color='#f2f2f2')
         qrcode_graphics.save('qr/{}.png'.format(jid_bare))
 
 class Syndication:
diff --git a/xhtml/disco.xhtml b/xhtml/disco.xhtml
index 7a1127c..92616e2 100644
--- a/xhtml/disco.xhtml
+++ b/xhtml/disco.xhtml
@@ -111,8 +111,8 @@
           {% endif %}
           <!-- % if mix or muc % -->
           {% if link_href %}
-            <div>
-              <a id="action" href="{{link_href}}">
+            <div id="action">
+              <a href="{{link_href}}">
                 {{link_text}}
               </a>
             </div>
diff --git a/xhtml/jid.xhtml b/xhtml/jid.xhtml
index 8a73b23..3d7f414 100644
--- a/xhtml/jid.xhtml
+++ b/xhtml/jid.xhtml
@@ -84,12 +84,13 @@
               <code>{{exception}}</code>
             </div>
           {% endif %}
-          <!-- % if mix or muc % -->
-          {% if link_href %}
-            <div>
-              <a id="action" href="{{link_href}}">
-                {{link_text}}
-              </a>
+          {% if links %}
+            <div id="action">
+              {% for link in links %}
+                <a href="{{link[1]}}">
+                  {{link[0]}}
+                </a>
+              {% endfor %}
             </div>
           {% endif %}
           <!-- div>
diff --git a/xhtml/node.xhtml b/xhtml/node.xhtml
index b20a404..d9f96e8 100644
--- a/xhtml/node.xhtml
+++ b/xhtml/node.xhtml
@@ -80,8 +80,8 @@
           {% endif %}
           <!-- % if mix or muc % -->
           {% if link_href %}
-            <div>
-              <a id="action" href="{{link_href}}">
+            <div id="action">
+              <a href="{{link_href}}">
                 {{link_text}}
               </a>
             </div>
diff --git a/xhtml/result.xhtml b/xhtml/result.xhtml
index e1a9db5..70cfe7d 100644
--- a/xhtml/result.xhtml
+++ b/xhtml/result.xhtml
@@ -49,8 +49,8 @@
               <code>{{exception}}</code>
             </div>
           {% endif %}
-          <div>
-            <a id="action" href="/">Main</a>
+          <div id="action">
+            <a href="/">Main</a>
           </div>
           <div>
             <a href="https://xmpp.org">