forked from MapComplete/MapComplete
UX: tone down popover elements
This commit is contained in:
parent
559605a169
commit
d0b487bfa5
4 changed files with 27 additions and 24 deletions
|
|
@ -6,26 +6,26 @@
|
|||
let open = false
|
||||
export let state: { osmConnection: OsmConnection }
|
||||
let userdetails = state.osmConnection.userDetails
|
||||
|
||||
userdetails.addCallbackAndRunD((ud) => {
|
||||
let username = userdetails.mapD(ud => ud.name)
|
||||
username.addCallbackAndRunD((ud) => {
|
||||
if (ud) {
|
||||
open = true
|
||||
window.setTimeout(() => {
|
||||
open = false
|
||||
}, 5000)
|
||||
open = false
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<Popover
|
||||
class="z-50 mt-4"
|
||||
class="mt-4 hidden sm:block"
|
||||
defaultClass="py-2 px-3 w-fit "
|
||||
trigger="null"
|
||||
placement="bottom"
|
||||
transition={(e) => fade(e, { duration: 150 })}
|
||||
bind:open
|
||||
>
|
||||
{#if $userdetails !== undefined}
|
||||
{#if $username !== undefined}
|
||||
<div style="width: max-content" class="flex items-center">
|
||||
{#if $userdetails.img}
|
||||
<img src={$userdetails.img} alt="avatar" class="mr-4 h-8 w-8 rounded-full" />
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<div>
|
||||
<div>Welcome back</div>
|
||||
<div class="normal-background" style="width: max-content">
|
||||
<b>{$userdetails?.name}</b>
|
||||
<b>{$username}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue