Switch to angular

2025-10-14 23:32:38 -05:00
parent 1ce27976a9
commit 82e8cea256
72 changed files with 20815 additions and 991 deletions
--- a/frontend/src/app/components/query-form/query-form.component.scss
+++ b/frontend/src/app/components/query-form/query-form.component.scss
@@ -0,0 +1,207 @@
+.query-card {
+  max-width: 900px;
+  margin: 0 auto 24px;
+}
+
+.filters-card {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.query-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form-section {
+  padding: 16px 0;
+
+  h3 {
+    margin: 0 0 16px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #424242;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 2px;
+    }
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #e0e0e0;
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.search-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  color: #666;
+
+  mat-spinner {
+    margin: 0;
+  }
+
+  span {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.form-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  padding-top: 16px;
+  border-top: 1px solid #e0e0e0;
+
+  .search-button {
+    padding: 12px 32px;
+    font-size: 16px;
+
+    mat-icon {
+      margin-right: 8px;
+    }
+  }
+}
+
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  mat-chip {
+    --mdc-chip-container-height: 36px;
+
+    mat-icon[matChipAvatar] {
+      background-color: transparent !important;
+      color: currentColor !important;
+    }
+  }
+}
+
+// Material Design overrides
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    width: 100%;
+
+    .mat-mdc-form-field-hint {
+      font-size: 12px;
+    }
+  }
+
+  .mat-mdc-select-panel {
+    max-height: 250px;
+  }
+
+  .mat-mdc-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    mat-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .mat-mdc-chip {
+    font-size: 12px;
+  }
+
+  .mat-mdc-raised-button {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+  }
+
+  .mat-datepicker-toggle {
+    .mat-icon-button {
+      width: 32px;
+      height: 32px;
+
+      .mat-mdc-button-touch-target {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}
+
+// Card title styling
+:host ::ng-deep .mat-mdc-card-header {
+  .mat-mdc-card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  .mat-mdc-card-subtitle {
+    margin-top: 4px;
+    color: #666;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .query-card,
+  .filters-card {
+    margin: 0 16px 16px;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .form-actions {
+    flex-direction: column;
+    align-items: stretch;
+
+    .search-button {
+      width: 100%;
+    }
+  }
+
+  .filter-chips {
+    gap: 6px;
+
+    mat-chip {
+      --mdc-chip-container-height: 32px;
+      font-size: 11px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .query-card,
+  .filters-card {
+    margin: 0 8px 12px;
+  }
+
+  .form-section h3 {
+    font-size: 14px;
+  }
+}