Skip to content

Commit b7f2a1c

Browse files
petracodingpetracoding
committed
Bugfix, Mobile Improvements
1 parent bf3115c commit b7f2a1c

17 files changed

+155
-86
lines changed

‎css/main.scss

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@
99
font-family: "Noto Sans Mono", "Consolas", "SF Mono", monospace;
1010
box-sizing: border-box;
1111
color: #2f283c;
12+
}
13+
14+
h1,
15+
h2 {
1216
user-select: none;
1317
}
1418

1519
body {
20+
padding: 10px;
1621
font-size: 16px;
1722
line-height: 1.5;
1823
display: flex;
@@ -34,6 +39,10 @@ a {
3439
text-decoration: none;
3540
display: inline-block;
3641
transition: transform 0.3s ease;
42+
43+
@media (max-width: 900px) {
44+
display: inline;
45+
}
3746
}
3847
}
3948

@@ -77,7 +86,7 @@ main {
7786
padding-bottom: 10vh;
7887
}
7988

80-
@media (max-height: 800px) {
89+
@media (min-width: 1000px) and (max-height: 800px) {
8190
padding-top: 5vh;
8291
padding-bottom: 5vh;
8392
}
@@ -137,6 +146,7 @@ hr {
137146

138147
.md.hydrated {
139148
font-size: 1.1em;
149+
transform: translateX(-5px);
140150
}
141151

142152
@keyframes blink {
@@ -161,17 +171,18 @@ hr {
161171
text-decoration: none;
162172
transition: 0.3s ease;
163173

174+
@media (max-width: 900px) {
175+
padding: 10px;
176+
font-size: 24px;
177+
}
178+
164179
&:hover,
165180
&:focus {
166181
text-decoration: none;
167182
color: #251d35;
168183
transform: scale(1.5) rotate(20deg);
169184
}
170185
}
171-
172-
@media (max-width: 900px) {
173-
display: none;
174-
}
175186
}
176187

177188
/*
@@ -225,6 +236,7 @@ button {
225236
font-size: 1.1em;
226237

227238
span {
239+
display: inline-block;
228240
margin: 0 !important;
229241
transition: transform 0.4s ease;
230242
}
@@ -247,7 +259,7 @@ button {
247259
animation: rainbow_animation 1.5s ease-in-out infinite;
248260
background-size: 400% 100%;
249261
text-decoration-style: wavy;
250-
transform: scale(1.03) rotate(-1deg);
262+
transform: scale(1.04) rotate(-2deg);
251263
}
252264
}
253265

‎css/pages/manual-list-sorter.scss

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
1-
@media (min-width: 500px) {
2-
.two-lists {
3-
display: flex;
1+
.manual-list-sorter {
2+
#word {
3+
font-size: 1.5em;
4+
}
5+
6+
@media (min-width: 500px) {
7+
.two-lists {
8+
display: flex;
9+
10+
textarea:first-child {
11+
margin-right: 0.5em;
12+
}
413

5-
textarea:first-child {
6-
margin-right: 0.5em;
14+
textarea:last-child {
15+
margin-left: 0.5em;
16+
}
717
}
818

9-
textarea:last-child {
10-
margin-left: 0.5em;
19+
#word {
20+
font-size: 3em;
21+
}
22+
}
23+
24+
@media (max-width: 900px) {
25+
#word ~ button:last-child {
26+
margin-top: 0;
1127
}
1228
}
1329
}

‎css/pages/tumblr-tag-list-tool.scss

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,35 @@
1111
}
1212

1313
#output {
14-
padding: 10px;
14+
padding: 20px;
1515
border: 2px solid lightgray;
16+
border-radius: 8px;
1617
max-height: 85vh;
1718
overflow-y: auto;
19+
margin-top: 1em;
20+
21+
&,
22+
* {
23+
user-select: auto;
24+
}
1825

1926
&:empty {
2027
display: none;
2128
}
29+
30+
a {
31+
color: currentColor !important;
32+
background: none !important;
33+
animation: none !important;
34+
transition: none !important;
35+
transform: none !important;
36+
text-decoration: underline;
37+
38+
&:hover,
39+
&:focus {
40+
text-decoration: none;
41+
}
42+
}
2243
}
2344

2445
.wrap {

‎css/pages/vocabulary-manager.scss

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎index.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>petracoding</title>
5-
<script src="main.js?nocache=1"></script>
5+
<script src="main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -14,6 +14,11 @@
1414
<link rel="manifest" href="/site.webmanifest" />
1515
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
1616
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
17+
<style>
18+
* {
19+
user-select: none;
20+
}
21+
</style>
1722
</head>
1823
<body>
1924
<main>
@@ -61,13 +66,13 @@ <h2>Elsewhere:</h2>
6166
<ion-icon name="code-slash-outline"></ion-icon> <a href="https://greasyfork.org/en/users/354138-petracoding" target="_blank">GreasyFork <small>(userscripts)</small></a>
6267
</li>
6368
<li>
64-
<ion-icon name="business-outline"></ion-icon> <a href="https://neocities.org/site/petrapixel" target="_blank">Neocities <small>(petrapixel.neocities.org)</small></a>
69+
<ion-icon name="mail-outline"></ion-icon> <a href="mailto:petracoding@outlook.com">Mail <small>(petracoding@outlook.com)</small></a>
6570
</li>
6671
<li>
6772
<ion-icon name="logo-tumblr"></ion-icon> <a href="https://cloudythms.tumblr.com/" target="_blank">Tumblr Themes <small>(on hiatus)</small></a>
6873
</li>
6974
<li>
70-
<ion-icon name="mail-outline"></ion-icon> <a href="mailto:petracoding@outlook.com">Mail <small>(petracoding@outlook.com)</small></a>
75+
<ion-icon name="business-outline"></ion-icon> <a href="https://neocities.org/site/petrapixel" target="_blank">Neocities <small>(petrapixel.neocities.org)</small></a>
7176
</li>
7277
</ul>
7378
</main>

‎js/pages/tumblr-tag-list-tool.js

Lines changed: 65 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22,57 +22,73 @@ document.addEventListener("DOMContentLoaded", function (event) {
2222
}
2323
}
2424

25-
document.querySelector("#go").addEventListener("click", () => {
26-
const outputEl = document.querySelector("#output");
27-
const input = document.querySelector("textarea").value;
28-
const addHashtags = document.querySelector("#addHashtags").checked;
29-
const useSearch = document.querySelector("#useSearch").checked;
30-
const eachTagInNewLine = eachTagInNewLineCheckbox.checked;
31-
const groupTags = groupTagsCheckbox.checked;
32-
const useHeadings = groupTags && document.querySelector("#headings").checked;
33-
const url = document.querySelector("#url").value;
34-
const separator = document.querySelector("#separator").value || "";
35-
let o = "";
36-
let isHeading = false;
37-
let isFirstGroup = true;
25+
generateOutput(eachTagInNewLineCheckbox, groupTagsCheckbox);
3826

39-
const groups = groupTags ? input.split(/\n\n/) : [input];
40-
41-
groups.forEach((group) => {
42-
const tags = group.split(/[\n,#]+/);
43-
isHeading = useHeadings;
44-
if (groupTags && !isFirstGroup) {
45-
o += "<br/>";
46-
}
47-
let i = 0;
48-
tags.forEach((tag) => {
49-
i++;
50-
let isLastTag = i == tags.length;
51-
tag = tag.trim();
52-
if (tag !== "," && tag !== "") {
53-
if (isHeading) {
54-
o += tag + "<br/>";
55-
isHeading = false;
56-
} else {
57-
const tagSafeForString = tag;
58-
o +=
59-
"<a href='https://" +
60-
(url ? url + "." : "") +
61-
"tumblr.com" +
62-
(useSearch ? "/search/" : "/tagged/") +
63-
tagSafeForString +
64-
"'>" +
65-
(addHashtags ? "#" : "") +
66-
tag +
67-
"</a>" +
68-
(eachTagInNewLine ? "<br/>" : isLastTag ? "" : separator);
69-
}
70-
}
71-
});
72-
isFirstGroup = false;
27+
const allInputs = document.querySelectorAll("main input, main textarea");
28+
[...allInputs].forEach((inputEl) => {
29+
inputEl.addEventListener("change", () => {
30+
generateOutput(eachTagInNewLineCheckbox, groupTagsCheckbox);
31+
});
32+
inputEl.addEventListener("input", () => {
33+
generateOutput(eachTagInNewLineCheckbox, groupTagsCheckbox);
7334
});
74-
75-
outputEl.innerHTML = o;
7635
});
36+
37+
// document.querySelector("#go").addEventListener("click", () => {
38+
// generateOutput(eachTagInNewLineCheckbox, groupTagsCheckbox);
39+
// });
7740
}
7841
});
42+
43+
function generateOutput(eachTagInNewLineCheckbox, groupTagsCheckbox) {
44+
const outputEl = document.querySelector("#output");
45+
const input = document.querySelector("textarea").value;
46+
const addHashtags = document.querySelector("#addHashtags").checked;
47+
const useSearch = document.querySelector("#useSearch").checked;
48+
const eachTagInNewLine = eachTagInNewLineCheckbox.checked;
49+
const groupTags = groupTagsCheckbox.checked;
50+
const useHeadings = groupTags && document.querySelector("#headings").checked;
51+
const url = document.querySelector("#url").value;
52+
const separator = document.querySelector("#separator").value || "";
53+
let o = "";
54+
let isHeading = false;
55+
let isFirstGroup = true;
56+
57+
const groups = groupTags ? input.split(/\n\n/) : [input];
58+
59+
groups.forEach((group) => {
60+
const tags = group.split(/[\n,#]+/);
61+
isHeading = useHeadings;
62+
if (groupTags && !isFirstGroup) {
63+
o += "<br/>";
64+
}
65+
let i = 0;
66+
tags.forEach((tag) => {
67+
i++;
68+
let isLastTag = i == tags.length;
69+
tag = tag.trim();
70+
if (tag !== "," && tag !== "") {
71+
if (isHeading) {
72+
o += tag + "<br/>";
73+
isHeading = false;
74+
} else {
75+
const tagSafeForString = tag;
76+
o +=
77+
"<a href='https://" +
78+
(url ? url + "." : "") +
79+
"tumblr.com" +
80+
(useSearch ? "/search/" : "/tagged/") +
81+
tagSafeForString +
82+
"'>" +
83+
(addHashtags ? "#" : "") +
84+
tag +
85+
"</a>" +
86+
(eachTagInNewLine ? "<br/>" : isLastTag ? "" : separator);
87+
}
88+
}
89+
});
90+
isFirstGroup = false;
91+
});
92+
93+
outputEl.innerHTML = o;
94+
}

‎main.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manual-list-sorter.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ <h1>Manual List Sorter Tool</h1>
2323
<textarea id="input" placeholder="example, example">
2424
Lorem,ipsum,dolor,sit,amet,consetetur,sadipscing,elitr,sed,diam,nonumy,eirmod,tempor,invidunt,ut,labore,et,dolore,magna,aliquyam,erat,sed,diam,voluptua.,at,vero,eos,et,accusam,et,justo,duo,dolores,et,ea,rebum.,stet,clita,kasd,gubergren,no,sea,takimata,sanctus,est,Lorem,ipsum,dolor,sit,amet.</textarea
2525
>
26-
<button id="start">start</button>
26+
<button id="start"><span>start</span></button>
2727

2828
<br />
2929

3030
<center>
31-
<span id="word" style="font-size: 3em">click start to start</span>
31+
<span id="word">click start to start</span>
3232
<br />
33-
<button id="sortInto1" disabled="disabled">➜ List 1</button>
34-
<button id="sortInto2" disabled="disabled">➜ List 2</button>
33+
<button id="sortInto1" disabled="disabled"><span>➜ List 1</span></button>
34+
<button id="sortInto2" disabled="disabled"><span>➜ List 2</span></button>
3535
</center>
3636

3737
<br />

‎neocities/lastfm.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>petrapixel stats</title>
5-
<script src="main.js?nocache=1"></script>
5+
<script src="main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

‎neocities/stats.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>petrapixel stats</title>
5-
<script src="main.js?nocache=1"></script>
5+
<script src="main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

‎neocities/status.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>petrapixel stats</title>
5-
<script src="main.js?nocache=1"></script>
5+
<script src="main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

‎notion/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>Notion Widgets</title>
5-
<script src="../main.js?nocache=1"></script>
5+
<script src="../main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<link rel="preconnect" href="https://fonts.googleapis.com" />

‎notion/text.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>Text Widget</title>
5-
<script src="../main.js?nocache=1"></script>
5+
<script src="../main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<link rel="preconnect" href="https://fonts.googleapis.com" />

‎pinterest/board.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>pinterest board</title>
5-
<script src="main.js?nocache=2"></script>
5+
<script src="main.js?nocache=4"></script>
66
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
77
<meta content="utf-8" http-equiv="encoding" />
88
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

0 commit comments

Comments
 (0)