Today I worked on the UI. Only on the UI. I was hoping there would be something on FluentUI for drawing a layout, but after a bit of searching in the documentation, I didn't actually find anything.
This is the reason why I created a three columns layout manually.
First of all I added the following code in the app.css file:
.row {
display: flex;
}
.column {
flex: 33.33%;
height: 400px;
padding: 8px;
margin: 12px;
text-align: center;
}
Using flex for this kind of layout is very easy and I think it's the fastest way to create a simple columns layout like this.
Then I changed the index.razor and I added a div around the three Fluent Card with the class "row" I have created one step before.
<div class="row">
<M365.Today.Components.CalendarCard />
<M365.Today.Components.MailCard />
<M365.Today.Components.ToDoCard />
</div>
Then I changed each Fluent Card by adding the class "column" to the element. This is the example of the TodoCard:
<FluentCard Class="column">
<div class="contents">
<FluentIcon Name="@FluentIcons.Check" Size="@IconSize.Size32" Variant="@IconVariant.Regular" Color="@Color.Accent" />
<div data-is-scrollable="true">
<FluentDataGrid RowsData="@todos">
<PropertyColumn Property="@(p => p.Title)" Title="Title" />
<PropertyColumn Property="@(p => Convert.ToDateTime(p.DueDateTime.DateTime))" Format="MM-dd-yyyy" Title="Due Date" />
</FluentDataGrid>
</div>
</div>
</FluentCard>
I wanted to add some colours and a good background to the page. I decided to use the Bing image of the day. After a quick search, I founded the following repository on GitHub.com.
{% embed https://github.com/TimothyYe/bing-wallpaper %}
I changed again the app.css file by adding a customization for the body element:
body {
background-image: url(https://bing.biturl.top/?resolution=3840&format=image&index=0&mkt=zh-CN);
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
As I read in the documentation, it's possible to use the API directly in the CSS to add the image as background.
This is the result:
Not the best page in the world, but start to be a good page in terms of layout cleaning and good UI.
Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: Learning GitHub.
Thanks for reading this post, I hope you found it interesting!
Feel free to follow me to get notified when new articles are out π
{% embed https://dev.to/kasuken %}