Skip to content
Snippets Groups Projects
Commit 457dab65 authored by xaralis's avatar xaralis
Browse files

feat: cf2021 responsivness

parent 841ac653
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 772 additions and 607 deletions
source/_patterns/02-organisms/08-event-feed/event-feed.mustache
+ 7
− 7
View file @ 457dab65
......@@ -16,7 +16,7 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-opacity-50 bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
......@@ -35,7 +35,7 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
......@@ -57,7 +57,7 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
......@@ -80,7 +80,7 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight mb-2">{{ excerpt.short }}</span>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
......@@ -102,7 +102,7 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
......@@ -121,7 +121,7 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
<div class="flex items-center justify-between mb-2">
......@@ -140,6 +140,6 @@
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
<span class="leading-tight text-sm lg:text-base"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
</div>
</div>
source/_patterns/03-templates/cf2021/anonymous.mustache
+ 194
− 150
View file @ 457dab65
{{> organisms-simplified-navbar-with-actions }}
<div class="container container--wide pt-8 lg:py-24">
<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">
<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>
<article class="container container--wide pt-8 lg:py-24 cf2021">
<section class="cf2021__video space-y-8">
<div class="flex items-center justify-between mb-4 lg:mb-8">
<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
</div>
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<div class="lg:card__body pb-2 lg:py-6">
<h2 class="head-heavy-sm">Oznámení</h2>
</div>
<section>
<div class="flex justify-between items-center mb-4">
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
</div>
</section>
<section class="cf2021__posts">
<div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex items-center">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
<div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
<div class="-mx-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Vše</option>
<option value="">Jen aktivní</option>
......@@ -21,14 +33,14 @@
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Podle času</option>
<option value="">Podle podpory</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
......@@ -36,152 +48,184 @@
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<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-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl: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:46</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:46</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="flex items-start p-4 lg:p-2 lg:-m-2">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl: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:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:42</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="flex items-start p-4 lg:p-2 lg:-m-2">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl: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:40</span>
<a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-xs lg:text-sm">@ 11:40</span>
<a href="#" class="text-grey-200 text-xs ml-2 underline hidden md:inline">(Upraveno přesdedajícím)</a>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
</div>
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg:ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg: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")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", 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>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm lg: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")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", 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>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-xs lg:text-sm lg: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")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", 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>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
</section>
</div>
<div>
<div class="lg:card lg:elevation-10">
<div class="lg:card__body lg:py-6">
<h2 class="head-heavy-sm">Oznámení</h2>
</div>
{{> organisms-event-feed(itemPadding: "px-8 py-3") }}
</div>
</div>
</div>
</article>
</div>
source/_patterns/03-templates/cf2021/chairman.mustache
+ 343
− 294
View file @ 457dab65
This diff is collapsed.
source/_patterns/03-templates/cf2021/user.mustache
+ 201
− 156
View file @ 457dab65
{{> organisms-simplified-navbar-with-avatar }}
<div class="container container--wide pt-8 lg:py-24">
<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">
<h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
<article class="container container--wide pt-8 lg:py-24 cf2021">
<section class="cf2021__video space-y-8">
<div class="flex items-center justify-between mb-4 lg:mb-8">
<h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
</div>
<iframe width="100%" height="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="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<div class="lg:card__body pb-2 lg:py-6">
<h2 class="head-heavy-sm">Oznámení</h2>
</div>
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
</div>
</section>
<section>
<div class="flex justify-between items-center mb-4">
<section class="cf2021__posts">
<div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
<h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex items-center">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
<div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
<div class="-mx-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Vše</option>
<option value="">Jen aktivní</option>
......@@ -22,14 +34,14 @@
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Podle času</option>
<option value="">Podle podpory</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
......@@ -37,137 +49,182 @@
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<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-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="flex items-start p-4 lg:p-2 lg:-m-2">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-14 h-14 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="flex items-start p-4 lg:p-2 lg:-m-2">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
<a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl: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")}}
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", 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>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 lg:mt-0">
<span class="text-grey-200 text-sm">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")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", 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>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base 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 items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<div class="flex justify-between items-start xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<div class="flex flex-col xl:flex-row xl:items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<div class="mt-1 xl:mt-0">
<span class="text-grey-200 text-sm">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")}}
</div>
</div>
<div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed", 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>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
......@@ -176,21 +233,9 @@
{{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
<div class="space-x-4">
{{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
<span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
<span class="text-sm text-grey-200 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
</div>
</div>
</section>
</div>
<div>
<div class="lg:card lg:elevation-10">
<div class="lg:card__body lg:py-6">
<h2 class="head-heavy-sm">Oznámení</h2>
</div>
{{> organisms-event-feed(itemPadding: "px-8 py-4") }}
</div>
</div>
</div>
</article>
</div>
source/css/style.pcss
+ 1
− 0
View file @ 457dab65
......@@ -62,6 +62,7 @@
@import "./organisms/region-map.pcss";
@import "./templates/candidate-detail.pcss";
@import "./templates/cf2021.pcss";
/**
* This injects Tailwind's utility classes and any utility classes registered
......
source/css/templates/cf2021.pcss 0 → 100644
+ 26
− 0
View file @ 457dab65
.cf2021 {
@apply grid gap-8;
grid-template-areas: "video"
"notifications"
"posts";
@screen lg {
grid-template-areas: "video notifications"
"posts notifications";
/* Needs to match .candidate-card__avatar width */
grid-template-columns: theme("width.2/3") 1fr;
}
}
.cf2021__video {
grid-area: video;
}
.cf2021__notifications {
grid-area: notifications;
}
.cf2021__posts {
grid-area: posts;
}
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