Fix filter bar on mobile & slim layout

This commit is contained in:
Stubenhocker1399
2019-09-11 14:24:53 +02:00
parent b8595dce7f
commit d78bf6b366
2 changed files with 16 additions and 5 deletions
@@ -13,7 +13,7 @@
| Party
a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')")
| Whisper
a.link-plain.chat-log-tab([style.background-color]="filterColor" (click)="focus()")
a.link-plain.chat-log-tab.chat-log-filter-tab([style.background-color]="filterColor" (click)="focus()")
fa-icon.search-icon([icon]="searchIcon")
input.chat-log-filter(#filterInput type="text" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()")
.chat-log-scroll-outer()
@@ -160,17 +160,27 @@ $resizer-offset: $resizer-size / 2;
}
.search-icon {
padding-right: 5px;
position: relative;
float: left;
width: 0;
bottom: -1px;
left: 0;
z-index: 2;
}
.chat-log-filter-tab {
width: 100px;
}
.chat-log-filter {
padding-bottom: 5px;
border: none;
width: 100px;
background-color: rgba(0, 0, 0, 0);
border: none;
outline: none;
color: white;
color: white;
padding-left: 20px;
width: 100%;
}
.chat-log-filter::-webkit-input-placeholder {
@@ -200,11 +210,12 @@ $resizer-offset: $resizer-size / 2;
}
@media only screen and (max-width: 360px) {
.chat-log-filter {
.chat-log-filter-tab {
position: absolute;
left: 0;
bottom: 35px;
width: 100%;
width: calc(100% - 10px);
border-radius: 2px;
}
}