From c77411307c912ab9d711f75e2a7b6887799513c7 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sun, 20 Dec 2020 19:50:39 +0100
Subject: [PATCH] feat: cf polishing related updates
---
.../08-event-feed/event-feed.mustache | 14 +++++++-------
.../10-loading-screen/loading-screen.mustache | 11 +++++++++++
.../03-templates/cf2021/anonymous.mustache | 14 +++++++-------
.../03-templates/cf2021/chairman.mustache | 16 ++++++++--------
.../_patterns/03-templates/cf2021/user.mustache | 14 +++++++-------
source/css/molecules/modal.pcss | 2 +-
source/css/templates/cf2021.pcss | 1 +
tailwind.config.js | 6 +++++-
8 files changed, 47 insertions(+), 31 deletions(-)
create mode 100644 source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache
diff --git a/source/_patterns/02-organisms/08-event-feed/event-feed.mustache b/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
index b70a12d..8c26cdb 100644
--- a/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
+++ b/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
@@ -1,5 +1,5 @@
<div class="space-y-px {{ classes }}">
- <div class="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:55</div>
@@ -18,7 +18,7 @@
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
- <div class="bg-opacity-50 bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-opacity-50 bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:52</div>
@@ -37,7 +37,7 @@
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:51</div>
@@ -59,7 +59,7 @@
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:43</div>
@@ -82,7 +82,7 @@
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:35</div>
@@ -104,7 +104,7 @@
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
@@ -123,7 +123,7 @@
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
- <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
diff --git a/source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache b/source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache
new file mode 100644
index 0000000..daa4b4a
--- /dev/null
+++ b/source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache
@@ -0,0 +1,11 @@
+<div class="h-screen w-screen flex justify-center items-center">
+ <div class="text-center">
+ <img
+ src="/images/logo-round-black.svg"
+ class="w-24 mb-2 inline-block"
+ alt="Pirátská strana"
+ />
+ <h1 class="head-alt-lg mb-2">Název aplikace</h1>
+ <p class="text-lg">Načítám aplikaci ...</p>
+ </div>
+</div>
diff --git a/source/_patterns/03-templates/cf2021/anonymous.mustache b/source/_patterns/03-templates/cf2021/anonymous.mustache
index e868082..509e559 100644
--- a/source/_patterns/03-templates/cf2021/anonymous.mustache
+++ b/source/_patterns/03-templates/cf2021/anonymous.mustache
@@ -57,7 +57,7 @@
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
- <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -80,7 +80,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -103,7 +103,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -127,7 +127,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -151,7 +151,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -176,7 +176,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -201,7 +201,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
diff --git a/source/_patterns/03-templates/cf2021/chairman.mustache b/source/_patterns/03-templates/cf2021/chairman.mustache
index e65fb4f..d485ad6 100644
--- a/source/_patterns/03-templates/cf2021/chairman.mustache
+++ b/source/_patterns/03-templates/cf2021/chairman.mustache
@@ -78,7 +78,7 @@
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
- <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -114,7 +114,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -150,7 +150,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -190,7 +190,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -231,7 +231,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -268,7 +268,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -303,7 +303,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -338,7 +338,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
diff --git a/source/_patterns/03-templates/cf2021/user.mustache b/source/_patterns/03-templates/cf2021/user.mustache
index aa7ac0b..f585270 100644
--- a/source/_patterns/03-templates/cf2021/user.mustache
+++ b/source/_patterns/03-templates/cf2021/user.mustache
@@ -58,7 +58,7 @@
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
- <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -81,7 +81,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -104,7 +104,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2">
+ <div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -128,7 +128,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -152,7 +152,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -177,7 +177,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
@@ -202,7 +202,7 @@
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
- <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
diff --git a/source/css/molecules/modal.pcss b/source/css/molecules/modal.pcss
index ca7df94..57e422e 100644
--- a/source/css/molecules/modal.pcss
+++ b/source/css/molecules/modal.pcss
@@ -35,7 +35,7 @@
}
.modal__container-body {
- @apply min-h-full bg-white;
+ @apply bg-white;
}
}
diff --git a/source/css/templates/cf2021.pcss b/source/css/templates/cf2021.pcss
index 2d4d640..59f41b5 100644
--- a/source/css/templates/cf2021.pcss
+++ b/source/css/templates/cf2021.pcss
@@ -10,6 +10,7 @@
"posts notifications";
/* Needs to match .candidate-card__avatar width */
grid-template-columns: theme("width.2/3") 1fr;
+ grid-template-rows: auto 1fr;
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 5f752e3..70be538 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,12 +26,16 @@ module.exports = {
/^((sm|md|lg|xl)\:)?grid-cols-*/,
/^((sm|md|lg|xl)\:)?col-span-*/,
/^((sm|md|lg|xl)\:)?row-span-*/,
+ /^((sm|md|lg|xl)\:)?items-*/,
/^((sm|md|lg|xl)\:)?float-*/,
+ /^((sm|md|lg|xl)\:)?flex-row-*/,
+ /^((sm|md|lg|xl)\:)?flex-col-*/,
+ /^((sm|md|lg|xl)\:)?text-*/,
/^((sm|md|lg|xl)\:)?grid-flow-*/,
/^((sm|md|lg|xl)\:)?head-*/,
/^((sm|md|lg|xl)\:)?clearfix/,
/opacity-*/,
- /^text-*/,
+ /^duration-*/,
/^max-w-*/,
/ico--*/,
],
--
GitLab