Change partners location

This commit is contained in:
2025-10-22 11:36:25 +13:00
parent 9ca94eeb42
commit 63cc7cf460

View File

@ -90,40 +90,26 @@
<div class="max-w-7xl mx-auto px-4"> <div class="max-w-7xl mx-auto px-4">
<h2 class="h2 font-bold text-left mb-8">Community Updates</h2> <h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
<div id="community-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div id="community-news-container" class="flex gap-4 justify-center">
<!-- News cards will be populated here --> <!-- News cards will be populated here -->
<div id="loading" class="col-span-full flex justify-center"> <div id="loading" class="flex justify-center w-full">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
</div> </div>
<!-- Fallback for discourse widget --> <div class="text-right mt-6">
<div class="hidden"> <a href="https://community.envipath.org/c/announcements/10" target="_blank" class="btn btn-ghost btn-sm">
<d-topics-list discourse-url="https://community.envipath.org" Read More Announcements
per-page="10" </a>
category="10"
template="complete"
id="discourse-topics">
</d-topics-list>
</div> </div>
<!-- Discourse API integration -->
<script src="{% static 'js/discourse-api.js' %}"></script>
</div> </div>
</section> </section>
<!-- Partners Section -->
<section class="py-14 sm:py-12 from-base-200 to-base-100 bg-gradient-to-b">
<div class="mx-auto px-6 lg:px-8">
<div class="divider"><h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2></div>
<div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<img src="{% static "/images/uoa-logo-small.png" %}" alt="The University of Auckland" class=" max-h-20 w-full object-contain lg:col-span-1" />
<img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
<img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
</div>
</div>
</section>
<!-- Mission Statement Section --> <!-- Mission Statement Section -->
<section class="py-16 bg-base-100"> <section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
<div class="mx-auto px-8 md:px-12"> <div class="mx-auto px-8 md:px-12">
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
<div class="w-1/3"> <div class="w-1/3">
@ -150,58 +136,81 @@
</div> </div>
</section> </section>
<!-- Partners Section -->
<section class="py-14 sm:py-12 bg-base-100">
<div class="mx-auto px-6 lg:px-8">
<div class="divider"><h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2></div>
<div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<img src="{% static "/images/uoa-logo-small.png" %}" alt="The University of Auckland" class=" max-h-20 w-full object-contain lg:col-span-1" />
<img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
<img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
</div>
</div>
</section>
</div> </div>
<script language="javascript"> <script language="javascript">
var currentPackage = "{{ meta.current_package.url }}"; var currentPackage = "{{ meta.current_package.url }}";
// Process discourse topics into individual cards // Discourse API integration is now handled by discourse-api.js
function processDiscourseTopics(retryCount = 0) {
setTimeout(function() {
const topicsList = $('#discourse-topics');
if (topicsList.length && topicsList.find('li').length > 0) {
$('#loading').hide();
topicsList.find('li').each(function(index) { // Function to render Discourse topics into cards
if (index >= 6) return false; // Limit to 6 cards function renderDiscourseTopics(topics) {
const container = document.getElementById('community-news-container');
if (!container) return;
const $item = $(this); // Clear container
const $link = $item.find('a').first(); container.innerHTML = '';
const title = $link.text().trim();
const url = $link.attr('href');
const excerpt = $item.find('.topic-excerpt').text().trim() || 'Click to read more...';
const card = ` // Create cards for each topic
<div class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300"> topics.forEach(topic => {
<div class="card-body"> const card = createDiscourseCard(topic);
<h3 class="card-title text-lg line-clamp-2"> container.insertAdjacentHTML('beforeend', card);
<a href="${url}" target="_blank" class="hover:text-primary"> });
${title} }
</a>
</h3> // Function to create HTML card for a topic
<p class="text-gray-600 line-clamp-3">${excerpt}</p> function createDiscourseCard(topic) {
<div class="card-actions justify-end mt-4"> const date = new Date(topic.created_at).toLocaleDateString();
<a href="${url}" target="_blank" class="btn btn-sm btn-primary">
Read More return `
</a> <div class="card bg-white shadow-xs hover:shadow-lg transition-shadow duration-300 h-64 w-75 flex-shrink-0">
<div class="card-body flex flex-col h-full">
<h3 class="card-title leading-tight font-normal tracking-tight h-12 mb-2 line-clamp-2 text-ellipsis wrap-break-word overflow-hidden">
<a href="${topic.url}" target="_blank" class="hover:text-primary">
${topic.title}
</a>
</h3>
<p class="text-sm line-clamp-4 mb-2 h-20 text-ellipsis wrap-break-word overflow-hidden">${topic.excerpt}</p>
<div class="flex flex-row items-center justify-between">
<div class="flex items-center gap-2">
<div class="avatar tooltip tooltip-right" data-tip="${topic.author}">
<div class="w-8 rounded-full">
<img src="${topic.author_avatar}" alt="${topic.author}" />
</div> </div>
</div> </div>
<span class="text-xs text-gray-500">${date}</span>
</div> </div>
`; <a href="${topic.url}" target="_blank" class="btn btn-ghost text-neutral-500 rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
$('#community-news-container').append(card); <path d="M12 7v14"/>
}); <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
} else { </svg>
// Retry if not loaded yet </a>
if (retryCount < 10) { </div>
processDiscourseTopics(retryCount + 1); </div>
} else { </div>
$('#loading').html('<p class="text-neutral">No updates found. Head over to the <a href="https://community.envipath.org" target="_blank" class="link link-primary">community</a> to see the latest discussions.</p>'); `;
}
}
}, 500);
} }
// Make render function globally available
window.renderDiscourseTopics = renderDiscourseTopics;
// Toggle functionality with smooth animations // Toggle functionality with smooth animations
function toggleInputMode() { function toggleInputMode() {
const toggle = $('input[type="checkbox"]'); const toggle = $('input[type="checkbox"]');
@ -311,8 +320,7 @@
this.submit(); this.submit();
}); });
// Process discourse topics into cards // Discourse topics are now loaded automatically by discourse-api.js
processDiscourseTopics();
}); });
</script> </script>
{% endblock main_content %} {% endblock main_content %}