Merge pull request #2047 from Catrobat/dependabot/npm_and_yarn/bootst…

…rap-5.1.1

Bump bootstrap from 4.6.0 to 5.1.1

README.md

@@ -32,11 +32,15 @@ Make sure all tests are passing when creating a pull request,
 
 ##### Tools integrated in the project:
 
+[![Symfony](https://img.shields.io/badge/Framework-Symfony-0379B8.svg)](https://symfony.com/)
+[![Openapi-generator](https://img.shields.io/badge/API-openapi_generator-0379B8.svg)](https://github.com/OpenAPITools/openapi-generator)
+[![Elastic](https://img.shields.io/badge/Search-Elastic-FF6940.svg)](https://www.elastic.co/)
 [![Php-cs-fixer](https://img.shields.io/badge/Php_Code_Style-Php_CS_Fixer-informational.svg)](https://github.com/FriendsOfPHP/PHP-CS-Fixer)
 [![PhpStan](https://img.shields.io/badge/Php_Code_Quality-PhpStan,_Psalm,_PhpDD,_PhpCPD_-informational.svg)](https://github.com/phpstan/phpstan)
+[![Webpack Encore](https://img.shields.io/badge/Asset_Bundler-Webpack_Encore-75AFCC.svg)](https://github.com/symfony/webpack-encore)
 [![Npm standard](https://img.shields.io/badge/JS_Code_Style-standard-green.svg)](https://standardjs.com)
 [![ESLint](https://img.shields.io/badge/JS_Code_Quality-ESLint-green.svg)](https://eslint.org/)
-[![Sass](https://img.shields.io/badge/CSS_Preprocessor-npm_sass-ff69b4.svg)](https://sass-lang.com/)
+[![Sass](https://img.shields.io/badge/CSS_Preprocessor-Dart_Sass-ff69b4.svg)](https://sass-lang.com/)
 [![StyleLint](https://img.shields.io/badge/CSS_Code_Style-StyleLint-ff69b4.svg)](https://stylelint.io/)
 
 **Have fun!**

assets/js/base.js

@@ -1,5 +1,4 @@
 import $ from 'jquery'
-import 'bootstrap'
 import textFillDefault from './components/text_fill_default'
 import './layout/header'
 import './layout/footer'
@@ -41,7 +40,7 @@ const fnCloseSidebarInternal = function () {
 }
 const fnCloseSidebarDesktop = function () {
   sidebar.addClass('inactive')
-  $('body').removeClass('new-nav')
+  $('body').removeClass('body-with-sidebar')
   sidebarToggleBtn.attr('aria-expanded', false)
 }
 const fnOpenSidebar = function () {
@@ -52,7 +51,7 @@ const fnOpenSidebar = function () {
 }
 const fnOpenSidebarDesktop = function () {
   sidebar.removeClass('inactive')
-  $('body').addClass('new-nav')
+  $('body').addClass('body-with-sidebar')
   sidebarToggleBtn.attr('aria-expanded', true)
 }
 

assets/js/components/project_list.js

@@ -48,12 +48,10 @@ export class ProjectList {
           project = self._generate(project)
           self.projectsContainer.append(project)
           project.click(function () {
+            project.empty()
+            project.css('display', 'flex')
+            project.css('justify-content', 'center')
             project.append($('#project-opening-spinner').html())
-            const href = $(this).attr('href')
-            const programID = ((href.indexOf('project') > 0) ? (href.split('project/')[1]).split('?')[0] : 0)
-            const type = self.getClickStatisticType(self.category)
-            const userSpecificRecommendation = type === 'user_who_downloaded_also_downloaded'
-            self.performClickStatisticRequest(href, type[0], type[1], userSpecificRecommendation, programID)
           })
         })
         self.container.classList.remove('loading')
@@ -142,7 +140,7 @@ export class ProjectList {
       if (self.isFullView) {
         window.history.back() // to remove pushed state
       } else {
-        history.pushState(
+        window.history.pushState(
           { type: 'ProjectList', id: self.container.id, full: true },
           $(this).text(), '#' + self.container.id
         )
@@ -186,25 +184,4 @@ export class ProjectList {
     this.$body.removeClass('overflow-hidden')
     return false
   }
-
-  getClickStatisticType (type) {
-    switch (type) {
-      case 'recent':
-        return ['newest', false]
-      case 'most_downloaded':
-        return ['mostDownloaded', false]
-      case 'most_viewed':
-        return ['mostViewed', false]
-      case 'scratch':
-        return ['scratchRemixes', false]
-      case 'recommended':
-        return ['rec_homepage', true]
-      case 'similar':
-        return ['project', true]
-      case 'user_who_downloaded_also_downloaded':
-        return ['rec_specific_programs', true]
-      default:
-        return [type, false]
-    }
-  }
 }

assets/js/custom/Program.js

@@ -1,5 +1,5 @@
 import $ from 'jquery'
-import 'bootstrap'
+import { Modal, Tab } from 'bootstrap'
 import Swal from 'sweetalert2'
 import { showSnackbar } from '../components/snackbar'
 
@@ -28,7 +28,6 @@ export const Program = function (projectId, csrfToken, userRole, myProgram, stat
   getApkStatus()
 
   $('.btn-project-download').on('click', (e) => {
-    console.error($(e.currentTarget).data('is-supported'))
     download(
       $(e.currentTarget).data('path-url'),
       $(e.currentTarget).data('project-id'),
@@ -121,7 +120,7 @@ export const Program = function (projectId, csrfToken, userRole, myProgram, stat
             apkDownloadTimeout = false
           }, 5000)
 
-          top.location.href = data.url
+          window.top.location.href = data.url
         }
       })
     } else if (data.status === 'pending') {
@@ -273,6 +272,10 @@ export const Program = function (projectId, csrfToken, userRole, myProgram, stat
         }
 
         const $modal = $('#project-like-modal')
+        const bootstrapModal = new Modal('#project-like-modal')
+        const firstTabEl = document.querySelector('#reaction-modal-tab li:first-child button')
+        const firstTab = new Tab(firstTabEl)
+        firstTab.show()
 
         const thumbsUpData = data.filter(x => x.types.indexOf('thumbs_up') !== -1)
         const smileData = data.filter(x => x.types.indexOf('smile') !== -1)
@@ -284,7 +287,7 @@ export const Program = function (projectId, csrfToken, userRole, myProgram, stat
          * @param data {{user: {id: string, name: string}, types: string[]}[]}
          */
         const fnUpdateContent = (type, data) => {
-          const $tab = /** @type jQuery */ $modal.find('a#' + type + '-tab')
+          const $tab = /** @type jQuery */ $modal.find('button#' + type + '-tab')
           const $content = $modal.find('#' + type + '-tab-content')
           $content.empty()
 
@@ -343,7 +346,7 @@ export const Program = function (projectId, csrfToken, userRole, myProgram, stat
         $('#project-reactions-spinner').addClass('d-none')
         $('#project-reactions-spinner-small').addClass('d-none')
 
-        $modal.modal('show')
+        bootstrapModal.show()
       }).fail(function (jqXHR, textStatus, errorThrown) {
       $('#project-reactions-spinner').hide()
       $('#project-reactions-spinner-small').hide()

assets/js/index.js

@@ -5,9 +5,6 @@ import { ProjectList } from './components/project_list'
 require('../styles/index.scss')
 
 $(() => {
-  const lazyLoadYoutubeVideo = require('./components/lazy_load_youtube_video')
-  lazyLoadYoutubeVideo('youtube-index')
-
   initHomeProjects()
 
   const $oauthGreeting = $('.js-oauth-greeting')

assets/js/notifications_overview.js

@@ -214,12 +214,12 @@ class UserNotifications {
     const notificationId = idPrefix + fetched.id
     let notificationDot = ''
     if (!fetched.seen) {
-      notificationDot = '<div class="my-auto mark-as-read">' +
+      notificationDot = '<div class="col-2 my-auto mark-as-read">' +
         '<span class="dot">' + '</span>' + '</div>'
     }
     const notificationBody = '<div id="' + notificationId + '" class="row my-3 no-gutters ripple notif">' +
-      '<div class="col-2 col-sm-1 my-auto">' + imgLeft + '</div>' +
-      '<div class="col-8 col-sm-8 pl-3 my-auto">' + msg + '</div>' + notificationDot + '</div>'
+      '<div class="col-2 my-auto">' + imgLeft + '</div>' +
+      '<div class="col-8 ps-3 my-auto">' + msg + '</div>' + notificationDot + '</div>'
     $container.append(notificationBody)
   }
 

assets/js/project.js

@@ -8,7 +8,6 @@ import { shareProject } from './custom/ProgramShare'
 import { ProgramReport } from './custom/ProgramReport'
 
 require('../styles/custom/profile.scss')
-require('../styles/custom/card.scss')
 require('../styles/custom/modal.scss')
 require('../styles/custom/program.scss')
 

assets/styles/base/bootstrap_overwrite.scss

@@ -59,8 +59,24 @@
   }
 }
 
+a {
+  text-decoration: none;
+}
+
+.btn-block {
+  // removed in bootstrap 5
+  --deprecated: "WARNING: deprecated, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples: https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons";
+  display: block;
+  width: 100%;
+}
+.btn-block + .btn-block {
+  // removed in bootstrap 5
+  --deprecated: "WARNING: deprecated, wrap your buttons with .d-grid and a .gap-* utility to space them as needed. Switch to responsive classes for even more control over them. Read the docs for some examples: https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons";
+  margin-top: 0.5rem;
+}
+
 /* stylelint-disable */
-.badge-primary {
+.bg-primary {
   background-color: var(--primary) !important;
   &:hover {
     background-color: custom-darken(--color-primary, 7.5) !important;
@@ -77,4 +93,4 @@
     background-color: var(--primary) !important;
   }
 }
-/* stylelint-enable */
+/* stylelint-enable */

assets/styles/custom/card.scss → assets/styles/components/catblocks_code_view.scss

@@ -1,4 +1,5 @@
 @import "../base/variables";
+@import "../../catblocks/main.css";
 
 // Bootstrap extending CSS
 

assets/styles/components/code_statistics.scss

@@ -0,0 +1,12 @@
+
+.accordion-button:not(.collapsed) {
+  color: var(--primary);
+  background-color: transparent;
+}
+
+.accordion-body {
+  padding: 0;
+  .table {
+    margin: 0;
+  }
+}

assets/styles/components/featured_slider.scss

@@ -18,11 +18,11 @@ $carousel-indicator-margin: 0.2em;
 .carousel-control {
   font-size: $carousel-control-size;
 
-  @include media-breakpoint-between(sm, md) {
+  @include media-breakpoint-between(sm, lg) {
     font-size: math.div($carousel-control-size, 1.3);
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     font-size: math.div($carousel-control-size, 1.6);
   }
 }

assets/styles/components/project_list.scss

@@ -54,7 +54,7 @@ $container-padding: 1rem;
       &__text {
         padding-right: 0.5rem;
         font-size: 0.95rem;
-        @include media-breakpoint-down(xs) {
+        @include media-breakpoint-down(sm) {
           display: none;
         }
       }
@@ -128,6 +128,7 @@ $container-padding: 1rem;
       width: 25vw;
       max-width: $max-project-thumb-size;
       margin-right: 1.5rem;
+      text-decoration: none;
 
       @include media-breakpoint-up(md) {
         width: 10vw;
@@ -178,6 +179,7 @@ $container-padding: 1rem;
       grid-template-rows: max-content auto;
       gap: 0.3rem 1rem;
       grid-template-areas: "image name" "image property";
+      text-decoration: none;
 
       &__image {
         grid-area: image;
@@ -219,7 +221,7 @@ $container-padding: 1rem;
 
     $default-opacity: 0.3;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       display: none;
     }
 

assets/styles/components/welcome_section.scss

@@ -1,74 +1,17 @@
 #welcome-section {
   margin-bottom: 2.5rem;
 
-  iframe {
-    height: 100%;
-  }
-
-  #welcome-section__google-play li:nth-child(1)::before {
-    content: url("../../images/social/google_playstore.png") " ";
-  }
-
-  .youtube {
+  .video-container {
     position: relative;
-    min-width: 300px;
-    height: 92.5%;
-    min-height: 250px;
-    padding-top: 56.25%;
-    overflow: hidden;
-    cursor: pointer;
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 */
     background-color: #000;
   }
-
-  .youtube-img {
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    opacity: 0.7;
-    transform: translate(-50%, -50%);
-  }
-  .youtube .play-button {
-    z-index: 1;
-    width: 90px;
-    height: 60px;
-    background-color: #333;
-    border-radius: 6px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
-    opacity: 0.8;
-  }
-  .youtube .play-button::before {
-    content: "";
-    border-color: transparent transparent transparent #fff;
-    border-style: solid;
-    border-width: 15px 0 15px 26px;
-  }
-  .youtube img,
-  .youtube .play-button {
-    cursor: pointer;
-  }
-  .youtube img,
-  .youtube iframe,
-  .youtube .play-button,
-  .youtube .play-button::before {
-    position: absolute;
-  }
-  .youtube .play-button,
-  .youtube .play-button::before {
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-
-  .youtube .play-button:hover {
-    background-color: #f00;
-  }
-
-  .youtube iframe {
+  .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
-
 }

assets/styles/custom/medialib.scss

@@ -47,6 +47,12 @@ $border-spacing: 8px;
       border-radius: 5px;
       transition: border 0.5s;
 
+      &:hover
+      {
+        background: rgba(200, 200, 200, 0.1);
+        box-shadow: 0 0 0 0.2rem custom-alpha(--color-primary, 0.1) !important;
+      }
+
       .checkbox
       {
         position: absolute;