Skip to content

Commit

Permalink
Fix some design issues after PR #888
Browse files Browse the repository at this point in the history
  • Loading branch information
@vnbaaij
vnbaaij committed Oct 29, 2023
1 parent 6a46caa commit d758eeb
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 126 deletions.
1 change: 0 additions & 1 deletion examples/Demo/Client/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
body,
#container {
font: 14px "Segoe UI Variable", "Segoe UI", sans-serif;
color: var(--neutral-base-color);
background-color: var(--neutral-fill-layer-rest);
}
</style>
Expand Down
154 changes: 78 additions & 76 deletions examples/Demo/Shared/Shared/DemoMainLayout.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,88 +7,90 @@
<PageTitle>Fluent UI Blazor components demo page</PageTitle>

<div @ref="container">
<FluentLayout>
<FluentHeader>
<div class="logo" role="presentation" aria-hidden="true" itemprop="logo" itemscope="itemscope">
<svg xmlns="http://www.w3.org/2000/svg" width="108" height="23" viewBox="72 72 337 74" preserveAspectRatio="xMidYMin slice">
<g data-name="MS-symbol">
<clipPath>
<path transform="matrix(1 0 0 -1 0 216)" d="M0 216h482V0H0z"></path>
</clipPath>
<g clip-path="url(#a)">
<path d="M394.942 104.59h-10.858v25.003h-7.38V104.59h-5.182v-5.965h5.182v-4.308c0-3.254 1.06-5.92 3.178-7.998 2.12-2.079 4.835-3.118 8.15-3.118.882 0 1.666.045 2.35.135a9.37 9.37 0 011.806.407v6.296c-.24-.14-.663-.31-1.265-.512-.603-.2-1.296-.3-2.078-.3-1.528 0-2.702.476-3.526 1.43-.824.954-1.235 2.365-1.235 4.232v3.736h10.858v-6.959l7.321-2.229v9.188h7.381v5.965h-7.38v14.49c0 1.91.345 3.254 1.038 4.037.693.783 1.782 1.175 3.27 1.175.42 0 .927-.1 1.52-.3a7.178 7.178 0 001.552-.724v6.025c-.463.261-1.23.502-2.305.723a15.742 15.742 0 01-3.178.331c-3.073 0-5.378-.817-6.914-2.455-1.537-1.637-2.305-4.102-2.305-7.396zm-48.407 9.73c0 3.233.733 5.703 2.2 7.411 1.465 1.707 3.564 2.56 6.295 2.56 2.652 0 4.67-.853 6.055-2.56 1.386-1.708 2.08-4.238 2.08-7.592 0-3.334-.719-5.849-2.155-7.547-1.436-1.697-3.45-2.545-6.04-2.545-2.67 0-4.745.888-6.22 2.666-1.477 1.777-2.215 4.313-2.215 7.607m-7.592.24c0-5.12 1.446-9.177 4.338-12.17 2.892-2.993 6.91-4.489 12.05-4.489 4.841 0 8.621 1.441 11.343 4.323 2.721 2.883 4.082 6.774 4.082 11.674 0 5.021-1.447 9.018-4.338 11.99-2.892 2.973-6.829 4.458-11.81 4.458-4.8 0-8.61-1.41-11.432-4.232-2.822-2.82-4.233-6.673-4.233-11.554m-16.417-7.802c0 1.045.331 1.863.994 2.456.662.592 2.128 1.34 4.398 2.243 2.912 1.166 4.956 2.476 6.131 3.932 1.175 1.456 1.762 3.22 1.762 5.287 0 2.912-1.12 5.252-3.359 7.02-2.24 1.767-5.267 2.65-9.083 2.65-1.285 0-2.706-.155-4.263-.467-1.556-.31-2.877-.707-3.96-1.19v-7.169a17.945 17.945 0 004.277 2.198c1.526.543 2.911.814 4.157.814 1.647 0 2.862-.23 3.645-.693.784-.46 1.175-1.235 1.175-2.319 0-1.005-.406-1.853-1.22-2.546-.813-.693-2.355-1.492-4.624-2.395-2.69-1.125-4.599-2.39-5.724-3.796-1.125-1.406-1.687-3.193-1.687-5.362 0-2.792 1.11-5.086 3.33-6.884 2.217-1.797 5.095-2.696 8.63-2.696 1.084 0 2.3.12 3.645.361 1.346.242 2.47.553 3.374.934v6.93c-.964-.644-2.089-1.195-3.374-1.658-1.286-.462-2.56-.693-3.826-.693-1.386 0-2.465.271-3.238.813-.774.543-1.16 1.286-1.16 2.23m-35.066 7.562c0 3.233.733 5.703 2.2 7.411 1.465 1.707 3.564 2.56 6.295 2.56 2.652 0 4.67-.853 6.055-2.56 1.386-1.708 2.08-4.238 2.08-7.592 0-3.334-.719-5.849-2.155-7.547-1.436-1.697-3.449-2.545-6.039-2.545-2.672 0-4.745.888-6.222 2.666-1.476 1.777-2.214 4.313-2.214 7.607m-7.592.24c0-5.12 1.446-9.177 4.338-12.17 2.893-2.993 6.91-4.489 12.051-4.489 4.84 0 8.621 1.441 11.342 4.323 2.721 2.883 4.082 6.774 4.082 11.674 0 5.021-1.446 9.018-4.338 11.99-2.892 2.973-6.828 4.458-11.809 4.458-4.8 0-8.61-1.41-11.433-4.232-2.822-2.82-4.233-6.673-4.233-11.554m-3.136-16.448c.582 0 1.105.041 1.567.121.462.08.853.18 1.175.301v7.38c-.382-.28-.939-.546-1.672-.798-.733-.25-1.622-.376-2.666-.376-1.788 0-3.299.753-4.534 2.26-1.235 1.505-1.853 3.825-1.853 6.958v15.635h-7.29V98.624h7.29v4.88h.12c.663-1.687 1.667-3.007 3.013-3.96 1.346-.954 2.962-1.432 4.85-1.432m-27.956 26.18c1.084 0 2.28-.25 3.585-.754a15.06 15.06 0 003.615-1.988v6.778c-1.165.663-2.485 1.165-3.962 1.506-1.475.342-3.098.512-4.865.512-4.559 0-8.265-1.44-11.116-4.323-2.852-2.88-4.278-6.562-4.278-11.04 0-4.98 1.456-9.083 4.37-12.307 2.91-3.224 7.037-4.835 12.38-4.835 1.366 0 2.746.176 4.143.527 1.395.352 2.504.758 3.328 1.22v6.99c-1.125-.824-2.274-1.462-3.45-1.914a9.966 9.966 0 00-3.599-.678c-2.872 0-5.192.934-6.959 2.802-1.768 1.868-2.652 4.388-2.652 7.562 0 3.132.85 5.573 2.546 7.32 1.697 1.748 4.002 2.621 6.914 2.621m-22.112 5.302h-7.29V98.624h7.29zm-8.044-39.916c0-1.205.437-2.214 1.311-3.028.874-.813 1.913-1.22 3.118-1.22 1.285 0 2.35.417 3.193 1.25.844.834 1.266 1.833 1.266 2.998 0 1.185-.432 2.18-1.296 2.982-.864.804-1.918 1.205-3.163 1.205-1.246 0-2.295-.406-3.148-1.219-.854-.815-1.28-1.803-1.28-2.968m-6.274-3.284v43.2h-7.5v-33.86h-.12l-13.408 33.86h-4.97l-13.738-33.86h-.09v33.86h-6.929v-43.2h10.755l12.412 32.024h.18l13.105-32.024z" fill="var(--neutral-foreground-rest)"></path>
<path d="M106.214 106.214H71.996V71.996h34.218z" fill="#f25022"></path>
<path d="M143.993 106.214h-34.218V71.996h34.218z" fill="#7fba00"></path>
<path d="M106.214 143.993H71.996v-34.218h34.218z" fill="#00a4ef"></path>
<path d="M143.993 143.993h-34.218v-34.218h34.218z" fill="#ffb900"></path>
<FluentLayout>
<FluentHeader>
<div class="logo" role="presentation" aria-hidden="true" itemprop="logo" itemscope="itemscope">
<svg xmlns="http://www.w3.org/2000/svg" width="108" height="23" viewBox="72 72 337 74" preserveAspectRatio="xMidYMin slice">
<g data-name="MS-symbol">
<clipPath>
<path transform="matrix(1 0 0 -1 0 216)" d="M0 216h482V0H0z"></path>
</clipPath>
<g clip-path="url(#a)">
<path d="M394.942 104.59h-10.858v25.003h-7.38V104.59h-5.182v-5.965h5.182v-4.308c0-3.254 1.06-5.92 3.178-7.998 2.12-2.079 4.835-3.118 8.15-3.118.882 0 1.666.045 2.35.135a9.37 9.37 0 011.806.407v6.296c-.24-.14-.663-.31-1.265-.512-.603-.2-1.296-.3-2.078-.3-1.528 0-2.702.476-3.526 1.43-.824.954-1.235 2.365-1.235 4.232v3.736h10.858v-6.959l7.321-2.229v9.188h7.381v5.965h-7.38v14.49c0 1.91.345 3.254 1.038 4.037.693.783 1.782 1.175 3.27 1.175.42 0 .927-.1 1.52-.3a7.178 7.178 0 001.552-.724v6.025c-.463.261-1.23.502-2.305.723a15.742 15.742 0 01-3.178.331c-3.073 0-5.378-.817-6.914-2.455-1.537-1.637-2.305-4.102-2.305-7.396zm-48.407 9.73c0 3.233.733 5.703 2.2 7.411 1.465 1.707 3.564 2.56 6.295 2.56 2.652 0 4.67-.853 6.055-2.56 1.386-1.708 2.08-4.238 2.08-7.592 0-3.334-.719-5.849-2.155-7.547-1.436-1.697-3.45-2.545-6.04-2.545-2.67 0-4.745.888-6.22 2.666-1.477 1.777-2.215 4.313-2.215 7.607m-7.592.24c0-5.12 1.446-9.177 4.338-12.17 2.892-2.993 6.91-4.489 12.05-4.489 4.841 0 8.621 1.441 11.343 4.323 2.721 2.883 4.082 6.774 4.082 11.674 0 5.021-1.447 9.018-4.338 11.99-2.892 2.973-6.829 4.458-11.81 4.458-4.8 0-8.61-1.41-11.432-4.232-2.822-2.82-4.233-6.673-4.233-11.554m-16.417-7.802c0 1.045.331 1.863.994 2.456.662.592 2.128 1.34 4.398 2.243 2.912 1.166 4.956 2.476 6.131 3.932 1.175 1.456 1.762 3.22 1.762 5.287 0 2.912-1.12 5.252-3.359 7.02-2.24 1.767-5.267 2.65-9.083 2.65-1.285 0-2.706-.155-4.263-.467-1.556-.31-2.877-.707-3.96-1.19v-7.169a17.945 17.945 0 004.277 2.198c1.526.543 2.911.814 4.157.814 1.647 0 2.862-.23 3.645-.693.784-.46 1.175-1.235 1.175-2.319 0-1.005-.406-1.853-1.22-2.546-.813-.693-2.355-1.492-4.624-2.395-2.69-1.125-4.599-2.39-5.724-3.796-1.125-1.406-1.687-3.193-1.687-5.362 0-2.792 1.11-5.086 3.33-6.884 2.217-1.797 5.095-2.696 8.63-2.696 1.084 0 2.3.12 3.645.361 1.346.242 2.47.553 3.374.934v6.93c-.964-.644-2.089-1.195-3.374-1.658-1.286-.462-2.56-.693-3.826-.693-1.386 0-2.465.271-3.238.813-.774.543-1.16 1.286-1.16 2.23m-35.066 7.562c0 3.233.733 5.703 2.2 7.411 1.465 1.707 3.564 2.56 6.295 2.56 2.652 0 4.67-.853 6.055-2.56 1.386-1.708 2.08-4.238 2.08-7.592 0-3.334-.719-5.849-2.155-7.547-1.436-1.697-3.449-2.545-6.039-2.545-2.672 0-4.745.888-6.222 2.666-1.476 1.777-2.214 4.313-2.214 7.607m-7.592.24c0-5.12 1.446-9.177 4.338-12.17 2.893-2.993 6.91-4.489 12.051-4.489 4.84 0 8.621 1.441 11.342 4.323 2.721 2.883 4.082 6.774 4.082 11.674 0 5.021-1.446 9.018-4.338 11.99-2.892 2.973-6.828 4.458-11.809 4.458-4.8 0-8.61-1.41-11.433-4.232-2.822-2.82-4.233-6.673-4.233-11.554m-3.136-16.448c.582 0 1.105.041 1.567.121.462.08.853.18 1.175.301v7.38c-.382-.28-.939-.546-1.672-.798-.733-.25-1.622-.376-2.666-.376-1.788 0-3.299.753-4.534 2.26-1.235 1.505-1.853 3.825-1.853 6.958v15.635h-7.29V98.624h7.29v4.88h.12c.663-1.687 1.667-3.007 3.013-3.96 1.346-.954 2.962-1.432 4.85-1.432m-27.956 26.18c1.084 0 2.28-.25 3.585-.754a15.06 15.06 0 003.615-1.988v6.778c-1.165.663-2.485 1.165-3.962 1.506-1.475.342-3.098.512-4.865.512-4.559 0-8.265-1.44-11.116-4.323-2.852-2.88-4.278-6.562-4.278-11.04 0-4.98 1.456-9.083 4.37-12.307 2.91-3.224 7.037-4.835 12.38-4.835 1.366 0 2.746.176 4.143.527 1.395.352 2.504.758 3.328 1.22v6.99c-1.125-.824-2.274-1.462-3.45-1.914a9.966 9.966 0 00-3.599-.678c-2.872 0-5.192.934-6.959 2.802-1.768 1.868-2.652 4.388-2.652 7.562 0 3.132.85 5.573 2.546 7.32 1.697 1.748 4.002 2.621 6.914 2.621m-22.112 5.302h-7.29V98.624h7.29zm-8.044-39.916c0-1.205.437-2.214 1.311-3.028.874-.813 1.913-1.22 3.118-1.22 1.285 0 2.35.417 3.193 1.25.844.834 1.266 1.833 1.266 2.998 0 1.185-.432 2.18-1.296 2.982-.864.804-1.918 1.205-3.163 1.205-1.246 0-2.295-.406-3.148-1.219-.854-.815-1.28-1.803-1.28-2.968m-6.274-3.284v43.2h-7.5v-33.86h-.12l-13.408 33.86h-4.97l-13.738-33.86h-.09v33.86h-6.929v-43.2h10.755l12.412 32.024h.18l13.105-32.024z" fill="var(--neutral-foreground-rest)"></path>
<path d="M106.214 106.214H71.996V71.996h34.218z" fill="#f25022"></path>
<path d="M143.993 106.214h-34.218V71.996h34.218z" fill="#7fba00"></path>
<path d="M106.214 143.993H71.996v-34.218h34.218z" fill="#00a4ef"></path>
<path d="M143.993 143.993h-34.218v-34.218h34.218z" fill="#ffb900"></path>
</g>
</g>
</g>
</svg>
</svg>

