switch to bulma css and font-awesome
This commit is contained in:
Manuel Gugger
parent
2d3494c8ce
commit
80df5a2719
@ -9,15 +9,13 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Actix Admin</title>
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<script src="https://unpkg.com/htmx.org@1.7.0"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.full-width { width: 100%; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function checkAll(bx) {
|
||||
var cbs = document.getElementsByTagName('input');
|
||||
@ -31,13 +29,11 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="container-fluid">
|
||||
{% include "header.html" %}
|
||||
<div>
|
||||
<div class="container is-fluid">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<article>
|
||||
<form method="post">
|
||||
<div>
|
||||
{% for model_field in view_model.fields -%}
|
||||
<label for="{{ model_field.field_name }}">
|
||||
{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}
|
||||
{% if model_field.select_list != "" %}
|
||||
<select name="{{ model_field.field_name }}" {% if model.errors | get(key=model_field.field_name,
|
||||
default="" ) !="" %} placeholder="Invalid" aria-invalid="true" {% endif %}>
|
||||
<form method="post">
|
||||
{% for model_field in view_model.fields -%}
|
||||
<div class="field">
|
||||
<label for="{{ model_field.field_name }}">
|
||||
{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}
|
||||
</label>
|
||||
{% if model_field.select_list != "" %}
|
||||
<div class="control">
|
||||
<div class="select {% if model.errors | get(key=model_field.field_name, default="" ) !="" %}is-danger{% endif %}">
|
||||
<select name="{{ model_field.field_name }}">
|
||||
{% if model_field.is_option %}
|
||||
<option value=""></option>
|
||||
{% else %}
|
||||
@ -21,25 +22,28 @@
|
||||
join(sep=" ") | title }}</option>
|
||||
{%- endfor %}
|
||||
</select>
|
||||
</label>
|
||||
{% else %}
|
||||
<input type="{{ model_field.html_input_type }}"
|
||||
value="{{ model.values | get(key=model_field.field_name, default="") | split(pat=" _") | join(sep=" " )
|
||||
| title }}" name="{{ model_field.field_name }}" placeholder="{{ model_field.field_name }}"
|
||||
aria-label="{{ model_field.field_name }}" {% if model.errors | get(key=model_field.field_name,
|
||||
default="" ) !="" %} placeholder="Invalid" aria-invalid="true" {% endif %}>
|
||||
{% endif %}
|
||||
</label>
|
||||
{%- endfor %}
|
||||
<div class="grid">
|
||||
<div>
|
||||
<button type="submit">Save</button>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ list_link }}" role="button" class="secondary full-width">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="control">
|
||||
<input class="input {% if model.errors | get(key=model_field.field_name,default="" ) !="" %}is-danger{% endif %}"
|
||||
type="{{ model_field.html_input_type }}"
|
||||
value="{{ model.values | get(key=model_field.field_name, default="") | split(pat=" _") | join(sep=" " ) | title }}"
|
||||
name="{{ model_field.field_name }}"
|
||||
placeholder="{{ model_field.field_name }}"
|
||||
aria-label="{{ model_field.field_name }}"
|
||||
>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- endfor %}
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link" type="submit">Save</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-link is-light" href="{{ list_link }}">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock content %}
|
||||
@ -1,12 +1,32 @@
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/admin/">Actix Admin</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<nav class="navbar is-dark mb-4" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/admin/">
|
||||
Actix Admin
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
{% for entity_name in entity_names -%}
|
||||
<li><a href="/admin/{{ entity_name }}/list" class="secondary">{{ entity_name | title }}</a></li>
|
||||
<a href="/admin/{{ entity_name }}/list" class="navbar-item">{{ entity_name | title }}</a>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-light">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,5 +1,4 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<p>Index</p>
|
||||
{% endblock content %}
|
||||
|
||||
@ -3,100 +3,137 @@
|
||||
{% block content %}
|
||||
|
||||
{% if not render_partial or render_partial == false %}
|
||||
<article>
|
||||
<div class="grid">
|
||||
<div hx-include="#checked-rows" hx-target="#{{ entity_name }}table">
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox" role="button">
|
||||
Actions
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="create">Create</a></li>
|
||||
<li><a href="#" hx-confirm="Are you sure?" hx-delete="delete">Delete Selected</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
<div>
|
||||
<input type="search" id="search" value="{{ search }}" name="search" placeholder="Search"
|
||||
hx-get="/admin/{{ entity_name }}/list?render_partial=true&entities_per_page={{ entities_per_page }}&page={{ page }}"
|
||||
hx-trigger="keyup changed delay:500ms, search" hx-target="#{{ entity_name }}table"
|
||||
hx-indicator=".htmx-indicator">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary" href="create">Create</a>
|
||||
|
||||
<div hx-include="#checked-rows" hx-target="#{{ entity_name }}table" class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
<span>With selected</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu4">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<a href="#" hx-confirm="Are you sure?" hx-delete="delete">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="{{ entity_name }}table">
|
||||
<figure>
|
||||
<form id="checked-rows">
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" onclick="checkAll(this)">
|
||||
</th>
|
||||
<th>{{ view_model.primary_key | title }}</th>
|
||||
{% for model_field in view_model.fields -%}
|
||||
<th>{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}</th>
|
||||
{%- endfor %}
|
||||
<th>
|
||||
<!-- Edit Action -->
|
||||
<!-- Delete Action -->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML">
|
||||
{% for entity in entities -%}
|
||||
<tr>
|
||||
<td><input type="checkbox" name="ids" value="{{ entity.primary_key }}"></td>
|
||||
<td>{{ entity.primary_key }}</td>
|
||||
{% for model_field in view_model.fields -%}
|
||||
<td>{{ entity.values | get(key=model_field.field_name) }}</td>
|
||||
{%- endfor %}
|
||||
<td>
|
||||
<a href="edit/{{ entity.primary_key }}">✎</a>
|
||||
<a hx-delete="delete/{{ entity.primary_key }}">🗑</a>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="{{ view_model.fields | length + 3 }}">
|
||||
<a
|
||||
href="?page={{ page - 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}">«</a>
|
||||
{% for i in range(end=num_pages) %}
|
||||
<a href="?page={{ i + 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}">{{
|
||||
i + 1 }}</a>
|
||||
{%- endfor %}
|
||||
<a
|
||||
href="?page={{ page + 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}">»</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</form>
|
||||
</figure>
|
||||
<div class="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="htmx-indicator">{% include "spinner.svg" %}</div>
|
||||
<div>
|
||||
<form>
|
||||
<input type="hidden" value="{{ search }}" name="search">
|
||||
<label for="entities_per_page">Entities per Page
|
||||
<select name="entities_per_page" onchange="this.form.submit()">
|
||||
<div class="column is-narrow">
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input class="input is-rounded" type="search" id="search" value="{{ search }}" name="search"
|
||||
placeholder="Search"
|
||||
hx-get="/admin/{{ entity_name }}/list?render_partial=true&entities_per_page={{ entities_per_page }}&page={{ page }}"
|
||||
hx-trigger="keyup changed delay:500ms, search" hx-target="#{{ entity_name }}table"
|
||||
hx-indicator=".htmx-indicator">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<div>
|
||||
<form>
|
||||
<input type="hidden" value="{{ search }}" name="search">
|
||||
<div class="select">
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<select class="select" name="entities_per_page" onchange="this.form.submit()">
|
||||
{% for a in [10,20,50,100,] %}
|
||||
<option {% if entities_per_page==a %}selected{% endif %} value="{{ a }}">{{ a }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<p class="help">Entities per Page</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<div id="{{ entity_name }}table">
|
||||
<form id="checked-rows">
|
||||
<table class="table is-fullwidth is-hoverable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" onclick="checkAll(this)">
|
||||
</th>
|
||||
<th>{{ view_model.primary_key | title }}</th>
|
||||
{% for model_field in view_model.fields -%}
|
||||
<th>{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}</th>
|
||||
{%- endfor %}
|
||||
<th>
|
||||
<!-- Edit Action -->
|
||||
<!-- Delete Action -->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML">
|
||||
{% for entity in entities -%}
|
||||
<tr>
|
||||
<td><input type="checkbox" name="ids" value="{{ entity.primary_key }}"></td>
|
||||
<td>{{ entity.primary_key }}</td>
|
||||
{% for model_field in view_model.fields -%}
|
||||
<td>{{ entity.values | get(key=model_field.field_name) }}</td>
|
||||
{%- endfor %}
|
||||
<td>
|
||||
<a href="edit/{{ entity.primary_key }}"><i class="fa-solid fa-pen-to-square"></i></a>
|
||||
<a hx-delete="delete/{{ entity.primary_key }}"><i class="fa-solid fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="{{ view_model.fields | length + 3 }}">
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</form>
|
||||
<nav class="pagination" aria-label="pagination">
|
||||
<a href="?page={{ page - 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
|
||||
class="pagination-previous">Previous Page</a>
|
||||
<a href="?page={{ page + 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
|
||||
class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<!-- <li>
|
||||
<a class="pagination-link"
|
||||
href="?page={{ page - 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
|
||||
aria-label="Goto page 1">1</a>
|
||||
</li> -->
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
{% for i in range(end=num_pages) %}
|
||||
<li><a class="pagination-link" aria-label="Goto page 45"
|
||||
href="?page={{ i + 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}">{{
|
||||
i + 1 }}</a></li>
|
||||
{%- endfor %}
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a class="pagination-link" aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% if not render_partial or render_partial == false %}
|
||||
</article>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue
Block a user