forgejo/templates/demo/label.tmpl
0ko 3cafb7fa6c chore(ui): change /devtest to /-/demo (#11019)
It has always been largely used for showcasing UI elements but that name didn't work too well for it.

Testing:
Some of existing tests depend on these pages, making it redundant to create extra tests.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11019
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
2026-01-26 13:12:25 +01:00

27 lines
1.4 KiB
Go HTML Template

{{template "base/head" .}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/demo.css?v={{AssetVersion}}">
<div class="page-content ui container">
<div>
<h1>Label</h1>
<div class="flex-text-block tw-my-2">
<span class="ui label">simple label</span>
<span class="ui red label">red label</span>
<span class="ui green label">green label</span>
</div>
<div class="flex-text-block tw-my-2">
<span class="ui basic label">basic label</span>
<span class="ui basic red label">basic red label</span>
<span class="ui basic green label">basic green label</span>
</div>
<div class="flex-text-block tw-my-2">
<span class="ui label">long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span>
</div>
<div class="flex-text-block tw-my-2">
<span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
</div>
<div class="tw-my-2">
<span class="ui label tw-max-w-full"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
</div>
</div>
</div>
{{template "base/footer" .}}