From 2b6e81c0745923005589973d8b4064864e5d9362 Mon Sep 17 00:00:00 2001 From: ernolf Date: Thu, 17 Oct 2024 17:05:07 +0200 Subject: [PATCH 1/4] fix(ui): make loading-overlay cover the logout button Signed-off-by: ernolf --- php/public/style.css | 4 ++-- php/templates/containers.twig | 5 +---- php/templates/layout.twig | 5 ++++- php/templates/login.twig | 5 +---- 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/php/public/style.css b/php/public/style.css index 9a1e578f..6c01613f 100644 --- a/php/public/style.css +++ b/php/public/style.css @@ -418,6 +418,7 @@ label { font-size: 36px; /* Adjust font size */ cursor: pointer; /* Change cursor to pointer */ outline: none; + z-index: 9999; /* Ensures the icon is on top of every layer */ } /* Icon styling: default state */ @@ -449,7 +450,6 @@ label { position: relative; /* Ensures stacking order */ filter: grayscale(0%); /* Restore full color */ opacity: 1; /* Fully visible on hover */ - z-index: 1; /* Ensures the icon is on top of the shadow */ } /* Inner glow when hovered */ @@ -461,4 +461,4 @@ label { /* Remove hover effects when not hovering */ #theme-toggle:not(:hover) #theme-icon { opacity: 0.6; /* Slightly transparent */ -} \ No newline at end of file +} diff --git a/php/templates/containers.twig b/php/templates/containers.twig index 4017cf8c..87df4758 100644 --- a/php/templates/containers.twig +++ b/php/templates/containers.twig @@ -683,7 +683,4 @@ -
-
-
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/php/templates/layout.twig b/php/templates/layout.twig index 669854f8..f5523c76 100644 --- a/php/templates/layout.twig +++ b/php/templates/layout.twig @@ -12,5 +12,8 @@ +
+
+
- \ No newline at end of file + diff --git a/php/templates/login.twig b/php/templates/login.twig index 04175cc3..5478225f 100644 --- a/php/templates/login.twig +++ b/php/templates/login.twig @@ -22,7 +22,4 @@ {% endif %} -
-
-
-{% endblock %} \ No newline at end of file +{% endblock %} From a5b25ab56bbb5015b5a9b3c6a5ae878ed90d59db Mon Sep 17 00:00:00 2001 From: ernolf Date: Thu, 17 Oct 2024 17:18:58 +0200 Subject: [PATCH 2/4] fix(ui): ensure theme-toggle button is visible on first visit Signed-off-by: ernolf --- php/public/toggle-dark-mode.js | 18 +++++++++--------- php/templates/layout.twig | 6 ++++-- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/php/public/toggle-dark-mode.js b/php/public/toggle-dark-mode.js index 1ec2c114..9fc17193 100644 --- a/php/public/toggle-dark-mode.js +++ b/php/public/toggle-dark-mode.js @@ -1,7 +1,7 @@ // Function to toggle theme function toggleTheme() { const currentTheme = document.documentElement.getAttribute('data-theme'); - const newTheme = (currentTheme === 'dark') ? 'light' : 'dark'; + const newTheme = (currentTheme === 'dark') ? '' : 'dark'; // Toggle between no theme and dark theme document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); @@ -13,14 +13,14 @@ function toggleTheme() { // Function to apply saved theme from localStorage function applySavedTheme() { const savedTheme = localStorage.getItem('theme'); - if (savedTheme) { - document.documentElement.setAttribute('data-theme', savedTheme); - - // Ensure the icon is set correctly based on the saved theme - const themeIcon = document.getElementById('theme-icon'); - themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙'; + if (savedTheme === 'dark') { + document.documentElement.setAttribute('data-theme', 'dark'); + document.getElementById('theme-icon').textContent = '☀️'; // Sun icon for dark mode + } else { + document.documentElement.removeAttribute('data-theme'); // Default to light theme (no data-theme) + document.getElementById('theme-icon').textContent = '🌙'; // Moon icon for light mode } } -// Apply theme when the page loads -document.addEventListener('DOMContentLoaded', applySavedTheme); \ No newline at end of file +// Immediately apply the saved theme +applySavedTheme(); diff --git a/php/templates/layout.twig b/php/templates/layout.twig index f5523c76..cad5ae7a 100644 --- a/php/templates/layout.twig +++ b/php/templates/layout.twig @@ -4,16 +4,18 @@ +
{% block body %}{% endblock %}
- -
+ From de372c11f3b6e07c55a614b865411cdca2d48af6 Mon Sep 17 00:00:00 2001 From: ernolf Date: Thu, 17 Oct 2024 17:21:09 +0200 Subject: [PATCH 3/4] fix(ui): ad darkmode for loading spinner Signed-off-by: ernolf --- php/public/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/php/public/style.css b/php/public/style.css index 6c01613f..7e6b364a 100644 --- a/php/public/style.css +++ b/php/public/style.css @@ -14,6 +14,7 @@ --color-info: #0071ad; --color-info-hover: #00aaef; --color-border-maxcontrast: #7d7d7d; + --color-loader: #f3f3f3; --border: .5px; --border-hover: 2px; --border-radius: 7px; @@ -35,6 +36,7 @@ --color-error-text: #ff8080; --color-info: #00aeff; --color-info-hover: #33beff; + --color-loader: var(--color-border-maxcontrast); --border-hover: var(--border); } @@ -385,7 +387,7 @@ label { } .loader { - border: 16px solid #f3f3f3; + border: 16px solid var(--color-loader); border-radius: 50%; border-top: 16px solid var(--color-nextcloud-blue); width: 120px; From 9da4094ff827fc18fc2b6edbc6f91789e06ac9cc Mon Sep 17 00:00:00 2001 From: "Simon L." Date: Fri, 18 Oct 2024 14:57:06 +0200 Subject: [PATCH 4/4] fix mobile layout Signed-off-by: Simon L. --- php/public/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/php/public/style.css b/php/public/style.css index 7e6b364a..85a82b80 100644 --- a/php/public/style.css +++ b/php/public/style.css @@ -237,6 +237,7 @@ select:hover { textarea { border-radius: var(--border-radius); border: .5px solid var(--color-main-border); + max-width: 100%; } input[type="text"]:focus, @@ -281,7 +282,7 @@ html[data-theme="dark"] ::-webkit-scrollbar-track { background-color: var(--color-main-background); border-radius: var(--border-radius-large); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - max-height: calc(100dvh - 40px); + max-height: calc(100dvh - 50px); overflow: hidden; } @@ -464,3 +465,9 @@ label { #theme-toggle:not(:hover) #theme-icon { opacity: 0.6; /* Slightly transparent */ } + +@media only screen and (max-width: 800px) { + .container { + margin: 50px auto 0px auto; + } +}