[Footer] Fix styling. Do not use grid

microsoft · Apr 2, 2024 · df0a5d0 · df0a5d0
1 parent db0c217
commit df0a5d0
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 43 deletions.
diff --git a/examples/Demo/Shared/Pages/Footer/Examples/FooterDefault.razor b/examples/Demo/Shared/Pages/Footer/Examples/FooterDefault.razor
@@ -1,3 +1,5 @@
 <FluentFooter>
-    Footer text
+    Footer start text
+    <FluentSpacer />
+    Footer end text
 </FluentFooter>
diff --git a/src/Core/Components/Footer/FluentFooter.razor.css b/src/Core/Components/Footer/FluentFooter.razor.css
@@ -1,8 +1,7 @@
-.footer {
-    display: grid;
+.footer {
+    display: flex;
     z-index: 10;
-    flex-direction: column;
-    position: relative;
+    flex-direction: row;
     font-family: var(--body-font);
     font-weight: normal;
     font-size: var(--type-ramp-minus-1-font-size);

diff --git a/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor b/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor
@@ -14,12 +14,9 @@
         </FluentBodyContent>
     </FluentStack>
     <FluentFooter>
-        <div class="link1">
-            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
-        </div>
-        <div class="link2">
-            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
-        </div>
+        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
+        <FluentSpacer />
+        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
     </FluentFooter>
 </FluentLayout>
 ##else

diff --git a/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/wwwroot/app.css b/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/wwwroot/app.css
@@ -42,16 +42,6 @@ footer {
     padding: 10px 10px;
 }
 
-    footer .link1 {
-        grid-column: 2;
-        justify-self: start;
-    }
-
-    footer .link2 {
-        grid-column: 3;
-        justify-self: end;
-    }
-
     footer a {
         color: var(--neutral-foreground-rest);
         text-decoration: none;

diff --git a/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/MainLayout.Auth.razor b/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/MainLayout.Auth.razor
@@ -23,12 +23,9 @@
         </FluentBodyContent>
     </FluentStack>
     <FluentFooter>
-        <div class="link1">
-            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
-        </div>
-        <div class="link2">
-            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
-        </div>
+        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
+        <FluentSpacer />
+        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
     </FluentFooter>
 </FluentLayout>
 ##else

diff --git a/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/MainLayout.NoAuth.razor b/src/Templates/content/ComponentsWebAssembly-CSharp/Layout/MainLayout.NoAuth.razor
@@ -21,12 +21,9 @@
         </FluentBodyContent>
     </FluentStack>
     <FluentFooter>
-        <div class="link1">
-            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
-        </div>
-        <div class="link2">
-            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
-        </div>
+        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
+        <FluentSpacer />
+        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
     </FluentFooter>
 </FluentLayout>
 ##else

diff --git a/src/Templates/content/ComponentsWebAssembly-CSharp/wwwroot/css/app.css b/src/Templates/content/ComponentsWebAssembly-CSharp/wwwroot/css/app.css
@@ -38,16 +38,6 @@ footer {
     padding: 10px 10px;
 }
 
-    footer .link1 {
-        grid-column: 2;
-        justify-self: start;
-    }
-
-    footer .link2 {
-        grid-column: 3;
-        justify-self: end;
-    }
-
     footer a {
         color: var(--neutral-foreground-rest);
         text-decoration: none;