Initial commit
This commit is contained in:
543
env/lib/python3.10/site-packages/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
vendored
Normal file
543
env/lib/python3.10/site-packages/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
vendored
Normal file
@@ -0,0 +1,543 @@
|
||||
{% extends "wagtailadmin/generic/base.html" %}
|
||||
{% load wagtailadmin_tags i18n %}
|
||||
|
||||
{% block extra_css %}
|
||||
{{ block.super }}
|
||||
|
||||
{{ example_form.media.css }}
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyclass %}styleguide{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<div class="w-sticky w-top-0 w-z-header">
|
||||
<aside aria-label="{% trans 'Minimap' %}" data-minimap-container></aside>
|
||||
</div>
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
|
||||
{% block main_content %}
|
||||
{% panel id="typography" heading="Typography" %}
|
||||
<h1>This is an h1</h1>
|
||||
<h2>This is an h2</h2>
|
||||
<h3>This is an h3</h3>
|
||||
<h4>This is an h4</h4>
|
||||
<h5>This is an h5</h5>
|
||||
<p>This is a paragraph</p>
|
||||
|
||||
<ul>
|
||||
<li>These are</li>
|
||||
<li>items in an</li>
|
||||
<li>unordered list</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>These are</li>
|
||||
<li>items in an</li>
|
||||
<li>ordered list</li>
|
||||
</ol>
|
||||
|
||||
<code>This is an example of code</code>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="help" heading="Help text" %}
|
||||
<p>
|
||||
Help text is not to be confused with the messages that appear in a banner drop down from the top of the screen. Help text are permanent instructions, visible on every page view, that explain or warn about something.
|
||||
</p>
|
||||
|
||||
{% help_block status="info" %}
|
||||
<p>This is help text that might be just for <a href="#help">information</a>, explaining what happens next, or drawing the user's attention to something they're about to do</p>
|
||||
<p>It could be multiple lines</p>
|
||||
{% endhelp_block %}
|
||||
|
||||
{% help_block status="warning" %}
|
||||
A warning message might be output in cases where a user's action could have serious <a href="#help">consequences</a>.
|
||||
{% endhelp_block %}
|
||||
|
||||
{% help_block status="critical" %}
|
||||
A critical message would probably be rare, in cases where a particularly brittle or <a href="#help">dangerously destructive action</a> could be performed and needs to be warned about.
|
||||
{% endhelp_block %}
|
||||
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="listings" heading="Listings" %}
|
||||
|
||||
<h3><code>table</code> listing</h3>
|
||||
<table class="listing">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading 1</th>
|
||||
<th>Heading 2</th>
|
||||
<th>Heading 3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">
|
||||
<h2><a href="">TD with title class</a></h2>
|
||||
</td>
|
||||
<td>Standard TD</td>
|
||||
<td>Standard TD</td>
|
||||
</tr>
|
||||
<tr class="unpublished">
|
||||
<td class="title">
|
||||
<h2><a href="">Unpublished TD with title class</a></h2>
|
||||
</td>
|
||||
<td>Standard TD</td>
|
||||
<td>Standard TD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">
|
||||
<h2><a href="">TD with title class</a></h2>
|
||||
</td>
|
||||
<td>Standard TD</td>
|
||||
<td>Standard TD</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3><code>ul</code> listing</h3>
|
||||
<ul class="listing">
|
||||
<li><div class="title"><h2><a href="">List item</a></h2></div></li>
|
||||
<li><div class="title"><h2><a href="">List item</a></h2></div></li>
|
||||
<li><div class="title"><h2><a href="">List item</a></h2></div></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3><code>ul</code> listings with multiple columns</h3>
|
||||
<ul class="listing">
|
||||
<li>
|
||||
<div class="row row-flush">
|
||||
<div class="col6 title">
|
||||
<h2><a href="">Something here</a></h2>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:end">Something else</small>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="row row-flush">
|
||||
<div class="col6">
|
||||
<a href="">Something here</a>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:end">Something else</small>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="row row-flush">
|
||||
<div class="col6">
|
||||
<a href="">Something here</a>
|
||||
</div>
|
||||
|
||||
<small class="col6" style="text-align:end">Something else</small>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Listings used for choosing a list item</h3>
|
||||
<table class="listing chooser">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading 1</th>
|
||||
<th>Heading 2</th>
|
||||
<th>Heading 3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="title">
|
||||
<h2><a href="#">TD with title class</a></h2>
|
||||
</td>
|
||||
<td>Standard TD</td>
|
||||
<td>Standard TD</td>
|
||||
</tr>
|
||||
<tr class="disabled">
|
||||
<td class="title">
|
||||
<h2>Disabled TD with title class</h2>
|
||||
</td>
|
||||
<td>Standard TD</td>
|
||||
<td>Standard TD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">
|
||||
<h2><a href="">TD with title class</a></h2>
|
||||
</td>
|
||||
<td>Standard TD</td>
|
||||
<td>Standard TD</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="pagination" heading="Pagination" %}
|
||||
{% paginate example_page %}
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="buttons" heading="Buttons" %}
|
||||
<p class="help-block help-warning">{% icon name='warning' %}Do not use <code>{% filter force_escape|lower %}<input type="button">{% endfilter %}</code> use <code>{% filter force_escape|lower %}<button type="button"></button>{% endfilter %}</code> instead. This addresses inconsistencies between rendering of buttons across browsers.</p>
|
||||
<p>Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor.</p>
|
||||
|
||||
<h3>Basic buttons</h3>
|
||||
|
||||
<a href="#" class="button">button link</a>
|
||||
<button class="button" type="button">button element</button>
|
||||
|
||||
<h4>Basic buttons <small>(small)</small></h4>
|
||||
|
||||
<a href="#" class="button button-small">button link</a>
|
||||
<button class="button button-small" type="button">button element</button>
|
||||
|
||||
<h3>Secondary buttons</h3>
|
||||
|
||||
<a href="#" class="button button-secondary">button link</a>
|
||||
<button class="button button-secondary" type="button">button element</button>
|
||||
|
||||
<h4>Secondary buttons <small>(small)</small></h4>
|
||||
<a href="#" class="button button-small button-secondary">button link</a>
|
||||
<button class="button button-small button-secondary" type="button">button element</button>
|
||||
|
||||
<h3>Disabled buttons</h3>
|
||||
<p><strong>Important</strong>: Adding <code>disabled</code> as a class should be avoided on buttons, instead use the disabled attribute. Some examples below use classes to validate existing styling still works.</p>
|
||||
|
||||
<a href="#" class="button disabled">button link</a>
|
||||
<button class="button disabled" type="button">button element</button>
|
||||
<button class="button button-secondary disabled" type="button">button secondary</button>
|
||||
|
||||
<h4>Disabled buttons <small>(small)</small></h4>
|
||||
|
||||
<a href="#" class="button button-small disabled">button link</a>
|
||||
<button class="button button-small" disabled type="button">button element</button>
|
||||
<button class="button button-small button-secondary" disabled type="button">button secondary</button>
|
||||
|
||||
<h3>Bi-color icon buttons with text</h3>
|
||||
<p>Note that <code>input</code> elements are not supported by any icon buttons.</p>
|
||||
|
||||
<a href="#" class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}button link</a>
|
||||
<button class="button bicolor button--icon" type="button">{% icon name="plus" wrapped=1 %}button element</button>
|
||||
<button class="button bicolor button--icon" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
|
||||
|
||||
<h4>Bi-color secondary icon buttons with text</h4>
|
||||
<a href="#" class="button bicolor button--icon button-secondary">{% icon name="plus" wrapped=1 %}button link</a>
|
||||
<button class="button bicolor button--icon button-secondary" type="button">{% icon name="plus" wrapped=1 %}button element</button>
|
||||
<button class="button bicolor button--icon button-secondary" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
|
||||
|
||||
<h4>Bi-color icon buttons with text <small>(small)</small></h4>
|
||||
|
||||
<a href="#" class="button button-small bicolor button--icon">{% icon name="plus" wrapped=1 %}button link</a>
|
||||
<button class="button button-small bicolor button--icon" type="button">{% icon name="plus" wrapped=1 %}button element</button>
|
||||
<button class="button button-small bicolor button--icon" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
|
||||
|
||||
<h4>Bi-color secondary icon buttons with text <small>(small)</small></h4>
|
||||
<a href="#" class="button button-small bicolor button--icon button-secondary">{% icon name="plus" wrapped=1 %}button link</a>
|
||||
<button class="button button-small bicolor button--icon button-secondary" type="button">{% icon name="plus" wrapped=1 %}button element</button>
|
||||
<button class="button button-small bicolor button--icon button-secondary" disabled type="button">{% icon name="plus" wrapped=1 %}button disabled</button>
|
||||
|
||||
<h3>Icon buttons without text</h3>
|
||||
|
||||
<a href="#" class="button text-replace button--icon">{% icon name="cog" %}button link</a>
|
||||
<button class="button text-replace button--icon" type="button">{% icon name="cog" %}button element</button>
|
||||
|
||||
<h4>Icon buttons without text <small>(small)</small></h4>
|
||||
|
||||
<a href="#" class="button button-small text-replace button--icon">{% icon name="cog" %}button link</a>
|
||||
<button class="button button-small text-replace button--icon" type="button">{% icon name="cog" %}button element</button>
|
||||
|
||||
<h3>Negative</h3>
|
||||
<p>Should not be used with <code>.button-secondary</code> on the same element.</p>
|
||||
|
||||
<a href="#" class="button no">No link</a>
|
||||
<button class="button no" type="button">No button</button>
|
||||
<button class="button no" disabled type="button">No disabled</button>
|
||||
|
||||
<h4>Negative <small>(small)</small></h4>
|
||||
|
||||
<a href="#" class="button button-small no">No</a>
|
||||
<button class="button button-small no" type="button">No</button>
|
||||
<button class="button button-small no" disabled type="button">Disabled</button>
|
||||
|
||||
<h3>Buttons with internal loading indicators</h3>
|
||||
<p>Currently only <code>button</code> elements are supported.</p>
|
||||
<p class="help-block help-warning">{% icon name='warning' %}Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.</p>
|
||||
|
||||
<button
|
||||
class="button button-longrunning"
|
||||
type="button"
|
||||
data-controller="w-progress"
|
||||
data-action="w-progress#activate"
|
||||
data-w-progress-duration-value="5000"
|
||||
>
|
||||
{% icon name="spinner" %}Click me 5s
|
||||
</button>
|
||||
<button
|
||||
class="button button-longrunning"
|
||||
type="button"
|
||||
data-controller="w-progress"
|
||||
data-action="readystatechange@document->w-progress#activate:once"
|
||||
data-w-progress-duration-value="20000"
|
||||
disabled
|
||||
>
|
||||
Disabled until 20s after load
|
||||
</button>
|
||||
<button
|
||||
class="button button-secondary button-longrunning"
|
||||
type="button"
|
||||
data-controller="w-progress"
|
||||
data-action="w-progress#activate"
|
||||
data-w-progress-duration-value="5000"
|
||||
>
|
||||
{% icon name="spinner" %}Click me 5s
|
||||
</button>
|
||||
<button
|
||||
class="button button-small button-longrunning"
|
||||
type="button"
|
||||
data-controller="w-progress"
|
||||
data-action="w-progress#activate"
|
||||
data-w-progress-duration-value="5000"
|
||||
>
|
||||
{% icon name="spinner" %}Click me 5s
|
||||
</button>
|
||||
|
||||
<h4>Buttons where the text is replaced on click</h4>
|
||||
<button
|
||||
class="button button-longrunning"
|
||||
type="button"
|
||||
data-controller="w-progress"
|
||||
data-action="w-progress#activate"
|
||||
data-w-progress-active-value="Test"
|
||||
data-w-progress-duration-value="5000"
|
||||
>
|
||||
{% icon name="spinner" %}
|
||||
<em data-w-progress-target="label">Click me 5s</em>
|
||||
</button>
|
||||
|
||||
<h3>Mixtures</h3>
|
||||
|
||||
<button class="button button--icon text-replace" type="button">{% icon name="check" %}A proper button</button>
|
||||
<a href="#" class="button button--icon text-replace white">{% icon name="cog" %}A link button</a>
|
||||
<a href="#" class="button button--icon bicolor disabled">{% icon name="check" wrapped=1 %}button link</a>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="dropdowns" heading="Dropdown buttons" %}
|
||||
|
||||
<div class="row">
|
||||
<br />
|
||||
<div class="w-flex w-gap-4">
|
||||
{% fragment as button %}
|
||||
<a href="" class="button">
|
||||
dropdown
|
||||
</a>
|
||||
{% endfragment %}
|
||||
{% dropdown_button button=button %}
|
||||
<a class="button" href="#">items should not exceed button width</a>
|
||||
{% enddropdown_button %}
|
||||
|
||||
{% fragment as button %}
|
||||
<button type="button" class="button bicolor button--icon">
|
||||
{% icon name="view" wrapped=1 %}icon dropdown
|
||||
</button>
|
||||
{% endfragment %}
|
||||
{% dropdown_button button=button toggle_icon="arrow-up" %}
|
||||
<a class="button" href="#">first item</a>
|
||||
<a class="button" href="#">second item</a>
|
||||
{% enddropdown_button %}
|
||||
|
||||
<button class="button">button for comparison of height</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<br />
|
||||
|
||||
<p>
|
||||
Inline dropdown components.
|
||||
</p>
|
||||
|
||||
{% dropdown classname="w-inline-block" toggle_icon="arrow-down" toggle_classname="button button-secondary button-small" toggle_label="More" %}
|
||||
<a href="/admin/pages/2/move/">{% icon name="arrow-right-full" %} Move</a>
|
||||
<a href="/admin/pages/2/copy/">{% icon name="copy" %} Copy</a>
|
||||
<a href="/admin/pages/2/delete/">{% icon name="bin" %} Delete</a>
|
||||
<a href="/admin/pages/2/unpublish/">{% icon name="resubmit" %} Unpublish</a>
|
||||
{% enddropdown %}
|
||||
|
||||
{% dropdown classname="w-inline-block" toggle_icon="dots-horizontal" toggle_aria_label="Actions" %}
|
||||
<a href="/admin/pages/2/move/">{% icon name="arrow-right-full" %} Move</a>
|
||||
{% enddropdown %}
|
||||
</div>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="dialog" heading="Dialogs" %}
|
||||
|
||||
<div class="w-flex w-gap-4">
|
||||
<div>
|
||||
{% dialog_toggle classname='button button-primary' dialog_id='dialog-1' text='Simple dialog' %}
|
||||
|
||||
{% dialog icon_name="doc-full-inverse" id="dialog-1" title="Simple dialog" subtitle="This is as simple as it gets 😀" %}
|
||||
<p class="w-base-text">This is an example of a simple dialog with an icon_name, title and subtitle passed to the dialog tag</p>
|
||||
{% enddialog %}
|
||||
</div>
|
||||
<div>
|
||||
{% dialog_toggle classname='button button-primary' dialog_id='dialog-2' text='Dialog with info' %}
|
||||
|
||||
{% dialog icon_name="globe" title="Dialog with info" id="dialog-2" subtitle="This is a testing subtitle" message_status="info" message_heading="Here is some info on the thing" message_description="This is a subtext for the message" %}
|
||||
<p class="w-base-text">This dialog message was generated by passing message_status=info as well as message_heading and message_description to the dialog template tag</p>
|
||||
{% enddialog %}
|
||||
</div>
|
||||
<div>
|
||||
{% dialog_toggle classname='button button-primary' dialog_id='dialog-3' text='Dialog with success' %}
|
||||
|
||||
{% dialog icon_name="globe" title="Dialog with success" id="dialog-3" subtitle="This is a testing subtitle" message_status="success" message_heading="Success! You've done the thing" %}
|
||||
<p class="w-base-text">This dialog message was generated by passing message_status=success as well as message_heading to the dialog template tag</p>
|
||||
{% enddialog %}
|
||||
</div>
|
||||
<div>
|
||||
{% dialog_toggle classname='button button-primary' dialog_id='dialog-4' text='Dialog with warning' %}
|
||||
|
||||
{% dialog icon_name="globe" title="Dialog with warning" id="dialog-4" subtitle="This is a testing subtitle" message_status="warning" message_heading="There was an issue with the thing" message_description="This is a subtext for the message" %}
|
||||
<p class="w-base-text">This dialog message was generated by passing message_status=warning as well as message_heading and message_description to the dialog template tag</p>
|
||||
{% enddialog %}
|
||||
</div>
|
||||
<div>
|
||||
{% dialog_toggle classname='button button-primary' dialog_id='dialog-5' text='Dialog with error' %}
|
||||
|
||||
{% dialog icon_name="globe" title="Dialog with critical error" id="dialog-5" subtitle="This is a testing subtitle" message_status="critical" message_heading="There was an issue with the thing" message_description="This is a subtext for the message" %}
|
||||
<p class="w-base-text">This dialog message was generated by passing message_status=critical as well as message_heading and message_description to the dialog template tag</p>
|
||||
{% enddialog %}
|
||||
</div>
|
||||
<div>
|
||||
{% dialog_toggle classname='button button-primary' dialog_id='dialog-6' text='Floating dialog' %}
|
||||
|
||||
{% dialog theme="floating" icon_name="doc-full-inverse" id="dialog-6" title="Floating dialog" subtitle="This is a testing subtitle" %}
|
||||
<p class="w-base-text">This dialog allows other page content to be seen</p>
|
||||
{% enddialog %}
|
||||
</div>
|
||||
</div>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="header" heading="Header" %}
|
||||
|
||||
{% include "wagtailadmin/shared/header.html" with title=page_title %}
|
||||
|
||||
{% url "wagtailstyleguide" as add_link %}
|
||||
{% include "wagtailadmin/shared/header.html" with title=page_title action_url=add_link icon="image" action_text="button" search_url="wagtailimages:index" %}
|
||||
<div id="listing-results" style="display: none;">{% comment %} Not implemented, hide content to avoid confusion {% endcomment %}</div>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="forms" heading="Forms" %}
|
||||
|
||||
<form>
|
||||
<ul class="fields">
|
||||
{% for field in example_form %}
|
||||
{% if field.name == 'file' %}
|
||||
{% include "wagtailimages/images/_file_field.html" %}
|
||||
{% else %}
|
||||
<li>{% formattedfield field %}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li><button type="submit" class="button">{% trans 'Save' %}</button><a href="#" class="button no">{% trans "Delete image" %}</a></li>
|
||||
</ul>
|
||||
</form>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="editor" heading="Page editor" %}
|
||||
<h3>Tabs</h3>
|
||||
|
||||
<div class="w-tabs" data-tabs>
|
||||
<div role="tablist" class="w-tabs__list">
|
||||
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-1' title='Tab 1' %}
|
||||
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-2' title='Tab 2' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Tabs can also indicate errors:</p>
|
||||
|
||||
<div class="w-tabs" data-tabs>
|
||||
<div role="tablist" class="w-tabs__list">
|
||||
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-1' title='Tab 1' errors_count='5' %}
|
||||
{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-2' title='Tab 2' errors_count='55' %}
|
||||
</div>
|
||||
</div>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="progress" heading="Progress indicators" %}
|
||||
<div id="progress-example" class="progress active">
|
||||
<div class="bar">60%</div>
|
||||
</div>
|
||||
|
||||
<p> </p>
|
||||
|
||||
<div id="progress-example2" class="progress active">
|
||||
<div class="bar" style="width: 50%;">50%</div>
|
||||
</div>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="misc" heading="Misc formatters" %}
|
||||
<h3>Avatar icons</h3>
|
||||
|
||||
<p>{% avatar %} Avatar normal</p>
|
||||
<p>{% avatar size="square" %} Avatar square</p>
|
||||
<p>{% avatar size="small" %} Avatar small</p>
|
||||
|
||||
<h3>Status tags</h3>
|
||||
<div>{% status "status tag primary" classname="w-status--primary" %}</div>
|
||||
<div>{% status "status tag secondary" %}</div>
|
||||
<div>{% status "status tag label" classname="w-status--label" %}</div>
|
||||
<div>{% status "status tag link" url="https://wagtail.org/" title="wagtail.org" hidden_label="current status" classname="w-status--primary" %}</div>
|
||||
|
||||
<h3>Loading mask</h3>
|
||||
<p>Add the following <code>div</code> around any items you wish to display with a spinner overlay and fading out</p>
|
||||
<p>Remove the "loading" class to disable the effect</p>
|
||||
<div class="loading-mask loading" style="width:200px">
|
||||
{% include "wagtailadmin/logo.html"%}
|
||||
</div>
|
||||
|
||||
<h3>Image transparency</h3>
|
||||
<p>It can be useful to show users the transparent areas of images. Add a transparency checkerboard with the <code>.show-transparency</code> on the <code>img</code> or <code>svg</code> tag thus:</p>
|
||||
<div style="width:200px">
|
||||
{% include "wagtailadmin/logo.html" with classname="show-transparency" %}
|
||||
</div>
|
||||
{% endpanel %}
|
||||
|
||||
{% panel id="icons" heading="Icons" %}
|
||||
|
||||
{% for folder, icons in all_icons %}
|
||||
{% if folder == "wagtailadmin/icons" %}
|
||||
{# Bespoke copy script with good line breaks to review icon update diffs in git. #}
|
||||
<!-- Copy this section to update the `icons.md` documentation (wagtail_icons.html file). -->
|
||||
<!-- In DevTools: copy($$('[data-icons-table^="wagtailadmin"]')[0].innerHTML.replace(/\s+/g, ' ').replace(/<t/g, '\n<t')) -->
|
||||
{% endif %}
|
||||
<div class="w-mb-10" data-icons-table="{{ folder }}">
|
||||
<!-- Auto-generated with Wagtail’s styleguide. -->
|
||||
<table class="w-w-full">
|
||||
<caption><code>register_icons</code> entries from <code>{{ folder }}</code></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Visual</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Source</th>
|
||||
<th scope="col">File path</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in icons %}
|
||||
<tr>
|
||||
<td>{% icon name=item.name classname="w-w-8 w-h-8" %}</td>
|
||||
<td><code>{{ item.name }}</code></td>
|
||||
<td>{{ item.source }}</td>
|
||||
<td><code>{{ item.file_path }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endpanel %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{{ block.super }}
|
||||
|
||||
{% include "wagtailadmin/pages/_editor_js.html" %}
|
||||
|
||||
{{ example_form.media.js }}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user