site: Add PIT call to action
additionally:
* add simple fade out via transition API.
Change-Id: I8a512893d465782392ba17429eb390745ebe6684
Reviewed-on: https://gerrit.hackerspace.pl/c/hscloud/+/1846
Reviewed-by: q3k <q3k@hackerspace.pl>
diff --git a/hswaw/site/static/BUILD.bazel b/hswaw/site/static/BUILD.bazel
index 4da9c9e..8d3bcdc 100644
--- a/hswaw/site/static/BUILD.bazel
+++ b/hswaw/site/static/BUILD.bazel
@@ -1,20 +1,14 @@
-load("@io_bazel_rules_go//go:def.bzl", "go_library")
load("@io_bazel_rules_go//extras:embed_data.bzl", "go_embed_data")
+load("@io_bazel_rules_go//go:def.bzl", "go_library")
go_embed_data(
name = "static",
- srcs = [
- "animations.js",
- "fonts.css",
- "frezarka.jpg",
- "kuka.jpg",
- "landing.css",
- "led.js",
- "neon-syrenka.svg",
- "serwerownia.jpg",
- "space.jpg",
- "statut_warszawski_hackerspace-v1.3.pdf",
- "tokarka.jpg",
+ srcs = glob(
+ [
+ "*",
+ ],
+ ["BUILD.bazel"],
+ ) + [
"@com_gstatic_fonts_comfortaa_400//file:font.ttf",
"@com_gstatic_fonts_inconsolata_400//file:font.ttf",
"@com_gstatic_fonts_inconsolata_700//file:font.ttf",
diff --git a/hswaw/site/static/landing.css b/hswaw/site/static/landing.css
index cf13754..21cedb4 100644
--- a/hswaw/site/static/landing.css
+++ b/hswaw/site/static/landing.css
@@ -242,7 +242,7 @@
object-fit: contain;
}
-#gallery-nav {
+.gallery-nav {
display: flex;
flex-direction: row;
padding: 0;
@@ -250,17 +250,17 @@
justify-content: center;
flex-wrap: wrap;
}
-#gallery-nav > li {
+.gallery-nav > li {
margin: 0;
padding: 0;
}
-#gallery-nav > li:hover {
+.gallery-nav > li:hover {
background-color: var(--darkbgaccent);
}
-#gallery-nav > li.active {
+.gallery-nav > li.active {
background-color: var(--secondary);
}
-#gallery-nav > li > a {
+.gallery-nav > li > a {
display: block;
text-decoration: none;
padding: 0 15px;
@@ -276,6 +276,7 @@
@media screen and (max-width: 1000px) {
.bottom {
+ gap: 1em;
padding: 2em 1em 0 1em;
}
}
@@ -290,7 +291,7 @@
}
}
-.bottom .about li + li {
+.bottom .about li + li:not('.gallery-nav') {
margin-top: 0.5em;
}
@@ -394,3 +395,12 @@
.atlist li:last-child:after {
content: ".";
}
+
+
+@media (prefers-reduced-motion) {
+ ::view-transition-group(*),
+ ::view-transition-old(*),
+ ::view-transition-new(*) {
+ animation: none !important;
+ }
+}
diff --git a/hswaw/site/static/pit1.jpg b/hswaw/site/static/pit1.jpg
new file mode 100644
index 0000000..f877724
--- /dev/null
+++ b/hswaw/site/static/pit1.jpg
Binary files differ
diff --git a/hswaw/site/static/pit2.jpg b/hswaw/site/static/pit2.jpg
new file mode 100644
index 0000000..609c4eb
--- /dev/null
+++ b/hswaw/site/static/pit2.jpg
Binary files differ
diff --git a/hswaw/site/templates/index.html b/hswaw/site/templates/index.html
index 57b3df3..dbfcae2 100644
--- a/hswaw/site/templates/index.html
+++ b/hswaw/site/templates/index.html
@@ -38,6 +38,15 @@
</ul>
</nav>
<div class="bottom">
+ <section class="gallery-wrapper" id="pit">
+ <div class="img-wrapper">
+ <img src="/static/site/pit1.jpg" />
+ </div>
+ <ul class="gallery-nav">
+ <li data-name="pit1" class="active"><a href="#">PIT</a></li>
+ <li data-name="pit2"><a href="#">Instrukcja</a></li>
+ </ul>
+ </section>
<div class="about">
<h2>Czym jest Warszawski Hackerspace?</h2>
<p>
@@ -52,11 +61,11 @@
<p>
<b>Hackerspace nie zna barier.</b> Jeśli masz ciekawy pomysł i szukasz ludzi chętnych do współpracy, lub po prostu potrzebujesz miejsca i sprzętu - <a href="https://wiki.hackerspace.pl/jak-dolaczyc">zapraszamy</a>! Utrzymujemy się w całosci z wolontariatu naszych członków, <a href="https://wiki.hackerspace.pl/finanse">darowizn i składek</a> oraz drobnej aktywności komercyjnej.
</p>
- <section id="gallery">
+ <section class="gallery-wrapper">
<div class="img-wrapper">
<img src="/static/site/space.jpg" />
</div>
- <ul id="gallery-nav">
+ <ul class="gallery-nav">
<li data-name="space" class="active"><a href="#">Spejs</a></li>
<li data-name="frezarka"><a href="#">Frezarka</a></li>
<li data-name="tokarka"><a href="#">Tokarka</a></li>
@@ -110,15 +119,28 @@
L.marker([52.24158, 20.9848]).addTo(map);
}
-document.querySelectorAll('#gallery-nav > li > a').forEach(link => {
- link.onclick = e => {
- e.preventDefault()
- document.querySelector(`#gallery-nav > li.active`).classList.remove('active')
- const li = e.currentTarget.parentNode
- li.classList.add('active')
- const name = li.dataset.name
- document.querySelector('#gallery img').src = `/static/site/${name}.jpg`
- }
+
+document.querySelectorAll('.gallery-wrapper').forEach(galleryWrapper => {
+ const img = galleryWrapper.querySelector('.img-wrapper img')
+ const links = galleryWrapper.querySelectorAll('.gallery-nav > li > a')
+ links.forEach(link => {
+ link.onclick = e => {
+ e.preventDefault()
+ links.forEach(x => x.parentNode.classList.remove('active'))
+ const li = e.currentTarget.parentNode
+ li.classList.add('active')
+ const name = li.dataset.name
+ if ('startViewTransition' in document) {
+ document.startViewTransition(() => {
+ img.src = `/static/site/${ name }.jpg`
+
+ })
+ } else {
+ img.src = `/static/site/${ name }.jpg`
+ }
+ }
+
+ })
})
</script>
<script src="/static/leaflet/leaflet.js" crossorigin="" onload="loadMap()"></script>
