Terncode/pixel.horse
1
0
Fork 0
mirror of https://github.com/Terncode/pixel.horse.git synced 2026-09-24 21:55:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix filter bar on mobile & slim layout

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/ts/components/shared/chat-log/chat-log.pug
+1 -1
View File
@@ -13,7 +13,7 @@
| Party | Party
a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')") a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')")
| 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") fa-icon.search-icon([icon]="searchIcon")
input.chat-log-filter(#filterInput type="text" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()") input.chat-log-filter(#filterInput type="text" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()")
.chat-log-scroll-outer() .chat-log-scroll-outer()
src/ts/components/shared/chat-log/chat-log.scss
+15 -4
View File
@@ -160,17 +160,27 @@ $resizer-offset: $resizer-size / 2;
} }
.search-icon { .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 { .chat-log-filter {
padding-bottom: 5px; padding-bottom: 5px;
border: none; border: none;
width: 100px;
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border: none; border: none;
outline: none; outline: none;
color: white; color: white;
padding-left: 20px;
width: 100%;
} }
.chat-log-filter::-webkit-input-placeholder { .chat-log-filter::-webkit-input-placeholder {
@@ -200,11 +210,12 @@ $resizer-offset: $resizer-size / 2;
} }
@media only screen and (max-width: 360px) { @media only screen and (max-width: 360px) {
.chat-log-filter { .chat-log-filter-tab {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 35px; bottom: 35px;
width: 100%; width: 100%;
width: calc(100% - 10px);
border-radius: 2px; border-radius: 2px;
} }
} }