|
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | 6 | <title>SDRF Editor - Create and Edit SDRF Files</title> |
7 | | - <link rel="stylesheet" href="css/style.css"> |
8 | | - <!-- Load editor styles from jsDelivr (serves directly from GitHub) --> |
9 | | - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@5a36266/dist/sdrf-editor/browser/styles.css"> |
| 7 | + <!-- Load editor styles from jsDelivr CDN --> |
| 8 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@dev/dist/sdrf-editor/browser/styles.css"> |
10 | 9 | <link rel="icon" type="image/png" href="images/favicon.png"> |
11 | 10 | <style> |
12 | | - /* Flex layout for full height */ |
13 | | - body { |
14 | | - display: flex; |
15 | | - flex-direction: column; |
16 | | - height: 100vh; |
17 | | - overflow: hidden; |
18 | | - } |
19 | | - |
20 | | - /* Editor container */ |
21 | | - .editor-wrapper { |
22 | | - display: flex; |
23 | | - flex-direction: column; |
24 | | - flex: 1; |
25 | | - min-height: 0; /* Important for nested flex scroll */ |
26 | | - } |
27 | | - |
28 | | - .editor-header { |
29 | | - padding: 0.75rem 2rem; |
30 | | - background: #f8f9fa; |
31 | | - border-bottom: 1px solid #e9ecef; |
32 | | - display: flex; |
33 | | - justify-content: space-between; |
34 | | - align-items: center; |
35 | | - flex-shrink: 0; |
36 | | - } |
37 | | - |
38 | | - .editor-header-left h1 { |
| 11 | + * { |
39 | 12 | margin: 0; |
40 | | - font-size: 1.25rem; |
41 | | - font-weight: 600; |
42 | | - } |
43 | | - |
44 | | - .editor-header-left p { |
45 | | - margin: 0.25rem 0 0 0; |
46 | | - color: #6c757d; |
47 | | - font-size: 0.85rem; |
48 | | - } |
49 | | - |
50 | | - .editor-features { |
51 | | - display: flex; |
52 | | - gap: 1.5rem; |
53 | | - } |
54 | | - |
55 | | - .editor-feature { |
56 | | - display: flex; |
57 | | - align-items: center; |
58 | | - gap: 0.4rem; |
59 | | - font-size: 0.8rem; |
60 | | - color: #495057; |
61 | | - } |
62 | | - |
63 | | - .editor-feature-icon { |
64 | | - width: 16px; |
65 | | - height: 16px; |
66 | | - background: #4CAF50; |
67 | | - border-radius: 50%; |
68 | | - display: flex; |
69 | | - align-items: center; |
70 | | - justify-content: center; |
71 | | - color: white; |
72 | | - font-size: 10px; |
| 13 | + padding: 0; |
| 14 | + box-sizing: border-box; |
73 | 15 | } |
74 | 16 |
|
75 | | - /* Angular app container */ |
76 | | - .editor-container { |
77 | | - flex: 1; |
| 17 | + html, body { |
| 18 | + height: 100%; |
| 19 | + width: 100%; |
78 | 20 | overflow: hidden; |
79 | 21 | } |
80 | 22 |
|
|
84 | 26 | height: 100%; |
85 | 27 | } |
86 | 28 |
|
87 | | - /* Hide site footer when editor is active */ |
88 | | - .site-footer { |
89 | | - display: none; |
90 | | - } |
91 | | - |
92 | | - /* Fullscreen mode */ |
93 | | - body.fullscreen-mode .site-header, |
94 | | - body.fullscreen-mode .editor-header { |
95 | | - display: none; |
96 | | - } |
97 | | - |
98 | | - body.fullscreen-mode .editor-wrapper { |
99 | | - height: 100vh; |
100 | | - } |
101 | | - |
102 | 29 | /* Loading state */ |
103 | 30 | .editor-loading { |
104 | 31 | display: flex; |
|
107 | 34 | justify-content: center; |
108 | 35 | height: 100%; |
109 | 36 | color: #6c757d; |
| 37 | + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
110 | 38 | } |
111 | 39 |
|
112 | 40 | .editor-loading-spinner { |
113 | 41 | width: 40px; |
114 | 42 | height: 40px; |
115 | 43 | border: 3px solid #e9ecef; |
116 | | - border-top-color: #4CAF50; |
| 44 | + border-top-color: #3b82f6; |
117 | 45 | border-radius: 50%; |
118 | 46 | animation: spin 1s linear infinite; |
119 | 47 | margin-bottom: 1rem; |
|
138 | 66 | color: #6c757d; |
139 | 67 | text-align: center; |
140 | 68 | padding: 2rem; |
| 69 | + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
141 | 70 | } |
142 | 71 |
|
143 | 72 | .editor-error h3 { |
|
149 | 78 | margin-bottom: 1.5rem; |
150 | 79 | max-width: 500px; |
151 | 80 | } |
| 81 | + |
| 82 | + .editor-error a { |
| 83 | + background: #3b82f6; |
| 84 | + color: white; |
| 85 | + padding: 10px 20px; |
| 86 | + border-radius: 6px; |
| 87 | + text-decoration: none; |
| 88 | + } |
| 89 | + |
| 90 | + .editor-error a:hover { |
| 91 | + background: #2563eb; |
| 92 | + } |
152 | 93 | </style> |
153 | 94 | </head> |
154 | 95 | <body> |
155 | | - <header class="site-header"> |
156 | | - <div class="header-container"> |
157 | | - <nav class="main-nav"> |
158 | | - <a href="./index.html">Home</a> |
159 | | - <a href="./specification.html">Specification</a> |
160 | | - <a href="./index.html#metadata-guidelines">Metadata Guidelines</a> |
161 | | - <a href="./index.html#templates">Templates</a> |
162 | | - <a href="./index.html#tools">Tools</a> |
163 | | - <a href="./sdrf-explorer.html">Explorer</a> |
164 | | - <a href="./sdrf-editor.html" class="active">Editor</a> |
165 | | - <a href="./index.html#contributors">Contributors</a> |
166 | | - <a href="/dev/" class="version-link">Dev Version</a> |
167 | | - <a href="https://github.com/bigbio/proteomics-metadata-standard" target="_blank">GitHub</a> |
168 | | - </nav> |
169 | | - </div> |
170 | | - </header> |
171 | | - |
172 | | - <div class="editor-wrapper"> |
173 | | - <div class="editor-header"> |
174 | | - <div class="editor-header-left"> |
175 | | - <h1>SDRF Editor</h1> |
176 | | - <p>Create and edit SDRF files directly in your browser</p> |
177 | | - </div> |
178 | | - <div class="editor-features"> |
179 | | - <div class="editor-feature"> |
180 | | - <span class="editor-feature-icon">✓</span> |
181 | | - <span>Ontology Autocomplete</span> |
182 | | - </div> |
183 | | - <div class="editor-feature"> |
184 | | - <span class="editor-feature-icon">✓</span> |
185 | | - <span>Bulk Editing</span> |
186 | | - </div> |
187 | | - <div class="editor-feature"> |
188 | | - <span class="editor-feature-icon">✓</span> |
189 | | - <span>TSV/Excel Export</span> |
190 | | - </div> |
191 | | - <button class="btn btn-secondary" onclick="toggleFullscreen()" style="margin-left: 1rem; padding: 0.4rem 0.8rem; font-size: 0.8rem;">Fullscreen</button> |
192 | | - </div> |
193 | | - </div> |
194 | | - |
195 | | - <div class="editor-container"> |
196 | | - <!-- Angular app mounts here --> |
197 | | - <sdrf-editor></sdrf-editor> |
198 | | - |
199 | | - <!-- Loading indicator (hidden when app loads) --> |
200 | | - <div class="editor-loading" id="editor-loading"> |
201 | | - <div class="editor-loading-spinner"></div> |
202 | | - <p>Loading SDRF Editor...</p> |
203 | | - </div> |
204 | | - |
205 | | - <!-- Error message (shown if loading fails) --> |
206 | | - <div class="editor-error" id="editor-error"> |
207 | | - <h3>Failed to load editor</h3> |
208 | | - <p>The SDRF Editor could not be loaded. This might be due to a network issue.</p> |
209 | | - <a href="https://github.com/bigbio/sdrfedit" target="_blank" class="btn btn-primary">View on GitHub</a> |
210 | | - </div> |
211 | | - </div> |
| 96 | + <!-- Angular app mounts here --> |
| 97 | + <sdrf-editor></sdrf-editor> |
| 98 | + |
| 99 | + <!-- Loading indicator (hidden when app loads) --> |
| 100 | + <div class="editor-loading" id="editor-loading"> |
| 101 | + <div class="editor-loading-spinner"></div> |
| 102 | + <p>Loading SDRF Editor...</p> |
| 103 | + </div> |
| 104 | + |
| 105 | + <!-- Error message (shown if loading fails) --> |
| 106 | + <div class="editor-error" id="editor-error"> |
| 107 | + <h3>Failed to load editor</h3> |
| 108 | + <p>The SDRF Editor could not be loaded. This might be due to a network issue.</p> |
| 109 | + <a href="https://github.com/bigbio/sdrfedit" target="_blank">View on GitHub</a> |
212 | 110 | </div> |
213 | 111 |
|
214 | 112 | <!-- Preload critical chunks for faster loading --> |
215 | | - <link rel="modulepreload" href="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@5a36266/dist/sdrf-editor/browser/chunk-PX34FNJO.js"> |
216 | | - <link rel="modulepreload" href="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@5a36266/dist/sdrf-editor/browser/chunk-KAWQVD33.js"> |
| 113 | + <link rel="modulepreload" href="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@dev/dist/sdrf-editor/browser/chunk-OYZGYKHQ.js"> |
| 114 | + <link rel="modulepreload" href="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@dev/dist/sdrf-editor/browser/chunk-KAWQVD33.js"> |
217 | 115 |
|
218 | | - <!-- Load Angular app from jsDelivr CDN (serves directly from GitHub repo) --> |
219 | | - <script src="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@5a36266/dist/sdrf-editor/browser/polyfills.js" type="module" onerror="showError()"></script> |
220 | | - <script src="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@5a36266/dist/sdrf-editor/browser/main.js" type="module" onerror="showError()"></script> |
| 116 | + <!-- Load Angular app from jsDelivr CDN --> |
| 117 | + <script src="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@dev/dist/sdrf-editor/browser/polyfills.js" type="module" onerror="showError()"></script> |
| 118 | + <script src="https://cdn.jsdelivr.net/gh/bigbio/sdrfedit@dev/dist/sdrf-editor/browser/main.js" type="module" onerror="showError()"></script> |
221 | 119 |
|
222 | 120 | <script> |
223 | | - function toggleFullscreen() { |
224 | | - document.body.classList.toggle('fullscreen-mode'); |
225 | | - } |
226 | | - |
227 | 121 | function showError() { |
228 | 122 | document.getElementById('editor-loading').style.display = 'none'; |
229 | 123 | document.getElementById('editor-error').style.display = 'flex'; |
|
0 commit comments