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

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Show changes
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 1331 additions and 26 deletions
source/_patterns/02-organisms/02-simplified-footer/simplified-footer.mustache 0 → 100644
View file @ aac6d1d3
<footer class="border-t border-grey-125 pt-4 flex flex-col md:flex-row md:justify-between space-y-4">
<img src="/images/logo-full-black.svg" class="w-32" alt="Pirátská strana" />
<p>Piráti, 2021. Všechna práva vyhlazena.</p>
</footer>
source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-actions.mustache 0 → 100644
View file @ aac6d1d3
<nav class="navbar navbar--simple __js-root">
<ui-app inline-template>
<ui-navbar inline-template>
<div>
<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
<a href="#">
<img src="/images/logo-round-white.svg" class="w-8" />
</a>
<span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
</div>
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a href="#" @click="show = !show" class="no-underline hover:no-underline">
<i class="ico--menu text-3xl"></i>
</a>
</div>
<div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
<div class="flex-grow">
{{> molecules-navbar-menu }}
</div>
<div class="flex items-center space-x-4">
{{> atoms-button(classes: "btn--grey-125 btn--hoveractive btn--to-white", cta: "Přihlášení") }}
</div>
</div>
</div>
</div>
</ui-navbar>
</ui-app>
</nav>
source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar-with-avatar.mustache 0 → 100644
View file @ aac6d1d3
<nav class="navbar navbar--simple __js-root">
<ui-app inline-template>
<ui-navbar inline-template>
<div>
<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
<a href="#">
<img src="/images/logo-round-white.svg" class="w-8" />
</a>
<span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
</div>
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a href="#" @click="show = !show" class="no-underline hover:no-underline">
<i class="ico--menu text-3xl"></i>
</a>
</div>
<div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
<div class="flex-grow">
{{> molecules-navbar-menu }}
</div>
</div>
<div class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-row items-center">
<div class="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
<span class="relative inline-flex h-4 w-4 mr-4" title="Jsi online">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
<span class="inline-flex rounded-full w-4 h-4 bg-green-400"></span>
</span>
<span class="hidden md:block text-grey-200">Jsi online</span>
</div>
<div class="flex items-center space-x-4">
<span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
{{> atoms-basic-avatar(classes: "avatar--2xs") }}
<button class="text-grey-200 hover:text-white"><i class="ico--log-out"></i></button>
</div>
</div>
</div>
</div>
</ui-navbar>
</ui-app>
</nav>
source/_patterns/02-organisms/02-simplified-navbar/simplified-navbar.mustache 0 → 100644
View file @ aac6d1d3
<nav class="navbar navbar--simple __js-root">
<ui-app inline-template>
<ui-navbar inline-template>
<div>
<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
<a href="#">
<img src="/images/logo-round-white.svg" class="w-8" />
</a>
<span class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Celostátní fórum 2021</span>
</div>
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a href="#" @click="show = !show" class="no-underline hover:no-underline">
<i class="ico--menu text-3xl"></i>
</a>
</div>
<div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto flex items-center">
<div class="flex-grow">
{{> molecules-navbar-menu }}
</div>
</div>
</div>
</div>
</ui-navbar>
</ui-app>
</nav>
source/_patterns/02-organisms/03-hero/elections-hero-multiple-candidacies.mustache 0 → 100644
View file @ aac6d1d3
<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-2 lg:col-span-3 order-1">
{{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
<h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
<img src="/images/hero-profile-img.png" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" />
</div>
</div>
<div class="container container--default text-white text-center md:text-left">
<hr class="hr--big opacity-25" />
<div class="leading-loose grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 text-shadow-lg text-base md:text-sm">
<span><a href="#" class="font-bold">Radnice</a></span>
<span><a href="#">Praha 1</a></span>
<span><a href="#">Praha 2</a></span>
<span><a href="#">Praha 3</a></span>
<span><a href="#">Praha 4</a></span>
<span><a href="#">Praha 5</a></span>
<span><a href="#">Praha 6</a></span>
<span><a href="#">Praha 7</a></span>
<span><a href="#">Praha 8</a></span>
<span><a href="#">Praha 9</a></span>
<span><a href="#">Praha 10</a></span>
<span><a href="#">Praha 11</a></span>
<span><a href="#">Praha 12</a></span>
</div>
</div>
</article>
source/_patterns/02-organisms/03-hero/elections-hero.mustache
View file @ aac6d1d3
<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-2 lg:col-span-3 order-1">
{{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
<h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
<h1 class="head-alt-lg md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8 space-y-4">
{{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0 text-center md:text-left">
{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
{{> atoms-basic-button(classes: "block md:inline-block m-auto btn--white btn--hoveractive btn--autowidth text-base md:text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
......
source/_patterns/02-organisms/03-hero/hero.mustache
View file @ aac6d1d3
<article class="hero {{ classes }}">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md sm:head-alt-lg md:head-alt-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8">
{{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
{{> atoms-icon-button(classes: "btn--black block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg", icon: "ico--chevron-right") }}
</div>
</div>
<div class="lg:row-span-5 lg:col-span-4 order-2">
......
source/_patterns/02-organisms/03-hero/home-hero.mustache
View file @ aac6d1d3
<article class="hero py-8 lg:py-16 {{ classes }}">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
<div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
<div class="lg:row-span-2 lg:col-span-3 order-1">
<h1 class="head-alt-md md:head-alt-xl">Piráti Pardubického kraje</h1>
<h1 class="head-alt-lg md:head-alt-xl">Piráti Pardubického kraje</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8 space-y-4">
{{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
{{> atoms-icon-button(icon: "ico--chevron-right", classes: "block md:inline-block m-auto btn--hoveractive btn--autowidth text-base md:text-lg") }}
</div>
</div>
<div class="lg:row-span-3 lg:col-span-4 order-2">
......
source/_patterns/02-organisms/03-hero/image-hero.mustache
View file @ aac6d1d3
<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container grid lg:grid-rows-5 lg:grid-cols-7 gap-2 items-center">
<div class="lg:row-span-4 lg:col-span-3 order-1">
<h1 class="head-alt-md md:head-alt-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
</div>
<div class="lg:row-span-1 lg:col-span-3 order-3">
<div class="mt-4 md:mt-8 space-y-4">
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
{{> atoms-basic-button(classes: "btn--white btn--fullwidth md:btn--autowidth text-lg") }}
</div>
</div>
<div class="lg:row-span-5 lg:col-span-4 order-2">
<img src="/images/hero-profile-img.png" />
<article class="hero hero--image hero--condensed {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container text-center">
<h1 class="head-alt-md md:head-alt-xl text-shadow-lg">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
<div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
{{> atoms-basic-button(classes: "btn--white btn--autowidth text-sm md:text-lg") }}
</div>
</div>
</article>
source/_patterns/02-organisms/08-event-feed/event-feed-with-action-menu.mustache 0 → 100644
View file @ aac6d1d3
{{> organisms-event-feed(withActionMenu: true) }}
source/_patterns/02-organisms/08-event-feed/event-feed.mustache 0 → 100644
View file @ aac6d1d3
<div class="space-y-px {{ classes }}">
<div class="bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50 ">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:55</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-yellow-100 border-green-400 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500 bg-opacity-50">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:52</div>
{{> molecules-chip(classes: "chip--green-400 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:51</div>
{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:43</div>
{{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
<a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:35</div>
{{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--pencil text-2xs mr-2"></i>Upravit</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}px-4 py-2 lg:px-8 lg:py-3 {{/ itemPadding }} transition duration-500">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
</div>
{{# withActionMenu }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-horizontal cursor-pointer ml-auto text-sm text-grey-200 hover:text-black"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bin text-2xs mr-2"></i>Smazat</a>
</li>
</ul>
</div>
{{/ withActionMenu }}
</div>
<span class="leading-tight text-sm lg:text-base"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
</div>
</div>
source/_patterns/02-organisms/09-chip-dropdown/chip-dropdown.mustache 0 → 100644
View file @ aac6d1d3
<div class="dropdown">
<div class="chip chip--grey-125">
<span>Select</span>
<span class="chip__icon ico--chevron-down ml-2"></span>
</div>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
</ul>
</div>
<div class="dropdown dropdown--right">
<div class="chip chip--grey-125">
<span>Select</span>
<span class="chip__icon ico--chevron-down ml-2"></span>
</div>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
<li class="dropdown__content-item bg-grey-125 hover:bg-grey-100"><a class="block px-2 py-3" href="#">{{ headline.short }}</a></li>
</ul>
</div>
source/_patterns/02-organisms/10-loading-screen/loading-screen.mustache 0 → 100644
View file @ aac6d1d3
<div class="h-screen w-screen flex justify-center items-center">
<div class="text-center">
<img
src="/images/logo-round-black.svg"
class="w-24 mb-2 inline-block"
alt="Pirátská strana"
/>
<h1 class="head-alt-lg mb-2">Název aplikace</h1>
<p class="text-lg">Načítám aplikaci ...</p>
</div>
</div>
source/_patterns/02-organisms/11-vertical-navbar/vertical-navbar.mustache 0 → 100644
View file @ aac6d1d3
<div class="vertical-navbar">
<ul class="vertical-navbar__items">
<li class="vertical-navbar__item"><a aria-current="page" href="/">Rozcestník</a></li>
<li class="vertical-navbar__item vertical-navbar__item--active"><a aria-current="page" href="/registrace">Registrace</a></li>
<li class="vertical-navbar__item"><a href="/ubytovani">Ubytování</a></li>
<li class="vertical-navbar__item"><a href="/mapa">Mapa</a></li>
<li class="vertical-navbar__item"><a href="/organizatori">Organizátoři</a></li>
<li class="vertical-navbar__item"><a href="/pro-dobrovolniky">Pro dobrovolníky</a></li>
</ul>
</div>
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
This diff is collapsed.
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/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;
}

Pirátský GitLab - Home of the CopyLeft