Don't use global function names in the sass

Update dependencies and replace the aspect-ratio mixin with the aspect-ratio css tag
Fix the traditional-bootstrap gulpfile
2024-11-24 00:44:09 -05:00 · 2024-07-25 12:40:56 -04:00 · 2024-07-25 12:37:37 -04:00 · 2024-07-25 12:18:03 -04:00
13 changed files with 1234 additions and 733 deletions
--- a/app/Models/Blog.php
+++ b/app/Models/Blog.php
@ -14,7 +14,7 @@ class Blog extends DashboardModel

    public static $dashboard_type = 'edit';

-    public static $dashboard_display = [ 'title', 'created_at' ];
+    public static $dashboard_display = [ 'header-image', 'title', 'created_at' ];

    public static $dashboard_columns = [
        [ 'name' => 'user_id', 'type' => 'user' ],
--- a/composer.lock
+++ b/composer.lock
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,9 +8,9 @@
    "browser-sync": "3.0.2"
  },
  "dependencies": {
-    "@babel/core": "7.24.7",
-    "@babel/preset-env": "7.24.7",
-    "@fortawesome/fontawesome-free": "6.5.2",
+    "@babel/core": "7.24.9",
+    "@babel/preset-env": "7.24.8",
+    "@fortawesome/fontawesome-free": "6.6.0",
    "autonumeric": "4.10.5",
    "autoprefixer": "10.4.19",
    "axios": "1.7.2",
@ -29,20 +29,21 @@
    "gulp-sass-glob": "1.1.0",
    "gulp-strip-debug": "4.0.0",
    "gulp-uglify-es": "3.0.0",
-    "gulp5-sass-plugin": "^1.0.0",
+    "gulp5-sass-plugin": "^2.0.0",
    "jquery": "3.7.1",
    "list.js": "2.3.1",
    "minimist": "1.2.8",
    "ordered-read-streams": "^2.0.0",
-    "postcss": "8.4.38",
+    "postcss": "8.4.40",
+    "sass": "^1.77.8",
    "sortablejs": "1.15.2",
    "spinkit": "2.0.1",
    "terser-webpack-plugin": "5.3.10",
-    "vue": "3.4.27",
+    "vue": "3.4.34",
    "vue-loader": "17.4.2",
-    "vue-router": "4.3.3",
+    "vue-router": "4.4.0",
    "vuex": "4.1.0",
-    "webpack": "5.91.0",
+    "webpack": "5.93.0",
    "what-input": "5.2.12"
  }
 }
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@ -1,4 +1,5 @@
 // Sass modules
+@use "sass:color";
@use "sass:math";

 // Base font size
--- a/resources/sass/dashboard.scss
+++ b/resources/sass/dashboard.scss
@ -1,4 +1,5 @@
 // Sass modules
+@use "sass:color";
@use "sass:math";

 // Base font size
@ -24,9 +25,9 @@ $enable-smooth-scroll: false;

 // Colours
 $c-text: #111; // text
-$c-text-inactive: fade-out($c-text, 0.25); // inactive text
+$c-text-inactive: color.adjust($c-text, $alpha: -0.25); // inactive text
 $c-text-light: #fff; // light text
-$c-text-light-inactive: fade-out($c-text-light, 0.25); // inactive light text
+$c-text-light-inactive: color.adjust($c-text-light, $alpha: -0.25); // inactive light text
 $c-input-bg: #fff; // white
 $c-dashboard-error: #a80000;
 $c-dashboard-dark: #111;
