UI style fixes

_doc/ToDo.md

@@ -216,3 +216,7 @@ fix published schedule to cover end of the week
 графика - синк - ОК
 вестителите от Фабио - 
 потребителите с двойни имейли - 
+
+
+ админс can send *urgent* email to everybody to ask for shift 
+in schedule admin - if a publisher is always pair & family is not in the shift - add + button to add them

components/layout.tsx

@@ -9,56 +9,63 @@ import Body from 'next/document'
 
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { set } from "date-fns"
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default function Layout({ children }) {
-  const router = useRouter()
+  const router = useRouter();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
 
-  // auto resize for tablets: disabled.
+  // Assuming that during SSR, we don't want the sidebar to be open.
-  // useEffect(() => {
+  const [isSmallScreen, setIsSmallScreen] = useState(true);
-  //   // Function to check and set the state based on window width
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  //   const handleResize = () => {
-  //     if (window.innerWidth < 768) { // Assuming 768px as the breakpoint for mobile devices
-  //       setIsSidebarOpen(false);
-  //     } else {
-  //       setIsSidebarOpen(true);
-  //     }
-  //   };
-  //   // Set initial state
-  //   handleResize();
-  //   // Add event listener
-  //   window.addEventListener('resize', handleResize);
-  //   // Cleanup
-  //   return () => window.removeEventListener('resize', handleResize);
-  // }, []);
 
+  useEffect(() => {
+    // This function determines if we're on a small screen
+    const checkIfSmallScreen = () => window.innerWidth < 768;
+
+    // Set the initial screen size and sidebar state
+    const initialSmallScreenCheck = checkIfSmallScreen();
+    setIsSmallScreen(initialSmallScreenCheck);
+    setIsSidebarOpen(!initialSmallScreenCheck);
+
+    const handleResize = () => {
+      const smallScreenCheck = checkIfSmallScreen();
+      setIsSmallScreen(smallScreenCheck);
+
+      // On small screens, we want to ensure the sidebar is not open by default when resizing
+      if (smallScreenCheck) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Toggle the sidebar only when the button is clicked
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
   };
 
+  // We use `isSmallScreen` to determine the margin-left on small screens
+  // and use `isSidebarOpen` to determine if we need to push the content on large screens.
+  const marginLeftClass = isSmallScreen ? 'ml-0' : isSidebarOpen ? 'ml-60' : 'ml-6';
+
   return (
-
-    // <div className="h-screen w-screen" >
-    // <div className="flex flex-col">
-    //   <div className="flex flex-row h-screen">
-    //     <ToastContainer />
-    //     <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
-    //     <main className={`pr-10 transition-all duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
-
-
     <div className="">
       <div className="flex flex-col">
-        <div className="flex flex-row h-[90vh]  w-screen  ">
+        <div className="flex flex-row min-h-screen w-screen">
           <ToastContainer position="top-center" style={{ zIndex: 9999 }} />
           <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
-          <main className={`w-full pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-60 ' : 'ml-6'}`}>
+          <main className={`flex-1 transition-all duration-300 ${marginLeftClass}`}>
-            {children}
+            <div className="p-4 mx-auto pr-8 pl-0">
+              {children}
+            </div>
           </main>
         </div>
-        {/* <div className="justify-end items-center text-center ">
-          <Footer /> 
-        </div> */}
       </div>
     </div>
   );
-}
+}

components/sidebar.tsx

@@ -129,7 +129,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
         className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
         style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰</button>
       <aside id="sidenav" ref={sidebarRef}
-        className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 w-64"
+        className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 sm:translate-x-0 w-64"
         style={{ width: `${sidebarWidth}px`, transform: isSidebarOpen ? 'translateX(0)' : `translateX(-${sidebarWidth - 16}px)` }}>
         <h2 className="text-2xl font-semibold text-gray-800 dark:text-white pt-2 pl-4 pb-4"
           title={`v.${packageVersion} ${process.env.GIT_COMMIT_ID}`} >Специално Свидетелстване София</h2>

pages/cart/publishers/myschedule.tsx

@@ -57,8 +57,8 @@ export default function MySchedulePage({ assignments }) {
     return (
         <Layout>
             <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
-                <div className="container mx-auto p-4">
+                <div className="container ">
-                    <h1 className="text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
+                    <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
                     <div className="space-y-4">
                         {assignments && assignments.map((assignment) => (
                             <div key={assignment.dateStr + assignments.indexOf(assignment)} className="bg-white shadow overflow-hidden rounded-lg">
@@ -67,18 +67,18 @@ export default function MySchedulePage({ assignments }) {
                                 </div>
                                 <div className="border-t border-gray-200">
                                     <dl>
-                                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                        <div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
                                             <dt className="text-sm font-medium text-gray-500">Час</dt>
-                                            <dd className="mt-1 text text-gray-900 sm:mt-0 sm:col-span-2">
+                                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                 {GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}
                                             </dd>
                                         </div>
-                                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                        <div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1  px-6 xs:py-1">
                                             <dt className="text-sm font-medium text-gray-500">Смяна</dt>
-                                            <dd className="mt-1 text text-gray-900 sm:mt-0 sm:col-span-2">
+                                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                 {assignment.shift.assignments.map((a, index) => {
                                                     return (
-                                                        <span key={index} className="inline-flex items-center mr-1 px-2 py-0.5 border border-gray-300 rounded-full text-sm font-medium bg-gray-100">
+                                                        <span key={index} className="inline-flex items-center mr-1 px-2 py-0.5 my-0.5 border border-gray-300 rounded-full text-sm font-medium bg-gray-100">
                                                             {a.publisher.firstName} {a.publisher.lastName}
                                                             {a.isWithTransport && <LocalShippingIcon style={{ marginLeft: '4px' }} />}
                                                         </span>
@@ -87,7 +87,7 @@ export default function MySchedulePage({ assignments }) {
                                                 )}
                                             </dd>
                                         </div>
-                                        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                        <div className="bg-gray-50 px-4 py-5 grid grid-cols-1 sm:grid-cols-3 gap-4 xs:gap-1 px-6 xs:py-1">
                                             <dt className="text-sm font-medium text-gray-500">Действия</dt>
                                             <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                                                 <button

styles/styles.css

@@ -267,3 +267,10 @@ iframe {
     text-align: left;
   }
 }
+.rbc-toolbar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center; /* Optional: center buttons in the group */
+}
+