drf-to-mkdoc 0.1.4__py3-none-any.whl → 0.1.6__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of drf-to-mkdoc might be problematic. Click here for more details.

Files changed (27) hide show
  1. drf_to_mkdoc/management/commands/generate_model_docs.py +36 -7
  2. drf_to_mkdoc/static/drf-to-mkdoc/javascripts/endpoints-filter.js +189 -0
  3. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/accessibility.css +21 -0
  4. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/animations.css +11 -0
  5. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/badges.css +54 -0
  6. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/base.css +15 -0
  7. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/endpoint-content.css +48 -0
  8. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/endpoints-grid.css +75 -0
  9. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/filter-section.css +209 -0
  10. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/fixes.css +44 -0
  11. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/layout.css +31 -0
  12. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/loading.css +35 -0
  13. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/responsive.css +89 -0
  14. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/sections.css +35 -0
  15. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/stats.css +34 -0
  16. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/tags.css +92 -0
  17. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/theme-toggle.css +30 -0
  18. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/endpoints/variables.css +30 -0
  19. drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/extra.css +358 -0
  20. drf_to_mkdoc/utils/common.py +4 -4
  21. drf_to_mkdoc/utils/extractors/query_parameter_extractors.py +4 -0
  22. {drf_to_mkdoc-0.1.4.dist-info → drf_to_mkdoc-0.1.6.dist-info}/METADATA +1 -1
  23. drf_to_mkdoc-0.1.6.dist-info/RECORD +43 -0
  24. drf_to_mkdoc-0.1.4.dist-info/RECORD +0 -25
  25. {drf_to_mkdoc-0.1.4.dist-info → drf_to_mkdoc-0.1.6.dist-info}/WHEEL +0 -0
  26. {drf_to_mkdoc-0.1.4.dist-info → drf_to_mkdoc-0.1.6.dist-info}/licenses/LICENSE +0 -0
  27. {drf_to_mkdoc-0.1.4.dist-info → drf_to_mkdoc-0.1.6.dist-info}/top_level.txt +0 -0
@@ -139,21 +139,50 @@ class Command(BaseCommand):
139
139
 
140
140
  def introspect_relationship(self, field):
141
141
  """Introspect relationship fields"""
