Commit b232eb51 authored by Matthieu Fesselier's avatar Matthieu Fesselier

Add pager

parent 7c4d9a09
......@@ -28,6 +28,8 @@
padding: 5px;
text-align: center;
cursor: pointer;
outline: none;
border-radius: 5px;
}
.sib-notifications__button::-webkit-details-marker {
display: none
......@@ -65,18 +67,47 @@
}
.sib-notifications__items sib-display div[name=content]{
padding: 10px;
padding: 0.8rem;
border-bottom: 1px solid #DDD;
position: relative;
}
/* Read / unread */
.sib-notifications__items sib-display div[name=content]:before{
content: '';
display: block;
width: 4px;
height: 4px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -2px;
border-radius: 50%;
border: 2px solid #DDD;
}
.sib-notifications__items sib-display [data-read=read] + div[name=content]{
opacity: .6;
opacity: .4;
}
.sib-notifications__items sib-display [data-read=unread] + div[name=content]:before{
border-color: var(--sib-notifications-theme, gray);
background-color: var(--sib-notifications-theme, gray);
}
.sib-notifications__items sib-display [data-read=unread] + div[name=content]{
background: rgba(255, 215, 89, 0.14)
/* Pager */
.sib-notifications__list nav{
padding: 0.3rem;
}
.sib-notifications__list nav > span{
float: right;
font-size: 10px;
opacity: .5;
margin-top: 0.2rem;
}
/* Fields */
.sib-notifications__items sib-display-div[name="date"]{
color: #999;
font-size: 80%;
color: #AAA;
font-size: 70%;
margin-top: 0.3rem;
}
\ No newline at end of file
......@@ -79,10 +79,11 @@ class SIBNotifications extends SIBTemplateElement {
class="sib-notifications__items"
template-read="read_badge"
set-content="type, date"
data-fields="read, content"></sib-display>
data-fields="read, content"
paginate-by="10"></sib-display>
</div>
<template id="read_badge">
<div data-read="\${value?'read':'unread'}"></div>
<div data-read="\${value === true?'read':'unread'}"></div>
</template>
</details>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment