[add] initial bootstrap 5

SimplifyNet · Dec 16, 2024 · 12da7f1 · 12da7f1
1 parent caf6aee
commit 12da7f1
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 37 deletions.
diff --git a/src/SampleApps/SampleApp.Classic/Styles/Main.min.css b/src/SampleApps/SampleApp.Classic/Styles/Main.min.css
diff --git a/src/SampleApps/SampleApp.Classic/Styles/Main.scss b/src/SampleApps/SampleApp.Classic/Styles/Main.scss
@@ -4,10 +4,19 @@
 @import "Panels";
 @import "MessageBox";
 
+html {
+	font-size: 10px;
+}
+
 body {
 	background: $back-color !important;
 	color: $primary-text-color !important;
-	font: 1.6em "Segoe UI", tahoma, arial, helvetica, sans-serif !important;
+	font:
+		1.6em "Segoe UI",
+		tahoma,
+		arial,
+		helvetica,
+		sans-serif !important;
 	margin: 1em !important;
 	padding: 0 !important;
 }
@@ -30,4 +39,4 @@ a {
 
 a:hover {
 	color: $primary-color-active;
-}
+}
diff --git a/src/SampleApps/SampleApp.Classic/Styles/MessageBox.scss b/src/SampleApps/SampleApp.Classic/Styles/MessageBox.scss
@@ -11,6 +11,6 @@ div.inline-message-box {
 }
 
 div.inline-error-message-box {
-	@extend div.inline-message-box;
-	color: #FF4753;
-}
+	@extend .inline-message-box;
+	color: #ff4753;
+}
diff --git a/src/SampleApps/SampleApp.Classic/Styles/Navbar.scss b/src/SampleApps/SampleApp.Classic/Styles/Navbar.scss
@@ -1,17 +1,26 @@
-@import 'Variables';
+@import "Variables";
 
 .navbar {
 	background: $primary-color;
 	color: $primary-color-opposite;
 	border: 0;
 	border-radius: 0;
 	box-shadow: $no-box-shadow;
+	padding: 0;
 
-	a, .navbar-text {
+	a,
+	.navbar-text,
+	.navbar-brand {
+		display: block;
 		color: $primary-color-opposite !important;
+		padding: 15px 15px;
+		text-decoration: none;
+		margin: 0;
 	}
 
-	a:hover, .navbar-toggle:hover, .navbar:focus {
+	a:hover,
+	.navbar-toggle:hover,
+	.navbar:focus {
 		background-color: $primary-color-active !important;
 	}
 
@@ -22,4 +31,4 @@
 	.icon-bar {
 		background-color: $primary-color-opposite !important;
 	}
-}
+}
diff --git a/src/SampleApps/SampleApp.Classic/Templates/Master.tpl b/src/SampleApps/SampleApp.Classic/Templates/Master.tpl
@@ -13,7 +13,6 @@
 </head>
 
 <body>
-	<script type="text/javascript" src="{~}/node_modules/jquery/dist/jquery.min.js"></script>
 	<script type="text/javascript" src="{~}/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 
 	<div class="Title">

diff --git a/src/SampleApps/SampleApp.Classic/Templates/Navbar.tpl b/src/SampleApps/SampleApp.Classic/Templates/Navbar.tpl
@@ -1,16 +1,13 @@
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-expand-lg">
 	<div class="container-fluid">
-		<div class="navbar-header">
-			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-			</button>
-			<a class="navbar-brand" href="{~}/">Home</a>
-		</div>
-
-		<div class="collapse navbar-collapse" id="navbar-collapse">
-			<ul class="nav navbar-nav">
+		<!-- <a class="navbar-brand" href="{~}/">Home</a> -->
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+			aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
+				<li><a href="{~}/">Home</a></li>
 				<li><a href="{~}/about">About</a></li>
 				<li><a href="{~}/messagePageExample">404 Message page example</a></li>
 				<li><a href="{~}/exception">Exception</a></li>

diff --git a/src/SampleApps/SampleApp.Classic/package-lock.json b/src/SampleApps/SampleApp.Classic/package-lock.json
diff --git a/src/SampleApps/SampleApp.Classic/package.json b/src/SampleApps/SampleApp.Classic/package.json
@@ -3,8 +3,8 @@
 	"version": "1.0.0",
 	"description": "",
 	"devDependencies": {
-		"bootstrap": "^3.4.1",
-		"jquery": "^3.6.0"
+		"bootstrap": "^5.3.3",
+		"jquery": "^3.7.1"
 	},
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1"
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,6 @@ @@
     </head>
     <body>
-    	<script type="text/javascript" src="{~}/node_modules/jquery/dist/jquery.min.js"></script>
     	<script type="text/javascript" src="{~}/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     	<div class="Title">
@@ Expand Down @@