</div>
<FluentSpacer />
<div class="notifications">
<NotificationCenter />
</div>
<div class="settings">
<SiteSettings />
</div>
</FluentHeader>
</div>
<FluentSpacer />
<div class="notifications">
<NotificationCenter />
</div>
<div class="settings">
<SiteSettings />
</div>
</FluentHeader>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<label for="menu-toggle" class="menu-icon">
<FluentIcon Icon="Icons.Regular.Size24.Navigation" />
</label>
<input type="checkbox" id="menu-toggle" checked=@menuchecked @onclick=HandleChecked />
<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<div class="menutoggle">
<label for="menu-toggle" class="menu-icon">
<FluentIcon Icon="Icons.Regular.Size20.Navigation" Color="Color.Neutral" />
</label>
<input type="checkbox" id="menu-toggle" checked=@menuchecked @onclick=HandleChecked />

<nav style="height: Calc(100vh - 90px);"
onclick="document.getElementById('menu-toggle').click()">
<DemoNavMenu />
</nav>

<FluentBodyContent Style="height: Calc(100dvh - 90px);">
<div class="content">
<article id="article">

<FluentMessageBarContainer Section="@App.MESSAGES_TOP" />

<ErrorBoundary @ref="errorBoundary">
<ChildContent>
<CascadingValue Value=@OnRefreshTableOfContents>
@Body
</CascadingValue>
</ChildContent>
<ErrorContent Context="ex">
<div class="blazor-error-boundary">@ex.Message</div>
</ErrorContent>
</ErrorBoundary>
</article>
<aside>
<TableOfContents @ref=_toc />
<ConsoleLog />
</aside>

