Skip to content

Commit b22d7fd

Browse files
GiteaBotwxiaoguang
GiteaBot
and
wxiaoguang
authored
Fix some UI problems (dropdown/container) (#30849) (#30871)
Backport #30849 by wxiaoguang Follow #30345 Follow #30547 Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
1 parent e2e326f commit b22d7fd

13 files changed

+241
-200
lines changed

‎templates/devtest/fomantic-dropdown.tmpl

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
{{template "base/head" .}}
2+
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
3+
<div class="page-content devtest ui container">
4+
<div>
5+
<h2>Dropdown</h2>
6+
<div>
7+
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
8+
<span class="text">search-input &amp; flex-item in menu</span>
9+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
10+
<div class="menu flex-items-menu">
11+
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
12+
<div class="item"><input type="radio">item</div>
13+
<div class="item"><input type="radio">item</div>
14+
</div>
15+
</div>
16+
<div class="ui search selection dropdown">
17+
<span class="text">search ...</span>
18+
<input name="value" class="search">
19+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
20+
{{svg "octicon-x" 14 "remove icon"}}
21+
<div class="menu">
22+
<div class="item">item</div>
23+
</div>
24+
</div>
25+
<div class="ui multiple selection dropdown">
26+
<input class="hidden" value="1">
27+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
28+
{{svg "octicon-x" 14 "remove icon"}}
29+
<div class="default text">empty multiple dropdown</div>
30+
<div class="menu">
31+
<div class="item">item</div>
32+
</div>
33+
</div>
34+
<div class="ui multiple clearable search selection dropdown">
35+
<input type="hidden" value="1">
36+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
37+
{{svg "octicon-x" 14 "remove icon"}}
38+
<div class="default text">clearable search dropdown</div>
39+
<div class="menu">
40+
<div class="item" data-value="1">item</div>
41+
</div>
42+
</div>
43+
<div class="ui buttons">
44+
<button class="ui button">Button with Dropdown</button>
45+
<div class="ui dropdown button icon">
46+
{{svg "octicon-triangle-down"}}
47+
<div class="menu">
48+
<div class="item">item</div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<h2>Selection</h2>
55+
<div>
56+
{{/* the "selection" class is optional, it will be added by JS automatically */}}
57+
<select class="ui dropdown selection ellipsis-items-nowrap">
58+
<option>a</option>
59+
<option>abcdefuvwxyz</option>
60+
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
61+
</select>
62+
<select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]">
63+
<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
64+
<option>abcdefuvwxyz</option>
65+
<option>a</option>
66+
</select>
67+
</div>
68+
<h2>Dropdown Button (demo only without menu)</h2>
69+
<div>
70+
<div class="ui dropdown mini button">
71+
<span class="text">mini dropdown</span>
72+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
73+
</div>
74+
<div class="ui dropdown tiny button">
75+
<span class="text">tiny dropdown</span>
76+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
77+
</div>
78+
<div class="ui button dropdown">
79+
<span class="text">button dropdown</span>
80+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
81+
</div>
82+
</div>
83+
84+
<div>
85+
<div class="ui dropdown mini compact button">
86+
<span class="text">mini compact</span>
87+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
88+
</div>
89+
<div class="ui dropdown tiny compact button">
90+
<span class="text">tiny compact</span>
91+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
92+
</div>
93+
<div class="ui button compact dropdown">
94+
<span class="text">button compact</span>
95+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
96+
</div>
97+
</div>
98+
99+
<div>
100+
<hr>
101+
<div class="ui tiny button">Other button align with ...</div>
102+
<div class="ui dropdown tiny button">
103+
<span class="text">... Dropdown Button</span>
104+
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
{{template "base/footer" .}}

‎templates/devtest/gitea-ui.tmpl

-88
Original file line numberDiff line numberDiff line change
@@ -180,94 +180,6 @@
180180
<input type="text" placeholder="place holder">
181181
</div>
182182
</div>
183-
184-
<h2>Dropdown with SVG</h2>
185-
<div>
186-
<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
187-
<span class="text">search-input &amp; flex-item in menu</span>
188-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
189-
<div class="menu flex-items-menu">
190-
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
191-
<div class="item"><input type="radio">item</div>
192-
<div class="item"><input type="radio">item</div>
193-
</div>
194-
</div>
195-
<div class="ui search selection dropdown">
196-
<span class="text">search ...</span>
197-
<input name="value" class="search">
198-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
199-
{{svg "octicon-x" 14 "remove icon"}}
200-
<div class="menu">
201-
<div class="item">item</div>
202-
</div>
203-
</div>
204-
<div class="ui multiple selection dropdown">
205-
<input class="hidden" value="1">
206-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
207-
{{svg "octicon-x" 14 "remove icon"}}
208-
<div class="default text">empty multiple dropdown</div>
209-
<div class="menu">
210-
<div class="item">item</div>
211-
</div>
212-
</div>
213-
<div class="ui multiple clearable search selection dropdown">
214-
<input type="hidden" value="1">
215-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
216-
{{svg "octicon-x" 14 "remove icon"}}
217-
<div class="default text">clearable search dropdown</div>
218-
<div class="menu">
219-
<div class="item" data-value="1">item</div>
220-
</div>
221-
</div>
222-
<div class="ui buttons">
223-
<button class="ui button">Button with Dropdown</button>
224-
<div class="ui dropdown button icon">
225-
{{svg "octicon-triangle-down"}}
226-
<div class="menu">
227-
<div class="item">item</div>
228-
</div>
229-
</div>
230-
</div>
231-
</div>
232-
233-
<div>
234-
<div class="ui dropdown mini button">
235-
<span class="text">mini dropdown</span>
236-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
237-
</div>
238-
<div class="ui dropdown tiny button">
239-
<span class="text">tiny dropdown</span>
240-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
241-
</div>
242-
<div class="ui button dropdown">
243-
<span class="text">button dropdown</span>
244-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
245-
</div>
246-
</div>
247-
248-
<div>
249-
<div class="ui dropdown mini compact button">
250-
<span class="text">mini compact</span>
251-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
252-
</div>
253-
<div class="ui dropdown tiny compact button">
254-
<span class="text">tiny compact</span>
255-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
256-
</div>
257-
<div class="ui button compact dropdown">
258-
<span class="text">button compact</span>
259-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
260-
</div>
261-
</div>
262-
263-
<div>
264-
<hr>
265-
<div class="ui tiny button">Button align with ...</div>
266-
<div class="ui dropdown tiny button">
267-
<span class="text">... Dropdown Button</span>
268-
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
269-
</div>
270-
</div>
271183
</div>
272184

273185
<div>

‎templates/repo/branch_dropdown.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969

7070
<div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
7171
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
72-
<div class="ui dropdown custom branch-selector-dropdown">
72+
<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
7373
<div class="ui button branch-dropdown-button">
7474
<span class="flex-text-block gt-ellipsis">
7575
{{if .release}}

0 commit comments

Comments
 (0)