added modal

evilmonkey19 · Apr 1, 2024 · 2fc9b01 · 2fc9b01
1 parent 236bc9d
commit 2fc9b01
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 89 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
diff --git a/components/Card.tsx b/components/Card.tsx
diff --git a/components/Events.tsx b/components/Events.tsx
@@ -1,11 +1,11 @@
-import Card from './Card.tsx';
+import Card from '../islands/Card.tsx';
 
 const Events = () => (
   <section className="md:grid grid-cols-7 bg-gray-200 py-16" id="events">
     <div className="col-span-1"></div>
     <div className="col-span-5 flex flex-col gap-4">
       <h1 className="text-4xl">Events</h1>
-      <div className="grid grid-cols-3 gap-8">
+      <div className="flex flex-col md:grid grid-cols-3 gap-8">
         <Card 
           type="event"
           image_path="https://picsum.photos/560"

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,39 +1,60 @@
+import IconBrandGithub from "https://deno.land/x/[email protected]/tsx/brand-github.tsx"
+import IconBrandInstagram from "https://deno.land/x/[email protected]/tsx/brand-instagram.tsx"
+import IconPhone from "https://deno.land/x/[email protected]/tsx/phone.tsx"
+import IconMail from "https://deno.land/x/[email protected]/tsx/mail.tsx"
+
 const Footer = () => (
-  <footer className="flex flex-col gap-8 bg-black py-8 text-gray-50 font-light">
-    <div className="md:grid grid-cols-7">
-      <div className="col-span-1"></div>
-      <div className="col-span-1">
+  <footer class="flex flex-col gap-8 bg-black py-8 text-gray-50 font-light">
+    <div class="md:grid grid-cols-7">
+      <div class="col-span-1"></div>
+      <div class="col-span-1">
         <img src="/logo.png" alt="ET logo" width="200px" />
       </div>
-      <div className="col-span-1"></div>
-      <div className="col-span-3 flex flex-row gap-8 justify-end">
-        <div className="flex flex-col gap-8">
+      <div class="col-span-1"></div>
+      <div class="col-span-3 flex flex-row gap-8 justify-end">
+        <div class="flex flex-col gap-8">
           <p>English theater improv club</p>
-          <div className="flex flex-col gap-2">
-            <a href="#events" title="Jump to events" className="hover:text-gray-500">Events</a>
-            <a href="#productions" title="Jump to productions" className="hover:text-gray-500">Productions</a>
+          <div class="flex flex-col gap-2">
+            <a href="#events" title="Jump to events" class="hover:text-gray-500">Events</a>
+            <a href="#productions" title="Jump to productions" class="hover:text-gray-500">Productions</a>
           </div>
         </div>
-        <div className="flex flex-col gap-8">
+        <div class="flex flex-col gap-8">
           <p>Contact</p>
-          <div className="flex flex-col">
-            <a href="mailto:[email protected]" className="hover:text-gray-500">[email protected]</a>
-            <a href="tel:+1234567890" className="hover:text-gray-500">+1234567890</a>
+          <div class="flex flex-col">
+            <IconMail class="w-6 h-6" />
+            <a href="mailto:[email protected]" class="hover:text-gray-500">[email protected]</a>
+            <IconPhone class="w-6 h-6" />
+            <a href="tel:+1234567890" class="hover:text-gray-500">+1234567890</a>
           </div>
           <div>
-            <p>Instagram:</p>
-            <a href="http://instagram.com" className="hover:text-gray-500">@account</a>
+            <div class="flex flex-row">
+              <IconBrandInstagram class="w-6 h-6" />
+              <p>Instagram:</p>
+            </div>
+            <a href="http://instagram.com" class="hover:text-gray-500">@account</a>
           </div>
         </div>
       </div>
-      <div className="col-span-1"></div>
+      <div class="col-span-1"></div>
     </div>
-    <div className="mx-16 h-[1px] bg-[#303C64]"></div>
-    <div className="mx-16 flex justify-end">
+    <div class="mx-16 h-[1px] bg-[#303C64]"></div>
+    <div class="mx-16 flex justify-between items-center">
+      <div class="flex flex-row items-center gap-4">
+        <a href="https://fresh.deno.dev">
+          <img
+            width="197"
+            height="37"
+            src="https://fresh.deno.dev/fresh-badge-dark.svg"
+            alt="Made with Fresh"
+          />
+        </a>
+        <a href="https://github.com/evilmonkey19/et_theater" class="px-3 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 flex gap-2"><IconBrandGithub class="w-6 h-6" />Go to the repo</a>
+      </div>
       <p>Made with ❤️ by&nbsp;
-        <a href="https://www.linkedin.com/in/yan-zhang-899960244/" className="hover:text-gray-500">Yan Zhang (Designer)</a>
+        <a href="https://www.linkedin.com/in/yan-zhang-899960244/" class="hover:text-gray-500">Yan Zhang (Designer)</a>
         &nbsp;&&nbsp;
-        <a href="https://perpinya.eu/en" className="hover:text-gray-500">Enric Perpinyà (Programmer)</a> 
+        <a href="https://perpinya.eu/en" class="hover:text-gray-500">Enric Perpinyà (Programmer)</a> 
       </p>
     </div>
   </footer>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,10 +1,10 @@
 export default function Header() {
   return (
-    <header className="fixed w-full px-16 py-1 flex justify-between items-center bg-gray-50 z-50">
+    <header className="fixed w-full px-4 md:px-16 py-1 flex flex-row justify-between items-center bg-gray-50 z-50">
       <a className="text-2xl font-bold" href="/" title="Jump to the beginning">
         <img src="/logo.png" alt="Logo from ET English Theater" width="40px" height="40px" />
       </a>
-      <div className="flex gap-16 text-xl text-black-950 font-light">
+      <div className="flex gap-4 md:gap-16 text-xl text-black-950 font-light">
         <a href="#events" title="Jump to events">Events</a>
         <a href="#productions" title="Jump to productions">Productions</a>
       </div>

diff --git a/components/Productions.tsx b/components/Productions.tsx
@@ -1,11 +1,11 @@
-import Card from './Card.tsx';
+import Card from '../islands/Card.tsx';
 
 const Productions = () => (
   <section className="md:grid grid-cols-7 bg-black py-16 text-gray-50" id="productions">
     <div className="col-span-1"></div>
     <div className="col-span-5 flex flex-col gap-4">
       <h1 className="text-4xl">Productions</h1>
-      <div className="grid grid-cols-3 gap-8">
+      <div className="flex flex-col md:grid grid-cols-3 gap-8">
         <Card
           type="production"
           image_path="https://picsum.photos/700"
@@ -41,13 +41,6 @@ const Productions = () => (
           date="2023-05-01"
           description="This is a description of the production."
         />
-        <Card
-          type="production"
-          image_path="https://picsum.photos/700"
-          title="Production Ramon"
-          date="2023-05-01"
-          description="This is a description of the production."
-        />
       </div>
     </div>
     <div className="col-span-1"></div>

diff --git a/components/Sessions.tsx b/components/Sessions.tsx
@@ -2,7 +2,7 @@ const Sessions = () => (
   <div className="py-32 bg-fill bg-no-repeat md:grid grid-cols-7" style="background-image: url('actors.webp')">
     <div className="col-span-1"></div>
     <div className="col-span-5 flex flex-col justify-center items-center gap-8 text-gray-50">
-      <p className="text-8xl text-center text-balance">Improv Sessions every Wednesday!</p>
+      <p className="text-6xl md:text-8xl text-center text-balance">Improv Sessions every Wednesday!</p>
       <p className="text-center text-2xl">It's open to everyone, come join us in Nymble, Drottning Kristinas väg 15-19, 3rd floor!</p>
       <a className="bg-[#ea7af4] py-4 px-8 text-4xl hover:bg-[#ffd461]" href="/">Sign up!</a>
     </div>

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -5,6 +5,7 @@
 import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
 import * as $index from "./routes/index.tsx";
+import * as $Card from "./islands/Card.tsx";
 import * as $Carousel from "./islands/Carousel.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
@@ -15,6 +16,7 @@ const manifest = {
     "./routes/index.tsx": $index,
   },
   islands: {
+    "./islands/Card.tsx": $Card,
     "./islands/Carousel.tsx": $Carousel,
   },
   baseUrl: import.meta.url,

diff --git a/islands/Card.tsx b/islands/Card.tsx
@@ -0,0 +1,74 @@
+import { useRef, useEffect } from "preact/hooks";
+
+type CardProps = {
+  type: string;
+  image_path: string;
+  title: string;
+  date: string;
+  description: string;
+};
+
+const Card = (props: CardProps) => {
+  const { type, image_path, title, date, description } = props;
+
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const showButtonRef = useRef<HTMLButtonElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    const showButton = showButtonRef.current;
+    const closeButton = closeButtonRef.current;
+
+    const showModal = () => {
+      dialog?.showModal();
+
+      document.body.style.overflow = 'hidden';
+    }
+    const closeDialog = () => {
+      dialog?.close();
+      document.body.style.overflow = 'auto';
+    }
+
+    showButton?.addEventListener("click", showModal);
+    closeButton?.addEventListener("click", closeDialog);
+
+    return () => {
+      showButtonRef.current?.removeEventListener("click", showModal);
+      closeButtonRef.current?.removeEventListener("click", closeDialog);
+    };
+  }, []);
+
+  const date_class = `text-md rounded-lg ${type === 'event' ? 'text-primary' : 'text-secondary'}`;
+  const details_close_class = `text-xl p-2 border-2 text-center ${type === 'event' 
+    ? 'text-secondary border-secondary hover:bg-secondary hover:text-gray-50' 
+    : 'text-primary border-primary hover:bg-primary hover:text-gray-50'}`;
+
+  return (
+    <div class={`rounded-md p-4 flex flex-col gap-4 max-w-md
+    ${type === 'event' 
+      ? 'bg-gray-50 text-gray-950' 
+      : 'bg-gray-900 text-gray-50'}`}>
+      <img src={image_path} alt={title} class="rounded-lg" />
+      <h1 class="text-2xl">{title}</h1>
+      <div class="flex flex-col gap-2">
+        <p class={date_class}>Date: {date}</p>
+        <p class="text-sm">{description}</p>
+      </div>
+      <button ref={showButtonRef} class={details_close_class}>View details</button>
+      <dialog ref={dialogRef} class="p-4 rounded-lg backdrop-blur-xl backdrop:drop-shadow-xl backdrop:backdrop-blur-xl">
+        <div class="text-light text-lg flex flex-col gap-4 max-w-md">
+          <img src={image_path} alt={title} class="rounded-lg max-w-md"/>
+          <h1 class="text-2xl">{title}</h1>
+          <div class="flex flex-col gap-2">
+            <p class={date_class}>Date: {date}</p>
+            <p class="text-sm">{description}</p>
+          </div>
+          <button autofocus ref={closeButtonRef} class={details_close_class}>Close</button>
+        </div>
+      </dialog>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/routes/_layout.tsx b/routes/_layout.tsx
@@ -5,7 +5,7 @@ import Header from "../components/Header.tsx";
 
 export default function Layout({ Component, state }: PageProps) {
   return (
-    <div className="mx-4 md:mx-0">
+    <div class="">
       <Header></Header>
       <Component {...state} />
       <Footer></Footer>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -5,6 +5,12 @@ export default {
     "{routes,islands,components}/**/*.{ts,tsx}",
   ],
   theme: {
+    extend: {
+      colors: {
+        primary: '#17a398',
+        secondary: '#ea7af4',
+      },
+    },
     fontFamily: {
       rye: ['"Rye"'],
       sans: ['Montserrat', 'sans-serif'],