Mercurial > libervia-templates
view default/base/base.html @ 85:05b500bd6235
chat: chat implementation, first draft:
this chat use the new dynamic pages feature. Updates are pushed directly by server.
Identities are used to retrieve avatar, and first letter of nickname is used to generate an avatar is none is found (temporary, a more elaborate avatar generation should follow in the future).
Scroll is done automatically when new messages arrive, except if scroll is not at the end, as it probably means that user is checking history.
User can resize text area and use [shift] + [enter] to enter multi-line messages. History will then scroll to bottom after message has been sent.
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 03 Jan 2018 01:12:16 +0100 |
parents | b2ef34e602cf |
children | 304cbb690f15 |
line wrap: on
line source
{% set embedded = True %} {# embedded is set to avoid including base.html several times if a generic page is included (e.g. blog/articles.html) #} {% import 'components/common.html' as component with context %} {{ script.include('common', '') }} {# common.js is a common script, so it's useful to import it here #} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {% if norobots %} <meta name="robots" content="noindex, nofollow"> {% endif %} <title>{% block title %}{{C.APP_NAME}}{% endblock %}</title> {% if css_content is defined %} <style type="text/css"> {{css_content}} </style> {% else %} {% for css_file in css_files %} <link rel='stylesheet' type="text/css" href='{{root_path}}{{css_file}}'> {% endfor %} {% endif %} {% if background_image is defined %} {# Q&D workaround to implement dynamic background-image it should be replaced by a better mechanism in the future, avoid using it #} <style type="text/css"> html { background-image: url('{{background_image}}'); background-size: 15em; } </style> {% endif %} {# JS handling #} {% if websocket is defined %} {{ script.include('websocket', '') }} {% endif %} {{ script.generate_scripts() }} {% if websocket is defined %} <script>var socket=new WSHandler("{{websocket.url}}", "{{websocket.token}}", {{websocket.debug}});</script> {% endif %} </head> <body> {% if main_menu is defined %} {% block main_menu %} {{ component.menu(main_menu, class="main_menu") }} {% endblock main_menu %} {% endif %} <main id='main_area'> <header> {% if confirm %} {# confirmation message used when post data has been handled correctly #} {% block confirm %} <div class="box post_confirm"> {% block confirm_message %} {% trans %}Your data has been sent correctly.{% endtrans %} {% endblock confirm_message %} </div> {% endblock confirm %} {% endif %} </header> <div id="body"> {% block category_menu scoped %} {% if category_menu is defined %} {{ component.menu(category_menu, class="category_menu") }} {% endif %} {% endblock category_menu %} {% block body %} {% endblock body %} </div> <footer>{% block footer %}{% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}{% endblock %}</footer> </main> </body> </html>