forked from enviPath/enviPy
Change partners location
This commit is contained in:
@ -90,40 +90,26 @@
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<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 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fallback for discourse widget -->
|
||||
<div class="hidden">
|
||||
<d-topics-list discourse-url="https://community.envipath.org"
|
||||
per-page="10"
|
||||
category="10"
|
||||
template="complete"
|
||||
id="discourse-topics">
|
||||
</d-topics-list>
|
||||
<div class="text-right mt-6">
|
||||
<a href="https://community.envipath.org/c/announcements/10" target="_blank" class="btn btn-ghost btn-sm">
|
||||
Read More Announcements
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Discourse API integration -->
|
||||
<script src="{% static 'js/discourse-api.js' %}"></script>
|
||||
</div>
|
||||
</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 -->
|
||||
<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="flex flex-row gap-4">
|
||||
<div class="w-1/3">
|
||||
@ -150,58 +136,81 @@
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<script language="javascript">
|
||||
var currentPackage = "{{ meta.current_package.url }}";
|
||||
|
||||
// Process discourse topics into individual cards
|
||||
function processDiscourseTopics(retryCount = 0) {
|
||||
setTimeout(function() {
|
||||
const topicsList = $('#discourse-topics');
|
||||
if (topicsList.length && topicsList.find('li').length > 0) {
|
||||
$('#loading').hide();
|
||||
// Discourse API integration is now handled by discourse-api.js
|
||||
|
||||
topicsList.find('li').each(function(index) {
|
||||
if (index >= 6) return false; // Limit to 6 cards
|
||||
// Function to render Discourse topics into cards
|
||||
function renderDiscourseTopics(topics) {
|
||||
const container = document.getElementById('community-news-container');
|
||||
if (!container) return;
|
||||
|
||||
const $item = $(this);
|
||||
const $link = $item.find('a').first();
|
||||
const title = $link.text().trim();
|
||||
const url = $link.attr('href');
|
||||
const excerpt = $item.find('.topic-excerpt').text().trim() || 'Click to read more...';
|
||||
// Clear container
|
||||
container.innerHTML = '';
|
||||
|
||||
const card = `
|
||||
<div class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg line-clamp-2">
|
||||
<a href="${url}" target="_blank" class="hover:text-primary">
|
||||
${title}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-gray-600 line-clamp-3">${excerpt}</p>
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<a href="${url}" target="_blank" class="btn btn-sm btn-primary">
|
||||
Read More
|
||||
</a>
|
||||
// Create cards for each topic
|
||||
topics.forEach(topic => {
|
||||
const card = createDiscourseCard(topic);
|
||||
container.insertAdjacentHTML('beforeend', card);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to create HTML card for a topic
|
||||
function createDiscourseCard(topic) {
|
||||
const date = new Date(topic.created_at).toLocaleDateString();
|
||||
|
||||
return `
|
||||
<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>
|
||||
<span class="text-xs text-gray-500">${date}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
$('#community-news-container').append(card);
|
||||
});
|
||||
} else {
|
||||
// Retry if not loaded yet
|
||||
if (retryCount < 10) {
|
||||
processDiscourseTopics(retryCount + 1);
|
||||
} else {
|
||||
$('#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);
|
||||
<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">
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Make render function globally available
|
||||
window.renderDiscourseTopics = renderDiscourseTopics;
|
||||
|
||||
// Toggle functionality with smooth animations
|
||||
function toggleInputMode() {
|
||||
const toggle = $('input[type="checkbox"]');
|
||||
@ -311,8 +320,7 @@
|
||||
this.submit();
|
||||
});
|
||||
|
||||
// Process discourse topics into cards
|
||||
processDiscourseTopics();
|
||||
// Discourse topics are now loaded automatically by discourse-api.js
|
||||
});
|
||||
</script>
|
||||
{% endblock main_content %}
|
||||
|
||||
Reference in New Issue
Block a user