Skip to content
Snippets Groups Projects
Commit 914749d4 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

more extensible cards, fix navbar scrolling

parent d0173721
No related branches found
No related tags found
1 merge request!24Flip cards, fix navbar transparency on scroll
Pipeline #17046 passed
......@@ -2,16 +2,23 @@
<div class="flip-card-inner">
<div class="flip-card-front">
<div
class="relative h-[33rem] bg-black rounded-3xl overflow-hidden bg-cover"
style="background-image:url('{{ image_url }}')"
class="relative h-[33rem] rounded-3xl overflow-hidden bg-cover"
style="
background-color: {{ bg_color }};
{% if image_url %}
background-image: url('{{ image_url }}')
{% endif %}
"
>
<div
class="
absolute top-0 left-0
border border-r-[27rem] border-r-[transparent]
border-l-0 border-t-[33rem] border-t-pirati-yellow
border-l-0 border-t-[33rem]
"
style="border-top-color: {{ bg_color }}"
></div>
<h1
......@@ -19,10 +26,23 @@
font-alt text-5xl whitespace-pre-line absolute top-10 left-10 max-w-[60%]
"
>{{ title }}</h1>
<div
class="
absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed
md:hidden
"
>
Pro zobrazení detailů
<br>
se dotkni karty.
</div>
</div>
</div>
<div
class="flip-card-back bg-pirati-yellow rounded-3xl p-10"
class="flip-card-back rounded-3xl p-10"
style="background-color: {{ bg_color }}"
>
<div class="prose prose-black">
{% comment %}
......
......@@ -28,3 +28,4 @@ context:
Ozve se ti koordinátor/ka a provede tě přijímacím procesem
</p>
button_text: 'Chci se zapojit!'
bg_color: '#FEC900'
......@@ -255,6 +255,17 @@
{% block observer_script %}
<script>
const navbar = document.querySelector("#navbar")
const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
let initiallyHadTransparentClass = false
if (navbar.classList.contains(transparentClass)) {
initiallyHadTransparentClass = true
}
console.log(initiallyHadTransparentClass)
window.onscroll = () => {
const screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
......@@ -262,11 +273,10 @@
return
}
const navbar = document.querySelector("#navbar")
const transparentClass = "{% block observer_script_toggled_class %}navbar--transparent{% endblock %}"
if (window.scrollY === 0) {
if (initiallyHadTransparentClass) {
navbar.classList.add(transparentClass)
}
} else {
navbar.classList.remove(transparentClass)
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment