Skip to content

Commit 463d82c

Browse files
FifthTundraGFifthTundraG
committed
Refactor popup styling and adv popup innerPadding 
1 parent 9cf742a commit 463d82c

3 files changed

Lines changed: 37 additions & 50 deletions

File tree

‎src/scss/popups.scss‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,29 @@
33
align-items: center;
44
width: 128px;
55
height: 96px;
6-
padding: 0px; /* dialog boxes have padding by default */
6+
padding: 0px 8px; /* copied to AdvancedPopupOptions */
77
text-align: center;
88
background-color: white;
99
text-shadow: none;
10+
11+
h1 {
12+
color: black;
13+
margin-top: 7px;
14+
margin-bottom: 7px;
15+
font-size: 1.125rem;
16+
}
17+
18+
.simple-popup-button-wrapper { //? should we include "simple-"?
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
1023
}
1124
dialog::backdrop {
1225
background-color: black;
13-
opacity: 50%;
26+
opacity: 50%; /* base value in case of emergency */
1427
opacity: var(--dialog-backdrop-opacity); /* for programmatic modification */
1528
}
16-
.simple-popup-button-div {
17-
display: flex;
18-
justify-content: center;
19-
align-items: center;
20-
}
21-
.popup-text {
22-
margin-left: 8px;
23-
margin-right: 8px;
24-
color: black;
25-
}
26-
.popup-button {
27-
width: min-content;
28-
}
29-
.simple-popup-title {
30-
display: none;
31-
color: black;
32-
margin-top: 7px;
33-
margin-bottom: 7px;
34-
font-size: 17px;
35-
}
3629

