Mercurial > libervia-templates

changeset 289:f1a39607d6a5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (base/base.html): `full_screen_body` parameter + body_wrapper: - if `full_screen_body` is set in template, the `body--fullscreen` class will be added to `<body>` element. It will then be a flexbox container (in columns), and displayed on the whole viewport. - new `body_wrapper` block, if a page needs to replace the `#body` container.
author Goffi <goffi@goffi.org>
date Mon, 28 Sep 2020 17:25:26 +0200
parents 9731b71ffa53
children 1743fd741fed
files sat_templates/templates/bulma/base/base.html sat_templates/templates/bulma/static/styles.css
diffstat 2 files changed, 11 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/base/base.html	Thu Sep 17 22:44:37 2020 +0200
+++ b/sat_templates/templates/bulma/base/base.html	Mon Sep 28 17:25:26 2020 +0200
@@ -72,7 +72,7 @@
         <link rel="icon" href="{{media_path}}icons/apps/64/sat.png">
     {% endblock favicon %}
 </head>
-<body{{ {'onload': body_onload} | xmlattr }}>
+<body{{ {'onload': body_onload} | xmlattr }}{{ ' class="body--fullscreen"'|safe if full_screen_body }}>
     {% if atom_url is defined %}
         {{ icon_defs('feed') }}
     {% endif %}
@@ -81,6 +81,7 @@
             {{ component.menu(main_menu, class="main_menu") }}
         {% endblock main_menu %}
     {% endif %}
+    {% block body_wrapper %}
     <div id="body" class="container">
         {% if confirm %}
             <article class="message is-success mt-4">
@@ -110,5 +111,6 @@
         {% block body %}
         {% endblock body %}
     </div>
+    {% endblock body_wrapper%}
 </body>
 </html>
--- a/sat_templates/templates/bulma/static/styles.css	Thu Sep 17 22:44:37 2020 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Mon Sep 28 17:25:26 2020 +0200
@@ -5,6 +5,14 @@
   --grey-light: hsl(0, 0%, 71%);
 }
 
+body.body--fullscreen {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
 .has-whitespace-pre-wrap {
     white-space: pre-wrap;
 }