mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-30 19:08:37 +00:00 
			
		
		
		
	Use flex to align SVG and text (#25163)
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: Giteabot <teabot@gitea.io>
			
			
This commit is contained in:
		| @@ -19,7 +19,7 @@ | ||||
|           <input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos"> | ||||
|           <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i> | ||||
|           <div class="ui dropdown icon button" :title="textFilter"> | ||||
|             <i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i> | ||||
|             <svg-icon name="octicon-filter" :size="16"/> | ||||
|             <div class="menu"> | ||||
|               <a class="item" @click="toggleArchivedFilter()"> | ||||
|                 <div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle"> | ||||
|   | ||||
| @@ -72,7 +72,7 @@ | ||||
|             </template> | ||||
|           </span> | ||||
|         </button> | ||||
|         <div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1"> | ||||
|         <div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1"> | ||||
|           <svg-icon name="octicon-triangle-down" :size="14"/> | ||||
|           <div class="menu" :class="{'show':showMergeStyleMenu}"> | ||||
|             <template v-for="msd in mergeForm.mergeStyles"> | ||||
|   | ||||
| @@ -13,7 +13,7 @@ | ||||
|     </button> | ||||
|     <div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> | ||||
|       <div class="ui icon search input"> | ||||
|         <i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i> | ||||
|         <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i> | ||||
|         <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder"> | ||||
|       </div> | ||||
|       <template v-if="showBranchesInDropdown"> | ||||
|   | ||||
| @@ -75,8 +75,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH | ||||
| function showContentHistoryMenu(issueBaseUrl, $item, commentId) { | ||||
|   const $headerLeft = $item.find('.comment-header-left'); | ||||
|   const menuHtml = ` | ||||
|   <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}"> | ||||
|     • <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a> | ||||
|   <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}"> | ||||
|     • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')} | ||||
|     <div class="menu"> | ||||
|     </div> | ||||
|   </div>`; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user