Switch to Bulma and update components

This commit represents a significant overhaul of the application's styling and component structure, moving away from Bootstrap in favor of the Bulma CSS framework. Key changes include:

- Replaced Bootstrap references with Bulma in `App.razor`, marking the transition to the Bulma framework for the entire application.
- Redesigned modal components (`ContactListModal.razor`, `ReadmeModal.razor`) to utilize Bulma's modal design patterns, including class and structure adjustments.
- Updated `RepositoryDisplay.razor`, `SearchBarDisplay.razor`, `UserProfileDisplay.razor`, and `UserStatisticsDisplay.razor` components to align with Bulma's styling conventions, such as using box, flex, media object, and columns classes.
- Overhauled the main layout (`MainLayout.razor`) and home page (`Home.razor`) to incorporate Bulma's navigation, title, and form classes, and introduced a custom `NavbarDisplay` component with interactive server-side rendering and dynamic CSS class management for mobile responsiveness.
- Removed the Bootstrap CSS file reference from `GPVBlazor.csproj`, indicating a complete migration away from Bootstrap.
- Added custom CSS styles in `app.css` for further customization beyond Bulma's default styles.

These changes not only refresh the application's look and feel but also enhance its responsiveness and accessibility, leveraging Bulma's modern CSS framework capabilities.

GPVBlazor/GPVBlazor/Components/App.razor

@@ -5,9 +5,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link rel="stylesheet" href="bootstrap/bootstrap.css" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="GPVBlazor.styles.css" />
+    <link rel="stylesheet" href="bulma.css" />
     <link rel="stylesheet" href="github-markdown-dark.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet />

GPVBlazor/GPVBlazor/Components/Displays/ContactListModal.razor

