data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

tweak design of notification digits (#528)

Browse source
This commit is contained in:
Nolan Lawson 2018-09-01 13:24:02 -07:00 committed by GitHub
parent e92bed8e58
commit 9d27ba6c10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
routes/_components/NavItem.html
View file

@ -10,7 +10,7 @@
<use xlink:href={svg} />
</svg>
{#if $hasNotifications}
<span class="nav-link-notifications" aria-hidden="true">
<span class="nav-link-notifications nav-link-notifications-digits-{notificationDigits}" aria-hidden="true">
{$numberOfNotifications}
</span>
{/if}
@ -70,8 +70,13 @@
background: var(--nav-svg-fill);
color: var(--nav-bg);
border-radius: 100%;
font-size: 0.9em;
margin: 3px 0;
font-size: 0.8em;
margin: 0 0 3px;
font-weight: 600;
}
.nav-link-notifications-digits-2, .nav-link-notifications-digits-3 {
font-size: 0.7em;
}
.main-nav-link.selected {
@ -144,7 +149,7 @@
}
.nav-link-notifications {
transform: translate(15px, 7px);
margin: 3px 1px 4px;
margin: 2px 1px 4px;
}
}
</style>
@ -201,7 +206,10 @@
res += ` (${$numberOfNotifications})`
}
return res
}
},
notificationDigits: ({ $numberOfNotifications }) => (
$numberOfNotifications.toString().length
)
},
methods: {
onClick (e) {