mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 12:39:18 +02:00
Added object info inputs
Other changes: * Accessibility improvements
This commit is contained in:
mxdanger
parent
7080605d03
commit
4332ba8224
3 changed files with 264 additions and 96 deletions
264
web/_js/draw.js
264
web/_js/draw.js
|
|
@ -27,36 +27,41 @@ var objectInfoForm = document.getElementById("objectInfo");
|
|||
|
||||
const hintText = document.getElementById("hint");
|
||||
|
||||
const periodsStatus = document.getElementById('periodsStatus')
|
||||
const periodGroups = document.getElementById('periodGroups')
|
||||
const periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
|
||||
const periodsAdd = document.getElementById('periodsAdd')
|
||||
const periodsStatus = document.getElementById('periodsStatus');
|
||||
const periodGroups = document.getElementById('periodGroups');
|
||||
const periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true);
|
||||
const periodsAdd = document.getElementById('periodsAdd');
|
||||
|
||||
const exportButton = document.getElementById("exportButton");
|
||||
const cancelButton = document.getElementById("cancelButton");
|
||||
|
||||
const exportModal = new bootstrap.Modal(document.getElementById("exportModal"))
|
||||
const exportModalElement = document.getElementById("exportModal")
|
||||
const exportModal = new bootstrap.Modal(document.getElementById("exportModal"));
|
||||
const exportModalElement = document.getElementById("exportModal");
|
||||
|
||||
const exportOverlay = document.getElementById("exportOverlay");
|
||||
const exportCloseButton = document.getElementById("exportCloseButton");
|
||||
const exportBackButton = document.getElementById("exportBackButton")
|
||||
const exportBackButton = document.getElementById("exportBackButton");
|
||||
|
||||
const nameField = document.getElementById("nameField")
|
||||
const descriptionField = document.getElementById("descriptionField")
|
||||
const websiteField = document.getElementById("websiteField")
|
||||
const subredditField = document.getElementById("subredditField")
|
||||
const discordField = document.getElementById("discordField")
|
||||
const wikiField = document.getElementById("wikiField")
|
||||
const nameField = document.getElementById("nameField");
|
||||
const descriptionField = document.getElementById("descriptionField");
|
||||
const websiteGroup = document.getElementById("websiteGroup");
|
||||
const subredditGroup = document.getElementById("subredditGroup");
|
||||
const discordGroup = document.getElementById("discordGroup");
|
||||
const wikiGroup = document.getElementById("wikiGroup");
|
||||
const exportArea = document.getElementById("exportString");
|
||||
|
||||
let path = [];
|
||||
let center = [1000, 1000];
|
||||
|
||||
let pathWithPeriods = []
|
||||
let periodGroupElements = []
|
||||
let websiteGroupElements = [];
|
||||
let subredditGroupElements = [];
|
||||
let discordGroupElements = [];
|
||||
let wikiGroupElements = [];
|
||||
|
||||
let disableDrawingOverride = false
|
||||
let pathWithPeriods = [];
|
||||
let periodGroupElements = [];
|
||||
|
||||
let disableDrawingOverride = false;
|
||||
let drawing = true;
|
||||
|
||||
let undoHistory = [];
|
||||
|
|
@ -223,7 +228,6 @@ function initDraw() {
|
|||
document.getElementById("exportButton").focus();
|
||||
});
|
||||
|
||||
// bind it the same as you bind a button, but on submit
|
||||
objectInfoForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault()
|
||||
exportJson()
|
||||
|
|
@ -266,10 +270,10 @@ function initDraw() {
|
|||
exportObject.center[key] = calculateCenter(value)
|
||||
})
|
||||
|
||||
const inputWebsite = websiteField.value.split('\n').map(line => line.trim()).filter(line => line)
|
||||
const inputSubreddit = subredditField.value.split('\n').map(line => line.trim().replace(/(?:(?:(?:(?:https?:\/\/)?(?:(?:www|old|new|np)\.)?)?reddit\.com)?\/)?[rR]\/([A-Za-z0-9][A-Za-z0-9_]{2,20})(?:\/[^" ]*)*/, '$1')).filter(line => line)
|
||||
const inputDiscord = discordField.value.split('\n').map(line => line.trim().replace(/(?:https?:\/\/)?(?:www\.)?(?:(?:discord)?\.?gg|discord(?:app?)\.com\/invite)\/([^\s/]+?)(?=\b)/, '$1')).filter(line => line)
|
||||
const inputWiki = wikiField.value.split('\n').map(line => line.trim().replace(/ /g, '_')).filter(line => line)
|
||||
const inputWebsite = websiteGroupElements.map(element => element.value.trim()).filter(element => element);
|
||||
const inputSubreddit = subredditGroupElements.map(element => element.value.trim().replace(/(?:(?:(?:(?:https?:\/\/)?(?:(?:www|old|new|np)\.)?)?reddit\.com)?\/)?[rR]\/([A-Za-z0-9][A-Za-z0-9_]{2,20})(?:\/[^" ]*)*/, '$1')).filter(element => element);
|
||||
const inputDiscord = discordGroupElements.map(element => element.value.trim().replace(/(?:https?:\/\/)?(?:www\.)?(?:(?:discord)?\.?gg|discord(?:app?)\.com\/invite)\/([^\s/]+?)(?=\b)/, '$1')).filter(element => element);
|
||||
const inputWiki = wikiGroupElements.map(element => element.value.trim().replace(/ /g, '_')).filter(element => element);
|
||||
|
||||
if (inputWebsite.length) exportObject.links.website = inputWebsite
|
||||
if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit
|
||||
|
|
@ -436,14 +440,224 @@ function initDraw() {
|
|||
|
||||
const params = new URLSearchParams(document.location.search)
|
||||
|
||||
|
||||
function addFieldButton(inputButton, inputGroup, array, index, name) {
|
||||
console.log("add button fired");
|
||||
if (inputButton.title == "Remove " + name) {
|
||||
console.log("add (now remove) button fired");
|
||||
removeFieldButton(inputGroup, array, index);
|
||||
return;
|
||||
}
|
||||
inputButton.className = "btn btn-outline-secondary";
|
||||
inputButton.title = "Remove " + name;
|
||||
inputButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
|
||||
console.log(array);
|
||||
if (name == "website") {
|
||||
addWebsiteFields(null, array.length, array);
|
||||
} else if (name == "subreddit") {
|
||||
addSubredditFields(null, array.length, array);
|
||||
} else if (name == "Discord invite") {
|
||||
addDiscordFields(null, array.length, array);
|
||||
} else if (name == "wiki page") {
|
||||
addWikiFields(null, array.length, array);
|
||||
}
|
||||
}
|
||||
|
||||
function removeFieldButton(inputGroup, array, index) {
|
||||
console.log("remove button fired");
|
||||
delete array[index];
|
||||
inputGroup.remove();
|
||||
console.log(array);
|
||||
}
|
||||
|
||||
function addWebsiteFields(link, index, array) {
|
||||
const inputGroup = document.createElement("div");
|
||||
inputGroup.className = "input-group";
|
||||
websiteGroup.appendChild(inputGroup);
|
||||
|
||||
const inputField = document.createElement("input");
|
||||
inputField.type = "url";
|
||||
inputField.name = "url";
|
||||
inputField.className = "form-control";
|
||||
inputField.id = "websiteField" + index;
|
||||
inputField.placeholder = "https://example.com";
|
||||
inputField.pattern = "https?://.*";
|
||||
inputField.title = "Website URL using the http:// or https:// protocol";
|
||||
inputField.setAttribute("aria-labelledby", "websiteLabel");
|
||||
inputField.value = link
|
||||
inputGroup.appendChild(inputField);
|
||||
websiteGroupElements.push(inputField);
|
||||
|
||||
const inputButton = document.createElement("button");
|
||||
inputButton.type = "button";
|
||||
// If button is the last in the array give it the add button
|
||||
if (array.length == index + 1) {
|
||||
inputButton.className = "btn btn-secondary";
|
||||
inputButton.title = "Add website";
|
||||
inputButton.innerHTML = '<i class="bi bi-plus-lg"></i>';
|
||||
inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, websiteGroupElements, index, "website"));
|
||||
} else {
|
||||
inputButton.className = "btn btn-outline-secondary";
|
||||
inputButton.title = "Remove website";
|
||||
inputButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
|
||||
inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index));
|
||||
}
|
||||
inputGroup.appendChild(inputButton);
|
||||
}
|
||||
|
||||
function addSubredditFields(link, index, array) {
|
||||
const inputGroup = document.createElement("div");
|
||||
inputGroup.className = "input-group";
|
||||
subredditGroup.appendChild(inputGroup);
|
||||
|
||||
const inputAddon = document.createElement("span");
|
||||
inputAddon.className = "input-group-text";
|
||||
inputAddon.id = "subredditField" + index + "-addon";
|
||||
inputAddon.textContent = "reddit.com/";
|
||||
inputGroup.appendChild(inputAddon);
|
||||
|
||||
const inputField = document.createElement("input");
|
||||
inputField.type = "text";
|
||||
inputField.className = "form-control";
|
||||
inputField.id = "subredditField" + index;
|
||||
inputField.placeholder = "r/example";
|
||||
inputField.pattern = "^r\/\\w+$";
|
||||
inputField.title = "Subbredit in format of r/example";
|
||||
inputField.maxLength = "23";
|
||||
inputField.spellcheck = false;
|
||||
inputField.setAttribute("aria-labelledby", "subredditLabel");
|
||||
inputField.setAttribute("aria-describedby", "subredditField" + index + "-addon");
|
||||
if (link) {
|
||||
inputField.value = "r/" + link
|
||||
} else {
|
||||
inputField.value = "";
|
||||
}
|
||||
inputGroup.appendChild(inputField);
|
||||
subredditGroupElements.push(inputField);
|
||||
|
||||
const inputButton = document.createElement("button");
|
||||
inputButton.type = "button";
|
||||
// If button is the last in the array give it the add button
|
||||
if (array.length == index + 1) {
|
||||
inputButton.className = "btn btn-secondary";
|
||||
inputButton.title = "Add subreddit";
|
||||
inputButton.innerHTML = '<i class="bi bi-plus-lg"></i>';
|
||||
inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, subredditGroupElements, index, "subreddit"));
|
||||
} else {
|
||||
inputButton.className = "btn btn-outline-secondary";
|
||||
inputButton.title = "Remove subreddit";
|
||||
inputButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
|
||||
inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index));
|
||||
}
|
||||
inputGroup.appendChild(inputButton);
|
||||
}
|
||||
|
||||
function addDiscordFields(link, index, array) {
|
||||
const inputGroup = document.createElement("div");
|
||||
inputGroup.className = "input-group";
|
||||
discordGroup.appendChild(inputGroup);
|
||||
|
||||
const inputAddon = document.createElement("span");
|
||||
inputAddon.className = "input-group-text";
|
||||
inputAddon.id = "discordField" + index + "-addon";
|
||||
inputAddon.textContent = "discord.gg/";
|
||||
inputGroup.appendChild(inputAddon);
|
||||
|
||||
const inputField = document.createElement("input");
|
||||
inputField.type = "text";
|
||||
inputField.className = "form-control";
|
||||
inputField.id = "discordField" + index;
|
||||
inputField.placeholder = "pJkm23b2nA";
|
||||
inputField.spellcheck = false;
|
||||
inputField.setAttribute("aria-labelledby", "discordLabel");
|
||||
inputField.setAttribute("aria-describedby", "discordField" + index + "-addon");
|
||||
inputField.value = link
|
||||
inputGroup.appendChild(inputField);
|
||||
discordGroupElements.push(inputField);
|
||||
|
||||
const inputButton = document.createElement("button");
|
||||
inputButton.type = "button";
|
||||
// If button is the last in the array give it the add button
|
||||
if (array.length == index + 1) {
|
||||
inputButton.className = "btn btn-secondary";
|
||||
inputButton.title = "Add Discord invite";
|
||||
inputButton.innerHTML = '<i class="bi bi-plus-lg"></i>';
|
||||
inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, discordGroupElements, index, "Discord invite"));
|
||||
} else {
|
||||
inputButton.className = "btn btn-outline-secondary";
|
||||
inputButton.title = "Remove Discord invite";
|
||||
inputButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
|
||||
inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index));
|
||||
}
|
||||
inputGroup.appendChild(inputButton);
|
||||
}
|
||||
|
||||
function addWikiFields(link, index, array) {
|
||||
const inputGroup = document.createElement("div");
|
||||
inputGroup.className = "input-group";
|
||||
wikiGroup.appendChild(inputGroup);
|
||||
|
||||
const inputField = document.createElement("input");
|
||||
inputField.type = "text";
|
||||
inputField.className = "form-control";
|
||||
inputField.id = "wikiField" + index;
|
||||
inputField.placeholder = "Page title";
|
||||
inputField.spellcheck = false;
|
||||
inputField.setAttribute("aria-labelledby", "wikiLabel");
|
||||
inputField.value = link
|
||||
inputGroup.appendChild(inputField);
|
||||
wikiGroupElements.push(inputField);
|
||||
|
||||
const inputButton = document.createElement("button");
|
||||
inputButton.type = "button";
|
||||
// If button is the last in the array give it the add button
|
||||
if (array.length == index + 1) {
|
||||
inputButton.className = "btn btn-secondary";
|
||||
inputButton.title = "Add wiki page";
|
||||
inputButton.innerHTML = '<i class="bi bi-plus-lg"></i>';
|
||||
inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, wikiGroupElements, index, "wiki page"));
|
||||
} else {
|
||||
inputButton.className = "btn btn-outline-secondary";
|
||||
inputButton.title = "Remove wiki page";
|
||||
inputButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
|
||||
inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index));
|
||||
}
|
||||
inputGroup.appendChild(inputButton);
|
||||
}
|
||||
|
||||
if (params.has('id')) {
|
||||
const entry = getEntry(params.get('id'))
|
||||
nameField.value = entry.name
|
||||
descriptionField.value = entry.description
|
||||
websiteField.value = entry.links.website.join('\n')
|
||||
subredditField.value = entry.links.subreddit.map(sub => 'r/' + sub).join('\n')
|
||||
discordField.value = entry.links.discord.join('\n')
|
||||
wikiField.value = entry.links.wiki.map(page => page.replace(/_/, ' ')).join('\n')
|
||||
|
||||
if (entry.links.website.length) {
|
||||
entry.links.website.forEach((link, index, array) => {
|
||||
addWebsiteFields(link, index, array);
|
||||
});
|
||||
} else {
|
||||
addWebsiteFields("", -1, entry.links.website);
|
||||
}
|
||||
if (entry.links.subreddit.length) {
|
||||
entry.links.subreddit.forEach((link, index, array) => {
|
||||
addSubredditFields(link, index, array);
|
||||
});
|
||||
} else {
|
||||
addSubredditFields("", -1, entry.links.subreddit);
|
||||
}
|
||||
if (entry.links.discord.length) {
|
||||
entry.links.discord.forEach((link, index, array) => {
|
||||
addDiscordFields(link, index, array);
|
||||
});
|
||||
} else {
|
||||
addDiscordFields("", -1, entry.links.discord);
|
||||
}
|
||||
if (entry.links.wiki.length) {
|
||||
entry.links.wiki.forEach((link, index, array) => {
|
||||
addWikiFields(link, index, array);
|
||||
});
|
||||
} else {
|
||||
addWikiFields("", -1, entry.links.wiki);
|
||||
}
|
||||
redoButton.disabled = true;
|
||||
undoButton.disabled = false;
|
||||
entryId = params.get('id')
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
<a class="nav-link" href="./">Atlas Map</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://place-wiki.stefanocoding.me/" >Wiki</a>
|
||||
<a class="nav-link" href="https://place-wiki.stefanocoding.me/">Wiki</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" aria-current="page">About</a>
|
||||
|
|
@ -120,7 +120,7 @@ <h4>Deployment</h4>
|
|||
<p>Site powered by Netlify.</p>
|
||||
<a class="d-flex flex-wrap justify-content-left gap-2" href="https://www.netlify.com" target="_blank" rel="noopener">
|
||||
<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" alt="Deploys by Netlify" />
|
||||
<img src="https://api.netlify.com/api/v1/badges/1e7291ce-0680-45ed-9843-47a32a992bbb/deploy-status" type="image/svg+xml" alt="Deploys by Netlify" />
|
||||
<img src="https://api.netlify.com/api/v1/badges/1e7291ce-0680-45ed-9843-47a32a992bbb/deploy-status" type="image/svg+xml" alt="Netlify status" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@
|
|||
</svg>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
|
||||
<ul class="navbar-nav me-auto my-2 my-md-0">
|
||||
<li class="nav-item">
|
||||
<div class="btn-group" role="group">
|
||||
|
|
@ -183,13 +182,14 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
|
|||
</div>
|
||||
<div id="entriesListControls" class="d-flex flex-column gap-2 p-3 bg-secondary bg-opacity-10 rounded">
|
||||
<span id="atlasSize"></span>
|
||||
<input autofocus class="form-control" id="searchList" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-label="Search entries">
|
||||
<div class="d-flex align-items-center gap-2"><label>Sort:</label>
|
||||
<input autofocus class="form-control" id="searchList" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-describedby="atlasSize">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label for="sort">Sort:</label>
|
||||
<select class="form-select" id="sort" title="Sort entries">
|
||||
<option selected value="shuffle">Random</option>
|
||||
<option value="relevant" id="relevantOption" disabled>Relevant</option>
|
||||
<option value="alphaAsc">↓ Alphabetical</option>
|
||||
<option value="alphaDesc">↑ Alphabetical</option>
|
||||
<option value="alphaAsc" label="↓ Alphabetical">Descending Alphabetical</option>
|
||||
<option value="alphaDesc" label="↑ Alphabetical">Ascending Alphabetical</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="oldest">Oldest</option>
|
||||
<option value="area">Area</option>
|
||||
|
|
@ -274,7 +274,7 @@ <h5 class="ps-2">Timeline</h5>
|
|||
<p>You can then add more information about your object.</p>
|
||||
<hr>
|
||||
<div class="text-white p-3 rounded shadow" style="background-color: #5865F2;">
|
||||
<p><strong>Need Help?</strong></p>
|
||||
<h6>Need Help?</h6>
|
||||
<p class="mb-0">You can ask for help on <a class="link-light" href="https://discord.gg/pJkm23b2nA" target="_blank" rel="noopener noreferrer">our Discord server</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -289,71 +289,25 @@ <h5 class="ps-2">Timeline</h5>
|
|||
<label for="descriptionField" class="form-label">Description</label>
|
||||
<textarea id="descriptionField" class="form-control overflow-hidden" placeholder="A short description to be understood by everyone"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="websiteField" class="form-label">Website</label>
|
||||
<input type="url" name="url" id="websiteField" class="form-control" placeholder="https://example.com" pattern="https?://.*" title="Website URL using the http:// or https:// protocol">
|
||||
</div>
|
||||
<label for="subredditField" class="form-label">Subreddit</label>
|
||||
<div class="mb-3 d-flex flex-column gap-2">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="subredditField-addon">reddit.com/</span>
|
||||
<input type="text" class="form-control" id="subredditField" placeholder="r/example" pattern="^r\/\w+$" title="Subbredit in format of r/example" maxlength="23" aria-describedby="subredditField-addon">
|
||||
<button class="btn btn-outline-secondary" type="button" title="Add Subreddit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Example with a second input created:
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="subredditField-addon">reddit.com/</span>
|
||||
<input type="text" class="form-control" id="subredditField" placeholder="r/example" pattern="^r\/\w+$" title="Subbredit in format of r/example" aria-describedby="subredditField-addon">
|
||||
<button class="btn btn-outline-secondary" type="button" title="Remove subreddit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
|
||||
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="subredditField1-addon">reddit.com/</span>
|
||||
<input type="text" class="form-control" id="subredditField1" placeholder="r/example" pattern="^r\/\w+$" title="Subbredit in format of r/example" aria-describedby="subredditField1-addon">
|
||||
<button class="btn btn-outline-secondary" type="button" title="Add subreddit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div> -->
|
||||
</div>
|
||||
<label for="discordField" class="form-label">Discord</label>
|
||||
<div class="mb-3 d-flex flex-column gap-2">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="discordField-addon">discord.gg/</span>
|
||||
<input type="text" class="form-control" id="discordField" placeholder="pJkm23b2nA" aria-describedby="discordField-addon"></input>
|
||||
<button type="button" class="btn btn-outline-secondary" title="Add Discord invite">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<label for="wikiField" class="form-label">Wiki <a href="https://place-wiki.stefanocoding.me/" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||||
</svg></a></label>
|
||||
<div class="mb-3 d-flex flex-column gap-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="wikiField" placeholder="Page title"></input>
|
||||
<button type="button" class="btn btn-outline-secondary" title="Add wiki page">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<label id="websiteLabel" class="form-label">Website</label>
|
||||
<div id="websiteGroup" class="mb-3 d-flex flex-column gap-2"></div>
|
||||
<label id="subredditLabel" class="form-label">Subreddit</label>
|
||||
<div id="subredditGroup" class="mb-3 d-flex flex-column gap-2"></div>
|
||||
<label id="discordLabel" class="form-label">Discord</label>
|
||||
<div id="discordGroup" class="mb-3 d-flex flex-column gap-2"></div>
|
||||
<label id="wikiLabel" class="form-label">
|
||||
<a class="text-decoration-none" href="https://place-wiki.stefanocoding.me/" target="_blank" rel="noopener noreferrer">
|
||||
<span class="text-body">Wiki</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</label>
|
||||
<div id="wikiGroup" class="mb-3 d-flex flex-column gap-2"></div>
|
||||
<div id="infoButtons" class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-secondary w-50" id="cancelButton">Back</button>
|
||||
<button type="submit" class="btn btn-primary w-50" id="exportButton" data-bs-toggle="modal">Ok</button>
|
||||
<button type="submit" class="btn btn-primary w-50" id="exportButton">Ok</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue