mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-06-09 06:49:49 +02:00
Updated period editor
Other changes: * Added r/place and TFC logo for period variation selector * Updated to treat infoblock description newline and double newline separately * Fixed textarea dynamic sizing
This commit is contained in:
mxdanger
parent
c34af77348
commit
7080605d03
|
|
@ -210,11 +210,20 @@ #closeObjectsListButton {
|
|||
right: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 976px) {
|
||||
#wrapper:not(.listHidden) > #objectsList {
|
||||
max-width: calc(300px - 3rem);
|
||||
}
|
||||
#wrapper:not(.listHidden) > #closeObjectsListButton {
|
||||
right: calc(300px - 3rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
div:not(.listHidden) > #objectsList {
|
||||
#wrapper:not(.listHidden) > #objectsList {
|
||||
display: none;
|
||||
}
|
||||
div:not(.listHidden) > #closeObjectsListButton {
|
||||
#wrapper:not(.listHidden) > #closeObjectsListButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -229,7 +238,7 @@ @media (max-width: 576px) {
|
|||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
div:not(.listHidden) > #bottomBar {
|
||||
#wrapper:not(.listHidden) > #bottomBar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -242,11 +251,6 @@ #objectDescription p:last-child {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#descriptionField {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#exportString {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
|
@ -258,13 +262,13 @@ #bottomBar {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
div:not(.listHidden) > #bottomBar {
|
||||
#wrapper:not(.listHidden) > #bottomBar {
|
||||
left: 400px !important;
|
||||
}
|
||||
|
||||
#timeControls {
|
||||
position: relative;
|
||||
flex-grow: 2;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
#timeControls input {
|
||||
|
|
@ -277,7 +281,7 @@ #timeControls input {
|
|||
#timeControlsTooltip {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
bottom: 2.75rem;
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
|
||||
|
|
@ -366,3 +370,27 @@ body:not([data-dev]) .show-only-on-dev {
|
|||
.nav-link.active {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.period-group {
|
||||
transition: box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.period-group[data-active=true] {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75);
|
||||
}
|
||||
|
||||
.period-group[data-active=true][data-status=active] {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75);
|
||||
}
|
||||
|
||||
.period-group[data-status=active] {
|
||||
box-shadow: 0 0 0 .1rem rgba(var(--bs-primary-rgb), .5);
|
||||
}
|
||||
|
||||
.period-group[data-active=true][data-status=error] {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .75);
|
||||
}
|
||||
|
||||
.period-group[data-status=error] {
|
||||
box-shadow: 0 0 0 .1rem rgba(var(--bs-danger-rgb), .5);
|
||||
}
|
||||
1
web/_img/place-logo.svg
Normal file
1
web/_img/place-logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 192 192"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/><rect x="77" y="77" width="38" height="38"/></svg>
|
||||
|
After Width: | Height: | Size: 273 B |
1
web/_img/tfc-logo.svg
Normal file
1
web/_img/tfc-logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 192 192"><defs><style>.a{fill-rule:evenodd;}</style></defs><path class="a" d="M69.79,83.55c-.47,.65-.59,1.35-.59,1.35-.26,1.47,.76,2.72,.92,3.12,2.84,7.1,4.49,13.93,3.97,16.39-.47,2.18-5.6,5.65-12.36,8.33-3.63,1.44-6.11,2.99-8.04,5.01-7.17,7.51-10.24,17.86-7.14,24.05,3.93,7.84,18.38,5.86,28.05-3.85,2.09-2.1,3.15-3.83,6.63-10.77,2.97-5.93,4.26-8.05,5.47-8.95,2.04-1.52,9.82,.1,17.41,3.64,1.71,.8,2.31,1.04,2.78,.98,0,0,.22-.05,.43-.14,1.31-.59,17.43-17,25.58-25.34-1.79,.09-3.57,.18-5.36,.28-2.84,2.63-5.68,5.27-8.52,7.9-10.85-10.85-21.7-21.71-32.55-32.56,1.73-1.8,3.46-3.6,5.18-5.4-.29-1.56-.57-3.12-.86-4.69-1.34,1.27-19.42,18.45-21.01,20.66Zm-10.45,44.57c2.5,0,4.53,2.03,4.53,4.53s-2.03,4.53-4.53,4.53-4.53-2.03-4.53-4.53,2.03-4.53,4.53-4.53Z"/><path class="f" d="M132.9,97.36c-.88,.22-7.88,1.92-9.91-1.04-1.11-1.62-1.05-4.71-.52-6.57,.74-2.59,.9-4.06,.25-4.73-.73-.76-2.03-.31-3.73-.18-3.4,.27-8.08-.86-9.6-3.16-2.77-4.21,4.48-13.03,2.31-14.69-.17-.13-.34-.16-.67-.22-4.24-.73-6.79,4.71-11.66,5.1-2.93,.24-6.21-1.39-7.72-4.02-1.11-1.94-1-3.96-.86-4.95h0s7.38-7.39,17.6-17.52c12.75,12.73,25.51,25.47,38.26,38.2l-13.75,13.79Z"/><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -66,7 +66,7 @@ const periodClipboard = {
|
|||
"path": null
|
||||
}
|
||||
|
||||
;[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
|
||||
;[...document.querySelectorAll("#objectInfo textarea")].forEach(el => {
|
||||
el.addEventListener("input", function () {
|
||||
this.style.height = "auto";
|
||||
this.style.height = (this.scrollHeight) + "px"
|
||||
|
|
@ -313,7 +313,7 @@ function initDraw() {
|
|||
disableDrawingOverride = true;
|
||||
objectInfoBody.removeAttribute("style");
|
||||
drawControlsBody.style.display = "none";
|
||||
[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
|
||||
[...document.querySelectorAll("#objectInfo textarea")].forEach(el => {
|
||||
if (el.value) el.style.height = (el.scrollHeight) + "px"
|
||||
})
|
||||
// if (isOnPeriod()) {
|
||||
|
|
@ -441,7 +441,7 @@ function initDraw() {
|
|||
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')
|
||||
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')
|
||||
redoButton.disabled = true;
|
||||
|
|
@ -505,7 +505,7 @@ function initPeriodGroups() {
|
|||
|
||||
const startPeriodEl = periodGroupEl.querySelector('.period-start')
|
||||
const endPeriodEl = periodGroupEl.querySelector('.period-end')
|
||||
const periodVisibilityEl = periodGroupEl.querySelector('.period-visible')
|
||||
// const periodVisibilityEl = periodGroupEl.querySelector('.period-visible')
|
||||
const periodDeleteEl = periodGroupEl.querySelector('.period-delete')
|
||||
const periodDuplicateEl = periodGroupEl.querySelector('.period-duplicate')
|
||||
const periodVariationEl = periodGroupEl.querySelector('.period-variation')
|
||||
|
|
@ -515,10 +515,10 @@ function initPeriodGroups() {
|
|||
// console.log(period, start, end, variation)
|
||||
|
||||
startPeriodEl.id = "periodStart" + index
|
||||
startPeriodEl.previousSibling.for = startPeriodEl.id
|
||||
startPeriodEl.previousElementSibling.htmlFor = startPeriodEl.id
|
||||
endPeriodEl.id = "periodEnd" + index
|
||||
endPeriodEl.previousSibling.for = endPeriodEl.id
|
||||
periodVisibilityEl.id = "periodVisibility" + index
|
||||
endPeriodEl.previousElementSibling.htmlFor = endPeriodEl.id
|
||||
// periodVisibilityEl.id = "periodVisibility" + index
|
||||
periodVariationEl.id = "periodVariation" + index
|
||||
periodCopyEl.id = "periodCopy" + index
|
||||
|
||||
|
|
@ -554,22 +554,35 @@ function initPeriodGroups() {
|
|||
endPeriodEl.value = newVariationConfig.default
|
||||
endPeriodEl.max = newVariationConfig.versions.length - 1
|
||||
updateTime(newVariationConfig.default, newVariation)
|
||||
if (periodVariationEl.value == "tfc") {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192"><defs><style>.a{fill-rule:evenodd;}</style></defs><path class="a" d="M69.79,83.55c-.47,.65-.59,1.35-.59,1.35-.26,1.47,.76,2.72,.92,3.12,2.84,7.1,4.49,13.93,3.97,16.39-.47,2.18-5.6,5.65-12.36,8.33-3.63,1.44-6.11,2.99-8.04,5.01-7.17,7.51-10.24,17.86-7.14,24.05,3.93,7.84,18.38,5.86,28.05-3.85,2.09-2.1,3.15-3.83,6.63-10.77,2.97-5.93,4.26-8.05,5.47-8.95,2.04-1.52,9.82,.1,17.41,3.64,1.71,.8,2.31,1.04,2.78,.98,0,0,.22-.05,.43-.14,1.31-.59,17.43-17,25.58-25.34-1.79,.09-3.57,.18-5.36,.28-2.84,2.63-5.68,5.27-8.52,7.9-10.85-10.85-21.7-21.71-32.55-32.56,1.73-1.8,3.46-3.6,5.18-5.4-.29-1.56-.57-3.12-.86-4.69-1.34,1.27-19.42,18.45-21.01,20.66Zm-10.45,44.57c2.5,0,4.53,2.03,4.53,4.53s-2.03,4.53-4.53,4.53-4.53-2.03-4.53-4.53,2.03-4.53,4.53-4.53Z"/><path class="f" d="M132.9,97.36c-.88,.22-7.88,1.92-9.91-1.04-1.11-1.62-1.05-4.71-.52-6.57,.74-2.59,.9-4.06,.25-4.73-.73-.76-2.03-.31-3.73-.18-3.4,.27-8.08-.86-9.6-3.16-2.77-4.21,4.48-13.03,2.31-14.69-.17-.13-.34-.16-.67-.22-4.24-.73-6.79,4.71-11.66,5.1-2.93,.24-6.21-1.39-7.72-4.02-1.11-1.94-1-3.96-.86-4.95h0s7.38-7.39,17.6-17.52c12.75,12.73,25.51,25.47,38.26,38.2l-13.75,13.79Z"/><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/></svg>';
|
||||
} else {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192" aria-hidden="true"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/><rect x="77" y="77" width="38" height="38"/></svg>';
|
||||
}
|
||||
// console.log(parseInt(event.target.value))
|
||||
})
|
||||
|
||||
periodCopyEl.addEventListener("click", event => {
|
||||
const index = parseInt(event.target.id.split('periodCopy')[1])
|
||||
if (event.target.textContent === "Copy") {
|
||||
event.target.textContent = "End"
|
||||
if (event.target.textContent === " Copy") {
|
||||
event.target.className = "period-copy btn btn-primary btn-sm flex-fill";
|
||||
event.target.innerHTML = '<i class="bi bi-clipboard-x" aria-hidden="true"></i> End'
|
||||
periodClipboard.index = index
|
||||
periodClipboard.path = [...pathWithPeriods[index][1]]
|
||||
startPeriodEl.disabled = true;
|
||||
endPeriodEl.disabled = true;
|
||||
updatePeriodGroups()
|
||||
} else if (event.target.textContent === "End") {
|
||||
event.target.textContent = "Copy"
|
||||
} else if (event.target.textContent === " End") {
|
||||
event.target.className = "period-copy btn btn-secondary btn-sm flex-fill";
|
||||
event.target.innerHTML = '<i class="bi bi-clipboard" aria-hidden="true"></i> Copy'
|
||||
periodClipboard.index = null
|
||||
periodClipboard.path = null
|
||||
startPeriodEl.disabled = false;
|
||||
endPeriodEl.disabled = false;
|
||||
updatePeriodGroups()
|
||||
} else if (event.target.textContent === "Paste") {
|
||||
} else if (event.target.textContent === " Paste") {
|
||||
pathWithPeriods[index][1] = [...periodClipboard.path]
|
||||
// console.log(pathWithPeriods[index])
|
||||
if (pathWithPeriods.length > 2) console.log(pathWithPeriods[2])
|
||||
|
|
@ -588,11 +601,19 @@ function initPeriodGroups() {
|
|||
|
||||
periodVariationEl.value = variation
|
||||
|
||||
if (periodVariationEl.value == "tfc") {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192"><defs><style>.a{fill-rule:evenodd;}</style></defs><path class="a" d="M69.79,83.55c-.47,.65-.59,1.35-.59,1.35-.26,1.47,.76,2.72,.92,3.12,2.84,7.1,4.49,13.93,3.97,16.39-.47,2.18-5.6,5.65-12.36,8.33-3.63,1.44-6.11,2.99-8.04,5.01-7.17,7.51-10.24,17.86-7.14,24.05,3.93,7.84,18.38,5.86,28.05-3.85,2.09-2.1,3.15-3.83,6.63-10.77,2.97-5.93,4.26-8.05,5.47-8.95,2.04-1.52,9.82,.1,17.41,3.64,1.71,.8,2.31,1.04,2.78,.98,0,0,.22-.05,.43-.14,1.31-.59,17.43-17,25.58-25.34-1.79,.09-3.57,.18-5.36,.28-2.84,2.63-5.68,5.27-8.52,7.9-10.85-10.85-21.7-21.71-32.55-32.56,1.73-1.8,3.46-3.6,5.18-5.4-.29-1.56-.57-3.12-.86-4.69-1.34,1.27-19.42,18.45-21.01,20.66Zm-10.45,44.57c2.5,0,4.53,2.03,4.53,4.53s-2.03,4.53-4.53,4.53-4.53-2.03-4.53-4.53,2.03-4.53,4.53-4.53Z"/><path class="f" d="M132.9,97.36c-.88,.22-7.88,1.92-9.91-1.04-1.11-1.62-1.05-4.71-.52-6.57,.74-2.59,.9-4.06,.25-4.73-.73-.76-2.03-.31-3.73-.18-3.4,.27-8.08-.86-9.6-3.16-2.77-4.21,4.48-13.03,2.31-14.69-.17-.13-.34-.16-.67-.22-4.24-.73-6.79,4.71-11.66,5.1-2.93,.24-6.21-1.39-7.72-4.02-1.11-1.94-1-3.96-.86-4.95h0s7.38-7.39,17.6-17.52c12.75,12.73,25.51,25.47,38.26,38.2l-13.75,13.79Z"/><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/></svg>';
|
||||
} else {
|
||||
const variationIcon = periodVariationEl.parentElement.querySelector('.input-group-text');
|
||||
variationIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 192 192" aria-hidden="true"><polygon points="154 0 154 38 39 38 39 192 0 192 0 0"/><polygon points="192 38 192 192 77 192 77 153 154 153 154 38"/><rect x="77" y="77" width="38" height="38"/></svg>';
|
||||
}
|
||||
|
||||
periodGroupElements.push({
|
||||
periodGroupEl,
|
||||
startPeriodEl,
|
||||
endPeriodEl,
|
||||
periodVisibilityEl,
|
||||
// periodVisibilityEl,
|
||||
periodVariationEl,
|
||||
periodCopyEl
|
||||
})
|
||||
|
|
@ -615,7 +636,7 @@ function updatePeriodGroups() {
|
|||
periodGroupEl,
|
||||
startPeriodEl,
|
||||
endPeriodEl,
|
||||
periodVisibilityEl,
|
||||
// periodVisibilityEl,
|
||||
periodVariationEl,
|
||||
periodCopyEl
|
||||
} = elements
|
||||
|
|
@ -644,20 +665,23 @@ function updatePeriodGroups() {
|
|||
|
||||
if (periodClipboard.index !== null) {
|
||||
if (index !== periodClipboard.index) {
|
||||
periodCopyEl.textContent = "Paste"
|
||||
periodCopyEl.innerHTML = '<i class="bi bi-clipboard-plus" aria-hidden="true"></i> Paste'
|
||||
// console.log(JSON.stringify(pathWithPeriods[index][1]))
|
||||
// console.log(JSON.stringify(periodClipboard.path))
|
||||
// console.log(JSON.stringify(pathWithPeriods[index][1]) === JSON.stringify(periodClipboard.path))
|
||||
if (JSON.stringify(pathWithPeriods[index][1]) === JSON.stringify(periodClipboard.path)) {
|
||||
periodCopyEl.innerHTML = '<i class="bi bi-clipboard-check" aria-hidden="true"></i> Paste'
|
||||
periodCopyEl.disabled = true
|
||||
} else {
|
||||
periodCopyEl.innerHTML = '<i class="bi bi-clipboard-plus" aria-hidden="true"></i> Paste'
|
||||
periodCopyEl.disabled = false
|
||||
}
|
||||
} else {
|
||||
periodCopyEl.textContent = "End"
|
||||
periodCopyEl.className = "period-copy btn btn-primary btn-sm flex-fill";
|
||||
periodCopyEl.innerHTML = '<i class="bi bi-clipboard-x" aria-hidden="true"></i> End'
|
||||
}
|
||||
} else {
|
||||
periodCopyEl.textContent = "Copy"
|
||||
periodCopyEl.innerHTML = '<i class="bi bi-clipboard" aria-hidden="true"></i> Copy'
|
||||
periodCopyEl.disabled = false
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -54,7 +54,9 @@ function createInfoBlock(entry) {
|
|||
if (entry.description) {
|
||||
const descElement = document.createElement("div");
|
||||
descElement.id = "objectDescription";
|
||||
descElement.innerHTML = '<p>' + entry.description.replace(/\n/g, '</p><p>');
|
||||
let formattedDesc = entry.description.replace(/\n{2}/g, '</p><p>');
|
||||
formattedDesc = formattedDesc.replace(/\n/g, '<br>');
|
||||
descElement.innerHTML = '<p>' + formattedDesc + '</p>';
|
||||
bodyElement.appendChild(descElement);
|
||||
}
|
||||
|
||||
|
|
@ -92,7 +94,7 @@ function createInfoBlock(entry) {
|
|||
linkListElement.appendChild(subredditGroupElement);
|
||||
|
||||
entry.links.subreddit.forEach(subreddit => {
|
||||
subreddit = "/r/" + subreddit;
|
||||
subreddit = "r/" + subreddit;
|
||||
const subredditLinkElement = document.createElement("a");
|
||||
subredditLinkElement.className = "btn btn-primary text-truncate";
|
||||
subredditLinkElement.target = "_blank";
|
||||
|
|
|
|||
|
|
@ -67,17 +67,6 @@
|
|||
</nav>
|
||||
<main class="pt-5">
|
||||
<div class="container py-4">
|
||||
<!-- <header class="d-flex flex-column flex-sm-row align-items-center pb-3 mb-4 border-bottom">
|
||||
<a href="./" class="d-flex align-items-center mb-3 mb-sm-0 me-sm-auto text-body text-decoration-none">
|
||||
<img class="me-2" src="./_img/logo.svg" height="32" width="32" alt="">
|
||||
<span class="fs-4">The 2022 /r/place Atlas</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item"><a href="./" class="nav-link">Atlas Map</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">About</a></li>
|
||||
</ul>
|
||||
</header> -->
|
||||
|
||||
<div class="row g-5">
|
||||
<div class="col-md-7 col-xl-8">
|
||||
<h1 class="display-5 fw-bold">The 2022 /r/place Atlas</h2>
|
||||
|
|
|
|||
|
|
@ -238,7 +238,8 @@ <h5 class="offcanvas-title" id="offcanvasDrawLabel">Edit Entry</h5>
|
|||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</header>
|
||||
<div class="offcanvas-body" id="offcanvasDraw-drawControls">
|
||||
<div id="drawControls" class="d-flex flex-column gap-2 p-3 mb-3 bg-secondary bg-opacity-10 rounded">
|
||||
<div id="drawControls" class="d-flex flex-column gap-2 p-3 pb-2 mb-3 bg-secondary bg-opacity-10 rounded">
|
||||
<h5>Draw</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-secondary flex-fill" id="undoButton" title="Undo line [ctrl-z]" disabled>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/></svg>
|
||||
|
|
@ -254,17 +255,16 @@ <h5 class="offcanvas-title" id="offcanvasDrawLabel">Edit Entry</h5>
|
|||
|
||||
<div class="form-check" id="highlightUnchartedLabel">
|
||||
<input class="form-check-input" type="checkbox" id="highlightUncharted" checked>
|
||||
<label class="form-check-label" for="highlightUncharted" title="Highlight uncharted areas of the map">
|
||||
<label class="form-check-label mb-0" for="highlightUncharted" title="Highlight uncharted areas of the map">
|
||||
Highlight Empty
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="periods">
|
||||
<p>Periods</p>
|
||||
<p id="periodsStatus"></p>
|
||||
<div id="periodGroups"></div>
|
||||
<button id="periodsAdd">Add Period</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="periods" class="p-2 pt-3 mb-3 bg-secondary bg-opacity-10 rounded">
|
||||
<h5 class="ps-2">Timeline</h5>
|
||||
<p id="periodsStatus"></p>
|
||||
<div id="periodGroups"></div>
|
||||
<button type="button" class="btn btn-primary d-block mx-auto" id="periodsAdd">Add Period</button>
|
||||
</div>
|
||||
<div id="hint">
|
||||
<p>Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank" rel="noopener noreferrer">this Reddit post</a> for instructions.</p>
|
||||
|
|
@ -287,7 +287,7 @@ <h5 class="offcanvas-title" id="offcanvasDrawLabel">Edit Entry</h5>
|
|||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="descriptionField" class="form-label">Description</label>
|
||||
<textarea id="descriptionField" class="form-control" rows="3" placeholder="A short description to be understood by everyone" required></textarea>
|
||||
<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>
|
||||
|
|
@ -421,18 +421,38 @@ <h5 class="modal-title" id="donateModalLabel">Donation Links</h5>
|
|||
</div>
|
||||
</div>
|
||||
<template id="period-group">
|
||||
<div class="period-group">
|
||||
<label for="period-start">Start Period</label>
|
||||
<input class="period-start" type="range" min="0">
|
||||
<label for="period-end">End Period</label>
|
||||
<input class="period-end" type="range" min="0">
|
||||
<p class="period-visible"></p>
|
||||
<div class="inline">
|
||||
<button class="period-copy">Copy</button>
|
||||
<button class="period-delete">Delete</button>
|
||||
<button class="period-duplicate">Duplicate</button>
|
||||
<div class="period-group card mb-2">
|
||||
<div class="card-body">
|
||||
<label for="period-start" class="form-label">Start Period</label>
|
||||
<input type="range" class="period-start form-range" id="period-start" min="0">
|
||||
<label for="period-end" class="form-label">End Period</label>
|
||||
<input type="range" class="period-end form-range" id="period-end" min="0">
|
||||
<!-- <p class="period-visible"></p> -->
|
||||
<div class="d-flex flex-wrap gap-2 mb-2">
|
||||
<button type="button" class="period-copy btn btn-secondary btn-sm flex-fill" id="period-copy">
|
||||
<i class="bi bi-clipboard" aria-hidden="true"></i>
|
||||
Copy
|
||||
</button>
|
||||
<button type="button" class="period-duplicate btn btn-secondary btn-sm flex-fill" id="period-duplicate">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-back" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
|
||||
</svg>
|
||||
Duplicate
|
||||
</button>
|
||||
<button type="button" class="period-delete btn btn-danger btn-sm flex-fill" id="period-delete">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<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>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"></span>
|
||||
<select class="period-variation form-select" title="Select which layer this path is used for"></select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<select class="period-variation"></select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue