[Website] update additional case studies layout and scss (#23555)

apache · Oct 31, 2022 · e808182 · e808182
1 parent d4fd174
commit e808182
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/website/www/site/assets/scss/_case_study.scss b/website/www/site/assets/scss/_case_study.scss
@@ -93,6 +93,14 @@
   }
 }
 
+.case-study-used-by-card--with-link {
+  &:hover {
+    .case-study-used-by-card-img {
+      display: block;
+    }
+  }
+}
+
 .case-study-card {
   padding: 16px;
   display: flex;

diff --git a/website/www/site/content/en/case-studies/akvelon.md b/website/www/site/content/en/case-studies/akvelon.md
@@ -2,7 +2,7 @@
 title:  "Akvelon"
 icon: /images/logos/powered-by/akvelon.png
 hasNav: true
-cardDescription: "Akvelon is a software engineering company that helps start-ups, SMBs, and Fortune 500 companies unlock the full potential of cloud, data, and AI/ML to empower their strategic advantage. Akvelon team has deep expertise in integrating Apache Beam with diverse data processing ecosystems and is an enthusiastic Apache Beam community contributor."
+cardDescription: "<p><a href='https://akvelon.com/' target='_blank' rel='noopener noreferrer'>Akvelon</a> is a software engineering company that helps start-ups, SMBs, and Fortune 500 companies unlock the full potential of cloud, data, and AI/ML to empower their strategic advantage. Akvelon team has deep expertise in integrating Apache Beam with diverse data processing ecosystems and is an enthusiastic Apache Beam community contributor.</p>"
 ---
 <!--
 Licensed under the Apache License, Version 2.0 (the "License");

diff --git a/website/www/site/layouts/case-studies/list.html b/website/www/site/layouts/case-studies/list.html
@@ -54,14 +54,22 @@ <h3 class="case-study-card-title">{{ .Params.cardTitle }}</h3>
     <h2 class="case-study-h2">Also used by</h2>
     <div class="case-study-list case-study-list--additional">
         {{ range where $pages "Params.category" "ne" "study" }}
-        <div class="case-study-used-by-card case-study-used-by-card--responsive">
-            <div class="case-study-used-by-card-img">
-                <img src="{{.Params.icon}}"></i>
-            </div>
-            <div class="case-study-used-by-card-description">
-                {{ .Params.cardDescription | safeHTML }}
+            {{ if .Params.hasLink }}
+            <a class="case-study-used-by-card--responsive case-study-used-by-card case-study-used-by-card--with-link" href="{{ .Params.hasLink }}" target="_blank" rel="noopener noreferrer">
+                <div class="case-study-used-by-card-img">
+                    <img src="{{.Params.icon}}"></i>
+                </div>
+            </a>
+            {{ else }}
+            <div class="case-study-used-by-card case-study-used-by-card--responsive">
+                <div class="case-study-used-by-card-img">
+                    <img src="{{.Params.icon}}"></i>
+                </div>
+                <div class="case-study-used-by-card-description">
+                    {{ .Params.cardDescription | safeHTML }}
+                </div>
             </div>
-        </div>
+            {{ end }}
         {{ end }}
     </div>
     <div class="case-study-row-button-container">