Skip to content

Commit e880004

Browse files
gopavasanthgopavasanth
committed
Fixed "Translatable Wikitext" output formatting to prevent horizontal scrolling
Bug: T415390
1 parent eea394a commit e880004

1 file changed

Lines changed: 178 additions & 153 deletions

File tree

‎templates/home.html‎

Lines changed: 178 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,174 +1,199 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Wikitext to Translatable Wikitext Converter</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css"
10+
/>
311

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Wikitext to Translatable Wikitext Converter</title>
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" />
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css"
15+
/>
16+
<style>
17+
html,
18+
body {
19+
height: 100%;
20+
margin: 0;
21+
}
922

10-
<link rel="stylesheet"
11-
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css">
12-
<style>
13-
html,
14-
body {
15-
height: 100%;
16-
margin: 0;
17-
}
23+
.wrapper {
24+
min-height: 100vh;
25+
display: flex;
26+
flex-direction: column;
27+
}
1828

19-
.wrapper {
20-
min-height: 100vh;
21-
display: flex;
22-
flex-direction: column;
23-
}
29+
.main-content {
30+
flex: 1;
31+
}
2432

25-
.main-content {
26-
flex: 1;
27-
}
33+
.navbar {
34+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
35+
padding: 1rem 2rem;
36+
}
2837

29-
.navbar {
30-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
31-
padding: 1rem 2rem;
32-
}
38+
.footer {
39+
background-color: #f8f9fa;
40+
text-align: center;
41+
padding: 1rem 0;
42+
position: sticky;
43+
bottom: 0;
44+
width: 100%;
45+
}
3346

34-
.footer {
35-
background-color: #f8f9fa;
36-
text-align: center;
37-
padding: 1rem 0;
38-
position: sticky;
39-
bottom: 0;
40-
width: 100%;
41-
}
47+
/* Ensure pre tag handles scrolling and sizing nicely */
48+
pre {
49+
margin: 0;
50+
white-space: pre-wrap;
51+
word-wrap: break-word;
52+
overflow-wrap: break-word;
53+
}
4254

43-
/* Ensure pre tag handles scrolling and sizing nicely */
44-
pre {
45-
margin: 0;
46-
}
55+
.code-container {
56+
max-height: 400px;
57+
overflow-y: auto;
58+
overflow-x: hidden;
59+
border: 1px solid #ced4da;
60+
border-radius: 0.25rem;
61+
padding: 0.5rem;
62+
}
63+
</style>
64+
</head>
4765

48-
.code-container {
49-
max-height: 400px;
50-
overflow-y: auto;
51-
border: 1px solid #ced4da;
52-
border-radius: 0.25rem;
53-
}
54-
</style>
55-
</head>
66+
<body>
67+
<div class="wrapper">
68+
<!-- Header -->
69+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
70+
<a class="navbar-brand" href="/">Wiki Translate Tagger</a>
71+
</nav>
5672

57-
<body>
58-
<div class="wrapper">
59-
<!-- Header -->
60-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
61-
<a class="navbar-brand" href="/">Wiki Translate Tagger</a>
62-
</nav>
63-
64-
<!-- Main Content -->
65-
<div class="main-content container mt-5">
66-
<div class="row">
67-
<!-- Input Column -->
68-
<div class="col-md-6">
69-
<h5>Input Wikitext</h5>
70-
<form action="/convert" method="post">
71-
<div class="mb-3">
72-
<textarea class="form-control" id="wikitext" name="wikitext" rows="15"
73-
placeholder="Enter Wikitext here...">{{ original }}</textarea>
73+
<!-- Main Content -->
74+
<div class="main-content container mt-5">
75+
<div class="row">
76+
<!-- Input Column -->
77+
<div class="col-md-6">
78+
<h5>Input Wikitext</h5>
79+
<form action="/convert" method="post">
80+
<div class="mb-3">
81+
<textarea
82+
class="form-control"
83+
id="wikitext"
84+
name="wikitext"
85+
rows="15"
86+
placeholder="Enter Wikitext here..."
87+
>
88+
{{ original }}</textarea
89+
>
90+
</div>
91+
<button type="submit" class="btn btn-primary">
92+
Convert to Translatable Wikitext
93+
</button>
94+
</form>
95+
</div>
96+
<!-- Output Column -->
97+
{% if converted %}
98+
<div class="col-md-6">
99+
<h5>Translatable Wikitext Output</h5>
100+
<div class="code-container">
101+
<pre><code class="language-xml" id="outputText">{{ converted }}</code></pre>
74102
</div>
75-
<button type="submit" class="btn btn-primary">
76-
Convert to Translatable Wikitext
103+
<button class="btn btn-secondary mt-3" onclick="copyToClipboard()">
104+
Copy to Clipboard
77105
</button>
78-
</form>
79-
</div>
80-
<!-- Output Column -->
81-
{% if converted %}
82-
<div class="col-md-6">
83-
<h5>Translatable Wikitext Output</h5>
84-
<div class="code-container">
85-
<pre><code class="language-xml" id="outputText">{{ converted }}</code></pre>
86106
</div>
87-
<button class="btn btn-secondary mt-3" onclick="copyToClipboard()">
88-
Copy to Clipboard
89-
</button>
107+
{% endif %}
90108
</div>
91-
{% endif %}
92109
</div>
93-
</div>
94110

95-
<!-- Footer -->
96-
<footer class="footer">
97-
<div class="d-flex justify-content-center align-items-center">
98-
<p class="mb-0">
99-
Created by:
100-
<a href="https://meta.wikimedia.org/wiki/User:Gopavasanth">Gopa Vasanth</a>
101-
</p>
102-
<span class="mx-2">|</span>
103-
<p class="mb-0">
104-
More info:
105-
<a href="https://meta.wikimedia.org/wiki/Indic-TechCom">Indic-TechCom</a>
106-
</p>
107-
<span class="mx-2">|</span>
108-
<p class="mb-0">
109-
<a href="https://github.com/indictechcom/translatable-wikitext-converter">View source</a>
110-
</p>
111-
<span class="mx-2">|</span>
112-
<p class="mb-0">
113-
Last updated on: <span id="lastUpdatedDate"></span>
114-
</p>
115-
</div>
116-
</footer>
117-
</div>
111+
<!-- Footer -->
112+
<footer class="footer">
113+
<div class="d-flex justify-content-center align-items-center">
114+
<p class="mb-0">
115+
Created by:
116+
<a href="https://meta.wikimedia.org/wiki/User:Gopavasanth"
117+
>Gopa Vasanth</a
118+
>
119+
</p>
120+
<span class="mx-2">|</span>
121+
<p class="mb-0">
122+
More info:
123+
<a href="https://meta.wikimedia.org/wiki/Indic-TechCom"
124+
>Indic-TechCom</a
125+
>
126+
</p>
127+
<span class="mx-2">|</span>
128+
<p class="mb-0">
129+
<a
130+
href="https://github.com/indictechcom/translatable-wikitext-converter"
131+
>View source</a
132+
>
133+
</p>
134+
<span class="mx-2">|</span>
135+
<p class="mb-0">
136+
Last updated on: <span id="lastUpdatedDate"></span>
137+
</p>
138+
</div>
139+
</footer>
140+
</div>
118141

119-
<!-- Bootstrap JS and dependencies -->
120-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
121-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
122-
<script>
123-
hljs.highlightAll();
142+
<!-- Bootstrap JS and dependencies -->
143+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
144+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
145+
<script>
146+
hljs.highlightAll();
124147

125-
function copyToClipboard() {
126-
var copyText = document.getElementById("outputText").innerText;
127-
navigator.clipboard.writeText(copyText).then(function () {
128-
alert("Copied to clipboard!");
129-
}, function (err) {
130-
console.error('Async: Could not copy text: ', err);
131-
// Fallback
132-
var textArea = document.createElement("textarea");
133-
textArea.value = copyText;
134-
document.body.appendChild(textArea);
135-
textArea.select();
136-
try {
137-
document.execCommand('copy');
138-
alert("Copied to clipboard!");
139-
} catch (err) {
140-
console.error('Fallback: Unable to copy', err);
141-
}
142-
document.body.removeChild(textArea);
143-
});
144-
}
148+
function copyToClipboard() {
149+
var copyText = document.getElementById("outputText").innerText;
150+
navigator.clipboard.writeText(copyText).then(
151+
function () {
152+
alert("Copied to clipboard!");
153+
},
154+
function (err) {
155+
console.error("Async: Could not copy text: ", err);
156+
// Fallback
157+
var textArea = document.createElement("textarea");
158+
textArea.value = copyText;
159+
document.body.appendChild(textArea);
160+
textArea.select();
161+
try {
162+
document.execCommand("copy");
163+
alert("Copied to clipboard!");
164+
} catch (err) {
165+
console.error("Fallback: Unable to copy", err);
166+
}
167+
document.body.removeChild(textArea);
168+
},
169+
);
170+
}
145171

146-
// Fetch the last commit date from the GitHub API
147-
fetch(
148-
"https://api.github.com/repos/indictechcom/translatable-wikitext-converter/commits"
149-
)
150-
.then((response) => response.json())
151-
.then((data) => {
152-
if (data && data.length > 0) {
153-
const lastCommitDate = new Date(data[0].commit.committer.date);
154-
const formattedDate = lastCommitDate.toLocaleDateString("en-US", {
155-
year: "numeric",
156-
month: "long",
157-
day: "numeric",
158-
});
159-
document.getElementById("lastUpdatedDate").textContent =
160-
formattedDate;
161-
} else {
172+
// Fetch the last commit date from the GitHub API
173+
fetch(
174+
"https://api.github.com/repos/indictechcom/translatable-wikitext-converter/commits",
175+
)
176+
.then((response) => response.json())
177+
.then((data) => {
178+
if (data && data.length > 0) {
179+
const lastCommitDate = new Date(data[0].commit.committer.date);
180+
const formattedDate = lastCommitDate.toLocaleDateString("en-US", {
181+
year: "numeric",
182+
month: "long",
183+
day: "numeric",
184+
});
185+
document.getElementById("lastUpdatedDate").textContent =
186+
formattedDate;
187+
} else {
188+
document.getElementById("lastUpdatedDate").textContent =
189+
"Unavailable";
190+
}
191+
})
192+
.catch((error) => {
193+
console.error("Error fetching commit data:", error);
162194
document.getElementById("lastUpdatedDate").textContent =
163195
"Unavailable";
164-
}
165-
})
166-
.catch((error) => {
167-
console.error("Error fetching commit data:", error);
168-
document.getElementById("lastUpdatedDate").textContent =
169-
"Unavailable";
170-
});
171-
</script>
172-
</body>
173-
174-
</html>
196+
});
197+
</script>
198+
</body>
199+
</html>

0 commit comments

Comments
 (0)