Merge pull request #127 from DARC-e-V/feature--member-registration
Feature member registration
This commit is contained in:
Matthias Jung
@@ -0,0 +1,51 @@
|
||||
/* Minimal CSS for floating CTA positioning/animation only. Uses Bootstrap button styles. */
|
||||
|
||||
.darc-floating {
|
||||
position: fixed;
|
||||
bottom: 1.25rem;
|
||||
z-index: 9999;
|
||||
transform: translateY(140%);
|
||||
opacity: 0;
|
||||
transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
|
||||
}
|
||||
|
||||
.darc-floating--right { right: 1.25rem; }
|
||||
.darc-floating--left { left: 1.25rem; }
|
||||
|
||||
.darc-floating.is-visible {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.darc-floating[hidden] { display: none; }
|
||||
|
||||
.darc-floating__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.darc-floating__icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.darc-floating__icon svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
.darc-floating__close {
|
||||
min-width: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.darc-floating { left: 1rem; right: 1rem; }
|
||||
.darc-floating .btn-group { width: 100%; }
|
||||
.darc-floating .btn { flex: 1 1 auto; }
|
||||
.darc-floating__close { flex: 0 0 auto; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.darc-floating { transition: none; }
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* DARC Mitgliedsantrag – Floating CTA
|
||||
*
|
||||
* Blendet den mitlaufenden Button automatisch nach kurzer Verzögerung ein,
|
||||
* damit er auch auf großen Bildschirmen / kurzen Seiten ohne Scrollen sichtbar
|
||||
* ist. Wird vorher gescrollt, erscheint er sofort.
|
||||
*
|
||||
* Es werden KEINE personenbezogenen Daten und keine dauerhaften Marker
|
||||
* gespeichert – nur ein sessionStorage-Flag pro Element, das beim Schließen des
|
||||
* Tabs verfällt.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var REVEAL_DELAY = 800; // ms: spätestens nach dieser Zeit einblenden.
|
||||
var REVEAL_AFTER = 200; // px Scroll-Tiefe, ab der sofort eingeblendet wird.
|
||||
|
||||
function storageKey(el) {
|
||||
return 'darcFloatingDismissed_' + (el.getAttribute('data-uid') || '0');
|
||||
}
|
||||
|
||||
function isDismissed(el) {
|
||||
if (el.getAttribute('data-dismissible') !== '1') {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
return window.sessionStorage.getItem(storageKey(el)) === '1';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function dismiss(el) {
|
||||
el.classList.remove('is-visible');
|
||||
window.setTimeout(function () { el.setAttribute('hidden', 'hidden'); }, 350);
|
||||
try {
|
||||
window.sessionStorage.setItem(storageKey(el), '1');
|
||||
} catch (e) { /* sessionStorage nicht verfügbar – egal */ }
|
||||
}
|
||||
|
||||
function reveal(el) {
|
||||
el.removeAttribute('hidden');
|
||||
// Doppeltes rAF, damit der Display-Wechsel die Transition auslöst.
|
||||
window.requestAnimationFrame(function () {
|
||||
window.requestAnimationFrame(function () { el.classList.add('is-visible'); });
|
||||
});
|
||||
}
|
||||
|
||||
function setup(el) {
|
||||
if (isDismissed(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var closeBtn = el.querySelector('.darc-floating__close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', function () { dismiss(el); });
|
||||
}
|
||||
|
||||
var shown = false;
|
||||
var timer = null;
|
||||
|
||||
function show() {
|
||||
if (shown) {
|
||||
return;
|
||||
}
|
||||
shown = true;
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
if (timer) {
|
||||
window.clearTimeout(timer);
|
||||
}
|
||||
reveal(el);
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if ((window.pageYOffset || document.documentElement.scrollTop) > REVEAL_AFTER) {
|
||||
show();
|
||||
}
|
||||
}
|
||||
|
||||
// Garantierte Einblendung nach kurzer Verzögerung (auch ohne Scrollen).
|
||||
timer = window.setTimeout(show, REVEAL_DELAY);
|
||||
// Früher einblenden, sobald der Besucher scrollt.
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
}
|
||||
|
||||
function init() {
|
||||
var elements = Array.prototype.slice.call(
|
||||
document.querySelectorAll('[data-darc-floating]')
|
||||
);
|
||||
elements.forEach(setup);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -9,6 +9,7 @@
|
||||
<link rel="icon" href="assets/favicon/icon.svg" type="image/svg+xml">
|
||||
<link rel="mask-icon" href="assets/favicon/mask-icon.svg" color="#00ADEF">
|
||||
<link href="assets/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/antrag/darc-antrag.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/style-fiftyohm.css?ts=202312172012">
|
||||
<link rel="stylesheet" href="assets/style-course.css?ts=202312172012">
|
||||
<link rel="stylesheet" href="assets/katex/katex.min.css">
|
||||
@@ -16,6 +17,7 @@
|
||||
<script defer src="assets/katex/auto-render.min.js"></script>
|
||||
<script defer src="assets/latex.js"></script>
|
||||
<script defer src="assets/script.js"></script>
|
||||
<script defer src="assets/antrag/floating-cta.js"></script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -164,7 +166,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="darc-antrag">
|
||||
<div class="darc-floating darc-floating--right" data-darc-floating="1" data-uid="341903" data-dismissible="1">
|
||||
<div class="btn-group" role="group" aria-label="DARC Mitgliedsantrag">
|
||||
<a class="btn btn-primary darc-floating__link" href="https://antrag.darc.de/" target="_blank" rel="noopener noreferrer">
|
||||
<span class="darc-floating__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
|
||||
<path d="M12 20v-7"></path>
|
||||
<circle cx="12" cy="11" r="2"></circle>
|
||||
<path d="M7.8 6.2a6 6 0 0 0 0 8.5"></path>
|
||||
<path d="M16.2 6.2a6 6 0 0 1 0 8.5"></path>
|
||||
<path d="M5 3.7a9.5 9.5 0 0 0 0 13.4"></path>
|
||||
<path d="M19 3.7a9.5 9.5 0 0 1 0 13.4"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="darc-floating__label">DARC Mitglied werden</span>
|
||||
</a>
|
||||
<button type="button" class="btn btn-primary darc-floating__close" aria-label="Hinweis ausblenden">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/bootstrap-5.2.0-beta1-dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user