mobile friendlienss improvements

antonstihl · Jan 12, 2024 · 726a0f1 · 726a0f1
1 parent fc7acce
commit 726a0f1
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 172 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,10 +7,12 @@ import ParentProvider from "./context/ParentContext";
 const App = () => {
   return (
     <>
-      <div className="flex flex-col items-center w-full bg-amber-300 px-4 py-1 text-sm">
-        <p>Flappen är i alfaversion och kan gå sönder när som helst.</p>
+      <div className="flex flex-col items-center w-full min-w-fit bg-amber-300 px-4 py-1 text-sm">
+        <p className="text-center">
+          Flappen är i alfaversion och kan gå sönder när som helst.
+        </p>
         <p>
-          All data sparas <b>lokalt i din browser.</b>
+          All data sparas <b>lokalt i din webbläsare.</b>
         </p>
       </div>
       <ParentProvider>

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -87,7 +87,7 @@ const Calendar = ({
   allocatedDates,
   allAllocatedDates,
   parentId,
-  childId
+  childId,
 }: Props) => {
   const today = new Date();
   const [month, setMonth] = useState(today.getMonth());
@@ -128,7 +128,7 @@ const Calendar = ({
 
   return (
     <>
-      <div className="flex justify-center gap-2 w-full items-center pb-4">
+      <div className="flex justify-center gap-2 w-full min-w-fit items-center pb-4">
         <Button onClick={decreaseMonth}>{"<"}</Button>
         <div className="flex flex-col items-center w-36">
           <div>{monthName + " " + year}</div>
@@ -141,7 +141,7 @@ const Calendar = ({
         </div>
         <Button onClick={increaseMonth}>{">"}</Button>
       </div>
-      <div className="grid grid-cols-7">
+      <div className="grid grid-cols-7 gap-2">
         {Weekdays.map((weekday) => (
           <div key={weekday} className="flex justify-center items-center">
             {weekday}
@@ -161,7 +161,8 @@ const Calendar = ({
                 .filter(
                   (allocatedDate) =>
                     myDatesEqual(allocatedDate, dateCell.date) &&
-                    (allocatedDate.parentId !== parentId || allocatedDate.childId !== childId)
+                    (allocatedDate.parentId !== parentId ||
+                      allocatedDate.childId !== childId)
                 )
                 .map((allocatedDate) => ({
                   pace: allocatedDate.pace,

diff --git a/src/components/DateButton.tsx b/src/components/DateButton.tsx
@@ -44,72 +44,59 @@ export default function DateButton({
     ),
   }));
 
-  const dateButtonClasses =
-    "flex justify-between flex-col rounded-sm h-12 select-none";
-  const whiteBorderClasses = "border-white border-4 rounded-sm";
-  if (activeMonth) {
-    return (
-      <div className={whiteBorderClasses}>
-        <button
-          className={`${dateButtonClasses} shadow-sm shadow-black`}
-          onClick={toggleSelectedDate}
-        >
-          <div className="flex justify-center">
-            <div
-              className={`w-0 h-0 
+  return !activeMonth ? (
+    <div className="flex justify-between flex-col rounded-sm h-max select-none items-end shadow-sm shadow-gray-400 border-gray-400 text-gray-400 pr-1">
+      {date.date}
+    </div>
+  ) : (
+    <button
+      className="flex justify-between flex-col rounded-sm h-max min-w-fit select-none shadow-sm shadow-black"
+      onClick={toggleSelectedDate}
+    >
+      <div className="flex justify-center">
+        <div
+          className={`w-0 h-0 
             border-l-[15px] border-l-transparent
             border-b-[15px] ${
               selected ? "border-b-green-700" : "border-b-transparent"
             }
             border-r-[15px] border-r-transparent
             -rotate-45 -translate-x-3 -translate-y-1 z-0`}
-            />
-            <div className="flex justify-end w-4 pr-1">
-              <div>{today ? <p>{date.date}</p> : date.date}</div>
-            </div>
-          </div>
-          <div className="flex flex-col gap-0 align-bottom w-full">
-          {decoratedSecondaryLeaves.map((decoratedLeave, index) => {
-              return (
-                <div key={index}>
-                  <div
-                    className={`h-2 border-2 bg-white rounded-sm ${"border-slate-400"} ${
-                      decoratedLeave.paceStyle
-                    }`}
-                  ></div>
-                  <div
-                    className={`-mt-2 h-2 ${decoratedLeave.paymentStyle} bg-slate-400 rounded-sm`}
-                  />
-                </div>
-              );
-            })}
-            {decoratedLeaves.map((decoratedLeave, index) => {
-              return (
-                <div key={index}>
-                  <div
-                    className={`h-2 border-2 bg-white rounded-sm ${"border-green-700"} ${
-                      decoratedLeave.paceStyle
-                    }`}
-                  ></div>
-                  <div
-                    className={`-mt-2 h-2 ${decoratedLeave.paymentStyle} bg-green-700 rounded-sm`}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        </button>
-      </div>
-    );
-  } else {
-    return (
-      <div className={whiteBorderClasses}>
-        <div
-          className={`${dateButtonClasses} items-end shadow-sm shadow-gray-400 border-gray-400 text-gray-400 pr-1`}
-        >
-          {date.date}
+        />
+        <div className="flex justify-end w-2 pr-2">
+          <div>{today ? <p>{date.date}</p> : date.date}</div>
         </div>
       </div>
-    );
-  }
+      <div className="flex flex-col justify-between w-full">
+        {decoratedLeaves.map((decoratedLeave, index) => {
+          return (
+            <div key={index}>
+              <div
+                className={`h-2 border-2 bg-white rounded-sm ${"border-green-700"} ${
+                  decoratedLeave.paceStyle
+                }`}
+              ></div>
+              <div
+                className={`-mt-2 h-2 ${decoratedLeave.paymentStyle} bg-green-700 rounded-sm`}
+              />
+            </div>
+          );
+        })}
+        {decoratedSecondaryLeaves.map((decoratedLeave, index) => {
+          return (
+            <div key={index}>
+              <div
+                className={`h-2 border-2 bg-white rounded-sm ${"border-slate-400"} ${
+                  decoratedLeave.paceStyle
+                }`}
+              ></div>
+              <div
+                className={`-mt-2 h-2 ${decoratedLeave.paymentStyle} bg-slate-400 rounded-sm`}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </button>
+  );
 }
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -27,7 +27,7 @@ export default function NavBar() {
   );
   return (
     <>
-      <div className="flex justify-between items-center px-4 text-lg bg-green-700 text-white font-mono w-full h-12">
+      <div className="flex justify-between items-center px-4 text-lg bg-green-700 text-white font-mono w-screen min-w-fit h-12">
         <button onClick={() => toggleMenu()}>
           <div className="flex flex-col space-y-1 pr-4">
             {!menuOpen && line}
@@ -53,7 +53,7 @@ export default function NavBar() {
               </span>
               appen
             </p>
-            <div className="rotate-6 animate-pulse">👶</div>
+            <div className="rotate-6">👶</div>
           </div>
         </NavLink>
 

diff --git a/src/pages/CalendarPage.tsx b/src/pages/CalendarPage.tsx
@@ -155,7 +155,7 @@ function CalendarPage() {
           }
         />
       )}
-      <div className="flex justify-center w-full gap-4 m-4">
+      <div className="flex justify-center w-scren m-4">
         <div className="flex flex-col gap-4">
           {(children.length === 0 || !parent) && (
             <Card>
@@ -169,7 +169,7 @@ function CalendarPage() {
             <Card width="w-full">
               <select
                 onChange={(e) => setChildId(e.target.value)}
-                className="rounded-md p-2 w-full"
+                className="rounded-md p-2 pr-4 w-full"
                 name="child"
                 value={childId}
               >
@@ -191,7 +191,7 @@ function CalendarPage() {
             </Card>
           )}
           {child && (
-            <Card>
+            <Card width="w-full">
               <Calendar
                 selectedDates={selectedDates}
                 setSelectedDates={updateSelectedDates}
@@ -223,8 +223,8 @@ function CalendarPage() {
                       selectedDates={selectedDates}
                       setSelectedDates={updateSelectedDates}
                     />
-                    {selectedDates.length === 0 && <p>Inga datum valda.</p>}
-                    <div className="grid items-center grid-cols-[35%_65%] gap-2">
+                    {selectedDates.length === 0 && <p className="w-full text-center">Inga datum valda.</p>}
+                    <div className="flex flex-col gap-2">
                       <p>Ledig</p>
                       <SegmentedControl
                         optionValue={leave}