Skip to content
Snippets Groups Projects
Commit 841ac653 authored by xaralis's avatar xaralis
Browse files

feat: improve color palette, cf2021 layout updates

parent 6efbbbe1
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 336 additions and 150 deletions
source/_data/data.json
+ 2
− 1
View file @ 841ac653
...@@ -131,7 +131,8 @@ ...@@ -131,7 +131,8 @@
"name": "Green", "name": "Green",
"variants": [ "variants": [
{"cls": "green-200", "name": "Green 200", "hex": "#92c6ab"}, {"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"}
] ]
}, },
{ {
......
source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+ 4
− 2
View file @ 841ac653
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
{{> atoms-basic-button(classes: "btn--white") }} {{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--blue-300") }} {{> atoms-basic-button(classes: "btn--blue-300") }}
{{> atoms-basic-button(classes: "btn--cyan-200") }} {{> 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--orange-300") }}
{{> atoms-basic-button(classes: "btn--violet-400") }} {{> atoms-basic-button(classes: "btn--violet-400") }}
{{> atoms-basic-button(classes: "btn--violet-500") }} {{> atoms-basic-button(classes: "btn--violet-500") }}
...@@ -21,7 +22,8 @@ ...@@ -21,7 +22,8 @@
{{> atoms-icon-button(classes: "btn--white") }} {{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--blue-300") }} {{> atoms-icon-button(classes: "btn--blue-300") }}
{{> atoms-icon-button(classes: "btn--cyan-200") }} {{> 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--orange-300") }}
{{> atoms-icon-button(classes: "btn--violet-400") }} {{> atoms-icon-button(classes: "btn--violet-400") }}
{{> atoms-icon-button(classes: "btn--violet-500") }} {{> atoms-icon-button(classes: "btn--violet-500") }}
......
source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+ 4
− 2
View file @ 841ac653
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--blue-300 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--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--orange-300 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--violet-500 btn--hoveractive") }}
...@@ -20,7 +21,8 @@ ...@@ -20,7 +21,8 @@
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--blue-300 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--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--orange-300 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--violet-400 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--violet-500 btn--hoveractive") }}
......
source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
+ 4
− 2
View file @ 841ac653
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }} {{> 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-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-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-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-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }} {{> atoms-basic-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
...@@ -21,7 +22,8 @@ ...@@ -21,7 +22,8 @@
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }} {{> 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-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-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-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-400", classes: "btn--hoveractive btn--to-violet-400") }}
{{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }} {{> atoms-icon-button(cta: "btn--to-violet-500", classes: "btn--hoveractive btn--to-violet-500") }}
......
source/_patterns/01-molecules/16-chips/chip-colors.mustache
+ 1
− 0
View file @ 841ac653
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
{{> molecules-chip(classes: "chip--cyan-200") }} {{> molecules-chip(classes: "chip--cyan-200") }}
{{> molecules-chip(classes: "chip--cyan-500") }} {{> molecules-chip(classes: "chip--cyan-500") }}
{{> molecules-chip(classes: "chip--green-300") }} {{> molecules-chip(classes: "chip--green-300") }}
{{> molecules-chip(classes: "chip--green-400") }}
{{> molecules-chip(classes: "chip--orange-300") }} {{> molecules-chip(classes: "chip--orange-300") }}
{{> molecules-chip(classes: "chip--violet-400") }} {{> molecules-chip(classes: "chip--violet-400") }}
{{> molecules-chip(classes: "chip--violet-500") }} {{> molecules-chip(classes: "chip--violet-500") }}
......
source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache
+ 1
− 1
View file @ 841ac653
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<i class="ico--chevron-down"></i> <i class="ico--chevron-down"></i>
<ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap"> <ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
<li class="dropdown-button__choice hover:bg-grey-125"> <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> </li>
</ul> </ul>
</div> </div>
......
source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache
+ 1
− 0
View file @ 841ac653
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span> <span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
{{> atoms-basic-avatar(classes: "avatar--2xs") }} {{> atoms-basic-avatar(classes: "avatar--2xs") }}
<button><i class="ico--log-out"></i></button>
</div> </div>
</div> </div>
</div> </div>
......
source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache 0 → 100644
+ 1
− 0
View file @ 841ac653
{{> organisms-event-feed(withActionMenu: true) }}
source/_patterns/02-organisms/08-event-feed/event-feed.mustache
+ 129
− 72
View file @ 841ac653
<div class="flex flex-col flex-1 overflow-hidden {{ classes }}{{^ classes }}h-64 max-w-lg{{/ classes }}"> <div class="space-y-px {{ 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="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="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center"> <div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:55</div> <div class="font-bold text-sm">11:55</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}} {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div> </div>
{{# action }} {{# withActionMenu }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a> <div class="dropdown dropdown--right">
{{/ action}} <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> </div>
<span class="leading-tight">{{ excerpt.short }}</span> <span class="leading-tight">{{ excerpt.short }}</span>
</div> </div>
<div class="bg-opacity-50 bg-yellow-100 border-green-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}"> <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="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center"> <div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:52</div> <div class="font-bold text-sm">11:52</div>
{{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}} {{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený 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--trashcan text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div> </div>
{{# action }} {{/ withActionMenu }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div> </div>
<span class="leading-tight">{{ excerpt.short }}</span> <span class="leading-tight">{{ excerpt.short }}</span>
</div> </div>
...@@ -31,9 +43,19 @@ ...@@ -31,9 +43,19 @@
<div class="font-bold text-sm">11:51</div> <div class="font-bold text-sm">11:51</div>
{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}} {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div> </div>
{{# action }} {{# withActionMenu }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a> <div class="dropdown dropdown--right">
{{/ action}} <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>
{{/ withActionMenu }}
</div> </div>
<span class="leading-tight">{{ excerpt.short }}</span> <span class="leading-tight">{{ excerpt.short }}</span>
</div> </div>
...@@ -44,9 +66,19 @@ ...@@ -44,9 +66,19 @@
{{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}} {{> 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 &raquo;</a> <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
</div> </div>
{{# action }} {{# withActionMenu }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a> <div class="dropdown dropdown--right">
{{/ action}} <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>
{{/ withActionMenu }}
</div> </div>
<span class="leading-tight mb-2">{{ excerpt.short }}</span> <span class="leading-tight mb-2">{{ excerpt.short }}</span>
</div> </div>
...@@ -56,9 +88,19 @@ ...@@ -56,9 +88,19 @@
<div class="font-bold text-sm">11:35</div> <div class="font-bold text-sm">11:35</div>
{{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}} {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
</div> </div>
{{# action }} {{# withActionMenu }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a> <div class="dropdown dropdown--right">
{{/ action}} <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>
{{/ withActionMenu }}
</div> </div>
<span class="leading-tight">{{ excerpt.short }}</span> <span class="leading-tight">{{ excerpt.short }}</span>
</div> </div>
...@@ -68,6 +110,16 @@ ...@@ -68,6 +110,16 @@
<div class="font-bold text-sm">11:28</div> <div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}} {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div> </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> </div>
<span class="leading-tight">{{ excerpt.short }}</span> <span class="leading-tight">{{ excerpt.short }}</span>
</div> </div>
...@@ -77,12 +129,17 @@ ...@@ -77,12 +129,17 @@
<div class="font-bold text-sm">11:28</div> <div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}} {{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
</div> </div>
{{# action }} {{# withActionMenu }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a> <div class="dropdown dropdown--right">
{{/ action}} <i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
</div> <ul class="dropdown__content text-xs whitespace-no-wrap">
<span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span> <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> </div>
{{/ withActionMenu }}
</div> </div>
<span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
</div> </div>
</div> </div>
source/_patterns/03-templates/cf2021/anonymous.mustache
+ 51
− 12
View file @ 841ac653
...@@ -2,12 +2,11 @@ ...@@ -2,12 +2,11 @@
<div class="container container--wide pt-8 lg:py-24"> <div class="container container--wide pt-8 lg:py-24">
<article> <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="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-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> <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> <section>
...@@ -44,7 +43,7 @@ ...@@ -44,7 +43,7 @@
<div class="space-y-6"> <div class="space-y-6">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -61,7 +60,7 @@ ...@@ -61,7 +60,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -78,7 +77,7 @@ ...@@ -78,7 +77,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -96,7 +95,7 @@ ...@@ -96,7 +95,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -114,7 +113,45 @@ ...@@ -114,7 +113,45 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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">
<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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -123,6 +160,7 @@ ...@@ -123,6 +160,7 @@
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</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> <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--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ý")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div> </div>
{{> molecules-thumbs }} {{> molecules-thumbs }}
...@@ -136,10 +174,11 @@ ...@@ -136,10 +174,11 @@
</div> </div>
<div> <div>
<div class="lg:card lg:elevation-10"> <div class="lg:card lg:elevation-10">
<div class="lg:card__body lg:pb-0"> <div class="lg:card__body lg:py-6">
<h2 class="head-heavy-sm mb-4">Oznámení</h2> <h2 class="head-heavy-sm">Oznámení</h2>
</div> </div>
{{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-3") }}
{{> organisms-event-feed(itemPadding: "px-8 py-3") }}
</div> </div>
</div> </div>
</div> </div>
......
source/_patterns/03-templates/cf2021/chairman.mustache
+ 74
− 43
View file @ 841ac653
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
<div class="container container--wide pt-8 lg:py-24"> <div class="container container--wide pt-8 lg:py-24">
<article> <article>
<div class="flex items-center justify-between mb-8"> <div class="grid grid-cols-3 gap-8">
<h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1> <div class="col-span-2 space-y-8">
<div class="dropdown dropdown--right"> <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> <i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
<ul class="dropdown__content whitespace-no-wrap"> <ul class="dropdown__content whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <li class="dropdown__content-item bg-white hover:bg-grey-125">
...@@ -20,8 +22,6 @@ ...@@ -20,8 +22,6 @@
</div> </div>
</div> </div>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
<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> <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> <section>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<div class="space-y-6"> <div class="space-y-6">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -75,10 +75,10 @@ ...@@ -75,10 +75,10 @@
<i class="ico--dots-three-vertical cursor-pointer"></i> <i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap"> <ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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> </li>
</ul> </ul>
</div> </div>
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -105,10 +105,10 @@ ...@@ -105,10 +105,10 @@
<i class="ico--dots-three-vertical cursor-pointer"></i> <i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap"> <ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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> </li>
</ul> </ul>
</div> </div>
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -139,10 +139,10 @@ ...@@ -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> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
</ul> </ul>
</div> </div>
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -172,13 +172,13 @@ ...@@ -172,13 +172,13 @@
<i class="ico--dots-three-vertical cursor-pointer"></i> <i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap"> <ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
</ul> </ul>
</div> </div>
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -206,10 +206,10 @@ ...@@ -206,10 +206,10 @@
<i class="ico--dots-three-vertical cursor-pointer"></i> <i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap"> <ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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> </li>
</ul> </ul>
</div> </div>
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span> <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> <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--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ý")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div> </div>
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
<i class="ico--dots-three-vertical cursor-pointer"></i> <i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap"> <ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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>
</ul> </ul>
</div> </div>
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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="flex-1">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -267,7 +267,36 @@ ...@@ -267,7 +267,36 @@
<i class="ico--dots-three-vertical cursor-pointer"></i> <i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap"> <ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125"> <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> </li>
</ul> </ul>
</div> </div>
...@@ -290,11 +319,13 @@ ...@@ -290,11 +319,13 @@
</div> </div>
<div> <div>
<div class="lg:card lg:elevation-10"> <div class="lg:card lg:elevation-10">
<div class="lg:card__body lg:pb-0"> <div class="lg:card__body lg:py-6">
<h2 class="head-heavy-sm mb-4">Oznámení</h2> <h2 class="head-heavy-sm">Oznámení</h2>
</div> </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) }} {{> 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") }} {{> atoms-basic-button(cta: "Přidat oznámení", classes: "btn--black btn--hoveractive text-sm mt-2") }}
</div> </div>
......
source/_patterns/03-templates/cf2021/user.mustache
+ 52
− 12
View file @ 841ac653
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<div class="container container--wide pt-8 lg:py-24"> <div class="container container--wide pt-8 lg:py-24">
<article> <article>
<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"> <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> <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> </div>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
<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> <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> <section>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<div class="space-y-6"> <div class="space-y-6">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
</div> </div>
</div> </div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200"> <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="flex-1 overflow-hidden">
<div class="mb-1"> <div class="mb-1">
<div class="flex justify-between"> <div class="flex justify-between">
...@@ -123,6 +123,45 @@ ...@@ -123,6 +123,45 @@
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</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> <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--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ý")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div> </div>
{{> molecules-thumbs }} {{> molecules-thumbs }}
...@@ -144,10 +183,11 @@ ...@@ -144,10 +183,11 @@
</div> </div>
<div> <div>
<div class="lg:card lg:elevation-10"> <div class="lg:card lg:elevation-10">
<div class="lg:card__body lg:pb-0"> <div class="lg:card__body lg:py-6">
<h2 class="head-heavy-sm mb-4">Oznámení</h2> <h2 class="head-heavy-sm">Oznámení</h2>
</div> </div>
{{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-4") }}
{{> organisms-event-feed(itemPadding: "px-8 py-4") }}
</div> </div>
</div> </div>
</div> </div>
......
source/css/molecules/chips.pcss
+ 3
− 0
View file @ 841ac653
...@@ -36,6 +36,9 @@ ...@@ -36,6 +36,9 @@
.chip--green-300 { .chip--green-300 {
@apply bg-green-300 text-white; @apply bg-green-300 text-white;
} }
.chip--green-400 {
@apply bg-green-400 text-white;
}
.chip--orange-300 { .chip--orange-300 {
@apply bg-orange-200 text-white; @apply bg-orange-200 text-white;
} }
......
tailwind.config.js
+ 9
− 3
View file @ 841ac653
...@@ -49,6 +49,7 @@ module.exports = { ...@@ -49,6 +49,7 @@ module.exports = {
}, },
spacing: { spacing: {
'0/5': '0.125rem', '0/5': '0.125rem',
'14': '3.5rem',
'28': '7rem', '28': '7rem',
'36': '9rem', '36': '9rem',
'44': '11rem', '44': '11rem',
...@@ -111,7 +112,8 @@ module.exports = { ...@@ -111,7 +112,8 @@ module.exports = {
}, },
'green': { 'green': {
'200': '#92c6ab', '200': '#92c6ab',
'300': '#77cea1', '300': '#76cc9f',
'400': '#4ca971',
}, },
'yellow': { 'yellow': {
'100': '#fff7bf', '100': '#fff7bf',
...@@ -237,9 +239,13 @@ module.exports = { ...@@ -237,9 +239,13 @@ module.exports = {
text: 'white', text: 'white',
background: 'cyan.200', background: 'cyan.200',
}, },
'green-200': { 'green-300': {
text: 'white', text: 'white',
background: 'green.200', background: 'green.300',
},
'green-400': {
text: 'white',
background: 'green.400',
}, },
'orange-300': { 'orange-300': {
text: 'white', text: 'white',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft