UX Cleanup, Content Refresh: Added play button to workshops

UX Cleanup, Content Refresh: Added play button to workshops

Author: neural-loop

content/english/workshops/visual-place-recognition-tobias-fischer/index.md

@@ -8,6 +8,7 @@ description: "Tobias Fischer shares advances in neuromorphic visual place recogn
 end_time: 00:30
 time_zone: CET
 draft: false
+video: dTE6eDzwSJU
 upcoming: false
 image: advances-in-neuromorphic-visual-place-rec.png
 speaker_photo: speaker.jpeg

themes/hugoplate/layouts/journalclub/list.html

@@ -25,7 +25,7 @@
           <h3 class="pb-5 pt-5 text-xl">Upcoming Journal clubs</h3>
           {{ partial "components/upcoming-events" . }}
           <div class="text-right pb-5">
-            <a href="/getting-involved/" class="btn-primary btn-sm pt-6 btn">Host a workshop</a>
+            <a href="/getting-involved/" class="btn-primary btn-sm btn">Host a workshop</a>
           </div>
         </div> -->
       </div>

themes/hugoplate/layouts/partials/components/session-card-wide.html

@@ -2,9 +2,19 @@
   <div class="lg:col-4 md:col-12">
     {{ $image := .Params.image }}
     {{ if $image }}
-      <a href="{{ .RelPermalink }}" class="pb-4">
+    <div class="relative group">
+      <a href="{{ .RelPermalink }}" class="pb-4 block">
         {{ partial "override-image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full rounded" "Size" "500x") }}
       </a>
+      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-40 group-hover:opacity-100 transition-opacity duration-300">
+        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+             viewBox="0 0 330 330" class="h-12 w-12 text-gray-300" style="enable-background:new 0 0 330 330;" xml:space="preserve">
+      <path id="XMLID_308_" d="M37.728,328.12c2.266,1.256,4.77,1.88,7.272,1.88c2.763,0,5.522-0.763,7.95-2.28l240-149.999
+        c4.386-2.741,7.05-7.548,7.05-12.72c0-5.172-2.664-9.979-7.05-12.72L52.95,2.28c-4.625-2.891-10.453-3.043-15.222-0.4
+        C32.959,4.524,30,9.547,30,15v300C30,320.453,32.959,325.476,37.728,328.12z"/>
+    </svg>
+      </div>
+    </div>
     {{ else }}
     <a href="{{ .RelPermalink }}" class="pb-4">
 

themes/hugoplate/layouts/partials/components/session-card.html

@@ -1,13 +1,24 @@
 <div class="">
   {{ $image := .Params.image }}
   {{ if $image }}
-    <a href="{{ .RelPermalink }}">
+  <div class="relative group">
+    <a href="{{ .RelPermalink }}" class="pb-4 block">
       {{ partial "override-image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mb-6 w-full rounded" "Size" "500x") }}
     </a>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-40 group-hover:opacity-100 transition-opacity duration-300">
+      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+           viewBox="0 0 330 330" class="h-12 w-12 text-gray-300" style="enable-background:new 0 0 330 330;" xml:space="preserve">
+      <path id="XMLID_308_" d="M37.728,328.12c2.266,1.256,4.77,1.88,7.272,1.88c2.763,0,5.522-0.763,7.95-2.28l240-149.999
+        c4.386-2.741,7.05-7.548,7.05-12.72c0-5.172-2.664-9.979-7.05-12.72L52.95,2.28c-4.625-2.891-10.453-3.043-15.222-0.4
+        C32.959,4.524,30,9.547,30,15v300C30,320.453,32.959,325.476,37.728,328.12z"/>
+    </svg>
+    </div>
+  </div>
   {{ else }}
   <a href="{{ .RelPermalink }}">
     {{ partial "override-image" (dict "Src" "images/workshop-thumbnail-default.png" "Alt" .Title "Class" "w-full rounded" "Size" "500x") }}
   </a>
+
   {{ end }}
   <h4 class="mb-3">
     <a href="{{ .RelPermalink }}">

themes/hugoplate/layouts/workshops/list.html

@@ -19,8 +19,8 @@
         <div class="px-7 pt-7 bg-theme-light dark:bg-darkmode-theme-light rounded">
           <h3 class="pb-5 pt-5 text-xl">Upcoming Workshops</h3>
           {{ partial "components/upcoming-events" . }}
-          <div class="text-right pb-5"> <!-- Right-align the button -->
-            <a href="/getting-involved/" class="btn-primary btn-sm pt-6 btn">Host a workshop</a>
+          <div class="text-right pb-5 pt-5"> <!-- Right-align the button -->
+            <a href="/getting-involved/" class="btn-primary btn-sm btn">Host a workshop</a>
           </div>
         </div>
       </div>

themes/hugoplate/layouts/workshops/single.html

@@ -65,10 +65,10 @@
         "Telegram" false) }}
         </div>
         <div class="px-7 pt-7 bg-theme-light dark:bg-darkmode-theme-light rounded">
-          <h3 class="pb-5 text-xl">Upcoming Workshops</h3>
+          <h3 class="pb-5 pt-5 text-xl">Upcoming Workshops</h3>
           {{ partial "components/upcoming-events" . }}
-          <div class="text-right pb-5"> <!-- Right-align the button -->
-            <a href="/getting-involved/" class="btn-primary btn-sm pt-6 btn">Host a workshop</a>
+          <div class="text-right pb-5 pt-5"> <!-- Right-align the button -->
+            <a href="/getting-involved/" class="btn-primary btn-sm btn">Host a workshop</a>
           </div>
         </div>
       </div>