ui: add foldable invoices

css/main.css

@@ -48,12 +48,27 @@ sib-form-label-text{
   justify-content: center;
 }
 
+.invoices-list__item > div > sib-display{ 
+  border-bottom: 1px solid #edf1fa;
+  display: block;
+}
+
 /* Block résumé d'une facture =========================== */
 .invoices-list [name="invoice-title"] {
     display: flex;
-    margin: 1.5em 0 0.5em;
-    padding: 0.3em 1rem;
+    align-items: center;
+    padding: 1.2rem 1rem 1.2rem 0;
     font-size: 95%;
+    cursor: pointer;
+    border-radius: 0.3rem;
+}
+
+.invoices-list [name="invoice-title"]:before {
+  content:"";
+  width: 4rem;
+  height: 30px;
+  background: url(../icons/down-arrow.svg) no-repeat center center;
+  background-size: 20px 20px;
 }
 
 .invoices-list [name="invoice-main"] {
@@ -82,11 +97,14 @@ sib-form-label-text{
   flex-grow: 1;
   align-items: center;
   justify-content: flex-end;
+  padding-left: 2rem;
 }
 
 .invoices-list div[name="state"] {
   display: inline-block;
   vertical-align: middle;
+  width: 6rem;
+  text-align: center;
   background: var(--sib-invoicing-primary, gray);
   color: white;
   line-height: 1.3;
@@ -155,8 +173,6 @@ sib-form-label-text{
   text-align: center;
 }
 
-
-
 /* Tasks list =========================== */
 .tasks-list{
   width: 100%;
@@ -204,4 +220,23 @@ div [name="ttc-total"] sib-display-div[name="ttc-label"]{
 
 [name="totals-header"] + div[name="ht-total"]{
   border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+[name="invoice-totals"] div[name="ttc-total"]{
+  background:#3c3f57;
+  color: white;
+}
+
+/* Hidden part =========================== */
+.invoices-list [name="invoice-hidden"]{
+  display: none;
+  padding-left: 4rem;
+  margin-bottom: 3rem;
+}
+
+.invoices-list .invoice-visible [name="invoice-hidden"]{
+  display: block;
+}
+.invoices-list .invoice-visible [name="invoice-title"]:before{
+  transform: rotate(180deg);
 }
\ No newline at end of file

icons/down-arrow.svg

+<?xml version='1.0' encoding='utf-8'?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
+  <g>
+    <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
+  </g>
+</svg>

index.html

@@ -11,7 +11,7 @@
   <!-- Scripts-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.7/webcomponents-loader.js"></script>
   <!-- Web components-->
-  <script type="module" src="https://unpkg.com/@startinblox/core@0.5.37"></script>
+  <script type="module" src="https://unpkg.com/@startinblox/core@0.5"></script>
   <script type="module" src="https://unpkg.com/@startinblox/router"></script>
 
   <style>
@@ -149,9 +149,11 @@
 
       <sib-display
         id="invoice-list"
+        class="invoices-list__item"
         data-src="http://127.0.0.1:8000/customer-invoices/"
-        data-fields="invoice-title, batches, invoice-totals"
+        data-fields="invoice-title, invoice-hidden"
         set-invoice-title="invoice-main, invoice-aside"
+        set-invoice-hidden="batches, invoice-totals"
         set-invoice-main="invoice-header, invoice-footer"
         set-invoice-aside="state"
         set-invoice-header="title, identifier"
@@ -229,6 +231,15 @@
       ></sib-display>
     </section>
   </main>
+
+  <script>
+  document.addEventListener('click', (e) => {
+    if(e.target){
+      let invoice = e.target.closest('.invoices-list [name="invoice-title"]');
+      invoice.closest('sib-display').classList.toggle('invoice-visible')
+    }
+  })
+  </script>
 </body>
 
 </html>
\ No newline at end of file