Website ist responsiv und hat ein dropdown menü
This commit is contained in:
@ -2,23 +2,25 @@
|
||||
@inherits ThemeBase
|
||||
@inject ISettingService SettingService
|
||||
|
||||
<div class="page-wrapper d-flex flex-column min-vh-100">
|
||||
<div class="wrapper d-flex flex-column min-vh-100">
|
||||
<main role="main" class="flex-fill">
|
||||
|
||||
<main role="main" class="flex-fill">
|
||||
|
||||
<nav class="custom-navbar">
|
||||
<nav class="navigation">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<a class="navbar-brand" href="https://www.szu-home.at/">
|
||||
<a class="navbar-brand" href="https://www.szu-home.at/">
|
||||
<img src="Images/szu-Logo.png" alt="Logo" class="img-fluid" style="max-height: 60px;" />
|
||||
</a>
|
||||
</a>
|
||||
|
||||
<Menu Orientation="Horizontal" />
|
||||
|
||||
<div class="controls ms-auto">
|
||||
<div class="controls-group">
|
||||
<UserProfile ShowRegister="@_register" />
|
||||
<Login ShowLogin="@_login" />
|
||||
<ControlPanel LanguageDropdownAlignment="right" />
|
||||
<ControlPanel LanguageDropdownAlignment="right" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -107,23 +109,21 @@
|
||||
<Pane Name="Bottom Full Width" />
|
||||
</div>
|
||||
|
||||
<footer class="custom-footer">
|
||||
<div class="container text-center">
|
||||
<a href="#">Impressum</a> |
|
||||
<a href="#">Datenschutz</a> |
|
||||
<a href="#">AGB</a>
|
||||
<footer class="footer">
|
||||
<div class="text text-center">
|
||||
<p>Impressum | Datenschutz | AGB</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
public override string Name => "Theme1";
|
||||
|
||||
public override string Panes => PaneNames.Admin + ",Top Full Width,Top 100%,Left 50%,Right 50%,Left 33%,Center 33%,Right 33%,Left Outer 25%,Left Inner 25%,Right Inner 25%,Right Outer 25%,Left 25%,Center 50%,Right 25%,Left Sidebar 66%,Right Sidebar 33%,Left Sidebar 33%,Right Sidebar 66%,Bottom 100%,Bottom Full Width";
|
||||
|
||||
|
||||
private bool _showDropdown = false;
|
||||
private bool _login = true;
|
||||
private bool _register = true;
|
||||
|
||||
@ -140,4 +140,9 @@
|
||||
// error loading theme settings
|
||||
}
|
||||
}
|
||||
|
||||
private void ToggleDropdown()
|
||||
{
|
||||
_showDropdown = !_showDropdown;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
.navigation {
|
||||
max-width: 80vw; /* oder max-width: 100%; */
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
@ -25,27 +25,27 @@ body {
|
||||
padding-top: 100px; /* H<>he der fixierten Navigation kompensieren */
|
||||
}
|
||||
|
||||
.custom-navbar .app-logo .img-fluid {
|
||||
max-height: 60px;
|
||||
}
|
||||
.navigation .app-logo .img-fluid {
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.custom-navbar .app-menu {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
.navigation .app-menu {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.custom-navbar .nav-item a {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navigation .nav-item a {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.custom-navbar .nav-item a.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
.navigation .nav-item a.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.custom-footer {
|
||||
.footer {
|
||||
background-color: #bbb;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
@ -55,13 +55,8 @@ body {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.custom-footer a {
|
||||
color: black;
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
.wrapper {
|
||||
max-width: 80vw; /* max. 80% der Viewport-Breite */
|
||||
margin: 0 auto; /* horizontal zentrieren */
|
||||
display: flex;
|
||||
@ -89,11 +84,6 @@ main.flex-fill {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Optional f<>r Animationen */
|
||||
#mobileMenu {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* App Logo */
|
||||
.app-logo .img-fluid {
|
||||
max-height: 90px;
|
||||
@ -169,46 +159,26 @@ main.flex-fill {
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background-color: #fff;
|
||||
border: 2px solid #75767B;
|
||||
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;
|
||||
}
|
||||
|
||||
div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.dropdown-menu span {
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
|
||||
.app-menu {
|
||||
width: 100%;
|
||||
.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;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
height: 60px;
|
||||
top: 15px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.controls-group {
|
||||
float: right;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
Microsoft Visual Studio Solution File, Format Version 12.00
|
||||
# Visual Studio Version 16
|
||||
VisualStudioVersion = 16.0.28621.142
|
||||
# Visual Studio Version 17
|
||||
VisualStudioVersion = 17.13.35825.156 d17.13
|
||||
MinimumVisualStudioVersion = 10.0.40219.1
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Oqtane.Server", "..\oqtane.framework-dev\Oqtane.Server\Oqtane.Server.csproj", "{3AB6FCC9-EFEB-4C0E-A2CF-8103914C5196}"
|
||||
EndProject
|
||||
|
||||
Reference in New Issue
Block a user