Merge pull request #759 from SE-TINF22B6/homepage

Frontend changes

src/main/java/de/tinf22b6/dhbwhub/controller/PostController.java

@@ -120,5 +120,4 @@ public void delete(@PathVariable Long id) {
         service.delete(id);
     }
 
-
-}
+}

src/main/web/package.json

@@ -66,7 +66,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build --project tsconfig.json",
     "deploy": "npm run build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'",
     "test-all": "react-scripts test --watchAll=false",

src/main/web/react-app-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="react-scripts" />
+declare module 'adblock-detect-react';

src/main/web/src/App.css

@@ -1,5 +1,6 @@
 :root {
   background-color: #151719;
+  color: var(--white);
   font-family: "Source Sans Pro-SemiBold", Helvetica, serif;
 
   --grey: #32363b;
@@ -29,7 +30,7 @@
 }
 
 .error, .loading {
-  color: var(--white);
+
   font-size: 24px;
   font-weight: var(--strong-font-weight);
   line-height: 24px;
@@ -43,7 +44,7 @@
   font-size: var(--text-font-size);
   font-weight: var(--strong-font-weight);
   &&:hover {
-    color: var(--white);
+
   }
 }
 
@@ -75,6 +76,45 @@
   height: 500px;
 }
 
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow-y: hidden;
+  color: var(--white);
+}
+
+.navigate-back-link {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 20px;
+
+  text-decoration: none;
+  font-size: 20px;
+}
+
+.navigate-back-vector {
+  width: 10px;
+  height: 15px;
+  margin-top: -4px;
+}
+
+.navigate-back-rectangle {
+  width: 10px;
+  height: 3px;
+  margin-top: 2px;
+}
+
+.navigate-back-text {
+  color: var(--white);
+  position: relative;
+  margin-top: -9px;
+  margin-left: 10px;
+  font-size: 22px;
+}
+
 @media (max-width: 1200px) {
   :root {
     --text-font-size: 0.625rem;

src/main/web/src/App.tsx

@@ -10,10 +10,10 @@ import { CalendarPage } from './scenes/Calendar';
 import { PrivacyPolicy } from './scenes/PrivacyPolicy';
 import { Imprint } from './scenes/Imprint';
 import { Profile } from './scenes/Profile';
-// import { Event } from './scenes/Event';
-// import { TagOverview } from './scenes/Tag';
-// import { User } from './scenes/User';
 import { Search } from './scenes/Search';
+import { Event } from './scenes/Event';
+// import { TagOverview } from './scenes/Tag';
+import { User } from './scenes/User';
 import { PageNotFound } from './scenes/PageNotFound';
 import config from "./config/config";
 import {GoogleOAuthProvider} from "@react-oauth/google";
@@ -32,20 +32,20 @@ class App extends Component {
               <Route path="/contact" element={<Contact/>}/>
               <Route path="/faq" element={<FAQ/>}/>
               <Route path="/friends" element={<Friends/>}/>
-              {/*<Route path="/event" element={<Event/>} />*/}
+              <Route path="/event" element={<Event/>} />
               <Route path="/post" element={<Post/>}/>
               <Route path="/privacy-policy" element={<PrivacyPolicy/>}/>
               <Route path="/imprint" element={<Imprint/>}/>
               <Route path="/profile" element={<Profile/>}/>
-              {/*<Route path="/tag" element={<TagOverview/>}/>*/}
               <Route path="/search" element={<Search/>}/>
+              {/*<Route path="/tag" element={<TagOverview/>}/>*/}
               <Route path="/terms-of-service" element={<TermsOfService/>}/>
-              {/*<Route path="/user" element={<User/>}/>*/}
+              <Route path="/user" element={<User/>}/>
             </Routes>
           </Router>
         </GoogleOAuthProvider>
     );
   }
 }
 
-export default App;
+export default App;

src/main/web/src/atoms/Tag.css

@@ -2,49 +2,38 @@
   color: transparent;
 }
 
