Redesign UI

StartSch.Wasm/Components/Card.razor

@@ -0,0 +1,65 @@
+<article class="card @(Variant switch
+                     {
+                         CardVariant.Post => "post",
+                         CardVariant.Event => "event",
+                         _ => throw new NotImplementedException(),
+                     })">
+    @if (ContainerContent is { })
+    {
+        <div class="container-content">
+            @ContainerContent
+        </div>
+    }
+
+    <div class="top-details">
+        <div>
+            @TopDetails
+        </div>
+        <div class="admin-buttons">
+            @AdminButtons
+        </div>
+    </div>
+
+    <div class="title">
+        @if (InternalUrl is { })
+        {
+            <a href="@InternalUrl">
+                <Heading Level="@HeadingLevel">
+                    @Title
+                </Heading>
+            </a>
+        }
+        else
+        {
+            <Heading Level="@HeadingLevel">
+                @Title
+            </Heading>
+        }
+    </div>
+
+    <div class="middle-details">
+        @MiddleDetails
+    </div>
+    <div class="content">
+        @Content
+    </div>
+    @if (ChildContent is { })
+    {
+        <div class="child-content">
+            @ChildContent
+        </div>
+    }
+</article>
+
+@code {
+    [Parameter, EditorRequired] public CardVariant Variant { get; set; }
+    [Parameter] public RenderFragment? ContainerContent { get; set; }
+    [Parameter] public RenderFragment? AdminButtons { get; set; }
+    [Parameter, EditorRequired] public int HeadingLevel { get; set; }
+    [Parameter] public RenderFragment? TopDetails { get; set; }
+    [Parameter] public RenderFragment? Title { get; set; }
+    [Parameter] public string? InternalUrl { get; set; }
+    [Parameter] public RenderFragment? MiddleDetails { get; set; }
+    [Parameter] public RenderFragment? Content { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}

StartSch.Wasm/Components/Card.razor.css

@@ -0,0 +1,63 @@
+.card {
+    &.post {
+        background-color: var(--sch-comp-card-container-color);
+        color: var(--sch-comp-card-content-color);
+    }
+
+    &.event {
+        border: 1px solid var(--md-sys-color-outline-variant);
+        background-color: var(--md-sys-color-surface-container-high);
+    }
+
+    border-radius: 4px;
+
+    padding: 20px;
+
+    &:first-child {
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+    }
+
+    &:last-child {
+        border-bottom-left-radius: 24px;
+        border-bottom-right-radius: 24px;
+    }
+
+    .container-content {
+        background-color: var(--md-sys-color-surface-container-low);
+        padding: 16px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 16px;
+        margin-bottom: 12px;
+    }
+
+    .top-details {
+        margin-bottom: 10px;
+        align-items: center;
+
+        &:has(.admin-buttons *) {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 8px;
+        }
+    }
+
+    .title {
+        font-family: var(--md-sys-typescale-title-medium-font);
+        font-size: var(--md-sys-typescale-title-medium-size);
+        line-height: var(--md-sys-typescale-title-medium-line-height);
+        font-weight: var(--md-sys-typescale-title-medium-weight);
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking)
+    }
+
+    .middle-details {
+    }
+
+    .content {
+        font-family: var(--md-sys-typescale-body-medium-font);
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        font-weight: var(--md-sys-typescale-body-medium-weight);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    }
+}

StartSch.Wasm/Components/CardList.razor

@@ -0,0 +1,7 @@
+<div>
+    @ChildContent
+</div>
+
+@code {
+    [Parameter, EditorRequired] public required RenderFragment ChildContent { get; set; }
+}

StartSch.Wasm/Components/CardList.razor.css

@@ -0,0 +1,5 @@
+* {
+    display: flex;
+    gap: 2px;
+    flex-direction: column;
+}

StartSch.Wasm/Components/CardVariant.cs

@@ -0,0 +1,7 @@
+namespace StartSch.Wasm.Components;
+
+public enum CardVariant
+{
+    Post,
+    Event,
+}

StartSch.Wasm/Components/Heading.razor

