finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve flex ellipsis (#30479)

Browse source 
![image](857794d8-2170-42be-a5bf-47ebacbafebd)

---------

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit b84baf21fa19521e1ab303a60918c74f85fcad1c)

Conflicts:
	- web_src/css/base.css
	  Trivial commit resolved by removing the conflicting part.
	  (it conflicted because we did not pick a previous PR)
This commit is contained in:
wxiaoguang 2024-04-15 03:43:30 +08:00 • committed by Gergely Nagy
parent b122c6ef8b
commit 9f8ebe489f
No known key found for this signature in database
3 changed files with 31 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
templates/devtest/label.tmpl Normal file
View file

@ -0,0 +1,27 @@
{{template "base/head" .}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
<div class="page-content devtest 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"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
</div>
</div>
</div>
{{template "base/footer" .}}