Add partners tooltips
This commit is contained in:
rodič
0b921a36ef
revize
34eca2b314
|
@ -0,0 +1,91 @@
|
||||||
|
<script>
|
||||||
|
export let tip = "";
|
||||||
|
export let top = false;
|
||||||
|
export let right = false;
|
||||||
|
export let bottom = false;
|
||||||
|
export let left = false;
|
||||||
|
export let active = false;
|
||||||
|
export let color = "#393F67";
|
||||||
|
|
||||||
|
let style = `background-color: ${color};`;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="tooltip-wrapper">
|
||||||
|
<span class="tooltip-slot">
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="tooltip"
|
||||||
|
class:active
|
||||||
|
class:left
|
||||||
|
class:right
|
||||||
|
class:bottom
|
||||||
|
class:top
|
||||||
|
>
|
||||||
|
{#if tip}
|
||||||
|
<div class="default-tip" {style}>{@html tip}</div>
|
||||||
|
{:else}
|
||||||
|
<slot name="custom-tip" />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tooltip-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
font-family: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: white;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 150ms, visibility 150ms;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-tip {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 2em;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip.top {
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip.bottom {
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translate(-50%, 100%);
|
||||||
|
margin-bottom: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip.left {
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
margin-left: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip.right {
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
margin-right: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-slot:hover + .tooltip {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: initial;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -7,6 +7,7 @@
|
||||||
import Avatar from "$lib/Avatar.svelte";
|
import Avatar from "$lib/Avatar.svelte";
|
||||||
import SvelteMarkdown from "svelte-markdown";
|
import SvelteMarkdown from "svelte-markdown";
|
||||||
import Link from "$lib/Link.svelte";
|
import Link from "$lib/Link.svelte";
|
||||||
|
import SvelteTooltip from "$lib/SvelteTooltip.svelte";
|
||||||
const renderers = { link: Link };
|
const renderers = { link: Link };
|
||||||
|
|
||||||
let onlyLead = true;
|
let onlyLead = true;
|
||||||
|
@ -160,13 +161,13 @@
|
||||||
<div class="mt-6 text-center">Sponzoři</div>
|
<div class="mt-6 text-center">Sponzoři</div>
|
||||||
<div class="mt-6 flex flex-wrap gap-8 justify-center">
|
<div class="mt-6 flex flex-wrap gap-8 justify-center">
|
||||||
{#each $bundle.spec.partners.filter((p) => p.type === "sponsor") as p}
|
{#each $bundle.spec.partners.filter((p) => p.type === "sponsor") as p}
|
||||||
<div class="w-28">
|
<div class="w-32">
|
||||||
<a href={p.web.url} target="_blank"
|
<a href={p.web.url} target="_blank"
|
||||||
><Avatar
|
><Avatar
|
||||||
speaker={p}
|
speaker={p}
|
||||||
col="partners"
|
col="partners"
|
||||||
size="custom"
|
size="custom"
|
||||||
customSize="w-24 shadow-xl"
|
customSize="w-28 shadow-xl"
|
||||||
/></a
|
/></a
|
||||||
>
|
>
|
||||||
<div class="text-center text-sm uppercase font-bold">{p.name}</div>
|
<div class="text-center text-sm uppercase font-bold">{p.name}</div>
|
||||||
|
@ -177,6 +178,7 @@
|
||||||
<div class="mt-6 flex flex-wrap gap-6 justify-center">
|
<div class="mt-6 flex flex-wrap gap-6 justify-center">
|
||||||
{#each $bundle.spec.partners.filter((p) => p.type === "community") as p}
|
{#each $bundle.spec.partners.filter((p) => p.type === "community") as p}
|
||||||
<div>
|
<div>
|
||||||
|
<SvelteTooltip tip={p.name}>
|
||||||
<a
|
<a
|
||||||
href={p.web
|
href={p.web
|
||||||
? p.web.url
|
? p.web.url
|
||||||
|
@ -191,6 +193,7 @@
|
||||||
customSize="w-20 shadow-lg"
|
customSize="w-20 shadow-lg"
|
||||||
/></a
|
/></a
|
||||||
>
|
>
|
||||||
|
</SvelteTooltip>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
@ -198,6 +201,7 @@
|
||||||
<div class="mt-6 flex flex-wrap gap-4 justify-center">
|
<div class="mt-6 flex flex-wrap gap-4 justify-center">
|
||||||
{#each $bundle.spec.partners.filter((p) => p.type === "medium") as p}
|
{#each $bundle.spec.partners.filter((p) => p.type === "medium") as p}
|
||||||
<div>
|
<div>
|
||||||
|
<SvelteTooltip tip={p.name}>
|
||||||
<a
|
<a
|
||||||
href={p.web
|
href={p.web
|
||||||
? p.web.url
|
? p.web.url
|
||||||
|
@ -212,6 +216,7 @@
|
||||||
customSize="w-16 shadow-lg"
|
customSize="w-16 shadow-lg"
|
||||||
/></a
|
/></a
|
||||||
>
|
>
|
||||||
|
</SvelteTooltip>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu