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

item status indicator

Browse Source
This commit is contained in:
Nazar Kanaev 2020-08-15 22:20:24 +01:00
parent ab04ef4f0c
commit 580744bfd7
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
template/index.html
View File

@ -147,11 +147,17 @@
class="selectgroup"> class="selectgroup">
<input type="radio" name="item" :value="item.id" v-model="itemSelected"> <input type="radio" name="item" :value="item.id" v-model="itemSelected">
<div class="selectgroup-label d-flex flex-column"> <div class="selectgroup-label d-flex flex-column">
<div style="line-height: 1.2; opacity: .6;" class="d-flex"> <div style="line-height: 1; opacity: .7; margin-bottom: .1rem;" class="d-flex align-items-center">
<small class="flex-fill text-truncate mr-1">{{feedsById[item.feed_id].title}}</small> <transition name="indicator">
<span class="icon icon-small mr-1" v-if="item.status=='unread'">{% inline "circle-full.svg" %}</span>
<span class="icon icon-small mr-1" v-if="item.status=='starred'">{% inline "star-full.svg" %}</span>
</transition>
<small class="flex-fill text-truncate mr-1">
{{feedsById[item.feed_id].title}}
</small>
<small class="flex-shrink-0"><relative-time :val="item.date"/></small> <small class="flex-shrink-0"><relative-time :val="item.date"/></small>
</div> </div>
<span>{{item.title}}</span> <div>{{item.title}}</div>
</div> </div>
</label> </label>
<button class="btn btn-link btn-block loading my-3" v-if="itemsPage.cur < itemsPage.num"></button> <button class="btn btn-link btn-block loading my-3" v-if="itemsPage.cur < itemsPage.num"></button>

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

@ -124,6 +124,17 @@ select.form-control:not([multiple]):not([size]) {
vertical-align: top; vertical-align: top;
} }
.icon-small {
width: .6rem;
height: .6rem;
display: inline-block;
}
.icon-small > svg , .icon-small > img {
width: .6rem;
height: .6rem;
}
.feed-icon { .feed-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -485,3 +496,13 @@ a,
.theme-night .toolbar-search:focus { .theme-night .toolbar-search:focus {
background-color: #1a1a1a; background-color: #1a1a1a;
} }
/* animation */
.indicator-enter-active, .indicator-leave-active {
transition: all .3s;
}
.indicator-enter, .indicator-leave-to {
width: 0;
opacity: 0;
margin: 0 !important;
}