mirror/kirche-im-netz.Startodon-Hub
1
0
Fork 1
mirror of https://codeberg.org/kirche-im-netz/Startodon-Hub.git synced 2025-08-28 13:58:14 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

StarterKit-Kachel überarbeitet

Browse source
This commit is contained in:
Alexander Müller 2024-12-12 22:30:51 +01:00
parent 47a7072961
commit b9763e4365
3 changed files with 23 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/template/template.html
View file

@ -4,7 +4,7 @@
<p></p> <p></p>
<div class="starterkit-footer"> <div class="starterkit-footer">
<div class="profile-count"> <div class="profile-count">
<span class="profile-line1"></span><br> <span class="profile-line1">Accounts</span><br>
<span class="profile-line2"></span> <span class="profile-line2"></span>
</div> </div>
<div class="autor"> <div class="autor">

3
src/utils/starterkit-utils.js
View file

@ -4,13 +4,13 @@ import { createRecommendationPopup } from './popup-utils.js';
export function createStarterKitElement(kit) { export function createStarterKitElement(kit) {
const template = document.getElementById('starterkit-template').content.cloneNode(true); const template = document.getElementById('starterkit-template').content.cloneNode(true);
// Titel und Beschreibung
const kitElement = template.querySelector('.starterkit'); const kitElement = template.querySelector('.starterkit');
kitElement.querySelector('h3').textContent = kit.name; kitElement.querySelector('h3').textContent = kit.name;
kitElement.querySelector('p').textContent = kit.description; kitElement.querySelector('p').textContent = kit.description;
// Aufteilen der Profilanzahl in zwei Zeilen // Aufteilen der Profilanzahl in zwei Zeilen
const profileCount = kitElement.querySelector('.profile-count'); const profileCount = kitElement.querySelector('.profile-count');
profileCount.querySelector('.profile-line1').textContent = `Accounts`;
profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`; profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`;
// Hinzufügen des Autors mit 'created by' // Hinzufügen des Autors mit 'created by'
@ -20,6 +20,7 @@ export function createStarterKitElement(kit) {
fetchProfile(kit.author, { updateElement: authorLink }).then(() => { fetchProfile(kit.author, { updateElement: authorLink }).then(() => {
const avatarImage = authorLink.querySelector('.account-avatar'); const avatarImage = authorLink.querySelector('.account-avatar');
if (avatarImage) { if (avatarImage) {
authorLink.textContent = '';
authorLink.appendChild(avatarImage); authorLink.appendChild(avatarImage);
} }
}); });

25
style.css
View file

@ -169,18 +169,19 @@ section {
.starterkit { .starterkit {
background-color: var(--secondary-background-color); background-color: var(--secondary-background-color);
border: 1px solid var(--secondary-background-color);
border-radius: 15px; border-radius: 15px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
min-height: 200px; min-height: 170px;
padding-bottom: 50px; padding-bottom: 65px;
} }
.starterkit:hover { .starterkit:hover {
transform: translateY(-5px); border: 1px solid var(--primary-color-hover);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
} }
@ -193,7 +194,8 @@ section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 15px; padding: 10px;
padding-top: 5px;
margin: 0 15px; margin: 0 15px;
font-size: 0.85rem; font-size: 0.85rem;
color: #aaa; color: #aaa;
@ -202,18 +204,31 @@ section {
border-radius: 0 0 15px 15px; /* Runde Ecken unten */ border-radius: 0 0 15px 15px; /* Runde Ecken unten */
} }
.starterkit h3 {
margin: 5px;
}
.starterkit p {
margin: 5px;
font-size: 0.9rem;
color: #ccc;
}
.profile-count { .profile-count {
font-size: 0.9rem; font-size: 0.9rem;
color: #ccc; color: #ccc;
text-align: center; text-align: center;
} }
.profile-line1 {
font-size: 0.75rem;
}
.autor { .autor {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
text-align: left; text-align: left;
margin-top: 10px;
} }
.autor-text { .autor-text {