CSS fixes in the frontend

2024-05-05 19:43:39 +03:00 · 2024-05-05 19:43:39 +03:00 · 4aee08d1bd
commit 4aee08d1bd
parent 20e3292c1b
9 changed files with 39 additions and 24 deletions
--- a/frontend/public/data/shared/theme-config.json
+++ b/frontend/public/data/shared/theme-config.json
@ -1,4 +1,5 @@
 {
+    "defaultTheme": "darkTheme",
    "darkTheme": {
        "theme": "Dark Mode",
        "background": "bg-dark",
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@ -37,8 +37,10 @@ function App() {
    DataService.getData('shared/user-data').then( response =>
    setUserData(response.data)
    )
-    DataService.getData('shared/theme-config').then( response =>
-    setThemeConfig(response.data)
+    DataService.getData('shared/theme-config').then( response =>{
+        setThemeConfig(response.data)
+        setGlobalTheme(response.data.defaultTheme)
+      }
    )
  },[])

@ -46,18 +48,21 @@ function App() {
    setGlobalTheme(theme);
  }

+  if (themeConfig)
  return (
-    <div>
+    <div className="app-container">
      <Router>
-        <Header ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
+        <Header className="header" ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
        <Notification isOpen={isOpen} notificationMessage={notificationMessage} />
-        <Routes>
-          <Route path="/" element={<Home GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />} />
-          <Route path="/categories" element={<CategoryList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/categories/:categoryID" element={<BlogList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-          <Route path="/blog/:blogID" element={<Blog notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
-        </Routes>
-        <Footer ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
+        <div className={`p-0 ${themeConfig[globalTheme].background}`}>
+          <Routes>
+            <Route path="/" element={<Home GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />} />
+            <Route path="/categories" element={<CategoryList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+            <Route path="/categories/:categoryID" element={<BlogList notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+            <Route path="/blog/:blogID" element={<Blog notificationToggler={notificationToggler} GlobalTheme={globalTheme} ThemeConfig={themeConfig} />} />
+          </Routes>
+        </div>
+        <Footer className="footer" ThemeSwitcher={themeSwitcher} GlobalTheme={globalTheme} ThemeConfig={themeConfig} UserData={userData} />
      </Router>
    </div>
  );
--- a/frontend/src/components/blog-list.jsx
+++ b/frontend/src/components/blog-list.jsx
@ -45,10 +45,10 @@ function BlogList(props) {

  if (GlobalTheme && ThemeConfig) {
    return (
-      <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
+      <Container fluid className={` mb-2 p-0 ${ThemeConfig[GlobalTheme].background}`}>
      <CategoryBar currentPage={categoryID} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
        <Row className="justify-content-center align-items-center">
-          <Col className="d-flex flex-column align-items-center min-vh-82">
+          <Col className="d-flex flex-column align-items-center">
            <div className="w-100">
            <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{"width": "100%"}}>
              <CardBody>
--- a/frontend/src/components/blog.jsx
+++ b/frontend/src/components/blog.jsx
@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import DataService from '../services/data-service';
 import MediaService from '../services/media-service'
 import CategoryBar from './shared/category-bar';
+
 import {
  Container,Row, Col,Spinner, UncontrolledCollapse, Button, ButtonGroup, Card, CardBody
 } from 'reactstrap';
@ -24,7 +25,7 @@ function Blog(props) {

  if (GlobalTheme && ThemeConfig) {
  return (
-    <Container fluid className={`min-vh-82 ${ThemeConfig[GlobalTheme].background}`}>
+    <Container fluid className={`${ThemeConfig[GlobalTheme].background}`}>
    <CategoryBar currentPage={blogData.parentCategory} GlobalTheme={GlobalTheme} ThemeConfig={ThemeConfig}/>
      <Row className="mb-4">
        <Col className="p-0">
@ -37,7 +38,7 @@ function Blog(props) {
      </Row>
      <Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
        <Col xs="3" className="d-none d-md-block"></Col>
-        <Col xs={`${console.log(window.screen.width) >= 765 ? '6':''}`}>
+        <Col xs={`${window.screen.width >= 765 ? '6':''}`}>
          <h1 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.name}</h1>
          <h4 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.description}</h4>
          <div>
@ -113,7 +114,7 @@ function Blog(props) {
      <Row className="mr-2 ml-2 mt-1">
      <Col xs="3" className="d-none d-md-block"></Col>

-      <Col xs={`${console.log(window.screen.width) >= 765 ? '6':''}`} style={{marginBottom: '25px'}}>
+      <Col xs={`${window.screen.width >= 765 ? '6':''}`} style={{marginBottom: '25px'}}>
        <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
        <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
        <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
--- a/frontend/src/components/category-list.jsx
+++ b/frontend/src/components/category-list.jsx
@ -33,9 +33,9 @@ function Blogs(props) {

  if (GlobalTheme && ThemeConfig) {
    return (
-      <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
+      <Container fluid className={`p-0 mb-2 ${ThemeConfig[GlobalTheme].background}`}>
        <Row className="justify-content-center align-items-center">
-          <Col className="d-flex flex-column align-items-center min-vh-82">
+          <Col className="d-flex flex-column align-items-center">
            {/* Top Section - Categories */}
            <div className="w-100">
            <Card className={`my-2 ${ThemeConfig[GlobalTheme].background}`} style={{"width": "100%"}}>
--- a/frontend/src/components/home.jsx
+++ b/frontend/src/components/home.jsx
@ -7,7 +7,7 @@ function HomePage(props) {
  const ThemeConfig = props.ThemeConfig;
  if (GlobalTheme && ThemeConfig) 
  return (
-    <Container fluid className={`p-0 ${ThemeConfig[GlobalTheme].background}`}>
+    <Container fluid className={`p-0 mt-5 ${ThemeConfig[GlobalTheme].background}`}>
      <div className="d-flex flex-column justify-content-center align-items-center min-vh-82">
      {UserData.profilePhoto !== "" ? <img style={{ width: '180px', height: '180px', objectFit: 'cover' }} className="rounded-circle" src={MediaService.getMedia(UserData.profilePhoto)} /> : ""}
        <h3 className={`${ThemeConfig[GlobalTheme].textColor}`}>
@ -16,7 +16,9 @@ function HomePage(props) {
          </center>
        </h3>
        <h5 className={`${ThemeConfig[GlobalTheme].textColor}`}>
-          <div dangerouslySetInnerHTML={{ __html: `${UserData.tagLine}` }} />
+          <>
+          <div dangerouslySetInnerHTML={{ __html: `<span">${UserData.tagLine}</span>` }} />
+          </>
        </h5>
      </div>
    </Container>
--- a/frontend/src/components/shared/footer.jsx
+++ b/frontend/src/components/shared/footer.jsx
@ -15,7 +15,7 @@ const Footer = (props) => {
  const UserData = props.UserData;

  return (
-    <footer className={`footer p-4 text-white ${ThemeConfig ? ThemeConfig[GlobalTheme].footer['background'] : ""}`}>
+    <footer className={`footer p-4 text-white ${ThemeConfig ? ThemeConfig[GlobalTheme].footer['background'] : ""}`} id="site-footer">
      <Container className='p-1'>
        <Row>
          <Col md="12">
--- a/frontend/src/components/shared/navbar.jsx
+++ b/frontend/src/components/shared/navbar.jsx
@ -31,9 +31,13 @@ function Header(props) {
    props.ThemeSwitcher(themeSelected)
  }, [themeSelected])

+  useEffect(() => {
+    setThemeSelected(props.ThemeConfig.defaultTheme)
+  }, [])
+
  if (GlobalTheme && ThemeConfig && UserData)
  return (
-    <header className="header-global">
+    <header className="header-global" id="site-header">
    <Navbar className={`navbar-horizontal ${ThemeConfig[GlobalTheme].navBar['navBarTheme']} ${ThemeConfig[GlobalTheme].navBar['background']}`} 
            expand="lg">
      <Container>
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -4,6 +4,8 @@ a {
    border: none;         /* Removes any borders */
 }

-.min-vh-82{
-    min-height: 82.2vh;
+.app-container {
+  display: grid;
+  grid-template-rows: auto 1fr auto; /* Header size, flexible content, footer size */
+  height: 100vh;
 }