Fix 'Back to top' and header styling

microsoft · Oct 29, 2023 · 6bf40cd · 6bf40cd
1 parent 308e562
commit 6bf40cd
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 36 deletions.
diff --git a/examples/Demo/Shared/Components/TableOfContents.razor.js b/examples/Demo/Shared/Components/TableOfContents.razor.js
@@ -44,13 +44,18 @@
 let backToTopButton = document.getElementById("backtotop");
 
 // When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function ()
+let bodycontent = document.getElementById('body-content');
+if (!bodycontent) {
+    bodycontent = document.body;
+}
+
+bodycontent.onscroll = function ()
 { 
     scrollFunction()
 };
 
 function scrollFunction() {
-    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    if (document.body.scrollTop > 20 ||document.getElementById('body-content').scrollTop > 20 || document.documentElement.scrollTop > 20) {
         backToTopButton.style.display = "flex";
     } else {
         backToTopButton.style.display = "none";
@@ -61,6 +66,7 @@ function scrollFunction() {
 export function backToTop() {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
+    document.getElementById('body-content').scrollTop = 0;
 }
 
 // Very simple check to see if mobile or tablet is being used 

diff --git a/examples/Demo/Shared/Pages/Lab/TableOfContentsPage.razor b/examples/Demo/Shared/Pages/Lab/TableOfContentsPage.razor
@@ -12,7 +12,8 @@
     based on the title of the heading.
 </p>
 <p>
-    The component also renders a (initially hidden) 'Back to top' button at the bottom of the page. The button appears once scrolling has started.
+    The component also renders a (initially hidden) 'Back to top' button at the bottom of the page. The button appears once scrolling has started. It works on either scrolling 
+    of the 'body' element or on schrolling of an element with the id 'body-content' in case of a setup with partial parts of the screen scrollable (as here in the demo site). 
 </p>
 
 <h2>Making <code>TableOfContents</code> component aware of new headings</h2>

diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor
@@ -8,7 +8,7 @@
 
 <div @ref="container">
     <FluentLayout>
-        <FluentHeader>
+        <FluentHeader Class="siteheader">
             <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">
@@ -48,7 +48,7 @@
                     <DemoNavMenu />
                 </nav>
             </div>
-            <FluentBodyContent Style="height: Calc(100dvh - 90px);">
+            <FluentBodyContent id="body-content" Style="height: calc(100dvh - 90px);">
                 <div class="content">
                     <article id="article">
 

diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
@@ -10,37 +10,37 @@ body {
     overflow: hidden;
 }
 
-.header {
+.siteheader {
     background-color: var(--neutral-layer-4) !important;
     border-bottom: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest);
     margin-bottom: 0 !important;
 }
 
-    .header .logo {
+    .siteheader .logo {
         width: 108px;
         height: 23px;
         /*padding: 0 30px;*/
         grid-column: 1;
     }
 
-    .header .notifications {
+    .siteheader .notifications {
         padding-right: 10px;
         display: flex;
         align-items: center;
     }
 
-    .header .settings {
+    .siteheader .settings {
         padding-right: 24px;
         display: flex;
         align-items: center;
     }
-    
-    [dir="rtl"] .header .settings {
-        padding: 0 0 0 20px;
-    }
-    [dir="rtl"] .header .notifications {
-        padding: 0 0 0 20px;
-    }
+
+[dir="rtl"] .siteheader .settings {
+    padding: 0 0 0 20px;
+}
+[dir="rtl"] .siteheader .notifications {
+    padding: 0 0 0 20px;
+}
 
 .stack-horizontal {
     flex-direction: row;
@@ -249,14 +249,14 @@ code {
 
 @media (max-width: 767px) {
 
-    .header {
+    .siteheader {
         grid-area: header;
         grid-template-columns: 150px 1fr;
         align-items: center;
         justify-content: flex-start;
     }
 
-        .header .logo {
+        .siteheader .logo {
             width: 160px;
             height: 23px;
             /*padding: 0 25px;*/
@@ -270,7 +270,7 @@ code {
     nav.sitenav {
         display: none;
         width: 100%;
-        height: auto;
+        height: calc(100dvh - 50px);
         overflow-y: auto;
     }
 
@@ -365,7 +365,7 @@ code {
 /* Surface Duo specific styling */
 @media (horizontal-viewport-segments: 2) {
 
-    .header {
+    .siteheader {
         grid-area: header;
         display: grid;
         grid-template-columns: 150px calc(env(viewport-segment-width 0 0) - 160px) 1fr;
@@ -376,31 +376,18 @@ code {
         background-color: var(--neutral-layer-4);
     }
 
-        .header a {
+        .siteheader a {
             padding: 0px 15px;
             color: var(--neutral-foreground-rest);
         }
 
-        .header .logo {
+        .siteheader .logo {
             grid-column: 1;
             width: 108px;
             height: 23px;
             /*padding: 0 30px;*/
         }
 
-        .header .switches {
-            margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); /* hinge width */
-            grid-column: 3;
-            justify-self: end;
-            padding-left: 20px;
-        }
-
-        .header .colorgroup {
-            grid-column: 2;
-            justify-self: end;
-            z-index: 10;
-        }
-
     main {
         display: grid;
         grid-template-columns: env(viewport-segment-width 0 0) 1fr;

diff --git a/src/Core/Components/BodyContent/FluentBodyContent.razor b/src/Core/Components/BodyContent/FluentBodyContent.razor
@@ -2,6 +2,6 @@
 
 @inherits FluentComponentBase
 
-<div @ref=Element class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes">
+<div @ref=Element id="@Id" class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes">
     @ChildContent
 </div>