diff options
| author | Giteabot <teabot@gitea.io> | 2023-06-14 13:21:48 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-14 13:21:48 -0400 |
| commit | 5191ab64453e9e8a52f9e51ee65911b82fa516ec (patch) | |
| tree | 97df064943db4924bc46f15dd12f2f3c8e055b3a /templates/devtest | |
| parent | bfd3eb9dbcdb7aee5ca640a0321ef93516a21a9c (diff) | |
| download | gitea-5191ab64453e9e8a52f9e51ee65911b82fa516ec.tar.gz gitea-5191ab64453e9e8a52f9e51ee65911b82fa516ec.zip | |
Use flex to align SVG and text (#25163) (#25260)
Backport #25163 by @wxiaoguang
The code can be as simple as:
```html
<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><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div>
```
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Diffstat (limited to 'templates/devtest')
| -rw-r--r-- | templates/devtest/gitea-ui.tmpl | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 824b7d0db6..b3971921d3 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -118,6 +118,106 @@ </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-items-block"> + <div class="item">{{svg "octicon-alert"}} flex every line</div> + <div class="item">{{svg "octicon-alert"}} flex every item</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> + </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> + + <h2>Dropdown with SVG</h2> + <div> + <div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only"> + <span class="text">simple</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui button dropdown"> + <span class="text">button dropdown</span> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui search selection dropdown"> + <span class="text">search ...</span> + <input name="value" class="search"> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui multiple selection dropdown"> + <input class="hidden" value="1"> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} + <div class="default text">empty multiple dropdown</div> + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui multiple clearable search selection dropdown"> + <input type="hidden" value="1"> + {{svg "octicon-triangle-down" 14 "dropdown icon"}} + {{svg "octicon-x" 14 "remove icon"}} + <div class="default text">clearable search dropdown</div> + <div class="menu"> + <div class="item" data-value="1">item</div> + </div> + </div> + <div class="ui buttons"> + <button class="ui button">Button with Dropdown</button> + <div class="ui dropdown button icon"> + {{svg "octicon-triangle-down"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + </div> + </div> + + <div> + <div class="ui dropdown mini button"> + <span class="text">small dropdown</span> + {{svg "octicon-triangle-down" 12 "dropdown icon"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + <div class="ui dropdown large button"> + <span class="text">large dropdown</span> + {{svg "octicon-triangle-down" 18 "dropdown icon"}} + <div class="menu"> + <div class="item">item</div> + </div> + </div> + </div> + </div> + + <div> <h1>ComboMarkdownEditor</h1> <div>ps: no JS code attached, so just a layout</div> {{template "shared/combomarkdowneditor" .}} |