mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-10 13:33:08 +02:00
[Client] 🎨
This commit is contained in:
parent
9d49f71b48
commit
5a0189ce9b
3 changed files with 19 additions and 6 deletions
|
@ -64,7 +64,7 @@
|
||||||
</virtual>
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||||
{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
|
<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:desktop.tags.mk-notifications.more%' }
|
||||||
</button>
|
</button>
|
||||||
<p class="empty" if={ notifications.length == 0 && !loading }>ありません!</p>
|
<p class="empty" if={ notifications.length == 0 && !loading }>ありません!</p>
|
||||||
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
||||||
|
@ -178,6 +178,12 @@
|
||||||
color #555
|
color #555
|
||||||
border-top solid 1px rgba(0, 0, 0, 0.05)
|
border-top solid 1px rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background rgba(0, 0, 0, 0.025)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
> .empty
|
> .empty
|
||||||
margin 0
|
margin 0
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
<mk-notifications>
|
<mk-notifications>
|
||||||
<div class="notifications" if={ notifications.length != 0 }>
|
<div class="notifications" if={ notifications.length != 0 }>
|
||||||
<virtual each={ notification, i in notifications }>
|
<virtual each={ notification, i in notifications }>
|
||||||
|
<div>
|
||||||
<mk-notification notification={ notification }></mk-notification>
|
<mk-notification notification={ notification }></mk-notification>
|
||||||
|
</div>
|
||||||
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
|
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
|
||||||
</virtual>
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
<button class="more" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||||
{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
|
<i class="fa fa-spinner fa-pulse fa-fw" if={ fetchingMoreNotifications }></i>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
|
||||||
</button>
|
</button>
|
||||||
<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
|
<p class="empty" if={ notifications.length == 0 && !loading }>%i18n:mobile.tags.mk-notifications.empty%</p>
|
||||||
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
|
||||||
|
@ -16,15 +18,17 @@
|
||||||
background #fff
|
background #fff
|
||||||
|
|
||||||
> .notifications
|
> .notifications
|
||||||
margin 0 auto
|
|
||||||
max-width 500px
|
|
||||||
|
|
||||||
> mk-notification
|
> div
|
||||||
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
border-bottom solid 1px rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
&:last-child
|
&:last-child
|
||||||
border-bottom none
|
border-bottom none
|
||||||
|
|
||||||
|
> mk-notification
|
||||||
|
margin 0 auto
|
||||||
|
max-width 500px
|
||||||
|
|
||||||
> .date
|
> .date
|
||||||
display block
|
display block
|
||||||
margin 0
|
margin 0
|
||||||
|
|
|
@ -34,6 +34,9 @@ button
|
||||||
*
|
*
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
|
&[disabled]
|
||||||
|
cursor default
|
||||||
|
|
||||||
pre
|
pre
|
||||||
overflow auto
|
overflow auto
|
||||||
white-space pre
|
white-space pre
|
||||||
|
|
Loading…
Reference in a new issue