Fix footer alignment in search page

iotaledger · May 23, 2024 · b4545ea · b4545ea
1 parent b52cbd5
commit b4545ea
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 17 deletions.
diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx
@@ -1,22 +1,20 @@
-/**
- * SWIZZLED VERSION: 2.0.0-rc.1
- * REASONS:
- *  - The socials bar needed full width, so needed to be placed outside the default container.
- */
-
 import React from 'react';
 import Footer from '@theme-original/Footer';
-import type FooterType from '@theme/Footer';
-import type { WrapperProps } from '@docusaurus/types';
 import Social from '@site/src/components/Social';
 
-type Props = WrapperProps<typeof FooterType>;
+type FooterProps = {
+  footerStyleProps?: React.CSSProperties;
+};
 
-export default function FooterWrapper(props: Props): JSX.Element {
+const FooterWrapper = ({ footerStyleProps }: FooterProps) => {
   return (
-    <>
-      <Footer {...props} />
-      <Social />
-    </>
+    <div>
+      <div style={footerStyleProps}>
+        <Footer />
+        <Social />
+      </div>
+    </div>
   );
-}
+};
+
+export default FooterWrapper;
diff --git a/src/theme/Layout/Provider/index.js b/src/theme/Layout/Provider/index.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { composeProviders } from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+export default function LayoutProvider({ children }) {
+  return <Provider>{children}</Provider>;
+}
diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import { useKeyboardNavigation } from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import styles from './styles.module.css';
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    footerStyleProps,
+    title,
+    description,
+  } = props;
+  useKeyboardNavigation();
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}
+      >
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer footerStyleProps={footerStyleProps} />}
+    </LayoutProvider>
+  );
+}
diff --git a/src/theme/Layout/styles.module.css b/src/theme/Layout/styles.module.css
@@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/theme/SearchPage/index.js b/src/theme/SearchPage/index.js
@@ -300,7 +300,9 @@ function SearchPageContent() {
     makeSearch(searchResultState.lastPage);
   }, [makeSearch, searchResultState.lastPage]);
   return (
-    <Layout>
+    <Layout
+      footerStyleProps={{ position: 'absolute', width: '100%', bottom: '0%' }}
+    >
       <Head>
         <title>{useTitleFormatter(getTitle())}</title>
         {/*
@@ -450,7 +452,11 @@ function SearchPageContent() {
         ) : (
           [
             searchQuery && !searchResultState.loading && (
-              <p key='no-results'>
+              <p
+                key='no-results'
+                className={clsx(styles.searchResults)}
+                style={{ marginBottom: '45%' }}
+              >
                 <Translate
                   id='theme.SearchPage.noResultsText'
                   description='The paragraph for empty search result'