Implement avatar rendering logic: add custom tags, template, and styles; update base.html integration and revamp member filter and list designs.
This commit is contained in:
@@ -5,8 +5,8 @@ from .models import Member
|
|||||||
|
|
||||||
|
|
||||||
class MemberFilter(django_filters.FilterSet):
|
class MemberFilter(django_filters.FilterSet):
|
||||||
user__first_name = django_filters.CharFilter(field_name="user__first_name", label=_("First name"))
|
user__first_name = django_filters.CharFilter(field_name="user__first_name", label=_("First name"), lookup_expr="icontains")
|
||||||
user__last_name = django_filters.CharFilter(field_name="user__last_name", label=_("Last name"))
|
user__last_name = django_filters.CharFilter(field_name="user__last_name", label=_("Last name"), lookup_expr="icontains")
|
||||||
license = django_filters.CharFilter(label=_("License"), lookup_expr="icontains")
|
license = django_filters.CharFilter(label=_("License"), lookup_expr="icontains")
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
|
|||||||
@@ -1,89 +1,20 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% load rules %}
|
||||||
|
|
||||||
{% block sidebar %}
|
{% block sidebar %}
|
||||||
<div class="section group">
|
{% url "backend:members:list" as members_list %}
|
||||||
<div class="section-title">Section 1</div>
|
|
||||||
<div class="section-items">
|
|
||||||
<div>Item 1</div>
|
|
||||||
<div>Item 2</div>
|
|
||||||
<div>Item 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section group">
|
{% has_perm "members.member_manager" request.user as is_member_manager %}
|
||||||
<div class="section-title">Section 1</div>
|
|
||||||
<div class="section-items">
|
|
||||||
<div>Item 1</div>
|
|
||||||
<div>Item 2</div>
|
|
||||||
<div>Item 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section group">
|
{% if is_member_manager %}
|
||||||
<div class="section-title">Section 1</div>
|
|
||||||
<div class="section-items">
|
|
||||||
<div>Item 1</div>
|
|
||||||
<div>Item 2</div>
|
|
||||||
<div>Item 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section group">
|
|
||||||
<div class="section-title">Section 1</div>
|
|
||||||
<div class="section-items">
|
|
||||||
<div>Item 1</div>
|
|
||||||
<div>Item 2</div>
|
|
||||||
<div>Item 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section group">
|
|
||||||
<div class="section-title">Section 2</div>
|
|
||||||
<div class="section-items">
|
|
||||||
<div>Item 1</div>
|
|
||||||
<div>Item 2</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section group">
|
|
||||||
<div class="section-title">Section 3</div>
|
|
||||||
<div class="section-items">
|
|
||||||
<div>Item 1</div>
|
|
||||||
<div>Item 2</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% comment %}<div class="flex flex-col gap-4 w-full">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<div class="text-neutral border-b border-neutral font-bold text-sm opacity-40 mb-2">Members</div>
|
|
||||||
<a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2 cursor-default hover:cursor-pointer">
|
|
||||||
<i class="fa-solid fa-users"></i>
|
|
||||||
<span>Members</span>
|
|
||||||
</a>
|
|
||||||
<a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2">
|
|
||||||
<i class="fa-solid fa-users"></i>
|
|
||||||
<span>Members</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div>Members</div>
|
|
||||||
<a>
|
|
||||||
<i class="fa-solid fa-users"></i>
|
|
||||||
<span>Members</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<ul class="menu bg-base-200 rounded-box w-56">
|
|
||||||
<li class="menu-title">Members</li>
|
<li class="menu-title">Members</li>
|
||||||
<li class="menu-active">
|
<li><a href="{{ members_list }}" {% if members_list in request.path %}class="menu-active"{% endif %}><i class="fa-solid fa-users"></i> Members</a></li>
|
||||||
<a>
|
{% endif %}
|
||||||
<i class="fa-solid fa-users w-5 h-5 mr-2 self-center"></i>Members
|
|
||||||
</a>
|
<li class="menu-title mt-4">Navigation</li>
|
||||||
</li>
|
<li><a href="#"><i class="fa-solid fa-house"></i> Dashboard</a></li>
|
||||||
</ul>{% endcomment %}
|
<li><a href="#"><i class="fa-solid fa-calendar"></i> Calendar</a></li>
|
||||||
|
<li><a href="#"><i class="fa-solid fa-users"></i> Members</a></li>
|
||||||
|
<li><a href="#"><i class="fa-solid fa-gear"></i> Settings</a></li>
|
||||||
{% endblock sidebar %}
|
{% endblock sidebar %}
|
||||||
@@ -1,9 +1,10 @@
|
|||||||
{% load tailwind_tags %}
|
{% load tailwind_tags %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
|
{% load avatar %}
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en" class="bg-base-200">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta viewport="width=device-width, initial-scale=1.0">
|
<meta viewport="width=device-width, initial-scale=1.0">
|
||||||
@@ -38,7 +39,7 @@
|
|||||||
|
|
||||||
<body class="flex flex-col h-screen">
|
<body class="flex flex-col h-screen">
|
||||||
<!-- NAVBAR -->
|
<!-- NAVBAR -->
|
||||||
<header id="mainNavbar" class="navbar-normal navbar bg-base-200 sticky top-0 z-50 shadow">
|
<header id="mainNavbar" class="navbar-normal navbar bg-base-100 sticky top-0 z-50 shadow">
|
||||||
<div class="flex-none lg:hidden">
|
<div class="flex-none lg:hidden">
|
||||||
<!-- Mobile sidebar toggle -->
|
<!-- Mobile sidebar toggle -->
|
||||||
<label for="sidebar-toggle" class="btn btn-square btn-ghost">
|
<label for="sidebar-toggle" class="btn btn-square btn-ghost">
|
||||||
@@ -47,11 +48,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-1 flex items-center gap-3">
|
<div class="flex-1 flex items-center gap-3">
|
||||||
<img src="{% static config.TF_CLUB_LOGO %}" class="h-10" alt="{{ config.TF_CLUB_NAME }} logo">
|
<img src="{% static config.TF_CLUB_LOGO %}" class="hidden lg:inline h-10 {% if config.TF_CLUB_LOGO != "teamforge/logo.png" %}mask mask-circle{% endif %}" alt="{{ config.TF_CLUB_NAME }} logo">
|
||||||
<span class="text-xl font-bold font-jersey">{{ config.TF_CLUB_NAME }}</span>
|
<span class="text-xl font-bold font-jersey">{{ config.TF_CLUB_NAME }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-none flex items-center gap-4">
|
<div class="flex flex-row items-center gap-1 lg:gap-4">
|
||||||
<!-- Notifications -->
|
<!-- Notifications -->
|
||||||
<button class="btn btn-ghost btn-circle">
|
<button class="btn btn-ghost btn-circle">
|
||||||
<i class="fa-solid fa-bell text-xl"></i>
|
<i class="fa-solid fa-bell text-xl"></i>
|
||||||
@@ -59,11 +60,7 @@
|
|||||||
|
|
||||||
<!-- Avatar -->
|
<!-- Avatar -->
|
||||||
<div class="dropdown dropdown-end">
|
<div class="dropdown dropdown-end">
|
||||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar avatar-placeholder">
|
{% avatar first_name=request.user.first_name last_name=request.user.last_name button=True %}
|
||||||
<div class="w-10 rounded-full bg-neutral text-neutral-content">
|
|
||||||
<span class="font-jersey">BS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul tabindex="-1" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
|
<ul tabindex="-1" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
|
||||||
<li>
|
<li>
|
||||||
<a class="justify-between">
|
<a class="justify-between">
|
||||||
@@ -78,35 +75,31 @@
|
|||||||
|
|
||||||
<!-- Login/Logout -->
|
<!-- Login/Logout -->
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<a href="" class="btn btn-outline btn-sm">Logout</a>
|
<a href="" class="btn btn-outline btn-sm hidden lg:flex">Logout</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a href="" class="btn btn-outline btn-sm">Login</a>
|
<a href="" class="btn btn-outline btn-sm hidden lg:flex">Login</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="flex flex-1 drawer lg:drawer-open h-[calc(100vh-7.5rem)]">
|
<div class="drawer lg:drawer-open flex-1">
|
||||||
<!-- Hidden checkbox for mobile sidebar -->
|
<!-- Hidden checkbox for mobile sidebar -->
|
||||||
<input type="checkbox" id="sidebar-toggle" class="drawer-toggle">
|
<input type="checkbox" id="sidebar-toggle" class="drawer-toggle">
|
||||||
|
|
||||||
<!-- SIDEBAR -->
|
<!-- SIDEBAR -->
|
||||||
<aside class="drawer-side z-60 lg:z-auto">
|
<aside class="drawer-side z-60 lg:z-auto min-w-fit h-full lg:h-fit">
|
||||||
<label for="sidebar-toggle" class="drawer-overlay"></label>
|
<label for="sidebar-toggle" class="drawer-overlay"></label>
|
||||||
|
|
||||||
<div class="w-64 bg-base-200 border-r p-4 h-full lg:h-fit lg:border-none lg:m-4 lg:rounded-md">
|
<div class="w-64 bg-base-100 border-r p-4 h-full lg:h-fit lg:border lg:border-base-300 lg:m-4 lg:mr-2 lg:rounded-xl lg:min-h-full">
|
||||||
<ul class="menu">
|
<ul class="menu w-full">
|
||||||
<li class="menu-title">Navigation</li>
|
{% block sidebar %}{% endblock sidebar %}
|
||||||
<li><a href="#"><i class="fa-solid fa-house"></i> Dashboard</a></li>
|
|
||||||
<li><a href="#"><i class="fa-solid fa-calendar"></i> Calendar</a></li>
|
|
||||||
<li><a href="#"><i class="fa-solid fa-users"></i> Members</a></li>
|
|
||||||
<li><a href="#"><i class="fa-solid fa-gear"></i> Settings</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- MAIN CONTENT-->
|
<!-- MAIN CONTENT-->
|
||||||
<div class="drawer-content flex flex-col">
|
<div class="drawer-content flex w-full">
|
||||||
<main class="flex-1 p-6 bg-base-100">
|
<main class="bg-base-100 border border-base-300 rounded-xl m-4 ml-2 p-6 w-full">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1 class="text-3xl font-bold">Welcome!</h1>
|
<h1 class="text-3xl font-bold">Welcome!</h1>
|
||||||
<p>This is your main content area.</p>
|
<p>This is your main content area.</p>
|
||||||
|
|||||||
@@ -1 +1,194 @@
|
|||||||
{% extends "backend/base.html" %}
|
{% extends "backend/base.html" %}
|
||||||
|
|
||||||
|
{% load i18n %}
|
||||||
|
{% load form_field %}
|
||||||
|
{% load avatar %}
|
||||||
|
{% load pagination %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1 class="page-title">Members</h1>
|
||||||
|
|
||||||
|
<div class="lg:hidden collapse collapse-plus bg-base-100 border-neutral border">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<div class="collapse-title text-sm font-semibold"><i class="fa-solid fa-filter mr-2"></i>{% translate "Filter" %}{% if filter.is_bound %}<span class="ml-2 badge badge-sm badge-neutral">active</span>{% endif %}</div>
|
||||||
|
<div class="collapse-content">
|
||||||
|
<form class="flex flex-col gap-2">
|
||||||
|
{% for field in filter.form %}
|
||||||
|
{% form_field field show_label=False size="small" %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<div class="flex flex-row w-full gap-2">
|
||||||
|
<button type="submit" class="btn btn-sm btn-outline btn-neutral grow">
|
||||||
|
<i class="fa-solid fa-filter"></i>{% translate "Filter" %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{% if filter.is_bound %}
|
||||||
|
<a class="btn btn-outline btn-error btn-sm grow" href="{% url "backend:members:list" %}">
|
||||||
|
<i class="fa-solid fa-times"></i>{% translate "Clear" %}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="action_bar">
|
||||||
|
<div class="filter hidden lg:flex">
|
||||||
|
<form>
|
||||||
|
{% for field in filter.form %}
|
||||||
|
{% form_field field show_label=False size="extra-small" %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<div class="flex flex-row w-full gap-2 lg:w-fit">
|
||||||
|
<button type="submit">
|
||||||
|
<i class="fa-solid fa-filter"></i>{% translate "Filter" %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{% if filter.is_bound %}
|
||||||
|
<a class="btn btn-outline btn-error btn-xs grow" href="{% url "backend:members:list" %}">
|
||||||
|
<i class="fa-solid fa-times"></i>{% translate "Clear" %}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="add">
|
||||||
|
<a class="btn btn-accent btn-sm grow hidden lg:flex" href="">
|
||||||
|
<i class="fa-solid fa-file-upload"></i>{% translate "Load members from file" %}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="btn btn-neutral btn-outline btn-sm grow" href="">
|
||||||
|
<i class="fa-solid fa-plus"></i>{% translate "Add member" %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden lg:flex mt-4">
|
||||||
|
<table class="table table-zebra">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{% translate "Member" %}</th>
|
||||||
|
<th>{% translate "Birthday" %}</th>
|
||||||
|
<th>{% translate "License" %}</th>
|
||||||
|
<th>{% translate "Phone number(s)" %}</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% if object_list|length == 0 %}
|
||||||
|
<tr>
|
||||||
|
<td colspan="5">{% translate "No members found" %}</td>
|
||||||
|
</tr>
|
||||||
|
{% else %}
|
||||||
|
{% for member in object_list %}
|
||||||
|
<tr class="hover:bg-base-300">
|
||||||
|
<td>
|
||||||
|
<a href="">
|
||||||
|
<div class="flex flex-row items-center gap-3">
|
||||||
|
<div>
|
||||||
|
{% avatar first_name=member.user.first_name last_name=member.user.last_name %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col grow">
|
||||||
|
<div class="font-bold">{{ member.user.get_full_name }}</div>
|
||||||
|
<div class="text-sm opacity-50">{{ member.user.email }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if member.user.is_superuser %}
|
||||||
|
<div class="badge badge-sm badge-accent"><i class="fa-solid fa-user-shield"></i>{% translate "Admin" %}</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if not member.user.is_active %}
|
||||||
|
<div class="badge badge-neutral badge-sm">{% translate "Inactive"%}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>{{ member.birthday|date:"d M Y"|default:"-" }}</td>
|
||||||
|
<td>{{ member.license|default:"-" }}</td>
|
||||||
|
<td>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
{% if member.phone_number %}
|
||||||
|
<a href="{{ member.phone_number.as_rfc3966 }}" class="btn btn-info btn-xs">
|
||||||
|
<i class="fa-solid fa-phone"></i>{{ member.phone_number }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if member.emergency_phone_number %}
|
||||||
|
<a href="{{ member.emergency_phone_number.as_rfc3966 }}" class="btn btn-error btn-xs">
|
||||||
|
<i class="fa-solid fa-star-of-life"></i>{{ member.emergency_phone_number }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="flex flex-row gap-2">
|
||||||
|
<a class="btn btn-outline btn-sm" href="">
|
||||||
|
<i class="fa-solid fa-eye"></i>{% translate "Details" %}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="btn btn-outline btn-error btn-sm" href="">
|
||||||
|
<i class="fa-solid fa-trash"></i>{% translate "Delete" %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lg:hidden">
|
||||||
|
{% if object_list|length == 0 %}
|
||||||
|
<div class="text-center w-full">{% translate "No members found" %}</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
{% for member in object_list %}
|
||||||
|
<a class="border border-base-300 rounded-lg p-2 flex flex-row gap-2 items-center" href="">
|
||||||
|
<div>
|
||||||
|
{% avatar first_name=member.user.first_name last_name=member.user.last_name width="sm" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grow">
|
||||||
|
<div class="font-semibold text-sm">{{ member.user.get_full_name }} {% if member.license %}#{{ member.license }}{% endif %}</div>
|
||||||
|
<div class="opacity-50 text-xs">{{ member.birthday|date:"d M Y"|default:"" }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<i class="fa-solid fa-chevron-right"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if is_paginated %}
|
||||||
|
<div class="flex justify-center mt-4">
|
||||||
|
<div class="join">
|
||||||
|
{% if page_obj.has_previous %}
|
||||||
|
<a class="join-item btn" href="?{% url_replace request "page" 1 %}">«<span
|
||||||
|
class="hidden lg:inline"> {% translate "first" %}</span></a>
|
||||||
|
<a class="join-item btn"
|
||||||
|
href="?{% url_replace request "page" page_obj.previous_page_number %}"><span
|
||||||
|
class="hidden lg:inline">{% translate "previous" %}</span><span
|
||||||
|
class="lg:hidden"><</span></a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<button class="join-item btn btn-disabled">
|
||||||
|
{% blocktranslate with page=page_obj.number num_pages=page_obj.paginator.num_pages %}page {{ page }}
|
||||||
|
of {{ num_pages }}{% endblocktranslate %}</button>
|
||||||
|
|
||||||
|
{% if page_obj.has_next %}
|
||||||
|
<a class="join-item btn" href="?{% url_replace request "page" page_obj.next_page_number %}"><span
|
||||||
|
class="hidden lg:inline">{% translate "next" %}</span><span
|
||||||
|
class="lg:hidden">></span></a>
|
||||||
|
<a class="join-item btn" href="?{% url_replace request "page" page_obj.paginator.num_pages %}"><span
|
||||||
|
class="hidden lg:inline"> {% translate "last" %}</span> »</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock content %}
|
||||||
19
templates/templatetags/avatar.html
Normal file
19
templates/templatetags/avatar.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<div class="avatar avatar-placeholder font-semibold {% if button %}btn btn-circle btn-ghost{% endif %}" {% if button %}tabindex="0" role="button"{% endif %}>
|
||||||
|
{% if width == "xl" %}
|
||||||
|
<div class="w-24 rounded-lg" style="background-color: {{ background }}; color: {{ foreground }};">
|
||||||
|
<span class="text-4xl">{{ name }}</span>
|
||||||
|
</div>
|
||||||
|
{% elif width == "lg" %}
|
||||||
|
<div class="w-16 rounded-lg" style="background-color: {{ background }}; color: {{ foreground }};">
|
||||||
|
<span class="text-2xl">{{ name }}</span>
|
||||||
|
</div>
|
||||||
|
{% elif width == "sm" %}
|
||||||
|
<div class="w-8 rounded-lg" style="background-color: {{ background }}; color: {{ foreground }};">
|
||||||
|
<span class="text-sm">{{ name }}</span>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="rounded-lg {% if button %}w-10{% else %}w-12{% endif %}" style="background-color: {{ background }}; color: {{ foreground }};">
|
||||||
|
<span class="{% if not button %}text-xl{% endif %}">{{ name }}</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
117
templates/templatetags/field.html
Normal file
117
templates/templatetags/field.html
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
{% load i18n %}
|
||||||
|
|
||||||
|
<div class="w-full max-w-6xl {% if size_modifier %}lg:w-fit{% endif %}">
|
||||||
|
<div class="flex flex-col gap-y-2">
|
||||||
|
{% if show_label %}
|
||||||
|
<div class="flex flex-row items-end min-h-6">
|
||||||
|
<div class="ml-1 grow text-sm font-semibold {% if field.errors %}text-error{% else %}text-base-content{% endif %}">
|
||||||
|
{{ field.label }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if field.field.required %}
|
||||||
|
<div class="mr-1">
|
||||||
|
<span class="badge badge-sm {% if field.errors %}badge-error text-error-content{% else %}badge-neutral text-neutral-content{% endif %}">{% translate "required" %}</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{% if field_type == "input" %}
|
||||||
|
<input
|
||||||
|
type="{% if field.widget_type == "regionalphonenumber" %}tel{% elif field.widget_type == "datetime" %}datetime-local{% else %}{{ field.widget_type }}{% endif %}"
|
||||||
|
class="input w-full {% if field.errors %}input-error text-error{% endif %} {% if size_modifier %}input-{{ size_modifier }}{% endif %}"
|
||||||
|
name="{{ field.html_name }}"
|
||||||
|
value="{% if field.widget_type == "date" or field.widget_type == "datetime" %}{% if field.value|date:"c"|default:"" != "" %}{{ field.value|date:"c"|default:"" }}{% else %}{{ field.value|default:"" }}{% endif %}{% else %}{% if field.value == None %}{{ field.value|default:"" }}{% else %}{{ field.value }}{% endif %}{% endif %}"
|
||||||
|
{% if show_placeholder %}placeholder="{{ field.label|capfirst }}"{% endif %}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{% elif field_type == "checkbox" %}
|
||||||
|
<div class="flex flex-row items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
{% if show_as_toggle %}
|
||||||
|
class="toggle {% if size_modifier %}toggle-{{ size_modifier }}{% endif %}"
|
||||||
|
{% else %}
|
||||||
|
class="checkbox {% if size_modifier %}checkbox-{{ size_modifier }}{% endif %}"
|
||||||
|
{% endif %}
|
||||||
|
name="{{ field.html_name }}"
|
||||||
|
{% if field.value %}checked="checked"{% endif %}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{% if show_help_text %}
|
||||||
|
<div class="text-sm">
|
||||||
|
{{ field.help_text }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% elif field_type == "textarea" %}
|
||||||
|
<textarea
|
||||||
|
name="{{ field.html_name }}"
|
||||||
|
class="{% if type == "markdownx" %}markdownx{% endif %} textarea textarea-bordered h-72 w-full {% if field.errors %}textarea-error text-error{% endif %} {% if size_modifier %}textarea-{{ size_modifier }}{% endif %}"
|
||||||
|
{% if show_placeholder %}placeholder="{{ field.label }}"{% endif %}
|
||||||
|
>{{ field.value|default:"" }}</textarea>
|
||||||
|
|
||||||
|
{% elif field_type == "select" %}
|
||||||
|
<select
|
||||||
|
class="select w-full {% if size_modifier %}select-{{ size_modifier }}{% endif %} {% if field.errors %}select-error text-error{% endif %}"
|
||||||
|
name="{{ field.html_name }}"
|
||||||
|
id="{{ field.auto_id }}"
|
||||||
|
{% if field.widget_type == "selectmultiple" %}multiple{% endif %}
|
||||||
|
>
|
||||||
|
|
||||||
|
{% if field.widget_type == "selectmultiple" %}
|
||||||
|
{% if not show_label %}
|
||||||
|
<option selected disabled>{{ field.label|capfirst }}</option>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% for option_value, option_label in field.field.choices %}
|
||||||
|
<option value="{{ option_value }}" {% if option_value in field.value %}selected="selected"{% endif %}>
|
||||||
|
{{ option_label }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
{% if not show_label %}
|
||||||
|
<option selected disabled>{{ field.label|capfirst }}</option>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% for option_value, option_label in field.field.choices %}
|
||||||
|
<option value="{{ option_value }}" {% if field.value|stringformat:"s" == option_value|stringformat:"s" %}selected="selected"{% endif %}>
|
||||||
|
{{ option_label }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</select>
|
||||||
|
|
||||||
|
{% elif field_type == "file" %}
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
class="file-input w-full {% if size_modifier %}file-input-{{ size_modifier }}{% endif %}"
|
||||||
|
name="{{ field.html_name }}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{% if field.value %}
|
||||||
|
<span class="my-1 text-xs opacity-50">{% translate "Current file:" %} {{ field.value }}</span>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if field_type != "checkbox" and field.help_text and show_help_text or field.errors %}
|
||||||
|
<div class="flex flex-col gap-1 ml-2">
|
||||||
|
{% if field.errors %}
|
||||||
|
<div class="text-xs text-error">
|
||||||
|
{{ field.errors }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if field.help_text %}
|
||||||
|
<div class="text-xs self-start opacity-50 {% if field.errors %}text-error{% endif %}">
|
||||||
|
{{ field.help_text }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -5,7 +5,42 @@
|
|||||||
|
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
@plugin "daisyui";
|
@plugin "daisyui" {
|
||||||
|
}
|
||||||
|
|
||||||
|
@plugin "daisyui/theme" {
|
||||||
|
name: "light";
|
||||||
|
default: true;
|
||||||
|
prefersdark: true;
|
||||||
|
--color-base-100: oklch(100% 0 0);
|
||||||
|
--color-base-200: oklch(98% 0 0);
|
||||||
|
--color-base-300: oklch(95% 0 0);
|
||||||
|
--color-base-content: oklch(21% 0.006 285.885);
|
||||||
|
--color-primary: oklch(45% 0.24 277.023);
|
||||||
|
--color-primary-content: oklch(93% 0.034 272.788);
|
||||||
|
--color-secondary: oklch(65% 0.241 354.308);
|
||||||
|
--color-secondary-content: oklch(94% 0.028 342.258);
|
||||||
|
--color-accent: oklch(77% 0.152 181.912);
|
||||||
|
--color-accent-content: oklch(38% 0.063 188.416);
|
||||||
|
--color-neutral: oklch(14% 0.005 285.823);
|
||||||
|
--color-neutral-content: oklch(92% 0.004 286.32);
|
||||||
|
--color-info: oklch(74% 0.16 232.661);
|
||||||
|
--color-info-content: oklch(29% 0.066 243.157);
|
||||||
|
--color-success: oklch(76% 0.177 163.223);
|
||||||
|
--color-success-content: oklch(37% 0.077 168.94);
|
||||||
|
--color-warning: oklch(82% 0.189 84.429);
|
||||||
|
--color-warning-content: oklch(41% 0.112 45.904);
|
||||||
|
--color-error: oklch(71% 0.194 13.428);
|
||||||
|
--color-error-content: oklch(27% 0.105 12.094);
|
||||||
|
--radius-selector: 0.5rem;
|
||||||
|
--radius-field: 0.5rem;
|
||||||
|
--radius-box: 0.5rem;
|
||||||
|
--size-selector: 0.25rem;
|
||||||
|
--size-field: 0.25rem;
|
||||||
|
--border: 1px;
|
||||||
|
--depth: 0;
|
||||||
|
--noise: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A catch-all path to Django template files, JavaScript, and Python files
|
* A catch-all path to Django template files, JavaScript, and Python files
|
||||||
@@ -21,57 +56,45 @@
|
|||||||
--font-sans: Open Sans, Noto Sans, Barlow Semi Condensed, Ubuntu, Fira Sans, Catamaran, Cabin, Roboto, sans-serif;
|
--font-sans: Open Sans, Noto Sans, Barlow Semi Condensed, Ubuntu, Fira Sans, Catamaran, Cabin, Roboto, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
@source inline("input-{xs,sm,md,lg,xl}");
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
h1.page-title {
|
||||||
|
@apply text-3xl font-bold;
|
||||||
|
@apply mb-12;
|
||||||
|
|
||||||
/*.navbar-small {
|
& > svg {
|
||||||
|
@apply mr-2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-small > div {
|
div.action_bar {
|
||||||
@apply py-2;
|
@apply flex flex-col lg:flex-row;
|
||||||
|
@apply items-center;
|
||||||
|
|
||||||
|
& > .filter {
|
||||||
|
@apply grow w-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .filter > form {
|
||||||
|
@apply flex flex-col lg:flex-row gap-2;
|
||||||
|
@apply items-end;
|
||||||
|
@apply w-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .filter > form > div > button {
|
||||||
|
@apply btn btn-outline btn-xs;
|
||||||
|
@apply grow;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .add {
|
||||||
|
@apply my-6 lg:my-0;
|
||||||
|
@apply w-full lg:w-fit shrink-0;
|
||||||
|
@apply flex flex-row flex-wrap gap-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .add > a {
|
||||||
|
@apply min-w-fit lg:w-fit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-small h1 {
|
|
||||||
@apply text-lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-small > div img {
|
|
||||||
@apply max-h-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-small nav {
|
|
||||||
@apply text-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-small nav div.avatar > div {
|
|
||||||
@apply w-6;
|
|
||||||
@apply text-xs;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
/* #sidebar {
|
|
||||||
@apply flex flex-row gap-4 lg:flex-col;
|
|
||||||
@apply lg:min-w-64;
|
|
||||||
@apply mx-auto lg:mx-0;
|
|
||||||
}
|
|
||||||
|
|
||||||
!* Each section is a group, stacked title + items *!
|
|
||||||
#sidebar > div.section {
|
|
||||||
@apply flex flex-col gap-2;
|
|
||||||
}
|
|
||||||
|
|
||||||
!* Title stays simple, click/hover target *!
|
|
||||||
#sidebar > div.section > div.section-title {
|
|
||||||
@apply cursor-pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
!* Items: - small: hidden by default, show on hover - large: flex as in your original design *!
|
|
||||||
#sidebar > div.section > div.section-items {
|
|
||||||
@apply hidden group-hover:flex flex-col gap-2;
|
|
||||||
@apply bg-red-600;
|
|
||||||
@apply lg:flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sidebar > div.section.open > div.section-items {
|
|
||||||
@apply flex;
|
|
||||||
}*/
|
|
||||||
}
|
}
|
||||||
0
theme/templatetags/__init__.py
Normal file
0
theme/templatetags/__init__.py
Normal file
49
theme/templatetags/avatar.py
Normal file
49
theme/templatetags/avatar.py
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
from hashlib import md5
|
||||||
|
from math import sqrt
|
||||||
|
|
||||||
|
from django import template
|
||||||
|
|
||||||
|
register = template.Library()
|
||||||
|
|
||||||
|
def calculate_brightness(background_color: dict) -> float:
|
||||||
|
"""Calculates the brightness of a background image."""
|
||||||
|
r_coefficient = 0.241
|
||||||
|
g_coefficient = 0.691
|
||||||
|
b_coefficient = 0.068
|
||||||
|
|
||||||
|
return sqrt(r_coefficient ** 2 * background_color["R"] + g_coefficient ** 2 * background_color["G"] + b_coefficient ** 2 * background_color["B"]) * 100
|
||||||
|
|
||||||
|
def foreground(background_color: dict) -> dict:
|
||||||
|
"""Calculates the foreground color based on the background."""
|
||||||
|
black = {"R": 0, "G": 0, "B": 0}
|
||||||
|
white = {"R": 255, "G": 255, "B": 255}
|
||||||
|
|
||||||
|
return black if calculate_brightness(background_color) > 210 else white
|
||||||
|
|
||||||
|
def background(text: str) -> dict:
|
||||||
|
"""Calculates the background color based on the text."""
|
||||||
|
hash_value = md5(text.encode("utf-8")).hexdigest()
|
||||||
|
hash_value_values = (hash_value[:8], hash_value[8:16], hash_value[16:24])
|
||||||
|
background_color = tuple(int(value, 16) % 256 for value in hash_value_values)
|
||||||
|
|
||||||
|
return {"R": background_color[0], "G": background_color[1], "B": background_color[2]}
|
||||||
|
|
||||||
|
@register.inclusion_tag("templatetags/avatar.html")
|
||||||
|
def avatar(first_name: str = "", last_name: str = "", initials: str = "", width: str = "md", button: bool = False) -> dict:
|
||||||
|
if initials:
|
||||||
|
display_name = initials
|
||||||
|
full_name = initials
|
||||||
|
else:
|
||||||
|
display_name = f"{first_name[0]}{last_name[0]}"
|
||||||
|
full_name = f"{first_name} {last_name}"
|
||||||
|
|
||||||
|
avatar_background = background(full_name)
|
||||||
|
avatar_foreground = foreground(avatar_background)
|
||||||
|
|
||||||
|
return {
|
||||||
|
"name": display_name,
|
||||||
|
"width": width,
|
||||||
|
"button": button,
|
||||||
|
"background": "#%02x%02x%02x" % (avatar_background["R"], avatar_background["G"], avatar_background["B"]), # noqa: UP031
|
||||||
|
"foreground": "#%02x%02x%02x" % (avatar_foreground["R"], avatar_foreground["G"], avatar_foreground["B"]), # noqa: UP031
|
||||||
|
}
|
||||||
43
theme/templatetags/form_field.py
Normal file
43
theme/templatetags/form_field.py
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
from django import template
|
||||||
|
from django.forms import BoundField
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
register = template.Library()
|
||||||
|
|
||||||
|
@register.inclusion_tag("templatetags/field.html")
|
||||||
|
def form_field(field: BoundField, label: Optional[str] = None, help_text: Optional[str] = None, show_label: bool = True, show_help_text: bool = True, show_placeholder: bool = True, show_as_toggle: bool = False, size: str = "full") -> dict:
|
||||||
|
if label is not None:
|
||||||
|
field.label = label
|
||||||
|
|
||||||
|
if help_text is not None:
|
||||||
|
field.help_text = help_text
|
||||||
|
|
||||||
|
field_type = None
|
||||||
|
match field.widget_type:
|
||||||
|
case "select" | "nullbooleanselect" | "radioselect" | "selectmultiple":
|
||||||
|
field_type = "select"
|
||||||
|
|
||||||
|
case "checkbox":
|
||||||
|
field_type = "checkbox"
|
||||||
|
|
||||||
|
case "textarea" | "markdownx":
|
||||||
|
field_type = "textarea"
|
||||||
|
|
||||||
|
case "clearablefile":
|
||||||
|
field_type = "file"
|
||||||
|
|
||||||
|
case _:
|
||||||
|
field_type = "input"
|
||||||
|
|
||||||
|
size_modifier = None
|
||||||
|
match size:
|
||||||
|
case "extra-small":
|
||||||
|
size_modifier = "xs"
|
||||||
|
|
||||||
|
case "small":
|
||||||
|
size_modifier = "sm"
|
||||||
|
|
||||||
|
case _:
|
||||||
|
pass
|
||||||
|
|
||||||
|
return {"field": field, "field_type": field_type, "size_modifier": size_modifier, "show_label": show_label, "show_help_text": show_help_text, "show_placeholder": show_placeholder, "show_as_toggle": show_as_toggle}
|
||||||
17
theme/templatetags/pagination.py
Normal file
17
theme/templatetags/pagination.py
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
from django import template
|
||||||
|
from django.http import HttpRequest
|
||||||
|
|
||||||
|
register = template.Library()
|
||||||
|
|
||||||
|
@register.simple_tag
|
||||||
|
def url_replace(request: HttpRequest, field: str, value: str | int, default_field: Optional[str] = None, default_value: Optional[str | int] = None) -> str:
|
||||||
|
"""Updates the given field in the GET parameters with the supplied field. If it does not exist, the field is added."""
|
||||||
|
dict_ = request.GET.copy()
|
||||||
|
dict_[field] = value
|
||||||
|
|
||||||
|
if default_field is not None and default_field not in dict_.keys():
|
||||||
|
dict_[default_field] = default_value
|
||||||
|
|
||||||
|
return dict_.urlencode()
|
||||||
Reference in New Issue
Block a user