CSS : Improve the design of the graphics container;
CSS : Improve the design of actions bar; Python : Add multiple actions (URI Query Types).
This commit is contained in:
Schimon Jehudah, Adv.
parent
9668ade606
commit
43f285e008
7 changed files with 99 additions and 37 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
26
fasi.py
26
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:
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
{% if links %}
|
||||
<div id="action">
|
||||
{% for link in links %}
|
||||
<a href="{{link[1]}}">
|
||||
{{link[0]}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue