mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2026-08-25 06:00:16 +01:00
Fixes broken instances of overflowY for 516 (#89022)
## About The Pull Request After updating to 516, I tried messing around with some stuff, and found the Uplink didn't have a scrollbar. Looking into it, I noticed 515 still had it, so I looked at what was giving it the scrollbar in the first place, ``overflowY``, and (with the great help of Aylong) found it was a problem with the individual UIs using it. Therefore, I went through all instances of it to make sure they work, here's all UIs that broke, and what I did. - Oresilo: Replaced with ``scrollable``, also made it a Section instead of a Box. - PersonalCrafting: Uses it twice, first one works as intended, second one doesn't. Updated to work & changed the UI a bit. Video demonstration below - TelecommsMonitor: Replaced with ``scrollable``. - GenericUplink: Replaced with ``scrollable``, no longer uses auto, so it's always 'scrollable' even if it's on compact mode. I changed the Crafting UI so the buttons at the bottom left don't get cropped out anymore, making good use of our scrollable element. Before: https://github.com/user-attachments/assets/de074634-4bb9-4013-ac65-869b05fce2cc After: https://github.com/user-attachments/assets/e20a7377-69d2-41d1-a042-f79194dcc6f7 Though this doesn't really do anything, I did test this on 515 just to be 100% sure nothing breaks. ## Why It's Good For The Game Scrolling works in these few instances on 516 now, few less things to deal with later. I think it's better to use scrollable where ``overflowY`` is not needed because it's what we use more so it's easier to spot when it breaks in the future. ## Changelog 🆑 fix: Fixed the ability to scroll for Ore silo's logging, personal crafting's material section, telecomms monitors, and traitor uplinks for clients on 516. /🆑
This commit is contained in:
John Willard
@@ -210,13 +210,13 @@ const LogsList = (props: LogsListProps) => {
|
||||
const { logs } = props;
|
||||
|
||||
return logs.length > 0 ? (
|
||||
<Box pr={1} height="100%" overflowY="scroll">
|
||||
<Section fill scrollable pr={1} height="100%">
|
||||
<VirtualList>
|
||||
{logs.map((log, index) => (
|
||||
<LogEntry key={index} log={log} />
|
||||
))}
|
||||
</VirtualList>
|
||||
</Box>
|
||||
</Section>
|
||||
) : (
|
||||
<NoticeBox>No log entries currently present!</NoticeBox>
|
||||
);
|
||||
|
||||
@@ -264,6 +264,7 @@ export const PersonalCrafting = (props) => {
|
||||
<Stack.Item>
|
||||
<Input
|
||||
autoFocus
|
||||
expensive
|
||||
placeholder={
|
||||
'Search in ' +
|
||||
data.recipes.length +
|
||||
@@ -330,8 +331,8 @@ export const PersonalCrafting = (props) => {
|
||||
</Tabs.Tab>
|
||||
</Tabs>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow m={-1}>
|
||||
<Box height={'100%'} p={1} style={{ overflowY: 'auto' }}>
|
||||
<Stack.Item grow m={-1} style={{ overflowY: 'auto' }}>
|
||||
<Box height={'100%'} p={1}>
|
||||
<Tabs vertical>
|
||||
{tabMode === TABS.foodtype &&
|
||||
mode === MODE.cooking &&
|
||||
|
||||
@@ -161,6 +161,7 @@ const MachineList = (props: MachineListProps) => {
|
||||
|
||||
return (
|
||||
<Section
|
||||
scrollable
|
||||
fill
|
||||
title={title}
|
||||
buttons={
|
||||
@@ -179,7 +180,7 @@ const MachineList = (props: MachineListProps) => {
|
||||
{sortedMachines.length > 0 ? (
|
||||
<Stack fill vertical>
|
||||
<Stack.Item grow>
|
||||
<Stack fill vertical overflowY="scroll">
|
||||
<Stack fill vertical>
|
||||
{sortedMachines.map((machine, index) => (
|
||||
<Stack.Item key={index}>
|
||||
<Button
|
||||
|
||||
@@ -46,7 +46,7 @@ export const GenericUplink = (props: GenericUplinkProps) => {
|
||||
<Stack vertical fill>
|
||||
<Stack.Item>
|
||||
<Stack>
|
||||
<Stack.Item grow={1}>
|
||||
<Stack.Item grow>
|
||||
<Button
|
||||
bold
|
||||
fluid
|
||||
@@ -83,7 +83,7 @@ export const GenericUplink = (props: GenericUplinkProps) => {
|
||||
fluid
|
||||
/>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow={1}>
|
||||
<Stack.Item grow>
|
||||
<Tabs vertical fill>
|
||||
{categories.map((category) => (
|
||||
<Tabs.Tab
|
||||
@@ -104,20 +104,21 @@ export const GenericUplink = (props: GenericUplinkProps) => {
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow={1}>
|
||||
<Box height="100%" pr={1} mr={-1} style={{ overflowY: 'auto' }}>
|
||||
{items.length === 0 && (
|
||||
<Stack.Item grow>
|
||||
<Box height="100%" pr={1} mr={-1}>
|
||||
{items.length === 0 ? (
|
||||
<NoticeBox>
|
||||
{searchText.length === 0
|
||||
? 'No items in this category.'
|
||||
: 'No results found.'}
|
||||
</NoticeBox>
|
||||
) : (
|
||||
<ItemList
|
||||
compactMode={searchText.length > 0 || compactMode}
|
||||
items={items}
|
||||
handleBuy={handleBuy}
|
||||
/>
|
||||
)}
|
||||
<ItemList
|
||||
compactMode={searchText.length > 0 || compactMode}
|
||||
items={items}
|
||||
handleBuy={handleBuy}
|
||||
/>
|
||||
</Box>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
@@ -148,85 +149,87 @@ const ItemList = (props: ItemListProps) => {
|
||||
<Icon m={compactMode ? '10px' : '26px'} name="spinner" spin />
|
||||
);
|
||||
return (
|
||||
<Stack vertical mt={compactMode ? -0.5 : -1}>
|
||||
{items.map((item, index) => (
|
||||
<Stack.Item key={index} mt={compactMode ? 0.5 : 1}>
|
||||
<Section key={item.name} fitted={compactMode ? true : false}>
|
||||
<Stack>
|
||||
<Stack.Item>
|
||||
<Box
|
||||
width={compactMode ? '32px' : '64px'}
|
||||
height={compactMode ? '32px' : '64px'}
|
||||
position="relative"
|
||||
m={compactMode ? '2px' : 0}
|
||||
mr={1}
|
||||
>
|
||||
<DmIcon
|
||||
position="absolute"
|
||||
bottom="0"
|
||||
fallback={fallback}
|
||||
icon={item.icon}
|
||||
icon_state={item.icon_state}
|
||||
<Section fill scrollable>
|
||||
<Stack vertical mt={compactMode ? -0.5 : -1}>
|
||||
{items.map((item, index) => (
|
||||
<Stack.Item key={index} mt={compactMode ? 0.5 : 1}>
|
||||
<Section key={item.name} fitted={compactMode ? true : false}>
|
||||
<Stack>
|
||||
<Stack.Item>
|
||||
<Box
|
||||
width={compactMode ? '32px' : '64px'}
|
||||
/>
|
||||
</Box>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow={1}>
|
||||
{compactMode ? (
|
||||
<Stack>
|
||||
<Stack.Item
|
||||
bold
|
||||
grow={1}
|
||||
lineHeight="36px"
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Tooltip content={item.desc}>
|
||||
<Icon name="info-circle" lineHeight="36px" />
|
||||
</Tooltip>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button
|
||||
m="8px"
|
||||
disabled={item.disabled}
|
||||
onClick={(e) => handleBuy(item)}
|
||||
>
|
||||
{item.cost}
|
||||
</Button>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
) : (
|
||||
<Section
|
||||
title={item.name}
|
||||
buttons={
|
||||
<Button
|
||||
disabled={item.disabled}
|
||||
onClick={(e) => handleBuy(item)}
|
||||
>
|
||||
{item.cost}
|
||||
</Button>
|
||||
}
|
||||
height={compactMode ? '32px' : '64px'}
|
||||
position="relative"
|
||||
m={compactMode ? '2px' : 0}
|
||||
mr={1}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
opacity: '0.75',
|
||||
}}
|
||||
<DmIcon
|
||||
position="absolute"
|
||||
bottom="0"
|
||||
fallback={fallback}
|
||||
icon={item.icon}
|
||||
icon_state={item.icon_state}
|
||||
width={compactMode ? '32px' : '64px'}
|
||||
/>
|
||||
</Box>
|
||||
</Stack.Item>
|
||||
<Stack.Item grow>
|
||||
{compactMode ? (
|
||||
<Stack>
|
||||
<Stack.Item
|
||||
bold
|
||||
grow
|
||||
lineHeight="36px"
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{item.name}
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Tooltip content={item.desc}>
|
||||
<Icon name="info-circle" lineHeight="36px" />
|
||||
</Tooltip>
|
||||
</Stack.Item>
|
||||
<Stack.Item>
|
||||
<Button
|
||||
m="8px"
|
||||
disabled={item.disabled}
|
||||
onClick={(e) => handleBuy(item)}
|
||||
>
|
||||
{item.cost}
|
||||
</Button>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
) : (
|
||||
<Section
|
||||
title={item.name}
|
||||
buttons={
|
||||
<Button
|
||||
disabled={item.disabled}
|
||||
onClick={(e) => handleBuy(item)}
|
||||
>
|
||||
{item.cost}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{item.desc}
|
||||
</Box>
|
||||
</Section>
|
||||
)}
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
))}
|
||||
</Stack>
|
||||
<Box
|
||||
style={{
|
||||
opacity: '0.75',
|
||||
}}
|
||||
>
|
||||
{item.desc}
|
||||
</Box>
|
||||
</Section>
|
||||
)}
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Section>
|
||||
</Stack.Item>
|
||||
))}
|
||||
</Stack>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user