mirror of
https://github.com/Terncode/pixel.horse.git
synced 2026-09-24 21:55:52 +02:00
Fix filter bar on mobile & slim layout
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user