fix: improve mobile layout and fix news layout (#216)

Author: ivan-dalmet

src/components/BackButton/index.tsx

@@ -2,23 +2,37 @@ import { Button } from "@/components/ui/button";
 import type { ReactNode } from "react";
 import { MdArrowBack } from "react-icons/md";
 
-export const BackButton = (props: { href: string; children?: ReactNode }) => {
+export const BackButton = (props: {
+  href: string;
+  buttonLabel?: ReactNode;
+  contextLabel?: ReactNode;
+}) => {
   return (
-    <Button asChild variant="secondary-dark" size="xs">
-      <a
-        href={props.href}
-        onClick={(e) => {
-          if (
-            window.history.length > 1 &&
-            document.referrer.indexOf(window.location.host) !== -1
-          ) {
-            e.preventDefault();
-            window.history.back();
-          }
-        }}
-      >
-        <MdArrowBack className="mr-2" /> {props.children ?? "Back"}
-      </a>
-    </Button>
+    <div className="flex items-center gap-4">
+      <Button asChild variant="secondary-dark" size="xs">
+        <a
+          href={props.href}
+          onClick={(e) => {
+            if (
+              window.history.length > 1 &&
+              document.referrer.indexOf(window.location.host) !== -1
+            ) {
+              e.preventDefault();
+              window.history.back();
+            }
+          }}
+        >
+          <MdArrowBack className="mr-2" /> {props.buttonLabel ?? "Back"}
+        </a>
+      </Button>
+      {!!props.contextLabel && (
+        <a
+          href={props.href}
+          className="text-xs font-medium uppercase tracking-widest opacity-60 transition hover:opacity-100"
+        >
+          {props.contextLabel}
+        </a>
+      )}
+    </div>
   );
 };

src/components/MainPageTitle/index.astro

@@ -1,5 +1,4 @@
 ---
-import { Logo } from "@/components/Logo";
 import ImageBackgroundHero from "@/components/ImageBackgroundHero/index.astro";
 import type { ReactNode } from "react";
 import defaultImage from "@/assets/images/events.jpeg";
@@ -20,9 +19,8 @@ const { title, subtitle, imageSrc } = Astro.props;
 />
 
 <div
-  class="flex w-full flex-col items-center gap-12 pb-12 pt-20 md:min-h-[35svh] md:justify-center"
+  class="flex w-full flex-col items-center gap-12 py-12 md:min-h-[35svh] md:justify-center"
 >
-  <a href="/" class="md:hidden"><Logo className="w-48" /></a>
   <div class="flex flex-col items-center gap-2">
     <h1
       class="text-balance text-center font-heading text-3xl font-medium uppercase tracking-wider max-md:flex-1 md:text-5xl"

src/layouts/MainLayout.astro

@@ -4,12 +4,16 @@ import MainNavMobile from "@/components/MainNavMobile/MainNavMobile.astro";
 import RootLayout from "@/layouts/RootLayout.astro";
 
 import Footer from "@/components/Footer/index.astro";
+import { Logo } from "@/components/Logo";
 ---
 
 <RootLayout>
   <slot name="seo" slot="seo" />
   <slot name="ld+json" slot="ld+json" />
   <MainNavDesktop />
+  <div class="flex w-full items-center justify-center pb-4 pt-16 md:hidden">
+    <a href="/"><Logo className="w-48" /></a>
+  </div>
   <div class="flex flex-1 flex-col"><slot /></div>
   <Footer />
   <MainNavMobile />

src/pages/index.astro

@@ -8,7 +8,6 @@ import {
   getUpcomingMajorEvent,
 } from "@/lib/events";
 import { getPodcastsEpisodesCollection } from "@/lib/podcasts";
-import { Logo } from "@/components/Logo";
 import { Image } from "astro:assets";
 import defaultImage from "@/assets/images/events.jpeg";
 import aboutBackground from "@/assets/images/about.jpg";
@@ -64,9 +63,6 @@ const afterMovie = (await getEntry("events", "2024-france-rouen"))?.data
     blur
   />
   <div class="mx-auto w-full max-w-screen-xl px-4">
-    <div class="flex w-full items-center justify-center pb-4 pt-20 md:hidden">
-      <Logo className="w-48" />
-    </div>
     <div
       class="relative flex w-full flex-col items-center gap-8 py-16 sm:flex-row sm:py-[12vh] md:px-8 xl:gap-12"
     >

src/pages/news/article/[id]/index.astro

@@ -51,14 +51,21 @@ const ogImage = new URL(
     className="h-[80vh] opacity-80"
     blur
   />
+  <div
+    class={cn(
+      "mx-auto w-full max-w-screen-md px-8 md:px-12 py-6",
+      article.data.featuredImage &&
+        "max-w-screen-lg px-4 pb-4 sm:px-8 md:px-6 md:py-4",
+    )}
+  >
+    <BackButton client:load href="/news" contextLabel="Fork It! News" />
+  </div>
+
   {
     !!article.data.featuredImage && (
-      <div class="relative mx-auto mt-2 w-full max-w-screen-lg px-2 lg:mt-10 lg:px-6">
-        <div class="absolute left-8 top-8 z-10 lg:left-14">
-          <BackButton client:visible href="/news" />
-        </div>
+      <div class="relative mx-auto w-full max-w-screen-lg px-2 lg:px-6">
         <div
-          class="relative flex-[10] rounded-lg bg-black transition duration-500 group-hover:scale-105"
+          class="relative flex-1 rounded-lg bg-black transition duration-500"
           style={{
             maskImage: "linear-gradient(180deg, black 20%, transparent 100%)",
           }}
@@ -77,20 +84,13 @@ const ogImage = new URL(
   }
   <div
     class={cn(
-      "mx-auto w-full flex-1 max-w-screen-md flex flex-col gap-12 pb-40 relative z-10 pt-24 px-8 md:px-12",
-      !!article.data.featuredImage && "-mt-36 md:-mt-96",
+      "mx-auto w-full flex-1 max-w-screen-md flex flex-col gap-8 pt-4 pb-40 relative z-10 px-8 md:px-12",
+      !!article.data.featuredImage && "-mt-24 sm:-mt-56 md:-mt-72",
     )}
   >
     <div class="flex flex-col gap-4">
-      {
-        !article.data.featuredImage && (
-          <div class="pb-8">
-            <BackButton client:visible href="/news" />
-          </div>
-        )
-      }
       <h1
-        class="text-balance font-heading text-2xl font-medium uppercase tracking-wider md:text-4xl/tight"
+        class="text-balance font-heading text-2xl font-medium tracking-wider md:text-4xl/tight"
       >
         {article.data.title}
       </h1>
@@ -104,7 +104,7 @@ const ogImage = new URL(
         </div>
 
         {
-          authors ? (
+          authors.length ? (
             <div class="flex flex-wrap gap-x-5 gap-y-3">
               {authors.map((author) => (
                 <a

src/pages/podcasts/[id]/episodes/[episode]/index.astro

@@ -107,8 +107,8 @@ const ogImage = new URL(
   />
 
   <ImageBackgroundHero src={bg} alt="" className="h-[80vh] opacity-80" />
-  <div class="mx-auto w-full max-w-screen-lg px-4 py-8">
-    <BackButton client:load href="/podcasts" />
+  <div class="mx-auto w-full max-w-screen-lg px-4 pb-4 pt-8">
+    <BackButton client:load href="/podcasts" contextLabel="Fork It! Podcast" />
   </div>
 
   <div class="mx-auto w-full max-w-screen-lg p-4 md:py-8">