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

WIP: macproblemsolver #6

Draft
Kocoder wants to merge 16 commits from macproblemsolver into master
pull from: macproblemsolver
merge into: Diplomarbeit-Absolventenverein:master
Conversation 3 Commits 16 Files Changed 15 +331 -171
10 changed files with 331 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 05e5e466ce - Show all commits

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>
Kocoder commented 2025-12-10 21:19:22 +00:00
Review
Copy Link

Dieser Change müsste mit dem korrekten Build Skript nicht gemacht werden

Dieser Change müsste mit dem korrekten Build Skript nicht gemacht werden
Gaisi commented 2025-12-10 21:53:12 +00:00
Review
Copy Link

Hab das halt auch geändert weil version dort steht dachte wäre schöner wenn es einheitlich bleibt.

Hab das halt auch geändert weil version dort steht dachte wäre schöner wenn es einheitlich bleibt.
<authors>SZUAbsolventenverein</authors>
<owners>SZUAbsolventenverein</owners>
<title>Website</title>