Merge pull request #16 from ackers93/topics

Topics

Author: ackers93

.gitignore

@@ -33,7 +33,9 @@
 /app/assets/builds/*
 !/app/assets/builds/.keep
 
+# IDE files
 .vscode/settings.json
+.idea/
 Gemfile.lock
 /node_modules/*
 /node_modules

app/assets/stylesheets/components/_bible.scss

@@ -453,6 +453,133 @@
   }
 }
 
+// Topics styles
+.topics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: $space-4;
+  
+  .topic-card {
+    background: $white;
+    border: 1px solid $gray-200;
+    border-radius: $radius-md;
+    padding: $space-4;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      box-shadow: $shadow-md;
+      border-color: $primary;
+    }
+    
+    .topic-header {
+      margin-bottom: $space-3;
+    }
+    
+    .topic-title {
+      font-size: $font-size-lg;
+      font-weight: $font-weight-semibold;
+      margin-bottom: $space-2;
+      
+      a {
+        color: $gray-900;
+        text-decoration: none;
+        
+        &:hover {
+          color: $primary;
+        }
+      }
+    }
+    
+    .topic-preview {
+      .verse-preview {
+        margin-top: $space-2;
+        font-size: $font-size-sm;
+        color: $gray-700;
+        line-height: 1.6;
+        
+        .verse-ref-link {
+          color: $primary;
+          text-decoration: none;
+          
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+}
+
+.topic-verses-list {
+  .topic-verse-item {
+    background: $white;
+    border: 1px solid $gray-200;
+    border-radius: $radius-md;
+    padding: $space-4;
+    margin-bottom: $space-4;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      box-shadow: $shadow-sm;
+      border-color: $primary;
+    }
+    
+    .topic-verse-header {
+      margin-bottom: $space-3;
+    }
+    
+    .topic-verse-reference {
+      font-size: $font-size-lg;
+      margin-bottom: $space-2;
+    }
+    
+    .topic-verse-meta {
+      color: $gray-600;
+    }
+    
+    .topic-verse-content-wrapper {
+      display: flex;
+      gap: $space-6;
+      align-items: flex-start;
+      
+      @media (max-width: $breakpoint-md) {
+        flex-direction: column;
+        gap: $space-4;
+      }
+    }
+    
+    .topic-verse-text {
+      flex: 1;
+      color: $gray-800;
+      line-height: 1.6;
+      font-style: italic;
+      min-width: 0; // Allows text to wrap properly
+    }
+    
+    .topic-verse-explanation {
+      flex: 1;
+      background: $gray-50;
+      border-left: 4px solid $primary;
+      padding: $space-4;
+      border-radius: $radius-sm;
+      min-width: 0; // Allows content to wrap properly
+      
+      h4 {
+        margin-bottom: $space-2;
+      }
+    }
+  }
+}
+
+.topic-link {
+  color: $primary;
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .thread-verses {
   .thread-verse-item {
     display: flex;
@@ -804,6 +931,34 @@
       }
     }
   }
+  
+  .verse-topics-section {
+    margin-bottom: $space-3;
+    font-size: $font-size-sm;
+    
+    .verse-topics-section-title {
+      font-weight: $font-weight-semibold;
+      color: $gray-700;
+      margin-right: $space-2;
+    }
+    
+    .topic-tag {
+      color: $primary;
+      font-weight: $font-weight-medium;
+      
+      &.topic-link {
+        text-decoration: none;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  
+  .verse-actions-section {
+    font-size: $font-size-sm;
+  }
 }
 
 // Verses list view styles

app/assets/stylesheets/components/_forms.scss

@@ -51,6 +51,20 @@
   }
 }
 
+// Ensure selects work with form-input class
+select.form-input {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right $space-3 center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: $space-10;
+  
+  &:disabled {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  }
+}
+
 .form-control-lg {
   padding: $space-4 $space-5;
   font-size: $font-size-base;
@@ -176,4 +190,45 @@
   .search-button {
     white-space: nowrap;
   }
+}
+
+// Autocomplete dropdown styles
+[data-topic-autocomplete-target="dropdown"] {
+  [data-topic-autocomplete-target="results"] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    
+    li {
+      list-style: none;
+      margin: 0;
+      padding: $space-3 $space-4;
+      cursor: pointer;
+      color: $gray-900;
+      transition: background-color 0.15s ease;
+      
+      &:hover,
+      &.bg-gray-100 {
+        background-color: $gray-100;
+      }
+      
+      &:first-child {
+        border-top-left-radius: $radius;
+        border-top-right-radius: $radius;
+      }
+      
+      &:last-child {
+        border-bottom-left-radius: $radius;
+        border-bottom-right-radius: $radius;
+      }
+      
+      span {
+        display: block;
+      }
+      
+      strong {
+        font-weight: $font-weight-semibold;
+      }
+    }
+  }
 } 

app/assets/stylesheets/layouts/_navigation.scss

@@ -9,7 +9,7 @@
     .nav-container {
       max-width: 1200px;
       margin: 0 auto;
-      padding: 0 $space-6;
+      padding: 0 $space-1;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -59,6 +59,10 @@
             color: $primary;
             background-color: rgba($primary, 0.1);
           }
+          
+          &.nav-link-sm {
+            font-size: $font-size-sm;
+          }
         }
       }
     }
@@ -256,7 +260,7 @@
     }
   }
 
-  @media (min-width: $breakpoint-md + 1) {
+  @media (min-width: $breakpoint-md) {
     .navbar {
       .nav-menu-mobile {
         display: none;