修复设置卡片布局问题

增加普通页面模板
wherewhere · Jul 6, 2024 · 14a1cb7 · 14a1cb7
1 parent 94a35c1
commit 14a1cb7
Show file tree

Hide file tree

Showing 23 changed files with 375 additions and 324 deletions.
diff --git a/Wherlog/Controls/ContentsView.razor b/Wherlog/Controls/ContentsView.razor
@@ -0,0 +1,19 @@
+<div class="contents-view">
+    @Content
+</div>
+
+@code
+{
+    /// <summary>
+    /// Gets or sets a value indicating whether a 'Back to top' button should be rendered.
+    /// Defaults to true
+    /// </summary>
+    [Parameter]
+    public bool ShowBackButton { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets the content of a ContentControl.
+    /// </summary>
+    [Parameter]
+    public RenderFragment Content { get; set; }
+}
diff --git a/Wherlog/Controls/ContentsView.razor.css b/Wherlog/Controls/ContentsView.razor.css
@@ -0,0 +1,15 @@
+div.contents-view {
+    padding: 1.5rem 1rem;
+}
+
+@media (max-width: 600px) {
+    div.contents-view {
+        padding: 0 0 1rem 0;
+    }
+}
+
+@media (max-width: 767px) {
+    div.contents-view {
+        padding: 1rem 0 1rem 0;
+    }
+}
diff --git a/Wherlog/Controls/MainLayout.razor b/Wherlog/Controls/MainLayout.razor
@@ -5,10 +5,9 @@
 <div class="main-layout">
     <FluentLayout>
         <FluentHeader>@(site?.Title ?? "wherlog")</FluentHeader>
-        <FluentStack
-            Class="main-split"
-            Width="100%"
-            Style="align-items: stretch;">
+        <FluentStack Class="main-split"
+                     Width="100%"
+                     Style="align-items: stretch;">
             <div class="nav-div">
                 <NavMenu />
             </div>
@@ -21,10 +20,9 @@
                         <div class="blazor-error-root">
                             <div class="blazor-error-boundary">@ex.Message</div>
                             <FluentButton OnClick="OnParametersSet" BackgroundColor="transparent">
-                                <FluentIcon
-                                    Value="@(new Icons.Regular.Size20.Dismiss())"
-                                    Color="Color.Custom"
-                                    CustomColor="white"/>
+                                <FluentIcon Value="@(new Icons.Regular.Size20.Dismiss())"
+                                            Color="Color.Custom"
+                                            CustomColor="white" />
                             </FluentButton>
                         </div>
                     </ErrorContent>

diff --git a/Wherlog/Controls/NavMenu.razor b/Wherlog/Controls/NavMenu.razor
@@ -1,57 +1,49 @@
 @inject IStringLocalizer<NavMenu> Loc
 
 <div class="nav-menu">
-    <input
-        type="checkbox"
-        title="@Loc["NavMenuToggleTitle"]"
-        id="nav-menu-toggle"
-        class="nav-menu-icon" />
+    <input type="checkbox"
+           title="@Loc["NavMenuToggleTitle"]"
+           id="nav-menu-toggle"
+           class="nav-menu-icon" />
     <label for="nav-menu-toggle" class="nav-menu-icon">
         <FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" />
     </label>
-    <nav
-        class="sitenav"
-        aria-labelledby="main-menu"
-        onclick="document.getElementById('nav-menu-toggle').click();">
-        <FluentNavMenu
-            Id="main-menu"
-            Width="250"
-            Collapsible="true"
-            Title="@Loc["MainMenuTitle"]"
-            @bind-Expanded="expanded">
-            <FluentNavLink
-                Href="./"
-                Match="NavLinkMatch.All"
-                Icon="@(new Icons.Regular.Size20.Home())"
-                IconColor="Color.Accent">
+    <nav class="sitenav"
+         aria-labelledby="main-menu"
+         onclick="document.getElementById('nav-menu-toggle').click();">
+        <FluentNavMenu Id="main-menu"
+                       Width="250"
+                       Collapsible="true"
+                       Title="@Loc["MainMenuTitle"]"
+                       @bind-Expanded="expanded">
+            <FluentNavLink Href="./"
+                           Match="NavLinkMatch.All"
+                           Icon="@(new Icons.Regular.Size20.Home())"
+                           IconColor="Color.Accent">
                 @Loc["HomeText"]
             </FluentNavLink>
-            <FluentNavLink
-                Href="tags"
-                Match="NavLinkMatch.Prefix"
-                Icon="@(new Icons.Regular.Size20.Tag())"
-                IconColor="Color.Accent">
+            <FluentNavLink Href="tags"
+                           Match="NavLinkMatch.Prefix"
+                           Icon="@(new Icons.Regular.Size20.Tag())"
+                           IconColor="Color.Accent">
                 @Loc["TagText"]
             </FluentNavLink>
-            <FluentNavLink
-                Href="categories"
-                Match="NavLinkMatch.Prefix"
-                Icon="@(new Icons.Regular.Size20.Grid())"
-                IconColor="Color.Accent">
+            <FluentNavLink Href="categories"
+                           Match="NavLinkMatch.Prefix"
+                           Icon="@(new Icons.Regular.Size20.Grid())"
+                           IconColor="Color.Accent">
                 @Loc["CategoryText"]
             </FluentNavLink>
-            <FluentNavLink
-                Href="archives"
-                Match="NavLinkMatch.Prefix"
-                Icon="@(new Icons.Regular.Size20.Archive())"
-                IconColor="Color.Accent">
+            <FluentNavLink Href="archives"
+                           Match="NavLinkMatch.Prefix"
+                           Icon="@(new Icons.Regular.Size20.Archive())"
+                           IconColor="Color.Accent">
                 @Loc["ArchiveText"]
             </FluentNavLink>
-            <FluentNavLink
-                Href="settings"
-                Match="NavLinkMatch.Prefix"
-                Icon="@(new Icons.Regular.Size20.Settings())"
-                IconColor="Color.Accent">
+            <FluentNavLink Href="settings"
+                           Match="NavLinkMatch.Prefix"
+                           Icon="@(new Icons.Regular.Size20.Settings())"
+                           IconColor="Color.Accent">
                 @Loc["SettingsText"]
             </FluentNavLink>
         </FluentNavMenu>

diff --git a/Wherlog/Controls/PostCard.razor b/Wherlog/Controls/PostCard.razor
@@ -5,7 +5,9 @@
 
 @if (Post != null)
 {
-    <div class="post-card" @onclick="() => OnClick(Post.Url)">
+    <div class="post-card"
+         @onclick="() => OnClick(Post.Url)"
+         style="cursor: pointer;">
         <h3>@Post.Title</h3>
         @(new MarkupString(Post.Excerpt))
     </div>

diff --git a/Wherlog/Controls/SettingsButton.razor b/Wherlog/Controls/SettingsButton.razor
@@ -1,16 +1,14 @@
 @inherits SettingsCardBase
 
 <div class="@ClassValue" style="@Style">
-    <FluentCard
-        onclick="@OnClick"
-        AreaRestricted="false"
-        Style="padding: var(--settings-button-padding);">
+    <FluentCard onclick="@OnClick"
+                AreaRestricted="false"
+                Style="padding: var(--settings-button-padding);">
         <div class="content-grid">
-            <SettingsPresenter
-                Icon="@Icon"
-                Header="@Header"
-                Description="@Description"
-                ActionContent="@ActionContent" />
+            <SettingsPresenter Icon="@Icon"
+                               Header="@Header"
+                               Description="@Description"
+                               ActionContent="@ActionContent" />
             @if (ActionIcon != null)
             {
                 <div class="action-icon-holder">

diff --git a/Wherlog/Controls/SettingsCard.razor b/Wherlog/Controls/SettingsCard.razor
@@ -3,11 +3,10 @@
 
 <div class="@ClassValue" style="@Style">
     <FluentCard AreaRestricted="false" Style="padding: var(--settings-card-padding);">
-        <SettingsPresenter
-            Icon="@Icon"
-            Header="@Header"
-            Description="@Description"
-            ActionContent="@ActionContent"/>
+        <SettingsPresenter Icon="@Icon"
+                           Header="@Header"
+                           Description="@Description"
+                           ActionContent="@ActionContent"/>
     </FluentCard>
 </div>
 

diff --git a/Wherlog/Controls/SettingsExpander.razor b/Wherlog/Controls/SettingsExpander.razor
@@ -5,11 +5,10 @@
     <FluentAccordion>
         <FluentAccordionItem ChildContent="@Content">
             <HeadingTemplate>
-                <SettingsPresenter
-                    Icon="@Icon"
-                    Header="@Header"
-                    Description="@Description"
-                    ActionContent="@ActionContent" />
+                <SettingsPresenter Icon="@Icon"
+                                   Header="@Header"
+                                   Description="@Description"
+                                   ActionContent="@ActionContent" />
             </HeadingTemplate>
         </FluentAccordionItem>
     </FluentAccordion>

diff --git a/Wherlog/Controls/SettingsPresenter.razor b/Wherlog/Controls/SettingsPresenter.razor
@@ -5,26 +5,26 @@
     <div class="header-root">
         @if (Icon != null)
         {
-            <div class="icon-holder">
+                <div class="icon-holder">
                 @Icon
-            </div>
+                </div>
         }
         <div class="header-panel">
             @if (Header != null)
             {
-                <span>@Header</span>
+                    <span>@Header</span>
             }
             @if (Description != null)
             {
-                <span class="description">@Description</span>
+                    <span class="description">@Description</span>
             }
         </div>
     </div>
     @if (ActionContent != null)
     {
-        <div class="content-presenter">
+            <div class="content-presenter">
             @ActionContent
-        </div>
+            </div>
     }
 </div>
 

diff --git a/Wherlog/Controls/SettingsPresenter.razor.css b/Wherlog/Controls/SettingsPresenter.razor.css
@@ -15,7 +15,7 @@ div.settings-presenter {
 ::deep div.header-root {
     display: flex;
     align-items: center;
-    width: 100%;
+    flex: 1;
 }
 
 ::deep div.icon-holder {

diff --git a/Wherlog/Controls/TableContentsView.razor b/Wherlog/Controls/TableContentsView.razor
@@ -3,10 +3,9 @@
         @Content
     </article>
     <aside>
-        <TableOfContents
-            Heading="@Heading"
-            ShowBackButton="ShowBackButton"
-            @ref=_toc />
+        <TableOfContents Heading="@Heading"
+                         ShowBackButton="ShowBackButton"
+                         @ref=_toc />
     </aside>
 </div>
 

diff --git a/Wherlog/Controls/TableContentsView.razor.css b/Wherlog/Controls/TableContentsView.razor.css
@@ -11,26 +11,36 @@
 
 ::deep aside {
     padding: 1.5rem 1rem;
-    top: 0px;
+    top: 0;
     height: 100vh;
     position: sticky;
     width: 18rem;
 }
 
+@media (max-width: 600px) {
+    ::deep article {
+        padding: 0 0 1rem 0;
+    }
+
+    ::deep aside {
+        padding: 0 0 1rem 0;
+    }
+}
+
 @media (max-width: 767px) {
     div.table-contents-view {
         flex-direction: column;
     }
 
     ::deep article {
-        padding: 0rem 0rem 1rem 0rem;
+        padding: 1rem 0 1rem 0;
         border-right: unset;
         border-bottom: 1px solid var(--neutral-stroke-divider-rest);
         width: 100%;
     }
 
     ::deep aside {
-        padding: 0rem 0rem 1rem 0rem;
+        padding: 0 0 1rem 0;
         height: auto;
         width: auto;
     }
@@ -43,7 +53,6 @@
     }
 
     ::deep article {
-        padding-top: 0px;
         width: calc(100% - 12rem);
     }
 }
@@ -65,7 +74,7 @@
 
     ::deep article {
         grid-area: 1 / 2 / 2 / 3;
-        padding-top: 0px;
+        padding-top: 0;
         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));
         width: auto;

diff --git a/Wherlog/Controls/TableOfContents.razor b/Wherlog/Controls/TableOfContents.razor
@@ -5,26 +5,23 @@
 
 <div class="table-of-contents">
     <FluentAccordion>
-        <FluentAccordionItem
-            Expanded="_expanded"
-            Heading="@Heading"
-            Id="toc"
-            role="doc-toc">
-            <FluentIcon
-                Value="@(new Icons.Regular.Size20.TextBulletListTree())"
-                Color="@Color.Accent"
-                Slot="start" />
+        <FluentAccordionItem Expanded="_expanded"
+                             Heading="@Heading"
+                             Id="toc"
+                             role="doc-toc">
+            <FluentIcon Value="@(new Icons.Regular.Size20.TextBulletListTree())"
+                        Color="@Color.Accent"
+                        Slot="start" />
             @GetTocItems(_anchors)
         </FluentAccordionItem>
     </FluentAccordion>
 
     @if (ShowBackButton)
     {
-        <FluentButton
-            Appearance=Appearance.Accent
-            @onclick="BackToTopAsync"
-            Id="backtotop"
-            Title="@Loc["BackToTopTitle"]">
+        <FluentButton Appearance=Appearance.Accent
+                      @onclick="BackToTopAsync"
+                      Id="backtotop"
+                      Title="@Loc["BackToTopTitle"]">
             @Loc["BackToTopContent"]
         </FluentButton>
     }