Skip to content

Upgrade to Bootstrap 6.0.0-alpha.1 #552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
linkdotnet wants to merge 1 commit into
base: master
Choose a base branch
from
+826 −1,392
Open

Upgrade to Bootstrap 6.0.0-alpha.1 #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions src/LinkDotNet.Blog.Web/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<HeadOutlet @rendermode="RenderMode.InteractiveServer"/>
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
<link rel="preconnect" href="//cdnjs.cloudflare.com" />
<link rel="preconnect" href="//cdn.jsdelivr.net" />
<link rel="preload" href="css/fonts/icons.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="css/fonts/icons.woff" as="font" type="font/woff" crossorigin />
<link href="css/basic.css" rel="stylesheet" />
Expand All @@ -27,7 +28,7 @@
<link rel="preload" href="LinkDotNet.Blog.Web.styles.css" as="style">
<link href="LinkDotNet.Blog.Web.styles.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark-dimmed.min.css" integrity="sha512-zcatBMvxa7rT7dDklfjauWsfiSFParF+hRfCdf4Zr40/MmA1gkFcBRbop0zMpvYF3FmznYFgcL8wlcuO/GwHoA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/css/bootstrap.min.css" integrity="sha512-fw7f+TcMjTb7bpbLJZlP8g2Y4XcCyFZW8uy8HsRZsH/SwbMw0plKHFHr99DN3l04VsYNwvzicUX/6qurvIxbxw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
Expand All @@ -48,7 +49,17 @@
<script src="js/code-highlighting.js"></script>
<script src="_framework/blazor.web.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js" onload="highlightCodeBlocks()" integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.bundle.min.js" integrity="sha512-Tc0i+vRogmX4NN7tuLbQfBxa8JkfUSAxSFVzmU31nVdHyiHElPPy2cWfFacmCJKw0VqovrzKhdd2TSTMdAxp2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="module">
import { Drawer } from 'https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js';
// Blazor navigates without a page load, so the mobile navigation drawer would stay open
document.addEventListener('click', e => {
const drawer = e.target.closest('.drawer');
if (drawer && e.target.closest('a[href]:not([href="#"])')) {
Drawer.getInstance(drawer)?.hide();
}
});
</script>
<script defer src="components/slideshow.js" ></script>
</body>
</html>
Expand Down
6 changes: 3 additions & 3 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
AbsolutePreviewImageUrl="@ImageUrl" />

<div class="container">
<div class="row gy-4">
<div class="col-lg-3 col-md-4">
<div class="row gy-7">
<div class="lg:col-3 md:col-4">
<Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value" />
</div>
<div class="col-lg-9 col-md-8">
<div class="lg:col-9 md:col-8">
<TabbedNavigation IsAuthenticated="isAuthenticated" />
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,32 @@
<EditForm Model="@model" OnValidSubmit="CreateSkillItem">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="mb-3">
<div class="mb-5">
<label for="title" class="form-label">Skill name</label>
<InputText class="form-control" id="title" spellcheck="true" @bind-Value="model.Skill" />
</div>
<div class="mb-3">
<div class="mb-5">
<label for="image" class="form-label">Image Url</label>
<InputText class="form-control" id="image" @bind-Value="model.ImageUrl" />
<small class="form-text text-secondary">
<small class="form-text fg-secondary">
If set, it's used before the skill (optional). 24x24 pixel optimal size.
</small>
</div>
<div class="mb-3">
<div class="mb-5">
<label for="capability" class="form-label">Capability</label>
<InputText class="form-control" id="capability" spellcheck="true" @bind-Value="model.Capability" />
</div>
<div class="mb-3">
<div class="mb-5">
<label for="proficiency" class="form-label">Proficiency</label>
<select class="form-select" id="proficiency" @bind="model.Proficiency">
<select class="form-control" id="proficiency" @bind="model.Proficiency">
@foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
{
<option value="@level">@level</option>
}
</select>
</div>

<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-solid theme-primary" type="submit">Submit</button>
</EditForm>
</ModalDialog>

Expand Down
4 changes: 2 additions & 2 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
<div>
@if (ShowAdminActions)
{
<button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()">
<button type="button" class="btn btn-solid theme-primary" @onclick="() => AddSkillDialog.Open()">
<i class="plus"></i> Add skill</button>
<AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
}
</div>
<div class="table-container">
<div class="table-responsive">
<table class="skill-table" id="skill-table">
<tbody>
<tr>
Expand Down
14 changes: 7 additions & 7 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
@using LinkDotNet.Blog.Web.Features.AboutMe.Components.Skill
@using LinkDotNet.Blog.Web.Features.AboutMe.Components.Talk

<div class="col-lg-9 col-md-8">
<ul class="nav nav-pills nav-underline border-bottom justify-content-around" id="aboutMe" role="tablist">
<div class="lg:col-9 md:col-8">
<ul class="nav nav-underline d-flex border-bottom justify-content-around" id="aboutMe" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-skills-tab"
data-bs-toggle="pill" data-bs-target="#pills-home"
data-bs-toggle="tab" data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">
Skills
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-talks-tab"
data-bs-toggle="pill" data-bs-target="#pills-profile"
data-bs-toggle="tab" data-bs-target="#pills-profile"
type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
Talks
</button>
</li>
</ul>