@@ -0,0 +1,44 @@
+@switch (Level)
+{
+    case 1:
+        <h1 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h1>
+        break;
+    case 2:
+        <h2 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h2>
+        break;
+    case 3:
+        <h3 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h3>
+        break;
+    case 4:
+        <h4 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h4>
+        break;
+    case 5:
+        <h5 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h5>
+        break;
+    case 6:
+        <h6 @attributes="@AdditionalAttributes">
+            @ChildContent
+        </h6>
+        break;
+    default:
+        throw new NotSupportedException();
+}
+
+@code {
+    [Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
+    [Parameter, EditorRequired] public int Level { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+}

StartSch.Wasm/Components/Heading.razor.css

@@ -0,0 +1,7 @@
+* {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+}

StartSch/Components/Pages/FontStylesPage.razor

@@ -0,0 +1,89 @@
+@page "/fonts"
+
+@layout AdminLayout
+
+<Title>Betűtípusok</Title>
+
+<div class="font-specimen">
+    <h1>M3 tipográfiai stílusok</h1>
+    <p class="intro">
+        A Material 3 típus-skála mind a 30 stílusa (15 alap + 15 emphasized), három betűtípuson
+        összehasonlítva. A tényleges témában a display/headline/title stílusok a <i>brand</i>, a
+        body/label stílusok a <i>plain</i> betűtípushoz tartoznak (lásd
+        <code>css/tokens/md-sys-type.css</code>); ez az oldal mindhárom betűtípust megmutatja.
+        Az <i>emphasized</i> stílusok súlya egy lépéssel magasabb (400→500, 500→700) az M3
+        expressive frissítés szerint.
+    </p>
+
+    @foreach (var variant in Variants)
+    {
+        <h2>@variant.Label</h2>
+
+        <div class="header">
+            <div class="role-col">Stílus</div>
+            @foreach (var family in Families)
+            {
+                <div class="family-col">@family.Label</div>
+            }
+        </div>
+
+        @foreach (var role in Roles)
+        {
+            <div class="role-row">
+                <div class="role-col">
+                    <div class="role-name">@role.Name</div>
+                    <div class="role-spec">@(variant.Id == "emphasized-" ? role.EmphasizedSpec : role.Spec)</div>
+                </div>
+                @foreach (var family in Families)
+                {
+                    <div class="sample" style="@Style(role.Id, family.Id, variant.Id)">@Sample</div>
+                }
+            </div>
+        }
+    }
+</div>
+
+@code {
+    private const string Sample = "Árvíztűrő tükörfúrógép — The quick brown fox jumps over the lazy dog 0123456789";
+
+    private static readonly (string Id, string Label)[] Families =
+    [
+        ("serif", "Roboto Serif"),
+        ("google-sans", "Google Sans Flex"),
+        ("roboto-flex", "Roboto Flex"),
+    ];
+
+    // variant.Id is the typescale token prefix: "" for baseline, "emphasized-" for emphasized
+    private static readonly (string Id, string Label)[] Variants =
+    [
+        ("", "Alap (baseline)"),
+        ("emphasized-", "Emphasized"),
+    ];
+
+    // Size / line-height / weight / tracking, from the M3 v0.192 baseline and expressive emphasized scales
+    private static readonly (string Id, string Name, string Spec, string EmphasizedSpec)[] Roles =
+    [
+        ("display-large", "Display Large", "57 / 64 · w400 · −0.25", "57 / 64 · w500"),
+        ("display-medium", "Display Medium", "45 / 52 · w400", "45 / 52 · w500"),
+        ("display-small", "Display Small", "36 / 44 · w400", "36 / 44 · w500"),
+        ("headline-large", "Headline Large", "32 / 40 · w400", "32 / 40 · w500"),
+        ("headline-medium", "Headline Medium", "28 / 36 · w400", "28 / 36 · w500"),
+        ("headline-small", "Headline Small", "24 / 32 · w400", "24 / 32 · w500"),
+        ("title-large", "Title Large", "22 / 28 · w400", "22 / 28 · w500"),
+        ("title-medium", "Title Medium", "16 / 24 · w500 · 0.15", "16 / 24 · w700 · 0.15"),
+        ("title-small", "Title Small", "14 / 20 · w500 · 0.1", "14 / 20 · w700 · 0.1"),
+        ("body-large", "Body Large", "16 / 24 · w400 · 0.5", "16 / 24 · w500 · 0.15"),
+        ("body-medium", "Body Medium", "14 / 20 · w400 · 0.25", "14 / 20 · w500 · 0.25"),
+        ("body-small", "Body Small", "12 / 16 · w400 · 0.4", "12 / 16 · w500 · 0.4"),
+        ("label-large", "Label Large", "14 / 20 · w500 · 0.1", "14 / 20 · w700 · 0.1"),
+        ("label-medium", "Label Medium", "12 / 16 · w500 · 0.5", "12 / 16 · w700 · 0.5"),
+        ("label-small", "Label Small", "11 / 16 · w500 · 0.5", "11 / 16 · w700 · 0.5"),
+    ];
+
+    private static string Style(string role, string family, string variant) =>
+        $"font-family:var(--md-ref-typeface-{family});" +
+        $"font-size:var(--md-sys-typescale-{variant}{role}-size);" +
+        $"line-height:var(--md-sys-typescale-{variant}{role}-line-height);" +
+        $"font-weight:var(--md-sys-typescale-{variant}{role}-weight);" +
+        $"letter-spacing:var(--md-sys-typescale-{variant}{role}-tracking);";
+}

StartSch/Components/Pages/FontStylesPage.razor.css

@@ -0,0 +1,43 @@
+.font-specimen {
+    padding: 16px;
+    max-width: 1200px;
+    margin: auto;
+}
+
+.intro {
+    color: var(--md-sys-color-on-surface-variant);
+    margin-bottom: 24px;
+}
+
+.header,
+.role-row {
+    display: grid;
+    grid-template-columns: 200px 1fr 1fr 1fr;
+    gap: 0 24px;
+    align-items: start;
+}
+
+.header {
+    font-weight: 600;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.role-row {
+    padding: 16px 0;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.role-name {
+    font-weight: 500;
+}
+
+.role-spec {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+}
+
+.sample {
+    min-width: 0;
+}