From c3b0248df8338a2cfd144bbd7c057e760a48c4fe Mon Sep 17 00:00:00 2001 From: Victor Phan Date: Thu, 30 Jul 2026 09:52:08 +0700 Subject: [PATCH] feat: replace hero video fallback shortcode with dynamic Swiper slider and enable observer settings for swiper instances --- .../.temp/snippets/content-top.html | 212 ++++++++++-------- .../html_snippets/content_main_blocks/temp | 2 +- .../html_snippets/content_main_blocks/temp_2 | 31 ++- .../swiperslider/SwiperSliderPlugin.java | 7 + .../src/main/resources/static/css/custom.css | 4 + .../src/main/resources/static/js/main.js | 2 + .../templates/themes/umass/content-top.html | 40 +++- .../themes/umass/snippets/content-top.html | 25 ++- 8 files changed, 216 insertions(+), 107 deletions(-) diff --git a/sisvietnamvn_main/.temp/snippets/content-top.html b/sisvietnamvn_main/.temp/snippets/content-top.html index e38feb93..9d666ecb 100644 --- a/sisvietnamvn_main/.temp/snippets/content-top.html +++ b/sisvietnamvn_main/.temp/snippets/content-top.html @@ -1,56 +1,67 @@
-
-
-
-
-
-
-
- +
+
+
+
+
+
+ Students collaborate using a driving simulator in the UMass Center for Transportation. -
- -
+
+ +
- + - -
-
- - -
-
-
-
-
-

- Stroke International School - 2026. -

-
- - Learn More - -
- -
-
-
-
+
+
+
+
+

+ Stroke International School 2026. +

+
+ + Learn More + +
+ +
+
+
+
-
\ No newline at end of file +
+
diff --git a/sisvietnamvn_main/html_snippets/content_main_blocks/temp b/sisvietnamvn_main/html_snippets/content_main_blocks/temp index 1dc128ab..cd2fdc3a 100644 --- a/sisvietnamvn_main/html_snippets/content_main_blocks/temp +++ b/sisvietnamvn_main/html_snippets/content_main_blocks/temp @@ -9,7 +9,7 @@
- {{title}} + {{title}}
diff --git a/sisvietnamvn_main/html_snippets/content_main_blocks/temp_2 b/sisvietnamvn_main/html_snippets/content_main_blocks/temp_2 index 8498e6dd..43cf9688 100644 --- a/sisvietnamvn_main/html_snippets/content_main_blocks/temp_2 +++ b/sisvietnamvn_main/html_snippets/content_main_blocks/temp_2 @@ -1 +1,30 @@ -
TTTên bàiMục tiêu bài họcSố tiết học
Tổn
g số		Lý
thuyế
t		Thực hành
LabBuồn
g
bệnh
01Bức xạ tia x- Trình bày được đơn vị đo bức xạ
tia X, thực hiện đúng quy định kỹ
thuật an toàn bức xạ tia X.
- Mô tả chính xác phương pháp đo
bức xạ tia X.		120210
02Nguyên lý tạo hình
ảnh trên dsa và an toàn
bức xạ tia x		- Mô tả được nguyên lý tạo hình
ảnh trên DSA.
- Vận dụng được các nguyên tắc
an toàn bức xạ tia X.		220220
03Thuốc cản quang trong
can thiệp nội mạch		- Phân biệt được các nhóm thuốc
cản quang hiện nay.
- Áp dụng đúng liều lượng thuốc
cản quang trong can thiệp nội
mạch, các phản ứng bất lợi của
thuốc cản quang và xử trí.		220220
04Bệnh thận do thuốc
cản quang		- Trình bày tiêu chuẩn chẩn
đoán của bệnh thận do thuốc cản
quang (CIN)
- Giải thích chính xác cơ chế
bệnh sinh của CIN
Đánh giá được nguy cơ và xây dựng
cách phòng ngừa CIN.		42022020
05Hình ảnh Giải phẫu
học của gan		- Trình bày được giải phẩu các
phân thùy gan, các cấu trúc cố
định gan và liên quan của gan với
các tạng xung quanh.		240420
\ No newline at end of file +
+
+ +
+
+
ts-bs_tran_chi_cuong_giam_doc_chuyen_mon_benh_vien_da_khoa_quoc_te_s-i-s_can_tho_nguoi_truc_tiep_thuc_hien_can_thiep.jpg
e-kip_se_vua_tien_hanh_can_thiep_vua_trao_doi_va_thao_luan_truc_tiep_voi_cac_chuyen_gia_tai_hoi_nghi.jpg
00001_backup.jpg
benh-vien-2-8570.jpg
+
+
+ +
+ + +
\ No newline at end of file diff --git a/sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/plugins/swiperslider/SwiperSliderPlugin.java b/sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/plugins/swiperslider/SwiperSliderPlugin.java index b7c3902b..99bd70ee 100644 --- a/sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/plugins/swiperslider/SwiperSliderPlugin.java +++ b/sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/plugins/swiperslider/SwiperSliderPlugin.java @@ -367,6 +367,13 @@ document.addEventListener("DOMContentLoaded", function() { new Swiper('.swiper-{{slug}}', { slidesPerView: 'auto', spaceBetween: 16, + observer: true, + observeParents: true, + autoplay: { + delay: 3500, + disableOnInteraction: false, + pauseOnMouseEnter: true, + }, navigation: { nextEl: '.btn-navigation-{{slug}}-next', prevEl: '.btn-navigation-{{slug}}-prev', diff --git a/sisvietnamvn_main/src/main/resources/static/css/custom.css b/sisvietnamvn_main/src/main/resources/static/css/custom.css index c2c305c8..6dd0665d 100644 --- a/sisvietnamvn_main/src/main/resources/static/css/custom.css +++ b/sisvietnamvn_main/src/main/resources/static/css/custom.css @@ -1430,4 +1430,8 @@ figure.table table tr:hover { background-color: #f1f1f1 !important; color: #9b1b1b !important; transform: scale(1.08); +} + +.h-full { + height: 100%; } \ No newline at end of file diff --git a/sisvietnamvn_main/src/main/resources/static/js/main.js b/sisvietnamvn_main/src/main/resources/static/js/main.js index cd8d9f88..6ae6b255 100644 --- a/sisvietnamvn_main/src/main/resources/static/js/main.js +++ b/sisvietnamvn_main/src/main/resources/static/js/main.js @@ -9,6 +9,8 @@ document.addEventListener('DOMContentLoaded', function () { const courseSwiper = new Swiper('.courseSwiper', { loop: true, spaceBetween: 20, // Khoảng cách giữa các card + observer: true, + observeParents: true, autoplay: { delay: 3500, // Tự động trượt sau 3.5 giây disableOnInteraction: false, diff --git a/sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html b/sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html index 282865c2..a8072cc9 100644 --- a/sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html +++ b/sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html @@ -20,6 +20,14 @@ } /* Desktop/Tablet: Video most, Slide second, Image last */ @media (min-width: 769px) { + .image-video-container { + display: grid; + grid-template-rows: 100%; + } + .image-video-container > * { + grid-column: 1; + grid-row: 1; + } .image-video-container > img { z-index: 1 !important; width: 100%; @@ -29,12 +37,9 @@ #hero-video-fallback { z-index: 2 !important; } - #hero-ambient-video { + /* #hero-ambient-video { z-index: 3 !important; - } - .content-top .text-container.centered { - z-index: 4 !important; - } + } */ video#hero-video { width: 100%; height: 100%; @@ -69,8 +74,29 @@ id="hero-video-fallback" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2" > - - +
+
+ + +
+
+ +