Mercurial > libervia-templates
annotate default/base/base.html @ 84:b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
this patch introduces the browser part of dynamic pages.
Dynamic pages work by establishing a websocket between server and the current page, if requested by server (which means that needed arguments are present in template).
Once the connection is established, the server can, for now, reload the page, append HTML elements, or receive arbitrary data (without reloading the page, in opposition to data post).
If connection can't be established, a popup will be displayed and connection will be retried many times after variable timeouts.
The browser will finally give up and display an alert to client if the number of retries is too high (20 for now).
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 03 Jan 2018 01:12:16 +0100 |
| parents | 6ba0129a9a4e |
| children | 304cbb690f15 |
| rev | line source |
|---|---|
|
9
7a1626e78d53
base: an embedded variable is set when base is used, this way we can have include templates without including the whole page with base
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
1 {% set embedded = True %} {# embedded is set to avoid including base.html several times if a generic page is included (e.g. blog/articles.html) #} |
| 66 | 2 {% import 'components/common.html' as component with context %} |
|
82
6ba0129a9a4e
base: don't use default flag for common script (flags now default to "defer" following last changes in backend)
Goffi <goffi@goffi.org>
parents:
78
diff
changeset
|
3 {{ script.include('common', '') }} {# common.js is a common script, so it's useful to import it here #} |
| 0 | 4 <!DOCTYPE html> |
| 5 <html> | |
| 6 <head> | |
| 75 | 7 <meta charset="utf-8"> |
| 8 <meta name="viewport" content="width=device-width, initial-scale=1"> | |
|
25
b046a7835374
base/base.html: if norobots is set, add a <meta> to tell robots no to index or follow this page.
Goffi <goffi@goffi.org>
parents:
20
diff
changeset
|
9 |
|
b046a7835374
base/base.html: if norobots is set, add a <meta> to tell robots no to index or follow this page.
Goffi <goffi@goffi.org>
parents:
20
diff
changeset
|
10 {% if norobots %} |
|
b046a7835374
base/base.html: if norobots is set, add a <meta> to tell robots no to index or follow this page.
Goffi <goffi@goffi.org>
parents:
20
diff
changeset
|
11 <meta name="robots" content="noindex, nofollow"> |
|
b046a7835374
base/base.html: if norobots is set, add a <meta> to tell robots no to index or follow this page.
Goffi <goffi@goffi.org>
parents:
20
diff
changeset
|
12 {% endif %} |
|
b046a7835374
base/base.html: if norobots is set, add a <meta> to tell robots no to index or follow this page.
Goffi <goffi@goffi.org>
parents:
20
diff
changeset
|
13 |
| 0 | 14 <title>{% block title %}{{C.APP_NAME}}{% endblock %}</title> |
|
26
d782227c088d
base/base.html: generate <script> element and include css.js by default
Goffi <goffi@goffi.org>
parents:
25
diff
changeset
|
15 |
|
1
b13a26d55c64
base: updated CSS handling to follow changes in backend, moved CSS file to /static with splitted files
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
16 {% if css_content is defined %} |
| 0 | 17 <style type="text/css"> |
| 18 {{css_content}} | |
| 19 </style> | |
| 20 {% else %} | |
|
1
b13a26d55c64
base: updated CSS handling to follow changes in backend, moved CSS file to /static with splitted files
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
21 {% for css_file in css_files %} |
|
b13a26d55c64
base: updated CSS handling to follow changes in backend, moved CSS file to /static with splitted files
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
22 <link rel='stylesheet' type="text/css" href='{{root_path}}{{css_file}}'> |
|
b13a26d55c64
base: updated CSS handling to follow changes in backend, moved CSS file to /static with splitted files
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
23 {% endfor %} |
| 0 | 24 {% endif %} |
|
26
d782227c088d
base/base.html: generate <script> element and include css.js by default
Goffi <goffi@goffi.org>
parents:
25
diff
changeset
|
25 |
|
19
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
26 {% if background_image is defined %} |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
27 {# Q&D workaround to implement dynamic background-image |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
28 it should be replaced by a better mechanism in the future, avoid using it #} |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
29 <style type="text/css"> |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
30 html { |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
31 background-image: url('{{background_image}}'); |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
32 background-size: 15em; |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
33 } |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
34 </style> |
|
422c54e0204a
event: adaptation to changes in backend/Libervia + background_image can now be specified in template data
Goffi <goffi@goffi.org>
parents:
9
diff
changeset
|
35 {% endif %} |
|
26
d782227c088d
base/base.html: generate <script> element and include css.js by default
Goffi <goffi@goffi.org>
parents:
25
diff
changeset
|
36 |
|
84
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
37 {# JS handling #} |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
38 {% if websocket is defined %} |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
39 {{ script.include('websocket', '') }} |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
40 {% endif %} |
|
26
d782227c088d
base/base.html: generate <script> element and include css.js by default
Goffi <goffi@goffi.org>
parents:
25
diff
changeset
|
41 {{ script.generate_scripts() }} |
|
84
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
42 {% if websocket is defined %} |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
43 <script>var socket=new WSHandler("{{websocket.url}}", "{{websocket.token}}", {{websocket.debug}});</script> |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
82
diff
changeset
|
44 {% endif %} |
| 0 | 45 </head> |
| 46 <body> | |
| 66 | 47 {% if main_menu is defined %} |
| 48 {% block main_menu %} | |
| 49 {{ component.menu(main_menu, class="main_menu") }} | |
| 50 {% endblock main_menu %} | |
| 51 {% endif %} | |
| 61 | 52 |
|
70
90a303a14112
base: use <main> for main area, for better semantic.
Goffi <goffi@goffi.org>
parents:
66
diff
changeset
|
53 <main id='main_area'> |
| 66 | 54 <header> |
| 55 {% if confirm %} | |
| 56 {# confirmation message used when post data has been handled correctly #} | |
| 57 {% block confirm %} | |
| 58 <div class="box post_confirm"> | |
| 59 {% block confirm_message %} | |
| 60 {% trans %}Your data has been sent correctly.{% endtrans %} | |
| 61 {% endblock confirm_message %} | |
| 62 </div> | |
| 63 {% endblock confirm %} | |
| 64 {% endif %} | |
|
48
37fd11d71233
base: confirmation message can now be customised using "confirm" blog
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
65 |
| 66 | 66 </header> |
| 67 | |
| 68 <div id="body"> | |
| 69 {% block category_menu scoped %} | |
| 70 {% if category_menu is defined %} | |
| 71 {{ component.menu(category_menu, class="category_menu") }} | |
| 72 {% endif %} | |
| 73 {% endblock category_menu %} | |
| 74 {% block body %} | |
| 75 {% endblock body %} | |
| 76 </div> | |
| 77 <footer>{% block footer %}{% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}{% endblock %}</footer> | |
|
70
90a303a14112
base: use <main> for main area, for better semantic.
Goffi <goffi@goffi.org>
parents:
66
diff
changeset
|
78 </main> |
| 0 | 79 </body> |
| 80 </html> |