basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: improve hero ambient video styling with responsive overrides and update security configuration to ignore static assets

Browse Source
This commit is contained in:
Victor Phan
2026-07-30 00:08:21 +07:00
parent 3396c87b92
commit f4d566a56d
4 changed files with 91 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/src/main/java/com/sisvietnamvn/web/config/SecurityConfiguration.java
+8
View File
@@ -45,6 +45,14 @@ public class SecurityConfiguration {
return new MessageDigestPasswordEncoder("SHA-256");
}
@Bean
public org.springframework.security.config.annotation.web.configuration.WebSecurityCustomizer webSecurityCustomizer() {
return (web) -> web.ignoring().requestMatchers(
"/css/**", "/images/**", "/js/**", "/vendor/**", "/fonts/**", "/login-assets/**",
"/uploads/**", "/upload/**", "/theme-assets/**", "/favicon.ico", "/favicons/**"
);
}
@Bean
public SecurityFilterChain filterChain(HttpSecurity http, CustomOidcUserService customOidcUserService) {
http.cors(withDefaults())
sisvietnamvn_main/src/main/resources/static/css/custom.css
+1 -3
View File
@@ -64,9 +64,7 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
========================================================================== */
/* --- Ambient Video --- */
.f--ambient-video {
position: relative;
}
.f--ambient-video::after {
content: "";
sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html
+40 -1
View File
@@ -5,6 +5,43 @@
<div class="cc--component-container cc--homepage-hero">
<div class="c--component c--homepage-hero">
<div class="slides-container">
<style>
/* Mobile: Image only */
@media (max-width: 768px) {
#hero-ambient-video,
#hero-video-fallback {
display: none !important;
}
.image-video-container > img {
display: block !important;
position: relative !important;
z-index: 1 !important;
}
}
/* Desktop/Tablet: Video most, Slide second, Image last */
@media (min-width: 769px) {
.image-video-container > img {
z-index: 1 !important;
width: 100%;
height: 100%;
object-fit: cover;
}
#hero-video-fallback {
z-index: 2 !important;
}
#hero-ambient-video {
z-index: 3 !important;
}
.content-top .text-container.centered {
z-index: 4 !important;
}
video#hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>
<div class="image-video-container has-video">
<img
src="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg"
@@ -32,11 +69,13 @@
id="hero-video-fallback"
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2"
>
<th:block th:utext="${videoFallbackHtml}"></th:block>
<th:block th:utext="${hookManager.applyFilters('the_content', '[plugin:swiper-slider slug=''video-fallback'']')}">
</th:block>
</div>
<script>
function handleVideoError() {
console.log('fall video');
var vidContainer = document.getElementById('hero-ambient-video');
if (vidContainer) vidContainer.style.display = 'none';
sisvietnamvn_main/src/main/resources/templates/themes/umass/snippets/content-top.html
+42
View File
@@ -5,6 +5,47 @@
<div class="cc--component-container cc--homepage-hero">
<div class="c--component c--homepage-hero">
<div class="slides-container">
<style>
/* Mobile: Image only */
@media (max-width: 768px) {
#hero-ambient-video,
#hero-video-fallback {
display: none !important;
}
.image-video-container > img {
display: block !important;
position: relative !important;
z-index: 1 !important;
}
}
/* Desktop/Tablet: Video most, Slide second, Image last */
@media (min-width: 769px) {
.image-video-container {
display: grid;
}
.image-video-container > * {
grid-column: 1;
grid-row: 1;
}
.image-video-container > img {
z-index: 1 !important;
width: 100%;
height: 100%;
object-fit: cover;
}
#hero-video-fallback {
z-index: 2 !important;
}
/* #hero-ambient-video {
z-index: 3 !important;
} */
video#hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>
<div class="image-video-container has-video">
<img
src="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg"
@@ -38,6 +79,7 @@
<script>
function handleVideoError() {
console.log('fall video');
var vidContainer = document.getElementById('hero-ambient-video');
if (vidContainer) vidContainer.style.display = 'none';