Diplomarbeit-Absolventenverein/Theme.SZUAbsolventenverein
6
0
Fork 0
Code Issues 3 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

neue ansicht wurde implementiert. Testen kommt noch. Cookie anischt geht auch neue version 1.0.5 ist aber noch ohne neue ansicht

Browse Source
This commit is contained in:
Adam Gaiswinkler
2025-12-03 20:56:07 +00:00
parent 6422be328f
commit 05e5e466ce
4 changed files with 290 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Client/ThemeInfo.cs
View File

@ -10,7 +10,7 @@ namespace SZUAbsolventenverein.Theme.Website
public Oqtane.Models.Theme Theme => new Oqtane.Models.Theme
{
Name = "SZUAbsolventenverein Website",
Version = "1.0.4",
Version = "1.0.5",
PackageName = "SZUAbsolventenverein.Theme.Website",
ThemeSettingsType = "SZUAbsolventenverein.Theme.Website.ThemeSettings, SZUAbsolventenverein.Theme.Website.Client.Oqtane",
ContainerSettingsType = "SZUAbsolventenverein.Theme.Website.ContainerSettings, SZUAbsolventenverein.Theme.Website.Client.Oqtane",

82
Client/Themes/Theme1.razor
View File

@ -1,27 +1,86 @@
@namespace SZUAbsolventenverein.Theme.Website
@namespace SZUAbsolventenverein.Theme.Website
@inherits ThemeBase
@inject ISettingService SettingService
<main role="main">
<nav class="navbar navbar-dark bg-primary fixed-top">
<div class="d-flex align-items-center gap-2 order-1 order-md-1">
<nav class="navbar navbar-dark bg-primary fixed-top app-navbar">
<!-- Logo links -->
<div class="d-flex align-items-center gap-2 app-navbar-left">
<Logo />
</div>
</div>
<div class="d-flex align-items-right gap-2 order-1 order-md-1">
<Menu Orientation="Horizontal"></Menu>
<!-- Versteckte Checkbox zum Steuern des Menüs (nur HTML, kein Blazor) -->
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<!-- Burger-Icon, das die Checkbox toggelt -->
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
<span></span>
<span></span>
</label>
<!-- Menü-Container, der per :checked ein-/ausgeblendet wird -->
<div class="app-menu">
<div class="app-menu-items">
@if (PageState?.Pages != null)
{
// Diese Seitennamen sollen NICHT im Menü erscheinen
var hiddenNames = new[]
{
"Login", "Register", "Reset", "Profile",
"Search", "Privacy", "Terms", "Not Found", "NotFound"
};
@foreach (var page in PageState.Pages
.Where(p => p.ParentId == null
&& p.IsNavigation
&& !p.IsDeleted
&& !hiddenNames.Contains(p.Name)))
{
<div class="nav-item">
<a class="nav-link text-white" href="@(@page.Path)">
@(@page.Name)
</a>
</div>
<div class="d-flex align-items-center gap-2 order-1 order-md-1">
<div class="d-flex align-items-center gap-2 order-1 order-md-1">
<ControlPanel/>
var children = PageState.Pages
.Where(c => c.ParentId == page.PageId
&& c.IsNavigation
&& !c.IsDeleted
&& !hiddenNames.Contains(c.Name));
if (children.Any())
{
<div class="app-submenu">
@foreach (var child in children)
{
<div class="nav-item">
<a class="nav-link text-white" href="@child.Path">
@child.Name
</a>
</div>
<div class="d-flex align-items-center gap-2 order-1 order-md-1">
}
</div>
}
}
}
</div>
<!-- WICHTIG: Footer jetzt AUßERHALB von app-menu-items -->
<div class="app-menu-footer">
<UserProfile ShowRegister="@_register" />
<Login ShowLogin="@_login" />
</div>
</div>
<!-- Rechts: ControlPanel + User + Login -->
<div class="d-flex align-items-center gap-2 app-navbar-right">
<div class="d-flex align-items-center gap-2">
<ControlPanel/>
</div>
</nav>
</div>
</nav>
<div class="content">
<div class="container">
<div class="row">
@ -105,6 +164,7 @@
</div>
<Pane Name="Bottom Full Width" />
</div>
<CookieConsent />
</main>

322
Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css
View File

@ -1,5 +1,9 @@
/* ===========================
Standard Layout
=========================== */
body {
padding-top: 7rem;
}
/* App Logo */
@ -25,10 +29,11 @@ body {
border-bottom-color: #ccc !important;
color: #000 !important;
}
.bg-primary {
background-color: gray !important;
}
.table .btn-primary {
background-color: var(--bs-primary);
}
@ -40,8 +45,8 @@ body {
.alert-dismissible .btn-close {
z-index: 1;
}
.dropdown-menu {
.dropdown-menu {
background-color: grey;
}
@ -52,51 +57,6 @@ body {
margin-right: 10px;
}
.app-menu .nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
white-space: nowrap;
}
.app-menu .nav-item a {
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
padding-left: 1rem;
}
.app-menu .nav-item a.active {
background-color: dimgrey;
color: white;
}
.app-menu .nav-item a:hover {
background-color: dimgray;
color: white;
}
.app-menu .nav-link .oi {
width: 1.5rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.app-search input {
width: auto;
}
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
margin: .5rem;
}
div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
color: #ffffff;
}
.footer {
padding-top: 15px;
min-height: 40px;
@ -105,111 +65,233 @@ div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu
z-index: 1000;
}
@media (max-width: 991.98px) {
.app-search {
/* ===================================================
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;
}
/* 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;
}
/* Nav-Items */
.app-menu .nav-item {
padding-bottom: 0.25rem;
}
/* Hover-/Active-Style für Links */
.app-menu .nav-link {
padding: 6px 12px;
border-radius: 6px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.app-menu .nav-link:hover {
background-color: #4a4a4a;
color: #ffffff !important;
}
.app-search input {
display: none !important;
.app-menu .nav-link.active {
background-color: #3b3b3b;
color: #ffffff !important;
}
.app-search input + button {
position: initial;
padding-top: 7px;
padding-bottom: 7px;
/* ===========================
DESKTOP (ab 768px)
=========================== */
@media (min-width: 768px) {
/* Navbar: eine Zeile, Positionierungs-Referenz für Absolut-Elemente */
.app-navbar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative !important;
}
.app-search:active, .app-search:hover {
display: block;
position: fixed;
top: 0;
min-height: 96px;
width: 100%;
left: 0;
z-index: 999;
border-radius: 0;
/* Menübereich in der Mitte */
.app-menu {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important; /* Menüpunkte in der Mitte */
flex: 1 1 auto !important; /* füllt Platz zwischen Logo und rechts */
gap: 0.75rem !important;
position: static !important;
width: auto !important;
}
.app-search:active .app-form-inline, .app-search:hover .app-form-inline {
margin: 10px auto;
position: relative;
display: block;
max-width: 80%;
/* Menüpunkte horizontal zentriert */
.app-menu-items {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0.75rem !important;
width: auto !important;
}
.app-search:active .app-form-inline input, .app-search:hover .app-form-inline input {
width: 100%;
display: block !important;
/* Login/Register GANZ RECHTS in der Navbar */
.app-menu-footer {
display: flex !important;
position: absolute !important;
right: 1rem !important; /* Abstand vom rechten Rand */
top: 50% !important;
transform: translateY(-50%); /* vertikal mittig ausrichten */
gap: 0.75rem !important;
padding: 0 !important;
border: none !important;
background: none !important;
width: auto !important;
}
.app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button {
position: absolute;
color: rgb(42, 159, 214);
padding-top: 6px;
padding-bottom: 6px;
.app-menu .nav-item {
display: inline-block !important;
}
}
/* ===========================
MOBILE (unter 768px)
=========================== */
@media (max-width: 767px) {
/* Dynamische Schriftgr<67><72>e im Dropdown-Men<65> */
.app-menu .nav-item a {
font-size: clamp(3px, 3vw, 13px); /* Dynamische, begrenzte Schriftgr<67><72>e */
}
.app-menu-toggler {
position: fixed;
top: 1.5rem; /* Abstand von oben */
right: 2.75rem; /* Abstand von rechts */
left: auto;
}
.app-menu {
position: fixed;
right: 1rem;
margin-top: 5.25rem;
width: 25%;
background-color: grey;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.controls {
height: 60px;
top: 15px;
position: fixed;
top: 0px;
width: 100%;
background-color: grey;
}
.controls-group {
float: right;
margin-right: 25px;
}
/* Platz unter der Navbar */
.content {
position: relative;
top: 60px;
}
.app-search:active, .app-search:hover {
min-height: 60px;
/* Burger sichtbar machen */
.nav-toggle-label {
display: flex;
flex-direction: column;
justify-content: center;
}
.navbar > .d-flex:nth-of-type(3) {
order: 2;
flex-basis: 100%;
/* Sidebar-Wrapper rechts */
.app-menu {
position: fixed;
top: 80px; /* Abstand von oben (über der Navbar + Burger) */
right: 0;
width: 70%;
max-width: 280px;
height: calc(100vh - 80px); /* Höhe an das neue top anpassen */
background-color: grey;
flex-direction: column;
align-items: stretch;
padding: 1rem;
gap: 0.5rem;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1500;
}
.navbar > .d-flex:nth-of-type(2) {
order: 3;
/* 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;
justify-content: space-between;
align-items: center;
}
/* Sidebar öffnen/schließen über Checkbox */
.nav-toggle:checked ~ .app-menu {
transform: translateX(0);
}
.app-menu .nav-link {
width: 100%;
display: block;
font-size: clamp(12px, 3.5vw, 15px);
}
}

2
Package/SZUAbsolventenverein.Theme.Website.nuspec
View File

@ -2,7 +2,7 @@
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
<metadata>
<id>$projectname$</id>
<version>1.0.4</version>
<version>1.0.5</version>
<authors>SZUAbsolventenverein</authors>
<owners>SZUAbsolventenverein</owners>
<title>Website</title>