Commit 3eba0693 authored by Panagiotis Chnarakis's avatar Panagiotis Chnarakis
Browse files

Footer component creation

parent 9394f4c7

portal-gui/src/app/components/Footer/Footer.tsx

0 → 100644
+39 −0
Original line number Diff line number Diff line 
import Link from "next/link";

import React from "react";

import styles from "./footer.module.scss";



const Footer = () => {

  return (

    <footer className={styles.container}>

      <div className={styles.footerBottomBox}>

        <div className={styles.siteInfoBox}>

          <p>

            All rights reserved &nbsp;

            <Link href={"https://www.etsi.org/ "} target="_blank">

              ETSI &nbsp;

            </Link>

            <span> &#169;{` ${new Date().getFullYear()}`}</span>

          </p>

        </div>

        <div className={styles.infoBox}>

          <div>

            ETSI Software Development Group OpenOP (SDG OOP) delivers an

            Open-Source Operator Platform enabling operator network and testbed

            federation, along with standardized capability exposure APIs.{" "}

            <b>

              <Link

                href={"https://www.apache.org/licenses/LICENSE-2.0.txt"}

                target="_blank"

              >

                Apache License 2.0{" "}

              </Link>

            </b>

            .

          </div>

        </div>

      </div>

    </footer>

  );

};



export default Footer;

portal-gui/src/app/components/Footer/footer.module.scss

0 → 100644
+88 −0
Original line number Diff line number Diff line 
.container {

    bottom: 0;

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

    z-index: 3;

    margin-top: 2rem;

}



.footerBottomBox {

    display: flex;

    justify-content: space-between;

    height: auto;

    align-items: center;

    padding: 1rem 6rem;

    width: 100%;

    background: var(--main-gradient);

        border-radius: 12px 12px 0 0;



    color: var(--dark-grey);

    line-height: 20px;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);



    .siteInfoBox {

        width: 50%;

    }



    p {

        display: flex;

        flex-wrap: wrap;

        justify-content: flex-start;

    }



    a {

        text-decoration: none;

        color: var(--text-color);

    }



    a:hover {

        font-weight: 600;

        color: #fff;

        text-decoration: none;

    }

}



.infoBox {

    display: flex;

    width: 40%;

    align-items: center;

    gap: 0.5rem;



    div {



        font-size: 12px;

        line-height: 16px;

    }



    svg {

        fill: var(--text-color);

    }

}



@media screen and (width<=1024px) {

    .footerBottomBox {

        flex-direction: column;

        gap: 1rem;



    }



    .infoBox {

        width: 100%;



        div {

            align-items: center;

            text-align: center;

        }

    }



    .siteInfoBox {

        width: 100% !important;

        display: flex;

        justify-content: center;

    }

}

portal-gui/src/app/components/TopBar/topbar.module.scss

+3 −7
Original line number Diff line number Diff line
@@ -8,7 +8,7 @@ 
    z-index: 3;

    color: var(--blue-text);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);



    border-radius: 0 0 12px 12px;



    button {

        height: 100%;
@@ -89,6 +89,7 @@ 
        :global(.rs-dropdown) {

            background: var(--background-color) !important;

            box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);

            border-radius: 10px;



            &:hover {

                background: var(--rs-navs-bg-hover) !important;
@@ -101,11 +102,6 @@ 


            }



            // a:hover{

            //     background: none !important;

            // }

            // padding: 0.5rem 0.7rem;

            border-radius: 10px;



        }

portal-gui/src/app/layout.tsx

+2 −0
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ import "./styles/globals.css"; 
import TopBar from "./components/TopBar/TopBar";

import "rsuite/dist/rsuite.min.css";

import { Manrope, Montserrat } from "next/font/google";

import Footer from "./components/Footer/Footer";



const manrope = Manrope({

  subsets: ["latin"],
@@ -30,6 +31,7 @@ export default function RootLayout({ 
      <div className="main">

              <TopBar />

        {children}

        <Footer/>

        </div>

      </body>

    </html>

portal-gui/src/app/styles/globals.css

+6 −14
Original line number Diff line number Diff line
@@ -9,11 +9,11 @@ 
  --rs-menuitem-active-bg: #f159222e !important;

  --rs-menuitem-active-text: #004a8d !important;

  --rs-ripple-bg: #f159222e  !important;

  --text-color: #353b47;

  /* --white-color: #f9f9f9 !important; */

  /* --rs-text-secondary: #40495d !important;

  --blue-odeon: #416565;

  --bg-color: #000011;

  --text-color: #40495d;

  --white-color: #f9f9f9 !important;

  --bg-color: #ffffff !important;

  --rs-toggle-checked-bg: #a2bd3f !important;

  --rs-toggle-bg: #a2bd3f !important;
@@ -275,21 +275,13 @@ select:-webkit-autofill:focus { 
  margin-left: 0 !important;

  padding-left: 0 !important;

}





/* ------------------------- RESPONSIVE -------------------------*/

@media screen and (max-width: 769px) {

  body {

    padding-bottom: 10rem;

  }

  .main {

    justify-content: flex-start;

  }

 

}



@media screen and (max-width: 425px) {

  body {

    padding-bottom: 10rem;

  }

  body > div.rs-anim-fade.rs-anim-in.rs-popover.placement-bottom-end {

    left: 0 !important;

  }

  

}