-.tag {
+.tag, .event-tag {
   background-color: var(--grey);
   border: 1px solid var(--red);
   border-radius: 20px;
   color: var(--white);
-  font-size: 14px;
-  font-weight: var(--strong-font-weight);
   line-height: 24px;
   white-space: nowrap;
-  height: 26px;
   position: relative;
-  width: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
-  padding-left: 20px;
-  padding-right: 20px;
-  max-width: 100px;
   &&:hover {
     background-color: var(--dark-red);
   }
 }
 
+.tag {
+  font-size: 14px;
+  font-weight: var(--strong-font-weight);
+  height: 26px;
+  width: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+  max-width: 100px;
+}
+
 .event-tag {
-  background-color: var(--grey);
-  border: 1px solid var(--red);
-  border-radius: 20px;
-  color: var(--white);
   font-size: var(--text-font-size);
   font-weight: 400;
-  line-height: 24px;
-  white-space: nowrap;
   height: 20px;
-  position: relative;
   width: 70px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition);
-  &&:hover {
-    background-color: var(--dark-red);
-  }
 }
 
 @media (max-width: 412px) {

src/main/web/src/atoms/ads/Ads.css

@@ -0,0 +1,57 @@
+.ad-info {
+  color: var(--light-grey);
+  font-size: var(--text-font-size);
+  margin-top: -10px;
+  margin-bottom: -15px;
+  position: relative;
+}
+
+.ad-wrapper {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  gap: 20px;
+}
+
+.ad {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius);
+}
+
+.ad-banner-pauschalreisen, .ad-banner-c24 {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius);
+}
+
+.calendar-ad {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius);
+}
+
+@media (max-width: 412px) {
+  .ad-banner-pauschalreisen {
+    width: 392px;
+  }
+  .ad-banner-c24 {
+    width: 392px;
+  }
+  .calendar-ad, .ad-info {
+    display: none;
+  }
+  .ad {
+    display: none;
+  }
+}
+
+@media (max-width: 390px) {
+  .ad-banner-pauschalreisen {
+    width: 370px;
+  }
+  .ad-banner-c24 {
+    width: 370px;
+  }
+}

src/main/web/src/atoms/ads/C24Ad.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const C24Ad = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://a.check24.net/misc/click.php?pid=638229&aid=338&deep=c24bank&cat=14" target="_blank">
+          <img src="https://a.check24.net/misc/view.php?pid=638229&aid=338&cat=14" width="160" height="600"
+               className="ad" alt="Ad"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/DSLAd.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const DSLAd = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://a.check24.net/misc/click.php?pid=638229&aid=82&deep=dsl-anbieterwechsel&cat=4" target="_blank"><img
+            src="https://a.check24.net/misc/view.php?pid=638229&aid=82&cat=4" width="280" height="250"
+            style={{maxWidth: '100%', height: 'auto', borderRadius: 'var(--border-radius)'}} alt="Ad"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/DigitalOceanAd.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const DigitalOceanAd = () => {
+
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://www.digitalocean.com/?refcode=edd29efbe7cc&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
+          <img src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%202.svg" alt="DigitalOcean Referral Badge"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/MobileAd.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const MobileAd = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://a.check24.net/misc/click.php?pid=638229&aid=168&deep=handytarife&cat=7" target="_blank">
+          <img src="https://a.check24.net/misc/view.php?pid=638229&aid=168&cat=7" width="160" height="600"
+               className="ad" alt="Ad"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/PrimeAd.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const PrimeAd = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://www.amazon.de/joinstudent?tag=cashbackde-21" target="_blank">
+          <img src={process.env.PUBLIC_URL + '/assets/prime.webp'} width="1240" height="100"
+               className="ad" alt="Ad"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/RentalCarAd.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const RentalCarAd = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://a.check24.net/misc/click.php?pid=638229&aid=213&deep=mietwagen-preisvergleich&cat=10" target="_blank">
+          <img
+              src="https://a.check24.net/misc/view.php?pid=638229&aid=213&cat=10" width="280" height="250"
+              style={{maxWidth: '100%', height: 'auto', borderRadius: 'var(--border-radius)'}} alt="Ad"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/SmallC24Ad.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const SmallC24Ad = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://a.check24.net/misc/click.php?pid=638229&aid=342&deep=c24bank&cat=14" target="_blank">
+          <img src="https://a.check24.net/misc/view.php?pid=638229&aid=342&cat=14" width="330" height="250"
+               className="ad-banner-c24" alt="Ad"/>
+        </a>
+      </div>
+  );
+}

src/main/web/src/atoms/ads/TravelAd.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Ads.css";
+import config from "../../config/config";
+
+export const TravelAd = () => {
+  return (
+      <div className="ad-wrapper" style={!config.adsOn ? {display: 'none'} : {}}>
+        <div className="ad-info">Ad</div>
+        {/*eslint-disable-next-line*/}
+        <a href="https://a.check24.net/misc/click.php?pid=638229&aid=256&deep=pauschalreisen-vergleich&cat=9"
+           target="_blank">
+          <img
+              src="https://a.check24.net/misc/view.php?pid=638229&aid=256&cat=9" width="820" height="100"
+              className="ad-banner-pauschalreisen" alt="Ad"/>
+        </a>
+      </div>
+  );
+}