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 ( return (
<div className={styles.supporter_period_container}> <div className={styles.supporter_period_container}>
{Object.entries(period_data).map(([key, item], index) => { <div className={styles.supporter_period_wrapper}>
if (item === "") return null; {Object.entries(period_data).map(([key, item], index) => {
const period_box_class_name = clsx(styles.period_box, { if (item === "") return null;
[styles.mogu_bar]: item === "mogu_2000", const period_box_class_name = clsx(styles.period_box, {
[styles.mochi_bar]: item === "mochi_1000", [styles.mogu_bar]: item === "mogu_2000",
[styles.fuwa_bar]: item === "fuwa_500", [styles.mochi_bar]: item === "mochi_1000",
[styles.basic_bar]: item === "basic_300", [styles.fuwa_bar]: item === "fuwa_500",
}); [styles.basic_bar]: item === "basic_300",
});
return ( return (
<Tooltip <Tooltip
key={index} key={index}
title={ title={
<p className={styles.tooltip_period_label}>{key}</p> <p className={styles.tooltip_period_label}>{key}</p>
} }
placement="top" placement="top"
slotProps={offset} slotProps={offset}
> >
<div className={styles.period_box_wrapper}> <div className={styles.period_box_wrapper}>
<div className={period_box_class_name}></div> <div className={period_box_class_name}></div>
</div> </div>
</Tooltip> </Tooltip>
); );
})} })}
</div>
</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; align-content: start;
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 1.8rem; column-gap: 1.8rem;
row-gap: 0.4rem; row-gap: 2rem;
} }
.supporter_image_container { .supporter_image_container {
@@ -209,13 +209,24 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
.supporter_period_container { .supporter_period_container {
position: absolute;
top: 100%;
left: 0;
}
.supporter_period_wrapper {
display: flex; display: flex;
gap: 0.2rem; gap: 0.4rem 0.2rem;
padding-left: 0.4rem; flex-shrink: 0;
flex-wrap: wrap;
padding: 0.3rem 0.4rem 0.4rem 0.4rem;
}
.period_box_wrapper {
flex-shrink: 0;
} }
.period_box { .period_box {
width: 1.8rem; width: 1.7rem;
height: 0.3rem; height: 0.3rem;
border-radius: 0.3rem; border-radius: 0.3rem;
&.mogu_bar { &.mogu_bar {
@@ -231,9 +242,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
background-color: var(--dark_800_color); background-color: var(--dark_800_color);
} }
} }
.period_box_wrapper {
padding: 0.3rem 0 0.4rem 0;
}
.tooltip_period_label { .tooltip_period_label {
font-size: 1.4rem; font-size: 1.4rem;
} }