every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Config Page: Supporters. Adjust period box designs.(Add second line.)

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-05-30 17:04:42 +09:00
parent b1c68679cd
commit 51c90b3b74
2 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx
View File

@@ -272,30 +272,32 @@ const SupporterPeriodContainer = ({ settings, calc_support_period }) => {
return (
<div className={styles.supporter_period_container}>
{Object.entries(period_data).map(([key, item], index) => {
if (item === "") return null;
const period_box_class_name = clsx(styles.period_box, {
[styles.mogu_bar]: item === "mogu_2000",
[styles.mochi_bar]: item === "mochi_1000",
[styles.fuwa_bar]: item === "fuwa_500",
[styles.basic_bar]: item === "basic_300",
});
<div className={styles.supporter_period_wrapper}>
{Object.entries(period_data).map(([key, item], index) => {
if (item === "") return null;
const period_box_class_name = clsx(styles.period_box, {
[styles.mogu_bar]: item === "mogu_2000",
[styles.mochi_bar]: item === "mochi_1000",
[styles.fuwa_bar]: item === "fuwa_500",
[styles.basic_bar]: item === "basic_300",
});
return (
<Tooltip
key={index}
title={
<p className={styles.tooltip_period_label}>{key}</p>
}
placement="top"
slotProps={offset}
>
<div className={styles.period_box_wrapper}>
<div className={period_box_class_name}></div>
</div>
</Tooltip>
);
})}
return (
<Tooltip
key={index}
title={
<p className={styles.tooltip_period_label}>{key}</p>
}
placement="top"
slotProps={offset}
>
<div className={styles.period_box_wrapper}>
<div className={period_box_class_name}></div>
</div>
</Tooltip>
);
})}
</div>
</div>
);
};

23
src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
View File

@@ -13,7 +13,7 @@
align-content: start;
flex-wrap: wrap;
column-gap: 1.8rem;
row-gap: 0.4rem;
row-gap: 2rem;
}
.supporter_image_container {
@@ -209,13 +209,24 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
.supporter_period_container {
position: absolute;
top: 100%;
left: 0;
}
.supporter_period_wrapper {
display: flex;
gap: 0.2rem;
padding-left: 0.4rem;
gap: 0.4rem 0.2rem;
flex-shrink: 0;
flex-wrap: wrap;
padding: 0.3rem 0.4rem 0.4rem 0.4rem;
}
.period_box_wrapper {
flex-shrink: 0;
}
.period_box {
width: 1.8rem;
width: 1.7rem;
height: 0.3rem;
border-radius: 0.3rem;
&.mogu_bar {
@@ -231,9 +242,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
background-color: var(--dark_800_color);
}
}
.period_box_wrapper {
padding: 0.3rem 0 0.4rem 0;
}
.tooltip_period_label {
font-size: 1.4rem;
}