james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-25 13:39:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

search ui

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-29 11:22:31 +01:00
parent d83dda9ebf
commit ec3ee46088
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
template/index.html
View File

@ -123,12 +123,11 @@
<div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}"> <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}">
<drag :width="itemListWidth" @resize="resizeItemList"></drag> <drag :width="itemListWidth" @resize="resizeItemList"></drag>
<div class="px-2 toolbar d-flex align-items-center"> <div class="px-2 toolbar d-flex align-items-center">
<button class="toolbar-item"> <div class="input-icon flex-grow-1">
<span class="icon">{% inline "search.svg" %}</span> <span class="icon">{% inline "search.svg" %}</span>
</button> <input class="d-block toolbar-search" type="" v-model="itemSearch">
<input class="d-block toolbar-search" type="" v-model="itemSearch"> </div>
<div class="flex-grow-1 noselect">&nbsp;</div> <button class="toolbar-item ml-2" @click="markItemsRead()" v-if="filterSelected == 'unread'">
<button class="toolbar-item" @click="markItemsRead()" v-if="filterSelected == 'unread'">
<span class="icon">{% inline "check.svg" %}</span> <span class="icon">{% inline "check.svg" %}</span>
</button> </button>
</div> </div>

31
template/static/stylesheets/app.css
View File

@ -313,6 +313,37 @@ select.form-control:not([multiple]):not([size]) {
cursor: col-resize; cursor: col-resize;
} }
.input-icon {
position: relative;
}
.input-icon .icon {
position: absolute;
display: flex;
align-items: center;
height: 100%;
width: 2rem;
justify-content: center;
pointer-events: none;
}
.input-icon input {
padding-left: 2rem !important;
width: 100%;
}
.toolbar-search {
border: none;
border-radius: 3px;
padding: .25rem .5rem;
line-height: 1;
}
.toolbar-search:hover, .toolbar-search:focus {
background-color: #f3f3f3;
outline: none;
}
/* content */ /* content */
.content { .content {