Update index.html

JarbasSkills · Mar 15, 2024 · 5449348 · 5449348
1 parent e596abc
commit 5449348
Showing 1 changed file with 23 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -11,21 +11,26 @@
             background-color: #f8f9fa;
             padding-top: 20px;
         }
-
+        
         .card {
+            width: 200px; /* Set fixed width for skill cards */
             margin-bottom: 20px;
             border: none;
             transition: all 0.3s;
-            position: relative;
-            overflow: hidden;
+            position: relative; /* Add position relative for overlay positioning */
         }
-
+        
         .card:hover {
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            z-index: 1;
         }
-        .card:hover .card-overlay {
-            display: block;
+
+        .card-img-top {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .card-body {
+            text-align: center;
         }
 
         .card-overlay {
@@ -38,11 +43,9 @@
             display: none;
             z-index: 2;
         }
-
-        .card-img-top {
-            max-width: 100%;
-            height: auto;
-            max-height: 100px; /* Limit image height */
+
+        .card:hover .card-overlay {
+            display: block;
         }
 
         .preview-container {
@@ -118,26 +121,20 @@ <h1 class="display-4">Welcome to Jarbas OCP Skills!</h1>
 
     <!-- Skills container -->
     <div id="skills-container" class="d-flex flex-wrap justify-content-between">
-        <!-- Skill cards generated dynamically using Vue.js -->
-        <div class="card" v-for="skill in skills" :key="skill.skill_id">
-            <!-- Link to skill source code -->
+        <!-- Skill cards -->
+        <div class="card" v-for="skill in skills" :key="skill.skill_id" @mouseenter="showPreview" @mouseleave="hidePreview">
             <a :href="skill.source" target="_blank" rel="noopener noreferrer">
-                <!-- Skill icon -->
                 <img :src="skill.icon" class="card-img-top" :alt="skill.name">
             </a>
-            <!-- Skill information -->
             <div class="card-body">
-                <h5 class="card-title">{{ skill.name }}</h5> <!-- Skill name -->
-                <p class="card-text">{{ skill.description }}</p> <!-- Skill description -->
-                <!-- Audio QR Code Install button -->
-                <button class="audio-qr-code-install-button" @click="transmitPackage(skill.source)">Audio QR Code
-                    Install
-                </button>
+                <h5 class="card-title">{{ skill.name }}</h5>
+                <p class="card-text">{{ skill.description }}</p>
+                <!-- Audio QR code install button -->
+                <button v-if="skill.images && skill.images.length" class="audio-qr-code-install-button" @click="transmitPackage(skill.source)">Audio QR Code Install</button>
             </div>
             <!-- Preview overlay -->
-            <div class="card-overlay" @mouseover="showPreview" @mouseleave="hidePreview">
+            <div class="card-overlay">
                 <div class="preview-container">
-                    <!-- Slideshow of images -->
                     <div class="preview-images">
                         <img v-for="(image, index) in skill.images" :key="index" :src="image" alt="Skill Image" :style="{ display: currentIndex === index ? 'block' : 'none' }">
                         <!-- Left arrow (only render if more than one image) -->
@@ -146,7 +143,7 @@ <h5 class="card-title">{{ skill.name }}</h5> <!-- Skill name -->
                         <div v-if="skill.images.length > 1" class="next" @click="nextSlide">&#10095;</div>
                     </div>
                     <!-- Examples -->
-                    <div class="preview-examples">
+                    <div class="preview-examples" v-if="skill.examples && skill.examples.length">
                         <h5>Examples:</h5>
                         <ul>
                             <li v-for="example in skill.examples" :key="example">{{ example }}</li>