Mercurial > libervia-templates

changeset 271:dea66eead698

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (dialogs): new `notification.html` template
author Goffi <goffi@goffi.org>
date Fri, 14 Aug 2020 08:46:03 +0200
parents 2378084522e1
children 5206abf426cd
files sat_templates/templates/bulma/dialogs/notification.html sat_templates/templates/bulma/static/styles.css
diffstat 2 files changed, 39 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/dialogs/notification.html	Fri Aug 14 08:46:03 2020 +0200
@@ -0,0 +1,16 @@
+<div class="main_notification columns is-centered">
+    <div class="column is-narrow has-items-centered">
+        {% set level_map={
+            'success': 'is-success',
+            'info': 'is-info',
+            'warning': 'is-warning',
+            'error': 'is-danger'
+            }
+        %}
+
+        <div class="notification {{level_map[level]}} pr-6 py-4">
+            <button class="delete click_to_close"></button>
+            {{message}}
+        </div>
+    </div>
+</div>
--- a/sat_templates/templates/bulma/static/styles.css	Fri Aug 14 08:46:00 2020 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Fri Aug 14 08:46:03 2020 +0200
@@ -131,11 +131,33 @@
     transform: scaleY(0);
 }
 
-div.state_appended .modal-content {
+div.state_appended .modal-content, div.main_notification.state_appended {
     transform: scaleY(1);
     transition: transform 0.15s ease-in;
 }
 
+div.main_notification.state_closing {
+    transform: scaleY(0);
+}
+
+.main_notification {
+    position: fixed;
+    top: 2rem;
+    left: 0;
+    right: 0;
+    z-index: 10000;
+    transform: scaleY(0);
+    transition: transform 0.15s ease-in;
+}
+
+div.main_notification>div.column {
+    display: flex;
+    max-width: 95%;
+}
+div.main_notification>div.column>div.notification {
+    max-width: 80rem;
+}
+
 .click_to_close {
     cursor: pointer;
 }