From 76aca603ea5c8f7aae472299b8d96c0d78bcc33f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bruno=20Ryb=C3=A1rsky?= Date: Tue, 6 Feb 2024 19:33:25 +0100 Subject: [PATCH] fix statusmessage --- assets/script.js | 26 ++++++++ assets/style.css | 143 +++++++++++----------------------------- templates/skeleton.html | 1 + 3 files changed, 67 insertions(+), 103 deletions(-) diff --git a/assets/script.js b/assets/script.js index c97215d..680dd91 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,4 +1,30 @@ let UserInfo; + +function handleResponse(data, successMessage, failureMessage) { + const statusMessageContainer = document.getElementById("statusMessageContainer"); + + const statusMessage = document.createElement("div"); + statusMessage.classList.add("status-message"); + + if (data.Status === 'Success') { + statusMessage.innerText = successMessage; + statusMessage.classList.add("success"); + } else { + statusMessage.innerText = failureMessage; + statusMessage.classList.add("failure"); + } + + statusMessageContainer.appendChild(statusMessage); + + // Automatically remove the message after 3 seconds + setTimeout(() => { + statusMessage.style.opacity = "0"; + setTimeout(() => { + statusMessage.remove(); + }, 500); + }, 3000); +} + async function doAction(url, requestData, successMessage, failureMessage, silent = false) { try { const params = new URLSearchParams(); diff --git a/assets/style.css b/assets/style.css index 762d04f..1c02027 100644 --- a/assets/style.css +++ b/assets/style.css @@ -27,25 +27,41 @@ body { align-items: center; } +nav, footer { + padding: 1.2rem 1rem; + background-color: rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2); +} + +#navbar_container, #page_container, #footer_container { + width: 100%; +} + nav { display: flex; flex-direction: row; justify-content: space-between; + height: 75px !important; + position: relative; + z-index: 500; } -ul { +ul, header ul, header ul li, ul.navpage_list { display: flex; flex-direction: row; gap: 2.5rem; list-style: none; padding-left: 0; + width: fit-content; } -li { +li, li.navpage_item { list-style: none; } -li a { +li a, li.navpage_item { position: relative; padding-bottom: 0.45rem; color: var(--primary-text); @@ -53,18 +69,6 @@ li a { transition: all 0.3s ease; } -/*li a::after { - content: ""; - position: absolute; - height: 4px; - width: 0; - bottom: 0; - left: 0; - background-color: var(--primary); - transition: all 0.3s ease; - border-radius: 15px; -}*/ - li a:hover::after { width: 85%; margin: 0 auto; @@ -110,11 +114,10 @@ header { align-items: center; text-align: center; } -header h1 { + +header h1, header a { margin: 0; padding: 0; -} -header a { color: var(--primary); } @@ -124,27 +127,11 @@ header hr { width: 30%; } -.navsite_list{ +.navsite_list, .navpage_list, .navsite_item, .navsite_item:hover .navpage_list, .navsite_item:not(:hover) .navpage_list { display: flex; flex-direction: row; gap: 3.25rem; } -.navpage_list{ - display: none; - flex-direction: column; -} - -.navsite_item { - justify-content: center; - align-items: center; - text-align: center; - width: 120px; -} - -.navsite_item:hover .navpage_list{ - display: flex !important; -} - .navpage_list { background-color: var(--third-bg); @@ -156,7 +143,7 @@ header hr { border: 0 solid transparent; transition: max-height 0.3s ease, border 0.325s ease; position: relative; - z-index: 999; + z-index: 2; } .navsite_item:hover .navpage_list { @@ -170,81 +157,49 @@ header hr { transition-delay: 0.1s; } - -li.navpage_item{ +li.navpage_item { padding-left: 20px; padding-right: 20px; } -ul.navpage_list{ +ul.navpage_list { gap: 10px; } -header ul { - display: flex; - flex-direction: column; - gap: 0; - text-align: left; - width: fit-content; -} -header ul li { - list-style: circle; - width: fit-content; -} - -.feature-list { +.feature-list, .feature-list-ul, .feature-list-ul ul { margin: auto; width: fit-content; display: block; } -.feature-list-ul { - margin: auto; -} - -.feature-list-ul ul { - margin-top: 5px; - margin-left: 20px; -} - -#StatusMessage { - display: none; - position: fixed; - top: 20px; - right: 20px; - padding: 10px; - background-color: var(--third-bg); - color: var(--primary-text); - border-radius: 5px; - opacity: 0; +.status-message { + background-color: #dff0d8; /* Success background color */ + border: 1px solid #3c763d; /* Success border color */ + color: #3c763d; /* Success text color */ + padding: 15px; + margin-bottom: 10px; + opacity: 1; transition: opacity 0.5s ease-in-out; } +.status-message.failure { + background-color: #f2dede; /* Failure background color */ + border: 1px solid #a94442; /* Failure border color */ + color: #a94442; /* Failure text color */ +} + table.list-table > tbody, table.list-table > tbody > th, table.list-table > tbody > tr, table.list-table > tbody > tr > td { border: 2px solid var(--primary); border-collapse: collapse; } -/* */ -/* ZAČÍNAJ VŠETKO S ".dashboard" */ - - .dashboard { width: 100%; height: 100%; text-align: center; } -/* */ - -#loginForm input { - border-radius: 50px; - background: none; - border: 2px solid var(--primary); - width: 175px; -} - -#register_Form input { +#loginForm input, #register_Form input { border-radius: 50px; background: none; border: 2px solid var(--primary); @@ -253,22 +208,4 @@ table.list-table > tbody, table.list-table > tbody > th, table.list-table > tbod #page_container { flex-grow: 1; -} - -nav, footer { - padding: 1.2rem 1rem; - background-color: rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2); - -moz-box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2); - box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2); -} - -#navbar_container { - height: 75px !important; - position: relative; - z-index: 500; -} - -#navbar_container, #page_container, #footer_container { - width: 100%; } \ No newline at end of file diff --git a/templates/skeleton.html b/templates/skeleton.html index 89ffb06..fec4d33 100644 --- a/templates/skeleton.html +++ b/templates/skeleton.html @@ -15,6 +15,7 @@ +
__TEMPLATE__PAGE__