From 16d154322a1d88223f9121c1f7bb8c11575bfd22 Mon Sep 17 00:00:00 2001
From: femmefaytale <fay.arno001@gmail.com>
Date: Thu, 14 Apr 2022 13:24:57 +0100
Subject: [PATCH] make case studies expandable

---
 static/js/expandable.js                       | 10 ++++++++
 themes/coopcloud.tech/assets/scss/main.scss   | 24 +++++++++++++++++++
 .../layouts/partials/index/case_studies.html  |  4 ++++
 3 files changed, 38 insertions(+)
 create mode 100644 static/js/expandable.js

diff --git a/static/js/expandable.js b/static/js/expandable.js
new file mode 100644
index 0000000..a4ff826
--- /dev/null
+++ b/static/js/expandable.js
@@ -0,0 +1,10 @@
+document.getElementById( 'case_studies-slide-more' ).addEventListener( 'click', function() {
+  var body = document.getElementById( 'case_studies-slide-body' );
+  if( body.className == 'expanded' ) {
+      body.className = 'contracted';
+      document.getElementById( 'case_studies-slide-more' ).textContent = 'Expand';
+  } else {
+      body.className = 'expanded';
+      document.getElementById( 'case_studies-slide-more' ).textContent = 'Compress';
+  };
+} );
\ No newline at end of file
diff --git a/themes/coopcloud.tech/assets/scss/main.scss b/themes/coopcloud.tech/assets/scss/main.scss
index 23b72dd..b3925f1 100644
--- a/themes/coopcloud.tech/assets/scss/main.scss
+++ b/themes/coopcloud.tech/assets/scss/main.scss
@@ -272,4 +272,28 @@ footer .separator {
     .post-metadata {
         text-transform: uppercase;
     }
+}
+
+// Styling for the exapndable divs
+
+
+#case_studies-slide-body{
+    max-height: 1000px;
+    overflow: hidden;
+    transition:         max-height 500ms ease;
+    -moz-transition:    max-height 500ms ease;
+    -ms-transition:     max-height 500ms ease;
+    -o-transition:      max-height 500ms ease;
+    -webkit-transition: max-height 500ms ease;
+}
+.expanded {
+    height: auto !important;
+    max-height: 3000px !important;
+}
+.contracted {
+    background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important;
+}
+#case_studies-slide-more {    
+    cursor: pointer;
+    text-align: right;
 }
\ No newline at end of file
diff --git a/themes/coopcloud.tech/layouts/partials/index/case_studies.html b/themes/coopcloud.tech/layouts/partials/index/case_studies.html
index 90a9313..0902173 100644
--- a/themes/coopcloud.tech/layouts/partials/index/case_studies.html
+++ b/themes/coopcloud.tech/layouts/partials/index/case_studies.html
@@ -2,6 +2,7 @@
   <div class="container content">
     <h1 class="is-uppercase">Who’s  already using co-op cloud?</h1>
 
+    <div id="case_studies-slide-body">
     {{ range $index, $item := .data }}
     <div class="columns is-centered my-6 is-vcentered">
       {{ if eq (mod $index 2) 0 }}
@@ -35,5 +36,8 @@
       {{ end }}
     </div>
     {{ end }}
+    </div>
+    <div id="case_studies-slide-more" class="button">Expand</div>
   </div>
+  <script defer language="javascript" type="text/javascript"  src="{{ "/js/expandable.js" | urlize | relURL }}"></script>
 </section>
\ No newline at end of file