Skip to content

Commit 1a17ef8

Browse files
tylpk1216tylpk1216
committed
Use duartebranco's css, and add a button to toggle css for
different screen.
1 parent c432f64 commit 1a17ef8

File tree

7 files changed

+261
-84
lines changed

7 files changed

+261
-84
lines changed

‎cmd/html.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ var homeHTML string = `
1616
<label class="converted-level">Convert EPUB to KEPUB</label>
1717
</p>
1818
<input type="button" value="Click to upload file" id="upload-btn" class="upload-btn" onClick="uploadFile()"/>
19+
</br>
20+
<input type="button" value="Change CSS for different screen" id="css-btn" class="upload-btn" onClick="toggleCSS()"/>
1921
<div id="upload-result" class="upload-result"></div>
2022
<div class="tb">
2123
<table border=1>

‎cmd/web/style.css‎

Lines changed: 17 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,48 @@
11
body {
2-
font-size: 1.5rem; /* Adjusted to a more reasonable size */
3-
margin: 0;
4-
padding: 0;
5-
display: flex;
6-
justify-content: center;
7-
align-items: center;
8-
min-height: 100vh;
9-
background-color: #f5f5f5;
2+
font-size: 58px;
103
}
114

12-
form {
13-
background: #fff;
14-
padding: 2rem;
15-
border-radius: 8px;
16-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17-
width: 100%;
18-
max-width: 500px;
19-
box-sizing: border-box;
5+
input {
6+
font-size: 58px;
7+
margin: 30px 5px;
8+
padding: 10px 10px;
209
}
2110

22-
input[type="file"] {
23-
font-size: 1.5rem;
24-
margin: 1rem 0.5rem;
25-
padding: 0.5rem 0.5rem;
26-
width: 100%;
27-
box-sizing: border-box;
11+
p {
12+
margin: 0px 5px;
2813
}
2914

3015
td {
3116
display: table-cell;
3217
}
3318

3419
.upload-file {
35-
width: 100%;
20+
width: 99%;
3621
}
3722

3823
.upload-btn {
39-
font-size: 1.5rem;
40-
margin: 1rem 0.5rem;
41-
padding: 0.5rem 0.5rem;
42-
width: 100%;
43-
box-sizing: border-box;
44-
cursor: pointer;
4524
}
4625

4726
.upload-converted {
48-
margin: 0 1rem;
49-
width: 2rem;
50-
height: 2rem;
27+
margin: 0px 20px;
28+
width: 50px;
29+
height: 50px;
5130
}
5231

5332
.converted-level {
5433
display: inline-block;
55-
margin: 1rem 0.5rem;
56-
padding: 0.5rem 0.5rem;
34+
margin: 30px 5px;
35+
padding: 10px 10px;
5736
}
5837

5938
.upload-result {
6039
display: block;
61-
padding: 1rem 0.5rem;
40+
padding: 15px 10px;
6241
word-wrap: break-word;
6342
}
6443

6544
.tb-width {
66-
table-layout: fixed;
45+
table-layout:fixed;
6746
width: 80%;
6847
}
6948

@@ -73,51 +52,9 @@ td {
7352
}
7453

7554
.tb {
76-
margin: 1rem 0.5rem;
77-
overflow-x: auto;
55+
margin: 20px 10px;
7856
}
7957

8058
.tb-item {
8159
background-color: #ffdab9;
82-
padding: 0.5rem;
83-
}
84-
85-
table {
86-
width: 100%;
87-
border-collapse: collapse;
88-
}
89-
90-
td, th {
91-
padding: 0.5rem;
92-
text-align: left;
93-
}
94-
95-
/* Add media queries for smaller screens */
96-
@media (max-width: 1000px) {
97-
body {
98-
font-size: 2.7rem;
99-
}
100-
101-
form {
102-
max-width: 95%;
103-
padding: 2rem 1.5rem;
104-
min-height: 600px;
105-
}
106-
107-
table {
108-
font-size: 2.7rem;
109-
}
110-
111-
.tb-item {
112-
padding: 2rem;
113-
}
114-
115-
input[type="file"],
116-
.upload-btn {
117-
font-size: 2.7rem;
118-
}
119-
120-
.tb {
121-
overflow-x: scroll;
122-
}
123-
}
60+
}

‎cmd/web/style_ori.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
font-size: 58px;
3+
}
4+
5+
input {
6+
font-size: 58px;
7+
margin: 30px 5px;
8+
padding: 10px 10px;
9+
}
10+
11+
p {
12+
margin: 0px 5px;
13+
}
14+
15+
td {
16+
display: table-cell;
17+
}
18+
19+
.upload-file {
20+
width: 99%;
21+
}
22+
23+
.upload-btn {
24+
}
25+
26+
.upload-converted {
27+
margin: 0px 20px;
28+
width: 50px;
29+
height: 50px;
30+
}
31+
32+
.converted-level {
33+
display: inline-block;
34+
margin: 30px 5px;
35+
padding: 10px 10px;
36+
}
37+
38+
.upload-result {
39+
display: block;
40+
padding: 15px 10px;
41+
word-wrap: break-word;
42+
}
43+
44+
.tb-width {
45+
table-layout:fixed;
46+
width: 80%;
47+
}
48+
49+
.filename {
50+
display: inline-block;
51+
overflow-wrap: anywhere;
52+
}
53+
54+
.tb {
55+
margin: 20px 10px;
56+
}
57+
58+
.tb-item {
59+
background-color: #ffdab9;
60+
}

‎cmd/web/style_small.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
body {
2+
font-size: 1.5rem; /* Adjusted to a more reasonable size */
3+
margin: 0;
4+
padding: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
min-height: 100vh;
9+
background-color: #f5f5f5;
10+
}
11+
12+
form {
13+
background: #fff;
14+
padding: 2rem;
15+
border-radius: 8px;
16+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17+
width: 100%;
18+
max-width: 500px;
19+
box-sizing: border-box;
20+
}
21+
22+
input[type="file"] {
23+
font-size: 1.5rem;
24+
margin: 1rem 0.5rem;
25+
padding: 0.5rem 0.5rem;
26+
width: 100%;
27+
box-sizing: border-box;
28+
}
29+
30+
td {
31+
display: table-cell;
32+
}
33+
34+
.upload-file {
35+
width: 100%;
36+
}
37+
38+
.upload-btn {
39+
font-size: 1.5rem;
40+
margin: 1rem 0.5rem;
41+
padding: 0.5rem 0.5rem;
42+
width: 100%;
43+
box-sizing: border-box;
44+
cursor: pointer;
45+
}
46+
47+
.upload-converted {
48+
margin: 0 1rem;
49+
width: 2rem;
50+
height: 2rem;
51+
}
52+
53+
.converted-level {
54+
display: inline-block;
55+
margin: 1rem 0.5rem;
56+
padding: 0.5rem 0.5rem;
57+
}
58+
59+
.upload-result {
60+
display: block;
61+
padding: 1rem 0.5rem;
62+
word-wrap: break-word;
63+
}
64+
65+
.tb-width {
66+
table-layout: fixed;
67+
width: 80%;
68+
}
69+
70+
.filename {
71+
display: inline-block;
72+
overflow-wrap: anywhere;
73+
}
74+
75+
.tb {
76+
margin: 1rem 0.5rem;
77+
overflow-x: auto;
78+
}
79+
80+
.tb-item {
81+
background-color: #ffdab9;
82+
padding: 0.5rem;
83+
}
84+
85+
table {
86+
width: 100%;
87+
border-collapse: collapse;
88+
}
89+
90+
td, th {
91+
padding: 0.5rem;
92+
text-align: left;
93+
}
94+
95+
/* Add media queries for smaller screens */
96+
@media (max-width: 1000px) {
97+
body {
98+
font-size: 2.7rem;
99+
}
100+
101+
form {
102+
max-width: 95%;
103+
padding: 2rem 1.5rem;
104+
min-height: 600px;
105+
}
106+
107+
table {
108+
font-size: 2.7rem;
109+
}
110+
111+
.tb-item {
112+
padding: 2rem;
113+
}
114+
115+
input[type="file"],
116+
.upload-btn {
117+
font-size: 2.7rem;
118+
}
119+
120+
.tb {
121+
overflow-x: scroll;
122+
}
123+
}

‎cmd/web/upload.js‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ let $tbConvertedTime = $('#tb-convertedtime');
1010

1111
const PROCESSING = 'processing ...';
1212

13+
const ORIGINAL_CSS = 0;
14+
const SMALL_CSS = 1;
15+
16+
let cssFlag = ORIGINAL_CSS;
17+
1318
function selectFile()
1419
{
1520
$uploadResult.text('');
@@ -54,6 +59,42 @@ function generateResult(msg)
5459
$tbConvertedTime.text(json.ConvertedTime);
5560
}
5661

62+
function loadCSSFile(fileName){
63+
var fileRef = document.createElement('link')
64+
fileRef.setAttribute('rel', 'stylesheet')
65+
fileRef.setAttribute('type', 'text/css')
66+
fileRef.setAttribute('href', fileName)
67+
document.getElementsByTagName('head')[0].appendChild(fileRef);
68+
}
69+
70+
function removeCSSFile(fileName){
71+
var allItems = document.getElementsByTagName('link');
72+
for (var i = 0; i < allItems.length; i++) {
73+
var item = allItems[i];
74+
if (!item) continue;
75+
var attribute = item.getAttribute('href');
76+
if (!attribute) continue;
77+
if (attribute.indexOf(fileName) == -1) continue;
78+
79+
item.parentNode.removeChild(allItems[i]);
80+
}
81+
}
82+
83+
function toggleCSS()
84+
{
85+
if (cssFlag == SMALL_CSS) {
86+
removeCSSFile('web/style_small.css');
87+
loadCSSFile('web/style_ori.css');
88+
cssFlag = ORIGINAL_CSS;
89+
} else {
90+
removeCSSFile('web/style_ori.css');
91+
loadCSSFile('web/style_small.css');
92+
cssFlag = SMALL_CSS;
93+
}
94+
95+
return;
96+
}
97+
5798
function uploadFile()
5899
{
59100
if ($inputName[0].files.length == 0) {
@@ -94,4 +135,4 @@ function uploadFile()
94135
generateResult(message);
95136
}
96137
});
97-
}
138+
}

0 commit comments

Comments
 (0)