Bug fixes and new styling for the news page

This commit is contained in:
Inga Kirschnick
2022-12-21 14:38:17 +01:00
parent c79bc1ed57
commit f5a1cf75dd
6 changed files with 59 additions and 43 deletions

View File

@ -44,24 +44,29 @@
</div>
<div class="col s12" id="social">
<h3>Social</h3>
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Other users and groups</span>
<p>Find other users and follow them to see their corpora and groups.</p>
<div class="public-user-list no-autoinit"></div>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Other users and groups</span>
<p>Find other users and follow them to see their corpora and groups.</p>
<div class="public-user-list no-autoinit"></div>
</div>
</div>
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Public corpora</span>
<p>Find public corpora</p>
</div>
<div class="card">
<div class="card-content">
<span class="card-title">Public corpora</span>
<p>Find public corpora</p>
</div>
</div>
</div>
<div class="fixed-action-btn direction-top active" style="bottom:45px; right:24px;">
<a id="news-feature-discovery" class="waves-effect waves-light btn btn-floating"><i class="material-icons">mail</i></a>
</div>
<div class="tap-target" data-target="news-feature-discovery" style="background-color:#1A5C89">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
</div>
</div>
{% endblock page_content %}

View File

@ -7,10 +7,9 @@
<div class="col s12">
<h1 id="title">{{ title }}</h1>
</div>
<div class="col s12">
<div id="aggregated-news"></div>
<div class="card" id="april-2022-update">
<div class="card-content">
<span class="card-title">April 2022 update</span>
@ -199,31 +198,44 @@
function mastodonStatusToHtml(status) {
return htmlString = `
<div class="card white-text" style="background-color:#5D50E7;">
<div class="card-content">
<span class="card-title">New Actitvity on Mastodon</span>
${status.content}
</div>
</div>
`.trim();
}
function bisBlogsEntryToHtml(entry) {
return `
<div class="row">
<div class="col s1">
<img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img">
</div>
<div class="col s11">
<div class="card" style="background-color: #14f5b4;">
<div class="card white-text" style="background-color:#5D50E7; border-radius:10px;">
<div class="card-content">
<span class="card-title">${entry.title['#text']}</span>
${entry.content['#text']}
<span class="card-title">New Actitvity on Mastodon</span>
${status.content}
</div>
</div>
</div>
</div>
<div class="col s1">
<img src="https://joinmastodon.org/logos/logo-purple.svg" alt="Mastodon" class="responsive-img hide-on-small-only" style="width:70%; margin-top:30px;">
</div>
`.trim();
}
function bisBlogsEntryToHtml(entry) {
let bisBlogHTMLElement = document.createElement('div');
bisBlogHTMLElement.classList.add('row');
bisBlogHTMLElement.innerHTML = `
<div class="row">
<div class="col s1">
<img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img hide-on-small-only" style="width:70%; margin-top:40px;">
</div>
<div class="col s11">
<div class="card" style="background-color: #A5BDCC; border-radius:10px;">
<div class="card-content">
<span class="card-title">${entry.title['#text']}</span>
${entry.content['#text']}
</div>
</div>
</div>
</div>
`.trim();
let bisBlogImages = bisBlogHTMLElement.querySelectorAll('img');
bisBlogImages.forEach((img) => {
img.classList.add('responsive-img');
});
return bisBlogHTMLElement.outerHTML;
}
let aggregatedNewsElement = document.querySelector('#aggregated-news');
aggregateNews().then((aggregatedNews) => {