screen size calc now done with useBreakpoint hook

This commit is contained in:
Owen Rees
2023-07-10 11:40:03 +02:00
parent b67c4697d5
commit 89af3d8c99
10 changed files with 55 additions and 30 deletions
+1
View File
@@ -1,4 +1,5 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
TODO
+8
View File
@@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
+7
View File
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="ASK" />
<option name="description" value="" />
</component>
</project>
+11
View File
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.idea" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
+6
View File
@@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/echecsfrance.iml" filepath="$PROJECT_DIR$/.idea/echecsfrance.iml" />
</modules>
</component>
</project>
Generated
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
-18
View File
@@ -1,18 +0,0 @@
BUGS
//TODO tournament page load is weird on 2nd click. On safari it pauses for a few seconds. Is it trying to load the entire page before displaying?
//TODO Nodemailer 'from' reverts to echecsfrance@gmail.com - quick fix done with sender address in subject line
----------------------------------------------------------------
DESIGN CHANGES
//TODO font size on mobile screen
//TODO mobile navbar is creeping into the page by a few pixels when hidden - move it to the right a bit. It is easier to see in light mode. I cant see this on Linux
//TODO logo for navbar and favicon
//TODO mobile map needs improving
----------------------------------------------------------------
LOGIC
//TODO error handling - check everything, wrap in try/catch or use library to handle, log errors
MISC
----------------------------------------------------------------
//TODO move smaller ui components into a new folder, and make them reusable - such as using generic prop names
+2 -12
View File
@@ -5,21 +5,11 @@ import { ScrollableElement } from "@/types";
import { FaArrowUp } from "react-icons/fa";
import { handleScrollToTop } from "@/handlers/scrollHandlers";
import { useEffect, useRef, useState } from "react";
import {useBreakpoint} from "@/hooks/tailwind";
const ScrollToTopButton = () => {
const scrollToTopElementRef = useRef<ScrollableElement | null>(null);
const [isLgScreen, setIsLgScreen] = useState(false);
// calculate screen size
useEffect(() => {
const handleResize = () => {
setIsLgScreen(window.innerWidth >= 1024);
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
});
const isLgScreen = useBreakpoint("lg");
// determine scrollable element based on screen size - window or div
useEffect(() => {