142
- return {
142
+ # Safely resolve related model label; can be None for generic relations
143
+ related_model_label = None
144
+ try:
145
+ if getattr(field, "related_model", None) is not None:
146
+ related_model_label = (
147
+ f"{field.related_model._meta.app_label}.{field.related_model.__name__}"
148
+ )
149
+ except Exception:
150
+ related_model_label = None
151
+
152
+ relationship_data = {
143
153
  "name": field.name,
144
154
  "type": field.__class__.__name__,
145
- "related_model": f"{field.related_model._meta.app_label}."
146
- f"{field.related_model.__name__}",
155
+ "related_model": related_model_label,
147
156
  "related_name": getattr(field, "related_name", None),
148
157
  "on_delete": self.get_on_delete_name(field),
149
158
  "null": getattr(field, "null", False),
150
159
  "blank": getattr(field, "blank", False),
151
- "many_to_many": field.many_to_many,
152
- "one_to_many": field.one_to_many,
153
- "many_to_one": field.many_to_one,
154
- "one_to_one": field.one_to_one,
160
+ "many_to_many": getattr(field, "many_to_many", False),
161
+ "one_to_many": getattr(field, "one_to_many", False),
162
+ "many_to_one": getattr(field, "many_to_one", False),
163
+ "one_to_one": getattr(field, "one_to_one", False),
155
164
  }
156
165
 
166
+ # Handle Django generic relations where related_model can be None
167
+ field_class_name = field.__class__.__name__
168
+ if field_class_name in ("GenericForeignKey", "GenericRelation"):
169
+ relationship_data["is_generic"] = True
170
+ # Capture common generic relation details when available
171
+ for attr_name in (
172
+ "ct_field",
173
+ "fk_field",
174
+ "object_id_field",
175
+ "content_type_field",
176
+ "for_concrete_model",
177
+ "related_query_name",
178
+ ):
179
+ if hasattr(field, attr_name):
180
+ relationship_data[attr_name] = getattr(field, attr_name)
181
+ else:
182
+ relationship_data["is_generic"] = False
183
+
184
+ return relationship_data
185
+
157
186
  def get_on_delete_name(self, field):
158
187
  """Get readable name for on_delete option"""
159
188
  if not hasattr(field, "on_delete") or field.on_delete is None:
@@ -0,0 +1,189 @@
1
+ let currentFilters = {
2
+ method: '',
3
+ path: '',
4
+ models: '',
5
+ auth: '',
6
+ roles: '',
7
+ contentType: '',
8
+ params: '',
9
+ schema: '',
10
+ pagination: '',
11
+ tags: '',
12
+ app: '',
13
+ ordering: '',
14
+ search: ''
15
+ };
16
+
17
+ function applyFilters() {
18
+ // Read all filters
19
+ currentFilters = {
20
+ method: getValue('filter-method'),
21
+ path: getValue('filter-path'),
22
+ models: getValue('filter-models'),
23
+ auth: getValue('filter-auth'),
24
+ roles: getValue('filter-roles'),
25
+ contentType: getValue('filter-content-type'),
26
+ params: getValue('filter-params'),
27
+ schema: getValue('filter-schema'),
28
+ pagination: getValue('filter-pagination'),
29
+ tags: getValue('filter-tags'),
30
+ app: getValue('filter-app'),
31
+ ordering: getValue('filter-ordering'),
32
+ search: getValue('filter-search'),
33
+ };
34
+
35
+ updateURLParams(currentFilters);
36
+
37
+ const cards = document.querySelectorAll('.endpoint-card');
38
+ let visibleCount = 0;
39
+
40
+ cards.forEach(card => {
41
+ const visible = matchesFilters(card);
42
+ card.classList.toggle('hidden', !visible);
43
+ if (visible) visibleCount++;
44
+ });
45
+
46
+ // Collapse viewset sections with no visible cards
47
+ document.querySelectorAll('.viewset-section').forEach(section => {
48
+ const visibleCards = section.querySelectorAll('.endpoint-card:not(.hidden)');
49
+ section.style.display = visibleCards.length === 0 ? 'none' : '';
50
+ });
51
+
52
+ // Collapse app sections with no visible viewsets
53
+ document.querySelectorAll('.app-section').forEach(app => {
54
+ const visibleViewsets = app.querySelectorAll('.viewset-section:not([style*="display: none"])');
55
+ app.style.display = visibleViewsets.length === 0 ? 'none' : '';
56
+ });
57
+
58
+ // Update filter result stats
59
+ document.querySelector('.filter-results').textContent =
60
+ `Showing ${visibleCount} of ${cards.length} endpoints`;
61
+ }
62
+
63
+ function getValue(id) {
64
+ const el = document.getElementById(id);
65
+ return el ? el.value.trim().toLowerCase() : '';
66
+ }
67
+
68
+ function populateAppFilterOptions() {
69
+ const select = document.getElementById('filter-app');
70
+ const apps = new Set();
71
+
72
+ document.querySelectorAll('.endpoint-card').forEach(card => {
73
+ const app = card.dataset.app;
74
+ if (app) apps.add(app);
75
+ });
76
+
77
+ // Convert to sorted array and add as options
78
+ Array.from(apps).sort().forEach(app => {
79
+ const opt = document.createElement('option');
80
+ opt.value = app;
81
+ opt.textContent = app;
82
+ select.appendChild(opt);
83
+ });
84
+ }
85
+
86
+ function matchesFilters(card) {
87
+ const d = card.dataset;
88
+ const f = currentFilters;
89
+
90
+ if (f.method && d.method !== f.method) return false;
91
+ if (f.path && !d.path.includes(f.path)) return false;
92
+ if (f.app && d.app !== f.app) return false;
93
+ if (f.auth && d.auth !== f.auth) return false;
94
+ if (f.pagination && d.pagination !== f.pagination) return false;
95
+ if (f.search && d.search !== f.search) return false;
96
+ if (f.ordering && d.ordering !== f.ordering) return false;
97
+ if (f.models && !d.models.includes(f.models)) return false;
98
+ if (f.roles && !d.roles.includes(f.roles)) return false;
99
+ if (f.tags && !d.tags.includes(f.tags)) return false;
100
+ if (f.contentType && d.contentType !== f.contentType) return false;
101
+
102
+ if (f.params && !d.params.includes(f.params)) return false;
103
+
104
+ return true;
105
+ }
106
+
107
+ function clearFilters() {
108
+ document.querySelectorAll('.filter-input, .filter-select').forEach(el => el.value = '');
109
+ currentFilters = {
110
+ method: '', path: '', models: '', auth: '', roles: '', contentType: '',
111
+ params: '', schema: '', pagination: '', tags: '', app: '', ordering: '', search: ''
112
+ };
113
+ applyFilters();
114
+ updateURLParams(currentFilters);
115
+ }
116
+
117
+
118
+ function updateURLParams(filters) {
119
+ const params = new URLSearchParams();
120
+ Object.entries(filters).forEach(([k, v]) => {
121
+ if (v) params.set(k, v);
122
+ });
123
+ history.replaceState(null, '', '?' + params.toString());
124
+ }
125
+
126
+ function loadURLParams() {
127
+ const params = new URLSearchParams(location.search);
128
+ params.forEach((v, k) => {
129
+ const input = document.getElementById(`filter-${k}`);
130
+ if (input) input.value = v;
131
+ });
132
+ }
133
+
134
+ document.addEventListener('DOMContentLoaded', () => {
135
+ populateAppFilterOptions();
136
+ loadURLParams();
137
+ document.querySelectorAll('.filter-input, .filter-select').forEach(input => {
138
+ input.addEventListener('input', debounce(applyFilters, 250));
139
+ });
140
+ applyFilters();
141
+ });
142
+
143
+ function debounce(func, delay) {
144
+ let timeout;
145
+ return function () {
146
+ clearTimeout(timeout);
147
+ timeout = setTimeout(func, delay);
148
+ };
149
+ }
150
+
151
+
152
+
153
+ document.addEventListener('DOMContentLoaded', function() {
154
+ // Example filter implementation
155
+ const container = document.getElementById('fullscreen-container');
156
+
157
+ // Add filter controls
158
+ const filterControls = document.createElement('div');
159
+ filterControls.className = 'filter-controls';
160
+ filterControls.innerHTML = `
161
+ <select id="filter-select">
162
+ <option value="none">No Filter</option>
163
+ <option value="grayscale">Grayscale</option>
164
+ <option value="sepia">Sepia</option>
165
+ <option value="blur">Blur</option>
166
+ </select>
167
+ `;
168
+ container.prepend(filterControls);
169
+
170
+ // Apply filter based on selection
171
+ document.getElementById('filter-select').addEventListener('change', function(e) {
172
+ container.style.filter = e.target.value === 'none' ? '' : e.target.value + '(100%)';
173
+ });
174
+
175
+ // Your custom filter logic here
176
+ // Example: Apply initial filter if needed
177
+ // container.style.filter = 'grayscale(50%)';
178
+ });
179
+
180
+ document.addEventListener('DOMContentLoaded', () => {
181
+ const filterPanel = document.getElementById('filterSidebar');
182
+ const leftSidebar = document.querySelector('.md-sidebar--primary');
183
+
184
+ if (filterPanel && leftSidebar) {
185
+ leftSidebar.innerHTML = ''; // Remove nav if not needed
186
+ leftSidebar.appendChild(filterPanel);
187
+ filterPanel.classList.remove('collapsed'); // Make sure it's visible
188
+ }
189
+ });
@@ -0,0 +1,21 @@
1
+ /* ===== ACCESSIBILITY ===== */
2
+ @media (prefers-contrast: high) {
3
+ :root {
4
+ --border-color: #000000;
5
+ --text-secondary: #000000;
6
+ }
7
+
8
+ [data-theme="dark"],
9
+ [data-md-color-scheme="slate"] {
10
+ --border-color: #ffffff;
11
+ --text-secondary: #ffffff;
12
+ }
13
+ }
14
+
15
+ @media (prefers-reduced-motion: reduce) {
16
+ * {
17
+ animation-duration: 0.01ms !important;
18
+ animation-iteration-count: 1 !important;
19
+ transition-duration: 0.01ms !important;
20
+ }
21
+ }
@@ -0,0 +1,11 @@
1
+ /* ===== ANIMATIONS ===== */
2
+ .filter-highlight {
3
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
4
+ border-color: var(--accent-primary) !important;
5
+ animation: highlight-pulse 2s ease-in-out;
6
+ }
7
+
8
+ @keyframes highlight-pulse {
9
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
10
+ 50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
11
+ }
@@ -0,0 +1,54 @@
1
+ /* ===== METHOD BADGES ===== */
2
+ .method-badge {
3
+ position: relative;
4
+ padding: 6px 12px;
5
+ font-size: 12px;
6
+ font-weight: bold;
7
+ border-radius: 20px;
8
+ color: white;
9
+ text-transform: uppercase;
10
+ overflow: hidden;
11
+ min-width: 60px;
12
+ text-align: center;
13
+ flex-shrink: 0;
14
+ }
15
+
16
+ .method-badge::before {
17
+ content: '';
18
+ position: absolute;
19
+ top: 0;
20
+ left: -100%;
21
+ width: 100%;
22
+ height: 100%;
23
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
24
+ transition: left 0.5s ease;
25
+ }
26
+
27
+ .method-badge:hover::before {
28
+ left: 100%;
29
+ }
30
+
31
+ .method-get {
32
+ background: linear-gradient(135deg, #10b981, #059669);
33
+ box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
34
+ }
35
+
36
+ .method-post {
37
+ background: linear-gradient(135deg, #f59e0b, #d97706);
38
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
39
+ }
40
+
41
+ .method-put {
42
+ background: linear-gradient(135deg, #8b5cf6, #7c3aed);
43
+ box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
44
+ }
45
+
46
+ .method-patch {
47
+ background: linear-gradient(135deg, #06b6d4, #0891b2);
48
+ box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
49
+ }
50
+
51
+ .method-delete {
52
+ background: linear-gradient(135deg, #ef4444, #dc2626);
53
+ box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
54
+ }
@@ -0,0 +1,15 @@
1
+ /* ===== BASE STYLES ===== */
2
+ * {
3
+ box-sizing: border-box;
4
+ }
5
+
6
+ body {
7
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
8
+ background: var(--bg-primary);
9
+ color: var(--text-primary);
10
+ line-height: 1.6;
11
+ transition: background-color 0.3s ease, color 0.3s ease;
12
+ margin: 0;
13
+ padding: 0;
14
+ min-height: 100vh;
15
+ }
@@ -0,0 +1,48 @@
1
+ /* ===== ENDPOINT CONTENT ===== */
2
+ .endpoint-path {
3
+ font-family: 'Monaco', 'Menlo', 'SF Mono', monospace;
4
+ font-weight: 600;
5
+ color: var(--text-primary);
6
+ font-size: 15px;
7
+ margin-bottom: 8px;
8
+ word-break: break-all;
9
+ background: var(--bg-primary);
10
+ padding: 12px;
11
+ border-radius: 8px;
12
+ border: 1px solid var(--border-color);
13
+ flex: 1;
14
+ min-width: 0;
15
+ }
16
+
17
+ .endpoint-description {
18
+ color: var(--text-secondary);
19
+ font-size: 14px;
20
+ margin-bottom: 12px;
21
+ line-height: 1.5;
22
+ }
23
+
24
+ .related-models {
25
+ margin-bottom: 12px;
26
+ }
27
+
28
+ .related-models-label {
29
+ font-size: 12px;
30
+ color: var(--text-secondary);
31
+ margin-bottom: 4px;
32
+ }
33
+
34
+ .models-list {
35
+ display: flex;
36
+ flex-wrap: wrap;
37
+ gap: 4px;
38
+ }
39
+
40
+ .model-badge {
41
+ background: var(--bg-primary);
42
+ color: var(--text-primary);
43
+ padding: 2px 6px;
44
+ border-radius: 4px;
45
+ font-size: 11px;
46
+ font-family: monospace;
47
+ border: 1px solid var(--border-color);
48
+ }
@@ -0,0 +1,75 @@
1
+ /* ===== ENDPOINTS GRID ===== */
2
+ .endpoints-grid {
3
+ display: grid;
4
+ grid-template-columns: 1fr;
5
+ gap: 16px;
6
+ margin: 24px 0;
7
+ transition: all 0.3s ease;
8
+ width: 100%;
9
+ }
10
+
11
+ .endpoints-grid.filtering {
12
+ opacity: 0.7;
13
+ }
14
+
15
+ /* ===== ENDPOINT CARDS ===== */
16
+ .endpoint-card {
17
+ position: relative;
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 16px;
21
+ padding: 20px;
22
+ background: var(--bg-secondary);
23
+ border: 1px solid var(--border-color);
24
+ border-radius: 12px;
25
+ transition: all 0.3s ease;
26
+ text-decoration: none;
27
+ color: var(--text-primary);
28
+ box-shadow: var(--shadow);
29
+ overflow: hidden;
30
+ width: 100%;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ .endpoint-card::before {
35
+ content: '';
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
42
+ opacity: 0;
43
+ transition: opacity 0.3s ease;
44
+ z-index: 1;
45
+ }
46
+
47
+ .endpoint-card:hover::before {
48
+ opacity: 1;
49
+ }
50
+
51
+ .endpoint-card:hover {
52
+ transform: translateY(-2px);
53
+ box-shadow: var(--shadow-hover);
54
+ }
55
+
56
+ .endpoint-card:focus {
57
+ outline: 2px solid var(--accent-primary);
58
+ outline-offset: 2px;
59
+ }
60
+
61
+ .endpoint-card.hidden {
62
+ opacity: 0;
63
+ transform: scale(0.95);
64
+ pointer-events: none;
65
+ position: absolute;
66
+ height: 0;
67
+ margin: 0;
68
+ padding: 0;
69
+ border: none;
70
+ }
71
+
72
+ .endpoint-card > * {
73
+ position: relative;
74
+ z-index: 2;
75
+ }
@@ -0,0 +1,209 @@
1
+ /* Filter Section - Fixed Layout */
2
+ .filter-section,
3
+ .filter-sidebar {
4
+ background: linear-gradient(135deg, #e0f2ff, #ffffff);
5
+ border: 1px solid var(--border-color);
6
+ border-radius: 16px;
7
+ padding: 24px;
8
+ margin-bottom: 32px;
9
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
10
+ transition: all 0.3s ease;
11
+ width: 100%;
12
+ max-width: 100%;
13
+ box-sizing: border-box; /* Prevents overflow */
14
+ position: relative; /* Ensures proper positioning */
15
+ z-index: 1; /* Prevents overlap with other elements */
16
+ }
17
+
18
+ .filter-sidebar.collapsed {
19
+ /* Add styles for collapsed state if needed */
20
+ overflow: hidden;
21
+ }
22
+
23
+ .filter-title {
24
+ font-size: 20px;
25
+ font-weight: 700;
26
+ color: var(--text-primary);
27
+ margin-bottom: 20px;
28
+ text-align: left;
29
+ display: flex;
30
+ align-items: center;
31
+ gap: 8px;
32
+ }
33
+
34
+ .filter-grid {
35
+ display: grid;
36
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
37
+ gap: 16px;
38
+ margin-bottom: 20px;
39
+ width: 100%;
40
+ }
41
+
42
+ .filter-group {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 6px;
46
+ min-width: 0; /* Prevents flex items from overflowing */
47
+ }
48
+
49
+ .filter-label {
50
+ font-size: 13px;
51
+ font-weight: 600;
52
+ color: var(--text-primary);
53
+ margin-bottom: 4px;
54
+ }
55
+
56
+ .filter-input,
57
+ .filter-select {
58
+ width: 100%;
59
+ max-width: 100%;
60
+ box-sizing: border-box;
61
+ padding: 10px 12px;
62
+ border: 1px solid var(--border-color);
63
+ border-radius: 8px;
64
+ font-size: 14px;
65
+ background: var(--bg-primary);
66
+ color: var(--text-primary);
67
+ transition: border 0.2s ease, box-shadow 0.2s ease;
68
+ appearance: none;
69
+ background-image: none;
70
+ min-height: 40px; /* Consistent height */
71
+ }
72
+
73
+ .filter-select {
74
+ 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");
75
+ background-position: right 10px center;
76
+ background-repeat: no-repeat;
77
+ background-size: 16px;
78
+ padding-right: 40px;
79
+ }
80
+
81
+ .filter-input:focus,
82
+ .filter-select:focus {
83
+ outline: none;
84
+ border-color: var(--accent-primary);
85
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
86
+ }
87
+
88
+ .filter-input:hover,
89
+ .filter-select:hover {
90
+ border-color: var(--accent-primary);
91
+ }
92
+
93
+ .filter-actions {
94
+ display: flex;
95
+ justify-content: center;
96
+ gap: 12px;
97
+ padding-top: 20px;
98
+ border-top: 1px solid var(--border-color);
99
+ margin-top: 20px;
100
+ }
101
+
102
+ .filter-apply,
103
+ .filter-clear {
104
+ padding: 10px 20px;
105
+ border-radius: 8px;
106
+ font-size: 14px;
107
+ font-weight: 600;
108
+ cursor: pointer;
109
+ transition: all 0.2s ease;
110
+ min-width: 100px;
111
+ border: none;
112
+ display: inline-flex;
113
+ align-items: center;
114
+ justify-content: center;
115
+ }
116
+
117
+ .filter-apply {
118
+ background: var(--accent-primary);
119
+ color: #fff;
120
+ }
121
+
122
+ .filter-clear {
123
+ background: transparent;
124
+ color: var(--text-secondary);
125
+ border: 1px solid var(--border-color);
126
+ }
127
+
128
+ .filter-apply:hover {
129
+ background: var(--accent-secondary);
130
+ transform: translateY(-1px);
131
+ }
132
+
133
+ .filter-clear:hover {
134
+ border-color: var(--accent-primary);
135
+ color: var(--text-primary);
136
+ background: rgba(59, 130, 246, 0.05);
137
+ }
138
+
139
+ .filter-apply:active,
140
+ .filter-clear:active {
141
+ transform: translateY(0);
142
+ }
143
+
144
+ .filter-results {
145
+ margin-top: 16px;
146
+ font-size: 13px;
147
+ text-align: center;
148
+ color: var(--text-secondary);
149
+ font-style: italic;
150
+ }
151
+
152
+ /* Main content layout to prevent overlap */
153
+ .main-content {
154
+ width: 100%;
155
+ max-width: 1200px;
156
+ margin: 0 auto;
157
+ padding: 0 16px;
158
+ }
159
+
160
+ /* Responsive adjustments */
161
+ @media (max-width: 768px) {
162
+ .filter-grid {
163
+ grid-template-columns: 1fr;
164
+ gap: 12px;
165
+ }
166
+
167
+ .filter-actions {
168
+ flex-direction: column;
169
+ gap: 8px;
170
+ }
171
+
172
+ .filter-apply,
173
+ .filter-clear {
174
+ width: 100%;
175
+ }
176
+
177
+ .filter-sidebar {
178
+ padding: 16px;
179
+ margin-bottom: 24px;
180
+ }
181
+ }
182
+
183
+ @media (max-width: 480px) {
184
+ .filter-title {
185
+ font-size: 18px;
186
+ }
187
+
188
+ .filter-input,
189
+ .filter-select {
190
+ font-size: 16px; /* Prevents zoom on iOS */
191
+ }
192
+ }
193
+
194
+ /* Ensure proper spacing with endpoint cards */
195
+ .endpoints-grid {
196
+ margin-top: 24px;
197
+ clear: both;
198
+ }
199
+
200
+ /* Fix any potential z-index issues */
201
+ .filter-sidebar {
202
+ position: relative;
203
+ z-index: 10;
204
+ }
205
+
206
+ .endpoint-card {
207
+ position: relative;
208
+ z-index: 1;
209
+ }