From 841ac653cf334c2933305f4702763c2da8a526d3 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 8 Dec 2020 10:18:32 +0100
Subject: [PATCH] feat: improve color palette, cf2021 layout updates
---
source/_data/data.json | 3 +-
.../03-buttons/02-button-colors.mustache | 6 +-
.../04-button-with-hover-effect.mustache | 6 +-
.../03-buttons/button-hover-targets.mustache | 6 +-
.../16-chips/chip-colors.mustache | 1 +
.../dropdown-button.mustache | 2 +-
.../simplified-navbar-with-avatar.mustache | 1 +
.../event-feed-with-action-menu.mustache | 1 +
.../08-event-feed/event-feed.mustache | 201 +++++++++++-------
.../03-templates/cf2021/anonymous.mustache | 63 ++++--
.../03-templates/cf2021/chairman.mustache | 117 ++++++----
.../03-templates/cf2021/user.mustache | 64 ++++--
source/css/molecules/chips.pcss | 3 +
tailwind.config.js | 12 +-
14 files changed, 336 insertions(+), 150 deletions(-)
create mode 100644 source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache
diff --git a/source/_data/data.json b/source/_data/data.json
index af6e062..867ad2d 100755
--- a/source/_data/data.json
+++ b/source/_data/data.json
@@ -131,7 +131,8 @@
"name": "Green",
"variants": [
{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"},
- {"cls": "green-300", "name": "Green 300", "hex": "#77cea1"}
+ {"cls": "green-300", "name": "Green 300", "hex": "#76cc9f"},
+ {"cls": "green-400", "name": "Green 400", "hex": "#4ca971"}
]
},
{
diff --git a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
index ca2a6b7..4cc4613 100644
--- a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+++ b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
@@ -7,7 +7,8 @@
{{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--cyan-200") }}
- {{> atoms-basic-button(classes: "btn--green-200") }}
+ {{> atoms-basic-button(classes: "btn--green-400") }}
+ {{> atoms-basic-button(classes: "btn--green-300") }}
{{> atoms-basic-button(classes: "btn--orange-300") }}
{{> atoms-basic-button(classes: "btn--violet-400") }}
{{> atoms-basic-button(classes: "btn--violet-500") }}
@@ -21,7 +22,8 @@
{{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--cyan-200") }}
- {{> atoms-icon-button(classes: "btn--green-200") }}
+ {{> atoms-icon-button(classes: "btn--green-400") }}
+ {{> atoms-icon-button(classes: "btn--green-300") }}
{{> atoms-icon-button(classes: "btn--orange-300") }}
{{> atoms-icon-button(classes: "btn--violet-400") }}
{{> atoms-icon-button(classes: "btn--violet-500") }}
diff --git a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
index c6560bd..62455a8 100644
--- a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+++ b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
@@ -7,7 +7,8 @@
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--cyan-200 btn--hoveractive") }}
- {{> atoms-basic-button(classes: "btn--green-200 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--green-400 btn--hoveractive") }}
+ {{> atoms-basic-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
@@ -20,7 +21,8 @@
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--blue-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--cyan-200 btn--hoveractive") }}
- {{> atoms-icon-button(classes: "btn--green-200 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--green-400 btn--hoveractive") }}
+ {{> atoms-icon-button(classes: "btn--green-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--orange-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
diff --git a/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache b/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
index f2db967..6d9d8fe 100644
--- a/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
+++ b/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
@@ -7,7 +7,8 @@
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-basic-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-basic-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
- {{> atoms-basic-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+ {{> atoms-basic-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
+ {{> atoms-basic-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
{{> atoms-basic-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-basic-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
@@ -21,7 +22,8 @@
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-icon-button(cta: "btn--to-blue-300", classes: "btn--hoveractive btn--to-blue-300") }}
{{> atoms-icon-button(cta: "btn--to-cyan-200", classes: "btn--hoveractive btn--to-cyan-200") }}
- {{> atoms-icon-button(cta: "btn--to-green-200", classes: "btn--hoveractive btn--to-green-200") }}
+ {{> atoms-icon-button(cta: "btn--to-green-400", classes: "btn--hoveractive btn--to-green-400") }}
+ {{> atoms-icon-button(cta: "btn--to-green-300", classes: "btn--hoveractive btn--to-green-300") }}
{{> atoms-icon-button(cta: "btn--to-orange-300", classes: "btn--hoveractive btn--to-orange-300") }}
{{> atoms-icon-button(cta: "btn--to-violet-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
diff --git a/source/_patterns/01-molecules/16-chips/chip-colors.mustache b/source/_patterns/01-molecules/16-chips/chip-colors.mustache
index 7e86402..e45aad1 100644
--- a/source/_patterns/01-molecules/16-chips/chip-colors.mustache
+++ b/source/_patterns/01-molecules/16-chips/chip-colors.mustache
@@ -8,6 +8,7 @@
{{> molecules-chip(classes: "chip--cyan-200") }}
{{> molecules-chip(classes: "chip--cyan-500") }}
{{> molecules-chip(classes: "chip--green-300") }}
+ {{> molecules-chip(classes: "chip--green-400") }}
{{> molecules-chip(classes: "chip--orange-300") }}
{{> molecules-chip(classes: "chip--violet-400") }}
{{> molecules-chip(classes: "chip--violet-500") }}
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 bdd083e..2896152 100644
--- a/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
+++ b/source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
@@ -5,7 +5,7 @@
<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="#">Přidat jako návrh postupu</a>
+ <a class="block px-4 py-3" href="#">Navrhnout postup</a>
</li>
</ul>
</div>
diff --git a/source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache b/source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache
index 3505395..354bae2 100644
--- a/source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache
+++ b/source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache
@@ -21,6 +21,7 @@
<div class="flex items-center space-x-4">
<span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
{{> atoms-basic-avatar(classes: "avatar--2xs") }}
+ <button><i class="ico--log-out"></i></button>
</div>
</div>
</div>
diff --git a/source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache b/source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache
new file mode 100644
index 0000000..efabc27
--- /dev/null
+++ b/source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache
@@ -0,0 +1 @@
+{{> organisms-event-feed(withActionMenu: true) }}
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 53d2503..ed5a415 100644
--- a/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
+++ b/source/_patterns/02-organisms/08-event-feed/event-feed.mustache
@@ -1,88 +1,145 @@
-<div class="flex flex-col flex-1 overflow-hidden {{ classes }}{{^ classes }}h-64 max-w-lg{{/ classes }}">
- <div class="overflow-hidden flex flex-1">
- <div class="overflow-scroll h-full space-y-px">
- <div class="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "ZamĂtnutĂ˝ návrh postupu")}}
- </div>
- {{# action }}
- <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
- {{/ action}}
- </div>
- <span class="leading-tight">{{ excerpt.short }}</span>
+<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="flex items-center justify-between mb-2">
+ <div class="space-x-2 flex items-center">
+ <div class="font-bold text-sm">11:55</div>
+ {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "ZamĂtnutĂ˝ návrh postupu")}}
</div>
- <div class="bg-opacity-50 bg-yellow-100 border-green-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
- </div>
- {{# action }}
- <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
- {{/ action}}
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
</div>
- <span class="leading-tight">{{ excerpt.short }}</span>
+ {{/ withActionMenu }}
+ </div>
+ <span class="leading-tight">{{ 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="flex items-center justify-between mb-2">
+ <div class="space-x-2 flex items-center">
+ <div class="font-bold text-sm">11:52</div>
+ {{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
- <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
- </div>
- {{# action }}
- <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
- {{/ action}}
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
</div>
- <span class="leading-tight">{{ excerpt.short }}</span>
+ {{/ withActionMenu }}
+ </div>
+ <span class="leading-tight">{{ 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="flex items-center justify-between mb-2">
+ <div class="space-x-2 flex items-center">
+ <div class="font-bold text-sm">11:51</div>
+ {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
- <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "RozhodujĂcĂ hlasovánĂ")}}
- <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu »</a>
- </div>
- {{# action }}
- <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
- {{/ action}}
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil text-2xs mr-2"></i>Upravit</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
</div>
- <span class="leading-tight mb-2">{{ excerpt.short }}</span>
+ {{/ withActionMenu }}
+ </div>
+ <span class="leading-tight">{{ 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="flex items-center justify-between mb-2">
+ <div class="space-x-2 flex items-center">
+ <div class="font-bold text-sm">11:43</div>
+ {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "RozhodujĂcĂ hlasovánĂ")}}
+ <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu »</a>
</div>
- <div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "OznámenĂ pĹ™edsedajĂcĂho")}}
- </div>
- {{# action }}
- <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
- {{/ action}}
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil text-2xs mr-2"></i>Upravit</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
</div>
- <span class="leading-tight">{{ excerpt.short }}</span>
+ {{/ withActionMenu }}
+ </div>
+ <span class="leading-tight mb-2">{{ 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="flex items-center justify-between mb-2">
+ <div class="space-x-2 flex items-center">
+ <div class="font-bold text-sm">11:35</div>
+ {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "OznámenĂ pĹ™edsedajĂcĂho")}}
</div>
- <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "ZamĂtnutĂ˝ návrh postupu")}}
- </div>
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil text-2xs mr-2"></i>Upravit</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
</div>
- <span class="leading-tight">{{ excerpt.short }}</span>
+ {{/ withActionMenu }}
+ </div>
+ <span class="leading-tight">{{ 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="flex items-center justify-between mb-2">
+ <div class="space-x-2 flex items-center">
+ <div class="font-bold text-sm">11:28</div>
+ {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "ZamĂtnutĂ˝ návrh postupu")}}
</div>
- <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
- <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>
- {{> molecules-chip(classes: "chip--black chip--condensed", cta: "ZablokovanĂ˝ účastnĂk")}}
- </div>
- {{# action }}
- <a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
- {{/ action}}
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
</div>
- <span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
+ {{/ withActionMenu }}
+ </div>
+ <span class="leading-tight">{{ excerpt.short }}</span>
+ </div>
+ <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
+ <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>
+ {{> molecules-chip(classes: "chip--black chip--condensed", cta: "ZablokovanĂ˝ účastnĂk")}}
</div>
+ {{# withActionMenu }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--trashcan text-2xs mr-2"></i>Smazat</a>
+ </li>
+ </ul>
+ </div>
+ {{/ withActionMenu }}
</div>
+ <span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
</div>
</div>
diff --git a/source/_patterns/03-templates/cf2021/anonymous.mustache b/source/_patterns/03-templates/cf2021/anonymous.mustache
index c2bd83c..b585ba8 100644
--- a/source/_patterns/03-templates/cf2021/anonymous.mustache
+++ b/source/_patterns/03-templates/cf2021/anonymous.mustache
@@ -2,12 +2,11 @@
<div class="container container--wide pt-8 lg:py-24">
<article>
- <div class="flex items-center justify-between mb-8">
- <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilovánà leadera</h1>
- </div>
-
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
+ <div class="flex items-center justify-between mb-8">
+ <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
+ </div>
<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section>
@@ -44,7 +43,7 @@
<div class="space-y-6">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -61,7 +60,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -78,7 +77,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -96,7 +95,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -114,7 +113,26 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+ <div class="flex-1 overflow-hidden">
+ <div class="mb-1">
+ <div class="flex justify-between">
+ <div class="flex items-center">
+ <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+ <span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
+ <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+ {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
+ {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
+ </div>
+ {{> molecules-thumbs }}
+ </div>
+ </div>
+ <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+ </div>
+ </div>
+ <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -123,6 +141,26 @@
<span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "ZamĂtnutĂ˝")}}
+ {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
+ </div>
+ {{> molecules-thumbs }}
+ </div>
+ </div>
+ <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+ </div>
+ </div>
+ <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+ <div class="flex-1 overflow-hidden">
+ <div class="mb-1">
+ <div class="flex justify-between">
+ <div class="flex items-center">
+ <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+ <span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
+ <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+ {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "OdmĂtnutĂ˝ pĹ™edsedajĂcĂm")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
</div>
{{> molecules-thumbs }}
@@ -136,10 +174,11 @@
</div>
<div>
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body lg:pb-0">
- <h2 class="head-heavy-sm mb-4">OznámenĂ</h2>
+ <div class="lg:card__body lg:py-6">
+ <h2 class="head-heavy-sm">OznámenĂ</h2>
</div>
- {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-3") }}
+
+ {{> organisms-event-feed(itemPadding: "px-8 py-3") }}
</div>
</div>
</div>
diff --git a/source/_patterns/03-templates/cf2021/chairman.mustache b/source/_patterns/03-templates/cf2021/chairman.mustache
index 14e044e..815a71b 100644
--- a/source/_patterns/03-templates/cf2021/chairman.mustache
+++ b/source/_patterns/03-templates/cf2021/chairman.mustache
@@ -2,26 +2,26 @@
<div class="container container--wide pt-8 lg:py-24">
<article>
- <div class="flex items-center justify-between mb-8">
- <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilovánà leadera</h1>
- <div class="dropdown dropdown--right">
- <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
- <ul class="dropdown__content whitespace-no-wrap">
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil mr-2"></i>Přejmenovat bod programu</a>
- </li>
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#" id="js-end-discussion"><i class="ico--bubbles mr-2"></i>UkonÄŤit rozpravu</a>
- </li>
- <li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>UkonÄŤit bod programu</a>
- </li>
- </ul>
- </div>
- </div>
-
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
+ <div class="flex items-start justify-between mb-8">
+ <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
+ <div class="dropdown dropdown--right mt-4">
+ <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
+ <ul class="dropdown__content whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil mr-2"></i>Přejmenovat bod programu</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#" id="js-end-discussion"><i class="ico--bubbles mr-2"></i>UkonÄŤit rozpravu</a>
+ </li>
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>UkonÄŤit bod programu</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section>
@@ -59,7 +59,7 @@
<div class="space-y-6">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -75,10 +75,10 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>SkrĂ˝t pĹ™ĂspÄ›vek</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--eye-off text-2xs mr-1"></i>SkrĂ˝t pĹ™ĂspÄ›vek</a>
</li>
</ul>
</div>
@@ -89,7 +89,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -105,10 +105,10 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>SkrĂ˝t pĹ™ĂspÄ›vek</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--eye-off text-2xs mr-1"></i>SkrĂ˝t pĹ™ĂspÄ›vek</a>
</li>
</ul>
</div>
@@ -119,7 +119,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -139,10 +139,10 @@
<a class="block px-2 py-3" href="#" id="js-announce-proposal"><i class="ico--bullhorn mr-1"></i> Vyhlásit procedurálnà návrh</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> OdmĂtnout procedurálnĂ návrh</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down text-2xs mr-1"></i> OdmĂtnout procedurálnĂ návrh</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
</ul>
</div>
@@ -154,7 +154,7 @@
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -172,13 +172,13 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--thumbs-up mr-1"></i> Schválit</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--thumbs-up text-2xs mr-1"></i> Schválit</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> ZamĂtnout</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down text-2xs mr-1"></i> ZamĂtnout</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
</ul>
</div>
@@ -189,7 +189,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -206,10 +206,10 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>SkrĂ˝t pĹ™ĂspÄ›vek</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--eye-off text-2xs mr-1"></i>SkrĂ˝t pĹ™ĂspÄ›vek</a>
</li>
</ul>
</div>
@@ -220,7 +220,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -229,7 +229,7 @@
<span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
- {{> molecules-chip(classes: "chip--green-300 chip--condensed ml-2", cta: "Schválený")}}
+ {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
</div>
<div class="flex items-center space-x-4">
@@ -238,7 +238,7 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
</ul>
</div>
@@ -249,7 +249,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
@@ -267,7 +267,36 @@
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
- <a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uĹľivatele</a>
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+ </div>
+ </div>
+ <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+ <div class="flex-1">
+ <div class="mb-1">
+ <div class="flex justify-between">
+ <div class="flex items-center">
+ <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+ <span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
+ <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+ {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "OdmĂtnutĂ˝ pĹ™edsedajĂcĂm")}}
+ {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
+ </div>
+ <div class="flex items-center space-x-4">
+ {{> molecules-thumbs }}
+ <div class="dropdown dropdown--right">
+ <i class="ico--dots-three-vertical cursor-pointer"></i>
+ <ul class="dropdown__content text-xs whitespace-no-wrap">
+ <li class="dropdown__content-item bg-white hover:bg-grey-125">
+ <a class="block px-2 py-3" href="#"><i class="ico--lock text-2xs mr-1"></i> Zablokovat uĹľivatele</a>
</li>
</ul>
</div>
@@ -290,11 +319,13 @@
</div>
<div>
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body lg:pb-0">
- <h2 class="head-heavy-sm mb-4">OznámenĂ</h2>
+ <div class="lg:card__body lg:py-6">
+ <h2 class="head-heavy-sm">OznámenĂ</h2>
</div>
- {{> organisms-event-feed(classes: "w-full", action: "ico--trashcan", itemPadding: "px-8 py-3") }}
- <div class="lg:card__body">
+
+ {{> organisms-event-feed(withActionMenu: true, itemPadding: "px-8 py-3") }}
+
+ <div class="lg:card__body lg:py-6">
{{> molecules-textarea-field(nolabel: true, placeholder: "VyplĹte text oznámenĂ", rows: 3) }}
{{> atoms-basic-button(cta: "PĹ™idat oznámenĂ", classes: "btn--black btn--hoveractive text-sm mt-2") }}
</div>
diff --git a/source/_patterns/03-templates/cf2021/user.mustache b/source/_patterns/03-templates/cf2021/user.mustache
index 76e1e13..517ac7c 100644
--- a/source/_patterns/03-templates/cf2021/user.mustache
+++ b/source/_patterns/03-templates/cf2021/user.mustache
@@ -2,12 +2,12 @@
<div class="container container--wide pt-8 lg:py-24">
<article>
- <div class="flex items-center justify-between mb-8">
- <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilovánà leadera</h1>
- </div>
-
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
+ <div class="flex items-center justify-between mb-8">
+ <h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovnà volby 2021</h1>
+ </div>
+
<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section>
@@ -44,7 +44,7 @@
<div class="space-y-6">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -61,7 +61,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -78,7 +78,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -96,7 +96,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -114,7 +114,7 @@
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
- <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
@@ -123,6 +123,45 @@
<span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
+ {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
+ </div>
+ {{> molecules-thumbs }}
+ </div>
+ </div>
+ <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+ </div>
+ </div>
+ <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+ <div class="flex-1 overflow-hidden">
+ <div class="mb-1">
+ <div class="flex justify-between">
+ <div class="flex items-center">
+ <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+ <span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
+ <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+ {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "ZamĂtnutĂ˝")}}
+ {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
+ </div>
+ {{> molecules-thumbs }}
+ </div>
+ </div>
+ <p class="text-black leading-normal">{{ excerpt.medium }}</p>
+ </div>
+ </div>
+ <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
+ <img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
+ <div class="flex-1 overflow-hidden">
+ <div class="mb-1">
+ <div class="flex justify-between">
+ <div class="flex items-center">
+ <span class="font-bold">{{ person.first }} {{ person.last }}</span>
+ <span class="text-grey-200 text-sm ml-2">KS PardubickĂ˝ kraj</span>
+ <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
+ {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
+ {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "OdmĂtnutĂ˝ pĹ™edsedajĂcĂm")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "ArchivovanĂ˝")}}
</div>
{{> molecules-thumbs }}
@@ -144,10 +183,11 @@
</div>
<div>
<div class="lg:card lg:elevation-10">
- <div class="lg:card__body lg:pb-0">
- <h2 class="head-heavy-sm mb-4">OznámenĂ</h2>
+ <div class="lg:card__body lg:py-6">
+ <h2 class="head-heavy-sm">OznámenĂ</h2>
</div>
- {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-4") }}
+
+ {{> organisms-event-feed(itemPadding: "px-8 py-4") }}
</div>
</div>
</div>
diff --git a/source/css/molecules/chips.pcss b/source/css/molecules/chips.pcss
index 4417b0a..a74fb9d 100644
--- a/source/css/molecules/chips.pcss
+++ b/source/css/molecules/chips.pcss
@@ -36,6 +36,9 @@
.chip--green-300 {
@apply bg-green-300 text-white;
}
+.chip--green-400 {
+ @apply bg-green-400 text-white;
+}
.chip--orange-300 {
@apply bg-orange-200 text-white;
}
diff --git a/tailwind.config.js b/tailwind.config.js
index bb45559..ba156e9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -49,6 +49,7 @@ module.exports = {
},
spacing: {
'0/5': '0.125rem',
+ '14': '3.5rem',
'28': '7rem',
'36': '9rem',
'44': '11rem',
@@ -111,7 +112,8 @@ module.exports = {
},
'green': {
'200': '#92c6ab',
- '300': '#77cea1',
+ '300': '#76cc9f',
+ '400': '#4ca971',
},
'yellow': {
'100': '#fff7bf',
@@ -237,9 +239,13 @@ module.exports = {
text: 'white',
background: 'cyan.200',
},
- 'green-200': {
+ 'green-300': {
text: 'white',
- background: 'green.200',
+ background: 'green.300',
+ },
+ 'green-400': {
+ text: 'white',
+ background: 'green.400',
},
'orange-300': {
text: 'white',
--
GitLab