Skip to content

Commit 444060e

Browse files
aihaih
committed
Revert "fix(ui): translation layout (#47)"
This reverts commit 7d6acc4.
1 parent 6c8578b commit 444060e

22 files changed

Lines changed: 237 additions & 3179 deletions

‎CompendiumUI/index.html‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -134,46 +134,42 @@ <h3 class="version-tooltip__title">About the Copyright Compendium Viewer</h3>
134134
</header>
135135
</header>
136136

137-
<div class="translation-wrapper">
138-
<!-- Translation Disclaimer Banner (only shown when translation is active) -->
139-
<div id="translation-disclaimer" class="usa-alert usa-alert--warning usa-alert--slim" role="alert"
140-
style="display: none;">
141-
<div class="usa-alert__body">
142-
<p class="usa-alert__text">
143-
<strong>⚠️ Experimental Translation:</strong> This feature uses the browser's built-in Translation API
144-
(currently supported in Chrome 141+).
145-
Any language other than English represents automatically translated text and is not official.
146-
The translation may contain inaccuracies or errors. For authoritative information, please refer to the
147-
<a href="#" id="view-original-link" class="usa-link">original English version</a>.
148-
Additional languages can be added upon request.
149-
</p>
150-
</div>
137+
<!-- Translation Disclaimer Banner (only shown when translation is active) -->
138+
<div id="translation-disclaimer" class="usa-alert usa-alert--warning usa-alert--slim" role="alert"
139+
style="display: none;">
140+
<div class="usa-alert__body">
141+
<p class="usa-alert__text">
142+
<strong>⚠️ Experimental Translation:</strong> This feature uses the browser's built-in Translation API (currently supported in Chrome 141+).
143+
Any language other than English represents automatically translated text and is not official.
144+
The translation may contain inaccuracies or errors. For authoritative information, please refer to the
145+
<a href="#" id="view-original-link" class="usa-link">original English version</a>.
146+
Additional languages can be added upon request.
147+
</p>
151148
</div>
149+
</div>
152150

153-
<!-- Translation Progress Indicator (only shown during translation) -->
154-
<div id="translation-progress" class="translation-progress" role="status" aria-live="polite"
155-
style="display: none;">
156-
<div class="translation-progress__content">
157-
<div class="translation-progress__spinner">
158-
<svg class="translation-progress__spinner-svg" viewBox="0 0 50 50" aria-hidden="true">
159-
<circle class="translation-progress__spinner-circle" cx="25" cy="25" r="20" fill="none"
160-
stroke-width="4">
161-
</circle>
162-
</svg>
163-
<div class="translation-progress__spinner-text" aria-hidden="true">
164-
<span id="translation-progress-letters">...</span>
165-
</div>
151+
<!-- Translation Progress Indicator (only shown during translation) -->
152+
<div id="translation-progress" class="translation-progress" role="status" aria-live="polite"
153+
style="display: none;">
154+
<div class="translation-progress__content">
155+
<div class="translation-progress__spinner">
156+
<svg class="translation-progress__spinner-svg" viewBox="0 0 50 50" aria-hidden="true">
157+
<circle class="translation-progress__spinner-circle" cx="25" cy="25" r="20" fill="none" stroke-width="4">
158+
</circle>
159+
</svg>
160+
<div class="translation-progress__spinner-text" aria-hidden="true">
161+
<span id="translation-progress-letters">...</span>
166162
</div>
167-
<div class="translation-progress__info">
168-
<div class="translation-progress__status" id="translation-progress-status">Preparing translation...</div>
169-
<div class="translation-progress__bar-container">
170-
<div class="translation-progress__bar" id="translation-progress-bar" role="progressbar"
171-
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
172-
<div class="translation-progress__bar-fill" id="translation-progress-bar-fill"></div>
173-
</div>
163+
</div>
164+
<div class="translation-progress__info">
165+
<div class="translation-progress__status" id="translation-progress-status">Preparing translation...</div>
166+
<div class="translation-progress__bar-container">
167+
<div class="translation-progress__bar" id="translation-progress-bar" role="progressbar" aria-valuenow="0"
168+
aria-valuemin="0" aria-valuemax="100">
169+
<div class="translation-progress__bar-fill" id="translation-progress-bar-fill"></div>
174170
</div>
175-
<div class="translation-progress__details" id="translation-progress-details"></div>
176171
</div>
172+
<div class="translation-progress__details" id="translation-progress-details"></div>
177173
</div>
178174
</div>
179175
</div>

‎CompendiumUI/layout.test.ts‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,31 +25,6 @@ describe('Layout Structure', () => {
2525
document.body.innerHTML = '';
2626
});
2727

28-
it('should have the translation wrapper', () => {
29-
const wrapper = document.querySelector('.translation-wrapper');
30-
expect(wrapper).not.toBeNull();
31-
});
32-
33-
it('should have the translation disclaimer and progress inside the wrapper', () => {
34-
const wrapper = document.querySelector('.translation-wrapper');
35-
const disclaimer = wrapper?.querySelector('#translation-disclaimer');
36-
const progress = wrapper?.querySelector('#translation-progress');
37-
38-
expect(disclaimer).not.toBeNull();
39-
expect(progress).not.toBeNull();
40-
});
41-
42-
it('should place the translation wrapper in the grid container', () => {
43-
const container = document.querySelector('.grid-container');
44-
const wrapper = container?.querySelector('.translation-wrapper');
45-
46-
expect(container).not.toBeNull();
47-
expect(wrapper).not.toBeNull();
48-
49-
// Verify wrapper is a direct child of grid-container (or reasonably placed)
50-
expect(wrapper?.parentElement).toBe(container);
51-
});
52-
5328
it('should have the translation controls wrapper', () => {
5429
const wrapper = document.getElementById('translation-controls-wrapper');
5530
expect(wrapper).not.toBeNull();
@@ -71,7 +46,7 @@ describe('Layout Structure', () => {
7146
it('should have the translation disclaimer with proper content', () => {
7247
const disclaimer = document.getElementById('translation-disclaimer');
7348
expect(disclaimer).not.toBeNull();
74-
49+
7550
const alertText = disclaimer?.querySelector('.usa-alert__text');
7651
expect(alertText).not.toBeNull();
7752
expect(alertText?.textContent).toContain('Chrome 141+');

0 commit comments

Comments
 (0)