CSS Layout changes

- Made the main element a fixed position -Removed the grid in large viewports Defer the google fonts
RealKendpr · Apr 19, 2024 · 8af57ba · 8af57ba
1 parent 354d4e3
commit 8af57ba
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+      defer
     />
     <!-- <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"

diff --git a/src/App.tsx b/src/App.tsx
@@ -32,6 +32,7 @@ function App() {
   const [windSpeed, setWindSpeed] = useState<number>(0);
 
   const [mainHeight, setMainHeight] = useState(window.innerHeight);
+  const [headerHeight, setHeaderHeight] = useState(0);
 
   const isWeatherInfo =
     weatherInfo !== null && weatherInfo !== undefined ? true : false;
@@ -79,31 +80,37 @@ function App() {
 
   const refresh = () => {
     setStatus("Loading");
+    setWeatherInfo(null);
     handleWeatherFetch(geoInfo);
   };
 
+  const wideViewport = window.matchMedia("(min-width: 1024px)").matches;
   const loadingSkeleton = status == "Loading" || status == "Error";
 
   return (
     <IsDayContext.Provider value={isDay}>
       <WeatherContext.Provider value={weatherInfo}>
         {status == "Loading" || weatherInfo == null ? null : <Background />}
         <div
+          data-error={status == "Error"}
           style={{
             gridTemplateRows: `auto minmax(${mainHeight}px, auto) minmax(100dvh, auto)`,
           }}
-          data-error={status == "Error"}
-          className="grid min-h-dvh grid-cols-[minmax(375px,_1fr)] data-error:!max-h-dvh md:grid-cols-[1fr_minmax(400px,_auto)] md:!grid-rows-[auto_1fr]"
+          className="grid min-h-dvh grid-cols-[minmax(375px,_1fr)] data-error:!max-h-dvh lg:block"
         >
           <Header
             isWeatherInfo={isWeatherInfo}
             refresh={refresh}
             mainHeight={mainHeight}
             setMainHeight={setMainHeight}
+            setHeaderHeight={setHeaderHeight}
           />
           {status != "Error" ? (
             <>
-              <main className="grid grid-cols-[minmax(375px,_1fr)] grid-rows-[1fr_auto] gap-y-4 py-5 md:px-10">
+              <main
+                style={wideViewport ? { top: `${headerHeight}px` } : {}}
+                className="grid grid-cols-[minmax(375px,_1fr)] grid-rows-[1fr_auto] gap-y-4 py-5 lg:fixed lg:bottom-0 lg:left-0 lg:w-[65%] lg:px-10"
+              >
                 <div className="mx-auto grid w-11/12 lg:w-3/5">
                   {loadingSkeleton ? (
                     <>
@@ -144,7 +151,14 @@ function App() {
                   />
                 </div>
               </main>
-              <aside className="bg-[hsl(0,0%,11%)] px-3 py-6">
+              <aside
+                style={
+                  wideViewport
+                    ? { paddingTop: `calc(${headerHeight}px + 1.5rem)` }
+                    : {}
+                }
+                className="min-h-dvh bg-[hsl(0,0%,11%)] px-3 py-6 lg:ml-[65%] lg:w-[35%] lg:min-w-[410px]"
+              >
                 <DaysForecast
                   forecast={forecastInfo}
                   geoInfo={geoInfo}

diff --git a/src/components/forecast.tsx b/src/components/forecast.tsx
@@ -156,7 +156,7 @@ export function DaysForecast({
   return (
     <>
       <h2 className="mb-2 font-display text-xl font-bold text-slate-200">
-        Next 5 Days
+        Upcoming Days
       </h2>
       <div>
         {daysForecastLoading
@@ -172,7 +172,7 @@ export function DaysForecast({
                   <p className="justify-self-start font-display text-base ">
                     {handlTime(i.max.dt_txt).format("dddd")}
                   </p>
-                  <figure className="flex w-[90%] items-center justify-self-start">
+                  <figure className="flex items-center justify-self-start">
                     <div className="w-10 flex-shrink-0">
                       <img
                         loading="lazy"

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,39 +1,39 @@
 import { useRef, useEffect } from "react";
 import { RefObject } from "react";
 import { Buttons } from "./buttons";
-// import { HeaderSkeleton } from "../loading/headerSkeleton";
 
 export function Header({
   isWeatherInfo,
   refresh,
   mainHeight,
   setMainHeight,
-  // status,
+  setHeaderHeight,
 }: {
   isWeatherInfo: boolean;
   refresh: () => void;
   mainHeight: number;
   setMainHeight: React.Dispatch<React.SetStateAction<number>>;
-  // status: string;
+  setHeaderHeight: React.Dispatch<React.SetStateAction<number>>;
 }) {
   const header: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const handleMainHeightResize = () => {
+    const handleHeightResize = async () => {
       const headerHeight = header?.current?.clientHeight;
+      setHeaderHeight(headerHeight as number);
       setMainHeight(window.innerHeight - (headerHeight || 0));
     };
-    window.addEventListener("resize", handleMainHeightResize);
-    handleMainHeightResize();
+    window.addEventListener("resize", handleHeightResize);
+    handleHeightResize();
     return () => {
-      window.removeEventListener("resize", handleMainHeightResize);
+      window.removeEventListener("resize", handleHeightResize);
     };
   }, [mainHeight, header]);
 
   return (
     <header
       ref={header}
-      className="flex w-full items-center justify-between bg-slate-600 px-2 py-2 md:col-span-2"
+      className="flex w-full items-center justify-between bg-slate-600 px-2 py-2 lg:fixed lg:z-50 lg:col-span-2"
     >
       <h1 className="text-lg font-bold text-slate-200">Simple Weather App</h1>
       <Buttons

diff --git a/src/loading/daysForecastSkeleton.tsx b/src/loading/daysForecastSkeleton.tsx
@@ -1,12 +1,12 @@
 export default function DaysForecastSkeleton() {
   return (
     <div className="relative grid w-full animate-pulse grid-cols-3 items-center justify-items-center px-2 pb-8 pt-4 text-gray-400 after:absolute after:bottom-0 after:h-px after:w-full after:bg-white after:opacity-20 after:content-['']">
-      <div className="h-3 w-[10ch] justify-self-start bg-slate-300"></div>
+      <div className="h-3 w-[80px] justify-self-start bg-slate-300"></div>
       <div className="flex items-center gap-1 justify-self-start">
-        <div className="size-7 bg-slate-400"></div>
-        <div className="h-3 w-[10ch] bg-slate-300"></div>
+        <div className="size-10 bg-slate-400"></div>
+        <div className="h-3 w-[100px] bg-slate-300"></div>
       </div>
-      <div className="h-8 w-[7ch] justify-self-end bg-slate-300"></div>
+      <div className="h-8 w-[8ch] justify-self-end bg-slate-300"></div>
     </div>
   );
 }