Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-29 22:58:18 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

BuildCard: Modes from popup to top right

Browse Source
This commit is contained in:
Kalle
2022-12-08 22:24:23 +02:00
parent 1c21e333ae
commit 7d44cc1b44
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/BuildCard.tsx
View File

@@ -54,7 +54,7 @@ interface BuildProps {
export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
const user = useUser();
const { t } = useTranslation(["weapons", "builds", "common"]);
const { t } = useTranslation(["weapons", "builds", "common", "game-misc"]);
const { i18n } = useTranslation();
const isMounted = useIsMounted();
@@ -75,6 +75,20 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
<div className="build">
<div>
<div className="build__top-row">
{modes && modes.length > 0 && (
<div className="build__modes">
{modes.map((mode) => (
<Image
key={mode}
alt={t(`game-misc:MODE_LONG_${mode}` as any)}
title={t(`game-misc:MODE_LONG_${mode}` as any)}
path={modeImageUrl(mode)}
width={18}
height={18}
/>
))}
</div>
)}
<h2 className="build__title">{title}</h2>
</div>
<div className="build__date-author-row">
@@ -138,24 +152,11 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
path={navIconUrl("analyzer")}
/>
</Link>
{description || (modes && modes.length > 0) ? (
{description ? (
<Popover
buttonChildren={<InfoIcon className="build__icon" />}
triggerClassName="minimal tiny build__small-text"
>
{modes && modes.length > 0 && (
<div className="build__modes">
{modes.map((mode) => (
<Image
key={mode}
alt=""
path={modeImageUrl(mode)}
width={18}
height={18}
/>
))}
</div>
)}
{description}
</Popover>
) : null}

7
app/styles/common.css
View File

@@ -780,11 +780,13 @@ dialog::backdrop {
.builds-container {
display: grid;
justify-content: center;
gap: var(--s-3);
column-gap: var(--s-3);
grid-template-columns: repeat(auto-fit, 240px);
row-gap: var(--s-4);
}
.build {
position: relative;
display: flex;
flex-direction: column;
padding: var(--s-3);
@@ -813,8 +815,11 @@ dialog::backdrop {
}
.build__modes {
position: absolute;
right: 0;
display: flex;
min-width: max-content;
margin-top: -21px;
gap: var(--s-1);
}