@@ -3,24 +3,32 @@
 
 @if (ShowModal && Users is not null)
 {
-    <div class="modal" tabindex="-1" style="display:block;" role="dialog">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">@ModalTitle</h5>
-                    <button type="button" class="btn-close" @onclick="() => ShowModal = false" data-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <Virtualize Items="Users" Context="user">
-                        <a class="d-flex align-items-center gap-2 fw-bold" href="@UserListUrl(user)" @key="user.NodeId">
-                            <img src="@user.AvatarUrl" alt="Avatar" class="img-thumbnail rounded-circle mb-3" style="width: 60px; height: 60px;" />
-                            <div>@user.Login</div>
-                        </a>
-                    </Virtualize>
-                </div>
-            </div>
+    <div class="modal is-active">
+        <div class="modal-background" @onclick="() => ShowModal = false"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <p class="modal-card-title">@ModalTitle</p>
+                <button class="delete is-large" aria-label="close" @onclick="() => ShowModal = false"></button>
+            </header>
+            <section class="modal-card-body">
+                <Virtualize Items="Users" Context="user">
+                    <a class="media" href="@UserListUrl(user)" @key="user.NodeId">
+                        <figure class="media-left">
+                            <p class="image is-48x48">
+                                <img class="is-rounded" src="@user.AvatarUrl" alt="Avatar" />
+                            </p>
+                        </figure>
+                        <div class="media-content">
+                            <div class="content">
+                                <p>@user.Login</p>
+                            </div>
+                        </div>
+                    </a>
+                </Virtualize>
+            </section>
         </div>
     </div>
+
 }
 
 @code {

GPVBlazor/GPVBlazor/Components/Displays/NavbarDisplay.razor

@@ -0,0 +1,48 @@
+@rendermode InteractiveServer
+
+
+<nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+        <NavLink href="navbar-item" Match="NavLinkMatch.All">
+            <span class=" button is-primary">Home</span>
+        </NavLink>
+
+        <!-- Navbar burger -->
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="@isMenuActive.ToString()" @onclick="ToggleNavbar">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+        </a>
+    </div>
+
+    <div id="navbarBasicExample" class="@GetNavbarMenuClass()">
+        <div class="navbar-start">
+            <!-- Additional navbar items can go here -->
+        </div>
+
+        <div class="navbar-end">
+            <div class="navbar-item">
+                <NavLink class="button is-primary" href="/p/sametcn99" Match="NavLinkMatch.All">
+                    <span>sametcn99</span>
+                </NavLink>
+            </div>
+            <div class="navbar-item">
+                <a href="https://sametcc.me/GPVBlazor" target="_blank" class="button is-info">Source Code</a>
+            </div>
+        </div>
+    </div>
+</nav>
+
+@code {
+    private bool isMenuActive = false;
+
+    private void ToggleNavbar()
+    {
+        isMenuActive = !isMenuActive;
+    }
+
+    private string GetNavbarMenuClass()
+    {
+        return "navbar-menu" + (isMenuActive ? " is-active" : "");
+    }
+}

GPVBlazor/GPVBlazor/Components/Displays/ReadmeModal.razor

@@ -3,32 +3,32 @@
 
 @if (ShowModal)
 {
-    <div class="modal" tabindex="-1" style="display:block;" role="dialog">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header d-flex flex-column align-items-start">
-                    <h5 class="modal-title">Readme</h5>
-                    <a class="text-muted" href="https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown-dark.css" target="_blank">Readme css source</a>
-                    <button type="button" class="btn-close" @onclick="() => ShowModal = false" data-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <article class="markdown-body p-2">
-                        @if (readme is not null && !string.IsNullOrWhiteSpace(readme.Content))
-                        {
-                            @((MarkupString)readme.Content)
-                        }
-                        else
-                        {
-                            <p>No readme found.</p>
-                        }
-                    </article>
-
-                </div>
-            </div>
+    <div class="modal is-active">
+        <div class="modal-background" @onclick="() => ShowModal = false"></div>
+        <div class="modal-card" role="document">
+            <header class="modal-card-head">
+                <p class="modal-card-title">
+                    Readme
+                </p>
+                <button class="delete is-large" aria-label="close" @onclick="() => ShowModal = false"></button>
+            </header>
+            <section class="modal-card-body">
+                <article class="content">
+                    @if (readme is not null && !string.IsNullOrWhiteSpace(readme.Content))
+                    {
+                        @((MarkupString)readme.Content)
+                    }
+                    else
+                    {
+                        <p>No readme found.</p>
+                    }
+                </article>
+            </section>
         </div>
     </div>
 }
 
+
 @code {
     [Parameter] public bool ShowModal { get; set; }
     [Parameter] public Readme readme { get; set; }

GPVBlazor/GPVBlazor/Components/Displays/RepositoryDisplay.razor

@@ -2,32 +2,32 @@
 
 @if (repository is not null)
 {
-    <div class="card h-100">
-        <div class="card-body">
-            <div class="d-flex gap-2 align-items-center flex-wrap h-1">
-                <h5 class="card-title">@repository.Name</h5>
-                <h6 class="text-muted">@((repository.Archived) ? "Archived" : "")</h6>
+    <div class="box h-100" style="min-height: 300px;">
+        <div>
+            <div class="is-flex is-align-items-center is-flex-wrap-wrap" style="gap: 0.5rem;">
+                <h5 class="title is-5">@repository.Name</h5>
+                <h6 class="subtitle is-6 has-text-grey">@((repository.Archived) ? "Archived" : "")</h6>
             </div>
-            <h6 class="card-subtitle mb-2 text-muted">@repository.Language</h6>
-            <div class="d-flex flex-row flex-wrap gap-2">
+            <h6 class="subtitle is-6 mb-2 has-text-grey">@repository.Language</h6>
+            <div class="is-flex is-flex-direction-row is-flex-wrap-wrap" style="gap: 0.5rem;">
                 @if (repository.Homepage != "")
                 {
-                    <a href="@repository.Homepage" class="fw-bold text-decoration-none bg-transparent border-0">Homepage</a>
+                    <a href="@repository.Homepage" class="button is-small is-link is-inverted">Homepage</a>
                 }
-                <a href="@repository.HtmlUrl" class="fw-bold text-decoration-none bg-transparent border-0">GitHub</a>
-                <a href="@repository.CloneUrl" class="fw-bold text-decoration-none bg-transparent border-0">Clone URL</a>
+                <a href="@repository.HtmlUrl" class="button is-small is-link is-inverted">GitHub</a>
+                <a href="@repository.CloneUrl" class="button is-small is-link is-inverted">Clone URL</a>
                 @if (repository?.Readme?.Content is not null)
                 {
-                    <button class="fw-bold text-decoration-none bg-transparent border-0" @onclick="() => ShowModal = true">Readme</button>
+                    <button class="button is-small is-link is-inverted" @onclick="() => ShowModal = true">Readme</button>
                     <ReadmeModal ShowModal="ShowModal" readme="repository?.Readme" />
                 }
             </div>
-            <p class="card-text pt-2">@repository?.Description</p>
-        </div>
-        <div class="card-footer flex-column d-flex">
-            <small class="text-muted">Created At: @repository?.CreatedAt</small>
-            <small class="text-muted">Last Pushed: @repository?.PushedAt</small>
+            <p class="pt-2">@repository?.Description</p>
         </div>
+        <footer class="is-flex is-flex-direction-column">
+            <small class="has-text-grey">Created At: @repository?.CreatedAt</small>
+            <small class="has-text-grey">Last Pushed: @repository?.PushedAt</small>
+        </footer>
     </div>
 }
 

GPVBlazor/GPVBlazor/Components/Displays/SearchBarDisplay.razor

@@ -2,28 +2,35 @@
 @using GPVBlazor.Models
 @inject Services.Interfaces.IUserService UserService
 
-<div class="input-group mb-3">
-    <input type="text" class="form-control" placeholder="Write user name..." @bind="inputValue" @bind:event="oninput" @onkeydown="HandleKeyPress">
-    <button class="btn btn-outline-secondary" type="button" @onclick="SearchHandle">Search User</button>
+<div class="field has-addons mb-3">
+    <div class="control is-expanded">
+        <input class="input" type="text" placeholder="Write user name..." @bind="inputValue" @bind:event="oninput" @onkeydown="HandleKeyPress">
+    </div>
+    <div class="control">
+        <button class="button is-info" type="button" @onclick="SearchHandle">Search User</button>
+    </div>
 </div>
 
 <div class="search-results" style="@(showResults ? "display: block;" : "display: none;")">
     <div>
         @if (data?.Items != null)
         {
             <Virtualize Items="@data.Items" Context="item">
-                <a class="search-item d-flex gap-2 text-decoration-none py-1" href="/p/@item.Login">
-                    <img src="@item.AvatarUrl" alt="@item.Login" style="height: 60px; width: 60px;" class="rounded-circle img-thumbnail" />
-                    <div class="d-flex flex-column gap-1 ">
-                        <span class="fs-4 fw-bold">@item.Login</span>
-                        <span>@item.Type</span>
+                <a class="box" href="/p/@item.Login" style="display: flex; align-items: center; gap: 10px; text-decoration: none;">
+                    <figure class="image is-48x48">
+                        <img src="@item.AvatarUrl" alt="@item.Login" class="is-rounded" />
+                    </figure>
+                    <div>
+                        <p class="title is-4">@item.Login</p>
+                        <p class="subtitle is-6">@item.Type</p>
                     </div>
                 </a>
             </Virtualize>
         }
     </div>
 </div>
 
+
 @code {
     private string inputValue = string.Empty;
     private UserSearchResult? data;

GPVBlazor/GPVBlazor/Components/Displays/UserProfileDisplay.razor

@@ -4,11 +4,15 @@
 
 @if (UserProfile is null) { return; }
 
-<div class="card mb-3">
-    <div class="card-body">
-        <img src="@UserProfile.AvatarUrl" alt="Avatar" class="img-thumbnail rounded-circle mb-3 user-select-none pe-none" style="width: 200px; height: 200px;" />
-        <h2 class="p-0 m-0 text-decoration-none fw-bold fs-1">@UserProfile.Name</h2>
-        <a class="mb-1" href="https://github.com/@UserProfile.Login"><strong></strong>@@@UserProfile.Login</a>
+<div class="box mb-3">
+    <figure class="media-left">
+        <p class="image">
+            <img src="@UserProfile.AvatarUrl" alt="Avatar" class="is-rounded" style="object-fit: cover; width: 200px; height: 200px;" />
+        </p>
+    </figure>
+    <div class="media-content">
+        <h2 class="title is-1">@UserProfile.Name</h2>
+        <a class="mb-1" href="https://github.com/@UserProfile.Login"><strong>@@@UserProfile.Login</strong></a>
         <p class="mb-1">@UserProfile.Bio</p>
         <a class="mb-1" href="mailto:@UserProfile.Email"><strong>Email: </strong>@UserProfile.Email</a>
         <p class="mb-1"><strong>Location: </strong>@UserProfile.Location</p>
@@ -20,12 +24,13 @@
         <p class="mb-1"><strong>Last Update:</strong> @UserProfile.UpdatedAt</p>
         <p class="mb-1"><strong>Member Since:</strong> @UserProfile.CreatedAt</p>
     </div>
-    <div class="card-footer d-flex gap-2 flex-wrap">
-        <button class="btn btn-primary" @onclick="FetchAndShowFollowersModal">Followers: @UserProfile?.Followers</button>
-        <button class="btn btn-primary" @onclick="FetchAndShowFollowingModal">Followings: @UserProfile?.Following</button>
-    </div>
+    <footer>
+        <button class="button is-primary" @onclick="FetchAndShowFollowersModal">Followers: @UserProfile?.Followers</button>
+        <button class="button is-primary" @onclick="FetchAndShowFollowingModal">Followings: @UserProfile?.Following</button>
+    </footer>
 </div>
 
+
 @if (showFollowersModal is true)
 {
     <ContactListModal ShowModal="showFollowersModal" Users="followers" ModalTitle="ContactListModal.ModalTitleEnum.Followers" />

GPVBlazor/GPVBlazor/Components/Displays/UserStatisticsDisplay.razor

@@ -3,72 +3,71 @@
 
 @if (UserStats is not null)
 {
-    <div class="card mt-4 mb-3">
-        <div class="card-header">
-            <h3>Statistics</h3>
-        </div>
-        <div class="card-body">
-            <div class="row">
+    <div class="box mt-4 mb-3">
+        <h3 class="title is-3">Statistics</h3>
+        <div>
+            <div class="columns is-multiline">
                 @if (user != null && user?.CreatedAt != null)
                 {
                     var profileAge = DateTimeOffset.UtcNow.Year - user.CreatedAt.Year;
-                    <div class="col-md-4">
+                    <div class="column is-4">
                         <p><strong>Profile Age:</strong> @profileAge years</p>
                     </div>
                 }
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Number of Public Repositories:</strong> @UserStats.TotalRepositories</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Number of Public Gists:</strong> @user?.PublicGists</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Total Archived Repositories:</strong> @UserStats.TotalArchivedRepositories</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Total Languages:</strong> @UserStats.TotalLanguages</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Total Stars:</strong> @UserStats.TotalStars</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Total Topics:</strong> @UserStats.TotalTopics</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Total Forks:</strong> @UserStats.TotalForks</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Number of Readme Added Repositories:</strong> @UserStats.TotalReadmes</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Total Open Issues:</strong> @UserStats.TotalOpenIssues</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Average Stars per Repository:</strong> @UserStats.AverageStarsPerRepository</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Average Forks per Repository:</strong> @UserStats.AverageForksPerRepository</p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Most Starred Repository:</strong><RepositoryDisplay repository="@UserStats.MostStarred" /></p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Latest Updated Repository:</strong> <RepositoryDisplay repository="@UserStats.LatestUpdatedRepository" /></p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Last Created Repository:</strong> <RepositoryDisplay repository="@UserStats.LastCreatedRepository" /></p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Oldest Repository:</strong> <RepositoryDisplay repository="@UserStats.OldestRepository" /></p>
                 </div>
-                <div class="col-md-4">
+                <div class="column is-4">
                     <p><strong>Longest Update Period Repository:</strong> <RepositoryDisplay repository="@UserStats.LongestUpdatePeriod" /></p>
                 </div>
             </div>
         </div>
     </div>
 }
 
+
 @code {
     [Parameter] public RepositoryStats? UserStats { get; set; }
     [Parameter] public List<Repository>? Repositories { get; set; }