<FluentToastContainer MaxToastCount="10" />
<FluentDialogProvider />
<FluentTooltipProvider />

<nav class="sitenav"
onclick="document.getElementById('menu-toggle').click()">
<DemoNavMenu />
</nav>
</div>
</FluentBodyContent>
</FluentStack>
<FluentBodyContent Style="height: Calc(100dvh - 90px);">
<div class="content">
<article id="article">

<FluentMessageBarContainer Section="@App.MESSAGES_TOP" />

<ErrorBoundary @ref="errorBoundary">
<ChildContent>
<CascadingValue Value=@OnRefreshTableOfContents>
@Body
</CascadingValue>
</ChildContent>
<ErrorContent Context="ex">
<div class="blazor-error-boundary">@ex.Message</div>
</ErrorContent>
</ErrorBoundary>
</article>
<aside>
<TableOfContents @ref=_toc />
<ConsoleLog />
</aside>

<FluentFooter Style="@("height: 40px; color: white;")">
<div class="version">
<small>
Version: @_version
&nbsp;-&nbsp;
<a href="https://dotnet.microsoft.com/en-us/learn/aspnet/what-is-aspnet-core">Powered by @RuntimeInformation.FrameworkDescription</a>
</small>
</div>
<FluentSpacer />
<div class="copy">
<small>Microsoft © 2023. All rights reserved.</small>
</div>
</FluentFooter>
<FluentToastContainer MaxToastCount="10" />
<FluentDialogProvider />
<FluentTooltipProvider />

