Merge pull request #235 from datagrove/stickyFooter

Add Sticky footer
datagrove · Jan 23, 2024 · 6b95fae · 6b95fae
2 parents 03c5191 + 1a95677
commit 6b95fae
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 76 deletions.
diff --git a/src/components/common/Footer.astro b/src/components/common/Footer.astro
@@ -27,79 +27,81 @@ export interface Props {
 
 const { socialLinks = [], secondaryLinks = [], links = [], footNote = ''} = Astro.props;
 ---
-<footer class="flex flex-col bg-background2 dark:bg-background2-DM mt-4 py-4 -mx-4">
-  <div class="w-full flex flex-col items-center">
+<footer class="flex flex-col bg-background2 dark:bg-background2-DM mt-4 md:-mx-4 md:p-2 pb-1.5 z-50">
+  <div class="w-full flex flex-col">
       <div class="">
-        <div class="mb-2 text-center text-ptext2 dark:text-text2-DM  md:w-full">
+        <div class="text-center text-ptext2 dark:text-text2-DM">
           <a class="inline-block font-bold text-xl" href={SITE.url}>{SITE?.name}</a>
         </div>
       </div>
 
-      <div class="flex justify-center text-center max-w-screen-sm w-full my-2 md:my-4">
+      <div class="w-full flex-wrap md:flex items-center">
+        <div class="flex w-full justify-center md:justify-start md:w-1/3 text-center max-w-screen-sm">
+            {
+              secondaryLinks.map(({ text, href }) => (
+              <div class="flex text-center items-center justify-center text-ptext2 dark:text-ptext2-DM px-2"> 
+                <div class="flex justify-center items-center">
+                  <a
+                    class="text-muted text-center text-sm text-link2 hover:text-link2Hov dark:text-link2-DM dark:hover:text-link2Hov-DM transition duration-150 ease-in-out"
+                    href={`/${lang}/${href}`}
+                    set:html={text}
+                  />
+                </div>
+              </div> 
+              ))
+            }
+          <!-- </div> -->
           {
-            secondaryLinks.map(({ text, href }) => (
-            <div class="flex text-center items-center justify-center w-1/4 text-ptext2 dark:text-ptext2-DM px-4"> 
-              <div class="flex justify-center items-center">
-                <a
-                  class="text-muted text-center text-sm text-link2 hover:text-link2Hov dark:text-link2-DM dark:hover:text-link2Hov-DM transition duration-150 ease-in-out"
-                  href={`/${lang}/${href}`}
-                  set:html={text}
-                />
+            links.map(({ title, links }) => (
+              <div class="flex justify-center items-center px-2">
+                {links && Array.isArray(links) && links.length > 0 && (
+                  <ul class="text-sm">
+                    {links.map(({ text, href, ariaLabel }) => (
+                      <li class="text-link2 dark:text-link2-DM">
+                        <a
+                          class="text-muted text-link2 hover:text-link2Hov dark:text-link2-DM dark:hover:text-link2Hov-DM transition duration-150 ease-in-out"
+                          href={href}
+                          aria-label={ariaLabel}
+                        >
+                          <Fragment set:html={text} />
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
               </div>
-            </div> 
             ))
           }
-        <!-- </div> -->
-        {
-          links.map(({ title, links }) => (
-            <div class="flex justify-center items-center w-1/4 px-4">
-              {links && Array.isArray(links) && links.length > 0 && (
-                <ul class="text-sm">
-                  {links.map(({ text, href, ariaLabel }) => (
-                    <li class="text-link2 dark:text-link2-DM">
-                      <a
-                        class="text-muted text-link2 hover:text-link2Hov dark:text-link2-DM dark:hover:text-link2Hov-DM transition duration-150 ease-in-out"
-                        href={href}
-                        aria-label={ariaLabel}
-                      >
-                        <Fragment set:html={text} />
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          ))
-        }
-      </div>
-    </div>
+        </div>
 
-    <div class="text-center text-text2 dark:text-text2-DM">
-      {
-        socialLinks?.length ? (
-          <ul class="flex justify-center mb-2">
-            {socialLinks.map(({ ariaLabel, href, text, icon }) => (
-              <li>
-                <a
-                  class="text-muted dark:text-icon2-DM text-icon2 hover:bg-shadow-LM dark:hover:bg-shadow-DM focus:outline-none focus:ring-4 rounded-lg text-sm p-2 inline-flex items-center"
-                  aria-label={ariaLabel}
-                  href={href}
-                  target="_blank"
-                >
-                  {icon && <Icon name={icon} class="w-5 h-5" />}
-                  <Fragment set:html={text}/>
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          ''
-        )
-      }
-
-      <div class="text-sm dark:text-text2-DM text-text2">
-        <Fragment set:html={footNote} />
-      </div>
+        <div class="flex justify-center md:justify-center items-center w-full md:w-1/3 h-full text-center text-text2 dark:text-text2-DM">
+          {
+            socialLinks?.length ? (
+              <ul class="flex justify-center">
+                {socialLinks.map(({ ariaLabel, href, text, icon }) => (
+                  <li>
+                    <a
+                      class="text-muted dark:text-icon2-DM text-icon2 hover:bg-shadow-LM dark:hover:bg-shadow-DM focus:outline-none focus:ring-4 rounded-lg text-sm p-2 inline-flex items-center"
+                      aria-label={ariaLabel}
+                      href={href}
+                      target="_blank"
+                    >
+                      {icon && <Icon name={icon} class="w-5 h-5" />}
+                      <Fragment set:html={text}/>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              ''
+            )
+          }
+        </div>
+      <div>
+    </div>
+    <div class="text-sm dark:text-ptext2-DM text-ptext2 text-center md:w-1/3 md:text-end">
+      <Fragment set:html={footNote} class="text-ptext2 dark:text-ptext2-DM"/>
     </div>
   </div>
+
 </footer>
diff --git a/src/components/posts/SocialMediaShares.tsx b/src/components/posts/SocialMediaShares.tsx
@@ -129,7 +129,7 @@ export const SocialMediaShares: Component<Post> = (props) => {
 
             <div class="flex justify-center">
                 <div id={ 'socialsBtns' + props.id } class="share-btns grid grid-cols-4 md:grid-cols-2 gap-4 auto-rows-min">
-                    <button id="button--x" class="x-share-button socialBtn z-30 flex justify-start items-center rounded font-bold text-icon1 dark:text-icon1-DM" title="Share to X - LANG!" onclick={ (e) => xShare(e) }>
+                    <button id="button--x" class="x-share-button socialBtn z-20 flex justify-start items-center rounded font-bold text-icon1 dark:text-icon1-DM" title="Share to X - LANG!" onclick={ (e) => xShare(e) }>
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-x mr-1 text-icon2 dark:text-icon2-DM" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                             <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>

diff --git a/src/components/posts/SocialModal.tsx b/src/components/posts/SocialModal.tsx
@@ -40,7 +40,7 @@ const SocialModal: Component<Post> = function (props) {
   }
 
   return (
-    <div id="social-modal-div" class="relative z-40">
+    <div id="social-modal-div" class="relative z-10">
       <Show
         when={isOpen()}
         fallback={

diff --git a/src/i18n/UI/French.ts b/src/i18n/UI/French.ts
@@ -305,8 +305,8 @@ export const French = {
       { ariaLabel: 'Discord', icon: 'tabler:brand-discord', href: 'https://discord.gg/NpV44vS6bF'},
     ],
     footNote: `
-    <span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover rounded-sm text-text2 dark:text-text2-DM"></span>
-    <span class="text-text2 dark:text-text2-DM">Faite par</span><a class="text-link2 dark:text-link2-DM hover:text-link2Hov dark:hover:text-link2Hov-DM" href="https://datagrove.com/"> Datagrove.</a><span class="text-text2 dark:text-text2-DM"> Tous les droits sont réservés.</span>
+    <span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover rounded-sm text-ptext2 dark:text-ptext2-DM"></span>
+    <span class="text-text2 dark:text-text2-DM">Faite par</span><a class="text-link2 dark:text-link2-DM hover:text-link2Hov dark:hover:text-link2Hov-DM" href="https://datagrove.com/"> Datagrove.</a><span class="text-ptext2 dark:text-ptext2-DM"> Tous les droits sont réservés.</span>
   `,
   },
 

diff --git a/src/i18n/UI/Spanish.ts b/src/i18n/UI/Spanish.ts
@@ -304,7 +304,7 @@ export const Spanish = {
       { ariaLabel: 'Discord', icon: 'tabler:brand-discord', href: 'https://discord.gg/NpV44vS6bF'},
     ],
     footNote: `<span class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm"></span>
-      <span class="text-text2 dark:text-text2-DM">Hecho por </span><a class="text-link2 dark:text-link2-DM hover:text-link2Hov dark:hover:text-link2Hov-DM" href="https://datagrove.com/"> Datagrove.</a><span class="text-text2 dark:text-text2-DM"> Todos los derechos reservados.</span>`,
+      <span class="text-ptext2 dark:text-ptext2-DM">Hecho por </span><a class="text-link2 dark:text-link2-DM hover:text-link2Hov dark:hover:text-link2Hov-DM" href="https://datagrove.com/"> Datagrove.</a><span class="text-ptext2 dark:text-ptext2-DM"> Todos los derechos reservados.</span>`,
   },
 
   productCategoryInfo: {

diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from '../layouts/BaseLayout.astro';
-// import { headerData, footerData } from '../data';
 import Footer from "../components/common/Footer.astro";
 import Header from "../components/common/Header.astro";
 import { getLangFromUrl, useTranslations } from '../i18n/utils';
@@ -18,14 +17,14 @@ const footerData = values.footerData
 const {pageTitle, pageDescription } = Astro.props
 ---
 <Layout {pageTitle} {pageDescription}>
-  <div class="min-h-screen">
+  <div class="">
     <div class="header">
       <Header {...headerData} />
     </div>
-    <main class="flex justify-center">
+    <main class="flex justify-center min-h-screen">
       <slot />
     </main>
-    <div class="footer sticky top-[100vh]">
+    <div class="footer sticky bottom-0 z-50">
       <Footer {...footerData} />
     </div>
   </div>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,8 +3,6 @@ import Layout from "@layouts/PageLayout.astro";
 import { AuthMode } from "@components/common/AuthMode";
 import { SignUpBtn } from "@components/common/SignUpButton";
 import { getLangFromUrl, useTranslations } from "@i18n/utils";
-import cleaner from "@assets/categoryIcons/cleaner-man.svg";
-import grid from "@assets/grid.svg";
 import services from "@assets/services.png";
 import servicesDM from "@assets/servicesDM.png";
 
@@ -14,7 +12,7 @@ const t = useTranslations(lang);
 
 <Layout pageTitle={t("pageTitles.home")} pageDescription={t("pageDescriptions.home")}>
   <!-- <h1>{t('pageTitles.home')}</h1> -->
-  <div class="flex flex-col items-center px-2 md:px-0 md:flex-wrap lg:flex-row">
+  <div class="flex flex-col items-start px-2 md:px-0 md:flex-wrap lg:flex-row h-screen">
     <div class="mt-6 mb-6 md:mb-0 md:w-2/3 lg:w-1/2">
       <div>
         <h1 class="text-3xl font-bold text-htext1 dark:text-htext1-DM">{t(`homePageText.headline`)}</h1>
@@ -74,7 +72,7 @@ const t = useTranslations(lang);
     </div>
 
 
-    <div class="hidden md:flex md:items-center md:justify-center md:w-full lg:w-1/2 md:mt-8 lg:mt-8 md:pl-2 md:min-w-[400px]">
+    <div class="hidden md:flex md:items-start md:justify-center md:w-full lg:w-1/2 md:mt-8 lg:mt-8 md:pl-2 md:min-w-[400px]">
       { }
 
       <div class="inline dark:hidden">