Mercurial > libervia-templates

changeset 299:75f1cd6da46e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (components/block): new `data` and `delete_icon` arguments in `icon_item`
author Goffi <goffi@goffi.org>
date Sat, 20 Feb 2021 13:37:15 +0100
parents 1c330913ff13
children 2a697b1376f1
files sat_templates/templates/bulma/components/block.html sat_templates/templates/bulma/static/styles.css
diffstat 2 files changed, 14 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/components/block.html	Thu Jan 28 18:42:59 2021 +0100
+++ b/sat_templates/templates/bulma/components/block.html	Sat Feb 20 13:37:15 2021 +0100
@@ -16,12 +16,15 @@
     </div>
 {% endmacro %}
 
-{% macro icon_item(icon_name, label, url, class="") %}
-    <div class="column is-2-desktop is-4-touch">
+{% macro icon_item(icon_name, label, url, class="", delete_icon=false, data=none) %}
+    <div class="column is-2-desktop is-4-touch item" {% if data %}data-item='{{data|tojson}}'{% endif %}>
         <div class="card {{class}}">
             <a href="{{url}}">
                 <div class="card-image has-text-centered">
                     {{ icon(icon_name, cls='image is-64x64 is-inline-block') }}
+                    {% if delete_icon %}
+                        <button class="delete action_delete is-small is-top-right"></button>
+                    {% endif %}
                 </div>
                 <div class='card-content has-text-centered has-text-shortenable is-paddingless'>
                     <span>{{label}}</span>
--- a/sat_templates/templates/bulma/static/styles.css	Thu Jan 28 18:42:59 2021 +0100
+++ b/sat_templates/templates/bulma/static/styles.css	Sat Feb 20 13:37:15 2021 +0100
@@ -51,6 +51,15 @@
 
 }
 
+.is-top-right {
+    /* position element on top right corner, outside document flow (abolute positioning)
+     * useful for delete icon
+     */
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+}
+
 .has-items-centered {
     align-items: center;
     justify-content: center;