feat: modals, cf2021 modals, cf2021 actions

source/_patterns/00-atoms/15-form-fields/13-textarea.mustache

-<textarea class="text-input form-field__control {{ classes }}" value="" rows="10" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}></textarea>
+<textarea class="text-input form-field__control {{ classes }}" value="" rows="{{ rows }}{{^ rows }}10{{/ rows }}" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>{{ textareaContent }}</textarea>

source/_patterns/01-molecules/02-cards/card-actions.mustache

+<div class="card">
+  <div class="card__body">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="card-headline">Ukončit rozpravu?</h1>
+      <button><i class="ico--close"></i></button>
+    </div>
+    <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+  </div>
+  <div class="card-actions space-x-1">
+    {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
+    {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+  </div>
+</div>
+
+
+<div class="card">
+  <div class="card__body">
+    <div class="flex items-center justify-between mb-4">
+      <h1 class="card-headline">Ukončit rozpravu?</h1>
+      <button><i class="ico--close"></i></button>
+    </div>
+    <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+  </div>
+  <div class="card-actions card-actions--right space-x-1">
+    {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
+    {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+  </div>
+</div>

source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache

@@ -5,10 +5,7 @@
       <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>
+          <a class="block px-4 py-3" href="#">Přidat jako návrh postupu</a>
         </li>
       </ul>
     </div>

source/_patterns/01-molecules/21-modal/modal.mustache

+<div class="modal__overlay hidden toggle-modal-sample-1" id="modal-sample-1">
+  <div class="modal__content" role="dialog">
+    <div class="modal__container w-full max-w-2xl" role="dialog">
+      <div class="modal__container-body">
+        {{> molecules-image-card }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<button class="toggle-modal-sample-1">Toggle modal</button>
+
+<script>
+  var toggles = document.getElementsByClassName("toggle-modal-sample-1");
+  var modal = document.getElementById("modal-sample-1");
+
+  for (var i = 0; i < toggles.length; i++) {
+    toggles[i].addEventListener("click", function () {
+      modal.classList.toggle("hidden");
+    })
+
+  }
+
+</script>

source/_patterns/02-organisms/08-event-feed/event-feed.mustache

 <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="bg-opacity-50 bg-yellow-100 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <div class="flex items-center justify-between mb-2">
           <div class="space-x-2 flex items-center">
             <div class="font-bold text-sm">11:55</div>
@@ -13,7 +13,7 @@
         </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="bg-opacity-50 bg-yellow-100 border-green-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <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>
@@ -25,7 +25,7 @@
         </div>
         <span class="leading-tight">{{ excerpt.short }}</span>
       </div>
-      <div class="bg-grey-50 p-3 border-blue-300 border-l-4">
+      <div class="bg-grey-50 bg-opacity-50 border-blue-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <div class="flex items-center justify-between mb-2">
           <div class="space-x-2 flex items-center">
             <div class="font-bold text-sm">11:51</div>
@@ -37,7 +37,7 @@
         </div>
         <span class="leading-tight">{{ excerpt.short }}</span>
       </div>
-      <div class="bg-grey-50 p-3 border-red-600 border-l-4">
+      <div class="bg-grey-50 bg-opacity-50 border-red-600 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <div class="flex items-center justify-between mb-2">
           <div class="space-x-2 flex items-center">
             <div class="font-bold text-sm">11:43</div>
@@ -50,7 +50,7 @@
         </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="bg-grey-50 bg-opacity-50 border-cyan-500 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <div class="flex items-center justify-between mb-2">
           <div class="space-x-2 flex items-center">
             <div class="font-bold text-sm">11:35</div>
@@ -62,7 +62,7 @@
         </div>
         <span class="leading-tight">{{ excerpt.short }}</span>
       </div>
-      <div class="bg-grey-50 p-3 border-orange-300 border-l-4">
+      <div class="bg-grey-50 bg-opacity-50 border-orange-300 border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <div class="flex items-center justify-between mb-2">
           <div class="space-x-2 flex items-center">
             <div class="font-bold text-sm">11:28</div>
@@ -71,7 +71,7 @@
         </div>
         <span class="leading-tight">{{ excerpt.short }}</span>
       </div>
-      <div class="bg-grey-50 p-3 border-black border-l-4">
+      <div class="bg-grey-50 bg-opacity-50 border-black border-l-2 {{ itemPadding }}{{^ itemPadding }}p-3{{/ itemPadding }}">
         <div class="flex items-center justify-between mb-2">
           <div class="space-x-2 flex items-center">
             <div class="font-bold text-sm">11:28</div>

source/_patterns/03-templates/cf2021/anonymous.mustache

@@ -43,7 +43,7 @@
           </div>
 
           <div class="space-y-6">
-            <div class="flex items-start bg-yellow-100 p-2 -ml-2">
+            <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
               <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
@@ -135,8 +135,12 @@
         </section>
       </div>
       <div>
-        <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
-        {{> organisms-event-feed(classes: "w-full") }}
+        <div class="lg:card lg:elevation-10">
+          <div class="lg:card__body lg:pb-0">
+            <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
+          </div>
+          {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-3") }}
+        </div>
       </div>
     </div>
 

source/_patterns/03-templates/cf2021/chairman.mustache

@@ -8,7 +8,10 @@
         <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>
+            <a class="block px-3 py-3" href="#"><i class="ico--edit-pencil mr-2"></i>Přejmenovat bod programu</a>
+          </li>
+          <li class="dropdown__content-item bg-white hover:bg-grey-125">
+            <a class="block px-3 py-3" href="#" id="js-end-discussion"><i class="ico--bubbles mr-2"></i>Ukončit rozpravu</a>
           </li>
           <li class="dropdown__content-item bg-white hover:bg-grey-125">
             <a class="block px-3 py-3" href="#"><i class="ico--switch mr-2"></i>Ukončit bod programu</a>
@@ -55,7 +58,7 @@
           </div>
 
           <div class="space-y-6">
-            <div class="flex items-start bg-yellow-100 p-2 -ml-2">
+            <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
               <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
               <div class="flex-1">
                 <div class="mb-1">
@@ -133,7 +136,7 @@
                         <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>
+                            <a class="block px-2 py-3" href="#" id="js-announce-proposal"><i class="ico--bullhorn mr-1"></i> Vyhlásit procedurální návrh</a>
                           </li>
                           <li class="dropdown__content-item bg-white hover:bg-grey-125">
                             <a class="block px-2 py-3" href="#"><i class="ico--thumbs-down mr-1"></i> Odmítnout procedurální návrh</a>
@@ -149,34 +152,7 @@
                 <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">
@@ -251,9 +227,9 @@
                     <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>
+                      <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--blue-300 chip--condensed ml-2", cta: "Vyhlášený")}}
+                      {{> molecules-chip(classes: "chip--green-300 chip--condensed ml-2", cta: "Schválený")}}
                       {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                     </div>
                     <div class="flex items-center space-x-4">
@@ -304,7 +280,7 @@
           </div>
 
           <div class="my-8 space-y-4">
-            {{> molecules-textarea-field(nolabel: true) }}
+            {{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
             <div class="space-x-4">
               {{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
               <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
@@ -313,10 +289,80 @@
         </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 class="lg:card lg:elevation-10">
+          <div class="lg:card__body lg:pb-0">
+            <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
+          </div>
+          {{> organisms-event-feed(classes: "w-full", action: "ico--trashcan", itemPadding: "px-8 py-3") }}
+          <div class="lg:card__body">
+            {{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text oznámení", rows: 3) }}
+            {{> atoms-basic-button(cta: "Přidat oznámení", classes: "btn--black btn--hoveractive text-sm mt-2") }}
+          </div>
+        </div>
       </div>
     </div>
 
   </article>
 </div>
+
+<div class="modal__overlay hidden" id="js-announce-proposal-modal">
+  <div class="modal__content" role="dialog">
+    <div class="modal__container w-full max-w-xl" role="dialog">
+      <div class="modal__container-body">
+        <div class="card">
+          <div class="card__body">
+            <div class="flex items-center justify-between mb-4">
+              <h1 class="card-headline">Vyhlásit procedurální návrh</h1>
+              <button><i class="ico--close"></i></button>
+            </div>
+            <p class="card-body-text mb-2">Návrh můžete před vyhlášením ještě upravit. Pro pokročilé formátování použijte Markdown.</p>
+            {{> molecules-textarea-field(nolabel: true, textareaContent: "lorem ipsum dolor sit amet") }}
+          </div>
+          <div class="card-actions card-actions--right space-x-2">
+            {{> atoms-basic-button(classes: "btn--blue-300 text-sm btn--hoveractive", cta: "Vyhlásit") }}
+            {{> atoms-basic-button(classes: "btn--grey-125 text-sm btn--hoveractive", cta: "Zrušit") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal__overlay hidden" id="js-end-discussion-modal">
+  <div class="modal__content" role="dialog">
+    <div class="modal__container w-full max-w-md" role="dialog">
+      <div class="modal__container-body">
+        <div class="card">
+          <div class="card__body">
+            <div class="flex items-center justify-between mb-4">
+              <h1 class="card-headline">Ukončit rozpravu?</h1>
+              <button><i class="ico--close"></i></button>
+            </div>
+            <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+          </div>
+          <div class="card-actions card-actions--right space-x-1">
+            {{> atoms-basic-button(classes: "btn--blue-300 text-sm btn--hoveractive", cta: "Ukončit") }}
+            {{> atoms-basic-button(classes: "btn--red-600 text-sm btn--hoveractive", cta: "Zrušit") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  var announceProposalElem = document.getElementById("js-announce-proposal");
+  var announceProposalModalElem = document.getElementById("js-announce-proposal-modal");
+  var endDiscussionElem = document.getElementById("js-end-discussion");
+  var endDiscussionModalElem = document.getElementById("js-end-discussion-modal");
+
+  endDiscussionElem.addEventListener("click", function () {
+    endDiscussionModalElem.classList.remove("hidden");
+    return false;
+  })
+
+  announceProposalElem.addEventListener("click", function () {
+    announceProposalModalElem.classList.remove("hidden");
+    return false;
+  })
+</script>

source/_patterns/03-templates/cf2021/user.mustache

@@ -12,7 +12,7 @@
 
         <section>
           <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-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
             <div class="flex items-center">
               <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs">
                 <select>
@@ -43,7 +43,7 @@
           </div>
 
           <div class="space-y-6">
-            <div class="flex items-start bg-yellow-100 p-2 -ml-2">
+            <div class="flex items-start bg-yellow-100 bg-opacity-50 p-2 -ml-2">
               <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
               <div class="flex-1 overflow-hidden">
                 <div class="mb-1">
@@ -134,30 +134,21 @@
           </div>
 
           <div class="my-8 space-y-4">
-            {{> molecules-textarea-field(nolabel: true) }}
+            {{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
             <div class="space-x-4">
-              <button class="btn btn--icon">
-                <div class="btn__body-wrap">
-                  <div class="btn__body">Přidat příspěvek</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>
-                    </ul>
-                  </div>
-                </div>
-              </button>
-
+              {{> 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") }}
+        <div class="lg:card lg:elevation-10">
+          <div class="lg:card__body lg:pb-0">
+            <h2 class="head-heavy-sm mb-4">Oznámení</h2>
+          </div>
+          {{> organisms-event-feed(classes: "w-full", itemPadding: "px-8 py-4") }}
+        </div>
       </div>
     </div>
 

source/css/atoms/card.pcss

@@ -23,3 +23,12 @@
 .card-body-text {
   @apply font-light leading-normal text-sm break-words ;
 }
+
+.card-actions {
+  @apply px-8 py-4 border-t border-grey-125 flex items-center;
+}
+
+
+.card-actions--right {
+  @apply justify-end;
+}

source/css/molecules/form-field.pcss

@@ -14,7 +14,7 @@
     @apply absolute w-full h-full pointer-events-none;
 
     content: "";
-    box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.1);
+    box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05);
   }
 
   &,

source/css/molecules/modal.pcss

+.modal-blur {
+  /* Add the blur effect */
+  /* filter: blur(8px);
+  -webkit-filter: blur(8px); */
+}
+
+.modal__overlay {
+  @apply
+    fixed
+    top-0 left-0 bottom-0 right-0
+    z-50
+    flex items-center flex-row
+    bg-white bg-opacity-75
+    cursor-pointer overflow-auto;
+}
+
+.modal__content {
+  @apply
+    inline-block
+    flex flex-row flex-grow items-center justify-center
+    max-w-full
+    h-full
+    m-auto
+    cursor-auto pointer-events-none outline-none;
+}
+
+.modal__container {
+  @apply
+    h-full
+    p-3
+    pointer-events-auto shadow-md;
+
+  @screen md {
+    @apply h-auto p-0;
+  }
+
+  .modal__container-body {
+    @apply min-h-full bg-white;
+  }
+}
+
+.ReactModal__Body--open {
+  @apply overflow-hidden;
+}

source/css/style.pcss

@@ -47,6 +47,7 @@
 @import "./molecules/dropdown-button.pcss";
 @import "./molecules/flip-clock.pcss";
 @import "./molecules/form-field.pcss";
+@import "./molecules/modal.pcss";
 @import "./molecules/pagination.pcss";
 @import "./molecules/program-point-list.pcss";
 @import "./molecules/social-icon-group.pcss";