Skip to content

Commit 513f621

Browse files
albi005albi005
authored
Redesign UI (#216)
1 parent 44b6aad commit 513f621

83 files changed

Lines changed: 2144 additions & 1601 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.idea/.idea.StartSCH/.idea/indexLayout.xml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎StartSch.Wasm/Components/Card.razor‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<div
2+
class="
3+
card
4+
@(Variant switch
5+
{
6+
CardVariant.Post => "post",
7+
CardVariant.Event => "event",
8+
CardVariant.ParentEvent => "parent-event",
9+
_ => throw new NotImplementedException(),
10+
})
11+
">
12+
@*
13+
When showing an Event's parent above it, we want to make the main Event an h1 and the parent an h2.
14+
Because of accessibility, the h2 must be after the h1 in the HTML.
15+
To do this we render the h1 first, then reorder the headings using a CSS flexbox.
16+
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#accessibility
17+
*@
18+
@if (Variant is CardVariant.ParentEvent)
19+
{
20+
<div class="child-content">
21+
@ChildContent
22+
</div>
23+
}
24+
25+
<article>
26+
@if (TopDetails is { } || AdminButtons is { })
27+
{
28+
<div class="top-details">
29+
<div class="top-details-content">
30+
@TopDetails
31+
</div>
32+
<div class="admin-buttons">
33+
@AdminButtons
34+
</div>
35+
</div>
36+
}
37+
<header>
38+
@if (Variant is CardVariant.Event or CardVariant.ParentEvent)
39+
{
40+
<md-icon>event</md-icon>
41+
}
42+
<div style="flex: 1">
43+
<div class="title">
44+
@if (InternalUrl is { })
45+
{
46+
<a href="@InternalUrl">
47+
<Heading Level="@HeadingLevel">
48+
@Title
49+
</Heading>
50+
</a>
51+
}
52+
else
53+
{
54+
<Heading Level="@HeadingLevel">
55+
@Title
56+
</Heading>
57+
}
58+
</div>
59+
@if (MiddleDetails is { })
60+
{
61+
<div class="middle-details">
62+
@MiddleDetails
63+
</div>
64+
}
65+
</div>
66+
@if (ActionButton is { })
67+
{
68+
<div class="action-button">
69+
@ActionButton
70+
</div>
71+
}
72+
</header>
73+
74+
@if (Content is { })
75+
{
76+
<div class="content">
77+
@Content
78+
</div>
79+
}
80+
@if (ChildContent is { } && Variant is not CardVariant.ParentEvent)
81+
{
82+
<div class="child-content">
83+
@ChildContent
84+
</div>
85+
}
86+
</article>
87+
88+
@* More reordering for accessibility, but for a Post and its Event *@
89+
@if (ContainerContent is { })
90+
{
91+
<div class="container-content">
92+
@ContainerContent
93+
</div>
94+
}
95+
</div>
96+
97+
@code {
98+
[Parameter, EditorRequired] public CardVariant Variant { get; set; }
99+
[Parameter] public RenderFragment? ContainerContent { get; set; }
100+
[Parameter] public RenderFragment? AdminButtons { get; set; }
101+
[Parameter, EditorRequired] public int HeadingLevel { get; set; }
102+
[Parameter] public RenderFragment? TopDetails { get; set; }
103+
[Parameter] public RenderFragment? Title { get; set; }
104+
[Parameter] public string? InternalUrl { get; set; }
105+
[Parameter] public RenderFragment? MiddleDetails { get; set; }
106+
[Parameter] public RenderFragment? ActionButton { get; set; }
107+
[Parameter] public RenderFragment? Content { get; set; }
108+
[Parameter] public RenderFragment? ChildContent { get; set; }
109+
}

‎StartSch.Wasm/Components/Card.razor.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
@media (width >= 1016px) {
2+
.card {
3+
padding: 20px;
4+
5+
&.parent-event {
6+
>.child-content {
7+
margin: -21px;
8+
}
9+
}
10+
}
11+
}
12+
@media (width < 1016px) {
13+
.card {
14+
padding: 16px;
15+
16+
&.parent-event {
17+
>.child-content {
18+
margin: -17px;
19+
}
20+
}
21+
}
22+
}
23+
24+
.card {
25+
display: flex;
26+
flex-direction: column-reverse;
27+
28+
&.post {
29+
background-color: var(--sch-comp-card-container-color);
30+
color: var(--sch-comp-card-content-color);
31+
}
32+
33+
&.event, &.parent-event {
34+
border: 1px solid var(--md-sys-color-outline-variant);
35+
background-color: var(--md-sys-color-surface-container-high);
36+
}
37+
38+
border-radius: 4px;
39+
40+
&:first-child {
41+
border-top-left-radius: 24px;
42+
border-top-right-radius: 24px;
43+
}
44+
45+
&:last-child {
46+
border-bottom-left-radius: 24px;
47+
border-bottom-right-radius: 24px;
48+
}
49+
50+
.container-content {
51+
margin-bottom: 12px;
52+
}
53+
54+
header {
55+
display: flex;
56+
gap: 8px;
57+
align-items: center;
58+
}
59+
60+
.top-details {
61+
align-items: center;
62+
display: none; /* hide by default, show if it has content */
63+
margin-bottom: 8px;
64+
65+
&:has(>.top-details-content *) {
66+
display: block;
67+
}
68+
69+
&:has(>.admin-buttons *) {
70+
display: grid;
71+
grid-template-columns: 1fr auto;
72+
gap: 8px;
73+
}
74+
}
75+
76+
.title {
77+
font-family: var(--md-sys-typescale-title-medium-font);
78+
font-size: var(--md-sys-typescale-title-medium-size);
79+
line-height: var(--md-sys-typescale-title-medium-line-height);
80+
font-weight: var(--md-sys-typescale-title-medium-weight);
81+
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
82+
}
83+
84+
.content {
85+
font-family: var(--md-sys-typescale-body-medium-font);
86+
font-size: var(--md-sys-typescale-body-medium-size);
87+
line-height: var(--md-sys-typescale-body-medium-line-height);
88+
font-weight: var(--md-sys-typescale-body-medium-weight);
89+
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
90+
}
91+
92+
&:has(>article>header>div>.middle-details) >article>.content {
93+
margin-top: .5rem;
94+
}
95+
96+
.child-content {
97+
margin-top: .5rem;
98+
}
99+
}

‎StartSch.Wasm/Components/CardList.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="card-list @(IsTopLevel ? "top-level" : null)">
2+
@ChildContent
3+
</div>
4+
5+
@code {
6+
[Parameter, EditorRequired] public required RenderFragment ChildContent { get; set; }
7+
[Parameter] public bool IsTopLevel { get; set; }
8+
}

‎StartSch.Wasm/Components/CardList.razor.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.card-list {
2+
display: flex;
3+
gap: 2px;
4+
flex-direction: column;
5+
}
6+
7+
@media (width < 1016px) {
8+
.card-list.top-level {
9+
margin-left: -12px;
10+
margin-right: -12px;
11+
}
12+
}

‎StartSch.Wasm/Components/CardVariant.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
namespace StartSch.Wasm.Components;
2+
3+
public enum CardVariant
4+
{
5+
Post,
6+
Event,
7+
ParentEvent,
8+
}

‎StartSch.Wasm/Components/EventSettingsDialog.razor‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,31 @@
2121
</md-icon>
2222
</md-icon-button>
2323

24-
<h2>
24+
<h2 class="typescale-title-medium">
2525
@RenderStringDiff(originalEvent.Title, modifiedEvent.Title)
2626
</h2>
2727
<ul class="property-list">
2828
@if (modifiedEvent is { SourceCalendar: PersonalMoodleCalendarLive, Subject: { } subject })
2929
{
30-
<li>
30+
<li class="typescale-body-medium">
3131
<md-icon>school</md-icon>
3232
@subject
3333
</li>
3434
}
35-
<li>
35+
<li class="typescale-body-medium">
3636
<md-icon>event</md-icon>
3737
@RenderDateDiff(EditContext.EventContext)
3838
</li>
3939
@if (!string.IsNullOrWhiteSpace(originalEvent.Location) || !string.IsNullOrWhiteSpace(modifiedEvent.Location))
4040
{
41-
<li>
41+
<li class="typescale-body-medium">
4242
<md-icon>location_on</md-icon>
4343
@RenderStringDiff(originalEvent.Location, modifiedEvent.Location)
4444
</li>
4545
}
4646
@if (modifiedEvent.Teachers is [_, ..])
4747
{
48-
<li>
48+
<li class="typescale-body-medium">
4949
<md-icon>co_present</md-icon>
5050
@string.Join(", ", modifiedEvent.Teachers)
5151
</li>
@@ -55,7 +55,7 @@
5555
case PersonalMoodleCalendarLive { Url: { } url } when url.IndexOf("/calendar/export_execute.php", StringComparison.InvariantCulture) is var pathStart and not -1:
5656
{
5757
var baseUrl = url[..pathStart];
58-
<li>
58+
<li class="typescale-body-medium">
5959
<md-icon>link</md-icon>
6060
<a href="@baseUrl" target="_blank">
6161
@originalEvent.SourceCalendar.Name
@@ -71,7 +71,7 @@
7171
case PersonalNeptunCalendarLive { Url: { } url } when url.IndexOf("/api/Calendar/CalendarExportFileToSyncronization", StringComparison.InvariantCulture) is var pathStart and not -1:
7272
{
7373
var baseUrl = url[..pathStart];
74-
<li>
74+
<li class="typescale-body-medium">
7575
<md-icon>link</md-icon>
7676
<a href="@baseUrl" target="_blank">
7777
@originalEvent.SourceCalendar.Name
@@ -94,7 +94,7 @@
9494
.Where(x => selectedDates.Contains(x.OriginalEvent.Start))
9595
.ToList();
9696
<section class="select-targets">
97-
<h4>
97+
<h4 class="typescale-label-medium">
9898
Módosítandó események
9999
</h4>
100100
@{
@@ -144,7 +144,7 @@
144144
</section>
145145
}
146146

147-
Kategória
147+
<h4 class="typescale-label-medium">Kategória</h4>
148148
<div class="option-with-reset-button">
149149
@{
150150
bool selectedEventsCategoriesMatch = selectedEvents
@@ -188,7 +188,7 @@
188188
}
189189
@if (commonOriginalLength is { TotalMinutes: 60 + 45 or 120 + 45 } || anyLengthModifications)
190190
{
191-
<div style="margin-top: 16px">
191+
<div class="typescale-label-medium" style="margin-top: 16px">
192192
Hossz
193193
</div>
194194
<div class="option-with-reset-button">

‎StartSch.Wasm/Components/EventSettingsDialog.razor.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,12 @@
4848
padding: 0 6px;
4949
color: var(--md-sys-color-on-surface-variant);
5050
border-radius: 4px;
51-
font-weight: 600;
52-
font-size: 14px;
51+
52+
font-family: var(--md-sys-typescale-label-large-font);
53+
font-size: var(--md-sys-typescale-label-large-size);
54+
line-height: var(--md-sys-typescale-label-large-line-height);
55+
font-weight: var(--md-sys-typescale-label-large-weight);
56+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
5357
}
5458

5559
.select-targets {

‎StartSch.Wasm/Components/Heading.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@switch (Level)
2+
{
3+
case 1:
4+
<h1 @attributes="@AdditionalAttributes">
5+
@ChildContent
6+
</h1>
7+
break;
8+
case 2:
9+
<h2 @attributes="@AdditionalAttributes">
10+
@ChildContent
11+
</h2>
12+
break;
13+
case 3:
14+
<h3 @attributes="@AdditionalAttributes">
15+
@ChildContent
16+
</h3>
17+
break;
18+
case 4:
19+
<h4 @attributes="@AdditionalAttributes">
20+
@ChildContent
21+
</h4>
22+
break;
23+
case 5:
24+
<h5 @attributes="@AdditionalAttributes">
25+
@ChildContent
26+
</h5>
27+
break;
28+
default:
29+
<h6 @attributes="@AdditionalAttributes">
30+
@ChildContent
31+
</h6>
32+
break;
33+
}
34+
35+
@code {
36+
[Parameter, EditorRequired] public RenderFragment? ChildContent { get; set; }
37+
[Parameter, EditorRequired] public int Level { get; set; }
38+
39+
[Parameter(CaptureUnmatchedValues = true)]
40+
public Dictionary<string, object>? AdditionalAttributes { get; set; }
41+
42+
}

‎StartSch.Wasm/Components/Heading.razor.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
* {
2+
font-family: inherit;
3+
font-size: inherit;
4+
line-height: inherit;
5+
font-weight: inherit;
6+
letter-spacing: inherit;
7+
}

0 commit comments

Comments
 (0)