</div>
</FluentBodyContent>
</FluentStack>

<FluentFooter Style="@("height: 40px; color: white;")">
<div class="version">
<small>
Version: @_version
&nbsp;-&nbsp;
<a href="https://dotnet.microsoft.com/en-us/learn/aspnet/what-is-aspnet-core">Powered by @RuntimeInformation.FrameworkDescription</a>
</small>
</div>
<FluentSpacer />
<div class="copy">
<small>Microsoft © 2023. All rights reserved.</small>
</div>
</FluentFooter>

</FluentLayout>
</FluentLayout>
</div>
7 changes: 2 additions & 5 deletions examples/Demo/Shared/Shared/DemoNavMenu.razor
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@

<FluentNavMenu Title="Main menu"
Style="height: Calc(100dvh - 100px);
overflow-y: overlay;
overflow-x: hidden;">
<FluentNavMenu Title="Main menu">
<FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Href="/" Match="NavLinkMatch.All">
<h3>Home</h3>
</FluentNavLink>
Expand Down Expand Up @@ -111,7 +108,7 @@
<FluentNavLink Href="/TreeView" Icon="@(new Icons.Regular.Size20.TextBulletListTree())">Tree View</FluentNavLink>
</FluentNavGroup>

<FluentNavGroup Expanded="false"
<FluentNavGroup Expanded="true"
Title="Incubation lab"
Href="/Lab/Overview" Icon="@(new Icons.Regular.Size20.Beaker())"
Gap="10px">
Expand Down
60 changes: 23 additions & 37 deletions examples/Demo/Shared/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,22 @@ body {
.header .logo {
width: 108px;
height: 23px;
padding: 0 30px;
/*padding: 0 30px;*/
grid-column: 1;
}

.header .notifications {
padding-right: 20px;
padding-right: 10px;
display: flex;
align-items: center;
}

.header .settings {
padding-right: 20px;
padding-right: 24px;
display: flex;
align-items: center;
}

[dir="rtl"] .header .settings {
padding: 0 0 0 20px;
}
Expand Down Expand Up @@ -70,9 +70,13 @@ body {
}


nav {
nav.sitenav {
background-color: var(--neutral-layer-3);
padding: 10px;
height: calc(100dvh - 90px);
width: 330px;
overflow-y: auto;

}

nav h2 {
Expand Down Expand Up @@ -102,13 +106,6 @@ nav {
background: var(--accent-fill-rest);
}

.fluent-nav-menu {
width: 250px !important;
}

.fluent-nav-item {
max-width: 99% !important;
}

.fluent-nav-link.notactive .fluent-nav-text {
font-weight:600 !important;
Expand Down Expand Up @@ -262,43 +259,32 @@ code {
.header .logo {
width: 160px;
height: 23px;
padding: 0 25px;
}


.header .switches {
flex-direction: column;
grid-column: 2
}

.header .switches .label {
padding-inline-end: 14px;
}

.header .colorgroup {
display: none;
/*padding: 0 25px;*/
}


.stack-horizontal {
flex-direction:column !important;
}

nav {
nav.sitenav {
display: none;
width:100%;
width: 100%;
height: auto;
overflow-y: auto;
}

.fluent-nav-menu {
width: 100% !important;
.menutoggle {
width: 100%;
}

.menu-icon {
z-index: 10;
display: block;
visibility: visible;
position: absolute;
top: 0.7rem;
right: 0.7rem;
top: 15px;
right: 20px;
}

#menu-toggle ~ nav {
Expand Down Expand Up @@ -399,7 +385,7 @@ code {
grid-column: 1;
width: 108px;
height: 23px;
padding: 0 30px;
/*padding: 0 30px;*/
}

.header .switches {
Expand All @@ -423,7 +409,7 @@ code {

nav {
grid-column: 1;
width: env(viewport-segment-width 0 0);
width: env(viewport-segment-width 0 0) !important;
}

.content {
Expand All @@ -432,14 +418,14 @@ code {
}

aside {
grid-area: 1 / 2 / 2 / 3;
grid-area: 2 / 2 / 3 / 3;
padding: 1.5em 0.75em 1em 0.75em;
margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); /* hinge width */
margin-inline-end: calc(100% - env(viewport-segment-left 1 0));
}

article {
grid-area: 2 / 2 / 3 / 3;
grid-area: 1 / 2 / 2 / 3;
padding-top: 0px;
margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); /* hinge width */
margin-inline-end: calc(100% - env(viewport-segment-left 1 0));
Expand Down
Loading

0 comments on commit d758eeb

Please sign in to comment.