Mercurial > libervia-templates
comparison sat_templates/templates/default/base/base.html @ 166:178f55b825b7
small refactoring/redesign, better BEM integration:
- blog has been redesigned, and almost all blog CSS has been made generic and moved to main styles.css file.
- better noscript handling, dynamic elements are created using "magic" classes (dom_update.js)
- using better icons for older/newer messages
- better state handling, classes now use "state_XXX"
- more classes now use BEM convention
- menu labels have been moved to a separate template (components/menu_labels.html), so it can be overriden easily by other sites
- better styles.css organisation
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 03 Oct 2018 21:00:24 +0200 |
| parents | 9e8d9d754337 |
| children | 240bbac435f4 |
comparison
equal
deleted
inserted
replaced
| 165:9e8d9d754337 | 166:178f55b825b7 |
|---|---|
| 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) #} | 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) #} |
| 2 {% import 'components/common.html' as component with context %} | 2 {% import 'components/common.html' as component with context %} |
| 3 {{ script.include('common', '') }} {# common.js is, as its name state, a common script, so it's useful to import it here #} | 3 {{ script.include('common', '') }} {# common.js is, as its name state, a common script, so it's useful to import it here #} |
| 4 {{ script.include('dom_update') }} {# will check page for dom element to modify when javascript is enabled #} | |
| 4 <!DOCTYPE html> | 5 <!DOCTYPE html> |
| 5 <html> | 6 <html> |
| 6 <head> | 7 <head> |
| 7 <meta charset="utf-8"> | 8 <meta charset="utf-8"> |
| 8 <meta name="viewport" content="width=device-width, initial-scale=1"> | 9 <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 50 | 51 |
| 51 {# JS handling #} | 52 {# JS handling #} |
| 52 {% if websocket is defined %} | 53 {% if websocket is defined %} |
| 53 {{ script.include('websocket', '') }} | 54 {{ script.include('websocket', '') }} |
| 54 {% endif %} | 55 {% endif %} |
| 56 {# FIXME: following ugly hack is temporarily needed for dom_update, until a proper way to handle gettext dynamicly is implemented #} | |
| 57 <script>expand_txt="{% trans %}Click to expand…{% endtrans %}"; reduce_txt="{% trans %}Click to reduce…{% endtrans %}";</script> | |
| 55 {{ script.generate_scripts() }} | 58 {{ script.generate_scripts() }} |
| 56 {% if websocket is defined %} | 59 {% if websocket is defined %} |
| 57 <script>var socket=new WSHandler("{{websocket.url}}", "{{websocket.token}}", {{websocket.debug}});</script> | 60 <script>var socket=new WSHandler("{{websocket.url}}", "{{websocket.token}}", {{websocket.debug}});</script> |
| 58 {% endif %} | 61 {% endif %} |
| 59 | 62 |
| 90 {% endif %} | 93 {% endif %} |
| 91 {% endblock category_menu %} | 94 {% endblock category_menu %} |
| 92 {% block body %} | 95 {% block body %} |
| 93 {% endblock body %} | 96 {% endblock body %} |
| 94 </div> | 97 </div> |
| 95 <footer>{% block footer %}<span>{% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}</span>{% endblock %}</footer> | 98 <footer class="page__footer">{% block footer %}<span>{% trans app_name=C.APP_NAME %}Powered by {{app_name}}{% endtrans %}</span>{% endblock %}</footer> |
| 96 </main> | 99 </main> |
| 97 </body> | 100 </body> |
| 98 </html> | 101 </html> |