restyled BreakNotification on the lower-left

ProjektAdLer · Dec 4, 2023 · adc46b8 · adc46b8
1 parent 697d176
commit adc46b8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/src/Components/Core/Presentation/Adaptivity/BreakTimeNotification/BreakTimeNotification.tsx b/src/Components/Core/Presentation/Adaptivity/BreakTimeNotification/BreakTimeNotification.tsx
@@ -12,6 +12,7 @@ import tailwindMerge from "../../Utils/TailwindMerge";
 import StyledButton from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledButton";
 import pauseIcon from "../../../../../Assets/icons/42-pause-icon/47-pause-icon-nobg.svg";
 import { useEffect, useState } from "react";
+import StyledContainer from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledContainer";
 
 export default function BreakTimeNotification({ className }: AdLerUIComponent) {
   const [viewModel, controller] = useBuilder<
@@ -46,33 +47,30 @@ export default function BreakTimeNotification({ className }: AdLerUIComponent) {
 
   if (showMinimizedModal)
     return (
-      <div className="relative">
-        <div className="absolute z-50 w-5 h-5 rounded-full -right-[4.5rem] -top-20 animate-ping bg-nodehandlecolor pointer-events-none"></div>
-        <div className="absolute z-50 w-5 h-5 rounded-full -right-[4.5rem] -top-20 bg-nodehandlecolor pointer-events-none"></div>
+      <StyledContainer className="relative flex justify-between items-center p-1 rounded-lg bottom-2 left-2 bg-buttonbgblue lg:!w-96">
+        <div className="absolute z-50 w-5 h-5 rounded-full pointer-events-none -top-2 -right-2 animate-ping bg-nodehandlecolor"></div>
+        <div className="absolute z-50 w-5 h-5 rounded-full pointer-events-none -top-2 -right-2 bg-nodehandlecolor"></div>
         <StyledButton
-          shape="freefloatleft"
+          shape="square"
           onClick={() => controller.minimizeOrMaximizeBreakNotification()}
-          className="!hidden lg:flex fixed left-2 bottom-2"
         >
-          <img src={pauseIcon} className="h-12" alt="" />
-          <div className="flex flex-col items-start pl-4 pr-2">
-            <h1 className="text-xl font-bold">Zeit für eine Pause!</h1>
-            <p className="text-sm">Klicke für mehr Informationen</p>
-          </div>
-          <div
-            className="place-self-start flex items-center justify-center border-t-[1px] border-l-[1px] border-b-4 border-r-4 border-adlerdarkblue rounded-lg px-1.5"
-            onClick={() => controller.closeBreakNotification()}
-          >
-            x
-          </div>
+          <img src={pauseIcon} className="h-fit" alt="Pause Icon" />
         </StyledButton>
+        <div className="hidden lg:visible lg:flex lg:flex-col items-start max-w-[60%] text-adlerdarkblue">
+          <h1 className="text-xl font-bold">Zeit für eine Pause!</h1>
+          <p className="text-sm">
+            Klicke auf die Tasse, um Informationen zu Pausen zu erhalten oder
+            schließe die Meldung über den "x" Button.
+          </p>
+        </div>
         <StyledButton
-          className="fixed lg:hidden left-2 bottom-2"
-          onClick={() => controller.minimizeOrMaximizeBreakNotification()}
+          shape="closebutton"
+          className="place-self-start flex items-center justify-center border-t-[1px] border-l-[1px] border-b-4 border-r-4 border-adlerdarkblue rounded-lg font-bold"
+          onClick={() => controller.closeBreakNotification()}
         >
-          <img src={pauseIcon} className="h-fit" alt="" />
+          x
         </StyledButton>
-      </div>
+      </StyledContainer>
     );
 
   return (

diff --git a/...Presentation/React/LearningSpaceDisplay/LearningElementModal/SubComponents/H5PContent.tsx b/...Presentation/React/LearningSpaceDisplay/LearningElementModal/SubComponents/H5PContent.tsx
@@ -86,7 +86,7 @@ export default function H5PContent({
   return (
     <div className="App">
       <div
-        className=" w-[80vw] h-[80vh] sm:h-[80vh] sm:w-[90vw] xl:h-[85vh] xl:w-[80vw] "
+        className=" w-[80vw] h-[80vh] sm:h-[80vh] sm:w-[90vw] xl:h-[85vh] xl:w-[80vw] xl:scale-75"
         id="h5p-container"
         ref={h5pContainerRef}
       ></div>

diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledButton.tsx b/src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledButton.tsx
@@ -43,7 +43,7 @@ export default function StyledButton({
     freefloatleft: "px-2 py-1",
     freefloatcenter: "flex px-2 py-1 justify-center",
     closebutton:
-      "justify-center p-1 md:w-12 md:h-12 sm:w-10 sm:h-10 w-10 h-10 aspect-square",
+      "justify-center p-1 md:w-12 md:h-12 sm:w-10 sm:h-10 w-8 h-8 aspect-square",
   };
 
   return (
@@ -55,7 +55,7 @@ export default function StyledButton({
         disabled
           ? "box-border text-adlerdeactivatedtext bg-adlerbuttonlocked flex items-center text-sm rounded-lg lg:text-xl font-regular border-t-[1px] border-l-[1px] border-b-4 border-r-4 border-transparent overflow-hidden"
           : tailwindMerge(
-              "flex items-center text-sm rounded-lg hover:cursor-pointer hover:border-buttonbgblue hover:text-buttonbgblue hover:bg-adlerdarkblue lg:text-xl transition ease-in-out duration-75 active:translate-x-1 active:translate-y-1 active:border-transparent text-adlerdarkblue font-regular border-t-[1px] border-l-[1px] border-b-4 border-r-4 border-adlerdarkblue overflow-hidden box-border",
+              "flex items-center text-sm rounded-lg hover:cursor-pointer hover:border-buttonbgblue hover:text-buttonbgblue hover:bg-adlerdarkblue lg:text-xl transition ease-in-out duration-75 active:translate-x-1 active:translate-y-1 active:border-transparent text-adlerdarkblue font-regular border-t-[1px] border-l-[1px] border-b-4 border-r-4 border-adlerdarkblue overflow-hidden box-border cursor-pointer",
               buttonConfig[color]
             )
       )}

diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.css b/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/App.css
@@ -80,6 +80,21 @@ body {
   left: 1rem !important;
 }
 
+@media screen and (max-width: 500px) {
+  #inspector-host,
+  #scene-explorer-host {
+    transform: scale(0.6);
+  }
+
+  #inspector-host {
+    right: 11.2rem !important;
+  }
+
+  #scene-explorer-host {
+    left: 0.2rem !important;
+  }
+}
+
 /* Special Styles for OverallTimeSpentAdaptivityNotification Slider */
 .slider {
   -ms-overflow-style: none; /* Hide scrollbar IE and Edge */