aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-05-20 11:58:03 +0200
committerChocobozzz <me@florianbigard.com>2020-05-20 11:58:03 +0200
commite0433a5f8f9346080b24d73d17c9f8fcb660a5d1 (patch)
tree9119280fde48a2ab72829ae6ad7d0273b7829577
parent3bf07dd8c27aa6ef40111c6f055e8975b3f514f4 (diff)
downloadPeerTube-e0433a5f8f9346080b24d73d17c9f8fcb660a5d1.tar.gz
PeerTube-e0433a5f8f9346080b24d73d17c9f8fcb660a5d1.tar.zst
PeerTube-e0433a5f8f9346080b24d73d17c9f8fcb660a5d1.zip
Fix dropdown menu overflow
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.html8
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss4
-rw-r--r--client/src/sass/bootstrap.scss2
3 files changed, 8 insertions, 6 deletions
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index a21042f09..affbd4793 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -12,10 +12,10 @@
12 <my-feed [syndicationItems]="syndicationItems"></my-feed> 12 <my-feed [syndicationItems]="syndicationItems"></my-feed>
13 13
14 <div ngbDropdown class="d-inline-block ml-4"> 14 <div ngbDropdown class="d-inline-block ml-4">
15 <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n> 15 <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
16 SORT BY 16 SORT BY
17 </button> 17 </button>
18 <div ngbDropdownMenu aria-labelledby="dropdownSortComments"> 18 <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
19 <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button> 19 <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
20 <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button> 20 <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
21 </div> 21 </div>
@@ -72,7 +72,7 @@
72 > 72 >
73 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2"> 73 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
74 <span class="glyphicon glyphicon-menu-down"></span> 74 <span class="glyphicon glyphicon-menu-down"></span>
75 75
76 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> 76 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
77 <ng-template #hasAuthorComments> 77 <ng-template #hasAuthorComments>
78 <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n> 78 <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
@@ -83,7 +83,7 @@
83 </ng-template> 83 </ng-template>
84 </ng-template> 84 </ng-template>
85 <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template> 85 <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
86 86
87 <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader> 87 <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
88 </div> 88 </div>
89 </my-video-comment> 89 </my-video-comment>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index 5ed1ac629..df42fae73 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -21,7 +21,7 @@
21 .title-page { 21 .title-page {
22 margin-right: 0; 22 margin-right: 0;
23 } 23 }
24 24
25 my-feed { 25 my-feed {
26 display: inline-block; 26 display: inline-block;
27 margin-left: 5px; 27 margin-left: 5px;
@@ -33,7 +33,7 @@
33 } 33 }
34} 34}
35 35
36#dropdownSortComments { 36#dropdown-sort-comments {
37 font-weight: 600; 37 font-weight: 600;
38 text-transform: uppercase; 38 text-transform: uppercase;
39 border: none; 39 border: none;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index cb266cc68..7985472ed 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -37,6 +37,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
37} 37}
38 38
39.dropdown-menu { 39.dropdown-menu {
40 z-index: z(dropdown) + 1 !important;
41
40 border-radius: 3px; 42 border-radius: 3px;
41 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); 43 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);
42 font-size: 15px; 44 font-size: 15px;