css optimizations and playing around with native css nesting

ChaosEngine · Sep 23, 2023 · b6810ea · b6810ea
1 parent 589e934
commit b6810ea
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 95 deletions.
diff --git a/DotnetPlayground.Web/Views/Hashes/VirtualScroll.cshtml b/DotnetPlayground.Web/Views/Hashes/VirtualScroll.cshtml
@@ -30,7 +30,9 @@
 				<th data-field="key" data-sortable="true" data-halign="center" data-align="center">Key</th>
 				<th data-field="hashMD5" data-sortable="true">HashMD5</th>
 				<th data-field="hashSHA256" data-sortable="true">HashSHA256</th>
-				<th data-field="Validate" data-sortable="false" data-halign="center" data-align="center">Validate</th>
+				<th data-field="Validate" data-sortable="false" data-halign="center" data-align="center">
+					<button class="btn btn-success fw-bold text-nowrap pe-3" title="ValidateAll" value="ValidateAll" onclick="clientValidateAll()">ALL ⇩</button>
+				</th>
 			</tr>
 		</thead>
 	</table>

diff --git a/DotnetPlayground.Web/gulpfile.mjs b/DotnetPlayground.Web/gulpfile.mjs
@@ -223,26 +223,29 @@ const fileMinifySCSSFunction = function (src, dest) {
 		.pipe(gulp.dest("."));
 };
 
