layout optimisation and adjustments
This commit is contained in:
Dobromir Popov
1
.gitignore
vendored
1
.gitignore
vendored
@ -26,3 +26,4 @@ next-cart-app.zip
|
||||
certificates
|
||||
content/output/*
|
||||
baseUrl.txt
|
||||
public/content/output/*
|
||||
|
||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -119,5 +119,8 @@
|
||||
},
|
||||
"[javascriptreact]": {
|
||||
"editor.defaultFormatter": "vscode.typescript-language-features"
|
||||
},
|
||||
"[handlebars]": {
|
||||
"editor.defaultFormatter": "vscode.html-language-features"
|
||||
}
|
||||
}
|
||||
@ -51,12 +51,12 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
<div className="flex flex-row h-[90vh] w-screen ">
|
||||
<ToastContainer position="top-center" style={{ zIndex: 9999 }} />
|
||||
<Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
|
||||
<main className={`pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
|
||||
<main className={`w-full pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-60 ' : 'ml-6'}`}>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
{/* <div className="justify-end items-center text-center ">
|
||||
<Footer />
|
||||
<Footer />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ function SidebarMenuItem({ item, session, isSubmenu }) {
|
||||
//const [isOpen, setIsOpen] = useState(false && collapsable);
|
||||
// Initialize isOpen to true for non-collapsible items, ensuring they are always "open" // xOR
|
||||
|
||||
const baseClass = `sidemenu-item flex items-center ${isSubmenu ? "px-4 py-1" : ""} mt-1 transition-colors duration-3000 transform rounded-md`;
|
||||
const baseClass = `sidemenu-item flex items-center ${isSubmenu ? "px-3 py-1" : ""} mt-1 pr-0 transition-colors duration-3000 transform rounded-md`;
|
||||
const activeClass = isActive ? "sidemenu-item-active text-blue-600 bg-gray-100 dark:text-blue-400 dark:bg-blue-900" : "text-gray-700 dark:text-gray-300";
|
||||
const hoverClasses = "hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700";
|
||||
|
||||
@ -64,7 +64,7 @@ function SidebarMenuItem({ item, session, isSubmenu }) {
|
||||
{item.svgData && <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d={item.svgData} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>}
|
||||
<span className="mx-4 font-medium">{item.text}</span>
|
||||
<span className="ml-3 mr-1 font-medium">{item.text}</span>
|
||||
{item.children && <DropDownIcon isOpen={isOpen} />}
|
||||
</div>
|
||||
{isOpen && item.children && (
|
||||
@ -89,7 +89,7 @@ function DropDownIcon({ isOpen }) {
|
||||
|
||||
export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
|
||||
const { data: session, status } = useSession();
|
||||
const sidebarWidth = 256; // Simplify by using a constant
|
||||
const sidebarWidth = 226; // Simplify by using a constant
|
||||
const sidebarRef = useRef(null);
|
||||
//const [locations, setLocations] = useState([]);
|
||||
|
||||
@ -126,7 +126,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
|
||||
return (
|
||||
<>
|
||||
<button onClick={toggleSidebar}
|
||||
className="fixed top-0 left-0 z-40 m-4 text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
|
||||
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"
|
||||
@ -163,7 +163,7 @@ function UserSection({ session }) {
|
||||
|
||||
function SignInButton() {
|
||||
return (
|
||||
<div className="items-center py-6" onClick={() => signIn()}>
|
||||
<div className="items-center py-4" onClick={() => signIn()}>
|
||||
<a href="/api/auth/signin">Впишете се</a>
|
||||
</div>
|
||||
);
|
||||
@ -173,13 +173,13 @@ function UserDetails({ session }) {
|
||||
return (
|
||||
<>
|
||||
<hr className="m-0" />
|
||||
<div className="flex items-center py-4 -mx-2">
|
||||
<div className="flex items-center">
|
||||
{session.user.image && (
|
||||
<img className="object-cover mx-2 rounded-full h-9 w-9" src={session.user.image} alt="avatar" />
|
||||
)}
|
||||
<div className="ml-3 overflow-hidden">
|
||||
<p className="mx-2 mt-2 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
|
||||
<p className="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
|
||||
<p className="mx-1 mt-1 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
|
||||
<p className="mx-1 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
|
||||
<a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>Излезте</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -198,7 +198,7 @@ function FooterSection() {
|
||||
footerMenu.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-2 mt-2 cursor-pointer hover:underline hover:text-blue-600 dark:hover:text-blue-400 "
|
||||
className="px-4 py-1 mt-2 cursor-pointer hover:underline hover:text-blue-600 dark:hover:text-blue-400 "
|
||||
onClick={() => navigateTo(item.url)}
|
||||
>
|
||||
<span className="text-gray-700 dark:text-gray-300 font-medium">{item.text}</span>
|
||||
|
||||
@ -169,7 +169,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
||||
|
||||
fs.writeFileSync(path.join(outputPath, `shifts ${year}.${month}.json`), JSON.stringify(monthlySchedule), 'utf8');
|
||||
// Load the Handlebars template from a file
|
||||
const template = fs.readFileSync("./src/templates/word.html", "utf8");
|
||||
const template = fs.readFileSync("./src/templates/schedule.hbs", "utf8");
|
||||
generateTemplateFile(monthlySchedule, template).then((result) => {
|
||||
const filename = path.join(outputPath, `schedule ${year}.${month}.html`)
|
||||
//fs.writeFileSync(filename, result, "utf8");
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -62,10 +62,6 @@ const uploadTmp = multer({ storage: storageMem });
|
||||
|
||||
const prisma = common.getPrismaClient();
|
||||
|
||||
|
||||
// krasi test
|
||||
|
||||
|
||||
// handlers
|
||||
app
|
||||
.prepare()
|
||||
|
||||
136
src/templates/schedule.hbs
Normal file
136
src/templates/schedule.hbs
Normal file
@ -0,0 +1,136 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Event Schedule</title>
|
||||
<style>
|
||||
/* template */
|
||||
/* Word-specific styles */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
padding: 4px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 12.5pt;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 2px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 12.5pt;
|
||||
}
|
||||
|
||||
|
||||
/* Word-specific styles */
|
||||
@media screen and (min-width: 0\0) {
|
||||
table {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* custom styles */
|
||||
.col1 {
|
||||
text-align: center;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.col2 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
/* Define different header colors for each week */
|
||||
.week1 {
|
||||
background-color: #FFF766;
|
||||
}
|
||||
|
||||
.week2 {
|
||||
background-color: #B4C6E7;
|
||||
}
|
||||
|
||||
.week3 {
|
||||
background-color: #ED7D31;
|
||||
}
|
||||
|
||||
.week4 {
|
||||
background-color: #BFBFBF;
|
||||
}
|
||||
|
||||
.week5 {
|
||||
background-color: #C785C8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{#each events}}
|
||||
{{!-- <div class="block md:hidden">
|
||||
<!-- Iterate over your data, creating a card for each row -->
|
||||
<div class="p-4 bg-white shadow rounded-lg mb-3">
|
||||
<div class="week{{week}}"><strong>{{dayOfWeek}} {{dayOfMonth}}:</strong> {{placeOfEvent}}</div>
|
||||
{{#each shifts}}
|
||||
|
||||
<div><strong>{{time}}:</strong>{{names}} </div>
|
||||
<div>{{notes}}<strong>{{notes_bold}}</strong></div>
|
||||
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#each shifts}}
|
||||
<tr>
|
||||
<td class="col1">{{time}}</td>
|
||||
<td class="col2">{{names}}</td>
|
||||
<td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</div> --}}
|
||||
<div style="page-break-before: always;"
|
||||
class="hidden md:block"></div>
|
||||
<table>
|
||||
<thead class="week{{week}}">
|
||||
<tr>
|
||||
<th colspan="3">{{dayOfWeek}} {{dayOfMonth}}<br />
|
||||
{{placeOfEvent}}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each shifts}}
|
||||
<tr>
|
||||
<td class="col1">{{time}}</td>
|
||||
<td class="col2">{{names}}</td>
|
||||
<td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div style="page-break-before: always;"></div>
|
||||
<div style="margin-bottom: 50px;"></div>
|
||||
{{#if @last}}
|
||||
<!-- Don't add margin after the last table -->
|
||||
{{else}}
|
||||
<!-- Add margin after the table -->
|
||||
<br><br><br>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -78,12 +78,13 @@
|
||||
.week5 {
|
||||
background-color: #C785C8;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{#each events}}
|
||||
<div style="page-break-before: always;"></div>
|
||||
<div style="page-break-before: always;" class="hidden md:block"></div>
|
||||
<table>
|
||||
<thead class="week{{week}}">
|
||||
<tr>
|
||||
@ -97,7 +98,7 @@
|
||||
<tr>
|
||||
<td class="col1">{{time}}</td>
|
||||
<td class="col2">{{names}}</td>
|
||||
<td class="col3">{{notes}}<strong>{{notes_bold}}</strong></td>
|
||||
<td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user