<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade show active" id="pills-home"
<div class="tab-content pt-5" id="myTabContent">
<div class="tab-pane active" id="pills-home"
role="tabpanel" aria-labelledby="pills-skills-tab" tabindex="0">
<SkillTable ShowAdminActions="@IsAuthenticated"></SkillTable>
</div>
<div class="tab-pane fade" id="pills-profile"
<div class="tab-pane" id="pills-profile"
role="tabpanel" aria-labelledby="pills-talks-tab" tabindex="0">
<Talks ShowAdminActions="@IsAuthenticated"></Talks>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@
<DataAnnotationsValidator />
<ValidationSummary />

<div class="mb-3">
<div class="mb-5">
<label for="talk-title" class="form-label">Presentation title</label>
<InputText class="form-control" id="talk-title" @bind-Value="model.PresentationTitle" />
</div>
<div class="mb-3">
<div class="mb-5">
<label for="talk-place" class="form-label">Presentation place</label>
<InputText class="form-control" id="talk-place" @bind-Value="model.Place" />
<small class="form-text text-secondary">
<small class="form-text fg-secondary">
The place / event where you held the presentation / talk.
</small>
</div>
<div class="mb-3">
<div class="mb-5">
<label for="talk-date" class="form-label">Date</label>
<InputDate class="form-control" id="talk-date" @bind-Value="model.PublishedDate" />
</div>
<div class="mb-3">
<div class="mb-5">
<label for="talk-content" class="form-label">Description</label>
<MarkdownTextArea id="talk-content" class="form-control" rows="10"
@bind-Value="@model.Description"></MarkdownTextArea>
</div>

<button id="talk-submit" class="btn btn-primary" type="submit">Submit</button>
<button id="talk-submit" class="btn btn-solid theme-primary" type="submit">Submit</button>
</EditForm>
</ModalDialog>

Expand Down
8 changes: 4 additions & 4 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<li class="pb-1">
<div class="row">
<div class="col-10" id="talk-display-content">
<p class="text-body-secondary mb-0 small">@Talk.PublishedDate.ToShortDateString()</p>
<strong class="fs-5">@Talk.PresentationTitle</strong>
<p id="talk-place" class="text-body-secondary">@Talk.Place</p>
<p class="fg-3 mb-0 small">@Talk.PublishedDate.ToShortDateString()</p>
<strong class="fs-lg">@Talk.PresentationTitle</strong>
<p id="talk-place" class="fg-3">@Talk.Place</p>
<div id="talk-description">
@MarkdownConverter.ToMarkupString(Talk.Description)
</div>
</div>
<div class="col-2">
@if (ShowAdminActions)
{
<button id="talk-delete" type="button" class="btn btn-outline-secondary" aria-label="Delete Talk" @onclick="() => TalkDeleted.InvokeAsync()">
<button id="talk-delete" type="button" class="btn btn-outline theme-secondary" aria-label="Delete Talk" @onclick="() => TalkDeleted.InvokeAsync()">
<i class="bin2" aria-hidden="true"></i>
</button>
}
Expand Down
2 changes: 1 addition & 1 deletion src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{
@if (ShowAdminActions)
{
<button id="add-talk" type="button" class="btn btn-primary" @onclick="() => AddTalkEntryDialog.Open()">
<button id="add-talk" type="button" class="btn btn-solid theme-primary" @onclick="() => AddTalkEntryDialog.Open()">
<i class="plus"></i> Add talk</button>
<AddTalkEntryDialog @ref="AddTalkEntryDialog" TalkCreated="StoreTalk"></AddTalkEntryDialog>
}
Expand Down
14 changes: 7 additions & 7 deletions src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/AddTemplateDialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
@inject IJSRuntime JSRuntime

<ModalDialog @ref="ModalDialog" Title="Save as Template">
<div class="modal-body">
<div class="mb-3 position-relative">
<div class="dialog-body">
<div class="mb-5 position-relative">
<label for="templateName" class="form-label">Template Name</label>
<div class="input-group">
<input type="text"
Expand All @@ -32,7 +32,7 @@
@onmouseenter="() => selectedIndex = index"
style="cursor: pointer;">
<span>@template.Name</span>
<button type="button" class="btn btn-link text-danger p-0 border-0" @onmousedown="() => DeleteTemplate(template)" @onmousedown:stopPropagation="true">
<button type="button" class="btn btn-link fg-danger p-0 border-0" @onmousedown="() => DeleteTemplate(template)" @onmousedown:stopPropagation="true">
<i class="bin2" aria-hidden="true"></i>
</button>
</div>
Expand All @@ -42,15 +42,15 @@

@if (IsOverwriting)
{
<div class="alert alert-warning mt-2 mb-0">
<div class="alert theme-warning mt-3 mb-0">
<small>Warning: A template with this name already exists. Saving will overwrite it.</small>
</div>
}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @onclick="Close">Cancel</button>
<button type="button" class="btn btn-primary" @onclick="Save">Save</button>
<div class="dialog-footer">
<button type="button" class="btn btn-solid theme-secondary" @onclick="Close">Cancel</button>
<button type="button" class="btn btn-solid theme-primary" @onclick="Save">Save</button>
</div>
</ModalDialog>

Expand Down
Loading
Loading