From 20654bb3f0d2c91fe4a11f5eac4e94ac382ff0ba Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:10:47 +0200 Subject: [PATCH 01/51] npm: update bootstrap to 5.2.0 --- package-lock.json | 53 +++++++++++++++++++++++++++++++++++++---------- package.json | 3 ++- 2 files changed, 44 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index c417ba6..4bfc61a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "version": "1.0.2", "license": "ISC", "devDependencies": { - "bootstrap-sass": "^3.3.7", + "@popperjs/core": "^2.11.5", + "bootstrap": "^5.2.0", "gulp": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-csso": "^4.0.1", @@ -20,6 +21,16 @@ "sass": "^1.54.0" } }, + "node_modules/@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/ansi-colors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", @@ -366,11 +377,24 @@ "file-uri-to-path": "1.0.0" } }, - "node_modules/bootstrap-sass": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz", - "integrity": "sha1-ZZbHq0D2Y3OTMjqwvIDQZPxjBJg=", - "dev": true + "node_modules/bootstrap": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz", + "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.5" + } }, "node_modules/brace-expansion": { "version": "1.1.11", @@ -4378,6 +4402,12 @@ } }, "dependencies": { + "@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==", + "dev": true + }, "ansi-colors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", @@ -4648,11 +4678,12 @@ "file-uri-to-path": "1.0.0" } }, - "bootstrap-sass": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz", - "integrity": "sha1-ZZbHq0D2Y3OTMjqwvIDQZPxjBJg=", - "dev": true + "bootstrap": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz", + "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==", + "dev": true, + "requires": {} }, "brace-expansion": { "version": "1.1.11", diff --git a/package.json b/package.json index 85f12f0..cff9a0f 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "1.0.2", "description": "HTTP Callback Tool", "devDependencies": { - "bootstrap-sass": "^3.3.7", + "@popperjs/core": "^2.11.5", + "bootstrap": "^5.2.0", "gulp": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-csso": "^4.0.1", From 351562f36b42ec65d188cc5c2c0fe1b82a0199d2 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:18:38 +0200 Subject: [PATCH 02/51] gulpfile.js: update to build with bootstrap 5.2.0 --- gulpfile.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index fd3b36d..54dd86d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -14,7 +14,7 @@ var config = { pattern: 'app/assets/sass/**/*.scss', src: 'app/assets/sass/application.scss', opt: { - includePaths: [ 'node_modules/bootstrap-sass/assets/stylesheets' ] + includePaths: [ 'node_modules' ] }, outputDir: 'public/css', outputName: 'application' @@ -22,8 +22,9 @@ var config = { js: { src: [ 'node_modules/jquery/dist/jquery.js', + 'node_modules/@popperjs/core/dist/umd/popper.js', // Bootstrap - 'node_modules/bootstrap-sass/assets/javascripts/bootstrap.js', + 'node_modules/bootstrap/dist/js/bootstrap.js', // Font Awesome 'app/assets/js/font-awesome/regular.js', 'app/assets/js/font-awesome/solid.js', From 676f358e3abbb8b9b258560ce2b33605b9221d13 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:19:19 +0200 Subject: [PATCH 03/51] Adding app/assets/sass/mixins/_center-block.scss --- app/assets/sass/_mixins.scss | 1 + app/assets/sass/mixins/_center-block.scss | 6 ++++++ 2 files changed, 7 insertions(+) create mode 100644 app/assets/sass/mixins/_center-block.scss diff --git a/app/assets/sass/_mixins.scss b/app/assets/sass/_mixins.scss index 1d56b71..ff9cabb 100644 --- a/app/assets/sass/_mixins.scss +++ b/app/assets/sass/_mixins.scss @@ -1,3 +1,4 @@ @import "mixins/button"; +@import "mixins/center-block"; @import "mixins/icon-vcenter"; diff --git a/app/assets/sass/mixins/_center-block.scss b/app/assets/sass/mixins/_center-block.scss new file mode 100644 index 0000000..0a0dcb1 --- /dev/null +++ b/app/assets/sass/mixins/_center-block.scss @@ -0,0 +1,6 @@ + +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} From 1182f9439b133d5cf3f1411321e8b49813d2a1c5 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:20:01 +0200 Subject: [PATCH 04/51] Adding app/assets/sass/base/_utils.scss --- app/assets/sass/base/_utils.scss | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 app/assets/sass/base/_utils.scss diff --git a/app/assets/sass/base/_utils.scss b/app/assets/sass/base/_utils.scss new file mode 100644 index 0000000..3e61501 --- /dev/null +++ b/app/assets/sass/base/_utils.scss @@ -0,0 +1,4 @@ + +.center-block { + @include center-block(); +} From 22f49280deefcd368a4ee2c4d5a903868e08fbc0 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:38:26 +0200 Subject: [PATCH 05/51] app/assets/sass/views/_about.scss: update to bootstrap 5.2.0 mixins. --- app/assets/sass/views/_about.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/assets/sass/views/_about.scss b/app/assets/sass/views/_about.scss index 62579ca..9c41d5f 100644 --- a/app/assets/sass/views/_about.scss +++ b/app/assets/sass/views/_about.scss @@ -3,11 +3,16 @@ @extend .row; &-main { - @include make-sm-column(8); + @include make-col-ready(); + @include media-breakpoint-up(sm) { + @include make-col(8); + } } &-reference { - @include make-sm-column(4); + @include make-col-ready(); + @include media-breakpoint-up(sm) { + @include make-col(4); + } } } - From 10c5935620051cefefad34ef6980508cc585a9ec Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:39:03 +0200 Subject: [PATCH 06/51] app/assets/sass/components/_callback-list.scss: use clearfix mixin instead of extend. --- app/assets/sass/components/_callback-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/components/_callback-list.scss b/app/assets/sass/components/_callback-list.scss index c2a4b5b..f010b65 100644 --- a/app/assets/sass/components/_callback-list.scss +++ b/app/assets/sass/components/_callback-list.scss @@ -1,7 +1,7 @@ .callback-list-item { - @extend .clearfix; + @include clearfix(); position: relative; padding: .6em 1em; From 44b7a3a7b040c48689633a4825cd0af31233fc58 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:39:38 +0200 Subject: [PATCH 07/51] app/assets/sass/components/_badge.scss: brand-color is named primary in bootstrap 5.2.0 --- app/assets/sass/components/_badge.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/components/_badge.scss b/app/assets/sass/components/_badge.scss index 46107e7..254e560 100644 --- a/app/assets/sass/components/_badge.scss +++ b/app/assets/sass/components/_badge.scss @@ -13,6 +13,6 @@ &-primary { color: white; - background-color: $brand-color; + background-color: $primary; } } From a971a5553ab11d16ed070d1f0ea5cd6ce8c5b6ba Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:40:02 +0200 Subject: [PATCH 08/51] app/assets/sass/layout/_sections.scss: brand-color is named primary in bootstrap 5.2.0 --- app/assets/sass/layout/_sections.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/layout/_sections.scss b/app/assets/sass/layout/_sections.scss index b53a4cf..cfbb55a 100644 --- a/app/assets/sass/layout/_sections.scss +++ b/app/assets/sass/layout/_sections.scss @@ -6,7 +6,7 @@ .head-section { - background-color: $brand-color; + background-color: $primary; background-image: url(#{$image-path}/header-pattern.jpg); margin-bottom: 60px; From 98ed31b7f8e2349e1cef928fdac25de6edcb17b7 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:41:07 +0200 Subject: [PATCH 09/51] app/assets/sass/components/_pagination.scss: extend center-block instead of nav (only need centering anyway) --- app/assets/sass/components/_pagination.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/components/_pagination.scss b/app/assets/sass/components/_pagination.scss index 13c63bc..78fa41b 100644 --- a/app/assets/sass/components/_pagination.scss +++ b/app/assets/sass/components/_pagination.scss @@ -1,6 +1,6 @@ .pagination { - @extend .nav; + @extend .center-block; margin-top: 1em; margin-bottom: 1em; From 260fc641025a09fa72bcab4aec6c687fb0af222a Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:43:32 +0200 Subject: [PATCH 10/51] app/assets/sass/layout/_navigation.scss: use bootstrap 5.2.0 mixin for media queries. also skip $navbar-breakpoint-min variable and just use "md" breakpoint. --- app/assets/sass/layout/_navigation.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss index 213f8d3..84c9caf 100644 --- a/app/assets/sass/layout/_navigation.scss +++ b/app/assets/sass/layout/_navigation.scss @@ -34,9 +34,9 @@ font-size: 24px; // Hide for larger view-ports. - @media (min-width: $navbar-breakpoint-min) { - display: none !important; - } + @include media-breakpoint-up(md) { + @include visually-hidden; + } } // Menu @@ -47,8 +47,7 @@ > li { // Inline list for larger viewports. - @media (min-width: $navbar-breakpoint-min) { - + @include media-breakpoint-up(md) { display: inline-block; a { @@ -76,7 +75,7 @@ } // Only for small viewports. - @media (max-width: $navbar-breakpoint-min) { + @include media-breakpoint-down(md) { margin: 1em 0; @@ -99,7 +98,8 @@ } // Always show menu for larger viewport. - @media (min-width: $navbar-breakpoint-min) { + + @include media-breakpoint-up(md) { &-menu.collapse { display: block; } From a214fe3fcfe7ba55764f9ee46579b7bdb0fd88d1 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:50:01 +0200 Subject: [PATCH 11/51] app/assets/sass/base/_typography.scss: fix underlines on links. bootstrap 3.4.0 only had underlines for hover links while 5.2.0 has them on for all states. So enable them for a:hover again here. while we disable them in bootstrap. --- app/assets/sass/base/_typography.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/assets/sass/base/_typography.scss b/app/assets/sass/base/_typography.scss index 93ac4c4..31e88b9 100644 --- a/app/assets/sass/base/_typography.scss +++ b/app/assets/sass/base/_typography.scss @@ -12,3 +12,7 @@ .text-gitlab { color: $gitlab-color; } .text-google { color: $google-color; } .text-linkedin { color: $linkedin-color; } + +a:hover { + text-decoration: underline; +} From 4403f5c2bb0cbc59f9b96251f738e6769dc08666 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:50:36 +0200 Subject: [PATCH 12/51] app/assets/sass/layout/_navigation.scss: use cleafix mixin instead of extend. --- app/assets/sass/layout/_navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss index 84c9caf..3d32d71 100644 --- a/app/assets/sass/layout/_navigation.scss +++ b/app/assets/sass/layout/_navigation.scss @@ -6,7 +6,7 @@ .navigation { // General styling (for all viewport widths) - @extend .clearfix; + @include clearfix(); @extend .container; min-height: $navbar-height; From 18466d273c22085cb97f4b538626e338632b5be7 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:51:18 +0200 Subject: [PATCH 13/51] app/assets/sass/layout/_navigation.scss: "pull-right" is renamed to "float-end" in bootstrap 5.2.0 --- app/assets/sass/layout/_navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss index 3d32d71..4e0fb11 100644 --- a/app/assets/sass/layout/_navigation.scss +++ b/app/assets/sass/layout/_navigation.scss @@ -108,7 +108,7 @@ // User Menu // ------------------- &-user-menu { - @extend .nav, .pull-right; + @extend .nav, .float-end; margin-top: 10px; &-login { From 8fad84bd4b829a664d55e7fef9958f38554fb269 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Sun, 31 Jul 2022 23:53:32 +0200 Subject: [PATCH 14/51] app/assets/sass/layout/_navigation.scss: "border-radius-base" is renamed to "border-radius" in bootstrap 5.2.0 --- app/assets/sass/layout/_navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss index 4e0fb11..ff641c5 100644 --- a/app/assets/sass/layout/_navigation.scss +++ b/app/assets/sass/layout/_navigation.scss @@ -123,7 +123,7 @@ display: inline-block; padding: .3em .8em; background: $usermenu-button-bg; - border-radius: $border-radius-base; + border-radius: $border-radius; &:hover { background: $usermenu-button-hover-bg; From 33e2cec8a7cb092d853c295f1d49063932af93ce Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Mon, 1 Aug 2022 21:39:48 +0200 Subject: [PATCH 15/51] app/assets/sass/layout/_navigation.scss: hack margins for menu items abit. --- app/assets/sass/layout/_navigation.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss index ff641c5..e23e112 100644 --- a/app/assets/sass/layout/_navigation.scss +++ b/app/assets/sass/layout/_navigation.scss @@ -52,12 +52,8 @@ a { display: block; - @include navbar-vertical-align($line-height-computed + ($navbar-link-vertical-spacing * 2)); + margin: 4px calc($navbar-link-spacing / 2); padding: $navbar-link-vertical-spacing 10px $navbar-link-vertical-spacing; - line-height: $line-height-computed; - - margin-left: calc($navbar-link-spacing / 2); - margin-right: calc($navbar-link-spacing / 2); &:hover { color: $navbar-link-hover-color; From 96a80cf6e9aec251991466282b13a278ff19c25c Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Mon, 1 Aug 2022 21:40:36 +0200 Subject: [PATCH 16/51] app/assets/sass/layout/_navigation.scss: .dropdown-menu-right does not exist. so don't extend it. --- app/assets/sass/layout/_navigation.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss index e23e112..97b15de 100644 --- a/app/assets/sass/layout/_navigation.scss +++ b/app/assets/sass/layout/_navigation.scss @@ -128,7 +128,6 @@ &-list { @extend .dropdown-menu; - @extend .dropdown-menu-right; vertical-align: middle; > li > a { From 897da2ad27dc34c5530f07917fdd418464a1aa8f Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Mon, 1 Aug 2022 21:41:29 +0200 Subject: [PATCH 17/51] app/views/_common/_components/navigation.volt: update dropdown to bootstrap 5.2.0 --- app/views/_common/_components/navigation.volt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/_common/_components/navigation.volt b/app/views/_common/_components/navigation.volt index 7f05d1c..62c2317 100644 --- a/app/views/_common/_components/navigation.volt +++ b/app/views/_common/_components/navigation.volt @@ -9,12 +9,12 @@ {% if auth.hasIdentity() %}
-
    +
    • {{ link_to(['for': 'user-settings'], ' Settings') }}
    • {{ link_to('/user/activity', ' Activity') }}
      • From dd8b065c8efacc957cc1ecff21447f647b3d0194 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Mon, 1 Aug 2022 21:43:23 +0200 Subject: [PATCH 18/51] Adding app/assets/sass/_bootstrap-config.scss --- app/assets/sass/_bootstrap-config.scss | 57 ++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 app/assets/sass/_bootstrap-config.scss diff --git a/app/assets/sass/_bootstrap-config.scss b/app/assets/sass/_bootstrap-config.scss new file mode 100644 index 0000000..1b97667 --- /dev/null +++ b/app/assets/sass/_bootstrap-config.scss @@ -0,0 +1,57 @@ + +// ---------------------------------- +// Components +// ---------------------------------- + +$enable-shadows: true; + +// ---------------------------------- +// Colors +// ---------------------------------- + +$body-bg: #f5f5f8; + +$gray-100: #f9f9f9; +$gray-200: #e9ecef; +$gray-300: #dcdcdc; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #444; +$gray-800: #343a40; +$gray-900: #202020; + +$primary: #03a9f4; +$blue: hsl(210, 70%, 50%); +$green: #5cb85c; +$yellow: #f0ad4e; +$red: #d9534f; + +// ---------------------------------- +// Typography +// ---------------------------------- + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; + +$font-size-root: 15px; + +$navbar-brand-font-size: 1.4rem; + +// ---------------------------------- +// Links +// ---------------------------------- + +$link-decoration: none; + +// ---------------------------------- +// Tables +// ---------------------------------- + +$table-cell-padding-y: .3rem; +$table-cell-padding-x: .3rem; +$table-cell-padding-y-sm: .23rem; +$table-cell-padding-x-sm: .23rem; + +$table-striped-bg: $gray-100; +$table-hover-bg: $gray-200; From cd6eb49b5bda9baca3a7ae94b9c0e7c568ff3497 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Mon, 1 Aug 2022 21:44:52 +0200 Subject: [PATCH 19/51] app/assets/sass/application.scss: implement the new bootstrap 5.2.0 framework into our sass. --- app/assets/sass/application.scss | 40 +++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index f44df01..15a73fd 100644 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -1,23 +1,51 @@ -// --------------------------- -// Bootstrap & Fonts -// --------------------------- - -@import "bootstrap-custom"; +// Fonts @import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i'); @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i'); +@import "bootstrap/scss/functions"; + +// --------------------------- +// Bootstrap config +// --------------------------- + +@import "bootstrap-config"; + +// --------------------------- +// Bootstrap +// --------------------------- + +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/root"; + +// Optional +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/utilities"; +@import "bootstrap/scss/close"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/dropdown"; + +@import "bootstrap/scss/utilities/api"; + // --------------------------- // Site // --------------------------- -// variables & mixins. @import "variables"; @import "mixins"; // Base @import "base/global"; @import "base/typography"; +@import "base/utils"; // Layout @import "layout/sections"; From 45ac2a596155f17fb112091cc23fcedb5df4aab1 Mon Sep 17 00:00:00 2001 From: Henrik Hautakoski Date: Mon, 1 Aug 2022 21:45:29 +0200 Subject: [PATCH 20/51] app/assets/sass/_variables.scss: Update to bootstrap 5.2.0 --- app/assets/sass/_variables.scss | 53 ++++++++++++++------------------- 1 file changed, 22 insertions(+), 31 deletions(-) diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss index 3392ceb..cbb5b21 100644 --- a/app/assets/sass/_variables.scss +++ b/app/assets/sass/_variables.scss @@ -8,12 +8,12 @@ $image-path: #{$base-path}/img; // ---------------------------------- // Colors // ---------------------------------- -$gray-lightest: #f9f9f9; -$gray-light: #dcdcdc; -$gray-dark: #444; -$gray-darker: #202020; -$black: #000; -$white: #fff; + +// TODO: Remove +$gray-lightest: $gray-100; +$gray-light: $gray-300; +$gray-dark: $gray-700; +$gray-darker: $gray-900; // Text $text-color: #333; @@ -25,37 +25,26 @@ $foreground-color: $white; $hover-color: $gray-lightest; $border-color: $gray-light; -// Brand -$brand-color: #03a9f4; -$brand-info: hsl(210, 70%, 50%); $google-color: #db4437; $github-color: #4183c4; $gitlab-color: #548; $linkedin-color: #0077B5; // ---------------------------------- -// Font +// Typography // ---------------------------------- - -$font-size-navigation: 20px; +$font-size-navigation: $navbar-brand-font-size; $font-size-large: 20px; $font-size-small: 14px; -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif: Georgia, "Times New Roman", Times, serif; -//** Default monospace fonts for ``, ``, and `
      `.
-$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-family-base:        $font-family-sans-serif;
-
 // ----------------------------------
 //   Layout
 // ----------------------------------
+
 $header-text-shadow:					1px 3px 4px rgba(0, 0, 0, 0.45);
 
 // navigation
-$navbar-breakpoint-min:                 $screen-md-min;
-
 $navbar-height:                         60px;
 $navbar-link-vertical-spacing:          8px;
 $navbar-link-underline-height:          2px;
@@ -70,8 +59,10 @@ $navbar-link-hover-underline:   		$navbar-link-color;
 $navbar-link-active-color:      		$navbar-link-color;
 $navbar-link-active-underline:  		$navbar-link-color;
 
-$navbar-brand-color:            		$brand-color;
-$navbar-brand-hover-color:      		darken($brand-color, 15%);
+$navbar-brand-color:            		$primary;
+$navbar-brand-hover-color:      		darken($primary, 15%);
+
+$nav-link-hover-bg:         none;
 
 // User menu
 $usermenu-button-bg:                    $navbar-background;
@@ -100,17 +91,17 @@ $button-primary-color:         white;
 $button-primary-bg:            #5fbc49;
 
 $button-brand-color:           white;
-$button-brand-bg:              $brand-color;
+$button-brand-bg:              $primary;
 
 // State
 $button-info-color:            white;
-$button-info-bg:               $brand-info;
+$button-info-bg:               $info;
 $button-success-color:         white;
-$button-success-bg:            $brand-success;
+$button-success-bg:            $success;
 $button-warning-color:         white;
-$button-warning-bg:            $brand-warning;
+$button-warning-bg:            $warning;
 $button-danger-color:          white;
-$button-danger-bg:             $brand-danger;
+$button-danger-bg:             $danger;
 
 // Company.
 
@@ -137,7 +128,7 @@ $list-group-item-background:        transparent;
 $list-group-item-border-color:      $gray-light;
 
 $list-group-hover-background:       $gray-lightest;
-$list-group-item-active-background: $brand-color;
+$list-group-item-active-background: $primary;
 
 // ----------------------------------
 //   List group
@@ -186,8 +177,8 @@ $pagination-border:         $border-color;
 $pagination-hover:          $hover-color;
 
 $pagination-active-color:   $white;
-$pagination-active-bg:      $brand-color;
-$pagination-active-border:  darken($brand-color, 5%);
+$pagination-active-bg:      $primary;
+$pagination-active-border:  darken($primary, 5%);
 
 // ----------------------------------
 //   Section
@@ -219,4 +210,4 @@ $callback-list-arrow-color:         $callback-list-border-color;
 // ----------------------------------
 
 $request-item-secondary-color:      $text-secondary-color;
-$request-detail-background:         lighten($brand-color, 45%);
+$request-detail-background:         lighten($primary, 45%);

From 860caf38b8cb92cf07a644d339562bc9355d9fdb Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Mon, 1 Aug 2022 21:45:41 +0200
Subject: [PATCH 21/51] remove old app/assets/sass/_bootstrap-custom.scss

---
 app/assets/sass/_bootstrap-custom.scss | 32 --------------------------
 1 file changed, 32 deletions(-)
 delete mode 100644 app/assets/sass/_bootstrap-custom.scss

diff --git a/app/assets/sass/_bootstrap-custom.scss b/app/assets/sass/_bootstrap-custom.scss
deleted file mode 100644
index 0d09224..0000000
--- a/app/assets/sass/_bootstrap-custom.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-
-// ---------------------------
-//  Custom bootstrap variables.
-// ---------------------------
-
-$body-bg:  					#f5f5f8;
-
-$font-size-base:            15px;
-$nav-link-hover-bg:         none;
-
-// ---------------------------
-//  Source imports
-// ---------------------------
-
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-
-@import "bootstrap/normalize";
-@import "bootstrap/close";
-@import "bootstrap/alerts";
-@import "bootstrap/print";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/tables";
-@import "bootstrap/forms";
-@import "bootstrap/scaffolding";
-@import "bootstrap/grid";
-@import "bootstrap/utilities";
-@import "bootstrap/navs";
-@import "bootstrap/dropdowns";
-@import "bootstrap/modals";
-@import "bootstrap/component-animations";

From 5798a28516b5ec188349a75524a7cd784d805678 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Mon, 1 Aug 2022 21:46:54 +0200
Subject: [PATCH 22/51] sass: "sticky-footer" broke with BS 5.2.0, fix with
 flexbox.

---
 app/assets/sass/base/_global.scss     | 7 ++++---
 app/assets/sass/layout/_sections.scss | 4 +---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/assets/sass/base/_global.scss b/app/assets/sass/base/_global.scss
index a507247..aa9f68b 100644
--- a/app/assets/sass/base/_global.scss
+++ b/app/assets/sass/base/_global.scss
@@ -1,5 +1,6 @@
 
-html {
-    position: relative;
-    min-height: 100%;
+body {
+    display: flex;
+	flex-direction: column;
+    min-height: 100vh;
 }
diff --git a/app/assets/sass/layout/_sections.scss b/app/assets/sass/layout/_sections.scss
index cfbb55a..a9e6b83 100644
--- a/app/assets/sass/layout/_sections.scss
+++ b/app/assets/sass/layout/_sections.scss
@@ -23,7 +23,7 @@
 
 .content-section {
     @extend .container;
-    margin-bottom: $footer-height;
+	flex: 1 0 auto;
 }
 
 
@@ -33,8 +33,6 @@
 
 
 .footer-section {
-    position: absolute;
-    bottom: 0;
     width: 100%;
     color: $footer-text-color;
     border-top: 1px solid #bcbcbc;

From d2842907a3e0f41346860a9950c0cf771543ced3 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Tue, 2 Aug 2022 12:02:17 +0200
Subject: [PATCH 23/51] views: change pull-left,pull-right classes to
 float-start,float-end

---
 app/views/main/callback/list.volt | 4 ++--
 app/views/main/callback/show.volt | 4 ++--
 app/views/main/user/settings.volt | 6 ++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/views/main/callback/list.volt b/app/views/main/callback/list.volt
index 5f4d100..f5920a3 100644
--- a/app/views/main/callback/list.volt
+++ b/app/views/main/callback/list.volt
@@ -2,9 +2,9 @@
 
      
 
     
      
-        
      Callbacks
      
+        
      Callbacks
      
 
-        
      
+        
      
             
                 {{ icon('solid/plus') }} New
             
diff --git a/app/views/main/callback/show.volt b/app/views/main/callback/show.volt
index 7114fe6..59ce19e 100644
--- a/app/views/main/callback/show.volt
+++ b/app/views/main/callback/show.volt
@@ -1,8 +1,8 @@
 
 
      
     
      
-        
      {{ item.name|e }}
      
-        
      Created at: {{ item.created_at }}
      
+        
      {{ item.name|e }}
      
+        
      Created at: {{ item.created_at }}
      
     
      
 
     
      
diff --git a/app/views/main/user/settings.volt b/app/views/main/user/settings.volt
index c7c40df..ad5da5d 100644
--- a/app/views/main/user/settings.volt
+++ b/app/views/main/user/settings.volt
@@ -72,7 +72,7 @@
                 
      
                 {{ form.render('Save') }}
 
-                
             
      
@@ -85,7 +85,7 @@
     
      
         
      
             
      
-                
+                
                 
@@ -112,5 +112,3 @@
         
      
     
      
 
      
-
-

From 9faf53157718447ce181e2c941b0a21cbb48d134 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Tue, 2 Aug 2022 12:03:11 +0200
Subject: [PATCH 24/51] app/assets/sass/base/_utils.scss: add clearfix class

---
 app/assets/sass/base/_utils.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/sass/base/_utils.scss b/app/assets/sass/base/_utils.scss
index 3e61501..0fe5777 100644
--- a/app/assets/sass/base/_utils.scss
+++ b/app/assets/sass/base/_utils.scss
@@ -2,3 +2,7 @@
 .center-block {
 	@include center-block();
 }
+
+.clearfix {
+	@include clearfix();
+}

From b50e95231c6fc0189649b7ed94566533814a0cb9 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Tue, 2 Aug 2022 12:05:13 +0200
Subject: [PATCH 25/51] app/assets/sass/application.scss: import modal
 component from bootstrap.

---
 app/assets/sass/application.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 15a73fd..ac3d780 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -32,6 +32,7 @@
 @import "bootstrap/scss/grid";
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/modal";
 
 @import "bootstrap/scss/utilities/api";
 

From 1329bf82ed512be9473d385b8943dc878a125ed1 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Tue, 2 Aug 2022 12:14:22 +0200
Subject: [PATCH 26/51] app/views/_common/_components/flash.volt: update to
 bootstrap 5.2.0 syntax.

---
 app/views/_common/_components/flash.volt | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/views/_common/_components/flash.volt b/app/views/_common/_components/flash.volt
index dec209a..8234515 100644
--- a/app/views/_common/_components/flash.volt
+++ b/app/views/_common/_components/flash.volt
@@ -10,12 +10,9 @@
     {% for type, messages in flash.getMessages() %}
         {% for message in messages %}
             
         {% endfor%}
     {% endfor %}

From eebcce70f9bfb23887caea1bae78f965d2eb2390 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski 
Date: Tue, 2 Aug 2022 12:14:45 +0200
Subject: [PATCH 27/51] app/views/main/user/settings.volt: update modal to
 bootstrap 5.2.0 syntax.

---
 app/views/main/user/settings.volt | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/views/main/user/settings.volt b/app/views/main/user/settings.volt
index ad5da5d..07fd525 100644
--- a/app/views/main/user/settings.volt
+++ b/app/views/main/user/settings.volt
@@ -72,7 +72,7 @@
                 
      
                 {{ form.render('Save') }}
 
-                
             
      
@@ -81,14 +81,12 @@
     
 
      
 
-