Skip to content
Snippets Groups Projects
Commit 187b5bda authored by xaralis's avatar xaralis
Browse files

feat: chip-dropdown, simplified-navbar, thumbs, event-feed, cf2021 layouts

parent e4f37e41
Branches
Tags 1.6.4
No related merge requests found
Pipeline #1685 passed
Showing
with 1295 additions and 31 deletions
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center"> <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--lock-open"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--lock-open</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--lock"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--lock</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--dots-three-vertical"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--dots-three-vertical</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--dots-three-horizontal"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--dots-three-horizontal</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--log-out"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--log-out</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--pin"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--pin</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--edit-pencil"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--edit-pencil</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--at"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--at</code>
</div>
</div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--strategy"></i> <i class="ico--strategy"></i>
...@@ -62,6 +134,222 @@ ...@@ -62,6 +134,222 @@
</div> </div>
</div> </div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--switch"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--switch</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--loop"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--loop</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--repeat"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--repeat</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--player"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--player</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--reload"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--reload</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--refresh"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--refresh</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--update"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--update</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--synchronize"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--synchronize</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--arrows"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--arrows</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--spinner"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--spinner</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--loading"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--loading</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--loading-wheel"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--loading-wheel</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--refresh1"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--refresh1</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--repeat1"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--repeat1</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--busy"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--busy</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--wait"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--wait</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--arrow"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--arrow</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bullhorn"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bullhorn</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--bin"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--bin</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--trashcan"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--trashcan</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--remove"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--remove</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--delete"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--delete</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--recycle"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--recycle</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--dispose"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--dispose</code>
</div>
</div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--cross"></i> <i class="ico--cross"></i>
...@@ -413,6 +701,60 @@ ...@@ -413,6 +701,60 @@
</div> </div>
</div> </div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--house"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--house</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--rocket"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--rocket</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--jet"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--jet</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--speed"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--speed</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--spaceship"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--spaceship</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--fast"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--fast</code>
</div>
</div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--location"></i> <i class="ico--location"></i>
...@@ -523,64 +865,64 @@ ...@@ -523,64 +865,64 @@
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--zoom_out_map"></i> <i class="ico--eye-off"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--zoom_out_map</code> <code>.ico--eye-off</code>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--arrow-down"></i> <i class="ico--eye"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--arrow-down</code> <code>.ico--eye</code>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--link1"></i> <i class="ico--zoom_out_map"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--link1</code> <code>.ico--zoom_out_map</code>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--city"></i> <i class="ico--arrow-down"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--city</code> <code>.ico--arrow-down</code>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--beer"></i> <i class="ico--link1"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--beer</code> <code>.ico--link1</code>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--edit-pencil"></i> <i class="ico--city"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--edit-pencil</code> <code>.ico--city</code>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--at"></i> <i class="ico--beer"></i>
</div> </div>
<div class="card__body p-2 text-2xs"> <div class="card__body p-2 text-2xs">
<code>.ico--at</code> <code>.ico--beer</code>
</div> </div>
</div> </div>
......
<span class="chip chip--grey-125 chip--hoveractive text-xs">
<span class="ico--chevron-left"></span>
</span>
<span class="chip chip--grey-125 chip--hoveractive ml-1">
<span class="ico--chevron-right"></span>
</span>
<div class="space-x-2 text-sm flex items-center">
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="dropdown">
<span>Dropdown</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
<button class="btn btn--icon {{ classes }}">
<div class="btn__body-wrap">
<div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
<div class="btn__icon dropdown-button">
<i class="ico--chevron-down"></i>
<ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
<li class="dropdown-button__choice hover:bg-grey-125">
<a class="block px-2 py-3" href="#">Přidat jako návrh postupu</a>
</li>
<li class="dropdown-button__choice hover:bg-grey-125">
<a class="block px-2 py-3" href="#">Přidat jako oznámení</a>
</li>
</ul>
</div>
</div>
</button>
<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>
<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">
<span class="head-heavy-2xs">{{ person.first }} {{ person.last }}</span>
{{> atoms-basic-avatar(classes: "avatar--2xs") }}
</div>
</div>
</div>
</div>
</ui-navbar>
</ui-app>
</nav>
...@@ -18,10 +18,6 @@ ...@@ -18,10 +18,6 @@
<div class="flex-grow"> <div class="flex-grow">
{{> molecules-navbar-menu }} {{> molecules-navbar-menu }}
</div> </div>
<div class="flex items-center space-x-4">
<span class="head-xs">{{ person.first }} {{ person.last }}</span>
{{> atoms-basic-avatar(classes: "avatar--xs") }}
</div>
</div> </div>
</div> </div>
</div> </div>
......
<div class="flex flex-col flex-1 overflow-hidden {{ classes }}{{^ classes }}h-64 max-w-lg{{/ classes }}">
<div class="overflow-hidden flex flex-1">
<div class="overflow-scroll h-full space-y-px">
<div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:55</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
{{# action }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 bg-yellow-100 border-green-300 border-l-4">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:52</div>
{{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
{{# action }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-blue-300 border-l-4">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:51</div>
{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
{{# action }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-red-600 border-l-4">
<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>
{{# action }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div>
<span class="leading-tight mb-2">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:35</div>
{{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
</div>
{{# action }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-orange-300 border-l-4">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-black border-l-4">
<div class="flex items-center justify-between mb-2">
<div class="space-x-2 flex items-center">
<div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--black chip--condensed", cta: "Zablokovaný účastník")}}
</div>
{{# action }}
<a href="#" class="hover:no-underline"><i class="{{ action }} ml-auto text-sm text-grey-200 hover:text-black"></i></a>
{{/ action}}
</div>
<span class="leading-tight"><strong>{{ person.first }} {{ person.last }}</strong> byl zablokován.</span>
</div>
</div>
</div>
</div>
<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>
{{> organisms-simplified-navbar-with-actions }}
<div class="container container--wide pt-8 lg:py-24">
<article>
<div class="flex items-center justify-between mb-8">
<h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
</div>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section>
<div class="flex justify-between items-center mb-4">
<h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex items-center">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
<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">
<select>
<option value="">Podle času</option>
<option value="">Podle podpory</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
<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>
{{> molecules-chip-pagination }}
</div>
</div>
<div class="space-y-6">
<div class="flex items-start bg-yellow-100 p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1 overflow-hidden">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
{{> molecules-thumbs }}
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
</section>
</div>
<div>
<h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
{{> organisms-event-feed(classes: "w-full") }}
</div>
</div>
</article>
</div>
{{> organisms-simplified-navbar-with-avatar }}
<div class="container container--wide pt-8 lg:py-24">
<article>
<div class="flex items-center justify-between mb-8">
<h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
<div class="dropdown dropdown--right">
<i class="ico--dots-three-vertical cursor-pointer pl-2 text-lg"></i>
<ul class="dropdown__content whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--bubbles mr-2"></i>Ukončit rozpravu</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>Ukončit bod programu</a>
</li>
</ul>
</div>
</div>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8">
<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<section>
<div class="flex justify-between items-center mb-4">
<h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex items-center">
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
<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">
<select>
<option value="">Podle času</option>
<option value="">Podle podpory</option>
</select>
<span class="chip__icon ico--chevron-down"></span>
</span>
<span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
<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>
{{> molecules-chip-pagination }}
</div>
</div>
<div class="space-y-6">
<div class="flex items-start bg-yellow-100 p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</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 mr-1"></i> Zablokovat uživatele</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>Skrýt příspěvek</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</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 mr-1"></i> Zablokovat uživatele</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>Skrýt příspěvek</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--grey-500 chip--condensed ml-2", cta: "Čeká na zpracování")}}
</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--bullhorn mr-1"></i> Vyhlásit procedurální návrh</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> Odmítnout procedurální návrh</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--green-300 chip--condensed ml-2", cta: "Schválený")}}
</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 mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
<a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--blue-300 chip--condensed ml-2", cta: "Vyhlášený")}}
</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 mr-1"></i> Schválit</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> Zamítnout</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
<div class="flex items-center space-x-4">
{{> molecules-thumbs }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
</li>
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--eye-off mr-1"></i>Skrýt příspěvek</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--blue-300 chip--condensed ml-2", cta: "Vyhlášený")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
<div class="flex items-center space-x-4">
{{> molecules-thumbs }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
<div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
<img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
<div class="flex-1">
<div class="mb-1">
<div class="flex justify-between">
<div class="flex items-center">
<span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
{{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div>
<div class="flex items-center space-x-4">
{{> molecules-thumbs }}
<div class="dropdown dropdown--right">
<i class="ico--dots-three-vertical cursor-pointer"></i>
<ul class="dropdown__content text-xs whitespace-no-wrap">
<li class="dropdown__content-item bg-white hover:bg-grey-125">
<a class="block px-2 py-3" href="#"><i class="ico--lock mr-1"></i> Zablokovat uživatele</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p>
</div>
</div>
</div>
<div class="my-8 space-y-4">
{{> molecules-textarea-field(nolabel: true) }}
<div class="space-x-4">
{{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
<span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
</div>
</div>
</section>
</div>
<div>
<h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
{{> organisms-event-feed(classes: "w-full", action: "ico--trashcan") }}
</div>
</div>
</article>
</div>
{{> organisms-simplified-navbar }} {{> organisms-simplified-navbar-with-avatar }}
<div class="container container--wide pt-8 lg:py-24"> <div class="container container--wide pt-8 lg:py-24">
<article class="space-y-8"> <article>
<div class="flex items-center justify-between mb-8">
<h1 class="head-alt-lg mb-0 pt-1 pr-8">Bod č. 1: Grilování leadera</h1>
</div>
<div class="grid grid-cols-3 gap-8" style="height: 30rem;"> <div class="grid grid-cols-3 gap-8">
<div class="col-span-2 space-y-8"> <div class="col-span-2 space-y-8">
<iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
...@@ -11,7 +14,7 @@ ...@@ -11,7 +14,7 @@
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2> <h2 class="head-alt-base whitespace-no-wrap">Příspěvky v rozpravě</h2>
<div class="flex items-center"> <div class="flex items-center">
<span class="chip chip--grey-125 chip--select text-xs"> <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
<select> <select>
<option value="">Vše</option> <option value="">Vše</option>
<option value="">Jen aktivní</option> <option value="">Jen aktivní</option>
...@@ -19,14 +22,14 @@ ...@@ -19,14 +22,14 @@
</select> </select>
<span class="chip__icon ico--chevron-down"></span> <span class="chip__icon ico--chevron-down"></span>
</span> </span>
<span class="chip chip--grey-125 chip--select text-xs ml-1"> <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1">
<select> <select>
<option value="">Podle času</option> <option value="">Podle času</option>
<option value="">Podle podpory</option> <option value="">Podle podpory</option>
</select> </select>
<span class="chip__icon ico--chevron-down"></span> <span class="chip__icon ico--chevron-down"></span>
</span> </span>
<span class="chip chip--grey-125 chip--select text-xs mr-4 ml-1"> <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs mr-4 ml-1">
<select> <select>
<option value="">Návrhy i příspěvky</option> <option value="">Návrhy i příspěvky</option>
<option value="">Jen návrhy</option> <option value="">Jen návrhy</option>
...@@ -35,15 +38,7 @@ ...@@ -35,15 +38,7 @@
<span class="chip__icon ico--chevron-down"></span> <span class="chip__icon ico--chevron-down"></span>
</span> </span>
<span class="chip chip--grey-125 text-xs"> {{> molecules-chip-pagination }}
<span class="chip__icon ico--chevron-left mr-2"></span>
Novější
</span>
<span class="chip chip--grey-125 text-xs ml-1">
Starší
<span class="chip__icon ico--chevron-right ml-2"></span>
</span>
</div> </div>
</div> </div>
...@@ -59,16 +54,7 @@ ...@@ -59,16 +54,7 @@
<span class="text-grey-200 ml-1 text-sm">@ 11:46</span> <span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div> </div>
<div class="space-x-2 text-sm flex items-center"> {{> molecules-thumbs }}
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
</div> </div>
</div> </div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p> <p class="text-black leading-normal">{{ excerpt.medium }}</p>
...@@ -85,16 +71,7 @@ ...@@ -85,16 +71,7 @@
<span class="text-grey-200 ml-1 text-sm">@ 11:42</span> <span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
</div> </div>
<div class="space-x-2 text-sm flex items-center"> {{> molecules-thumbs }}
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
</div> </div>
</div> </div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p> <p class="text-black leading-normal">{{ excerpt.medium }}</p>
...@@ -109,18 +86,9 @@ ...@@ -109,18 +86,9 @@
<span class="font-bold">{{ person.first }} {{ person.last }}</span> <span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span> <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:40</span> <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}} {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
</div>
<div class="space-x-2 text-sm flex items-center">
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div> </div>
{{> molecules-thumbs }}
</div> </div>
</div> </div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p> <p class="text-black leading-normal">{{ excerpt.medium }}</p>
...@@ -138,16 +106,7 @@ ...@@ -138,16 +106,7 @@
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div> </div>
<div class="space-x-2 text-sm flex items-center"> {{> molecules-thumbs }}
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
</div> </div>
</div> </div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p> <p class="text-black leading-normal">{{ excerpt.medium }}</p>
...@@ -162,19 +121,10 @@ ...@@ -162,19 +121,10 @@
<span class="font-bold">{{ person.first }} {{ person.last }}</span> <span class="font-bold">{{ person.first }} {{ person.last }}</span>
<span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span> <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
<span class="text-grey-200 ml-1 text-sm">@ 11:30</span> <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}} {{> molecules-chip(classes: "chip--cyan-200 chip--condensed ml-2", cta: "Návrh postupu")}}
{{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}} {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
</div> </div>
<div class="space-x-2 text-sm flex items-center"> {{> molecules-thumbs }}
<button class="text-blue-300 flex items-center space-x-1">
<span class="font-bold">6</span>
<i class="ico--thumbs-up"></i>
</button>
<button class="text-red-600 flex items-center space-x-1">
<i class="ico--thumbs-down transform -scale-x-1"></i>
<span class="font-bold">2</span>
</button>
</div>
</div> </div>
</div> </div>
<p class="text-black leading-normal">{{ excerpt.medium }}</p> <p class="text-black leading-normal">{{ excerpt.medium }}</p>
...@@ -185,75 +135,15 @@ ...@@ -185,75 +135,15 @@
<div class="my-8 space-y-4"> <div class="my-8 space-y-4">
{{> molecules-textarea-field(nolabel: true) }} {{> molecules-textarea-field(nolabel: true) }}
<div class="space-x-4"> <div class="space-x-4">
{{> atoms-basic-button(classes: "text-base btn--black btn--hoveractive", cta: "Přidat příspěvek") }} {{> atoms-icon-button(classes: "text-base btn--black btn--hoveractive", icon: "ico--chevron-down", cta: "Přidat příspěvek") }}
<span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span> <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
<div class="flex flex-col flex-1 overflow-hidden"> <div>
<h2 class="head-alt-base mb-4 pt-1">Oznámení</h2> <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
<div class="overflow-hidden flex flex-1"> {{> organisms-event-feed(classes: "w-full") }}
<div class="overflow-scroll h-full space-y-px">
<div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<div class="font-bold text-sm">11:55</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="p-3 bg-yellow-100 border-green-300 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<div class="font-bold text-sm">11:52</div>
{{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-blue-300 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<div class="font-bold text-sm">11:51</div>
{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="p-3 border-red-600 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<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>
<span class="leading-tight mb-2">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<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>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="p-3 border-orange-300 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<div class="font-bold text-sm">11:28</div>
{{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="bg-grey-50 p-3 border-green-300 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<div class="font-bold text-sm">11:20</div>
{{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
<div class="p-3 border-blue-300 border-l-4">
<div class="flex items-center space-x-2 mb-2">
<div class="font-bold text-sm">11:00</div>
{{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
</div>
<span class="leading-tight">{{ excerpt.short }}</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
......
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
} }
@responsive { @responsive {
.avatar--2xs {
@apply w-8;
}
.avatar--xs { .avatar--xs {
@apply w-12; @apply w-12;
} }
......
@font-face { @font-face {
font-family: 'pirati-ui'; font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?0709c769c818c71145690e5adb0caf5f'); src: url('../fonts/pirati-ui.eot?71e4e2c92abaa13920ac90278872d7d4');
src: url('../fonts/pirati-ui.eot?0709c769c818c71145690e5adb0caf5f#iefix') format('embedded-opentype'), src: url('../fonts/pirati-ui.eot?71e4e2c92abaa13920ac90278872d7d4#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?0709c769c818c71145690e5adb0caf5f') format('truetype'), url('../fonts/pirati-ui.ttf?71e4e2c92abaa13920ac90278872d7d4') format('truetype'),
url('../fonts/pirati-ui.woff?0709c769c818c71145690e5adb0caf5f') format('woff'), url('../fonts/pirati-ui.woff?71e4e2c92abaa13920ac90278872d7d4') format('woff'),
url('../fonts/pirati-ui.svg?0709c769c818c71145690e5adb0caf5f#pirati-ui') format('svg'); url('../fonts/pirati-ui.svg?71e4e2c92abaa13920ac90278872d7d4#pirati-ui') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
...@@ -26,6 +26,14 @@ ...@@ -26,6 +26,14 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.ico--lock-open:before { content: "\e949"; }
.ico--lock:before { content: "\e94a"; }
.ico--dots-three-vertical:before { content: "\e940"; }
.ico--dots-three-horizontal:before { content: "\e941"; }
.ico--log-out:before { content: "\e942"; }
.ico--pin:before { content: "\e943"; }
.ico--edit-pencil:before { content: "\e929"; }
.ico--at:before { content: "\e905"; }
.ico--strategy:before { content: "\e932"; } .ico--strategy:before { content: "\e932"; }
.ico--pig:before { content: "\e928"; } .ico--pig:before { content: "\e928"; }
.ico--thermometer:before { content: "\e90a"; } .ico--thermometer:before { content: "\e90a"; }
...@@ -33,6 +41,30 @@ ...@@ -33,6 +41,30 @@
.ico--stackshare:before { content: "\e90f"; } .ico--stackshare:before { content: "\e90f"; }
.ico--open-source:before { content: "\e90e"; } .ico--open-source:before { content: "\e90e"; }
.ico--search:before { content: "\e913"; } .ico--search:before { content: "\e913"; }
.ico--switch:before { content: "\e94b"; }
.ico--loop:before { content: "\e94c"; }
.ico--repeat:before { content: "\e94c"; }
.ico--player:before { content: "\e94c"; }
.ico--reload:before { content: "\e94c"; }
.ico--refresh:before { content: "\e94c"; }
.ico--update:before { content: "\e94c"; }
.ico--synchronize:before { content: "\e94c"; }
.ico--arrows:before { content: "\e94c"; }
.ico--spinner:before { content: "\e94d"; }
.ico--loading:before { content: "\e94d"; }
.ico--loading-wheel:before { content: "\e94d"; }
.ico--refresh1:before { content: "\e94d"; }
.ico--repeat1:before { content: "\e94d"; }
.ico--busy:before { content: "\e94d"; }
.ico--wait:before { content: "\e94d"; }
.ico--arrow:before { content: "\e94d"; }
.ico--bullhorn:before { content: "\e944"; }
.ico--bin:before { content: "\e945"; }
.ico--trashcan:before { content: "\e945"; }
.ico--remove:before { content: "\e945"; }
.ico--delete:before { content: "\e945"; }
.ico--recycle:before { content: "\e945"; }
.ico--dispose:before { content: "\e945"; }
.ico--cross:before { content: "\e937"; } .ico--cross:before { content: "\e937"; }
.ico--checkbox-checked:before { content: "\e938"; } .ico--checkbox-checked:before { content: "\e938"; }
.ico--quill:before { content: "\e939"; } .ico--quill:before { content: "\e939"; }
...@@ -72,6 +104,12 @@ ...@@ -72,6 +104,12 @@
.ico--home:before { content: "\e922"; } .ico--home:before { content: "\e922"; }
.ico--link:before { content: "\e912"; } .ico--link:before { content: "\e912"; }
.ico--power:before { content: "\e90c"; } .ico--power:before { content: "\e90c"; }
.ico--house:before { content: "\e93f"; }
.ico--rocket:before { content: "\e946"; }
.ico--jet:before { content: "\e946"; }
.ico--speed:before { content: "\e946"; }
.ico--spaceship:before { content: "\e946"; }
.ico--fast:before { content: "\e946"; }
.ico--location:before { content: "\e906"; } .ico--location:before { content: "\e906"; }
.ico--phone:before { content: "\e907"; } .ico--phone:before { content: "\e907"; }
.ico--linkedin:before { content: "\e903"; } .ico--linkedin:before { content: "\e903"; }
...@@ -84,13 +122,13 @@ ...@@ -84,13 +122,13 @@
.ico--chevron-left:before { content: "\e924"; } .ico--chevron-left:before { content: "\e924"; }
.ico--chevron-down:before { content: "\e925"; } .ico--chevron-down:before { content: "\e925"; }
.ico--chevron-up:before { content: "\e926"; } .ico--chevron-up:before { content: "\e926"; }
.ico--eye-off:before { content: "\e947"; }
.ico--eye:before { content: "\e948"; }
.ico--zoom_out_map:before { content: "\e927"; } .ico--zoom_out_map:before { content: "\e927"; }
.ico--arrow-down:before { content: "\e911"; } .ico--arrow-down:before { content: "\e911"; }
.ico--link1:before { content: "\e910"; } .ico--link1:before { content: "\e910"; }
.ico--city:before { content: "\e908"; } .ico--city:before { content: "\e908"; }
.ico--beer:before { content: "\e909"; } .ico--beer:before { content: "\e909"; }
.ico--edit-pencil:before { content: "\e929"; }
.ico--at:before { content: "\e905"; }
.ico--thumbs-down:before { content: "\e93d"; } .ico--thumbs-down:before { content: "\e93d"; }
.ico--thumbs-up:before { content: "\e93e"; } .ico--thumbs-up:before { content: "\e93e"; }
.ico--tasks:before { content: "\e93c"; } .ico--tasks:before { content: "\e93c"; }
......
...@@ -46,6 +46,21 @@ ...@@ -46,6 +46,21 @@
@apply bg-red-600 text-white; @apply bg-red-600 text-white;
} }
.chip--hoveractive:hover {
&.chip--black {
@apply bg-grey-700;
}
&.chip--grey-700 {
@apply bg-grey-500;
}
&.chip--grey-500 {
@apply bg-grey-300;
}
&.chip--grey-125 {
@apply bg-grey-100;
}
}
.chip__icon { .chip__icon {
@apply self-center cursor-pointer; @apply self-center cursor-pointer;
...@@ -59,13 +74,8 @@ ...@@ -59,13 +74,8 @@
.chip--select { .chip--select {
@apply relative p-0 inline-flex items-center; @apply relative p-0 inline-flex items-center;
&:hover,
&:focus {
@apply bg-opacity-50;
}
select { select {
@apply w-full py-2 pl-3 z-10 cursor-pointer; @apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;
appearance: none; appearance: none;
background: none; background: none;
...@@ -81,6 +91,8 @@ ...@@ -81,6 +91,8 @@
.chip__icon { .chip__icon {
@apply @apply
absolute
right-0
pl-2 pr-3 pl-2 pr-3
cursor-pointer; cursor-pointer;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment