diff options
| author | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
|---|---|---|
| committer | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
| commit | dd136858f1ea40ad3c94191d647487fa4f31926c (patch) | |
| tree | 58fec94a7b2a12510c9664b21793f1ed560c6518 /templates/devtest/flex-list.tmpl | |
| parent | Initial commit. (diff) | |
| download | forgejo-debian.tar.xz forgejo-debian.zip | |
Adding upstream version 9.0.0.upstream/9.0.0upstreamdebian
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'templates/devtest/flex-list.tmpl')
| -rw-r--r-- | templates/devtest/flex-list.tmpl | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl new file mode 100644 index 0000000..015ab1e --- /dev/null +++ b/templates/devtest/flex-list.tmpl @@ -0,0 +1,115 @@ +{{template "base/head" .}} +<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> +<div class="page-content devtest"> + <div class="ui container"> + <h1>Flex List (standalone)</h1> + <div class="divider"></div> + <div class="flex-list"> + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-info" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + Flex Item + <span class="ui basic label"> + with label + </span> + </div> + <div class="flex-item-body"> + consists of leading/main/trailing part + </div> + <div class="flex-item-body"> + main part contains title and (multiple) body lines + </div> + </div> + <div class="flex-item-trailing"> + <button class="ui tiny red button"> + {{svg "octicon-alert" 14}} CJK文本测试 + </button> + <button class="ui tiny primary button"> + {{svg "octicon-info" 14}} Button + </button> + <button class="ui tiny primary button"> + Button with long text + </button> + </div> + </div> + + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-info" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-title"> + Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title + </div> + <div class="flex-item-body"> + consists of leading/main/trailing part + </div> + <div class="flex-item-body"> + Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content + <span class="text truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span> + </div> + </div> + <div class="flex-item-trailing"> + <button class="ui tiny red button"> + {{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal --> + </button> + </div> + </div> + + <div class="flex-item"> + <div class="flex-item-leading"> + {{svg "octicon-repo" 32}} + </div> + <div class="flex-item-main"> + <div class="flex-item-header"> + <div class="flex-item-title"> + <a class="text primary" href="{{$.Link}}"> + gitea-org / gitea + </a> + <span data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span> + </div> + <div class="flex-item-trailing"> + <a class="muted" href="{{$.Link}}"> + <span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span> + </a> + <a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a> + <a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a> + </div> + </div> + <div class="flex-item-body"> + when inside header, the trailing part will wrap below the title + </div> + </div> + </div> + </div> + + <div class="divider"></div> + + <h1>Flex List (with "ui segment")</h1> + <div class="ui attached segment"> + <div class="flex-list"> + <div class="flex-item">item 1</div> + <div class="flex-item">item 2</div> + </div> + </div> + <div class="ui attached segment"> + <h1>Flex List (with "ui segment")</h1> + <div class="flex-list"> + <div class="flex-item">item 1</div> + <div class="flex-item">item 2</div> + </div> + </div> + + <h1>If parent provides the padding/margin space:</h1> + <div class="tw-border tw-border-secondary tw-py-4"> + <div class="flex-list flex-space-fitted"> + <div class="flex-item">item 1 (no padding top)</div> + <div class="flex-item">item 2 (no padding bottom)</div> + </div> + </div> + </div> +</div> +{{template "base/footer" .}} |