mobile optimization smartphone

src/Components/Core/Presentation/React/GeneralComponents/ControlsExplanationModal/ControlsExplanationContent.tsx

@@ -22,22 +22,22 @@ export default function ControlsExplanationContent({
     <div
       className={tailwindMerge(
         className,
-        "grid landscape:grid-rows-6 landscape:grid-flow-col portrait:grid-flow-row portrait:grid-cols-1 portrait:grid-rows-auto gap-x-8 landscape:gap-y-3 portrait:gap-6 pb-4 text-xs lg:text-sm ",
+        "grid grid-rows-6 grid-flow-col mobile-landscape:justify-center mobile-landscape:grid-cols-1 mobile-landscape:grid-rows-auto mobile-landscape:grid-flow-row-dense mobile-landscape:gap-y-1 mobile-landscape:pb-0 mobile-landscape:text-2xs mobile-landscape:gap-x-1 portrait:grid-flow-row portrait:grid-cols-1 portrait:grid-rows-auto gap-x-8 gap-y-3 portrait:gap-2 pb-4 text-xs lg:text-sm max-w-[85vw]",
       )}
     >
       {/* Avatar Controls */}
       <h3 className="self-center font-bold text-adlerdarkblue">
         {translate("controlAvatar")}
       </h3>
-      <div className="flex flex-row items-start justify-start gap-2 min-h-10 portrait:min-h-0">
+      <div className="flex flex-row items-start justify-start gap-2">
         <img className="w-6" alt="Linksklick" src={leftClickIcon}></img>
         <p>{translate("controlAvatarMouse")}</p>
       </div>
       <div className="flex flex-row items-start justify-start gap-2">
         <img className="w-6" alt="Einfacher Touch" src={touchIcon}></img>
         <p>{translate("controlAvatarTouch")}</p>
       </div>
-      <div className="flex flex-row items-start justify-start gap-2 landscape:row-span-3 portrait:pb-6">
+      <div className="flex flex-row items-start justify-start gap-2 row-span-3 mobile-landscape:row-auto portrait:row-auto portrait:pb-6">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <p>{translate("controlAvatarHint")}</p>
       </div>
@@ -46,15 +46,15 @@ export default function ControlsExplanationContent({
       <h3 className="self-center font-bold text-adlerdarkblue">
         {translate("openContent")}
       </h3>
-      <div className="flex flex-row items-start justify-start gap-2 min-h-10 portrait:min-h-0">
+      <div className="flex flex-row items-start justify-start gap-2">
         <img className="w-6" alt="Icon" src={leftClickIcon}></img>
         <p>{translate("openContentMouse")}</p>
       </div>
       <div className="flex flex-row items-start justify-start gap-2">
         <img className="w-6" alt="Icon" src={touchIcon}></img>
         <p>{translate("openContentTouch")}</p>
       </div>
-      <div className="flex flex-row items-start justify-start gap-2 landscape:row-span-3 portrait:pb-6">
+      <div className="flex flex-row items-start justify-start gap-2 row-span-3 mobile-landscape:row-auto portrait:row-auto portrait:pb-6">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <div className="flex flex-col gap-1">
           <p>{translate("openContentHint1")}</p>
@@ -74,7 +74,7 @@ export default function ControlsExplanationContent({
         <img className="w-6" alt="Icon" src={touchDragIcon}></img>
         <p>{translate("rotateCameraTouch")}</p>
       </div>
-      <div className="flex flex-row items-start justify-start gap-2 landscape:row-span-3 portrait:pb-6">
+      <div className="flex flex-row items-start justify-start gap-2 row-span-3 mobile-landscape:row-auto portrait:row-auto portrait:pb-6">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <p>{translate("rotateCameraHint")}</p>
       </div>
@@ -91,7 +91,7 @@ export default function ControlsExplanationContent({
         <img className="w-6" alt="Icon" src={touchZoomIcon}></img>
         <p>{translate("zoomCameraTouch")}</p>
       </div>
-      <div className="flex flex-row items-start justify-start gap-2 landscape:row-span-3 portrait:pb-6">
+      <div className="flex flex-row items-start justify-start gap-2 row-span-3 mobile-landscape:row-auto portrait:row-auto portrait:pb-6">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <p>{translate("zoomCameraHint")}</p>
       </div>

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

@@ -16,7 +16,11 @@ export default function HelpDeskButton({ className }: AdLerUIComponent<{}>) {
     <div className={tailwindMerge(className, "")}>
       <StyledButton onClick={() => controller.onHelpDeskButtonClicked()}>
         {viewModel?.buttonTitle}
-        <img className="w-10 xl:w-12" src={helpIcon} alt="Help Icon" />
+        <img
+          className="w-10 xl:w-12 mobile-landscape:w-6"
+          src={helpIcon}
+          alt="Help Icon"
+        />
       </StyledButton>
     </div>
   );

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

@@ -58,9 +58,9 @@ export default function LoadingScreen(props: Readonly<LoadinScreenProps>) {
   return (
     <div className=" fixed top-0 left-0 w-screen h-screen z-[20000] bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto flex justify-center items-center pb-24">
       <div className="grid max-h-[1000px]">
-        <section className="grid items-center justify-center w-full grid-cols-2 row-span-2 gap-8 portrait:row-span-2 portrait:flex ">
+        <section className="flex items-center justify-center w-full gap-8 portrait:flex mobile-landscape:pt-10">
           <img
-            className="w-full m-4 xs:w-16 md:w-24 lg:w-32 xl:w-48 portrait:w-16 animate-wiggle place-self-end"
+            className="w-full m-4 xs:w-16 md:w-24 lg:w-32 xl:w-48 portrait:w-16 animate-wiggle place-self-end mobile-landscape:w-10"
             src={logo}
             alt="AdlerEngine Logo"
           />
@@ -74,7 +74,7 @@ export default function LoadingScreen(props: Readonly<LoadinScreenProps>) {
         {/* Loading screen content */}
         {props.content}
 
-        <div className="flex flex-col items-center justify-center h-16 pt-16 portrait:pt-8">
+        <div className="flex flex-col items-center justify-center h-16 pt-16 portrait:pt-8 mobile-landscape:pt-4">
           {!canClose && (
             <div className="flex gap-1 border-4 border-white rounded-lg ">
               <div className="w-6 h-6 animateColor"></div>
@@ -104,7 +104,7 @@ export default function LoadingScreen(props: Readonly<LoadinScreenProps>) {
         </div>
       </div>
       <div className="fixed flex flex-col items-center justify-center w-full gap-2 px-4 bottom-4">
-        <p className="text-sm portrait:text-[10px] font-medium  text-adlerdarkblue portrait:leading-normal">
+        <p className="text-sm portrait:text-[10px] font-medium mobile-landscape:text-xs text-adlerdarkblue portrait:leading-normal">
           <Trans
             i18nKey="projectInformation"
             ns="learningSpace"
@@ -124,7 +124,7 @@ export default function LoadingScreen(props: Readonly<LoadinScreenProps>) {
           />
         </p>
 
-        <p className="text-xs portrait:text-[8px] portrait:leading-normal">
+        <p className="text-xs portrait:text-[8px] portrait:leading-normal mobile-landscape:text-2xs text-center">
           {translate("copyright", { ns: "start" })}
         </p>
       </div>

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

@@ -5,14 +5,18 @@ export default function LoadingScreenControlsExplanation() {
   const { t: translate } = useTranslation("learningSpace");
 
   return (
-    <div className="row-span-4 w-[90vw] relative max-w-[80vw] portrait:h-[50vh] max-h-[45vh] bg-buttonbgblue p-4 rounded-xl overflow-y-auto">
+    <div className="row-span-4 flex flex-col w-[90vw] max-w-[90vw] portrait:h-[50vh] lg:max-h-[60vh] max-h-[45vh] mobile-portrait:h-[60vh] mobile-portrait:max-h-[65vh] bg-buttonbgblue p-4 rounded-xl overflow-y-auto overflow-x-hidden">
       <h1 className="font-bold portrait:pb-6 text-adlerdarkblue">
         {translate("sidebar_controls")}
       </h1>
-      <ControlsExplanationContent />
-      <p className="w-full text-xs text-center absolute bottom-5">
-        {translate("hint_controlsExplanationModal")}
-      </p>
+      <div className="flex flex-col">
+        <ControlsExplanationContent />
+        <div className="relative mobile-portrait:pt-10 mobile-landscape:pt-10">
+          <p className="w-full text-xs font-bold text-center absolute bottom-5 mobile-landscape:text-2xs mobile-landscape:bottom-1 portrait:bottom-1">
+            {translate("hint_controlsExplanationModal")}
+          </p>
+        </div>
+      </div>
     </div>
   );
 }

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

@@ -16,7 +16,7 @@ export default function LoadingScreenHomePageInformation({
       </h1>
       <StyledButton
         shape="freeFloatCenterNoPadding"
-        containerClassName="col-span-4 col-start-4 p-2 portrait:col-span-8 portrait:col-start-2"
+        containerClassName="col-span-4 col-start-4 p-2 portrait:col-span-8 portrait:col-start-2 mobile-landscape:h-[20vh]"
         feedback="nothing"
       >
         <div className="bg-slate-400">

src/Components/Core/Presentation/React/LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModal.tsx

@@ -37,8 +37,14 @@ export default function LearningWorldCompletionModal({
       }}
     >
       <div className="flex flex-col items-center justify-center">
-        {<img className="w-32 mb-4" src={SolutionIcon} alt=""></img>}
-        <div className="w-96">
+        {
+          <img
+            className="w-32 mb-4 mobile-landscape:w-16 mobile-portrait:w-16"
+            src={SolutionIcon}
+            alt=""
+          ></img>
+        }
+        <div className="w-full max-w-96">
           <p className="mb-4">{translate("congratulation")}</p>
           {evaluationLink && (
             <div>

src/Components/Core/Presentation/React/LearningWorldMenu/LearningWorldDetail/LearningWorldDetail.tsx

@@ -39,7 +39,7 @@ export default function LearningWorldDetail({ className }: AdLerUIComponent) {
       <article className="flex flex-row portrait:flex-col portrait:items-between portrait:justify-center portrait:h-[25%] portrait:gap-2 items-center justify-between h-[10%] p-1 pb-4 border-b border-gray-500">
         <div className="flex flex-row">
           <img src={worldIcon} className="w-6 xl:w-8" alt="Lernwelt-Icon"></img>
-          <div className="flex-wrap ml-2 overflow-x-auto font-black break-words text-md text-adlerdarkblue lg:text-2xl">
+          <div className="flex-wrap ml-2 overflow-x-auto font-black break-words text-md text-adlerdarkblue lg:text-2xl mobile-landscape:text-sm">
             {name}
           </div>
         </div>
@@ -56,37 +56,37 @@ export default function LearningWorldDetail({ className }: AdLerUIComponent) {
         {description === undefined ||
           (description !== "" && (
             <div className="pb-2 border-b border-gray-500">
-              <h3 className="self-center ml-2 font-black portrait:text-sm text-adlerdarkblue lg:mb-2">
+              <h3 className="self-center ml-2 font-black portrait:text-sm text-adlerdarkblue lg:mb-2 mobile-landscape:text-sm">
                 {translate("description")}
               </h3>
-              <div className="items-start ml-6 font-medium portrait:text-xs">
+              <div className="items-start ml-6 font-medium portrait:text-xs mobile-landscape:text-xs">
                 <TextWithLineBreaks text={description} />
               </div>
             </div>
           ))}
         {goals === undefined ||
           (goals.length > 0 && (
             <div className="pb-2 border-b border-gray-500">
-              <h3 className="self-center ml-2 font-black text-adlerdarkblue portrait:text-sm lg:mb-2">
+              <h3 className="self-center ml-2 font-black text-adlerdarkblue portrait:text-sm lg:mb-2 mobile-landscape:text-sm">
                 {translate("goal", { count: goals?.length })}
               </h3>
-              <div className="items-start ml-6 font-medium portrait:text-xs lg:text:lg">
+              <div className="items-start ml-6 font-medium mobile-landscape:text-xs portrait:text-xs lg:text:lg">
                 {goals.map((goal) => {
                   return <TextWithLineBreaks text={goal} key={goal} />;
                 })}
               </div>
             </div>
           ))}
         <section className="pb-2 border-b border-gray-500">
-          <h3 className="self-center ml-2 font-black portrait:text-sm text-adlerdarkblue lg:mb-2">
+          <h3 className="self-center ml-2 font-black portrait:text-sm text-adlerdarkblue lg:mb-2 mobile-landscape:text-sm">
             {translate("rooms", { count: spaces?.length })}
           </h3>
-          <div className="items-start ml-6 font-medium portrait:ml-3 portrait:text-xs lg:text:lg">
+          <div className="items-start ml-6 font-medium portrait:ml-3 mobile-landscape:text-xs portrait:text-xs lg:text:lg">
             {spaces?.map((space) => {
               return (
                 <div key={space.id}>
                   <div className="flex flex-row items-center lg:text-lg">
-                    <div className="relative flex my-2 ml-2">
+                    <div className="relative flex my-2 ml-2 mobile-landscape:my-1">
                       <img
                         src={spaceIcon}
                         alt=""
@@ -109,10 +109,10 @@ export default function LearningWorldDetail({ className }: AdLerUIComponent) {
           </div>
         </section>
         <section className="pb-2 border-b border-gray-500">
-          <h3 className="self-center ml-2 font-black text-adlerdarkblue portrait:text-sm lg:mb-2">
+          <h3 className="self-center ml-2 font-black text-adlerdarkblue portrait:text-sm lg:mb-2 mobile-landscape:text-sm">
             {translate("roomCount")}
           </h3>
-          <div className="items-start ml-6 font-medium portrait:text-xs lg:text:lg">
+          <div className="items-start ml-6 font-medium portrait:text-xs lg:text:lg mobile-landscape:text-xs">
             {spaces?.length}
           </div>
         </section>

src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/CloseButton.tsx

@@ -10,7 +10,7 @@ export default function CloseButton({
     <button
       onClick={onClick}
       className={tailwindMerge(
-        "justify-center p-1 md:w-7 md:h-7 sm:w-6 sm:h-6 w-4 h-4 aspect-square flex items-center text-sm rounded-lg hover:cursor-pointer hover:border-adlerdarkblue hover:bg-adleryellow lg:text-xl transition ease-in-out duration-75 active:translate-x-[1px] active:translate-y-[1px] active:border-b-2 active:border-r-2 active:border-transparent text-adlerdarkblue font-regular  border-b-2 border-r-2 border-adlerdarkblue overflow-hidden box-border cursor-pointer bg-buttonbgblue",
+        "justify-center p-1 md:w-7 md:h-7 w-6 h-6 mobile-portrait:rounded-md aspect-square flex items-center text-sm rounded-lg hover:cursor-pointer hover:border-adlerdarkblue hover:bg-adleryellow lg:text-xl transition ease-in-out duration-75 active:translate-x-[1px] active:translate-y-[1px] active:border-b-2 active:border-r-2 active:border-transparent text-adlerdarkblue font-regular border-b-2 border-r-2 border-adlerdarkblue overflow-hidden box-border cursor-pointer bg-buttonbgblue",
         className,
       )}
     >

src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledButton.tsx

@@ -51,7 +51,7 @@ export default function StyledButton({
 
     // Shapes
     square:
-      "justify-center p-1 lg:w-16 lg:h-16 md:w-14 md:h-14 sm:w-10 sm:h-10 w-10 h-10 aspect-square",
+      "justify-center p-1 lg:w-16 lg:h-16 md:w-14 md:h-14 sm:w-10 sm:h-10 w-10 h-10 aspect-square mobile-landscape:w-9 mobile-landscape:h-9",
     freeFloatLeft: "px-2 py-1",
     freeFloatCenter: "flex px-2 py-1 justify-center",
     freeFloatCenterNoPadding: "flex justify-center",

src/Components/Core/Presentation/React/ReactRelated/ReactBaseComponents/StyledModal.tsx

@@ -61,7 +61,7 @@ export default function StyledModal({
           }}
           className="z-50 p-2 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto max-w-[95%] max-h-[95%] overflow-hidden flex flex-col"
         >
-          <div className="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit">
+          <div className="flex items-center justify-center w-full gap-2 p-1 pb-3 text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl h-fit mobile-landscape:text-sm mobile-portrait:text-sm">
             <div className="w-full">{title}</div>
             {canClose && (
               <CloseButton
@@ -78,7 +78,7 @@ export default function StyledModal({
             )}
           </div>
           {/*Content*/}
-          <div className="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter">
+          <div className="px-1 overflow-auto rounded-lg font-regular h-fit scrollGutter mobile-portrait:text-xs mobile-landscape:text-xs">
             {children}
           </div>
           {/*Optional Footer*/}

src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/WelcomePage.tsx

@@ -16,7 +16,7 @@ import avatarEditorButtonBackgroundVideo from "../../../../../../Assets/misc/Wel
 export default function WelcomePage() {
   const { t: translate } = useTranslation("start");
   return (
-    <div className=" relative grid h-[100svh] mobile-landscape:w-[100dvw] mobile-landscape:h-[100dvh] grid-cols-8 grid-rows-6 p-2 bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto">
+    <div className=" relative grid h-[100svh] mobile-landscape:w-[100dvw] mobile-landscape:h-[100dvh] grid-cols-8 grid-rows-6 mobile-landscape:pb-1 p-2 bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto">
       <img
         className="absolute w-32 m-4 -bottom-3 -right-3 opacity-20"
         src={logo}
@@ -27,9 +27,6 @@ export default function WelcomePage() {
       <HelpDeskModal />
 
       <section className="flex flex-col items-center portrait:row-start-1 portrait:row-span-2 portrait:self-center portrait:col-start-2 portrait:col-span-6 tablet-portrait:col-start-1 tablet-portrait:col-span-8 landscape:col-span-6 landscape:col-start-2 landscape:row-start-1 text-adlerdarkblue lg:landscape:col-span-6 lg:landscape:col-start-2 xl:landscape:col-start-2 xl:landscape:col-span-6 lg:landscape:row-start-1 mobile-portrait:mt-10">
-        {/*<h1 className="p-2 text-xl font-extrabold text-center landscape:hidden justify-self-center mobile-portrait:text-2xl tablet-portrait:text-8xl lg:text-4xl 2xl:text-6xl">
-          {translate("welcome")}
-        </h1>*/}
         <video
           className="scale-75 lg:-mb-16 portrait:hidden mobile-landscape:hidden"
           src={welcomeVideo}
@@ -44,14 +41,14 @@ export default function WelcomePage() {
           />
         </video>
         <img
-          className="lg:landscape:hidden w-64 tablet-portrait:w-full mobile-landscape:block"
+          className="lg:landscape:hidden w-64 mobile-landscape:w-96 tablet-portrait:w-full mobile-landscape:block"
           src={welcomePicture}
           alt="3D Welcome Text"
         />
-        <LoginComponent className="flex flex-col items-center justify-around col-span-6 col-start-2 tablet-portrait:col-start-1 tablet-portrait:col-span-8 xl:pt-8 lg:pt-4" />
+        <LoginComponent className="flex flex-col items-center justify-around col-span-6 col-start-2 tablet-portrait:col-start-1 tablet-portrait:col-span-8 xl:pt-8 lg:pt-4 mobile-portrait:row-start-2 mobile-portrait:justify-start mobile-landscape:pt-0" />
       </section>
 
-      <section className="flex items-center justify-center col-span-6 col-start-2 row-span-3 row-start-3 gap-4 mb-4 portrait:h-3/4 mobile-landscape:items-end mobile-landscape:h-1/2 mobile-landscape:row-start-4 portrait:row-start-3 portrait:row-span-3 portrait:col-start-2 portrait:self-center portrait-col-span-6 portrait:gap-6">
+      <section className="flex items-center justify-center col-span-6 col-start-2 row-span-3 row-start-3 gap-4 mb-4 portrait:h-3/4 mobile-landscape:h-3/4 mobile-landscape:self-end mobile-landscape:mb-2 portrait:row-start-3 portrait:row-span-3 portrait:col-start-2 portrait:self-center portrait-col-span-6 portrait:gap-6">
         <WelcomePageButton
           backgroundVideo={learningWorldButtonBackgroundVideo}
           backgroundPicture={learningWorldMenuButtonBackground}
@@ -73,7 +70,7 @@ export default function WelcomePage() {
 
       <p
         className="self-end p-2 text-xs text-center rounded-lg portrait:row-start-6 portrait:col-start-1
-       portrait:col-span-6 portrait:text-2xs mobile-landscape:col-start-2 mobile-landscape:col-span-5 landscape:col-span-4 landscape:col-start-3 landscape:row-start-6 text-adlerdarkblue lg:text-md lg:font-semibold font-regular justify-self-center lg:landscape:row-start-6"
+       portrait:col-span-6 portrait:text-2xs mobile-landscape:text-2xs mobile-landscape:col-start-2 mobile-landscape:col-span-5 landscape:col-span-4 landscape:col-start-3 landscape:row-start-6 text-adlerdarkblue lg:text-md lg:font-semibold font-regular justify-self-center lg:landscape:row-start-6"
       >
         {translate("copyright")}
       </p>