interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix dropdown menu overflow

This commit is contained in:
Chocobozzz 2020-05-20 11:58:03 +02:00
parent 3bf07dd8c2
commit e0433a5f8f
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/videos/+video-watch/comment/video-comments.component.html
View File

@ -12,10 +12,10 @@
<my-feed [syndicationItems]="syndicationItems"></my-feed>
<div ngbDropdown class="d-inline-block ml-4">
<button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
<button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
SORT BY
</button>
<div ngbDropdownMenu aria-labelledby="dropdownSortComments">
<div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
<button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
<button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
</div>
@ -72,7 +72,7 @@
>
<div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
<span class="glyphicon glyphicon-menu-down"></span>
<ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
<ng-template #hasAuthorComments>
<ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
@ -83,7 +83,7 @@
</ng-template>
</ng-template>
<ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
<my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
</div>
</my-video-comment>

4
client/src/app/videos/+video-watch/comment/video-comments.component.scss
View File

@ -21,7 +21,7 @@
.title-page {
margin-right: 0;
}
my-feed {
display: inline-block;
margin-left: 5px;
@ -33,7 +33,7 @@
}
}
#dropdownSortComments {
#dropdown-sort-comments {
font-weight: 600;
text-transform: uppercase;
border: none;

2
client/src/sass/bootstrap.scss vendored
View File

@ -37,6 +37,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
}
.dropdown-menu {
z-index: z(dropdown) + 1 !important;
border-radius: 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-size: 15px;