diff --git a/source/_patterns/00-atoms/04-animations/ping.mustache b/source/_patterns/00-atoms/04-animations/ping.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..12f66cfc0007a9af494a32d0fc3ac08abb53beca
--- /dev/null
+++ b/source/_patterns/00-atoms/04-animations/ping.mustache
@@ -0,0 +1,4 @@
+<span class="inline-flex h-4 w-4 mr-4 relative">
+ <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
+ <span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
+</span>
diff --git a/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache b/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
index 2896152a7b6ecd31d9ba4676a234ded292c31236..f000572c342d774f9cfdd404047cfd9b6dbfdf3e 100644
--- a/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
+++ b/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
@@ -1,13 +1,13 @@
-<button class="btn btn--icon {{ classes }}">
+<div class="btn btn--icon {{ classes }}">
<div class="btn__body-wrap">
- <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
- <div class="btn__icon dropdown-button">
+ <button class="btn__body {{ bodyClasses }}">{{ cta }}</button>
+ <button class="btn__icon dropdown-button">
<i class="ico--chevron-down"></i>
<ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
<li class="dropdown-button__choice hover:bg-grey-125">
<a class="block px-4 py-3" href="#">Navrhnout postup</a>
</li>
</ul>
- </div>
+ </button>
</div>
-</button>
+</div>
diff --git a/source/_patterns/03-templates/cf2021/anonymous.mustache b/source/_patterns/03-templates/cf2021/anonymous.mustache
index 509e559708763166994fb931c97babed0571f303..1e915d8b2c9f3ab73c81ce15be8ebc2e67e29f3d 100644
--- a/source/_patterns/03-templates/cf2021/anonymous.mustache
+++ b/source/_patterns/03-templates/cf2021/anonymous.mustache
@@ -5,7 +5,16 @@
<div class="flex items-center justify-between mb-4 lg:mb-8">
<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
</div>
- <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ <div class="container-padding--zero md:container-padding--auto">
+ <div class="iframe-container">
+ <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ </div>
+ <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+ <div><strong>0</strong> <span>členů online</span></div>
+ <div><strong>0</strong> <span>online celkem</span></div>
+ <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+ </div>
+ </div>
</section>
<section class="cf2021__notifications">
diff --git a/source/_patterns/03-templates/cf2021/chairman.mustache b/source/_patterns/03-templates/cf2021/chairman.mustache
index d485ad6b5754c6f3f7d24c19d19ff8cfa12fe73b..0a032973f2b39193d32cf3ac5de80d8e8a32f2d3 100644
--- a/source/_patterns/03-templates/cf2021/chairman.mustache
+++ b/source/_patterns/03-templates/cf2021/chairman.mustache
@@ -20,7 +20,16 @@
</div>
</div>
- <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ <div class="container-padding--zero md:container-padding--auto">
+ <div class="iframe-container">
+ <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ </div>
+ <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+ <div><strong>0</strong> <span>členů online</span></div>
+ <div><strong>0</strong> <span>online celkem</span></div>
+ <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+ </div>
+ </div>
</section>
<section class="cf2021__notifications">
diff --git a/source/_patterns/03-templates/cf2021/user.mustache b/source/_patterns/03-templates/cf2021/user.mustache
index f585270a0da349f316c9e17fb3201b43760cc197..0e3ae238ca33b5cb76c4e124db29cebdf0cd1610 100644
--- a/source/_patterns/03-templates/cf2021/user.mustache
+++ b/source/_patterns/03-templates/cf2021/user.mustache
@@ -6,7 +6,16 @@
<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
</div>
- <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ <div class="container-padding--zero md:container-padding--auto">
+ <div class="iframe-container">
+ <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ </div>
+ <div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
+ <div><strong>0</strong> <span>členů online</span></div>
+ <div><strong>0</strong> <span>online celkem</span></div>
+ <div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
+ </div>
+ </div>
</section>
<section class="cf2021__notifications">
diff --git a/source/css/atoms/animations.pcss b/source/css/atoms/animations.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..c982ba71abb5e1676a98e89936934324293bd283
--- /dev/null
+++ b/source/css/atoms/animations.pcss
@@ -0,0 +1,16 @@
+/* Obsolete with Tailwind 1.6, backported. */
+@keyframes animate-ping {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 75%, 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+
+
+.animate-ping {
+ animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 99d69545adc2f56d5d67ba85828ce602503eac50..54ab65df52269d191749c399f75f0440a685de4b 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -18,6 +18,7 @@
/**
* Custom components
*/
+@import "./atoms/animations.pcss";
@import "./atoms/avatar.pcss";
@import "./atoms/card.pcss";
@import "./atoms/contact-line.pcss";
@@ -115,42 +116,13 @@ a.icon-link:hover {
font-size: 0;
}
-/* @keyframes btn-loading-spinner {
- to {transform: rotate(360deg);}
-} */
-
-/* .btn--loading {
- position: relative;
-} */
-
-/* .btn--loading::before {
- pointer-events: none;
- content: '';
- position: absolute;
- background-color: #000;
- opacity: 0.7;
- z-index: 2;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+.iframe-container {
+ @apply relative;
+ padding-bottom: 56.25%; /* 16:9 */
+ height: 0;
}
-.btn--loading::after {
- pointer-events: none;
- content: '';
- position: absolute;
- z-index: 3;
- top: 50%;
- left: 50%;
- width: 1.5rem;
- height: 1.5rem;
- margin-top: -0.75rem;
- margin-left: -0.75rem;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: theme("colors.cyan.200");
- border-right-color: theme("colors.cyan.200");
- border-bottom-color: theme("colors.cyan.200");
- animation: btn-laoding-spinner 1s linear infinite;
-} */
+.iframe-container iframe {
+ @apply absolute top-0 left-0 w-full h-full;
+}
diff --git a/source/css/templates/cf2021.pcss b/source/css/templates/cf2021.pcss
index 59f41b55121c88f6a9e44396a3cbaf268280d3e6..cf761b892927ec0e41cedcfa446901bca072a4f0 100644
--- a/source/css/templates/cf2021.pcss
+++ b/source/css/templates/cf2021.pcss
@@ -10,10 +10,11 @@
"posts notifications";
/* Needs to match .candidate-card__avatar width */
grid-template-columns: theme("width.2/3") 1fr;
- grid-template-rows: auto 1fr;
+ grid-template-rows: auto auto 1fr;
}
}
+
.cf2021__video {
grid-area: video;
}
diff --git a/tailwind-plugins/buttons.js b/tailwind-plugins/buttons.js
index 500c1e7fa7729cad685dbfb9107d5344280e2c2b..5f06909b721aad69fa201c92bb383be1b9ac17f2 100644
--- a/tailwind-plugins/buttons.js
+++ b/tailwind-plugins/buttons.js
@@ -128,7 +128,7 @@ module.exports = function (options) {
bottom: '0',
zIndex: '2',
backgroundColor: theme('colors.black'),
- opacity: '0.7',
+ opacity: '0.4',
},
'.btn--loading::after': {
pointerEvents: 'none',