Hackathon - Hack Together: Microsoft Graph and .NET 🦒 - Day 06

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.

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 🙂

Emanuele BartolesiFollow

🏆 Microsoft MVP & GitHub Star ⭐ | 🔓 Auth0 Ambassador & 📢 Codemotion Ambassador | 👨‍🎓 LinkedIn Technical Instructor