Merge pull request #23 from ifspcbt-devspace/develop

style: footer, event view

package.json

@@ -12,6 +12,7 @@
     "@heroicons/react": "^2.1.3",
     "@internationalized/date": "^3.5.4",
     "@nextui-org/react": "^2.4.8",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@react-aria/i18n": "^3.11.1",
     "@react-input/mask": "^1.2.5",
     "framer-motion": "^11.3.2",

src/components/DarkPageHeader.tsx

@@ -11,11 +11,11 @@ export default function DarkPageHeader({title, imgUrl, subtitle, onError}: {
     <div className={"black-gradient grid grid-cols-10 w-full pt-24 pb-8 px-4 xl:px-0"}>
       <div className={"col-start-1 col-span-10 xl:col-start-3 xl:col-span-6"}>
         <div className="event-page-grid">
-          <div className="row-start-1 col-start-1 col-span-2 md:col-span-1 font-semibold relative">
+          <div className="row-start-1 col-start-1 col-span-2 xl:col-span-1 font-semibold relative">
             <h1 className={"mb-4 text-xl sm:text-4xl md:text-5xl font-semibold"}>{title}</h1>
             <p className="text-lg">{subtitle}</p>
           </div>
-          <div className="hidden col-span-1 row-start-1 col-start-2 md:block event-header-block z-10">
+          <div className="hidden col-span-1 row-start-1 col-start-2 xl:block event-header-block z-10">
             <Image src={imgUrl} onError={onError} alt={"Event thumbnail"} width={650} height={100}
                    className="event-cover"/>
           </div>

src/components/Footer.tsx

@@ -6,20 +6,20 @@ import "./footer.css"
 const Footer = () => {
   return (
     <footer className="w-full grid grid-cols-10 grid-rows-2 bg-transparent text-black py-16 gap-4 px-4 xl:px-0">
-      <div className="row-start-1 col-start-1 col-span-10 xl:row-span-2 xl:col-start-3 xl:col-span-3 flex flex-col justify-start">
+      <div className="row-start-1 col-start-1 col-span-10 xl:row-span-2 xl:col-start-3 xl:col-span-3 flex flex-col justify-start items-center xl:items-start">
         <Link className={`mb-5`} href={`/`}>
           <Image src={`/images/logo_recortada.png`} className={`overflow-clip bg-clip-content`} height={100} width={204}
                  alt={`logo_recortada.png`}/>
         </Link>
-        <p className={`opacity-75 text-small mb-5`}>Feito pelo time <Link className={`text-[#626a72]`} target={`_blank`}
+        <p className={`opacity-75 text-small mb-5 block`}>Feito pelo time <Link className={`text-[#626a72]`} target={`_blank`}
                                                                           href={`https://github.com/ifspcbt`}>IFSPCBT
           Informática</Link>.</p>
-        <p className="opacity-75 text-small">
+        <p className="opacity-75 text-small block">
           © 2024 IFSP Eventos. Todos os direitos reservados.
         </p>
       </div>
 
-      <div className="row-start-2 col-start-1 col-span-5 xl:row-start-1 xl:row-span-2 xl:col-start-7 xl:col-span-1 flex flex-col justify-start">
+      <div className="row-start-2 col-start-1 col-span-5 md:col-start-3 md:col-span-4 xl:row-start-1 xl:row-span-2 xl:col-start-6 xl:col-span-2 flex flex-col justify-start">
         <h5 className="footer-header">GERAL</h5>
         <Link
           href="/"
@@ -57,7 +57,7 @@ const Footer = () => {
         </Link>
       </div>
 
-      <div className="row-start-2 col-start-6 col-span-5 xl:row-start-1 xl:row-span-2 xl:col-start-8 xl:col-span-1 flex flex-col justify-start">
+      <div className="row-start-2 col-start-6 col-span-5 md:col-start-7 md:col-span-4 xl:row-start-1 xl:row-span-2 xl:col-start-8 xl:col-span-1 flex flex-col justify-start">
         <h5 className="footer-header">gerenciamento</h5>
         <Link
           href="/auth/log-in"

src/components/events/EventCard.tsx

@@ -34,13 +34,13 @@ export default function ({
           className="overflow-clip box-content object-cover align-middle max-w-full w-full h-full inline-block"
         />
       </div>
-      <div className={"text-sm opacity-75 mb-1.5"}>Por {event.owner}</div>
+      <div className={"text-sm opacity-75 mb-1.5"}>Por {event.owner + " - " + event.date.toLocaleString([], {
+        day: "2-digit",
+        month: "2-digit"
+      })}</div>
       <div className={`text-black text-left max-w-[450px]`}>
         <span
-          className={"text-black mb-3 text-2xl block font-semibold"}>{event.name + " - " + event.date.toLocaleString([], {
-          day: "2-digit",
-          month: "2-digit"
-        })}</span>
+          className={"text-black mb-3 text-2xl block font-semibold"}>{event.name}</span>
         <p className={"text-sm opacity-75 line-clamp-5"}>{event.description}</p>
       </div>
     </Link>

src/components/events/Events.tsx

@@ -34,7 +34,7 @@ const Events = ({max, search, all = false}: { max?: number, search?: string, all
       {!all && !search && (
         <div className={`col-start-1 col-span-10 xl:col-start-3 xl:col-span-6 flex items-start justify-between mb-6`}>
           <span className={`text-xl md:text-2xl leading-[1.4em] font-semibold block`}>Eventos</span>
-          <Link href={`#`}
+          <Link href={`/events`}
                 className={`text-sm md:text-lg hover:text-[#626a72] hover:bg-[#e7ecf0] bg-[#f5f6f7] text-[#626a72] shadow-inner inset-1 px-6 py-2 font-medium text-center rounded-lg duration-200 cursor-pointer inline-block`}>Veja
             todos eventos</Link>
         </div>

src/components/events/single/EventView.tsx

@@ -79,14 +79,14 @@ export function EventView({params}: { params: { id: string } }) {
 
       </div>
 
-      <DarkPageHeader title={`${event?.name} - ${event?.init_date.toLocaleString([], {dateStyle: "short"})}`}
+      <DarkPageHeader title={`${event?.name}`}
                       imgUrl={imgUrl}
                       onError={() => setImgUrl("/images/default-event-thumb.svg")}
-                      subtitle={`Por IFSP Cubatão`}/>
+                      subtitle={`Por IFSP Cubatão - ${event?.init_date.toLocaleString([], {dateStyle: "short"})}`}/>
       <div className="py-10 grid grid-cols-10 w-full px-4 xl:px-0">
         <div className={"col-start-1 col-span-10 xl:col-start-3 xl:col-span-6"}>
-          <div className="md:grid grid-cols-[1fr_400px] grid-rows-auto grid-flow-col gap-8">
-            <div className="row-start-1 col-start-1 col-span-2 md:col-span-1 font-semibold relative">
+          <div className="xl:grid grid-cols-[1fr_400px] grid-rows-auto grid-flow-col gap-8">
+            <div className="row-start-1 col-start-1 col-span-2 xl:col-span-1 font-semibold relative">
               <p className="text-[12px] md:text-lg mb-8 block">{event?.description}</p>
               <Link href={"#"} onClick={handleSubscription}>
                 <div

src/components/footer.css

@@ -16,9 +16,10 @@
 }
 
 .footer-link {
-  @apply text-[12px] sm:text-sm;
+  @apply text-[12px] md:text-[13px];
   color: var(--grey);
   cursor: pointer;
+  width: fit-content;
   margin-bottom: 0;
   padding-top: 5px;
   padding-bottom: 5px;