blob: 06d0e36569a15018eb46324c861c6af57cdb41f8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
{{template "base/head" .}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
<div class="page-content devtest ui container">
<div>
<h1>Link</h1>
<div>
<a href="#">normal</a>
<a class="muted" href="#">muted</a>
<a class="suppressed" href="#">suppressed</a>
<a class="silenced" href="#">silenced</a>
</div>
<h1>Button</h1>
<div>
Style:
<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
<label><input type="radio" name="button-style-size" value="">(normal)</label>
<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
<label><input type="radio" name="button-style-size" value="mini">mini</label>
</div>
<div>
State:
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
</div>
<div id="devtest-button-samples">
<ul class="button-sample-groups">
<li class="sample-group">
<h2>General purpose:</h2>
<button class="ui button">Unclassed</button>
<button class="ui basic button">Basic Unclassed</button>
<button class="ui primary button">Primary</button>
<button class="ui basic primary button">Basic Primary</button>
</li>
<li class="sample-group">
<h2>Recommended colors:</h2>
<button class="ui red button">Red</button>
<button class="ui basic red button">Basic Red</button>
<button class="ui green button">Green</button>
<button class="ui basic green button">Basic Green</button>
</li>
<li class="sample-group">
<h2>Inline / Plain:</h2>
<div class="tw-my-1">
<button class="btn tw-p-2">Plain button</button>
<button class="btn interact-fg tw-p-2">Plain button with interact fg</button>
<button class="btn interact-bg tw-p-2">Plain button with interact bg</button>
</div>
</li>
</ul>
<script type="module">
const $buttons = $('#devtest-button-samples').find('button.ui');
const $buttonStyles = $('input[name*="button-style"]');
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
const $buttonStates = $('input[name*="button-state"]');
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
</script>
</div>
</div>
<div>
<h1>Buttons</h1>
<div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button">3</button></div>
<div class="ui buttons"><button class="ui button active">1</button><button class="ui button">2</button><button class="ui button">3</button></div>
<div class="ui buttons"><button class="ui button">1</button><button class="ui button active">2</button><button class="ui button">3</button></div>
<div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button active">3</button></div>
</div>
<div>
<h1>Tooltip</h1>
<div><span data-tooltip-content="test tooltip">text with tooltip</span></div>
<div><span data-tooltip-content="test tooltip" data-tooltip-interactive="true">text with interactive tooltip</span></div>
</div>
<div>
<h1>Loading</h1>
<div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
<div class="is-loading tw-border tw-border-secondary tw-py-4">
<p>loading ...</p>
<p>loading ...</p>
<p>loading ...</p>
<p>loading ...</p>
</div>
</div>
<div>
<h1><origin-url></h1>
<div><origin-url data-url="test/url"></origin-url></div>
<div><origin-url data-url="/test/url"></origin-url></div>
</div>
<div>
<h1><overflow-menu></h1>
<overflow-menu class="ui secondary pointing tabular borderless menu">
<div class="overflow-menu-items">
<a class="active item">item</a>
<a class="item">item 1</a>
<a class="item">item 2</a>
<a class="item">item 3</a>
<a class="item">item 4</a>
<a class="item">item 5</a>
<a class="item">item 6</a>
<a class="item">item 7</a>
<a class="item">item 8</a>
<a class="item">item 9</a>
<a class="item">item 10</a>
<a class="item">item 11</a>
<a class="item">item 12</a>
<a class="item">item 13</a>
<a class="item">item 14</a>
<a class="item">item 15</a>
<a class="item">item 16</a>
<a class="item">item 17</a>
<a class="item">item 18</a>
</div>
</overflow-menu>
</div>
<div>
<h1>GiteaAbsoluteDate</h1>
<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></absolute-date></div>
<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></absolute-date></div>
<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></absolute-date></div>
<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
<div><absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
<div class="tw-text-text-light-2">relative-time: <relative-time format="datetime" datetime="2024-03-11" year="" day="numeric" month="numeric"></relative-time></div>
</div>
<div>
<h1>LocaleNumber</h1>
<div>{{ctx.Locale.PrettyNumber 1}}</div>
<div>{{ctx.Locale.PrettyNumber 12}}</div>
<div>{{ctx.Locale.PrettyNumber 123}}</div>
<div>{{ctx.Locale.PrettyNumber 1234}}</div>
<div>{{ctx.Locale.PrettyNumber 12345}}</div>
<div>{{ctx.Locale.PrettyNumber 123456}}</div>
<div>{{ctx.Locale.PrettyNumber 1234567}}</div>
</div>
<div>
<h1>TimeSince</h1>
<div>Now: {{TimeSince .TimeNow ctx.Locale}}</div>
<div>5s past: {{TimeSince .TimePast5s ctx.Locale}}</div>
<div>5s future: {{TimeSince .TimeFuture5s ctx.Locale}}</div>
<div>2m past: {{TimeSince .TimePast2m ctx.Locale}}</div>
<div>2m future: {{TimeSince .TimeFuture2m ctx.Locale}}</div>
<div>1y past: {{TimeSince .TimePast1y ctx.Locale}}</div>
<div>1y future: {{TimeSince .TimeFuture1y ctx.Locale}}</div>
</div>
<div>
<h1>SVG alignment</h1>
<h2>Text with SVG</h2>
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
<div class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
<div class="flex-items-block">
<div class="item">{{svg "octicon-alert"}} flex every line</div>
<div class="item">{{svg "octicon-alert"}} flex every item</div>
<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
</div>
<h2>Button with SVG</h2>
<div>
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
<div class="ui labeled button">
<button class="ui basic button">labeled button</button>
<a class="ui basic label">123</a>
</div>
<button class="ui button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
</div>
<h2>Input with SVG</h2>
<div>
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="place holder">
</div>
</div>
</div>
<div>
<h1>ComboMarkdownEditor</h1>
<div>ps: no JS code attached, so just a layout</div>
{{template "shared/combomarkdowneditor" .}}
</div>
<h1>Tailwind CSS Demo</h1>
<div>
<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
</div>
</div>
{{template "base/footer" .}}
|
