🎨 Enhance AIDA Prompt Marketplace UI:

Updated search input placeholder, improved prompt filtering logic, and added a submit prompt button in the navbar. Enhanced CSS for button styles and modal triggers for better user experience.
ERNI-Academy · Dec 20, 2024 · 36a220f · 36a220f
1 parent d80cf19
commit 36a220f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 20 deletions.
diff --git a/aida-prompts/_layouts/default.html b/aida-prompts/_layouts/default.html
@@ -33,22 +33,34 @@
     </div>
   </div>
 
-  <!-- Navbar with Dark Mode Toggle -->
+  <!-- Navbar with Logo, Submit Prompt Button, and Dark Mode Toggle -->
   <nav class="navbar navbar-expand-lg navbar-dark">
     <div class="container-fluid">
+      <!-- Brand and Logo -->
       <a class="navbar-brand" href="#">{{ site.title }}</a>
-      <!-- Navbar toggler for mobile view -->
+
+      <!-- Navbar Toggler -->
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <!-- Navbar links (optional) -->
+
+      <!-- Navbar Links -->
       <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav ms-auto">
-          <!-- Add nav links here if needed -->
+        <ul class="navbar-nav ms-auto align-items-center">
+          <!-- Submit Prompt Button -->
+          <li class="nav-item">
+            <a class="btn btn-outline-light me-2" href="https://github.com/ERNI-Academy/asset-prompting-marketplace/issues/new?assignees=&labels=prompt&projects=&template=00_prompt.yml&title=Add+here+the+title+of+the+prompt" target="_blank" rel="noopener noreferrer" title="Submit a New Prompt">
+              <i class="bi bi-plus-circle"></i> Submit a Prompt
+            </a>
+          </li>
+
+          <!-- Dark Mode Toggle Button -->
+          <li class="nav-item">
+            <button class="btn btn-outline-secondary" id="darkModeToggle" title="Toggle Dark Mode">
+              <i class="bi bi-moon-fill"></i>
+            </button>
+          </li>
         </ul>
-        <button class="btn btn-outline-secondary ms-3" id="darkModeToggle" title="Toggle Dark Mode">
-          <i class="bi bi-moon-fill"></i>
-        </button>
       </div>
     </div>
   </nav>

diff --git a/aida-prompts/assets/css/style.css b/aida-prompts/assets/css/style.css
@@ -68,6 +68,17 @@ body {
   color: var(--navbar-background-color);
 }
 
+/* Style for the Submit Prompt Button in Navbar */
+.navbar .btn-outline-light {
+  color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+
+.navbar .btn-outline-light:hover {
+  background-color: #FFFFFF;
+  color: var(--primary-color);
+}
+
 /* Footer */
 footer {
   background-color: var(--secondary-color);
@@ -122,6 +133,30 @@ body.dark-mode footer a i {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
+/* Modal Trigger */
+.modal-trigger {
+  cursor: pointer;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-trigger .prompt-text {
+  pointer-events: none;
+  flex-grow: 1;
+}
+
+.modal-trigger .tags {
+  margin-top: auto;
+}
+
+/* Prompt Content */
+.prompt-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .card-title {
   font-weight: 600; /* SemiBold */
   font-size: 1.125rem; /* Approximately 18px */
@@ -140,10 +175,6 @@ body.dark-mode .card-title {
   color: var(--text-color);
 }
 
-.prompt-content .tags {
-  margin-top: auto;
-}
-
 /* Badges */
 .badge.bg-primary {
   background-color: var(--accent-color) !important;
@@ -217,6 +248,26 @@ body.dark-mode .btn-outline-secondary:hover {
   color: var(--background-color);
 }
 
+/* Button Ripple Effect */
+.btn::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform: scale(0);
+}
+
+.btn:active::after {
+  opacity: 0.4;
+  transform: scale(1);
+  transition: transform 0.5s, opacity 0.5s;
+}
+
 /* Back to Top Button */
 #backToTopBtn {
   position: fixed;

diff --git a/aida-prompts/index.md b/aida-prompts/index.md
@@ -10,7 +10,7 @@ title: AIDA Prompt Marketplace
 
   <!-- Search Input -->
   <div class="input-group mb-4">
-    <input type="text" id="searchInput" class="form-control" placeholder="Filter by tag..." onkeyup="filterPrompts()">
+    <input type="text" id="searchInput" class="form-control" placeholder="Search prompts..." onkeyup="filterPrompts()">
     <span class="input-group-text"><i class="bi bi-search"></i></span>
   </div>
 
@@ -41,7 +41,7 @@ title: AIDA Prompt Marketplace
               </button>
             </div>
             <!-- Content that triggers the modal -->
-            <div class="modal-trigger flex-grow-1" data-bs-toggle="modal" data-bs-target="#promptModal{{ forloop.index }}">
+            <div class="modal-trigger" data-bs-toggle="modal" data-bs-target="#promptModal{{ forloop.index }}">
               <pre class="plain-text prompt-text">{{ prompt_content | xml_escape }}</pre>
               {% if prompt.tags %}
                 <div class="tags mt-3">
@@ -126,16 +126,16 @@ title: AIDA Prompt Marketplace
     // Filter Prompts based on input
     window.filterPrompts = function() {
       var input = document.getElementById('searchInput').value.toLowerCase().trim();
-      var filters = input.split(',').map(function(item) { return item.trim(); }).filter(Boolean);
       var prompts = document.getElementsByClassName('prompt-box');
 
       for (var i = 0; i < prompts.length; i++) {
+        var title = prompts[i].querySelector('.card-title').innerText.toLowerCase();
+        var content = prompts[i].querySelector('.prompt-text').innerText.toLowerCase();
         var tags = prompts[i].querySelector('.tags') ? prompts[i].querySelector('.tags').innerText.toLowerCase() : '';
-        var match = filters.every(function(filter) {
-          return tags.includes(filter);
-        });
 
-        if (match || filters.length === 0) {
+        var match = title.includes(input) || content.includes(input) || tags.includes(input);
+
+        if (match || input === '') {
           prompts[i].parentElement.style.display = "";
         } else {
           prompts[i].parentElement.style.display = "none";
@@ -148,7 +148,7 @@ title: AIDA Prompt Marketplace
     Array.prototype.forEach.call(tagLinks, function(link) {
       link.addEventListener('click', function(e) {
         e.preventDefault();
-        e.stopPropagation();
+        e.stopPropagation(); // Prevent the modal from opening when clicking on a tag
         document.getElementById('searchInput').value = e.target.getAttribute('data-tag');
         filterPrompts();
       });