Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-02-19 04:57:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

make dropdown buttons fill their container

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2026-02-16 16:44:52 -05:00
parent a8a85bcb0b
commit 370fa6b18a
10 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/partials/category/filter-dropdown-content.tpl
View File

@@ -1,4 +1,4 @@
<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{{ if selectedCategory }}}
<span class="category-item d-inline-flex align-items-center gap-1">
{buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}

2
src/views/partials/category/sort.tpl
View File

@@ -1,5 +1,5 @@
<div class="dropdown bottom-sheet" component="thread/sort">
<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:topic-sort-option, {sortOptionLabel}]]">
<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:topic-sort-option, {sortOptionLabel}]]">
<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
<span class="d-none d-md-inline fw-semibold">{sortOptionLabel}</span>
</button>

2
src/views/partials/category/tools-dropdown-content.tpl
View File

@@ -1,4 +1,4 @@
<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-gear text-primary"></i>
<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread-tools.title]]</span>
<span component="topic/selected/badge" class="badge rounded-pill bg-secondary"></span>

2
src/views/partials/category/watch.tpl
View File

@@ -1,6 +1,6 @@
{{{ if config.loggedIn }}}
<div class="dropdown bottom-sheet" component="topic/watch">
<button class="btn btn-ghost btn-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-ghost btn-sm ff-secondary dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
<span component="category/watching/menu" class="d-flex gap-2 align-items-center {{{ if !./isWatched }}} hidden{{{ end }}}"><i class="fa fa-fw fa-bell-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:watching]]</span></span>
<span component="category/tracking/menu" class="d-flex gap-2 align-items-center {{{ if !./isTracked }}} hidden{{{ end }}}"><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:tracking]]</span></span>

2
src/views/partials/tags/filter-dropdown-content.tpl
View File

@@ -1,4 +1,4 @@
<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{{ if selectedTag }}}
<span class="d-inline-flex align-items-center gap-1">
<i class="fa fa-fw fa-tags text-primary"></i>

2
src/views/partials/tags/watch.tpl
View File

@@ -1,6 +1,6 @@
{{{ if config.loggedIn }}}
<div class="dropdown bottom-sheet" component="tag/watch">
<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
<span component="tag/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
<i class="flex-shrink-0 fa fa-fw fa-bell-o text-primary"></i>
<span class="d-none d-md-inline fw-semibold">[[tags:watching]]</span>

16
src/views/partials/topic-filters.tpl Normal file
View File

@@ -0,0 +1,16 @@
<div class="dropdown bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-filter text-primary"></i>
<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedFilter.name}</span>
</button>
<ul class="dropdown-menu p-1 text-sm" role="menu">
{{{each filters}}}
<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{filters.url}">
<div class="flex-grow-1">{filters.name}</div>
<i class="flex-shrink-0 fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>
</a>
</li>
{{{end}}}
</ul>
</div>

16
src/views/partials/topic-terms.tpl Normal file
View File

@@ -0,0 +1,16 @@
<div class="dropdown bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-clock text-primary"></i>
<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTerm.name}</span>
</button>
<ul class="dropdown-menu p-1 text-sm" role="menu">
{{{each terms}}}
<li role="presentation" class="category">
<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{terms.url}">
<div class="flex-grow-1">{terms.name}</div>
<i class="flex-shrink-0 fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>
</a>
</li>
{{{end}}}
</ul>
</div>

2
src/views/partials/users/filter-dropdown-content.tpl
View File

@@ -1,4 +1,4 @@
<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{{ if selectedUser }}}
<span class="fw-semibold">{buildAvatar(selectedUser, "20px", true, "not-responsive")} {selectedUser.username}</span>
{{{ else }}}