simple modal init

pages/_data/menu.yml

@@ -22,6 +22,10 @@ base:
     cards:
       url: cards.html
       title: Cards
+    charts:
+      url: charts.html
+      title: Charts
+      icon: pie-chart
     datatables:
       url: datatables.html
       title: Data Tables
@@ -47,11 +51,6 @@ base:
       title: Music
       url: music.html
 
-charts:
-  url: charts.html
-  title: Charts
-  icon: pie-chart
-
 error:
   title: Error pages
   icon: file-minus

pages/_includes/parts/modals/simple.html

@@ -0,0 +1,20 @@
+{% assign id = "default" %}
+<div class="modal modal-blur fade" id="modal-{{ id }}" tabindex="-1" role="dialog" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">Modal title</h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					{% include ui/icon.html icon="x" %}
+				</button>
+			</div>
+			<div class="modal-body">
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
+			</div>
+		</div>
+	</div>
+</div>

pages/_includes/ui/button.html

@@ -19,7 +19,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}{% if include.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}

pages/tmp.html

@@ -19,6 +19,11 @@ menu: a.b.c
 		{% include cards/user-info.html %}
 	</div>
 
+	<div class="col-4">
+		{% include ui/button.html modal="default" %}
+		{% include parts/modals/simple.html id="default" %}
+	</div>
+
 	<div class="col-4">
 		{% include cards/charts/total-sales.html %}
 	</div>