RESOLVED #JJ324: Upgrade to webtrees 2.1.22 - Rural theme upgrade

ttps://bugs.jaubart.com/view.php?id=324

.stylelintrc.json

@@ -9,6 +9,7 @@
         "selector-max-compound-selectors": [4, { "severity": "warning" }],
         "selector-max-id": 1,
         "selector-no-qualifying-type": null,
-        "scss/at-extend-no-missing-placeholder": null
+        "scss/at-extend-no-missing-placeholder": null,
+        "@stylistic/indentation": 4
     }
 }

composer.json

@@ -34,7 +34,7 @@
 	},
 	"require-dev" : {
 		"bamarni/composer-bin-plugin": "^1.8",
-		"fisharebest/webtrees": "2.1.20",
+		"fisharebest/webtrees": "2.1.22",
 		"psr/http-message": "^1.1"
 	},
 	"scripts": {

module.php

@@ -108,7 +108,7 @@ public function customModuleAuthorName(): string
      */
     public function customModuleVersion(): string
     {
-        return '2.1.20-v.1';
+        return '2.1.21-v.1';
     }
 
     /**

package.json

@@ -26,14 +26,14 @@
     "laravel-mix": "^6.0.19",
     "laravel-mix-clean": "^0.1.0",
     "postcss": "^8.3.0",
-    "postcss-custom-properties": "^13.2.0",
+    "postcss-custom-properties": "^14.0.4",
     "postcss-image-inliner": "^7.0.0",
     "postcss-import": "^16.1.0",
     "postcss-rtlcss": "^5.1.0",
     "sass": "^1.34.0",
-    "sass-loader": "^14.1.1",
+    "sass-loader": "^16.0.4",
     "stylelint": "^16.3.0",
-    "stylelint-config-sass-guidelines": "^11.1.0",
+    "stylelint-config-sass-guidelines": "^12.1.0",
     "stylelint-config-standard": "^36.0.0",
     "webpack": "^5.37.1",
     "webpack-cli": "^5.0.0"

src/sass/_vendor-patches.scss

@@ -20,8 +20,43 @@
  * You should have received a copy of the GNU General Public License
  * along with webtrees-MyArtJaub. If not, see <https://www.gnu.org/licenses/>.
  */
- 
+
 /*
   * Use this file to apply temporary patches to upstream libraries.
   * To be reviewed at each release.
   */
+
+/*webtrees 2.1.21 switched to datatables.net-bs5 2.0, which comes with breaking changes
+ * Temporarily revert/neutralise them, to give time to analyse the best way to address the version change
+*/
+
+.dt-container.dt-bootstrap5 {
+    padding-top: 0;
+
+    > .row {
+        margin-left: 0;
+        margin-right: 0;
+
+        &:first-child {
+            margin-top: 0 !important;
+        }
+
+        > .dt-layout-start,
+        > .dt-layout-full {
+            padding-left: 0;
+        } 
+
+
+        > .dt-layout-end,
+        > .dt-layout-full {
+            padding-right: 0;
+        } 
+    }
+
+    .dataTable {
+        th.dt-type-numeric,
+        td.dt-type-numeric {
+            text-align: inherit;
+        }
+    }
+}

src/sass/rural/_footer.scss

@@ -28,9 +28,9 @@
  */
 
 .wt-global .wt-footers {
-    @include maj-base-layout-col;
-
     background-color: #fff;
+
+    @include maj-base-layout-col;
 
     .wt-footer-powered-by {
         a {

src/sass/rural/_global.scss

@@ -25,7 +25,8 @@ html {
     font-size: $maj-base-font-size;
 }
 
-::backdrop, .wt-global {
+::backdrop,
+.wt-global {
     background: #fff linear-gradient(to top, #fff, $maj-c-background) repeat-x;
 
 }
@@ -170,7 +171,8 @@ select,
 
 .pagination {
     .page-item {
-        .page-link, &.disabled .page-link {
+        .page-link,
+        &.disabled .page-link {
             background-image: $maj-bg-theme-medium-background-image;
         }
 

src/sass/rural/_icons.scss

@@ -24,6 +24,7 @@
  */
 
 /* stylelint-disable block-no-empty */
+/* stylelint-disable @stylistic/block-opening-brace-space-before */
 
 /* Arrow icons */
 

src/sass/rural/_main.scss

@@ -38,14 +38,15 @@ main {
 
     .wt-main-container {
         @extend .table-responsive;
-        @include maj-base-layout-col;
 
         background-color: $white;
         overflow-x: visible;
 
         /* Space between the header/footer and the main content. */
         padding-bottom: 1rem;
         padding-top: 1rem;
+
+        @include maj-base-layout-col;
 
         > .row {
             margin-left: 0;
@@ -107,7 +108,8 @@ main {
             padding: 0.5rem 0.75rem;
         }
 
-        .text-muted, .text-body-secondary {
+        .text-muted,
+        .text-body-secondary {
             color: $maj-c-theme-darker !important;
         }
 
@@ -163,7 +165,8 @@ form.wt-page-content {
             font-weight: bold;
         }
 
-        &.text-muted, &.text-body-secondary {
+        &.text-muted,
+        &.text-body-secondary {
             display: none;
 
             .wt-tabs-individual & {
@@ -181,7 +184,7 @@ form.wt-page-content {
     border-top-style: none;
     padding: 1em;
 
-    .dataTables_wrapper {
+    .dt-container {
         border-style: none;
     }
 

src/sass/rural/_menus.scss

@@ -22,7 +22,7 @@
  */
 
 /* stylelint-disable function-url-quotes */
-
+/* stylelint-disable @stylistic/block-opening-brace-space-before */
 /*
  * Menus icons
  */ 

src/sass/rural/_pages-blocks.scss

@@ -82,7 +82,7 @@
     .wt-block-content {
         background-color: $maj-c-theme-lighter;
 
-        .dataTables_wrapper {
+        .dt-container {
             border-style: none;
         }
 

src/sass/rural/_pages-datatables.scss

@@ -26,19 +26,19 @@ table.center {
     margin-right: auto;
 }
 
-.dataTables_wrapper {
+.dt-container {
     @extend .table-responsive;
     @extend .maj-content-tabs;
     @extend .mx-auto;
 
     @include media-breakpoint-up(md) {
         max-width: 75%;
     }
-	
-    .dataTables_info,
-    .dataTables_length,
-    .dataTables_filter,
-    .dataTables_paginate {
+    
+    .dt-info,
+    .dt-length,
+    .dt-search,
+    .dt-paging {
         padding: 0.4em;
     }
 }
@@ -52,7 +52,7 @@ div[role=tabpanel],
 div[id^=table-indi],
 div[id^=table-fam],
 .maj-table-full-width {
-    .dataTables_wrapper {
+    .dt-container {
         max-width: 100%;
     }
 }
@@ -64,8 +64,6 @@ table.dataTable {
     //@extend .mx-auto;
     //@extend .w-auto;
 
-    border-spacing: 2px;
-
     thead,
     tfoot {
         tr {
@@ -78,7 +76,12 @@ table.dataTable {
             }
         }
     }
-
+
+    &.table {
+        border-collapse: separate;
+        border-spacing: 2px;
+    }
+
     &.table-bordered {
         thead,
         tfoot {
@@ -95,7 +98,8 @@ table.dataTable {
         }
     }
 
-    a.text-muted, a.text-body-secondary {
+    a.text-muted,
+    a.text-body-secondary {
         color: $maj-c-theme-dark !important;
 
         &:hover {

src/sass/rural/_pages.scss

@@ -362,7 +362,8 @@ div {
  * Miscellaneous
  */
 
-.text-muted, .text-body-secondary {
+.text-muted,
+.text-body-secondary {
     color: $maj-c-bluegray !important;
 
     &.nav-link {

webpack.mix.rural.js

@@ -30,7 +30,11 @@ mix
     '~build': config.build_dir
   })
   .sass('src/sass/theme.scss', config.public_dir + '/css/rural.min.css', {
-    additionalData: '$maj-webtrees-dir: ' + config.webtrees_dir + ';'
+    additionalData: '$maj-webtrees-dir: ' + config.webtrees_dir + ';',
+    sassOptions: {
+      quietDeps: true,
+      silenceDeprecations: ['import']
+    }
   })
   .options({
     processCssUrls: false,
@@ -41,6 +45,7 @@ mix
       postcssCustomProperties
     ]
   })
+  // .webpackConfig({ stats: { children: true } })
   .copy(config.images_dir + '/header.png', config.public_dir + '/images')
   .clean()
 ;