mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
new basic layout
This commit is contained in:
tresabhi committed
1 parent
6aa14d2faf
commit
73de6e3521
6 files changed
+254
-186
No files matched your search
@@ -1,24 +1,37 @@
|
||||
.characteristics {
|
||||
--cell-width: 2.5rem;
|
||||
--group-span: 7;
|
||||
--inner-padding: var(--space-4);
|
||||
|
||||
display: grid;
|
||||
grid-auto-rows: var(--cell-width);
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
|
||||
grid-auto-flow: dense;
|
||||
|
||||
padding: var(--space-5);
|
||||
gap: var(--space-4);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
box-sizing: border-box;
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
gap: var(--space-4);
|
||||
grid-column: span var(--group-span);
|
||||
gap: inherit;
|
||||
|
||||
.title-wrapper {
|
||||
background-color: var(--amber-a3);
|
||||
grid-row: span 1;
|
||||
|
||||
padding: 0 var(--inner-padding);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
gap: var(--space-3);
|
||||
|
||||
.title {
|
||||
.title-content {
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
@@ -31,67 +44,60 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: var(--space-1);
|
||||
flex: 1;
|
||||
|
||||
background-color: var(--gray-5);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
--cell-width: 2rem;
|
||||
--toy-span: 6;
|
||||
.item {
|
||||
padding: 0 var(--inner-padding);
|
||||
|
||||
display: grid;
|
||||
grid-auto-rows: var(--cell-width);
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
|
||||
grid-auto-flow: row dense;
|
||||
gap: var(--space-4);
|
||||
grid-row: span 1;
|
||||
|
||||
.item {
|
||||
grid-row: span 1;
|
||||
grid-column: span var(--toy-span);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ranking {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
|
||||
.ranking {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
.bar-wrapper {
|
||||
flex: 1;
|
||||
height: var(--space-1);
|
||||
|
||||
.bar-wrapper {
|
||||
flex: 1;
|
||||
height: var(--space-1);
|
||||
background-color: var(--gray-3);
|
||||
border-radius: var(--radius-max);
|
||||
overflow: hidden;
|
||||
|
||||
background-color: var(--gray-3);
|
||||
border-radius: var(--radius-max);
|
||||
overflow: hidden;
|
||||
|
||||
.bar {
|
||||
background-color: var(--jade-9);
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
}
|
||||
.bar {
|
||||
background-color: var(--jade-9);
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toy {
|
||||
grid-row: span var(--toy-span);
|
||||
grid-column: span var(--toy-span);
|
||||
.toy {
|
||||
grid-row: span var(--group-span);
|
||||
padding: var(--inner-padding);
|
||||
|
||||
background-color: var(--gray-3);
|
||||
border: var(--gray-5) solid var(--space-1);
|
||||
.content {
|
||||
background-color: green;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--gray-2);
|
||||
outline: var(--gray-5) solid var(--space-1);
|
||||
|
||||
border-radius: var(--space-3);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { CaretDownIcon, CaretRightIcon } from "@radix-ui/react-icons";
|
||||
import { GearIcon } from "@radix-ui/react-icons";
|
||||
import { useCharacteristicRenderer } from "../../hooks/useCharacteristicRenderer";
|
||||
import { useStrings } from "../../hooks/useStrings";
|
||||
import { Tankopedia } from "../../stores/tankopedia";
|
||||
import type { CharacteristicOutput } from "../../tankopedia/characteristics";
|
||||
import {
|
||||
characteristicsOrder,
|
||||
@@ -9,7 +8,6 @@ import {
|
||||
type CharacteristicsGroup,
|
||||
} from "../../tankopedia/characteristicsOrder";
|
||||
import type { ComputedCharacteristics } from "../../tankopedia/computeCharacteristics";
|
||||
import { Heading } from "../Heading";
|
||||
import { Text } from "../Text";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
@@ -35,35 +33,35 @@ interface GroupProps {
|
||||
}
|
||||
|
||||
function Group({ group, characteristics }: GroupProps) {
|
||||
const isOpen = Tankopedia.use((state) => state.groups[group.group]);
|
||||
const strings = useStrings();
|
||||
const toys = group.order.filter((item) => "toy" in item).length;
|
||||
const items = group.order.filter((item) => "name" in item).length;
|
||||
const span = `calc(${toys} * var(--group-span) + ${items} + 1)`;
|
||||
|
||||
return (
|
||||
<div className={styles.group}>
|
||||
<div
|
||||
className={styles.group}
|
||||
style={{
|
||||
gridRow: `span ${span}`,
|
||||
gridTemplateRows: `repeat(${span}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
<div className={styles["title-wrapper"]}>
|
||||
<Heading className={styles.title} size="3">
|
||||
<div className={styles["title-content"]}>
|
||||
{isOpen ? <CaretDownIcon /> : <CaretRightIcon />}
|
||||
{
|
||||
(strings.tanks.characteristics.titles as Record<string, string>)[
|
||||
group.group
|
||||
]
|
||||
}
|
||||
<Text className={styles.title}>
|
||||
<div className={styles.content}>
|
||||
{group.group}
|
||||
<GearIcon />
|
||||
</div>
|
||||
</Heading>
|
||||
|
||||
<div className={styles.separator} />
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
{group.order.map((item) =>
|
||||
"toy" in item ? (
|
||||
<Toy {...item} />
|
||||
) : (
|
||||
<Item config={item} value={characteristics[item.name]} />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
{group.order.map((item) =>
|
||||
"toy" in item ? (
|
||||
<Toy {...item} />
|
||||
) : (
|
||||
<Item config={item} value={characteristics[item.name]} />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -80,13 +78,7 @@ function Item({ config, value }: ItemProps) {
|
||||
return (
|
||||
<span className={styles.item}>
|
||||
<div className={styles.value}>
|
||||
<Text lowContrast>
|
||||
{
|
||||
(strings.tanks.characteristics.items as Record<string, string>)[
|
||||
config.name
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
<Text lowContrast>{config.name}</Text>
|
||||
<Text>{renderCharacteristic(value, config)}</Text>
|
||||
</div>
|
||||
|
||||
@@ -108,5 +100,11 @@ interface ToyProps {
|
||||
}
|
||||
|
||||
function Toy({ toy }: ToyProps) {
|
||||
return <span className={styles.toy}></span>;
|
||||
return (
|
||||
<div className={styles.toy}>
|
||||
<div className={styles.content}>
|
||||
<Text lowContrast>{toy} toy</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user