bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add modal component

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-09-12 20:13:03 +07:00
parent 2f56cd193d
commit db8cd82de9
3 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
view/client/layout/base.templ
View File

@ -17,8 +17,12 @@ templ Base(title string){
</head>
<body>
<div id="content">
{ children... }
@modal()
<div id="main-content">
{ children... }
</div>
</div>
@modalScript()
</body>
</html>
}
@ -39,7 +43,10 @@ templ BaseAuth(title string){
</head>
<body>
<div id="content">
{ children... }
@modal()
<div id="main-content">
{ children... }
</div>
</div>
<script type="text/javascript">
function addScript() {
@ -53,10 +60,47 @@ templ BaseAuth(title string){
}
addScript()
</script>
@modalScript()
</body>
</html>
}
templ modal() {
<div id="modalContainer" class="fixed inset-0 z-50 flex items-center justify-center hidden p-4 sm:p-6 md:p-8">
<div class="fixed inset-0 bg-black opacity-50 transition-opacity duration-300"></div>
<div id="modal" class="bg-white rounded-lg shadow-xl w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl p-4 sm:p-6 md:p-8 relative z-10 overflow-y-auto max-h-[90vh]">
<h2 class="text-xl sm:text-2xl font-bold mb-4">Modal Title</h2>
<div class="prose prose-sm sm:prose lg:prose-lg">
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<button id="closeModal" class="mt-6 bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
Close
</button>
</div>
</div>
}
templ modalScript(){
<script type="text/javascript">
window.modalContainer = document.getElementById('modalContainer');
window.closeModalBtn = document.getElementById('closeModal');
window.content = document.getElementById('content');
function toggleModal() {
window.modalContainer.classList.contains('hidden')
? modalContainer.classList.remove('hidden')
: modalContainer.classList.add('hidden');
}
window.closeModalBtn.addEventListener('click', toggleModal);
window.modalContainer.addEventListener('click', function(event) {
if (event.target === modalContainer) {
toggleModal();
}
})
</script>
}
templ Navbar(user types.User) {
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">
@ -69,7 +113,7 @@ templ Navbar(user types.User) {
if user.Authenticated {
<div class="flex items-center gap-4">
<div
class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
class="inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<defs>
@ -119,7 +163,7 @@ templ Navbar(user types.User) {
}
templ Footer() {
<footer class="bg-white p-6 md:p-8 w-full relative bottom-0 border-t border-gray-200 w-full py-8">
<footer class="bg-white p-6 md:p-8 w-full bottom-0 border-t border-gray-200 w-full py-8">
<div class="container mx-auto flex flex-col items-center justify-between gap-6 md:flex-row">
<div class="flex items-center gap-2">
<img src="/public/brand.svg" width="48" height="48" alt="Filekeeper Logo" />

9
view/client/user/user.templ
View File

@ -43,7 +43,7 @@ templ content(message types.Message, title string, user types.User, allowance *t
</label>
<div class="flex items-center gap-4">
<div
class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
class="inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
<span class="font-medium text-gray-600">JL</span>
</div>
<button
@ -82,7 +82,7 @@ templ content(message types.Message, title string, user types.User, allowance *t
</div>
<div class="grid gap-2">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative w-full overflow-auto">
<div class="w-full overflow-auto">
<table class="w-full caption-bottom text-sm">
<thead class="[&amp;_tr]:border-b">
<tr
@ -297,10 +297,9 @@ templ content(message types.Message, title string, user types.User, allowance *t
}
});
let allowanceProgress = document.getElementById(`allowanceProgress`);
const AllowanceUsedPercent = JSON.parse(document.getElementById('AllowanceUsedPercent').textContent);
window.allowanceProgress = document.getElementById(`allowanceProgress`);
window.AllowanceUsedPercent = JSON.parse(document.getElementById('AllowanceUsedPercent').textContent);
allowanceProgress.style.width = `${AllowanceUsedPercent}%`;
console.log(AllowanceUsedPercent)
</script>
<script src="/public/validatePassword.js" />
@layout.Footer()