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.
TimothyYe / bing-wallpaper
A RESTful API to fetch daily wallpaper from Bing.com
Bing Wallpaper API
A RESTful API to fetch daily wallpaper from Bing.com
Usage
API
- API Address: https://bing.biturl.top
- Method:
HTTP GET
Parameters
-
format
The response format, can bejson
orimage
. If response format is set asimage
, you will be redirected to the wallpaper image directly. -
image_format
The format of the wallpaper image, available values arejpg
orwebp
. The default value isjpg
. -
index
The index of wallpaper, starts from 0. By default,0
means to get today's image,1
means to get the image of yesterday, and so on. Or you can specify it asrandom
to choose a random index between 0 and 7. -
mkt
The region parameter, the default value iszh-CN
, you can also useen-US
,ja-JP
,en-AU
,en-GB
,de-DE
,en-NZ
,en-CA
. You can also set it asrandom
to choose theβ¦
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 π
Top comments (0)