3730
/* List Mods Popup */
3831
.mods-list {

‎src/ts/handlers.ts‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ export class BackgroundHandler extends Handler<Background> {
5151
}
5252

5353
document.getElementById("leftSide").style.background = url(this.getCurrentBackground().src);
54-
document.getElementById("middleButtons").style.background = url(this.getCurrentBackground().src);
5554
document.getElementById("middle").style.background = url(this.getCurrentBackground().src);
5655
document.getElementById("rightSide").style.background = url(this.getCurrentBackground().src);
5756

@@ -314,11 +313,10 @@ export class ModHandler extends UniqueKeyHandler<Mod<any>> {
314313
if (mod.NAMESPACE === "clickercookie") continue; // let's not confuse the end user too much :)
315314

316315
const newModItem = document.createElement("div");
317-
newModItem.className = "popup-text mod-in-list";
316+
newModItem.className = "mod-in-list";
318317

319318
const newModName = document.createElement("p");
320319
newModName.innerText = mod.NAMESPACE;
321-
newModName.className = "popup-text";
322320
newModItem.appendChild(newModName);
323321

324322
document.getElementById("modsList")!.appendChild(newModItem);
@@ -330,32 +328,32 @@ export class ModHandler extends UniqueKeyHandler<Mod<any>> {
330328

331329
// i dunno where to put these last two
332330
static addButtonClicked() {
333-
const popup = new AdvancedPopup(500,350,`<h3 class='simple-popup-title' style='display:block;'>Add Mod</h3>
334-
<h5 class='popup-text' style='color:red; margin-bottom:3px; margin-top:5px;'>WARNING!</h5>
335-
<h5 class='popup-text' style='color:red; margin-top:0px; margin-bottom:0px;'>Adding mods without verifying their legitimacy can result in unintended side effects! We are not responsible for any damages that may be caused by mods!</h5>
336-
<h5 class='popup-text' style='margin-top:5px; margin-bottom:0px;'>For information regarding mods, <a href='https://github.com/clickercookie/clickercookie.github.io/wiki/Modding' class='blue' target="_blank">read the documentation</a>.</h5>
331+
const popup = new AdvancedPopup(500,350,`<h1>Add Mod</h1>
332+
<h5 style='color:red; margin-bottom:3px; margin-top:5px;'>WARNING!</h5>
333+
<h5 style='color:red; margin-top:0px; margin-bottom:0px;'>Adding mods without verifying their legitimacy can result in unintended side effects! We are not responsible for any damages that may be caused by mods!</h5>
334+
<h5 style='margin-top:5px; margin-bottom:0px;'>For information regarding mods, <a href='https://github.com/clickercookie/clickercookie.github.io/wiki/Modding' class='blue' target="_blank">read the documentation</a>.</h5>
337335
<form onsubmit='return false;' id='addModURLForm' style='margin-top:22px;'>
338-
<label for='addModURL' class='popup-text'>From URL: </label>
336+
<label for='addModURL'>From URL: </label>
339337
<input id='addModURL'>
340338
</form>
341339
<form>
342-
<label for='addModFile' class='popup-text' style='margin-right:0px;'>From File: </label>
343-
<input type='file' id='addModFile' accept='.js' class='popup-text' style='width:86px;'>
340+
<label for='addModFile' style='margin-right:0px;'>From File: </label>
341+
<input type='file' id='addModFile' accept='.js' style='width:86px;'>
344342
</form>
345-
<p class='popup-text no-display' id='importedMessage' style='font-size:13px; margin-top:7px; margin-bottom:0px;'>Imported!</p>
346-
<button id='popupAddModButton' class='popup-button' style='margin-top:20px;'>OK</button>`);
343+
<p class='no-display' id='importedMessage' style='font-size:13px; margin-top:7px; margin-bottom:0px;'>Imported!</p>
344+
<button id='popupAddModButton' style='margin-top:20px;'>OK</button>`);
347345
document.getElementById("addModURL").addEventListener("change", () => { ModHandler.loadURL((document.getElementById("addModURL") as HTMLInputElement).value) });
348346
document.getElementById("addModFile").addEventListener("change", () => { ModHandler.loadFile((document.getElementById("addModFile") as HTMLInputElement).files[0]) });
349347
document.getElementById("popupAddModButton").addEventListener("click", () => { popup.destroy() }); //* just to let it be known it's called "popupAddModButton" because "addModButton" is already used by the data button
350348
}
351-
349+
352350
static listButtonClicked() {
353-
const popup = new AdvancedPopup(300,350,`<h3 class='simple-popup-title' style='display:block;'>All Mods</h3>
354-
<p class='popup-text no-display' id='noModsMessage' style='font-size:13px; margin-top:7px; margin-bottom:0px;'>You have no mods installed!</p>
351+
const popup = new AdvancedPopup(300,350,`<h1>All Mods</h1>
352+
<p class='no-display' id='noModsMessage' style='font-size:13px; margin-top:7px; margin-bottom:0px;'>You have no mods installed!</p>
355353
<div id='modsList' class='mods-list'></div>
356-
<small class='popup-text no-display' id='removeModsMessage' style='margin-top:3px;'>To remove mods, refresh your page. (make sure to save!)</small>
357-
<button id='popupListModsButton' class='popup-button' style='margin-top:20px;'>OK</button>`);
358-
document.getElementById("popupListModsButton").addEventListener("click", () => { popup.destroy() });
354+
<small class='no-display' id='removeModsMessage' style='margin:3px 8px 0 8px;'>To remove mods, refresh your page. (make sure to save!)</small>
355+
<button id='popupListModsButton' style='margin-top:20px;'>OK</button>`,{innerPadding: "0"});
356+
document.getElementById("popupListModsButton").addEventListener("click", () => { popup.destroy() });
359357
ModHandler.list();
360358
}
361359

‎src/ts/popup.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@ export class SimplePopup {
2323
this.html.style.width = `${data.x}px`;
2424
this.html.style.height = `${data.y}px`;
2525

26-
const title = document.createElement("h3");
27-
title.className = "simple-popup-title";
26+
const title = document.createElement("h1");
2827
if (data.title) {
2928
title.style.display = "block";
3029
title.innerText = data.title;
@@ -34,16 +33,14 @@ export class SimplePopup {
3433
this.html.appendChild(title);
3534

3635
const content = document.createElement("p");
37-
content.className = "popup-content";
3836
content.innerHTML = data.text;
3937
this.html.appendChild(content);
4038

4139
const buttonDiv = document.createElement("div");
42-
buttonDiv.className = "simple-popup-button-div";
40+
buttonDiv.className = "simple-popup-button-wrapper";
4341
buttonDiv.style.width = `${data.x}px`;
4442

4543
const backButton = document.createElement("button");
46-
backButton.className = "popup-button";
4744
backButton.innerText = "Back";
4845
backButton.style.marginRight = "3px";
4946
backButton.addEventListener("click", () => { this.destroy() });
@@ -54,7 +51,6 @@ export class SimplePopup {
5451
buttonDiv.appendChild(backButton);
5552

5653
const button = document.createElement("button");
57-
button.className = "popup-button";
5854
button.innerText = "OK";
5955
button.addEventListener("click", () => { if (data.func !== undefined) data.func(); this.destroy() });
6056
if (data.button === false)
@@ -84,12 +80,12 @@ export class SimplePopup {
8480
export interface AdvancedPopupOptions {
8581
/** The `opacity` percentage of the dialog backdrop. Default: 50 */
8682
filterLevel?: number;
87-
/** The padding to apply to the popup HTML, in `px` */
88-
innerPadding?: number;
83+
/** The padding value to apply to the HTML. Default is "0px 8px" */
84+
innerPadding?: string;
8985
}
9086
const defaultValues: Required<AdvancedPopupOptions> = {
9187
filterLevel: 50,
92-
innerPadding: 0
88+
innerPadding: "0px 8px" // from .popup
9389
}
9490

9591
export class AdvancedPopup {
@@ -109,7 +105,7 @@ export class AdvancedPopup {
109105
...options
110106
};
111107

112-
this.html.style.padding = filledOptions.innerPadding+"px";
108+
this.html.style.padding = filledOptions.innerPadding;
113109
this.html.style.setProperty("--dialog-backdrop-opacity", filledOptions.filterLevel+"%");
114110

115111
document.body.appendChild(this.html);

0 commit comments

Comments
 (0)