From d772bcf0343a0d4b3340a2ad959b27e10c3bef15 Mon Sep 17 00:00:00 2001
From: Hugo Delaunay <Skyost@users.noreply.github.com>
Date: Sat, 6 Jan 2024 15:27:23 +0100
Subject: [PATCH] Correction de bugs.

---
 components/Page/Carousel/Carousel.vue         |  4 ++--
 components/SmartBanner/SmartBanner.vue        | 24 -------------------
 components/SmartBanner/SmartBannerContent.vue | 22 +++++++++++++++++
 pages/cours/[level]/[lesson]/[[slug]].vue     |  9 +++++++
 plugins/bootstrap.client.ts                   |  9 ++++---
 5 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/components/Page/Carousel/Carousel.vue b/components/Page/Carousel/Carousel.vue
index 7d4e89804..7414e7b0b 100644
--- a/components/Page/Carousel/Carousel.vue
+++ b/components/Page/Carousel/Carousel.vue
@@ -56,9 +56,9 @@ const root = ref<HTMLDivElement>()
 onMounted(async () => {
   await nextTick()
   // @ts-ignore
-  const bootstrap = await import('bootstrap')
+  const Carousel = useNuxtApp().$bootstrap.carousel
   // eslint-disable-next-line
-  new bootstrap.Carousel(root.value)
+  new Carousel(root.value)
 })
 </script>
 
diff --git a/components/SmartBanner/SmartBanner.vue b/components/SmartBanner/SmartBanner.vue
index 1e043bd38..7c51a2bec 100644
--- a/components/SmartBanner/SmartBanner.vue
+++ b/components/SmartBanner/SmartBanner.vue
@@ -39,27 +39,3 @@ const onClose = () => {
     @close="onClose"
   />
 </template>
-
-<style lang="scss" scoped>
-.smartbanner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 4;
-  padding: 10px 20px;
-  max-height: 120px;
-
-  .smartbanner-close {
-    font-size: 20px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .info {
-    display: block;
-    width: 100%;
-  }
-}
-</style>
diff --git a/components/SmartBanner/SmartBannerContent.vue b/components/SmartBanner/SmartBannerContent.vue
index 5b1e99be0..bccb3f4c3 100644
--- a/components/SmartBanner/SmartBannerContent.vue
+++ b/components/SmartBanner/SmartBannerContent.vue
@@ -70,6 +70,28 @@ const onClose = () => {
 </template>
 
 <style lang="scss" scoped>
+.smartbanner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 4;
+  padding: 10px 20px;
+  max-height: 120px;
+
+  .smartbanner-close {
+    font-size: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .info {
+    display: block;
+    width: 100%;
+  }
+}
+
 .smartbanner-android {
   background: #3d3d3d url('data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7');
   color: white;
diff --git a/pages/cours/[level]/[lesson]/[[slug]].vue b/pages/cours/[level]/[lesson]/[[slug]].vue
index d949a4ca3..67ffa3159 100644
--- a/pages/cours/[level]/[lesson]/[[slug]].vue
+++ b/pages/cours/[level]/[lesson]/[[slug]].vue
@@ -91,6 +91,15 @@ if (!config.public.debug) {
 
 .page-header {
   padding: 50px 0;
+
+  @include media-breakpoint-down(md) {
+    padding: 30px 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 10px;
+    padding-bottom: 0;
+  }
 }
 
 .page-lesson {
diff --git a/plugins/bootstrap.client.ts b/plugins/bootstrap.client.ts
index bfec99eae..0bac5f2a1 100644
--- a/plugins/bootstrap.client.ts
+++ b/plugins/bootstrap.client.ts
@@ -2,13 +2,12 @@ import * as bootstrapCollapse from 'bootstrap/js/dist/collapse'
 import * as bootstrapModal from 'bootstrap/js/dist/modal'
 import * as bootstrapCarousel from 'bootstrap/js/dist/carousel'
 import * as bootstrapDropdown from 'bootstrap/js/dist/dropdown'
-import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.provide('bootstrap', {
-    ...bootstrapCollapse,
-    ...bootstrapModal,
-    ...bootstrapCarousel,
-    ...bootstrapDropdown
+    collapse: bootstrapCollapse,
+    modal: bootstrapModal,
+    carousel: bootstrapCarousel,
+    dropdown: bootstrapDropdown
   })
 })