@ -201,7 +202,7 @@ body {
            @include media-breakpoint-down(lg) {
                padding-right: pxrem(8);
                padding-left: pxrem(8);
-                background-color: darken($c-dashboard-dark, 2%);
+                background-color: color.adjust($c-dashboard-dark, $lightness: -2%);
                color: $c-text-light-inactive;
            }

@ -215,13 +216,13 @@ body {

            &:hover, &:focus {
                @include media-breakpoint-up(lg) {
-                    background-color: fade-out(#000, 0.97);
+                    background-color: color.adjust(#000, $alpha: -0.97);
                }
            }

            &.active {
                @include media-breakpoint-up(lg) {
-                    background-color: fade-out(#000, 0.93);
+                    background-color: color.adjust(#000, $alpha: -0.93);
                }
            }
        }
@ -258,9 +259,9 @@ body {
        @include font-sans-bold;
        position: relative;
        padding: pxrem(9) pxrem(15);
-        border-top: 1px solid darken($c-dashboard-dark, 5%);
-        border-right: 1px solid darken($c-dashboard-dark, 5%);
-        border-left: 1px solid darken($c-dashboard-dark, 5%);
+        border-top: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
+        border-right: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
+        border-left: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
        background-color: $c-dashboard-dark;
        color: $c-dashboard-light;
        font-size: pxrem(14);
@ -287,7 +288,7 @@ body {

    .card-body {
        padding: pxrem(15);
-        background-color: lighten($c-dashboard-light, 1%);
+        background-color: color.adjust($c-dashboard-light, $lightness: 1%);

        &.dashboard {
            @include media-breakpoint-down(md) {
@ -312,7 +313,7 @@ body {
                margin-top: pxrem(2);
                margin-left: pxrem(10);
                height: pxrem(32);
-                border: 1px solid fade-out($c-text, 0.75);
+                border: 1px solid color.adjust($c-text, $alpha: -0.75);
                border-radius: pxrem(4);
            }
        }
@ -321,7 +322,7 @@ body {
            margin-bottom: pxrem(10);
            width: 100%;
            padding: pxrem(3) pxrem(8);
-            border: 1px solid fade-out(#000, 0.875);
+            border: 1px solid color.adjust(#000, $alpha: -0.875);
            border-radius: 0.25rem;

            @include media-breakpoint-down(md) {
@ -334,7 +335,7 @@ body {
            margin-top: pxrem(10);
            margin-bottom: pxrem(10);
            padding: pxrem(5) pxrem(10);
-            border: 1px solid darken($c-dashboard-dark, 5%);
+            border: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
            border-radius: pxrem(5);
            background-color: $c-dashboard-dark;
            color: $c-text-light;
@ -362,7 +363,7 @@ body {

                &:focus {
                    border-color: $c-dashboard-dark;
-                    box-shadow: inset 0 pxrem(1) pxrem(1) fade-out(#000, 0.925), 0 0 pxrem(8) fade-out($c-dashboard-dark, 0.4);
+                    box-shadow: inset 0 pxrem(1) pxrem(1) color.adjust(#000, $alpha: -0.925), 0 0 pxrem(8) color.adjust($c-dashboard-dark, $alpha: -0.4);
                }
            }

@ -389,7 +390,7 @@ body {
                }

                span {
-                    border: 1px solid lighten($c-text, 50%);
+                    border: 1px solid color.adjust($c-text, $lightness: 50%);
                    border-radius: pxrem(4);
                    background-color: $c-input-bg;
                    pointer-events: none;
@ -458,18 +459,18 @@ body {
 }

 .btn {
-    border-color: darken($c-dashboard-dark, 5%);
+    border-color: color.adjust($c-dashboard-dark, $lightness: -5%);
    background-color: $c-dashboard-dark;
    color: $c-text-light;
    font-size: pxrem(14);
    transition: background-color 100ms;

    &:hover {
-        background-color: darken($c-dashboard-dark, 5%);
+        background-color: color.adjust($c-dashboard-dark, $lightness: -5%);
    }

    &:focus {
-        background-color: lighten($c-dashboard-dark, 5%);
+        background-color: color.adjust($c-dashboard-dark, $lightness: 5%);
    }

    &, &:hover, &:focus {
@ -488,42 +489,42 @@ body {
    }

    &.btn-warning {
-        border-color: darken($c-dashboard-edit, 10%);
+        border-color: color.adjust($c-dashboard-edit, $lightness: -10%);
        background-color: $c-dashboard-edit;

        &:hover {
-            background-color: darken($c-dashboard-edit, 5%);
+            background-color: color.adjust($c-dashboard-edit, $lightness: -5%);
        }

        &:focus {
-            background-color: lighten($c-dashboard-edit, 5%);
+            background-color: color.adjust($c-dashboard-edit, $lightness: 5%);
        }
    }

    &.btn-danger {
-        border-color: darken($c-dashboard-delete, 10%);
+        border-color: color.adjust($c-dashboard-delete, $lightness: -10%);
        background-color: $c-dashboard-delete;

        &:hover {
-            background-color: darken($c-dashboard-delete, 5%);
+            background-color: color.adjust($c-dashboard-delete, $lightness: -5%);
        }

        &:focus {
-            background-color: lighten($c-dashboard-delete, 5%);
+            background-color: color.adjust($c-dashboard-delete, $lightness: 5%);
        }
    }

    &.btn-secondary {
-        border-color: darken($c-dashboard-light, 10%);
+        border-color: color.adjust($c-dashboard-light, $lightness: -10%);
        background-color: $c-dashboard-light;
        color: $c-text;

        &:hover {
-            background-color: darken($c-dashboard-light, 5%);
+            background-color: color.adjust($c-dashboard-light, $lightness: -5%);
        }

        &:focus {
-            background-color: lighten($c-dashboard-light, 5%);
+            background-color: color.adjust($c-dashboard-light, $lightness: 5%);
        }
    }

@ -765,7 +766,7 @@ body {
            transition: background-color 150ms;

            &:hover {
-                background-color: fade-out(#000, 0.97);
+                background-color: color.adjust(#000, $alpha: -0.97);
                text-decoration: none;
            }
        }
@ -855,8 +856,8 @@ body {
                    display: inline-block;

                    .image-preview {
-                        @include aspect-ratio(16, 9);
                        display: block;
+                        aspect-ratio: 16/9;
                        background-position: center center;
                        background-size: cover;
                        background-repeat: no-repeat;
@ -953,7 +954,7 @@ form {
        .list {
            margin-bottom: pxrem(15);
            padding-bottom: pxrem(15);
-            border-bottom: 1px solid fade-out($c-text, 0.9);
+            border-bottom: 1px solid color.adjust($c-text, $alpha: -0.9);

            &-template, &-data {
                display: none;
@ -964,7 +965,7 @@ form {
                margin-bottom: pxrem(10);
                padding: pxrem(8) pxrem(8) pxrem(8) pxrem(33);
                border-radius: pxrem(6);
-                background-color: darken($c-input-bg, 2%);
+                background-color: color.adjust($c-input-bg, $lightness: -2%);

                @include media-breakpoint-up(lg) {
                    display: flex;
@ -1092,7 +1093,7 @@ form {
                    &-delete {
                        min-width: pxrem(70);
                        height: $label-height;
-                        border: 1px solid fade-out($c-text, 0.75);
+                        border: 1px solid color.adjust($c-text, $alpha: -0.75);
                        border-radius: pxrem(4);
                        background-color: $c-dashboard-delete;
                        color: $c-text-light;
@ -1102,7 +1103,7 @@ form {

            &-add-button {
                height: $label-height;
-                border: 1px solid fade-out($c-text, 0.75);
+                border: 1px solid color.adjust($c-text, $alpha: -0.75);
                border-radius: pxrem(4);

                @include media-breakpoint-down(lg) {
@ -1151,7 +1152,7 @@ form {

            &:not([type="file"]) {
                padding: pxrem(5) pxrem(8);
-                border: 1px solid darken($c-dashboard-light, 10%);
+                border: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
                border-radius: pxrem(2);
                transition: border-color 150ms;

@ -1237,22 +1238,22 @@ form {
            }

            &.view {
-                border: 1px solid darken($c-dashboard-dark, 5%);
+                border: 1px solid color.adjust($c-dashboard-dark, $lightness: -5%);
                background-color: $c-dashboard-dark;
                color: $c-text-light;

                &:hover {
-                    background-color: lighten($c-dashboard-dark, 5%);
+                    background-color: color.adjust($c-dashboard-dark, $lightness: 5%);
                }
            }

            &.delete {
-                border: 1px solid darken($c-dashboard-delete, 5%);
+                border: 1px solid color.adjust($c-dashboard-delete, $lightness: -5%);
                background-color: $c-dashboard-delete;
                color: $c-text-light;

                &:hover {
-                    background-color: lighten($c-dashboard-delete, 5%);
+                    background-color: color.adjust($c-dashboard-delete, $lightness: 5%);
                }
            }
        }
@ -1320,10 +1321,10 @@ form {
            }

            .image-display {
-                @include aspect-ratio(1, 1);
                position: relative;
                width: 100%;
-                border: 1px solid darken($c-dashboard-light, 10%);
+                aspect-ratio: 1/1;
+                border: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
                border-radius: pxrem(3);
                background-position: center center;
                background-size: cover;
@ -1344,14 +1345,14 @@ form {
                    width: pxrem(40);
                    height: pxrem(40);
                    min-height: 0;
-                    border: 1px solid darken($c-dashboard-light, 14%);
+                    border: 1px solid color.adjust($c-dashboard-light, $lightness: -14%);
                    border-radius: pxrem(3);
-                    background-color: darken($c-dashboard-light, 10%);
+                    background-color: color.adjust($c-dashboard-light, $lightness: -10%);
                    line-height: 1;
                    cursor: pointer;

                    &:hover {
-                        background-color: darken($c-dashboard-light, 7%);
+                        background-color: color.adjust($c-dashboard-light, $lightness: -7%);
                    }
                }

@ -1376,8 +1377,8 @@ form {

        &.user-profile-update {
            @include media-breakpoint-down(lg) {
-                border-top: 1px solid darken($c-dashboard-light, 10%);
-                border-bottom: 1px solid darken($c-dashboard-light, 10%);
+                border-top: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
+                border-bottom: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
            }

            @include media-breakpoint-up(lg) {
@ -1386,8 +1387,8 @@ form {
                width: 100%;
                padding: 0px $grid-gutter-width;
                flex-grow: 1;
-                border-right: 1px solid darken($c-dashboard-light, 10%);
-                border-left: 1px solid darken($c-dashboard-light, 10%);
+                border-right: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
+                border-left: 1px solid color.adjust($c-dashboard-light, $lightness: -10%);
            }
        }

@ -1429,7 +1430,7 @@ form {
    visibility: hidden;
    width: 100%;
    height: 100%;
-    background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
+    background-color: color.adjust(color.adjust($c-dashboard-light, $lightness: 1%), $alpha: -0.6);
    opacity: 0;
    transition: opacity 250ms;

@ -1453,7 +1454,7 @@ form {
    padding: $grid-gutter-width;
    justify-content: center;
    align-items: center;
-    background-color: fade-out(lighten($c-dashboard-light, 1%), 0.3);
+    background-color: color.adjust(color.adjust($c-dashboard-light, $lightness: 1%), $alpha: -0.3);
    opacity: 0;
    transition: opacity 250ms;

--- a/resources/sass/mixins/_aspect-ratio.scss
+++ b/resources/sass/mixins/_aspect-ratio.scss
@ -1,8 +0,0 @@
-@mixin aspect-ratio($width, $height) {
-    &:before {
-        content: "";
-        display: block;
-        width: 100%;
-        padding-top: (math.div($height, $width) * 100%);
-    }
-}
--- a/resources/sass/pages/_blog.scss
+++ b/resources/sass/pages/_blog.scss
@ -6,7 +6,7 @@
    }

    .blog-entry {
-        border: 1px solid lighten($c-base, 75%);
+        border: 1px solid color.adjust($c-base, $lightness: 75%);
        border-radius: pxrem(5);

        @include media-breakpoint-up(md) {
@ -24,8 +24,8 @@
            background-repeat: no-repeat;

            @include media-breakpoint-down(md) {
-                @include aspect-ratio(3, 1);
                width: 100%;
+                aspect-ratio: 3/1;
            }

            @include media-breakpoint-up(md) {
@ -55,7 +55,7 @@
            }

            &-info {
-                color: lighten($c-text, 30%);
+                color: color.adjust($c-text, $lightness: 30%);
            }

            &-body {
--- a/resources/sass/pages/_contact.scss
+++ b/resources/sass/pages/_contact.scss
@ -7,13 +7,13 @@
        margin-bottom: pxrem(20);
        width: 100%;
        padding: pxrem(5) pxrem(10);
-        border: pxrem(2) solid fade-out($c-base, 0.75);
+        border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
        background-color: rgba(255, 255, 255, 0.8);
        font-size: pxrem(14);
        transition: border $trans-speed;

        &:focus {
-            border: pxrem(2) solid fade-out($c-accent, 0.4);
+            border: pxrem(2) solid color.adjust($c-accent, $alpha: -0.4);
        }

        &.error {
@ -28,7 +28,7 @@

    .submit {
        @include font-sans-bold;
-        background-color: lighten($c-accent, 5%);
+        background-color: color.adjust($c-accent, $lightness: 5%);
        color: $c-text-light;
        text-align: center;
        transition: background-color $trans-speed;
@ -46,7 +46,7 @@
    .notification {
        margin: 0px auto pxrem(15) auto;
        padding: pxrem(5) pxrem(10);
-        background-color: lighten($c-error, 15%);
+        background-color: color.adjust($c-error, $lightness: 15%);
        color: $c-text-light;
        font-size: pxrem(14);
        text-align: center;
--- a/resources/sass/sections/_nav.scss
+++ b/resources/sass/sections/_nav.scss
@ -133,7 +133,7 @@
                    transition: background-color 150ms;

                    &:not(.active):hover {
-                        background-color: lighten($c-base, 5%);
+                        background-color: color.adjust($c-base, $lightness: 5%);
                    }
                }

@ -150,7 +150,7 @@
                    }

                    &:not(.active):hover {
-                        color: darken($c-text-light, 5%);
+                        color: color.adjust($c-text-light, $lightness: -5%);
                    }
                }

--- a/resources/sass/sections/_subscription-form.scss
+++ b/resources/sass/sections/_subscription-form.scss
@ -1,9 +1,9 @@
 .subscription-form-section-component {
    $trans-speed: 100ms;
    width: pxrem(200);
-    border: pxrem(2) solid fade-out($c-base, 0.75);
+    border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
    border-radius: pxrem(3);
-    background-color: lighten($c-base, 75%);
+    background-color: color.adjust($c-base, $lightness: 75%);

    .notification {
        padding: pxrem(2);
@ -14,7 +14,7 @@
        margin: pxrem(5);
        width: calc(100% - #{pxrem(10)});
        padding: pxrem(3);
-        border: pxrem(2) solid fade-out($c-base, 0.75);
+        border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
        font-size: pxrem(14);
        text-align: center;
        transition: border-color $trans-speed;
--- a/traditional-bootstrap/gulpfile.js
+++ b/traditional-bootstrap/gulpfile.js
@ -24,8 +24,7 @@ const babel = require("gulp-babel"),
 const isProduction = minimist(process.argv.slice(2)).production !== undefined;

 // Declare plugin settings
-const sassOutputStyle = isProduction ? "compressed" : "expanded",
-    sassPaths = "node_modules",
+const sassPaths = "node_modules",
    autoprefixerSettings = { remove: false, cascade: false };

 // Include browsersync when gulp has not been run with --production
@ -80,8 +79,8 @@ const cssDashboardLibs = [

 // Paths to folders containing fonts that should be copied to public/fonts/
 const fontPaths = [
-    "resources/fonts/**",
-    "node_modules/@fortawesome/fontawesome-free/webfonts/**"
+    "resources/fonts/*",
+    "node_modules/@fortawesome/fontawesome-free/webfonts/*"
 ];

 // Handle errors
@ -102,10 +101,15 @@ function processSass(filename) {
    const css = gulp.src(`resources/sass/${filename}.scss`)
        .pipe(plumber(handleError))
        .pipe(sassGlob())
-        .pipe(sass({ outputStyle: sassOutputStyle }))
+        .pipe(sass({ quietDeps: true }))
        .pipe(postCSS([ autoprefixer(autoprefixerSettings) ]))
-        .pipe(concat(`${filename}.css`))
-        .pipe(gulp.dest("public/css/"));
+        .pipe(concat(`${filename}.css`));
+
+    if (isProduction) {
+        css.pipe(cleanCSS());
+    }
+
+    css.pipe(gulp.dest("public/css/"));

    if (!isProduction) {
        css.pipe(browserSync.stream({ match: `**/${filename}.css` }));
@ -200,7 +204,7 @@ gulp.task("js-dashboard-libs", () => {

 // Task to copy fonts
 gulp.task("fonts", (done) => {
-    gulp.src(fontPaths)
+    gulp.src(fontPaths, { encoding: false })
        .pipe(plumber(handleError))
        .pipe(gulp.dest("public/fonts/"));

--- a/traditional-bootstrap/package.json
+++ b/traditional-bootstrap/package.json
@ -8,9 +8,9 @@
    "browser-sync": "3.0.2"
  },
  "dependencies": {
-    "@babel/core": "7.24.7",
-    "@babel/preset-env": "7.24.7",
-    "@fortawesome/fontawesome-free": "6.5.2",
+    "@babel/core": "7.24.9",
+    "@babel/preset-env": "7.24.8",
+    "@fortawesome/fontawesome-free": "6.6.0",
    "autonumeric": "4.10.5",
    "autoprefixer": "10.4.19",
    "bootstrap": "5.3.3",
@ -27,12 +27,13 @@
    "gulp-sass-glob": "1.1.0",
    "gulp-strip-debug": "4.0.0",
    "gulp-uglify-es": "3.0.0",
-    "gulp5-sass-plugin": "^1.0.0",
+    "gulp5-sass-plugin": "^2.0.0",
    "jquery": "3.7.1",
    "list.js": "2.3.1",
    "minimist": "1.2.8",
    "ordered-read-streams": "^2.0.0",
-    "postcss": "8.4.38",
+    "postcss": "8.4.40",
+    "sass": "^1.77.8",
    "sortablejs": "1.15.2",
    "spinkit": "2.0.1",
    "what-input": "5.2.12"
Author	SHA1	Message	Date
Kevin MacMartin	826339a610	Don't use global function names in the sass	2024-07-25 12:40:56 -04:00
Kevin MacMartin	18cbaa338e	Update dependencies and replace the aspect-ratio mixin with the aspect-ratio css tag	2024-07-25 12:37:37 -04:00
Kevin MacMartin	64f59928aa	Fix the traditional-bootstrap gulpfile	2024-07-25 12:18:03 -04:00