(#57) udpate the radzen layout for the footer flex and column

SaintAngeLs · Apr 20, 2024 · fe6a3d1 · fe6a3d1
1 parent 7184bd9
commit fe6a3d1
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 7 deletions.
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/AboutApp.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/AboutApp.razor
@@ -0,0 +1,4 @@
+<div>
+    <h1>About MiniSpace</h1>
+    <p>MiniSpace is a dynamic social platform designed to connect people and communities. Discover, share, and interact with content that drives innovation and engagement.</p>
+</div>
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/Connect.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/Connect.razor
@@ -0,0 +1,6 @@
+<div>
+    <h1>Connect</h1>
+    <p>Contact Us:</p>
+    <p>Email: support@minispace.com</p>
+    <p>Phone: +123 456 7890</p>
+</div>
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/Index.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/Index.razor
@@ -2,7 +2,7 @@
 @using MudBlazor
 
 <MudLayout Class="landing-page container">
-    <MudContainer MaxWidth="MaxWidth.False" Class="split-screen" Style="display: flex; align-items: center; justify-content: center; height: 80vh; margin-left: auto; margin-right: auto;">
+    <MudContainer MaxWidth="MaxWidth.False" Class="split-screen" Style="display: flex; align-items: center; justify-content: center; height: 80vh; margin-left: auto; margin-right: auto;" id="home">
         <MudGrid Style="width: 100%;">
             <MudItem xs="12" md="6" Class="carousel-section">
                 <MudCarousel @bind-SelectedIndex="@activeIndex" Class="mud-width-full" Style="height: 50vh;" ShowArrows="@arrows" ShowBullets="@bullets" EnableSwipeGesture="@enableSwipeGesture" AutoCycle="@autocycle" TData="object">
@@ -37,6 +37,15 @@
         </MudGrid>
     </MudContainer>
 
+
+    <div id="about">
+        <AboutApp />
+    </div>
+
+    <div id="connect">
+        <Connect />
+    </div>
+
 </MudLayout>
 
 @code {

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/_Host.cshtml b/MiniSpace.Web/src/MiniSpace.Web/Pages/_Host.cshtml
@@ -23,5 +23,14 @@
     <script src="_framework/blazor.server.js"></script>
     <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script>
+        window.scrollToSection = function(sectionId) {
+            var element = document.getElementById(sectionId);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth' });
+            }
+        };
+
+    </script>
 </body>
 </html>
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Shared/CustomRadzenFooter.razor b/MiniSpace.Web/src/MiniSpace.Web/Shared/CustomRadzenFooter.razor
@@ -1,7 +1,7 @@
 @using Radzen
 @inherits LayoutComponentBase
 
-<RadzenFooter style="background-color: #333; color: white; padding: 20px; text-align: center; bottom:0;">
+<RadzenFooter style="background-color: #333; color: white; padding: 20px; text-align: center; ">
     <div style="max-width: 1200px; width: 100%; margin: auto !important; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center;">
         <div style="flex: 1; min-width: 250px; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;">
             <h5>About MiniSpace</h5>

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Shared/MainLayout.razor b/MiniSpace.Web/src/MiniSpace.Web/Shared/MainLayout.razor
@@ -2,9 +2,10 @@
 @inherits LayoutComponentBase
 @inject IIdentityService IdentityService
 @inject NavigationManager NavigationManager
+@inject Microsoft.JSInterop.IJSRuntime JSRuntime
 
 
-<RadzenLayout style="margin: -8.0px; width: 100%; text-align: center;"> 
+<RadzenLayout style="margin: -8.0px; width: 100%; text-align: center;"  id="radzen-layout" > 
     <RadzenHeader>
         <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween"
                      Style="width: 98.5%;">
@@ -17,6 +18,9 @@
             </RadzenStack>
             <RadzenMenu>
                 <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5em">
+                    <RadzenMenuItem Text="Home" Click="@(() => ScrollToSection("home"))" />
+                    <RadzenMenuItem Text="About App" Click="@(() => ScrollToSection("about"))" />
+                    <RadzenMenuItem Text="Connect" Click="@(() => ScrollToSection("connect"))" />
                     @if (IdentityService.IsAuthenticated)
                     {
                         <RadzenMenuItem Text="Sign Out" Click=@SignOut Icon="exit_to_app"/>
@@ -43,23 +47,26 @@
         </RadzenSidebar>
     }
 
-    <RadzenBody style="margin: -12.0px;">
+    <RadzenBody style="margin: -12.0px;" class="radzen-body">
         <div class="rz-p-4">
             @Body
         </div>
     </RadzenBody>
     <CustomRadzenFooter />
 </RadzenLayout>
 
-@code{
 
+@code{
     bool _sidebarExpanded = true;
 
     void SignOut()
     {
-        // Implement your sign-out logic here, e.g., redirect to sign-out path, clear authentication state
         IdentityService.Logout();
         NavigationManager.NavigateTo("");
     }
 
+    void ScrollToSection(string sectionId)
+    {
+        JSRuntime.InvokeVoidAsync("scrollToSection", sectionId);
+    }
 }
diff --git a/MiniSpace.Web/src/MiniSpace.Web/wwwroot/css/site.css b/MiniSpace.Web/src/MiniSpace.Web/wwwroot/css/site.css
@@ -222,4 +222,19 @@ main {
     .landing-page {
         padding: 2rem 10rem; 
     }
-}
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+#radzen-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.radzen-body {
+    flex: 1;
+}