mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-12-06 12:51:41 +01:00
119 lines
4.6 KiB
Markdown
119 lines
4.6 KiB
Markdown
# Templates
|
|
|
|
## Bundles
|
|
|
|
As bundles, we see templates that load essential CSS and JavaScript and are used
|
|
throughout Alliance Auth. These bundles can also be used in your own apps, so you don't
|
|
have to load specific CSS or JavaScript yourself.
|
|
|
|
These bundles include DataTables CSS and JS, jQuery Datepicker CSS and JS, jQueryUI CSS and JS, and more.
|
|
|
|
A full list of bundles we provide can be found here: <https://gitlab.com/allianceauth/allianceauth/-/tree/master/allianceauth/templates/bundles>
|
|
|
|
To use a bundle, you can use the following code in your template (Example for jQueryUI):
|
|
|
|
```django
|
|
{% block extra_css %}
|
|
{% include "bundles/jquery-ui-css.html" %}
|
|
{% endblock %}
|
|
|
|
{% block extra_javascript %}
|
|
{% include "bundles/jquery-ui-js.html" %}
|
|
{% endblock %}
|
|
```
|
|
|
|
## Template Partials
|
|
|
|
To ensure a unified style language throughout Alliance Auth and Community Apps,
|
|
we also provide a couple of template partials. This collection is bound to grow over
|
|
time, so best have an eye on this page.
|
|
|
|
### Dashboard Widget Title
|
|
|
|
To ensure the dashboard widgets have a unified style, we provide a template partial for the widget title.
|
|
|
|
To use it, you can use the following code in your dashboard widget template:
|
|
|
|
```django
|
|
<div id="my-app-dashboard-widget" class="col-12 mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% translate "My Widget Title" as widget_title %}
|
|
{% include "framework/dashboard/widget-title.html" with title=widget_title %}
|
|
|
|
<div>
|
|
<p>My widget content</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Page Header
|
|
|
|
On some pages you want to have a page header. To make this easier, we provide a template partial for this.
|
|
|
|
To use it, you can use the following code in your template:
|
|
|
|
```django
|
|
{% block content %}
|
|
<div>
|
|
{% translate "My Page Header" as page_header %}
|
|
{% translate "My Page Header Subtitle" as optional_subtitle %}
|
|
{% include "framework/header/page-header.html" with title=page_header subtitle=optional_subtitle %}
|
|
|
|
<p>My page content</p>
|
|
</div>
|
|
{% endblock %}
|
|
```
|
|
|
|
### Top Navigation Buttons
|
|
|
|
To ensure a unified style for top navigation buttons, we provide a template partial for this.
|
|
To use it, you can use the following code in your template:
|
|
|
|
```django
|
|
{% block header_nav_collapse_right %}
|
|
{% translate "My Awesome Link" as nav_item_title %}
|
|
{% url "my_app:my_function" as nav_item_link %}
|
|
{% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True icon_on_desktop=True %}
|
|
{% endblock header_nav_collapse_right %}
|
|
```
|
|
|
|
This template takes care of the mobile responsiveness and the styling. In mobile view,
|
|
the button will be changed to a text link. The icon will be placed in front of the text
|
|
link if `icon_on_mobile` is set to `True`.
|
|
|
|
#### Button Parameters
|
|
|
|
- `btn_modifier`: (Optional) The button modifier class, e.g. `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link`. Default is `primary`.
|
|
- `url`: The URL the button should point to.
|
|
- `title`: The title of the button.
|
|
- `fa_icon`: (Optional) The FontAwesome icon class to use, e.g. `fa-solid fa-plus`.
|
|
- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.
|
|
- `icon_on_desktop`: (Optional) Boolean to indicate if the icon should be shown on desktop devices in front of the button text. Default is `False`.
|
|
|
|
### Top Navigation FontAwesome Icons
|
|
|
|
To ensure a unified style for top navigation FontAwesome icons, we provide a template partial for this.
|
|
To use it, you can use the following code in your template:
|
|
|
|
```django
|
|
{% block header_nav_collapse_right %}
|
|
{% translate "My Awesome Link as FontAwesome Icon" as nav_item_title %}
|
|
{% url "my_app:my_function" as nav_item_link %}
|
|
{% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-check-double" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
|
|
{% endblock header_nav_collapse_right %}
|
|
```
|
|
|
|
This template takes care of the mobile responsiveness and the styling. In mobile view,
|
|
the icon will be changed to a text link. The icon will be placed in front of the text
|
|
link if `icon_on_mobile` is set to `True`.
|
|
|
|
#### Icon Parameters
|
|
|
|
- `fa_icon`: The FontAwesome icon class to use, e.g. `fa-solid fa-check-double`.
|
|
- `url`: The URL the icon should point to.
|
|
- `title`: The title of the icon (used as tooltip).
|
|
- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.
|