- - +
@@ -112,6 +112,12 @@ private bool _showDropdown = false; private bool _login = true; private bool _register = true; + private bool _navOpen = false; + + protected override void OnInitialized() + { + NavigationManager.LocationChanged += LocationChanged; + } protected override void OnParametersSet() { @@ -127,8 +133,14 @@ } } - private void ToggleDropdown() + private void LocationChanged(object sender, LocationChangedEventArgs args) { - _showDropdown = !_showDropdown; + _navOpen = false; + StateHasChanged(); + } + + public void Dispose() + { + NavigationManager.LocationChanged -= LocationChanged; } } diff --git a/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css b/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css index b8d6076..0dace3a 100644 --- a/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css +++ b/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css @@ -1,7 +1,20 @@ -/* Oqtane Styles */ -html, body { - height: 100%; - margin: 0; +/* =========================== + Standard Layout + =========================== */ + +body {} + +/* Login-Button (Mobile + Desktop) */ +.app-menu-footer .btn-login, +.app-menu-footer .login-btn, +.app-menu-footer button, +.app-menu-footer a { + background-color: #ffffff !important; + border: 1px solid #ccc !important; + color: #555 !important; + padding: 6px 14px !important; + border-radius: 6px !important; + font-weight: 500 !important; } .navigation { @@ -24,7 +37,7 @@ html, body { body { - padding-top: 100px; /* Höhe der fixierten Navigation kompensieren */ + padding-top: 100px; /* H�he der fixierten Navigation kompensieren */ } .app-logo .img-fluid { @@ -70,20 +83,12 @@ main.flex-fill { flex: 1 0 auto; /* Flex-grow 1, flex-shrink 0, flex-basis auto */ display: flex; flex-direction: column; - min-height: 0; /* Wichtig für flexbox overflow*/ + min-height: 0; /* Wichtig f�r flexbox overflow*/ } .content { - width: 80vw; /* Fixe Breite 80% Viewport */ - margin: 0 auto; - flex-grow: 1; - display: flex; - flex-direction: column; - border: 3px solid #75767B; - border-top: none; - border-bottom: none; - background-color: white; - padding: 1rem; + margin-top: 60px; + /* ungefähr Höhe der Navbar */ } /* App Logo */ @@ -92,7 +97,7 @@ main.flex-fill { padding: 0 5px 0 5px; } -.table > :not(caption) > * > * { +.table> :not(caption)>*>* { box-shadow: none; } @@ -100,12 +105,18 @@ main.flex-fill { background-color: #ffffff !important; border-width: 0.5px !important; border-bottom-color: #ccc !important; + color: #000 !important; } .table .form-select { background-color: #ffffff !important; border-width: 0.5px !important; border-bottom-color: #ccc !important; + color: #000 !important; +} + +.bg-primary { + background-color: #b1b0b0 !important; } .table .btn-primary { @@ -120,6 +131,10 @@ main.flex-fill { z-index: 1; } +.dropdown-menu { + background-color: grey; +} + .controls { z-index: 2000; padding-top: 15px; @@ -127,58 +142,124 @@ main.flex-fill { margin-right: 10px; } -.app-menu .nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; - white-space: nowrap; +.footer { + padding-top: 15px; + min-height: 40px; + text-align: center; + color: #ffffff; + z-index: 1000; +} + + +/* =================================================== + NAVBAR / BURGER / SIDEBAR + =================================================== */ + +/* Navbar als durchgehende Flex-Zeile */ +.app-navbar { + display: flex; + flex-wrap: nowrap; + /* NICHT umbrechen auf Desktop */ + align-items: center; + justify-content: flex-start; + z-index: 1000; +} + +.app-navbar-left, +.app-navbar-right { + display: flex; + align-items: center; +} + +/* etwas Luft zwischen Logo und Menü */ +.app-navbar-left { + margin-right: 1rem; +} + +/* Versteckte Checkbox steuert die Sidebar */ +.nav-toggle { + display: none; +} + +/* Burger-Icon (wird nur auf Mobil eingeblendet) */ +.nav-toggle-label { + display: none; + /* nur auf Mobil sichtbar */ + cursor: pointer; + padding: 0.25rem 0.5rem; + margin-left: auto; +} + +.nav-toggle-label span { + display: block; + width: 22px; + height: 2px; + margin: 4px 0; + background-color: #ffffff; +} + +/* Menü-Container */ +.app-menu { + display: flex; + background-color: #b1b0b0; +} + +/* Bereich für die Seitenlinks – Basis: horizontales Flex */ +.app-menu-items { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-content: center; +} + +/* Bereich für Login/Register */ +.app-menu-footer { + display: flex; + gap: 0.5rem; +} + +/* Untermenü (Kinder-Seiten) etwas eingerückt */ +.app-submenu { margin-left: 1rem; } -.app-menu .nav-item a { - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - padding-left: 1rem; +/* Nav-Items */ +.app-menu .nav-item { + padding-bottom: 0.25rem; } -.app-menu .nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; -} - -.app-menu .nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -.app-menu .nav-link .oi { - width: 1.5rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; -} - -.navbar-toggler { - background-color: #fff; - border: 2px solid #75767B; +/* Hover-/Active-Style für Links */ +.app-menu .nav-link { + padding: 6px 12px; border-radius: 6px; - padding: 0.5rem 0.75rem; - margin: .5rem; - box-shadow: 0 2px 6px rgba(0,0,0,0.08); - transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; + transition: background-color 0.2s ease, color 0.2s ease; } - .navbar-toggler:hover, .navbar-toggler:focus { - background-color: #f0f0f0; - border-color: #444; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - outline: none; +.app-menu .nav-link:hover { + background-color: #4a4a4a; + color: #ffffff !important; +} + +.app-menu .nav-link.active { + background-color: #3b3b3b; + color: #ffffff !important; +} + + +/* =========================== + DESKTOP (ab 768px) + =========================== */ +@media (min-width: 1000px) { + + /* Navbar ist Referenz für die absolute Zentrierung */ + .app-navbar { + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: flex-start !important; + position: relative !important; + min-height: 60px; + /* optional: fixe Höhe */ } .hamburger { @@ -210,7 +291,163 @@ main.flex-fill { bottom: 0; } - /* Animation beim Klick (wird aktiv, wenn .active hinzugefügt wird) */ + /* Animation beim Klick (wird aktiv, wenn .active hinzugef�gt wird) */ + .hamburger.active span:nth-child(1) { + transform: translateY(12px) rotate(45deg); + } + + .hamburger.active span:nth-child(2) { + opacity: 0; + } + + .hamburger.active span:nth-child(3) { + transform: translateY(-12px) rotate(-45deg); + } + + + /* Menü nur als Container für den Footer */ + .app-menu { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + flex: 1 1 auto !important; + gap: 0.75rem !important; + position: static !important; + width: auto !important; + } + + /* NAV-LINKS: exakt in der Mitte der ganzen Navbar / Seite */ + .app-menu-items { + position: absolute !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + display: flex !important; + flex-direction: row !important; + flex-wrap: nowrap !important; + gap: 0.75rem !important; + width: auto !important; + z-index: 1; + } + + /* Login/User bleiben im Menü, aber rechts */ + .app-menu-footer { + display: flex !important; + gap: 0.75rem !important; + margin-left: auto !important; + /* schiebt Footer nach rechts */ + padding: 0 !important; + border: none !important; + background: none !important; + width: auto !important; + } + + .app-menu .nav-item { + display: inline-block !important; + } +} + +/* =========================== + MOBILE (unter 768px) + =========================== */ + +@media (max-width: 1000px) { + + .navbar { + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + } + + /* Platz unter der Navbar */ + .content { + position: relative; + top: 150px; + } + + /* Burger sichtbar machen */ + .nav-toggle-label { + display: flex; + flex-direction: column; + justify-content: center; + } + + /* Sidebar-Wrapper rechts */ + .app-menu { + position: fixed; + top: 80px; + /* Abstand von oben (über der Navbar + Burger) */ + right: 0; + bottom: 0; + width: 70%; + max-width: 280px; + /* Höhe an das neue top anpassen */ + background-color: #b1b0b0; + flex-direction: column; + align-items: stretch; + padding: 1rem; + gap: 0.5rem; + transform: translateX(100%); + transition: transform 0.3s ease; + z-index: 1500; + } + + /* Seitenlinks vertikal + scrollbar + zentriert */ + .app-menu-items { + flex: 1; + overflow-y: auto; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 0.25rem; + } + + /* Footer (Login/Register) fixiert unten */ + .app-menu-footer { + width: 100%; + padding-top: 0.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.25); + display: flex; + flex-direction: column; + /* untereinander statt nebeneinander */ + gap: 0.5rem; + /* Abstand zwischen Host und Logout */ + justify-content: right; + } + +.hamburger { + width: 40px; + height: 28px; + position: relative; + cursor: pointer; +} + + .hamburger span { + position: absolute; + left: 0; + width: 100%; + height: 4px; + background: #e5e7eb; + border-radius: 2px; + transition: transform 0.25s ease, opacity 0.25s ease; + } + + .hamburger span:nth-child(1) { + top: 0; + } + + .hamburger span:nth-child(2) { + top: 12px; + } + + .hamburger span:nth-child(3) { + bottom: 0; + } + + /* Animation beim Klick (wird aktiv, wenn .active hinzugef�gt wird) */ .hamburger.active span:nth-child(1) { transform: translateY(12px) rotate(45deg); } @@ -225,4 +462,10 @@ main.flex-fill { + .app-menu .nav-link { + width: 100%; + display: block; + font-size: clamp(12px, 3.5vw, 15px); + } +} \ No newline at end of file diff --git a/Package/SZUAbsolventenverein.Theme.Website.Package.csproj b/Package/SZUAbsolventenverein.Theme.Website.Package.csproj index 67468ce..529c0ac 100644 --- a/Package/SZUAbsolventenverein.Theme.Website.Package.csproj +++ b/Package/SZUAbsolventenverein.Theme.Website.Package.csproj @@ -4,6 +4,8 @@ net10.0 false false + SZUAbsolventenverein.Theme.Website + 1.0.12 diff --git a/Package/SZUAbsolventenverein.Theme.Website.nuspec b/Package/SZUAbsolventenverein.Theme.Website.nuspec index 620067b..fba4d1e 100644 --- a/Package/SZUAbsolventenverein.Theme.Website.nuspec +++ b/Package/SZUAbsolventenverein.Theme.Website.nuspec @@ -1,8 +1,8 @@ - $projectname$ - 1.0.0 + SZUAbsolventenverein.Theme.Website + 1.0.13 SZUAbsolventenverein SZUAbsolventenverein Website @@ -20,9 +20,9 @@ - - - + + + \ No newline at end of file diff --git a/Package/release.cmd b/Package/release.cmd index ed871cb..c0d81a9 100644 --- a/Package/release.cmd +++ b/Package/release.cmd @@ -4,4 +4,4 @@ set ProjectName=%2 del "*.nupkg" "..\..\oqtane.framework\oqtane.package\nuget.exe" pack %ProjectName%.nuspec -Properties targetframework=%TargetFramework%;projectname=%ProjectName% -XCOPY "*.nupkg" "..\..\oqtane.framework\Oqtane.Server\wwwroot\Packages\" /Y \ No newline at end of file +XCOPY "*.nupkg" "..\..\oqtane.framework\Oqtane.Server\wwwroot\Packages\" /Y diff --git a/Package/release.sh b/Package/release.sh old mode 100644 new mode 100755 index 57f25e8..612c5c1 --- a/Package/release.sh +++ b/Package/release.sh @@ -1,7 +1,8 @@ TargetFramework=$1 ProjectName=$2 +cd "$(dirname "$0")" find . -name *.nupkg -delete dotnet pack $ProjectName.nuspec "/p:targetframework=${TargetFramework};ProjectName=${ProjectName}" -cp -f *.nupkg ../../oqtane.framework/Oqtane.Server/Packages/ \ No newline at end of file +cp -f *.nupkg ../../oqtane.framework/Oqtane.Server/Packages/ diff --git a/RELEASE_GUIDE.md b/RELEASE_GUIDE.md new file mode 100644 index 0000000..0cde701 --- /dev/null +++ b/RELEASE_GUIDE.md @@ -0,0 +1,64 @@ +# Release Anleitung (Mac / Linux) + +> [!NOTE] +> Diese Anleitung und das verwendete Skript sind für **macOS** (und Linux) optimiert. + +## 1. Release Skript +Das Skript zur Erstellung des Releases befindet sich hier: +`Theme.SZUAbsolventenverein/Package/release.sh` + +## 2. Version ändern + +Die Versionsnummer muss in den folgenden **4 Dateien** angepasst werden: + +1. **Package Projektdatei** + * Datei: `Theme.SZUAbsolventenverein/Package/SZUAbsolventenverein.Theme.Website.Package.csproj` + * Zeile: `1.0.11` + +2. **NuGet Spezifikation (Nuspec)** + * Datei: `Theme.SZUAbsolventenverein/Package/SZUAbsolventenverein.Theme.Website.nuspec` + * Zeile: `1.0.11` + +3. **Client Projektdatei** (optional) + * Datei: `Theme.SZUAbsolventenverein/Client/SZUAbsolventenverein.Theme.Website.Client.csproj` + * Zeile: `1.0.11` + +4. **Theme Info (C# Code)** + * Datei: `Theme.SZUAbsolventenverein/Client/ThemeInfo.cs` + * Zeile: `Version = "1.0.11",` + +## 3. Release Build erstellen + +Führe das `release.sh` Skript im Terminal aus. + +```bash +# In das Verzeichnis wechseln (falls noch nicht dort) +cd /Users/adamgaiswinkler/Theme.SZUAbsolventenverein/Package + +# Skript ausführen +./release.sh net9.0 SZUAbsolventenverein.Theme.Website +``` + +**Was passiert dabei?** +1. Der Code wird im `Release` Modus kompiliert. +2. Ein NuGet-Paket (`.nupkg`) wird erstellt. +3. Das Paket (`.nupkg`) wird im Ordner **`Theme.SZUAbsolventenverein/Package/`** gespeichert. + + > [!IMPORTANT] + > Du musst dieses Paket nun selbst nehmen und dorthin kopieren oder hochladen, wo du es installieren möchtest. + +### Windows + +Führe die `release.cmd` in der Eingabeaufforderung (cmd) oder PowerShell aus: + +```cmd +cd Theme.SZUAbsolventenverein\Package +release.cmd net9.0 SZUAbsolventenverein.Theme.Website +``` + +## 4. Server neustarten + +Damit das neue Theme geladen wird, musst du den Oqtane Server neustarten (falls er läuft): + +1. Server stoppen (`Ctrl + C` im Terminal). +2. Server neu starten: `dotnet run` (im Oqtane.Server Verzeichnis).