From 80df5a27195ba1f3037933a47bb709eda0e655b4 Mon Sep 17 00:00:00 2001
From: Manuel Gugger <manuel.gugger@gmail.com>
Date: Thu, 4 Aug 2022 09:21:40 +0200
Subject: [PATCH] switch to bulma css and font-awesome

---
 actix_admin/templates/base.html           |  12 +-
 actix_admin/templates/create_or_edit.html |  60 ++++---
 actix_admin/templates/header.html         |  40 +++--
 actix_admin/templates/index.html          |   1 -
 actix_admin/templates/list.html           | 205 +++++++++++++---------
 5 files changed, 187 insertions(+), 131 deletions(-)
diff --git a/actix_admin/templates/base.html b/actix_admin/templates/base.html
index 251d3d0..28231ae 100644
--- a/actix_admin/templates/base.html
+++ b/actix_admin/templates/base.html
@@ -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>
diff --git a/actix_admin/templates/create_or_edit.html b/actix_admin/templates/create_or_edit.html
index 24b16ed..ff77133 100644
--- a/actix_admin/templates/create_or_edit.html
+++ b/actix_admin/templates/create_or_edit.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 %}
\ No newline at end of file
diff --git a/actix_admin/templates/header.html b/actix_admin/templates/header.html
index fadccc2..e4ec72c 100644
--- a/actix_admin/templates/header.html
+++ b/actix_admin/templates/header.html
@@ -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>
\ No newline at end of file
+
+          </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>
\ No newline at end of file
diff --git a/actix_admin/templates/index.html b/actix_admin/templates/index.html
index 0348967..09e9ce3 100644
--- a/actix_admin/templates/index.html
+++ b/actix_admin/templates/index.html
@@ -1,5 +1,4 @@
 {% extends "base.html" %}
 
 {% block content %}
-<p>Index</p>
 {% endblock content %}
diff --git a/actix_admin/templates/list.html b/actix_admin/templates/list.html
index 11a3d86..303b8f5 100644
--- a/actix_admin/templates/list.html
+++ b/actix_admin/templates/list.html
@@ -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 }}">&#9998;</a>
-                            <a hx-delete="delete/{{ entity.primary_key }}">&#128465;</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 }}">&laquo;</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 }}">&raquo;</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">&hellip;</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">&hellip;</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 %}
\ No newline at end of file
