Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • clickable-select-chevron
  • feat/new-image-formats
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-12
  • 2.0.0-alpha-13
  • 2.0.0-alpha-14
  • 2.0.0-alpha-15
  • 2.0.0-alpha-16
  • 2.0.0-alpha-17
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
  • 2.0.1
  • 2.0.2
  • 2.0.3
  • 2.0.4
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.10.0
  • 2.11.0
  • 2.12.1
  • 2.13.0
  • 2.14.0
  • 2.15.0
  • 2.16.0
  • 2.16.1
  • 2.17.0
  • 2.18.0
  • 2.19.0
  • 2.2.0
  • 2.2.1
  • 2.20.0
  • 2.3.0
  • 2.3.1
  • 2.3.2
  • 2.3.3
  • 2.3.4
  • 2.4.0
  • 2.5.0
  • 2.5.1
  • 2.5.2
  • 2.6.0
  • 2.7.0
  • 2.7.1
  • 2.8.0
  • 2.9.0
  • 2.9.1
74 results

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
29 results
Show changes
Show whitespace changes
Inline Side-by-side
Showing
with 1627 additions and 253 deletions
source/_patterns/02-organisms/12-chart/chart.mustache 0 → 100644
View file @ aac6d1d3
<div class="py-4">
<canvas
class="lg:h-120 lg:w-auto w-full mx-auto __chart-example"
></canvas>
</div>
source/_patterns/03-templates/candidate-detail.mustache
View file @ aac6d1d3
{{> organisms-header }}
<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default text-center lg:text-left">
<h1 class="head-alt-md md:head-alt-xl max-w-2xl">{{ person.first }} {{ person.last }}</h1>
<h2 class="head-xs mt-2 max-w-xl">{{ person.occupation }}</h2>
......@@ -11,7 +11,13 @@
<main>
<div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
<section class="lg:w-3/5 xl:w-2/3">
<div class="mb-16">
{{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
</div>
<div>
<h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
{{> atoms-month-calendar() }}
</div>
</section>
<section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
<div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">
......
source/_patterns/03-templates/cf2021/anonymous.mustache 0 → 100644
View file @ aac6d1d3
{{> organisms-simplified-navbar-with-actions }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
<div class="cf2021__title flex justify-between">
<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>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
<div><strong>0</strong> <span>členů online</span></div>
<div><strong>0</strong> <span>online celkem</span></div>
<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
</div>
</div>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<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 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>
<option value="">Jen archivované</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<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 ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
<option value="">Jen příspěvky</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
</section>
</article>
source/_patterns/03-templates/cf2021/chairman.mustache 0 → 100644
View file @ aac6d1d3
{{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
<div class="cf2021__title flex justify-between">
<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 class="dropdown dropdown--right pl-4 pt-1 lg:pt-5">
<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--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>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
<div><strong>0</strong> <span>členů online</span></div>
<div><strong>0</strong> <span>online celkem</span></div>
<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
</div>
</div>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<div class="container-padding--zero lg:container-padding--auto">
{{> organisms-event-feed-with-action-menu(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
</div>
<div class="lg:card__body pt-4 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>
</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 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="">Jen nezpracované</option>
<option value="">Vše</option>
<option value="">Jen aktivní</option>
<option value="">Jen archivované</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<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 ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
<option value="">Jen příspěvky</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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>
<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 class="dropdown__content-item bg-white hover:bg-grey-125">
<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>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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>
<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 class="dropdown__content-item bg-white hover:bg-grey-125">
<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>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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--grey-500 chip--condensed ml-2", cta: "Čeká na zpracování")}}
</div>
</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="#" 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 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 text-2xs mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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--blue-300 chip--condensed ml-2", cta: "Vyhlášený")}}
</div>
</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--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 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 text-2xs mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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>
<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 class="dropdown__content-item bg-white hover:bg-grey-125">
<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>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
<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>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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>
<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>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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>
<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>
</div>
</div>
</div>
<p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
<div class="my-8 space-y-4">
{{> 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 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
</div>
</div>
</section>
</article>
<div class="modal__overlay hidden" id="js-announce-proposal-modal">
<div class="modal__content" role="dialog">
<div class="modal__container w-full max-w-xl" role="dialog">
<div class="modal__container-body">
<div class="card">
<div class="card__body">
<div class="flex items-center justify-between mb-4">
<h1 class="card-headline">Vyhlásit procedurální návrh</h1>
<button><i class="ico--cross"></i></button>
</div>
<p class="card-body-text mb-2">Návrh můžete před vyhlášením ještě upravit. Pro pokročilé formátování použijte Markdown.</p>
{{> molecules-textarea-field(nolabel: true, textareaContent: "lorem ipsum dolor sit amet") }}
</div>
<div class="card-actions card-actions--right space-x-2">
{{> atoms-basic-button(classes: "btn--blue-300 text-sm btn--hoveractive", cta: "Vyhlásit") }}
{{> atoms-basic-button(classes: "btn--grey-125 text-sm btn--hoveractive", cta: "Zrušit") }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal__overlay hidden" id="js-end-discussion-modal">
<div class="modal__content" role="dialog">
<div class="modal__container w-full max-w-md" role="dialog">
<div class="modal__container-body">
<div class="card">
<div class="card__body">
<div class="flex items-center justify-between mb-4">
<h1 class="card-headline">Ukončit rozpravu?</h1>
<button><i class="ico--cross"></i></button>
</div>
<p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
</div>
<div class="card-actions card-actions--right space-x-1">
{{> atoms-basic-button(classes: "btn--blue-300 text-sm btn--hoveractive", cta: "Ukončit") }}
{{> atoms-basic-button(classes: "btn--red-600 text-sm btn--hoveractive", cta: "Zrušit") }}
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var announceProposalElem = document.getElementById("js-announce-proposal");
var announceProposalModalElem = document.getElementById("js-announce-proposal-modal");
var endDiscussionElem = document.getElementById("js-end-discussion");
var endDiscussionModalElem = document.getElementById("js-end-discussion-modal");
endDiscussionElem.addEventListener("click", function () {
endDiscussionModalElem.classList.remove("hidden");
return false;
})
announceProposalElem.addEventListener("click", function () {
announceProposalModalElem.classList.remove("hidden");
return false;
})
</script>
source/_patterns/03-templates/cf2021/user.mustache 0 → 100644
View file @ aac6d1d3
{{> organisms-simplified-navbar-with-avatar }}
<article class="container container--wide pt-8 lg:py-24 cf2021">
<div class="cf2021__title flex justify-between">
<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>
<section class="cf2021__video space-y-8">
<div class="container-padding--zero md:container-padding--auto">
<div class="iframe-container">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-xs md:text-sm text-grey-300">
<div><strong>0</strong> <span>členů online</span></div>
<div><strong>0</strong> <span>online celkem</span></div>
<div class="flex-grow text-right hidden sm:block">Následuje: <a class="font-bold" href="#">Představení výsledků PK @ 09. 01. 12:05</a></div>
</div>
</div>
</section>
<section class="cf2021__notifications">
<div class="lg:card lg:elevation-10">
<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 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>
<option value="">Jen archivované</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<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 ml-1 mt-2 xl:mt-0">
<select>
<option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option>
<option value="">Jen příspěvky</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
</div>
<div>
{{> molecules-chip-pagination }}
</div>
</div>
</div>
<div class="space-y-6 container-padding--zero lg:container-padding--auto">
<div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start opacity-25 hover:opacity-100 p-4 lg:p-2 lg:py-3 lg:-mx-2 transition duration-500">
<img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<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>
<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>
</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-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
<div class="my-8 space-y-4">
{{> 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 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
</div>
</div>
</section>
</article>
source/_patterns/03-templates/elections.mustache
View file @ aac6d1d3
......@@ -2,7 +2,7 @@
{{> organisms-elections-hero }}
<div class="__js-root">
<ui-view-provider :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
<ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
<main>
<div class="container container--default pt-8 lg:py-24">
<div class="text-center">
......
source/css/atoms/alert.pcss 0 → 100644
View file @ aac6d1d3
.alert {
@apply p-4 flex leading-snug;
&--dark,
&--black {
@apply bg-black text-white;
}
&--light,
&--grey-125 {
@apply bg-grey-125 text-grey-300;
}
&--error,
&--red-600 {
@apply bg-red-600 text-white;
}
&--warning,
&--yellow-400 {
@apply bg-yellow-400 text-black;
}
&--success,
&--green-400 {
@apply bg-green-400 text-white;
}
&--info,
&--blue-300 {
@apply bg-blue-300 text-white;
}
&--faded {
@apply bg-opacity-75;
}
}
.alert__icon {
@apply mr-2;
}
source/css/atoms/animations.pcss 0 → 100644
View file @ aac6d1d3
/* Obsolete with Tailwind 1.6, backported. */
@keyframes animate-ping {
0% {
transform: scale(1);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
source/css/atoms/avatar.pcss
View file @ aac6d1d3
......@@ -6,7 +6,9 @@
}
}
@responsive {
.avatar--2xs {
@apply w-8;
}
.avatar--xs {
@apply w-12;
}
......@@ -28,7 +30,6 @@
.avatar--3xl {
@apply w-56;
}
}
.avatar--bordered {
img {
......
source/css/atoms/card.pcss
View file @ aac6d1d3
@responsive {
.card {
@apply elevation-2;
}
......@@ -6,7 +5,6 @@
.card__body {
@apply p-8;
}
}
.card--hoveractive {
@apply transition duration-200;
......@@ -23,3 +21,12 @@
.card-body-text {
@apply font-light leading-normal text-sm break-words ;
}
.card-actions {
@apply px-8 py-4 border-t border-grey-125 flex items-center;
}
.card-actions--right {
@apply justify-end;
}
source/css/atoms/contact-line.pcss
View file @ aac6d1d3
......@@ -9,11 +9,7 @@
&.contact-line--responsive {
i {
@apply hidden;
@screen lg {
@apply inline-block;
}
@apply hidden lg:inline-block;
}
}
}
source/css/atoms/container.pcss
View file @ aac6d1d3
......@@ -10,7 +10,6 @@
}
@responsive {
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
.container-padding--zero {
......@@ -27,4 +26,3 @@
margin-left: 0;
margin-right: 0;
}
}
source/css/atoms/form-field.pcss
View file @ aac6d1d3
.text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-no-wrap border border-grey-200 transition duration-200;
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg whitespace-nowrap border border-grey-200 transition duration-200;
}
.text-input {
......@@ -114,7 +114,7 @@
@apply relative flex;
input {
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-grey-200 border border-grey-200 transition duration-200;
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
......@@ -127,6 +127,7 @@
&:checked {
@apply bg-blue-300 border-transparent;
}
&[disabled] {
......
source/css/atoms/full-calendar.pcss 0 → 100644
View file @ aac6d1d3
:root {
--fc-button-bg-color: #000;
--fc-button-border-color: #000;
--fc-button-hover-bg-color: #f9ce05;
--fc-button-hover-border-color: #f9ce05;
--fc-button-active-bg-color: #f9ce05;
--fc-button-active-border-color: #f9ce05;
--fc-event-bg-color: #fea86a;
--fc-event-border-color: #fea86a;
--fc-border-color: #ed9654;
--fc-today-bg-color: #ed9654;
--fc-daygrid-event-dot-width: 4px;
}
.fc {
@apply font-condensed;
}
.fc-col-header {
width: 100%!important;
}
/* Don't underline only when there is no href attribute defined. */
.fc .fc-col-header-cell-cushion:not([href]),
.fc .fc-daygrid-day-number:not([href]) {
@apply no-underline;
}
.fc .fc-col-header-cell {
@apply bg-orange-300 p-3 font-alt text-white text-xl capitalize;
}
.fc .fc-button {
@apply font-alt rounded-none px-5 py-2 duration-150;
}
.fc .fc-button:hover:not(:disabled),
.fc .fc-button:active:not(:disabled){
@apply text-black;
}
.fc .fc-event {
@apply p-1 rounded-none border-none text-sm;
}
.fc .fc-toolbar-title,
.fc .fc-today-button {
@apply capitalize;
}
.fc .fc-daygrid-day-number {
@apply font-alt text-3xl text-orange-300;
}
.fc .fc-multimonth-daygrid .fc-daygrid-day-number {
@apply text-base;
}
.fc .fc-day-today .fc-daygrid-day-number {
@apply text-white;
}
source/css/atoms/heading.pcss
View file @ aac6d1d3
@responsive {
.h-default {
@apply font-condensed font-medium leading-tight;
}
.h-alt {
@apply font-alt font-normal;
line-height: 0.96;
}
.h-allcaps {
@apply font-condensed font-normal uppercase leading-tight;
}
.head-alt-xl,
.content-block .head-alt-xl {
@apply text-7xl font-alt font-normal leading-negative;
@apply text-7xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-lg,
.content-block .head-alt-lg {
@apply text-6xl font-alt font-normal leading-negative;
@apply text-6xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-md,
.content-block .head-alt-md {
@apply text-4xl font-alt font-normal leading-negative;
@apply text-4xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-base,
.content-block .head-alt-base {
@apply text-3xl font-alt font-normal leading-negative;
@apply text-3xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-sm,
.content-block .head-alt-sm {
@apply text-2xl font-alt font-normal leading-negative;
@apply text-2xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-xs,
.content-block .head-alt-xs {
@apply text-xl font-alt font-normal leading-negative;
@apply text-xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-2xs,
.content-block .head-alt-2xs {
@apply text-lg font-alt font-normal leading-negative;
@apply text-lg font-alt font-normal;
line-height: 0.96;
}
......@@ -112,5 +132,3 @@
.content-block .head-allcaps-heavy-4xs {
@apply text-sm font-condensed font-bold uppercase leading-tight;
}
}
source/css/atoms/horizontal-rule.pcss
View file @ aac6d1d3
hr:not(.hr--unstyled) {
@apply border-t border-grey-100 my-4;
@screen md {
@apply my-8;
}
@apply border-t border-grey-100 my-4 md:my-8;
&.hr--big {
@apply my-8;
@screen md {
@apply my-16;
}
@apply my-8 md:my-16;
}
&.hr--condensed {
@apply my-2;
@screen md {
@apply my-4;
}
@apply my-2 md:my-4;
}
}
source/css/atoms/icons.pcss
View file @ aac6d1d3
@font-face {
font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?d982e8d9e6f59008d41d375111aea007');
src: url('../fonts/pirati-ui.eot?d982e8d9e6f59008d41d375111aea007#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?d982e8d9e6f59008d41d375111aea007') format('truetype'),
url('../fonts/pirati-ui.woff?d982e8d9e6f59008d41d375111aea007') format('woff'),
url('../fonts/pirati-ui.svg?d982e8d9e6f59008d41d375111aea007#pirati-ui') format('svg');
src: url('../fonts/pirati-ui.eot?964zxx');
src: url('../fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?964zxx') format('truetype'),
url('../fonts/pirati-ui.woff?964zxx') format('woff'),
url('../fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
......@@ -26,77 +25,363 @@
-moz-osx-font-smoothing: grayscale;
}
.ico--strategy:before { content: "\e932"; }
.ico--pig:before { content: "\e928"; }
.ico--thermometer:before { content: "\e90a"; }
.ico--pirati:before { content: "\e90d"; }
.ico--stackshare:before { content: "\e90f"; }
.ico--open-source:before { content: "\e90e"; }
.ico--search:before { content: "\e913"; }
.ico--cross:before { content: "\e937"; }
.ico--checkbox-checked:before { content: "\e938"; }
.ico--quill:before { content: "\e939"; }
.ico--feather:before { content: "\e939"; }
.ico--write:before { content: "\e939"; }
.ico--edit:before { content: "\e939"; }
.ico--sphere:before { content: "\e93a"; }
.ico--globe:before { content: "\e93a"; }
.ico--internet:before { content: "\e93a"; }
.ico--wikipedia:before { content: "\e93b"; }
.ico--brand:before { content: "\e93b"; }
.ico--youtube:before { content: "\e936"; }
.ico--users:before { content: "\e934"; }
.ico--group:before { content: "\e934"; }
.ico--team:before { content: "\e934"; }
.ico--members:before { content: "\e934"; }
.ico--community:before { content: "\e934"; }
.ico--collaborate:before { content: "\e934"; }
.ico--book:before { content: "\e935"; }
.ico--read:before { content: "\e935"; }
.ico--reading:before { content: "\e935"; }
.ico--bubbles:before { content: "\e930"; }
.ico--map:before { content: "\e914"; }
.ico--compass:before { content: "\e915"; }
.ico--folder-open:before { content: "\e916"; }
.ico--folder:before { content: "\e917"; }
.ico--drawer:before { content: "\e918"; }
.ico--stop:before { content: "\e919"; }
.ico--github:before { content: "\e91a"; }
.ico--clock:before { content: "\e91b"; }
.ico--calendar:before { content: "\e91c"; }
.ico--flickr:before { content: "\e91d"; }
.ico--instagram:before { content: "\e91e"; }
.ico--twitter:before { content: "\e91f"; }
.ico--newspaper:before { content: "\e920"; }
.ico--cart:before { content: "\e921"; }
.ico--home:before { content: "\e922"; }
.ico--link:before { content: "\e912"; }
.ico--power:before { content: "\e90c"; }
.ico--location:before { content: "\e906"; }
.ico--phone:before { content: "\e907"; }
.ico--linkedin:before { content: "\e903"; }
.ico--github1:before { content: "\e904"; }
.ico--gplus:before { content: "\e900"; }
.ico--twitter1:before { content: "\e901"; }
.ico--facebook:before { content: "\e902"; }
.ico--menu:before { content: "\e933"; }
.ico--chevron-right:before { content: "\e923"; }
.ico--chevron-left:before { content: "\e924"; }
.ico--chevron-down:before { content: "\e925"; }
.ico--chevron-up:before { content: "\e926"; }
.ico--zoom_out_map:before { content: "\e927"; }
.ico--arrow-down:before { content: "\e911"; }
.ico--link1:before { content: "\e910"; }
.ico--city:before { content: "\e908"; }
.ico--beer:before { content: "\e909"; }
.ico--edit-pencil:before { content: "\e929"; }
.ico--at:before { content: "\e905"; }
.ico--tasks:before { content: "\e93c"; }
.ico--calculator:before { content: "\e931"; }
.ico--bank:before { content: "\e92a"; }
.ico--facebook-official:before { content: "\e92b"; }
.ico--close:before { content: "\e92c"; }
.ico--anchor:before { content: "\e92d"; }
.ico--feed:before { content: "\e92e"; }
.ico--paw:before { content: "\e90b"; }
.ico--envelope:before { content: "\e92f"; }
\ No newline at end of file
.ico--mastodon:before {
content: "\e973";
}
.ico--helios:before {
content: "\e96e";
}
.ico--redmine:before {
content: "\e96f";
}
.ico--zulip:before {
content: "\e970";
}
.ico--forum:before {
content: "\e971";
}
.ico--pirati:before {
content: "\e90d";
}
.ico--jitsi:before {
content: "\e90f";
}
.ico--open-source:before {
content: "\e90e";
}
.ico--donation-full:before {
content: "\e96c";
}
.ico--donation-outline:before {
content: "\e96d";
}
.ico--strategy:before {
content: "\e932";
}
.ico--pig:before {
content: "\e928";
}
.ico--thermometer:before {
content: "\e90a";
}
.ico--menu:before {
content: "\e933";
}
.ico--chevron-right:before {
content: "\e923";
}
.ico--chevron-left:before {
content: "\e924";
}
.ico--chevron-down:before {
content: "\e925";
}
.ico--chevron-up:before {
content: "\e926";
}
.ico--link-horizontal:before {
content: "\e910";
}
.ico--beer:before {
content: "\e909";
}
.ico--food:before {
content: "\e968";
}
.ico--dots-three-vertical:before {
content: "\e940";
}
.ico--dots-three-horizontal:before {
content: "\e941";
}
.ico--log-out:before {
content: "\e942";
}
.ico--envelope:before {
content: "\e908";
}
.ico--pin:before {
content: "\e943";
}
.ico--at:before {
content: "\e905";
}
.ico--glass:before {
content: "\e967";
}
.ico--checkmark:before {
content: "\e965";
}
.ico--info:before {
content: "\e901";
}
.ico--question:before {
content: "\e904";
}
.ico--warning:before {
content: "\e93f";
}
.ico--code:before {
content: "\e94a";
}
.ico--checkbox-unchecked:before {
content: "\e94e";
}
.ico--star-full:before {
content: "\e94f";
}
.ico--star-empty:before {
content: "\e950";
}
.ico--bookmark:before {
content: "\e951";
}
.ico--cog:before {
content: "\e952";
}
.ico--key:before {
content: "\e953";
}
.ico--zoom-in:before {
content: "\e954";
}
.ico--zoom-out:before {
content: "\e955";
}
.ico--shrink:before {
content: "\e956";
}
.ico--printer:before {
content: "\e957";
}
.ico--file-openoffice:before {
content: "\e958";
}
.ico--user:before {
content: "\e959";
}
.ico--file-excel:before {
content: "\e95a";
}
.ico--file-word:before {
content: "\e95b";
}
.ico--file-pdf:before {
content: "\e95c";
}
.ico--file-picture:before {
content: "\e95d";
}
.ico--file-blank:before {
content: "\e95e";
}
.ico--folder-upload:before {
content: "\e95f";
}
.ico--upload:before {
content: "\e960";
}
.ico--cloud-upload:before {
content: "\e961";
}
.ico--folder-download:before {
content: "\e962";
}
.ico--download:before {
content: "\e963";
}
.ico--cloud-download:before {
content: "\e964";
}
.ico--alarm:before {
content: "\e900";
}
.ico--calculator:before {
content: "\e911";
}
.ico--facebook-full:before {
content: "\e913";
}
.ico--feed:before {
content: "\e927";
}
.ico--library:before {
content: "\e929";
}
.ico--office:before {
content: "\e92a";
}
.ico--attachment:before {
content: "\e92b";
}
.ico--enlarge:before {
content: "\e92c";
}
.ico--eye-off:before {
content: "\e92e";
}
.ico--eye:before {
content: "\e92f";
}
.ico--share:before {
content: "\e931";
}
.ico--search:before {
content: "\e939";
}
.ico--pencil:before {
content: "\e93c";
}
.ico--lock-open:before {
content: "\e947";
}
.ico--lock:before {
content: "\e948";
}
.ico--equalizer:before {
content: "\e949";
}
.ico--switch:before {
content: "\e94b";
}
.ico--loop:before {
content: "\e94c";
}
.ico--refresh:before {
content: "\e94d";
}
.ico--bullhorn:before {
content: "\e944";
}
.ico--bin:before {
content: "\e945";
}
.ico--cross:before {
content: "\e937";
}
.ico--checkbox-checked:before {
content: "\e938";
}
.ico--globe:before {
content: "\e93a";
}
.ico--wikipedia:before {
content: "\e93b";
}
.ico--youtube:before {
content: "\e936";
}
.ico--users:before {
content: "\e934";
}
.ico--book:before {
content: "\e935";
}
.ico--bubbles:before {
content: "\e930";
}
.ico--map:before {
content: "\e914";
}
.ico--compass:before {
content: "\e915";
}
.ico--folder-open:before {
content: "\e916";
}
.ico--folder:before {
content: "\e917";
}
.ico--drawer:before {
content: "\e918";
}
.ico--stop:before {
content: "\e919";
}
.ico--github:before {
content: "\e91a";
}
.ico--clock:before {
content: "\e91b";
}
.ico--calendar:before {
content: "\e91c";
}
.ico--flickr:before {
content: "\e91d";
}
.ico--instagram:before {
content: "\e91e";
}
.ico--twitter:before {
content: "\e91f";
}
.ico--newspaper:before {
content: "\e920";
}
.ico--cart:before {
content: "\e921";
}
.ico--home:before {
content: "\e922";
}
.ico--link:before {
content: "\e912";
}
.ico--power:before {
content: "\e90c";
}
.ico--rocket:before {
content: "\e946";
}
.ico--location:before {
content: "\e906";
}
.ico--phone:before {
content: "\e907";
}
.ico--linkedin:before {
content: "\e903";
}
.ico--facebook:before {
content: "\e902";
}
.ico--envelop:before {
content: "\e972";
}
.ico--file-text2:before {
content: "\e974";
}
.ico--price-tag:before {
content: "\e975";
}
.ico--price-tags:before {
content: "\e976";
}
.ico--stats-dots:before {
content: "\e99b";
}
.ico--bed:before {
content: "\e969";
}
.ico--train:before {
content: "\e96a";
}
.ico--bus:before {
content: "\e96b";
}
.ico--wheelchair:before {
content: "\e966";
}
.ico--thumbs-down:before {
content: "\e93d";
}
.ico--thumbs-up:before {
content: "\e93e";
}
.ico--anchor:before {
content: "\e92d";
}
.ico--paw:before {
content: "\e90b";
}
source/css/atoms/list.pcss
View file @ aac6d1d3
......@@ -8,52 +8,55 @@
@apply grid gap-4;
li {
@apply grid items-start;
@apply list-none relative;
grid-gap: .5em;
grid-template-columns: auto 1fr;
padding-left: 1em;
&:before {
@apply text-black;
@apply text-black absolute left-0;
font-family: "pirati-ui";
content: "\e919";
font-size: .5em;
font-size: .6em;
font-weight: 600;
margin-top: .7em;
margin-top: .6ex;
}
}
&.leading-tight li:before {
margin-top: .8em;
margin-top: .7ex;
}
&.leading-snug li:before {
margin-top: .6em;
margin-top: .6ex;
}
&.leading-normal li:before {
margin-top: .7em;
margin-top: .6ex;
}
&.leading-relaxed li:before {
margin-top: .6em;
margin-top: .8ex;
}
li ul {
@apply mt-4;
}
}
.unordered-list--dense,
.content-block ul {
@apply row-gap-0;
@apply gap-y-0;
}
.unordered-list--linked,
.content-block .unordered-list--linked {
li {
grid-template-columns: auto 1fr auto;
padding-right: 1em;
}
li:after {
@apply text-black;
@apply text-black absolute right-0;
font-family: "pirati-ui";
content: "\e923";
......
source/css/atoms/super-button.pcss
View file @ aac6d1d3
.super-button {
@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200;
@apply inline-flex font-alt text-4xl py-8 px-4 transition duration-200 md:px-6;
&:hover {
@apply no-underline;
}
@screen md {
@apply px-6;
}
}
.super-button__body {
......
source/css/atoms/table.pcss
View file @ aac6d1d3
......@@ -12,6 +12,13 @@
}
}
.table--light {
th,
thead td {
@apply bg-transparent text-black;
}
}
.table--striped,
.content-block table {
tr:nth-child(even) td {
......@@ -35,6 +42,15 @@
th,
thead td,
td {
@apply p-2;
@apply px-2 py-1;
}
}
.table--unxpadded {
th,
thead td,
td {
@apply px-0;
}
}

Pirátský GitLab - Home of the CopyLeft