feat: update footer hospital information, adjust CSS breakpoints, and reorganize main content blocks with new news and events sections.
This commit is contained in:
+27
-34
@@ -1,35 +1,28 @@
|
||||
<body>
|
||||
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default">
|
||||
<div class="container">
|
||||
<div class="text-container">
|
||||
<div data-component-id="umass_base:section-title" class="f--section-title">
|
||||
<h2>TÌM HIỂU<span class="highlight">KHOA ĐIỀU TRỊ</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-container">
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/admissions/apply" class="button-text-link button-context-light " aria-label="Apply" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Apply </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-light " aria-label="Majors & Minors" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Majors & Minors </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid" class="button-text-link button-context-light " aria-label="Tuition & Costs" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Tuition & Costs </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="f--field f--button">
|
||||
<a href="https://www.umass.edu/admissions/visit" class="button-text-link button-context-light " aria-label="Take a Tour" target="_self" data-component-id="umass_base:button">
|
||||
<span class="button-text"> Take a Tour </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
|
||||
<div class="container" th:unless="${ctaMenu != null and not #lists.isEmpty(ctaMenu.items)}">
|
||||
<div class="text-container">
|
||||
<div data-component-id="umass_base:section-title" class="f--section-title">
|
||||
<h2>TÌM HIỂU<span class="highlight">CHUYÊN KHOA</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="links-container">
|
||||
[menu:CTA]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.links-container {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.links-container {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,115 +1,142 @@
|
||||
<style>
|
||||
.education-slider-wrapper {
|
||||
position: relative;
|
||||
padding: 0 30px; /* Space for buttons */
|
||||
}
|
||||
.education-slider-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.education-slider-wrapper .news-grid,
|
||||
.education-slider-wrapper .row,
|
||||
.education-slider-track {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 20px;
|
||||
margin: 0 !important;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
/* Force children to be fixed width cards */
|
||||
.education-slider-wrapper .news-grid > *,
|
||||
.education-slider-wrapper .row > *,
|
||||
.education-slider-track > * {
|
||||
flex: 0 0 calc(33.333% - 14px) !important; /* show 3 cards at a time */
|
||||
max-width: none !important;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.education-slider-wrapper .news-grid > *,
|
||||
.education-slider-wrapper .row > *,
|
||||
.education-slider-track > * {
|
||||
flex: 0 0 calc(50% - 10px) !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.education-slider-wrapper .news-grid > *,
|
||||
.education-slider-wrapper .row > *,
|
||||
.education-slider-track > * {
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
<div class="cc--component-container cc--news-events">
|
||||
<div class="c--component c--news-events">
|
||||
|
||||
.edu-slider-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(200,200,200,0.5); /* mờ / transparent */
|
||||
color: #333;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
.edu-slider-btn:hover {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
color: #fff;
|
||||
}
|
||||
.edu-slider-btn.prev-btn {
|
||||
left: -10px;
|
||||
}
|
||||
.edu-slider-btn.next-btn {
|
||||
right: -10px;
|
||||
}
|
||||
.edu-slider-btn:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="cc--component-container cc--news-events">
|
||||
<div class="c--component c--news-events"><!-- Header -->
|
||||
<div class="news-events-row">
|
||||
<div class="education-column news-column" style="width: 100%;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--color-brand); margin-bottom: 16px;">
|
||||
<!-- Thêm flex-grow: 1 vào style của h2 -->
|
||||
<h2 class="section-title--news" style="font-size: 2rem; margin: 0; padding-bottom: 4px; border-bottom: unset;">ĐÀO TẠO</h2>
|
||||
<a href="/news/education" class="news-events-section__cta news-events-section__cta--desktop" style="color: var(--color-brand); font-weight: 800; font-size: 16px; text-transform: uppercase; text-decoration: none; border-bottom: unset;">XEM THÊM</a>
|
||||
</div>
|
||||
<div class="news-list education-slider-wrapper" style="padding-right: 0;">
|
||||
<button class="edu-slider-btn prev-btn" aria-label="Previous">‹</button>
|
||||
<div class="education-slider-container">
|
||||
<div class="education-slider-track">
|
||||
[component:news-grid data-source="posts:tag=education,limit=5,collection=news_posts"]
|
||||
</div>
|
||||
</div>
|
||||
<button class="edu-slider-btn next-btn" aria-label="Next">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- Mobile Footer CTA -->
|
||||
<div class="news-events-section__footer"><a href="/news/education" class="news-events-section__cta news-events-section__cta--mobile">Xem Thêm</a></div>
|
||||
<!-- Phần 2 cột: Tin mới (Trái) và Sự kiện (Phải) -->
|
||||
<div class="news-events-row">
|
||||
|
||||
<div class="news-column">
|
||||
<h2 class="section-title--news" style="font-size: 2rem;">
|
||||
TIN TỨC MỚI
|
||||
</h2>
|
||||
<div class="news-slider-wrapper">
|
||||
<button class="news-slider-btn prev-btn" aria-label="Previous">‹</button>
|
||||
<div class="news-slider-container">
|
||||
<div class="news-slider-track">
|
||||
<!-- Shortcode Tin Tức hiển thị dạng list (limit tăng lên 6 để có thể trượt) -->
|
||||
[component:news-grid data-source="posts:tag=news,limit=6,collection=news_posts"]
|
||||
</div>
|
||||
</div>
|
||||
<button class="news-slider-btn next-btn" aria-label="Next">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="events-column">
|
||||
<h2 class="events-title" style="font-size: 2rem;">
|
||||
SỰ KIỆN
|
||||
</h2>
|
||||
<div class="events-widget">
|
||||
<!-- Shortcode Sự kiện -->
|
||||
[component:events-list data-source="posts:tag=event,limit=4,collection=event_posts"]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!-- Header chung (Mobile) -->
|
||||
<div class="news-events-section__footer">
|
||||
<a href="/news/news-events" class="news-events-section__cta news-events-section__cta--mobile">
|
||||
Xem Thêm
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.news-slider-wrapper {
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.news-slider-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.news-slider-wrapper .news-grid,
|
||||
.news-slider-wrapper .row,
|
||||
.news-slider-track {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
gap: 20px;
|
||||
margin: 0 !important;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
/* Force children to be fixed width cards - 2 cards at a time because this column is narrow */
|
||||
.news-slider-wrapper .news-grid > *,
|
||||
.news-slider-wrapper .row > *,
|
||||
.news-slider-track > * {
|
||||
flex: 0 0 calc(50% - 10px) !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.news-slider-wrapper .news-grid > *,
|
||||
.news-slider-wrapper .row > *,
|
||||
.news-slider-track > * {
|
||||
flex: 0 0 calc(50% - 10px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.news-slider-wrapper .news-grid > *,
|
||||
.news-slider-wrapper .row > *,
|
||||
.news-slider-track > * {
|
||||
flex: 0 0 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.news-slider-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(200, 200, 200, 0.5);
|
||||
color: #333;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.news-slider-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.news-slider-btn.prev-btn {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.news-slider-btn.next-btn {
|
||||
right: -15px;
|
||||
}
|
||||
|
||||
.news-slider-btn:disabled {
|
||||
opacity: 0.2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const wrappers = document.querySelectorAll('.education-slider-wrapper');
|
||||
const wrappers = document.querySelectorAll('.news-slider-wrapper');
|
||||
wrappers.forEach(wrapper => {
|
||||
const prevBtn = wrapper.querySelector('.prev-btn');
|
||||
const nextBtn = wrapper.querySelector('.next-btn');
|
||||
|
||||
let track = wrapper.querySelector('.education-slider-track');
|
||||
let track = wrapper.querySelector('.news-slider-track');
|
||||
if (track && track.children.length === 1 && (track.children[0].classList.contains('news-grid') || track.children[0].classList.contains('row'))) {
|
||||
track = track.children[0];
|
||||
track.classList.add('education-slider-track');
|
||||
track.classList.add('news-slider-track');
|
||||
}
|
||||
|
||||
if (!track) return;
|
||||
@@ -124,7 +151,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
||||
track.style.transform = `translateX(-${currentIndex * (itemWidth + gap)}px)`;
|
||||
|
||||
const containerWidth = wrapper.querySelector('.education-slider-container').getBoundingClientRect().width;
|
||||
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
||||
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
||||
|
||||
prevBtn.disabled = currentIndex === 0;
|
||||
@@ -142,7 +169,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
const items = track.children;
|
||||
const itemWidth = items[0].getBoundingClientRect().width;
|
||||
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
||||
const containerWidth = wrapper.querySelector('.education-slider-container').getBoundingClientRect().width;
|
||||
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
||||
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
||||
|
||||
if (currentIndex < items.length - visibleCount) {
|
||||
@@ -156,7 +183,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
if(items.length === 0) return;
|
||||
const itemWidth = items[0].getBoundingClientRect().width;
|
||||
const gap = parseFloat(window.getComputedStyle(track).gap) || 20;
|
||||
const containerWidth = wrapper.querySelector('.education-slider-container').getBoundingClientRect().width;
|
||||
const containerWidth = wrapper.querySelector('.news-slider-container').getBoundingClientRect().width;
|
||||
const visibleCount = Math.max(1, Math.floor((containerWidth + gap) / (itemWidth + gap)));
|
||||
|
||||
if (currentIndex > items.length - visibleCount) {
|
||||
@@ -168,4 +195,4 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
setTimeout(updateSlider, 200);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user