Skip to content

Commit

Permalink
layout changes so document scrollbar doesn't go under the topbar
Browse files Browse the repository at this point in the history
  • Loading branch information
Shazbot committed Jul 11, 2023
1 parent 9038791 commit bb84978
Show file tree
Hide file tree
Showing 8 changed files with 25 additions and 21 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "wh3mm",
"productName": "wh3mm",
"version": "1.37.3",
"version": "1.37.4",
"description": "WH3 Mod Manager",
"main": ".webpack/main",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function render() {
>
<TopBar />
{(window.location.pathname.includes("/main_window") && (
<div className="m-auto px-8 pb-4 pt-11 max-w-[100rem]">
<div className="m-auto pb-4 pt-11 height-without-topbar scrollbar scrollbar-track-gray-700 scrollbar-thumb-blue-700">
<Onboarding></Onboarding>
<LeftSidebar />
<Main />
Expand Down
6 changes: 3 additions & 3 deletions src/components/Categories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,7 @@ const Categories = React.memo(() => {
</div>
</FloatingOverlay>

<div className="-mt-6">
<div className="-mt-6 mx-10">
<div className="mt-5 flex">
<span className="relative ml-4">
<input
Expand Down Expand Up @@ -664,7 +664,7 @@ const Categories = React.memo(() => {
setCurrentlySelectedMods(selectedMods);
setIsContextMenuOpen(true);
}}
className="overflow-hidden"
className="overflow-hidden mx-10"
>
<HotTable
className={(isContextMenuOpen && "disable-border") || ""}
Expand All @@ -675,7 +675,7 @@ const Categories = React.memo(() => {
width="100%"
ref={hotRef}
stretchH="last"
height={"90vh"}
height={"88vh"}
nestedRows={true}
// preventOverflow={"vertical"}
licenseKey="non-commercial-and-evaluation"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Main = () => {
return (
<>
{(currentTab == "categories" && <Categories></Categories>) || (
<div className="grid grid-cols-12 text-white">
<div className="grid grid-cols-12 text-white max-w-[100rem] mx-auto">
<div className="col-span-10">
<ModRows />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ const Sidebar = React.memo(() => {
setIsOpen={setIsShowingRequiredMods}
modDependencies={missingModDependencies}
/>
<div className="fixed">
<div className="fixed h-[90vh]">
<div id="presetSection">
<Tooltip
placement="left"
Expand Down Expand Up @@ -351,7 +351,7 @@ const Sidebar = React.memo(() => {
</span>
</div>

<div className="fixed right-[5%] bottom-[4%] z-10">
<div className="absolute w-full bottom-0 z-10">
{missingModDependencies.length > 0 && (
<div className="text-center text-red-700 font-semibold mb-4">
<div
Expand Down
19 changes: 11 additions & 8 deletions src/components/TopBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,17 @@ const TopBar = memo(() => {
((isAdmin && " admin") || "");

return (
<div
id="top-bar"
draggable="true"
className="h-[28px] bg-gray-700 w-full fixed top-0 flex items-center z-[1000]"
>
<img className="ml-1 h-[24px]" src={require("../assets/modmanager.ico")} />
<span className="ml-1 font-light text-sm text-slate-100">{title}</span>
</div>
<>
<div
id="top-bar"
draggable="true"
className="h-[28px] bg-gray-700 w-full fixed top-0 flex items-center z-[1000]"
>
<img className="ml-1 h-[24px]" src={require("../assets/modmanager.ico")} />
<span className="ml-1 font-light text-sm text-slate-100">{title}</span>
</div>
<div id="top-bar" className="h-[28px] w-full"></div>
</>
);
});
export default TopBar;
6 changes: 5 additions & 1 deletion src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ body:not(.disable-row-hover) .row:hover > div:not(.drop-ghost) {
background-color: #404040;
padding: 0.5rem;
position: sticky;
top: 1.25rem;
top: -2.75rem;
}

#top-bar {
Expand Down Expand Up @@ -185,3 +185,7 @@ body:not(.disable-row-hover) .row:hover > div:not(.drop-ghost) {
.icon-color-on-hover:hover > svg {
color: #394250;
}

.height-without-topbar {
max-height: calc(100vh - 28px);
}
5 changes: 1 addition & 4 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@
<meta charset="UTF-8" />
<title>WH3 Mod Manager</title>
</head>
<body
id="body"
class="dark dark:bg-slate-800 font-light scrollbar scrollbar-track-gray-700 scrollbar-thumb-blue-700"
>
<body id="body" class="dark dark:bg-slate-800 font-light overflow-hidden">
<div id="root" class=""></div>
</body>
</html>

0 comments on commit bb84978

Please sign in to comment.