gitea_admin/Styleguide
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace inline notification toggle style with class-based state

Browse Source
This commit is contained in:
gitea_admin committed 2026-05-28 11:18:55 +02:00
1 parent 2792ef6fb3
commit 5bdd228f7e
2 files changed
+10 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

patterns/vsf-list-detailseite.html
+6 -5
View File
@@ -114,7 +114,7 @@
<button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
Meldungen ausblenden
</button>
<article class="sg-card" data-component="notification-card" data-component-context="group-card">
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
@@ -125,7 +125,7 @@
</div>
</article>
<article class="sg-card" data-component="notification-card" data-component-context="group-card">
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
@@ -136,7 +136,7 @@
</div>
</article>
<article class="sg-card sg-card--notification-white" data-component="notification-card" data-component-context="group-card">
<article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
@@ -331,12 +331,13 @@
return;
}
const cards = groupCard.querySelectorAll('[data-component="notification-card"]');
const cards = groupCard.querySelectorAll('.sg-vsf-list-detail-page__notification-card');
const isExpanded = button.getAttribute('aria-expanded') === 'true';
const nextExpanded = !isExpanded;
cards.forEach((card) => {
card.style.display = nextExpanded ? '' : 'none';
card.classList.toggle('sg-vsf-list-detail-page__notification-card--hidden', !nextExpanded);
card.setAttribute('aria-hidden', String(!nextExpanded));
});
button.setAttribute('aria-expanded', String(nextExpanded));
styles/33-layouts-vsf-list-detailseite.css
+4
View File
@@ -64,6 +64,10 @@
width: 100%;
}
.sg-vsf-list-detail-page__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
display: none;
}
.sg-vsf-list-detail-page__mobile-toggle {
display: none;
}