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