Refactor BtcPriceWidget and ChartWidget for improved layout and fulls…

…creen handling
block-core · Jan 8, 2025 · bfbe3a3 · bfbe3a3
1 parent 3625607
commit bfbe3a3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/components/BtcPriceWidget.jsx b/src/components/BtcPriceWidget.jsx
@@ -111,24 +111,24 @@ const BtcPriceWidget = () => {
   }, [initializeWebSocket]);
 
   return (
-    <div className="flex flex-col items-center w-full gap-6">
+    <div className="flex flex-col items-center w-full gap-4 sm:gap-6">
       <div className="text-center">
         <div
           ref={priceRef}
-          className="text-4xl md:text-6xl lg:text-8xl font-extrabold transition-colors duration-500"
+          className="text-3xl sm:text-4xl md:text-6xl lg:text-8xl font-extrabold transition-colors duration-500"
           style={{ color: changeColor }}
         >
           {price}
         </div>
         <div
-          className="text-lg md:text-xl lg:text-2xl mt-2"
+          className="text-base sm:text-lg md:text-xl lg:text-2xl mt-2"
           style={{ color: changeColor }}
         >
           {change}
         </div>
       </div>
 
-      <div className="w-full max-w-[1400px] mx-auto px-4 mb-20">
+      <div className="w-full max-w-[1400px] mx-auto px-2 sm:px-4 mb-10 lg:mb-20 ">
         <div className="w-full bg-bgDark1 rounded-lg shadow-xl overflow-hidden">
           <ChartWidget />
         </div>

diff --git a/src/components/ChartWidget.jsx b/src/components/ChartWidget.jsx
@@ -14,15 +14,21 @@ const ChartWidget = () => {
     if (!document.fullscreenElement) {
       containerRef.current.requestFullscreen();
       setIsFullscreen(true);
+      // Prevent scrolling in fullscreen
+      document.body.style.overflow = 'hidden';
     } else {
       document.exitFullscreen();
       setIsFullscreen(false);
+      // Restore scrolling
+      document.body.style.overflow = 'auto';
     }
   };
 
   useEffect(() => {
     const handleFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement);
+      const isFs = !!document.fullscreenElement;
+      setIsFullscreen(isFs);
+      document.body.style.overflow = isFs ? 'hidden' : 'auto';
     };
 
     document.addEventListener('fullscreenchange', handleFullscreenChange);
@@ -54,14 +60,22 @@ const ChartWidget = () => {
     if (!chartContainerRef.current) return;
 
     const updateChartHeight = () => {
-      const containerHeight = chartContainerRef.current.clientHeight;
-      chart.current?.applyOptions({ height: containerHeight });
+      const containerHeight = chartContainerRef.current.clientHeight - 56; // subtract toolbar height
+      chart.current?.applyOptions({ 
+        height: containerHeight,
+        layout: {
+          background: { color: 'rgb(6, 30, 36)' },
+          textColor: 'rgb(203, 221, 225)',
+          padding: { top: 10, bottom: 10 }
+        }
+      });
     };
 
     chart.current = createChart(chartContainerRef.current, {
       layout: {
         background: { color: 'rgb(6, 30, 36)' },
         textColor: 'rgb(203, 221, 225)',
+        padding: { top: 10, bottom: 10 }
       },
       grid: {
         vertLines: { color: 'rgba(255, 255, 255, 0.07)' },
@@ -146,15 +160,19 @@ const ChartWidget = () => {
   return (
     <div 
       ref={containerRef} 
-      className={`flex flex-col w-full ${isFullscreen ? 'h-screen' : 'h-full'}`}
+      className={`flex flex-col w-full relative ${
+        isFullscreen 
+          ? 'fixed inset-0 h-screen overflow-hidden z-50' 
+          : 'h-full'
+      }`}
     >
-      <div className="p-2 bg-bgDark2 border-b border-bgDark3 flex justify-between items-center sticky top-0 z-50">
-        <div className="flex gap-2 flex-wrap">
+      <div className="h-[48px] bg-bgDark2 border-b border-bgDark3 flex flex-wrap justify-between items-center absolute top-0 left-0 right-0 z-10">
+        <div className="flex gap-1 sm:gap-2 flex-wrap">
           {['1m', '5m', '15m', '1h', '4h', '1d'].map(tf => (
             <button
               key={tf}
               onClick={() => changeTimeframe(tf)}
-              className={`px-3 py-1 rounded ${
+              className={`px-2 sm:px-3 py-1 text-sm sm:text-base rounded ${
                 timeframe === tf
                   ? 'bg-primary text-white'
                   : 'bg-bgDark3 text-primaryText hover:bg-bgDark4'
@@ -167,16 +185,17 @@ const ChartWidget = () => {
 
         <button
           onClick={toggleFullscreen}
-          className="px-3 py-1 bg-bgDark3 text-primaryText rounded hover:bg-bgDark4 flex items-center gap-1"
+          className="px-2 sm:px-3 py-1 bg-bgDark3 text-primaryText text-sm sm:text-base rounded hover:bg-bgDark4 flex items-center gap-1 ml-2"
         >
-
           {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
         </button>
       </div>
 
       <div 
         className={`w-full bg-[rgb(6,30,36)] ${
-          isFullscreen ? 'flex-1' : 'h-[700px]'
+          isFullscreen 
+            ? 'h-screen' 
+            : 'h-[400px] sm:h-[500px] md:h-[600px] lg:h-[700px]'
         }`} 
         ref={chartContainerRef}
       />