Skip to content
This repository was archived by the owner on Oct 28, 2022. It is now read-only.

Commit 359180c

Browse files
petabytpetabyt
committed
Modify popup a little bit.
Also made a space in before underline so it can be a bit more organized.
1 parent 0190905 commit 359180c

File tree

2 files changed

+145
-121
lines changed

2 files changed

+145
-121
lines changed

‎javascript.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ sf.tags = [
3333
return "<i>" + part2 + "</i>";
3434
}
3535
},
36+
{
37+
"name": "code",
38+
"tag": "code",
39+
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/code-view.svg",
40+
"fillers": ["```", "```"],
41+
"formatter": function(part1, part2) {
42+
return "<code>" + part2 + "</code>";
43+
}
44+
},
3645
{
3746
"name": "underline",
3847
"tag": "u",
@@ -60,15 +69,6 @@ sf.tags = [
6069
return "<a href='" + part1 + "' target='_newtab'>" + part2 + "</a>";
6170
}
6271
},
63-
{
64-
"name": "code",
65-
"tag": "code",
66-
"src": "https://raw.githubusercontent.com/Remix-Design/RemixIcon/master/icons/Editor/code-view.svg",
67-
"fillers": ["[code]", "[/code]"],
68-
"formatter": function(part1, part2) {
69-
return "<code>" + part2 + "</code>";
70-
}
71-
},
7272
{
7373
"name": "easteregg",
7474
"tag": "easteregg",
@@ -112,6 +112,12 @@ sf.init = function() {
112112
icon.src = sf.tags[t].src;
113113
icon.title = sf.tags[t].name;
114114

115+
// Simply put a margin before underline because it separates
116+
// Markdown options and SFCode
117+
if (sf.tags[t].name == "underline") {
118+
icon.style.marginLeft = "20px";
119+
}
120+
115121
// Help icon
116122
if (sf.tags[t].help) {
117123
icon.style.float = "right";

‎popup.html‎

Lines changed: 130 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -3,171 +3,189 @@
33
<head>
44
</head>
55
<body>
6-
<div class="dash">&nbsp; <b>ScratchFormat 2.2</b>&nbsp;&nbsp;&nbsp; <a href="https://scratchformat.github.io/" target="_newtab">Website</a> <div class="dropdown" style="">
7-
8-
<button class="dropbtn">Links</button>
9-
<div class="dropdown-content" style="left:0;">
10-
<a href="https://github.com/scratchformat/" target="_newtab">Github</a>
11-
<a href="https://github.com/scratchformat/scratchformat2" target="_newtab">Source Code</a>
12-
<a href="https://scratch.mit.edu/users/pufflegamerz" target="_newtab" class="b">@pufflegamerz</a> </div> </div>
13-
14-
<span class="dash">&nbsp;</span> <a class="white" href="http://petabyte.heb12.com/" target="_newtab">Pufflegamer'z Website</a> <div class="f"> <a class="white" style="float:right;" href="https://github.com/scratchformat" target="_blank">Github</a> <span style="float:right;">&nbsp</span> </div> </div>
15-
<center>
16-
<img src="logo.png" width="200">
17-
<p>
18-
Thank you for using ScratchFormat. <b>To use it, go
19-
on a scratch comment editor and click on it.</b> The formatter
20-
will automatically show up, and move to different comment boxes
21-
when you click on them.
22-
</p>
23-
<p>
24-
Made by <a href="https://scratch.mit.edu/users/pufflegamerz" target="_newtab">@pufflegamerz</a>.
25-
<br>
26-
This is open-source. See <a href="https://github.com/ScratchFormat/" target="_newtab">Our Github</a>.
27-
</p>
28-
</center>
6+
<div class="dash">
7+
<b>ScratchFormat 2.2</b>
8+
<a href="https://scratchformat.github.io/" target="_newtab">Website</a>
9+
<div class="dropdown" style="">
10+
11+
<button class="dropbtn">Links</button>
12+
<div class="dropdown-content" style="left: 0;">
13+
<a href="https://github.com/scratchformat/" target="_newtab">Github</a>
14+
<a href="https://github.com/scratchformat/scratchformat2" target="_newtab">Source Code</a>
15+
<a href="https://scratch.mit.edu/users/pufflegamerz" target="_newtab">@pufflegamerz</a>
16+
<a href="https://scratch.mit.edu/users/danielthebanana4" target="_newtab" class="b">@danielthebanana4</a>
17+
</div>
18+
</div>
19+
20+
<div class="f">
21+
<a class="white" style="float:right;" href="https://github.com/scratchformat" target="_blank">Github</a>
22+
<span style="float:right;">&nbsp</span>
23+
</div>
24+
</div>
25+
<center>
26+
<img src="logo.png" width="200">
27+
<div style="width: 80%; margin-bottom: 20px;">
28+
<p>
29+
Thank you for using ScratchFormat. <b>To use it, go
30+
on a scratch comment editor and click on it.</b> The formatter
31+
will automatically show up, and move to different comment boxes
32+
when you click on them.
33+
</p>
34+
<p>
35+
Made by <a href="https://scratch.mit.edu/users/pufflegamerz" target="_newtab">@pufflegamerz</a>.
36+
<br>
37+
This is open-source. See <a href="https://github.com/ScratchFormat/" target="_newtab">Our Github</a>.
38+
</p>
39+
</div>
40+
</center>
2941
</body>
3042
<style>
31-
body {
43+
html, body {
44+
background-color: lightblue;
45+
width: 700px;
46+
height: 200px;
47+
}
3248

33-
background-color: lightblue;
34-
}
35-
/*Dash*/
49+
/*Dash*/
3650
div.dash {
37-
background-color:#4d97f8;
38-
margin:0em;
39-
color:white;
40-
padding:0px;
41-
padding-top:0px;
51+
background-color: #4d97f8;
52+
margin: 0em;
53+
color: white;
54+
padding: 0px;
55+
padding-top: 0px;
56+
padding-left: 10px;
4257
}
43-
div.dash img{
44-
background-color:white;
45-
vertical-align: text-top;
58+
59+
div.dash img {
60+
background-color: white;
61+
vertical-align: text-top;
4662
}
4763

4864
div.dash a {
49-
background-color:#4d97f8;
50-
border-radius:0px;
51-
border:0px solid #0e1633;
52-
display:inline-block;
53-
cursor:pointer;
54-
color:#ffffff;
55-
font-family:Arial;
56-
font-size:15px;
57-
font-weight:bold;
58-
padding:20px 14px;
59-
text-decoration:none;
65+
background-color: #4d97f8;
66+
border-radius: 0px;
67+
border: 0px solid #0e1633;
68+
display: inline-block;
69+
cursor: pointer;
70+
color: #ffffff;
71+
font-family: Arial;
72+
font-size: 15px;
73+
font-weight: bold;
74+
padding: 20px 14px;
75+
text-decoration: none;
6076
}
77+
6178
div.dash a:hover {
62-
background-color:#3b7cd1;
79+
background-color: #3b7cd1;
6380
}
81+
6482
div.dash a:active {
65-
position:relative;
66-
top:1px;
83+
position: relative;
84+
top: 1px;
6785
}
86+
6887
div.dash a.white {
69-
background-color:white;
70-
border-radius:4px;
71-
border:1px solid lightgray;
72-
display:inline-block;
73-
cursor:pointer;
74-
color:
75-
#3b7cd1
76-
;
77-
font-family:Arial;
78-
font-size:15px;
79-
font-weight:bold;
80-
padding:10px 14px;
81-
text-decoration:none;
88+
background-color:white;
89+
border-radius: 4px;
90+
border: 1px solid lightgray;
91+
display: inline-block;
92+
cursor: pointer;
93+
color: #3b7cd1;
94+
font-family: Arial;
95+
font-size: 15px;
96+
font-weight: bold;
97+
padding: 10px 14px;
98+
text-decoration: none;
8299
}
100+
83101
div.dash a.white:hover {
84-
background-color: lightgrey;
102+
background-color: lightgrey;
85103
}
104+
86105
div.dash a.white:active {
87-
position:relative;
88-
top:1px;
106+
position: relative;
107+
top: 1px;
89108
}
109+
90110
div.dash b{
91-
font-size:20px;
111+
font-size: 20px;
92112
}
93113

94114
body {
95-
margin:0em;
115+
margin: 0em;
96116
}
117+
97118
div.dash div.f{
98-
padding:8px;
99-
float:right;
119+
padding:8px;
120+
float: right;
100121
}
122+
101123
span.dash{
102-
border-left: 2px dashed
103-
#3b7cd1
104-
;
124+
border-left: 2px dashed #3b7cd1;
105125
}
126+
106127
/*Other*/
107128
div.te{
108-
margin:1em;
129+
margin: 1em;
109130
}
110131

111-
112-
113132
/*DropDown*/
114133
.dropbtn {
115-
background-color:#4d97f8;
116-
border-radius:0px;
117-
border:0px solid #0e1633;
118-
display:inline-block;
119-
cursor:pointer;
120-
color:#ffffff;
121-
font-family:Arial;
122-
font-size:15px;
123-
font-weight:bold;
124-
padding:20px 14px;
125-
text-decoration:none;
134+
background-color: #4d97f8;
135+
border-radius: 0px;
136+
border: 0px solid #0e1633;
137+
display: inline-block;
138+
cursor: pointer;
139+
color: #ffffff;
140+
font-family: Arial;
141+
font-size: 15px;
142+
font-weight: bold;
143+
padding: 20px 14px;
144+
text-decoration: none;
126145
}
127146

128147
.dropdown {
129-
position: relative;
130-
display: inline-block;
148+
position: relative;
149+
display: inline-block;
131150
}
132151

133152
.dropdown-content {
134-
display: none;
135-
position: absolute;
136-
right: 0;
137-
background-color: #f9f9f9;
138-
min-width: 160px;
139-
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
140-
z-index: 1;
141-
border-radius:10px;
153+
display: none;
154+
position: absolute;
155+
right: 0;
156+
background-color: #f9f9f9;
157+
min-width: 160px;
158+
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
159+
z-index: 1;
160+
border-radius:10px;
142161
}
143162

144163
.dropdown-content a {
145-
color: white;
146-
background-color: #f0c83f;
147-
padding: 12px 16px;
148-
text-decoration: none;
149-
display: block;
150-
font-weight:bold;
151-
border-left: 1.2px solid #bf9f00;
152-
border-right: 1.2px solid #bf9f00;
153-
width:134px;
164+
color: white;
165+
background-color: #f0c83f;
166+
padding: 12px 16px;
167+
text-decoration: none;
168+
display: block;
169+
font-weight:bold;
170+
border-left: 1.2px solid #bf9f00;
171+
border-right: 1.2px solid #bf9f00;
172+
width:134px;
154173
}
155174
.dropdown-content a.b {
156-
border-bottom-left-radius: 10px;
157-
border-bottom-right-radius: 10px;
158-
border-top: 1.4px solid #3b7cd1;
159-
border-bottom: 1.2px solid #3b7cd1;
175+
border-bottom-left-radius: 10px;
176+
border-bottom-right-radius: 10px;
177+
border-top: 1.4px solid #3b7cd1;
178+
border-bottom: 1.2px solid #3b7cd1;
160179
}
161180

162181
.dropdown-content a:hover {background-color: #3b7cd1;}
163182

164183
.dropdown:hover .dropdown-content {
165-
display: block;
184+
display: block;
166185
}
167186

168187
.dropdown:hover .dropbtn {
169-
background-color: #3b7cd1;
188+
background-color: #3b7cd1;
170189
}
171190
</style>
172-
<script type="text/javascript" src="javascript.js"></script>
173191
</html>

0 commit comments

Comments
 (0)