Merge branch 'main' of https://github.com/ProjektAdLer/2D_3D_AdLer

CHANGELOG.md

@@ -10,11 +10,11 @@ The AdLer Engine uses [Semantic Versioning](http://semver.org/).
 
 ### Added
 
--
+- background-color to SideBar
 
 ### Changed
 
--
+- responsive styling of LoadingScreen
 
 ### Deprecated
 

public/h5pBase/styles/h5p.css

@@ -24,7 +24,14 @@
   font-style: normal;
   font-display: block;
 }
-
+[role="button"].h5p-control.h5p-fullscreen {
+  width: 0px !important;
+  height: 0px !important;
+}
+[role="button"].h5p-my-fullscreen-button-enter {
+  width: 0px !important;
+  height: 0px !important;
+}
 html.h5p-iframe,
 html.h5p-iframe > body {
   font-family: Sans-Serif; /* Use the browser's default sans-serif font. (Since Heletica doesn't look nice on Windows, and Arial on OS X.) */

src/Components/Core/Presentation/React/GeneralComponents/LoadingScreen/LoadingScreen.tsx

@@ -20,20 +20,20 @@ export default function LoadingScreen() {
   return (
     <div className="absolute z-[20000]">
       <main className="grid w-screen h-screen grid-cols-6 grid-rows-5 bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto">
-        <section className="z-20 flex items-center justify-center col-span-4 col-start-2 row-span-3 row-start-1 mt-24">
+        <section className="z-20 flex items-center justify-center col-span-4 col-start-2 row-span-2 row-start-1 mt-10 lg:row-span-3">
           <img
-            className="w-32 m-4 xs:w-36 md:w-64 lg:w-72 xl:w-96 animate-wiggle"
+            className="w-full m-4 xs:w-36 md:w-64 lg:w-72 xl:w-96 animate-wiggle"
             src={logo}
             alt="AdlerEngine Logo"
           />
         </section>
-        <section className="z-10 flex flex-col items-center justify-center col-span-4 col-start-2 row-span-1 row-start-4 mb-10">
+        <section className="z-10 flex flex-col items-center self-center justify-center col-span-4 col-start-2 row-span-1 row-start-3 p-4 mb-10 text-lg font-medium rounded-lg lg:self-start lg:p-0 lg:col-span-2 lg:col-start-3 lg:row-start-4 justify-self-center lg:w-96 h-1/3 bg-buttonbgblue text-adlerdarkblue lg:text-2xl">
           {viewModel.loadStep.Value && <p>{viewModel.loadStep.Value}</p>}
         </section>
 
         {!canClose && (
           <section className="self-end col-span-2 col-start-3 row-start-4 justify-self-center">
-            <div className="flex w-full border-4 border-white rounded-lg">
+            <div className="flex w-full scale-50 border-4 border-white rounded-lg lg:scale-100">
               <div className="w-10 h-10 m-1 animate-loadtileone bg-adlerdarkblue"></div>
               <div className="w-10 h-10 m-1 animate-loadtiletwo bg-adlerdarkblue"></div>
               <div className="w-10 h-10 m-1 animate-loadtilethree bg-adlerdarkblue"></div>
@@ -48,29 +48,29 @@ export default function LoadingScreen() {
           </section>
         )}
         {canClose && (
-          <section className="self-end col-span-2 col-start-3 row-start-4 justify-self-center">
+          <section className="self-center col-span-4 col-start-2 row-start-4 lg:self-end lg:col-span-2 lg:col-start-3 justify-self-center">
             <StyledButton
               shape={"freefloatcenter"}
               onClick={() => controller.closeLoadingScreen()}
-              className="p-5"
+              className="p-5 scale-125 lg:scale-150"
             >
               Weiter zum Lernraum
             </StyledButton>
           </section>
         )}
 
-        <section className="flex items-center self-center col-span-4 col-start-2 row-start-5 rounded-lg bg-buttonbgblue justify-self-center">
-          <p className="p-4 text-xl font-medium text-center text-adlerdarkblue">
+        <section className="flex items-center self-center col-span-6 col-start-1 row-start-5 lg:col-span-4 lg:col-start-2 justify-self-center">
+          <p className="p-4 text-lg font-medium text-center lg:text-xl text-adlerdarkblue">
             Du willst mehr über das Projekt AdLer erfahren? Dann schau doch mal
             auf unserer{" "}
             <a
               target="_blank"
               href="https://projekt-adler.eu"
-              title="AdLer Projekthomepage https://projekt-adler.eu"
+              title="Dieser Link öffnet die AdLer Projekthomepage https://projekt-adler.eu in einem neuen Tab."
               rel="noreferrer"
-              className="underline text-nodehandlecolor"
+              className="underline text-adleroceanblue hover:text-nodehandlecolor"
             >
-              Projekt Homepage
+              Projekt-Homepage
             </a>{" "}
             vorbei.
           </p>

src/Components/Core/Presentation/React/LearningSpaceDisplay/FullscreenSwitch/FullscreenSwitch.tsx

@@ -14,10 +14,7 @@ export default function FullscreenSwitch() {
   if (!controller) return null;
 
   return (
-    <StyledButton
-      className="portrait:hidden"
-      onClick={controller.toggleFullscreen}
-    >
+    <StyledButton className="" onClick={controller.toggleFullscreen}>
       <img className="" src={fullscreenIcon} alt="Fullscreen-Icon"></img>
     </StyledButton>
   );

src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx

@@ -36,8 +36,8 @@ export default function SideBar({ className }: AdLerUIComponent) {
       initialOpen={false}
       useAsTriggerOnly={true}
     >
-      <StyledContainer className="flex flex-col bg-transparent">
-        <div className="flex flex-row items-center w-64">
+      <StyledContainer className="flex flex-col p-2 rounded-lg w-44 lg:w-64 bg-whitetrans">
+        <div className="flex flex-row items-center">
           <StyledButton onClick={controller.onSpaceMenuButtonClicked}>
             <img src={spaceIcon} alt="" />
           </StyledButton>
@@ -46,7 +46,7 @@ export default function SideBar({ className }: AdLerUIComponent) {
           </p>
         </div>
 
-        <div className="flex flex-row items-center w-64">
+        <div className="flex flex-row items-center">
           <StyledButton onClick={controller.onWorldMenuButtonClicked}>
             <img src={worldIcon} alt="" />
           </StyledButton>
@@ -55,7 +55,7 @@ export default function SideBar({ className }: AdLerUIComponent) {
           </p>
         </div>
 
-        <div className="flex flex-row items-center w-64">
+        <div className="flex flex-row items-center">
           <StyledButton onClick={controller.onMainMenuButtonClicked}>
             <img src={engineLogo} alt="" />
           </StyledButton>
@@ -64,13 +64,13 @@ export default function SideBar({ className }: AdLerUIComponent) {
           </p>
         </div>
 
-        <div className="flex flex-row items-center w-64">
+        <div className="flex flex-row items-center">
           <FullscreenSwitch />
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">
             Vollbild
           </p>
         </div>
-        <div className="flex flex-row items-center w-64">
+        <div className="flex flex-row items-center">
           <HelpDeskButton />
           <HelpDeskModal />
           <p className="pl-2 text-sm font-bold lg:text-xl text-adlerdarkblue text-outline">

tailwind.config.js

@@ -169,6 +169,7 @@ module.exports = {
       colors: {
         babylonbg: "#33334d", //Babylon Default Hintergrundfarbe
         blacktrans: "rgba(0,0,0,0.5)",
+        whitetrans: "rgba(255,255,255,0.3)",
         adlerblue: "#a1c8e5",
         adlerdarkblue: "rgb(23,45,77)" /*#172d4d*/,
         adlergreen: "#59b347",
@@ -180,6 +181,7 @@ module.exports = {
         adlerbggradientfrom: "#a1c8e5",
         adlerbggradientto: "#e2eaf2",
         nodehandlecolor: "#e9d6b3",
+        adleroceanblue: "#45a0e5",
         // Neue Farben, die noch nicht im Wiki dokumentiert sind, bitte unter diesem Kommentar einfügen
       },
       gridTemplateRows: {