Skip to content

Commit cba0106

Browse files
martincostellomartincostello
committed
Update to Bootstrap 5
Upgrade to Bootstrap 5.
1 parent d739d7a commit cba0106

File tree

4 files changed

+63
-80
lines changed

4 files changed

+63
-80
lines changed

‎src/TodoApp/Pages/Home/Index.cshtml

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ else
2121
<h2>
2222
My List
2323
<div class="h6 spinner-border" id="loader" role="status">
24-
<span class="sr-only">Loading...</span>
24+
<span class="visually-hidden">Loading...</span>
2525
</div>
2626
</h2>
2727

@@ -31,7 +31,7 @@ else
3131

3232
<div>
3333
<table class="table d-none" id="item-table">
34-
<thead class="thead-light">
34+
<thead>
3535
<tr>
3636
<th class="w-50" scope="col">Item</th>
3737
<th class="w-25" scope="col">Last Updated</th>
@@ -59,19 +59,19 @@ else
5959

6060
<h2>Add New Item</h2>
6161

62-
<form id="add-form" class="form-inline" role="form">
63-
64-
<label class="sr-only" for="new-item-text">Thing to do</label>
65-
66-
<input autocomplete="off"
67-
autofocus
68-
class="form-control form-control-lg mr-sm-2 w-75"
69-
id="new-item-text"
70-
name="text"
71-
placeholder="Buy eggs 🥚"
72-
type="text">
73-
74-
<button class="btn btn-lg btn-primary" disabled id="add-new-item" type="submit">Add</button>
75-
62+
<form id="add-form" class="row gx-3 gy-2 align-items-center" role="form">
63+
<div class="col-auto col-md-11">
64+
<label class="visually-hidden" for="new-item-text">Thing to do</label>
65+
<input autocomplete="off"
66+
autofocus
67+
class="form-control form-control-lg"
68+
id="new-item-text"
69+
name="text"
70+
placeholder="Buy eggs 🥚"
71+
type="text">
72+
</div>
73+
<div class="col-auto">
74+
<button class="btn btn-lg btn-primary" disabled id="add-new-item" type="submit">Add</button>
75+
</div>
7676
</form>
7777
}

‎src/TodoApp/Pages/Shared/_Layout.cshtml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,20 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>@ViewData["Title"] - TodoApp</title>
7-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
89
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
910
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" asp-append-version="true" />
1011
</head>
1112
<body>
1213
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
1314
<div class="container">
1415
<a class="navbar-brand" href="/">TodoApp</a>
15-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-navbar" aria-controls="site-navbar" aria-expanded="false" aria-label="Toggle navigation">
16+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#site-navbar" aria-controls="site-navbar" aria-expanded="false" aria-label="Toggle navigation">
1617
<span class="navbar-toggler-icon"></span>
1718
</button>
1819
<div class="collapse navbar-collapse" id="site-navbar">
19-
<ul class="navbar-nav mr-auto">
20+
<ul class="navbar-nav me-auto">
2021
<li class="nav-item">
2122
<a class="nav-link" href="~/" title="My Todo List">My List</a>
2223
</li>
@@ -42,7 +43,7 @@
4243
<li>
4344
<button type="submit" class="btn btn-link navbar-btn nav-link" title="Sign out" id="sign-out">
4445
Sign out
45-
<i class="fa fa-sign-out" aria-hidden="true"></i>
46+
<span class="fa-solid fa-right-from-bracket" aria-hidden="true"></span>
4647
</button>
4748
</li>
4849
</ul>
@@ -58,8 +59,7 @@
5859
<p>&copy; @(DateTimeOffset.UtcNow.Year) - Martin Costello</p>
5960
</footer>
6061
</main>
61-
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
62-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
62+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
6363
<script src="~/static/js/main.js"></script>
6464
</body>
6565
</html>

‎src/TodoApp/package-lock.json

Lines changed: 41 additions & 57 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/TodoApp/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"@babel/core": "^7.26.10",
2222
"@babel/preset-env": "^7.26.9",
2323
"@stylistic/eslint-plugin": "^4.2.0",
24-
"@types/jquery": "^3.5.32",
2524
"@typescript-eslint/eslint-plugin": "^8.31.0",
2625
"@typescript-eslint/parser": "^8.31.0",
2726
"eslint": "^9.25.1",

0 commit comments

Comments
 (0)