added responsive styling and some other styling

ProjektAdLer · Nov 24, 2023 · 8121dce · 8121dce
1 parent 4556123
commit 8121dce
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/src/Components/Core/Presentation/React/GeneralComponents/LoadingScreen/LoadingScreen.tsx b/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-10">
+        <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-2 col-start-3 row-span-1 row-start-4 mb-10 text-lg font-medium rounded-lg justify-self-center w-96 h-1/3 bg-buttonbgblue text-adlerdarkblue lg:text-2xl">
+        <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,7 +48,7 @@ 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()}
@@ -59,7 +59,7 @@ export default function LoadingScreen() {
           </section>
         )}
 
-        <section className="flex items-center self-center col-span-4 col-start-2 row-start-5 justify-self-center">
+        <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{" "}

diff --git a/...onents/Core/Presentation/React/LearningSpaceDisplay/FullscreenSwitch/FullscreenSwitch.tsx b/...onents/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>
   );

diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx b/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">

diff --git a/tailwind.config.js b/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",