further mobile ui improvements

ProjektAdLer · Feb 11, 2025 · dbeeb9a · dbeeb9a
1 parent ed8b48e
commit dbeeb9a
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 28 deletions.
diff --git a/...sentation/React/GeneralComponents/ControlsExplanationModal/ControlsExplanationContent.tsx b/...sentation/React/GeneralComponents/ControlsExplanationModal/ControlsExplanationContent.tsx
@@ -22,7 +22,7 @@ export default function ControlsExplanationContent({
     <div
       className={tailwindMerge(
         className,
-        "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]",
+        "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 pb-4 portrait:pb-1 portrait-gap-y-1 text-xs lg:text-sm max-w-[85vw]",
       )}
     >
       {/* Avatar Controls */}
@@ -37,7 +37,7 @@ export default function ControlsExplanationContent({
         <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 row-span-3 mobile-landscape:row-auto portrait:row-auto 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-3">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <p>{translate("controlAvatarHint")}</p>
       </div>
@@ -54,7 +54,7 @@ export default function ControlsExplanationContent({
         <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 row-span-3 mobile-landscape:row-auto portrait:row-auto 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-3">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <div className="flex flex-col gap-1">
           <p>{translate("openContentHint1")}</p>
@@ -66,15 +66,15 @@ export default function ControlsExplanationContent({
       <h3 className="self-center font-bold text-adlerdarkblue">
         {translate("rotateCamera")}
       </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={middleMouseDragIcon}></img>
         <p>{translate("rotateCameraMouse")}</p>
       </div>
       <div className="flex flex-row items-start justify-start gap-2">
         <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 row-span-3 mobile-landscape:row-auto portrait:row-auto 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-3">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <p>{translate("rotateCameraHint")}</p>
       </div>
@@ -83,15 +83,15 @@ export default function ControlsExplanationContent({
       <h3 className="self-center font-bold text-adlerdarkblue">
         {translate("zoomCamera")}
       </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={middleMouseIcon}></img>
         <p>{translate("zoomCameraMouse")}</p>
       </div>
       <div className="flex flex-row items-start justify-start gap-2">
         <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 row-span-3 mobile-landscape:row-auto portrait:row-auto 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-3">
         <img className="w-6" alt="Icon" src={hintIcon}></img>
         <p>{translate("zoomCameraHint")}</p>
       </div>
@@ -100,7 +100,7 @@ export default function ControlsExplanationContent({
       <h3 className="self-center font-bold text-adlerdarkblue">
         {"Highlight Farben"}
       </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={LearningElementUnsolvedIcon}></img>
         <p>{translate("LearningElementUnsolvedIcon")}</p>
       </div>

diff --git a/src/Components/Core/Presentation/React/GeneralComponents/LoadingScreen/LoadingScreen.tsx b/src/Components/Core/Presentation/React/GeneralComponents/LoadingScreen/LoadingScreen.tsx
@@ -60,12 +60,12 @@ export default function LoadingScreen(props: Readonly<LoadinScreenProps>) {
       <div className="grid max-h-[1000px]">
         <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 mobile-landscape:w-10"
+            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-12 mobile-landscape:m-2"
             src={logo}
             alt="AdlerEngine Logo"
           />
           {loadingText && (
-            <p className="text-sm font-bold lg:text-lg xl:text-xl text-adlerdarkblue">
+            <p className="text-sm font-bold lg:text-lg xl:text-xl mobile-landscape:text-lg text-adlerdarkblue">
               {loadingText}
             </p>
           )}

diff --git a/...GeneralComponents/LoadingScreen/LoadingScreenContent/LoadingScreenControlsExplanation.tsx b/...GeneralComponents/LoadingScreen/LoadingScreenContent/LoadingScreenControlsExplanation.tsx
@@ -11,8 +11,8 @@ export default function LoadingScreenControlsExplanation() {
       </h1>
       <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">
+        <div className="relative mobile-portrait:pt-12 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 text-adlerdarkblue">
             {translate("hint_controlsExplanationModal")}
           </p>
         </div>

diff --git a/...nts/Core/Presentation/React/LearningSpaceMenu/LearningSpaceDetail/LearningSpaceDetail.tsx b/...nts/Core/Presentation/React/LearningSpaceMenu/LearningSpaceDetail/LearningSpaceDetail.tsx
@@ -58,7 +58,7 @@ export default function LearningSpaceDetail({ 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={spaceIcon} className="w-6 xl:w-8" alt="Lernraum-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>
@@ -76,20 +76,20 @@ export default function LearningSpaceDetail({ className }: AdLerUIComponent) {
       <article className="flex flex-col w-full gap-2 h-[75%] overflow-auto">
         {description !== "" && (
           <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 mobile-landscape:text-sm text-adlerdarkblue lg:mb-2">
               {translate("description")}
             </h3>
-            <div className="items-start ml-6 font-medium portrait:ml-3 portrait:text-xs">
+            <div className="items-start ml-6 font-medium portrait:ml-3 portrait:text-xs mobile-landscape:text-xs">
               <TextWithLineBreaks text={description} />
             </div>
           </section>
         )}
         {goals.length > 0 && goals[0] !== "" && (
           <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("goal", { count: goals?.length })}
             </h3>
-            <div className="items-start ml-6 font-medium portrait:text-xs portrait:ml-3 lg:text:lg">
+            <div className="items-start ml-6 font-medium portrait:text-xs portrait:ml-3 lg:text:lg mobile-landscape:text-xs">
               <ul className="ml-4 list-disc">
                 {goals.map((goal, index) => {
                   return (
@@ -104,10 +104,10 @@ export default function LearningSpaceDetail({ className }: AdLerUIComponent) {
         )}
         {elements.length > 0 && (
           <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("learningElement", { count: elements?.length })}
             </h3>
-            <div className="flex flex-col items-start ml-6 font-medium portrait:ml-3 portrait:text-xs lg:text-lg">
+            <div className="flex flex-col items-start ml-6 font-medium portrait:ml-3 portrait:text-xs lg:text-lg mobile-landscape:text-xs">
               {elements.map((element) => {
                 return (
                   <div key={element[1]} className="w-full">
@@ -150,10 +150,10 @@ export default function LearningSpaceDetail({ className }: AdLerUIComponent) {
         {!!requiredPoints && (
           <section className="flex flex-col gap-2">
             <div className="flex flex-row items-center justify-between w-full xl:w-3/4">
-              <h3 className="self-center max-w-[75%] ml-2 text-lg font-black portrait:text-sm text-adlerdarkblue">
+              <h3 className="self-center max-w-[75%] ml-2 text-lg font-black portrait:text-sm mobile-landscape:text-sm text-adlerdarkblue">
                 {translate("requiredPoints")}
               </h3>
-              <div className="flex flex-row ml-6 text-lg font-medium portrait:text-xs portrait:ml-2">
+              <div className="flex flex-row ml-6 text-lg font-medium portrait:text-xs portrait:ml-2 mobile-landscape:text-sm">
                 {requiredPoints}
                 <img
                   src={coinIcon}
@@ -163,10 +163,10 @@ export default function LearningSpaceDetail({ className }: AdLerUIComponent) {
               </div>
             </div>
             <div className="flex flex-row items-center justify-between w-full xl:w-3/4">
-              <h3 className="max-w-[75%] self-center ml-2 text-lg font-black portrait:text-sm text-adlerdarkblue">
+              <h3 className="max-w-[75%] self-center ml-2 text-lg font-black portrait:text-sm  text-adlerdarkblue">
                 {translate("maximumPoints")}
               </h3>
-              <div className="flex flex-row items-start ml-6 text-lg font-medium portrait:text-xs portrait:ml-2">
+              <div className="flex flex-row items-start ml-6 text-lg font-medium portrait:text-xs mobile-landscape:text-sm portrait:ml-2">
                 {elements.reduce((acc, element) => acc + element[3], 0)}
                 <img
                   src={coinIcon}

diff --git a/...nts/Core/Presentation/React/LearningWorldMenu/LearningWorldDetail/LearningWorldDetail.tsx b/...nts/Core/Presentation/React/LearningWorldMenu/LearningWorldDetail/LearningWorldDetail.tsx
@@ -33,7 +33,7 @@ export default function LearningWorldDetail({ className }: AdLerUIComponent) {
     <main
       className={tailwindMerge(
         className,
-        "flex flex-col gap-2 w-full self-start h-[100svh] portrait:h-[45svh]",
+        "flex flex-col gap-2 w-full self-start h-[100svh] portrait:h-[62dvh]",
       )}
     >
       <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">

diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/LearningWorldMenu.tsx b/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/LearningWorldMenu.tsx
@@ -6,11 +6,11 @@ import ReturnHomeModal from "~ReactComponents/LearningWorldMenu/ReturnHomeModal/
 
 export default function LearningWorldMenu() {
   return (
-    <div className="flex flex-col h-[100svh] bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto overflow-hidden mobile-landscape:w-[100dvw] mobile-landscape:h-[100dvh]">
-      <div className="grid order-2 grid-cols-2 grid-rows-1 portrait:grid-cols-1 portrait:grid-rows-2 portrait:gap-4 grow lg:rounded-lg">
+    <div className="flex flex-col h-[100svh] bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto overflow-hidden mobile-landscape:w-[100dvw] mobile-landscape:h-[100dvh] portrait:max-h-[100dvh]">
+      <div className="grid order-2 grid-cols-2 grid-rows-1 portrait:grid-cols-1 portrait:grid-rows-6 portrait:gap-4 grow lg:rounded-lg">
         <ReturnHomeModal />
-        <WorldSelection className="col-start-1 portrait:col-start-1 portrait:row-start-1 p-2 m-2 rounded-lg lg:p-8 portrait:overflow-auto h-[90svh] portrait:h-[45svh]" />
-        <LearningWorldDetail className="flex col-start-2 p-2 portrait:col-start-1 portrait:row-start-2 lg:p-8" />
+        <WorldSelection className="col-start-1 portrait:col-start-1 portrait:col-span-2 portrait:row-start-1 p-2 m-2 rounded-lg lg:p-8 portrait:overflow-auto portrait:h-full" />
+        <LearningWorldDetail className="flex col-start-2 p-2 portrait:col-start-1 portrait:row-start-3 portrait:row-span-4 lg:p-8" />
       </div>
       <MenuHeaderBar
         location="world"