Merge pull request #69 from itk-dev/feature/KUNST-72-update-assets

feature/KUNST 72 update assets
itk-dev · Aug 4, 2023 · 1d50b22 · 1d50b22
2 parents b2d17ca + 687862b
commit 1d50b22
Show file tree

Hide file tree

Showing 28 changed files with 4,192 additions and 6,530 deletions.
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -107,7 +107,7 @@ jobs:
             - uses: actions/checkout@master
             - uses: actions/setup-node@v1
               with:
-                  node-version: '10.x'
+                  node-version: '18.x'
             - name: install
               run: yarn install
             - name: JS coding standards
@@ -129,7 +129,7 @@ jobs:
                   restore-keys: yarn-
 
             - name: Install yarn packages
-              run: docker run -v $PWD:/app:rw -v ${{ steps.yarn-cache.outputs.dir }}:/usr/local/share/.cache/yarn/v6:rw --workdir /app node:14 yarn install
+              run: docker run -v $PWD:/app:rw -v ${{ steps.yarn-cache.outputs.dir }}:/usr/local/share/.cache/yarn/v6:rw --workdir /app node:18 yarn install
 
             - name: Build assets
-              run: docker run -v $PWD:/app:rw -v ${{ steps.yarn-cache.outputs.dir }}:/usr/local/share/.cache/yarn/v6:rw --workdir /app node:14 yarn build
+              run: docker run -v $PWD:/app:rw -v ${{ steps.yarn-cache.outputs.dir }}:/usr/local/share/.cache/yarn/v6:rw --workdir /app node:18 yarn build
diff --git a/.markdownlintrc b/.markdownlintrc
@@ -0,0 +1,12 @@
+{
+    // @see https://github.com/DavidAnson/markdownlint/blob/main/schema/.markdownlint.jsonc
+    // MD013/line-length - Line length
+    "MD013": {
+        // Exclude code blocks
+        "code_blocks": false
+    }
+}
+
+// Local Variables:
+// mode: json
+// End:
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+[PR-69](https://github.com/itk-dev/kunstdatabasen/pull/69)
+Update assets
+
 ### Changed
 
 - Upgraded to Symfony 6.3.

diff --git a/README.md b/README.md
@@ -5,6 +5,11 @@
 ## Upgrade from version 1.5.2
 
 ```sh
+# Upgrade migrations
+itkdev-docker-compose bin/console doctrine:migrations:list
+itkdev-docker-compose bin/console doctrine:migrations:sync-metadata-storage
+itkdev-docker-compose bin/console doctrine:migrations:version --add --all --no-interaction
+itkdev-docker-compose bin/console doctrine:migrations:list
 itkdev-docker-compose-server pull
 itkdev-docker-compose-server up --detach --remove-orphans
 itkdev-docker-compose-server exec phpfpm composer install --no-dev --no-scripts

diff --git a/assets/admin/_itemDetails.js b/assets/admin/_itemDetails.js
@@ -22,7 +22,7 @@ $(function () {
                 url: '/admin/item/' + id + '/modal',
                 type: 'GET',
                 data: {
-                    id: id
+                    id
                 },
                 success: function (modalResponse) {
                     modalTitle.html(modalResponse.title);

diff --git a/assets/admin/admin.scss b/assets/admin/admin.scss
@@ -3,7 +3,8 @@
 
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/custom-forms';
+// Removed in Bootstrap 5
+// @import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/tables';
 @import '~bootstrap/scss/pagination';
 @import '~bootstrap/scss/transitions';

diff --git a/assets/admin/item/item.scss b/assets/admin/item/item.scss
@@ -3,7 +3,8 @@
 
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/custom-forms';
+// Removed in Bootstrap 5
+// @import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/transitions';
 @import '~bootstrap/scss/images';
 

diff --git a/assets/app/app.scss b/assets/app/app.scss
@@ -3,7 +3,8 @@
 
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/custom-forms';
+// Removed in Bootstrap 5
+// @import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/tables';
 @import '~bootstrap/scss/pagination';
 @import '~bootstrap/scss/transitions';

diff --git a/assets/base.scss b/assets/base.scss
@@ -1,41 +1,50 @@
 // Custom bootstrap variables
 @import 'custom-variables';
 
-// Bootstrap configuration
+// Configuration
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/variables-dark';
+@import '~bootstrap/scss/maps';
 @import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
+// Layout & components
 @import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
 @import '~bootstrap/scss/type';
-// @import '~bootstrap/scss/images';
-// @import '~bootstrap/scss/code';
+@import '~bootstrap/scss/images';
+@import '~bootstrap/scss/containers';
 @import '~bootstrap/scss/grid';
-// @import '~bootstrap/scss/tables';
-// @import '~bootstrap/scss/forms';
-// @import '~bootstrap/scss/buttons';
-// @import '~bootstrap/scss/transitions';
-// @import '~bootstrap/scss/dropdown';
-// @import '~bootstrap/scss/button-group';
-// @import '~bootstrap/scss/input-group';
-// @import '~bootstrap/scss/custom-forms';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/transitions';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/button-group';
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
-// @import '~bootstrap/scss/card';
-// @import '~bootstrap/scss/breadcrumb';
-// @import '~bootstrap/scss/pagination';
-// @import '~bootstrap/scss/badge';
-// @import '~bootstrap/scss/jumbotron';
-// @import '~bootstrap/scss/alert';
-// @import '~bootstrap/scss/progress';
-// @import '~bootstrap/scss/media';
-// @import '~bootstrap/scss/list-group';
-// @import '~bootstrap/scss/close';
-// @import '~bootstrap/scss/toasts';
-// @import '~bootstrap/scss/modal';
-// @import '~bootstrap/scss/tooltip';
-// @import '~bootstrap/scss/popover';
-// @import '~bootstrap/scss/carousel';
-// @import '~bootstrap/scss/spinners';
-@import '~bootstrap/scss/utilities';
-@import '~bootstrap/scss/print';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/accordion';
+@import '~bootstrap/scss/breadcrumb';
+@import '~bootstrap/scss/pagination';
+@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/progress';
+@import '~bootstrap/scss/list-group';
+@import '~bootstrap/scss/close';
+@import '~bootstrap/scss/toasts';
+@import '~bootstrap/scss/modal';
+@import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/carousel';
+@import '~bootstrap/scss/spinners';
+@import '~bootstrap/scss/offcanvas';
+@import '~bootstrap/scss/placeholders';
+
+// Helpers
+@import '~bootstrap/scss/helpers';
+
+// Utilities
+@import '~bootstrap/scss/utilities/api';
+// scss-docs-end import-stack
diff --git a/assets/partials/initSelect2.js b/assets/partials/initSelect2.js
@@ -6,7 +6,7 @@ require('select2/dist/js/i18n/da');
 $(function () {
     $(document).ready(function () {
         $('.tag-select-edit').select2({
-            theme: 'bootstrap4',
+            theme: 'bootstrap-5',
             tags: true,
             allowClear: true,
             placeholder: 'Skriv',
@@ -15,10 +15,10 @@ $(function () {
 
         $(document).ready(function () {
             $('.tag-select').select2({
-                theme: 'bootstrap4',
+                theme: 'bootstrap-5',
                 language: 'da_DK',
                 allowClear: true,
-                placeholder: ''
+                placeholder: 'Vælg'
             });
         });
     });

diff --git a/assets/partials/initSelect2.scss b/assets/partials/initSelect2.scss
@@ -3,22 +3,7 @@
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/variables';
 @import '~select2/src/scss/core';
-@import '~@ttskch/select2-bootstrap4-theme/src/layout';
 
-// Modify BS-4 select 2 theme using different styleguide hence we disable our stylelint for
-/* stylelint-disable */
-.select2-container--bootstrap4 {
-  // all clear button
-  .select2-selection__clear {
-    $bg: $gray-900;
-
-    background-color: $bg;
-    line-height: 1em;
-    padding-left: 0.15em;
-
-    &:hover {
-      background-color: darken($bg, 10%);
-    }
-  }
-}
-/* stylelint-enable */
+// Fix for issue with the border color https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75
+$s2bs5-border-color: $border-color;
+@import '~select2-bootstrap-5-theme/src/include-all';
diff --git a/assets/security/login.scss b/assets/security/login.scss
@@ -3,4 +3,5 @@
 
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/custom-forms';
+// Removed in Bootstrap 5
+// @import '~bootstrap/scss/custom-forms';
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
@@ -3,7 +3,7 @@ twig:
     debug: '%kernel.debug%'
     strict_variables: '%kernel.debug%'
     exception_controller: null
-    form_themes: ['bootstrap_4_layout.html.twig']
+    form_themes: ['bootstrap_5_layout.html.twig']
     globals:
         siteimprove_key: '%env(SITEIMPROVE_KEY)%'
 

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
@@ -5,7 +5,7 @@ services:
       - PHP_MEMORY_LIMIT=512M
 
   node:
-    image: node:14
+    image: node:18
     profiles:
       - dev
     networks:

diff --git a/package.json b/package.json
@@ -1,28 +1,35 @@
 {
     "devDependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.28",
-        "@fortawesome/free-solid-svg-icons": "^5.13.0",
-        "@symfony/webpack-encore": "^0.31.0",
-        "@ttskch/select2-bootstrap4-theme": "^1.4.0",
-        "acorn": "^7.2.0",
-        "bootstrap": "^4.4.1",
-        "core-js": "^3.0.0",
-        "eslint": "^6.0.0",
-        "eslint-config-standard": "^14.1.1",
-        "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^4.2.1",
-        "eslint-plugin-standard": "^4.0.1",
-        "jquery": "^3.5.1",
-        "node-sass": "^4.14.0",
-        "popper.js": "^1.16.1",
-        "regenerator-runtime": "^0.13.2",
-        "sass-loader": "^9.0.1",
-        "select2": "^4.0.13",
-        "stylelint": "^13.3.3",
-        "stylelint-config-sass-guidelines": "^7.0.0",
-        "stylelint-scss": "^3.17.2",
-        "webpack-notifier": "^1.6.0"
+        "@babel/core": "^7.17.0",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/preset-env": "^7.16.0",
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@popperjs/core": "^2.11.8",
+        "@symfony/webpack-encore": "^4.0.0",
+        "bootstrap": "^5.3.1",
+        "browserslist": "^4.21.10",
+        "core-js": "^3.23.0",
+        "eslint": "^8.46.0",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-import": "^2.28.0",
+        "eslint-plugin-n": "^16.0.1",
+        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-standard": "^5.0.0",
+        "jquery": "^3.7.0",
+        "markdownlint-cli": "^0.35.0",
+        "postcss": "^8.4.27",
+        "regenerator-runtime": "^0.13.9",
+        "sass": "^1.64.2",
+        "sass-loader": "^13.0.0",
+        "select2": "^4.1.0-rc.0",
+        "select2-bootstrap-5-theme": "^1.3.0",
+        "stylelint": "^15.10.2",
+        "stylelint-config-sass-guidelines": "^10.0.0",
+        "stylelint-scss": "^5.0.1",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-notifier": "^1.15.0"
     },
     "license": "UNLICENSED",
     "private": true,
@@ -31,11 +38,12 @@
         "dev": "encore dev",
         "watch": "encore dev --watch",
         "build": "encore production --progress",
+        "coding-standards-check/markdownlint": "markdownlint --ignore LICENSE.md '*.md' docs/",
         "coding-standards-check/stylelint": "stylelint --config=.stylelintrc.js 'assets/**/*.scss'",
         "coding-standards-check/scss": "yarn run coding-standards-check/stylelint",
         "coding-standards-check/eslint": "eslint --config .eslintrc.js 'assets/**/*.js'",
         "coding-standards-check/js": "yarn run coding-standards-check/eslint",
-        "coding-standards-check": "yarn run coding-standards-check/scss; yarn run coding-standards-check/js",
+        "coding-standards-check": "yarn run coding-standards-check/scss; yarn run coding-standards-check/js; yarn run coding-standards-check/markdownlint",
         "coding-standards-apply/stylelint": "stylelint --config=.stylelintrc.js 'assets/**/*.scss' --fix",
         "coding-standards-apply/scss": "yarn run coding-standards-apply/stylelint",
         "coding-standards-apply/eslint": "eslint --config .eslintrc.js 'assets/**/*.js' --fix",

diff --git a/templates/admin/_sidebar.html.twig b/templates/admin/_sidebar.html.twig
@@ -1,21 +1,21 @@
 <div class="col-12 col-md-auto d-flex flex-column">
     <nav class="navbar navbar-expand-md flex-md-column h-100">
-        <a href="{{ path('admin') }}" class="navbar-brand mb-md-5"><i class="fas fa-palette mr-1"></i><span class="text-dark">{{ brandShort }}</span></a>
-        <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#primaryNavigation" aria-controls="primaryNavigation" aria-expanded="false" aria-label="Toggle navigation">
+        <a href="{{ path('admin') }}" class="navbar-brand mb-md-5"><i class="fas fa-palette me-1"></i><span class="text-dark">{{ brandShort }}</span></a>
+        <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNavigation" aria-controls="primaryNavigation" aria-expanded="false" aria-label="Toggle navigation">
             <i class="fas fa-bars fa-fw"></i><i class="fas fa-times-circle fa-fw true"></i>
         </button>
         <div class="collapse navbar-collapse flex-column" id="primaryNavigation">
             <ul class="nav flex-column">
                 {% for menu_item in menuItems %}
                     <li class="nav-item {{ menu_item.active ? ' active' : '' }}">
                         <a class="nav-link" href="{{ menu_item.link }}">
-                            <i class="fas {{ menu_item.icon }} fa-fw mr-1"></i>{{ menu_item.title|trans }}
+                            <i class="fas {{ menu_item.icon }} fa-fw me-1"></i>{{ menu_item.title|trans }}
                         </a>
                     </li>
                 {% endfor %}
             </ul>
-            <div class="dropdown open align-self-end mt-1 mt-md-5">
-                <button class="btn btn-outline-dark dropdown-toggle" type="button" id="userMenu" data-toggle="dropdown" aria-haspopup="true"
+            <div class="dropdown open align-self-end mt-1 mt-md-auto">
+                <button class="btn btn-outline-dark dropdown-toggle" type="button" id="userMenu" data-bs-targettoggle="dropdown" aria-haspopup="true"
                         aria-expanded="false">
                             {{ user.email }}
                         </button>

diff --git a/templates/admin/_table.html.twig b/templates/admin/_table.html.twig
@@ -1,19 +1,19 @@
-<div class="bg-white shadow rounded mb-5">
+<div class="bg-white shadow rounded mb-5 overflow-hidden">
     {% if items|length > 0 %}
         <div class="table-responsive">
             <table class="table table-borderless">
                 {% if header %}
-                    <thead class="bg-light">
-                    <tr class="text-muted small">
-                        <th>{{ 'admin.table.thumpnail'|trans }}</th>
-                        <th class="pointer">{{ 'admin.table.title'|trans }}</th>
-                        <th class="d-none d-md-table-cell">{{ 'admin.table.art_serial'|trans }}</th>
-                        <th>{{ 'admin.table.building'|trans }}</th>
-                        <th class="d-none d-md-table-cell">{{ 'admin.table.artist'|trans }}</th>
-                        <th class="d-none d-md-table-cell">{{ 'admin.table.type'|trans }}</th>
-                        <th>{{ 'admin.table.status'|trans }}</th>
-                        <th class="text-right">{{ 'admin.table.function'|trans }}</th>
-                    </tr>
+                    <thead>
+                        <tr>
+                            <th class="bg-light text-muted small">{{ 'admin.table.thumpnail'|trans }}</th>
+                            <th class="bg-light text-muted small pointer">{{ 'admin.table.title'|trans }}</th>
+                            <th class="bg-light text-muted small d-none d-md-table-cell">{{ 'admin.table.art_serial'|trans }}</th>
+                            <th class="bg-light text-muted small">{{ 'admin.table.building'|trans }}</th>
+                            <th class="bg-light text-muted small d-none d-md-table-cell">{{ 'admin.table.artist'|trans }}</th>
+                            <th class="bg-light text-muted small d-none d-md-table-cell">{{ 'admin.table.type'|trans }}</th>
+                            <th class="bg-light text-muted small">{{ 'admin.table.status'|trans }}</th>
+                            <th class="bg-light text-muted small text-right">{{ 'admin.table.function'|trans }}</th>
+                        </tr>
                     </thead>
                 {% endif %}
                 <tbody>
@@ -27,9 +27,9 @@
                         <td class="d-none d-md-table-cell">{{ item.type ?? '' }}</td>
                         <td>
                             {% if item.status == "Udlånt" %}
-                                <span class="badge badge-pill badge-dark">{{ item.status ?? '' }}</span>
+                                <span class="badge rounded-pill bg-dark">{{ item.status ?? '' }}</span>
                             {% else %}
-                                <span class="badge badge-pill badge-success">{{ item.status ?? '' }}</span>
+                                <span class="badge rounded-pill bg-success">{{ item.status ?? '' }}</span>
                             {% endif %}
                         </td>
                         <td class="text-right"><a href="{{ item.linkEdit }}"><i class="fas fa-edit"></i></a></td>

diff --git a/templates/admin/base.html.twig b/templates/admin/base.html.twig
@@ -8,7 +8,7 @@
     <div class="container-fluid">
         <div class="row">
             {% include "admin/_sidebar.html.twig" %}
-            <div class="col bg-light border-left px-md-5" style="min-height: 100vh;">
+            <div class="col bg-light border-start px-md-5" style="min-height: 100vh;">
                 {% block content %}
                 {% endblock %}
             </div>