-const minInkball = gulp.parallel(
-	function inkballJsAndCSS() {
+const minInkballJs = gulp.parallel(
+	function inkballJs() {
 		return fileMinifyJSFunction(paths.inkBallJsRelative + "inkball.js",
 			paths.inkBallJsRelative + "inkball.min.js", true);
 	},
 	function inkballSharedJs() {
 		return fileMinifyJSFunction(paths.inkBallJsRelative + "shared.js",
 			paths.inkBallJsRelative + "shared.min.js", true);
+	}
+);
+
+const minInkballCss = gulp.series(
+	function inkBallScssToCSS() {
+		return fileMinifySCSSFunction(paths.inkBallCssRelative + "inkball.scss", paths.inkBallCssRelative + "inkball.css");
 	},
-	gulp.series(
-		function scssToCSS() {
-			return fileMinifySCSSFunction(paths.inkBallCssRelative + "inkball.scss", paths.inkBallCssRelative + "inkball.css");
-		},
-		function cssToMinCSS() {
-			return minCSS(paths.inkBallCssRelative + "inkball.css", paths.inkBallCssRelative + "inkball.min.css",
-				paths.inkBallCssRelative + "inkball.min.css");
-		}
-	)
+	function inkBallCssToMinCSS() {
+		return minCSS(paths.inkBallCssRelative + "inkball.css", paths.inkBallCssRelative + "inkball.min.css",
+			paths.inkBallCssRelative + "inkball.min.css");
+	}
 );
 
+const minInkball = gulp.parallel(minInkballJs, minInkballCss);
+
 const cleanInkball = async function (cb) {
 	await Promise.all([
 		rimraf(paths.inkBallJsRelative + "*.min.js"),
@@ -369,6 +372,8 @@ const minScss = gulp.series(
 
 const min = gulp.parallel(minJs, minInkball, minScss);
 
+const cssRun = gulp.parallel(minInkballCss, minScss);
+
 ///
 /// postinstall entry point (npm i)
 ///
@@ -477,5 +482,6 @@ export {
 	clean,
 	webpackRun as webpack,
 	min,
+	cssRun as css,
 	postinstall
 };
diff --git a/DotnetPlayground.Web/wwwroot/css/site.css b/DotnetPlayground.Web/wwwroot/css/site.css
@@ -31,7 +31,6 @@ body {
 a {
   text-decoration: none;
 }
-
 a[href]:hover:not([role=button]):not([role=tab]):not(.btn):not(.dropdown-item):not(.page-link) {
   text-decoration: underline;
 }
@@ -159,18 +158,13 @@ footer.container > noscript {
 .puzzles input[type=radio]:checked + label > img {
   border: 1px solid #fff;
   box-shadow: 0 0 3px 3px #090;
+  transform: rotateZ(-10deg);
 }
-
-/* Stuff after this is only to make things more pretty */
 .puzzles input[type=radio] + label > img {
+  /* Stuff after this is only to make things more pretty */
   border: 1px dashed #444;
   transition: 500ms all;
 }
-
-.puzzles input[type=radio]:checked + label > img {
-  transform: rotateZ(-10deg);
-}
-
 .puzzles .target {
   --bimg: url("../images/puzzles/fond-puzzle.svg");
   --trans: scale(2) rotateZ(180deg);
@@ -181,7 +175,6 @@ footer.container > noscript {
   border-radius: 7px;
   min-height: 32rem;
 }
-
 .puzzles .target::before {
   content: "";
   position: absolute;
@@ -193,7 +186,6 @@ footer.container > noscript {
   background: var(--bimg) repeat;
   transform: var(--trans);
 }
-
 .puzzles .target::after {
   content: "";
   position: absolute;

diff --git a/DotnetPlayground.Web/wwwroot/css/site.min.css.map b/DotnetPlayground.Web/wwwroot/css/site.min.css.map
diff --git a/DotnetPlayground.Web/wwwroot/css/site.scss b/DotnetPlayground.Web/wwwroot/css/site.scss
@@ -34,15 +34,16 @@ body {
 /* overriding Bootstrap-5 underlined links and others */
 a {
 	text-decoration: none;
-}
-a[href] {
-	&:hover {
-		&:not([role="button"]) {
-			&:not([role="tab"]) {
-				&:not(.btn) {
-					&:not(.dropdown-item) {
-						&:not(.page-link) {
-							text-decoration: underline;
+
+	&[href] {
+		&:hover {
+			&:not([role="button"]) {
+				&:not([role="tab"]) {
+					&:not(.btn) {
+						&:not(.dropdown-item) {
+							&:not(.page-link) {
+								text-decoration: underline;
+							}
 						}
 					}
 				}
@@ -145,11 +146,11 @@ footer.container > noscript {
 	img {
 		width: 133px;
 		height: 100px;
-	}
 
-	img:hover {
-		transform: scale(1.2, 1.2);
-		box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
+		&:hover {
+			transform: scale(1.2, 1.2);
+			box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
+		}
 	}
 }
 
@@ -207,60 +208,61 @@ footer.container > noscript {
 // 	position: absolute;
 // 	left: -9999px;
 // }
-
-.puzzles input[type=radio]:checked + label > img {
-	border: 1px solid #fff;
-	box-shadow: 0 0 3px 3px #090;
-}
-
-/* Stuff after this is only to make things more pretty */
-.puzzles input[type=radio] + label > img {
-	border: 1px dashed #444;
-	transition: 500ms all;
-}
-
-.puzzles input[type=radio]:checked + label > img {
-	transform: rotateZ(-10deg);
-}
-
+.puzzles {
 
+	input[type=radio] {
+		&:checked + label > img {
+			border: 1px solid #fff;
+			box-shadow: 0 0 3px 3px #090;
+			transform: rotateZ(-10deg);
+		}
 
-//https://www.sitepoint.com/css3-transform-background-image/
-//https://christianheilmann.com/2021/02/08/sharing-data-between-css-and-javascript-using-custom-properties/
-.puzzles .target
-{
-	--bimg: url('../images/puzzles/fond-puzzle.svg');
-	--trans: scale(2) rotateZ(180deg);
+		& + label > img {
+			/* Stuff after this is only to make things more pretty */
+			border: 1px dashed #444;
+			transition: 500ms all;
+		}
+	}
 
-	position: relative;
-	overflow: hidden;
-	font-size: 2em;
-	border: 4px solid rgb(55, 230, 192);
-	border-radius: 7px;
-	min-height: 32rem;
-}
-.puzzles .target::before
-{
-	content: "";
-	position: absolute;
-	width: 200%;
-	height: 200%;
-	top: -50%;
-	left: -50%;
-	z-index: -1;
+	//https://www.sitepoint.com/css3-transform-background-image/
+	//https://christianheilmann.com/2021/02/08/sharing-data-between-css-and-javascript-using-custom-properties/
+	.target
+	{
+		--bimg: url('../images/puzzles/fond-puzzle.svg');
+		--trans: scale(2) rotateZ(180deg);
+
+		position: relative;
+		overflow: hidden;
+		font-size: 2em;
+		border: 4px solid rgb(55, 230, 192);
+		border-radius: 7px;
+		min-height: 32rem;
+
+		&::before
+		{
+			content: "";
+			position: absolute;
+			width: 200%;
+			height: 200%;
+			top: -50%;
+			left: -50%;
+			z-index: -1;
+
+			background: var(--bimg) repeat;
+			transform: var(--trans);
+		}
 
-	background: var(--bimg) repeat;
-	transform: var(--trans);
-}
-.puzzles .target::after {
-	content: "";
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	z-index: -2;
-	background-image: var(--uploadedImg);
+		&::after {
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			z-index: -2;
+			background-image: var(--uploadedImg);
+		}
+	}
 }
 /***************Preferences/Profile start*************/
 //rainbow-like border

diff --git a/DotnetPlayground.Web/wwwroot/js/Hashes.js b/DotnetPlayground.Web/wwwroot/js/Hashes.js
@@ -1,13 +1,6 @@
-/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "HashesOnLoad|clientValidateAll" }]*/
-/*global clientValidate*/
+/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "HashesOnLoad" }]*/
 "use strict";
 
-function clientValidateAll() {
-	$("button[value='Validate']").each(function (index, item) {
-		clientValidate(item);
-	});
-}
-
 function HashesOnLoad() {
 
 	let g_LastTimeOfRun = new Date().getTime();

diff --git a/DotnetPlayground.Web/wwwroot/js/site.js b/DotnetPlayground.Web/wwwroot/js/site.js
@@ -29,6 +29,12 @@ function clientValidate(button) {
 	td.eq(2).css("color", (sha === orig_sha ? "green" : "red")).css('font-weight', 'bold');
 }
 
+function clientValidateAll() {
+	$("button[value='Validate']").each( (_index, item) => {
+		clientValidate(item);
+	});
+}
+
 function handleAboutPageBranchHash() {
 	let anchor = document.querySelector('#branchHash > a:first-child');
 	if (anchor) {

diff --git a/InkBall b/InkBall