From e4f37e415d45af21dde2bb443506098bae4cf92a Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sat, 5 Dec 2020 21:34:48 +0100
Subject: [PATCH] feat(cf2021): all filters, pagination as chips

---
 .../next-prev-pagination.mustache             |  4 +++
 .../_patterns/03-templates/cf-tool.mustache   | 29 +++++++++++++++++--
 source/css/molecules/chips.pcss               |  8 ++---
 3 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache

diff --git a/source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache b/source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache
new file mode 100644
index 0000000..b8f7c07
--- /dev/null
+++ b/source/_patterns/01-molecules/05-pagination/next-prev-pagination.mustache
@@ -0,0 +1,4 @@
+<nav class="pagination pagination--inline space-x-1 {{ classes }}">
+  {{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
+  {{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
+</nav>
diff --git a/source/_patterns/03-templates/cf-tool.mustache b/source/_patterns/03-templates/cf-tool.mustache
index a47b1ce..2dc80fd 100644
--- a/source/_patterns/03-templates/cf-tool.mustache
+++ b/source/_patterns/03-templates/cf-tool.mustache
@@ -9,8 +9,8 @@
 
         <section>
           <div class="flex justify-between items-center mb-4">
-            <h2 class="head-alt-base">Příspěvky v rozpravě</h2>
-            <div class="flex items-center space-x-8">
+            <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 text-xs">
                 <select>
                   <option value="">Vše</option>
@@ -19,8 +19,31 @@
                 </select>
                 <span class="chip__icon ico--chevron-down"></span>
               </span>
+              <span class="chip chip--grey-125 chip--select 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 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-inline-pagination(classes: "text-xs") }}
+              <span class="chip chip--grey-125 text-xs">
+                <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>
 
diff --git a/source/css/molecules/chips.pcss b/source/css/molecules/chips.pcss
index 8aab727..fd06adc 100644
--- a/source/css/molecules/chips.pcss
+++ b/source/css/molecules/chips.pcss
@@ -1,6 +1,6 @@
 .chip {
   @apply
-    flex inline-flex content-center
+    flex inline-flex items-center
     py-2 px-3
     text-xs
     font-bold leading-none tracking-normal
@@ -47,7 +47,7 @@
 }
 
 .chip__icon {
-  @apply self-center pl-2 pr-3 pt-1 cursor-pointer;
+  @apply self-center cursor-pointer;
 
   font-size: .7rem;
 }
@@ -65,7 +65,7 @@
   }
 
   select {
-    @apply w-full py-2 pl-3 pr-8 z-10 cursor-pointer;
+    @apply w-full py-2 pl-3 z-10 cursor-pointer;
 
     appearance: none;
     background: none;
@@ -81,7 +81,7 @@
 
   .chip__icon {
     @apply
-      absolute right-0
+      pl-2 pr-3
       cursor-pointer;
   }
 }
-- 
GitLab