From c55d3b8b2462e05bcb1620604139fb6d18b20678 Mon Sep 17 00:00:00 2001
From: mxdanger <32040254+mxdanger@users.noreply.github.com>
Date: Wed, 20 Apr 2022 01:54:58 -0700
Subject: [PATCH 01/16] Major UI redesign
---
web/_css/style.css | 1052 +++---------------------------------------
web/_img/logo.svg | 2 +-
web/_js/draw.js | 108 ++---
web/_js/infoblock.js | 121 +++--
web/_js/main.js | 12 +-
web/_js/time.js | 4 +-
web/_js/view.js | 79 ++--
web/about.html | 168 ++++---
web/index.html | 454 +++++++++++-------
9 files changed, 674 insertions(+), 1326 deletions(-)
diff --git a/web/_css/style.css b/web/_css/style.css
index a2f2d976..6b5b7769 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -13,20 +13,13 @@
========================================================================
*/
-@font-face {
- /* DejaVuSans-ExtraLight 2.37 - https://dejavu-fonts.github.io/ */
+/* @font-face {
+ DejaVuSans-ExtraLight 2.37 - https://dejavu-fonts.github.io/
font-family: 'dejavu';
src: url('dejavusans-extralight.woff2') format('woff2');
font-weight: normal;
font-style: normal;
-}
-
-* {
- margin: 0;
- padding: 0;
- border: none;
- box-sizing: border-box;
-}
+} */
html, body {
min-height: 100%;
@@ -35,21 +28,14 @@ html, body {
width: 100%;
}
-p {
- line-height: 1.5em;
- margin-bottom: 1em;
+svg.bi {
+ display: inline-block;
+ vertical-align: -.125em;
}
-body {
+body[data-mode] {
overflow: hidden;
- overflow-x: hidden;
- overflow-y: hidden;
-
- font-family: dejavu, sans, Sans-Serif;
background-color: #111;
- color: #FFF;
-
- line-height: 1.15;
}
#wrapper {
@@ -57,170 +43,35 @@ #wrapper {
height: 100%;
width: 100%;
overflow: hidden;
- overflow-x: hidden;
- overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
-a {
- color: #ffcf6f;
- text-decoration: none;
+.navbar {
+ z-index: 1100 !important;
}
-a:hover {
- text-decoration: underline;
-}
-
-button,
-.button {
- background-image: linear-gradient(to bottom, #888, #666);
- border: 1px #000 solid;
- color: #FFF;
- text-align: center;
- display: inline-block;
- padding: 5px;
- cursor: pointer;
- text-shadow: 1px 1px 0 #444;
-}
-
-button::-moz-focus-inner,
-.button::-moz-focus-inner {
- border: 0;
-}
-
-button:disabled,
-button:disabled:hover,
-.button:disabled,
-.button:disabled:hover {
- background-image: none;
- background-color: #666;
- color: #AAA;
- cursor: default;
-}
-
-button:hover,
-.button:hover {
- background-image: linear-gradient(to bottom, #999, #777);
- text-decoration: none;
-}
-
-input[type="text"],
-textArea {
- background-color: #444;
- border: 1px #000 solid;
- margin-bottom: 4px;
- padding: 5px 5px;
- color: #FFF;
- box-sizing: border-box;
-}
-
-input[type="text"] {
- height: 25px;
-}
-
-header {
- min-width: 360px;
- height: 50px;
- position: absolute;
- background-color: #555;
- border-right: 1px #000 solid;
- border-bottom: 1px #000 solid;
- z-index: 2000;
- display: inline-block;
-}
-
-@media (max-width: 600px) {
- header{
- width: 100%;
+@supports (backdrop-filter: blur()) {
+ .navbar, #offcanvasList, #offcanvasDraw {
+ -webkit-backdrop-filter: saturate(180%) blur(15px);
+ backdrop-filter: saturate(180%) blur(15px);
+ --bs-bg-opacity: .9 !important;
}
}
+#offcanvasList, #offcanvasDraw {
+ top: 3.75rem;
+}
+
+body[data-mode]:not([data-mode="draw"]) #drawNavButtons, [data-mode="draw"] #defaultNavButtons {
+ display: none;
+}
+
@media (max-width: 400px) {
- header h1{
- font-size: 28px;
+ .offcanvas-start.show {
+ border-right: none !important;
}
}
-@media (max-width: 350px) {
- header h1{
- font-size: 20px;
- }
-}
-
-header.aboutHeader {
- width: 100%;
- border-right: 0;
-}
-
-header > a {
- display: flex;
- color: #FFF;
- /*align-items: center;*/
-}
-
-header > a:hover {
- text-decoration: none;
- color: #FFAA00;
-}
-
-header h1 {
- font-size: 24px;
-}
-
-#logo {
- padding: 5px;
- /*background-color: #FFF;*/
-}
-
-h1 {
- font-weight: lighter;
- padding: 0 10px;
- display: inline-block;
- margin-top: 0;
- line-height: 45px;
- position: absolute;
- top: 0;
- left: 50px;
- text-shadow: 1px 1px 0 #000;
-}
-
-select {
- -moz-appearance: none;
- -webkit-appearance: none;
- appearance: none;
- background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E")
- ,linear-gradient(to bottom, #888, #666);
- background-repeat: no-repeat, repeat;
- background-position: calc(100% - 10px) center, 0 0;
- background-size: 10px, cover;
- border: 1px #222 outset;
- color: #FFF;
- cursor: pointer;
- padding: 3px;
- padding-left: 7px;
-}
-
-select option[disabled] {
- display: none;
-}
-
-select:hover {
- background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E")
- ,linear-gradient(to bottom, #999, #777);
-}
-
-select:active {
- background-image: linear-gradient(to bottom, #666, #777);
- background-color: #666;
-}
-
-option,
-optgroup {
- background-color: #555;
- font-size: 16px;
- border-color: #BBB;
-}
-
#linesCanvas {
position: absolute;
left: 0;
@@ -232,9 +83,9 @@ #linesCanvas {
}
#container {
- width: calc(100% - 320px);
+ width: calc(100% - 400px);
height: 100%;
- margin-left: 320px;
+ margin-left: 400px;
touch-action: manipulation;
@@ -250,7 +101,7 @@ #loading {
left: 0;
right: 0;
bottom: 0;
- z-index: 1000;
+ z-index: -10;
}
#loading > div {
@@ -325,7 +176,7 @@ #image {
height: 100%;
width: 100%;
z-index: -1500;
- image-rendering: -moz-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
@@ -335,19 +186,18 @@ #highlightCanvas {
position: absolute;
height: 100%;
width: 100%;
- image-rendering: -moz-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#objectsList {
max-width: 300px;
- width: calc(100% - 10px);
+ width: 100%;
position: absolute;
right: 0;
- top: 0;
- padding: 0;
- max-height: calc(100% - 40px);
+ top: 3.75rem;
+ max-height: calc(100% - 3.75rem);
overflow-y: auto;
z-index: 0;
}
@@ -356,22 +206,8 @@ #closeObjectsListButton {
height: 40px;
width: 40px;
position: absolute;
- top: 10px;
- right: 310px;
- background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E")
- ,linear-gradient(to bottom, #666, #444);
- background-size: 15px, cover;
- background-position: center, 0 0;
- background-repeat: no-repeat, no-repeat;
-}
-
-#closeObjectsListButton.hidden {
- display: none;
-}
-
-#closeObjectsListButton:hover {
- background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E")
- ,linear-gradient(to bottom, #777, #555);
+ top: 4.25rem;
+ right: 300px;
}
@media (max-width: 750px) {
@@ -383,516 +219,98 @@ @media (max-width: 750px) {
}
}
-@media (max-width: 700px) {
+@media (max-width: 576px) {
#objectsList {
- top: 50px;
- max-height: calc(100% - 90px);
+ max-width: calc(300px - 3rem);
}
-}
-
-@media (max-width: 750px) {
#closeObjectsListButton {
- top: 60px;
+ right: calc(300px - 3rem);
}
}
-@media (max-width: 530px) {
- #objectsList {
- top: 80px;
- max-height: calc(100% - 130px);
- }
-
- #closeObjectsListButton {
- top: 55px;
- right: 10px;
- height: 30px;
- width: 30px;
+@media (max-width: 540px) {
+ div:not(.listHidden) > #bottomBar {
+ display: none !important;
}
}
-.object {
- background-color: #555;
- border: 1px #000 solid;
- margin: 10px 10px 0 0;
- padding: 10px;
- overflow-x: auto;
+#objectDescription p {
+ margin-bottom: 0.5rem;
}
-.object:hover {
- background-color: #666;
- border-color: #FFF;
-}
-
-.object:hover a {
- background-color: #555;
-}
-
-.object:hover h2 {
- background-color: #777;
-}
-
-.object > * {
- display: block;
-}
-
-.object h2 {
- display: block;
- font-size: 20px;
- background-color: #666;
- text-shadow: 1px 1px 0 #000;
- margin: 0 -10px 10px -10px;
- font-weight: 300;
-}
-
-.object h2 a {
- color: #FFF;
- padding: 3px 10px;
- display: block;
- height: 100%;
- width: 100%;
-}
-
-.object h2 a:hover {
- color: #FFAA00;
-}
-
-.object a {
- background-color: #666666;
- text-align: center;
- padding: 3px;
- margin-bottom: 5px;
-}
-
-.object a.inline {
- background-color: transparent;
- display: inline;
- padding: 0;
- margin: 0;
-}
-
-.object a.inline:hover {
- background-color: transparent;
- text-decoration: underline;
-}
-
-.object a:hover {
- background-color: #777;
- text-decoration: none;
-}
-
-.object p {
- margin-bottom: 10px;
-}
-
-p.edit {
- color: #FFFF00;
-}
-p.add {
- color: #00FF00;
-}
-p.delete {
- color: #FF0000;
-}
-
-#drawControlsContainer {
- background-color: #444;
- border-right: 1px #000 solid;
- width: 360px;
- position: absolute;
- left: 0;
- top: 50px;
- bottom: 0;
- overflow-y: auto;
- display: none;
- padding: 0 20px;
-}
-
-[data-mode="draw"] #drawControlsContainer {
- display: block;
-}
-
-#drawControls {
- width: 250px;
- padding: 15px;
- margin: 10px auto;
- background-color: #555;
-}
-
-#drawBackButton {
- margin: 10px auto 0 auto;
- display: block;
- width: 170px;
-}
-
-#drawControls > * {
- width: 100%;
- display: flex;
- justify-content: center;
- margin-bottom: 5px;
-}
-
-#drawControls > * > * {
- flex-grow: 1;
- margin-right: 5px;
-}
-
-#drawControls > * > *:last-child {
- margin-right: 0;
-}
-
-.checkboxLabel {
- background-color: #666;
- padding: 3px;
- cursor: pointer;
-}
-
-.checkboxLabel:hover {
- background-color: #777;
-}
-
-#drawControls .checkboxLabel {
- display: inline-block;
-}
-
-input[type="checkbox"] {
- margin: 3px;
- vertical-align: middle;
- display: inline-block;
- width: 15px;
- height: 15px;
-}
-
-#hint {
- display: block;
- text-align: left;
- color: #DDD;
-}
-
-#hint p {
- margin-bottom: 10px;
-}
-
-#objectInfo {
- display: none;
-}
-
-#objectInfo input {
- width: 100%;
+#objectDescription p:last-child {
+ margin-bottom: 0;
}
#descriptionField {
- width: 220px;
+ width: 100%;
height: 70px;
}
-#infoButtons {
- display: flex;
- margin-top: 10px;
-}
-
-#infoButtons button {
- width: 50px;
- flex-grow: 1;
- margin-right: 10px;
-}
-
-#infoButtons button:last-child {
- margin-right: 0;
-}
-
-.overlay {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, .8);
- display: none;
- justify-content: center;
- z-index: 1000;
-}
-
-#exportWindow {
- margin: 50px auto;
- padding: 10px;
- width: 100%;
- height: calc(100% - 100px);
- max-width: 500px;
- /*max-height: 300px*/;
-
- border: 1px #000 solid;
- background-color: #555;
-
- display: flex;
- flex-direction: column;
- overflow-y: auto;
-}
-
-#exportWindow * {
- flex-shrink: 0;
- margin-bottom: 10px;
-}
-
-#exportWindow p {
-
-}
-
#exportString {
- flex-grow: 1;
- flex-shrink: 0;
-}
-
-#exportCloseButton {
- margin-bottom: 0;
- width: 100px;
- align-self: flex-end;
-}
-
-#exportOverlay {
- display: none;
-}
-
-#coordsWrapper {
- min-width: 100px;
- position: absolute;
- display: flex;
- gap: 10px;
- z-index: 100;
- top: 5px;
- left: 364px;
-}
-
-#wrapper.listHidden #coordsWrapper {
- top: 49px;
- left: 149px;
-}
-
-@media (max-width: 750px) {
- #coordsWrapper {
- display: none;
- }
-}
-#coords {
- background-color: #555;
- border: 1px #000 solid;
- padding: 6.5px;
- font-size: 17px;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
-}
-
-#coords p {
- margin: 0;
- line-height: inherit;
+ min-height: 300px;
}
#bottomBar {
position: absolute;
- bottom: 10px;
- left: 10px;
- right: 10px;
- display: flex;
- gap: 10px;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
div:not(.listHidden) > #bottomBar {
- left: 370px !important;
-}
-
-@media (max-width: 1120px) {
- div:not(.listHidden) > #bottomBar {
- flex-wrap: wrap;
- }
-
- .listHidden #author {
- flex: 1 !important;
- }
-}
-
-@media (max-width: 800px) {
- #bottomBar {
- flex-wrap: wrap;
- }
-
- #timeControls {
- min-width: calc(100vw - 390px) !important;
- }
-
- #author {
- flex: 1;
- min-width: 100% !important;
- }
+ left: 400px !important;
}
#timeControls {
- flex: 1;
- background-color: #555;
- border: 1px #000 solid;
- font-size: 12px;
- text-align: center;
- min-width: 300px;
position: relative;
+ flex-grow: 2;
}
#timeControls input {
height: 100%;
- background: #555;
-webkit-appearance: none;
appearance: none;
width: 100%;
}
#timeControlsTooltip {
- display: none;
+ opacity: 0;
position: absolute;
- padding: 0.5em 2em;
- background: #555;
- border: 1px #000 solid;
- justify-content: center;
bottom: 40px;
- white-space: nowrap;
}
-#timeControlsTooltip p {
- line-height: normal;
- margin-bottom: 0;
+@supports (backdrop-filter: blur()) {
+ #timeControlsTooltip div {
+ -webkit-backdrop-filter: saturate(180%) blur(15px);
+ backdrop-filter: saturate(180%) blur(15px);
+ --bs-bg-opacity: .8 !important;
+ }
}
-#timeControls:hover #timeControlsTooltip {
- display: flex;
+#timeControls:hover #timeControlsTooltip, #timeControlsSlider:focus #timeControlsTooltip {
+ opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
- width: 10px;
- height: 25px;
- background: #d3d3d3;
+ width: 1rem;
+ height: 2rem;
+ background: var(--bs-light);
+ border-radius: .25rem;
cursor: pointer;
- }
-
- .slider::-moz-range-thumb {
+ box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
+}
+
+.slider::-moz-range-thumb {
appearance: none;
- width: 10px;
- height: 25px;
- background: #d3d3d3;
+ width: 1rem;
+ height: 2rem;
+ background: var(--bs-light);
+ border-radius: .25rem;
cursor: pointer;
- }
-
-#author {
- background-color: #555;
- border: 1px #000 solid;
- padding: 3px;
- font-size: 12px;
- z-index: 1100;
- min-width: 320px;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-#author p {
- margin: 0;
- line-height: inherit;
-}
-
-#zoomControls {
- width: 90px;
- display: flex;
- align-self: flex-end;
-}
-
-#zoomControls button {
- display: inline-block;
- height: 30px;
- width: 30px;
- margin-left: -1px;
- flex-grow: 1;
- font-size: 20px;
- line-height: 0;
- font-weight: 300;
- background-size: 15px;
- background-repeat: no-repeat;
- background-position: center;
- background-color: #555;
-}
-
-#zoomControls button:focus {
- outline: none;
-}
-
-#zoomControls button:hover {
- background-color: #666;
-}
-
-#zoomInButton {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cpath d='M171.429 495.22h162.857M252.857 413.79v162.858' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-156.438 -398.781)'/%3E%3C/svg%3E");
-}
-
-button#zoomResetButton {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cpath d='M334.284 576.652h-162.85l-.001-162.866h162.85z' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-156.438 -398.781)'/%3E%3C/svg%3E");
-}
-
-#zoomOutButton {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cpath d='M171.429 495.22h162.857' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-156.438 -398.781)'/%3E%3C/svg%3E");
-}
-
-#entriesListContainer {
- position: absolute;
- left: 10px;
- top: 50px;
- bottom: 0;
- padding-bottom: 0;
- width: 340px;
- display: flex;
- flex-direction: column;
-}
-
-@media (max-width: 500px) {
- div#entriesListContainer {
- width: calc(100% - 20px);
- }
-
- div#entriesListBackground {
- width: 100%;
- }
-
- div:not(.listHidden) > #bottomBar {
- display: none !important;
- }
-
- div:not(.listHidden) > button#hideListButton {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg style='stroke:%23fff;stroke-opacity:1'%3E%3Cpath d='m195.278 552.798 115.158-115.157M310.436 552.798 195.278 437.641' style='fill:none;stroke:%23fff;stroke-width:24.74926186;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='matrix(1.21216 0 0 1.21216 -210.083 -503.846)'/%3E%3C/g%3E%3C/svg%3E");
- background-size: 20px;
- position: absolute;
- top: 55px;
- right: 10px;
- left: initial;
- border: 1px #000 solid;
- width: 40px;
- height: 40px;
- }
-
- #entriesListNav {
- width: calc(100% - 45px);
- }
-}
-
-@media (max-width: 350px) {
- #entriesListNav > a#drawLink {
- display: none;
- }
-}
-
-[data-mode="draw"] #entriesListContainer {
- display: none;
-}
-
-.listHidden #entriesListContainer {
- display: none;
+ box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
}
#entriesListNav {
@@ -937,334 +355,14 @@ #entriesListNav > .small:hover {
border-color: transparent;
}
-#entriesListDonate:hover > svg {
- text-decoration: none;
- background-image: linear-gradient(to bottom, #FFAA00, #FFAA00);
- border-radius: 15px;
- padding: 3px;
- margin: -3px;
- height: 28px;
- width: 28px;
-}
-#entriesListDiscord:hover > svg {
- text-decoration: none;
- background-image: linear-gradient(to bottom, #7289DA, #7289DA);
- border-radius: 12px;
- padding: 3px;
- margin: -3px;
- height: 28px;
- width: 28px;
-}
-
-#entriesListBackground {
- position: absolute;
- left: 0;
- top: 50px;
- bottom: 0;
- width: 360px;
- z-index: -400;
- background-color: #333;
- border-right: 1px #000 solid;
-}
-
-[data-mode="draw"] #entriesListBackground {
- display: none;
-}
-
-.listHidden #entriesListBackground {
- display: none;
-}
-
-#hideListButton {
- position: absolute;
- height: 100px;
- width: 15px;
- top: 60px;
- left: 360px;
- border-left: none;
- background-color: #444;
- background-size: 7px;
- background-repeat: no-repeat;
- background-position: center;
- background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165.157' height='260.426'%3E%3Cpath d='M310.436 552.798 195.278 437.585l115.158-115.213' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-170.278 -307.372)'/%3E%3C/svg%3E");
-}
-
-.listHidden #hideListButton::before {
- content: "Show List";
- font-size: 17px;
- font-weight: 300;
- color: #BBB;
- margin-left: 20px;
-}
-
-#hideListButton:hover {
- background-color: #555;
-}
-
-[data-mode="draw"] #hideListButton {
- display: none;
-}
-
-.listHidden #hideListButton {
- background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272.844' height='177.594'%3E%3Cpath d='M368.07 380.006 252.857 495.164 137.644 380.006' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-116.438 -348.781)'/%3E%3C/svg%3E")
- ,linear-gradient(to bottom, #555, #444);
- background-size: 15px, cover;
- background-position: 10px center, 0 0;
- top: 49px;
- left: 20px;
- border: 1px #000 solid;
- border-top: 1px #333 solid;
- width: 130px;
- height: 35px;
- z-index: 100;
-}
-
-#hideListButton:focus {
- outline: none;
-}
-
-#entriesListControls {
- background-color: #555;
- border: 1px #000 solid;
- color: #CCC;
- padding: 10px;
- margin-bottom: 10px;
-}
-
-#entriesListControls input:focus {
- outline: none;
- border-color: #CCC;
-}
-
[data-mode="explore"] #entriesListControls {
display: none;
}
-#atlasSize {
- display: block;
- margin: 3px 0 5px 0;
-}
-
-#searchList {
- width: 100%;
-}
-
-#sortContainer {
-
-}
-
-#sortContainer label {
- width: 70px;
-}
-
-#sort {
- width: 150px;
-}
-
-#entriesListControls {
- width: 100%;
-}
-
-#entriesList {
- overflow-y: auto;
- direction: rtl;
- padding-bottom: 10px;
- text-align: center;
-}
-
-#entriesList .object {
- direction: ltr;
- margin: 0 0 10px 5px;
- text-align: left;
-}
-
-#aboutContainer {
- position: absolute;
- top: 50px;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #333;
- display: block;
- z-index: 2000;
- overflow-y: auto;
-}
-
-#aboutBackButton {
- margin: 20px 0 20px;
- padding: 10px 20px;
-}
-
-#aboutBackButtonContainer {
- /*margin: 0 auto;
- width: 100%;
- max-width: 1300px;*/
-}
-
-#about {
- margin: 0 auto;
- width: 100%;
- max-width: 1000px;
- padding: 10px;
-}
-
-#about a {
- white-space: nowrap;
-}
-
-#about h2 {
- font-weight: 300;
- font-size: 30px;
- margin-top: 30px;
- margin-bottom: 10px;
-}
-
-#about h3 {
- line-height: 1.4em;
- text-align: center;
-}
-
-#contributors {
- text-align: justify;
- margin-top: 15px;
- margin-bottom: 15px;
-}
-
-#contributors a {
- margin: 3px;
- line-height: 26px;
-}
-
-#donateButton {
- cursor: pointer;
-}
-
-#donateWindow {
- display: inline-block;
- z-index: 2000;
- max-width: 400px;
- background-color: #444;
- border: 1px #000 solid;
- width: 100%;
- text-align: center;
- min-height: 50px;
- max-height: 500px;
- overflow: auto;
- height: auto;
- align-self: center;
-}
-
-#donateWindow {
- top: 20px;
- max-height: 100%;
- max-width: 800px;
-}
-
-#donateWindow > p {
- margin: 2px 0;
- padding: 0 20px;
- text-align: left;
- width: 100%;
-}
-
-#donateWindow > * {
- display: inline-block;
- margin: 5px 0;
-}
-
-#donateWindow > h2 {
- font-weight: 200;
- background-color: #555;
- width: 100%;
- line-height: 1.5em;
- margin: 10px 0;
- text-shadow: 1px 1px 0 #000;
-}
-
-#donateWindow input {
- width: 100%;
- max-width: 350px;
- font-size: 14px;
- background-color: #666;
- text-align: center;
- cursor: text;
- color: #FFF;
-}
-
-#donateWindow button {
- padding: 10px 20px;
- margin-bottom: 20px;
- margin-top: 10px;
-}
-
-h2#abouth2 {
- font-size: 40px;
- margin-bottom: 20px;
- text-shadow: 2px 2px 0 #000;
-}
-
-#viewModes {
- position: relative;
- display: inline-block;
-}
-
-#viewModes .buffer {
- bottom: -10px;
- left: 0;
- position: absolute;
- height: 20px;
- width: 100%
-}
-
-#viewModes .dropdown-content {
- margin-top: 1.5rem;
- top: 10px;
- left: 0;
- position: absolute;
- display: none;
- background: #666;
- border: 1px #000 solid;
- cursor: pointer;
- width: 125%
-}
-
-#viewModes .dropdown-content a {
- color: #FFF;
- text-align: left;
- padding: 5px 10px;
- display: block;
- text-decoration: none;
- text-shadow: 1px 1px 0 #444;
-}
-
-#viewModes .dropdown-content a:hover {
- background-image: linear-gradient(to bottom, #999, #777);
-}
-
-#viewModes:hover .dropdown-content,
-#viewModes:active .dropdown-content {
- display: block;
-}
-
body:not([data-dev]) .show-only-on-dev {
display: none !important;
}
-#netlifyBadges {
- display: flex;
- align-items: center;
- gap: .5rem
-}
-
-#donateWindow a.button {
- padding: 1rem
-}
-
-#donateWindow a.button svg {
- height: 1em;
- vertical-align: -0.125em;
-}
-
-#donateWindow a.button path {
- color: white;
+.nav-link.active {
+ font-weight: 700;
}
\ No newline at end of file
diff --git a/web/_img/logo.svg b/web/_img/logo.svg
index a53fd296..1ce7808f 100644
--- a/web/_img/logo.svg
+++ b/web/_img/logo.svg
@@ -1 +1 @@
-Edit Exit Draw Mode ');
+
+ var myOffcanvas = document.getElementById("offcanvasDraw");
+ var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
+ bsOffcanvas.show();
+
window.render = render
window.renderBackground = renderBackground
window.updateHovering = updateHovering
+ // Initialize variables
var finishButton = document.getElementById("finishButton");
var resetButton = document.getElementById("resetButton");
var undoButton = document.getElementById("undoButton");
var redoButton = document.getElementById("redoButton");
- var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
- var objectInfoBox = document.getElementById("objectInfo");
- var hintText = document.getElementById("hint");
+ var drawControlsBody = document.getElementById("offcanvasDraw-drawControls");
+ var objectInfoBody = document.getElementById("offcanvasDraw-objectInfo");
+ var objectInfoForm = document.getElementById("objectInfo");
- var exportButton = document.getElementById("exportButton");
var cancelButton = document.getElementById("cancelButton");
- var exportOverlay = document.getElementById("exportOverlay");
- var exportCloseButton = document.getElementById("exportCloseButton");
+ var exportModal = new bootstrap.Modal(document.getElementById("exportModal"))
+ var exportModalElement = document.getElementById("exportModal")
var rShiftPressed = false;
var lShiftPressed = false;
@@ -116,14 +124,10 @@ function initDraw(){
});
window.addEventListener("keyup", function(e){
- if(e.key == "Enter"){
- finish();
- } else if(e.key == "z" && e.ctrlKey){
+ if (e.key == "z" && e.ctrlKey){
undo();
} else if(e.key == "y" && e.ctrlKey){
redo();
- } else if(e.key == "Escape"){
- exportOverlay.style.display = "none";
} else if (e.key === "Shift" ){
if(e.code === "ShiftRight"){
rShiftPressed = false;
@@ -135,7 +139,9 @@ function initDraw(){
});
window.addEventListener("keydown", function(e){
- if (e.key === "Shift" ){
+ if (e.key == "Enter"){
+ finish();
+ } else if (e.key === "Shift" ){
if(e.code === "ShiftRight"){
rShiftPressed = true;
} else if(e.code === "ShiftLeft"){
@@ -165,37 +171,17 @@ function initDraw(){
reset();
});
- document.getElementById("nameField").addEventListener("keyup", function(e){
- if(e.key == "Enter"){
- exportJson();
- }
+ // refocus on button when modal is closed
+ exportModalElement.addEventListener('hidden.bs.modal', function() {
+ document.getElementById("exportButton").focus();
});
- document.getElementById("websiteField").addEventListener("keyup", function(e){
- if(e.key == "Enter"){
- exportJson();
- }
+ // bind it the same as you bind a button, but on submit
+ objectInfoForm.addEventListener('submit', function(e) {
+ e.preventDefault()
+ exportJson()
});
- document.getElementById("subredditField").addEventListener("keyup", function(e){
- if(e.key == "Enter"){
- exportJson();
- }
- });
-
- exportButton.addEventListener("click", function(e){
- exportJson();
- });
-
- exportCloseButton.addEventListener("click", function(e){
- reset();
- exportOverlay.style.display = "none";
- });
-
- exportCloseButton.addEventListener("click", function(e){
- exportDirectPost();
- })
-
document.getElementById("highlightUncharted").addEventListener("click", function(e){
highlightUncharted = this.checked;
render(path);
@@ -221,13 +207,9 @@ function initDraw(){
var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
document.getElementById("exportDirectPost").href=directPostUrl;
- exportOverlay.style.display = "flex";
-
- textarea.focus();
- textarea.select();
+ exportModal.show();
}
-
function calculateCenter(path){
var area = 0,
@@ -275,16 +257,13 @@ function initDraw(){
}
function finish(){
- drawing = false;
- render(path);
- objectInfoBox.style.display = "block";
- hintText.style.display = "none";
- finishButton.style.display = "none";
- undoButton.style.display = "none";
- redoButton.style.display = "none";
- resetButton.style.display = "none";
- highlightUnchartedLabel.style.display = "none";
- document.getElementById("nameField").focus();
+ if(drawing) {
+ drawing = false;
+ render(path);
+ objectInfoBody.removeAttribute("style");
+ drawControlsBody.style.display = "none";
+ document.getElementById("nameField").focus();
+ }
}
function reset(){
@@ -295,13 +274,8 @@ function initDraw(){
redoButton.disabled = true;
drawing = true;
render(path);
- objectInfoBox.style.display = "none";
- hintText.style.display = "block";
- finishButton.style.display = "block";
- undoButton.style.display = "block";
- redoButton.style.display = "block";
- resetButton.style.display = "block";
- highlightUnchartedLabel.style.display = "block";
+ objectInfoBody.style.display = "none";
+ drawControlsBody.removeAttribute("style");
document.getElementById("nameField").value = "";
document.getElementById("descriptionField").value = "";
@@ -379,11 +353,13 @@ function initDraw(){
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
];
var coords_p = document.getElementById("coords_p");
- coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
-
+
+ // Displays coordinates as zero instead of NaN
+ if (isNaN(pos[0]) == true) {
+ coords_p.innerText = "0, 0";
+ } else {
+ coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
+ }
}
}
-
}
-
-
diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js
index 3ee3065c..5033556d 100644
--- a/web/_js/infoblock.js
+++ b/web/_js/infoblock.js
@@ -14,10 +14,22 @@
*/
function createInfoBlock(entry) {
- function createInfoParagraph(name, value){
- let entryParagraphPositionElement = document.createElement("p");
+ function createInfoItem(name, value){
+ let entryParagraphPositionElement = document.createElement("div");
let nameElement = document.createElement("span");
- nameElement.style.fontWeight = "bold";
+ nameElement.className = "fw-bold";
+ nameElement.innerText = name;
+ let valueElement = document.createElement("span");
+ valueElement.innerText = value;
+ entryParagraphPositionElement.appendChild(nameElement);
+ entryParagraphPositionElement.appendChild(valueElement);
+ return entryParagraphPositionElement;
+ }
+ function createInfoListItem(name, value){
+ let entryParagraphPositionElement = document.createElement("li");
+ entryParagraphPositionElement.className = "list-group-item";
+ let nameElement = document.createElement("span");
+ nameElement.className = "fw-bold";
nameElement.innerText = name;
let valueElement = document.createElement("span");
valueElement.innerText = value;
@@ -27,44 +39,62 @@ function createInfoBlock(entry) {
}
var element = document.createElement("div");
- element.className = "object";
+ element.className = "card mb-2 overflow-hidden shadow";
- let headerElement = document.createElement("h2");
+ let headerElement = document.createElement("h4");
+ headerElement.className = "card-header";
let linkElement = document.createElement("a");
+ linkElement.className = "text-decoration-none d-flex justify-content-between";
linkElement.href = "#" + entry.id;
- linkElement.innerText = entry.name;
+ let linkNameElement = document.createElement("span");
+ linkNameElement.className = "flex-grow-1 text-break";
+ linkNameElement.innerText = entry.name;
headerElement.appendChild(linkElement);
+ linkElement.appendChild(linkNameElement);
+ linkElement.insertAdjacentHTML("beforeend", '' + entry.description.replace(/\n/g, '
');
+ bodyElement.appendChild(descElement);
}
-
- let [x, y] = entry.center;
- element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
- if(entry.path){
- let area = calcPolygonArea(entry.path);
- element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
+ let linkListElement = document.createElement("div");
+ if (entry.description || entry.website || entry.subreddit) {
+ bodyElement.className = "card-body d-flex flex-column gap-3";
+
+ if (entry.website || entry.subreddit) {
+ linkListElement.className = "d-flex flex-column gap-2";
+ bodyElement.appendChild(linkListElement);
+ }
}
-
+
if (entry.website) {
+ let websiteGroupElement = document.createElement("div");
+ websiteGroupElement.className = "btn-group";
+ linkListElement.appendChild(websiteGroupElement);
+
let websiteLinkElement = document.createElement("a");
+ websiteLinkElement.className = "btn btn-primary"
websiteLinkElement.target = "_blank";
websiteLinkElement.href = entry.website;
websiteLinkElement.innerText = "Website";
- element.appendChild(websiteLinkElement);
+ websiteGroupElement.appendChild(websiteLinkElement);
}
+
+
if (entry.subreddit) {
+ let subredditGroupElement = document.createElement("div");
+ subredditGroupElement.className = "btn-group-vertical";
+ linkListElement.appendChild(subredditGroupElement);
+
var subreddits = entry.subreddit.split(",");
for (var i in subreddits) {
@@ -75,15 +105,52 @@ function createInfoBlock(entry) {
subreddit = "/r/" + subreddit;
}
let subredditLinkElement = document.createElement("a");
+ subredditLinkElement.className = "btn btn-primary text-truncate";
subredditLinkElement.target = "_blank";
+ subredditLinkElement.rel = "noopener noreferrer";
subredditLinkElement.href = "https://reddit.com" + subreddit;
subredditLinkElement.innerText = subreddit;
- element.appendChild(subredditLinkElement);
+ subredditGroupElement.appendChild(subredditLinkElement);
}
}
- let idElement = createInfoParagraph("ID: ", entry.id);
- idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
- element.appendChild(idElement);
+
+ let listElement = document.createElement("ul");
+ listElement.className = "list-group list-group-flush";
+ element.appendChild(listElement);
+
+ if (entry.diff) {
+ let diffElement = createInfoListItem("Diff: ", entry.diff);
+ if (entry.diff == "add") {
+ diffElement.className = "list-group-item list-group-item-success";
+ } else if (entry.diff == "edit") {
+ diffElement.className = "list-group-item list-group-item-warning";
+ } else if (entry.diff == "delete") {
+ diffElement.className = "list-group-item list-group-item-danger";
+ }
+ listElement.appendChild(diffElement);
+ }
+
+ let [x, y] = entry.center;
+ listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
+
+ if(entry.path){
+ let area = calcPolygonArea(entry.path);
+ listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`));
+ }
+
+ let idElement = createInfoItem("ID: ", entry.id);
+ let idElementContainer = document.createElement("div");
+ idElementContainer.className = "card-footer d-flex justify-content-between align-items-center";
+ idElementContainer.appendChild(idElement);
+ element.appendChild(idElementContainer);
+
+ let editElement = document.createElement("button");
+ editElement.type = "button";
+ editElement.innerText = "Edit";
+ editElement.className = "btn btn-sm btn-outline-primary";
+ editElement.href = "./?mode=draw&id=" + entry.id;
+ idElementContainer.appendChild(editElement);
+
return element;
}
\ No newline at end of file
diff --git a/web/_js/main.js b/web/_js/main.js
index 92acbcc7..8799eaea 100644
--- a/web/_js/main.js
+++ b/web/_js/main.js
@@ -37,13 +37,13 @@ var lastPosition = [0, 0];
var viewportSize = [0, 0];
-document.getElementById("entriesListDonate").addEventListener("click", function(e){
- document.getElementById("donateOverlay").style.display = "flex";
-});
+// document.getElementById("entriesListDonate").addEventListener("click", function(e){
+// document.getElementById("donateOverlay").style.display = "flex";
+// });
-document.getElementById("closeDonateButton").addEventListener("click", function(e){
- document.getElementById("donateOverlay").style.display = "none";
-});
+// document.getElementById("closeDonateButton").addEventListener("click", function(e){
+// document.getElementById("donateOverlay").style.display = "none";
+// });
function applyView(){
diff --git a/web/_js/time.js b/web/_js/time.js
index 76e23a42..db688a2e 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -125,8 +125,8 @@ async function updateTime(index) {
atlas = []
}
timeCallback(atlas)
- if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
- else tooltip.querySelector('p').textContent = configObject.timestamp
+ if (typeof configObject.timestamp === "number") tooltip.querySelector('div').textContent = new Date(configObject.timestamp*1000).toUTCString()
+ else tooltip.querySelector('div').textContent = configObject.timestamp
tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
}
diff --git a/web/_js/view.js b/web/_js/view.js
index 55477eaa..62368335 100644
--- a/web/_js/view.js
+++ b/web/_js/view.js
@@ -33,7 +33,6 @@ var closeObjectsListButton = document.getElementById("closeObjectsListButton");
var filterInput = document.getElementById("searchList");
var entriesList = document.getElementById("entriesList");
-var hideListButton = document.getElementById("hideListButton");
var entriesListShown = false;
var sortedAtlas;
@@ -42,6 +41,8 @@ var entriesLimit = 50;
var entriesOffset = 0;
var moreEntriesButton = document.createElement("button");
moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
+moreEntriesButton.type = "button"
+moreEntriesButton.className = "btn btn-primary d-block mb-2 mx-auto"
moreEntriesButton.id = "moreEntriesButton";
moreEntriesButton.onclick = function(){
buildObjectsList(null, null);
@@ -56,16 +57,6 @@ var lastPos = [0, 0];
var fixed = false; // Fix hovered items in place, so that clicking on links is possible
-if(document.documentElement.clientWidth > 2000){
- entriesListShown = true;
- wrapper.classList.remove('listHidden')
-}
-
-if(document.documentElement.clientWidth < 2000){
- entriesListShown = false;
- wrapper.classList.add('listHidden')
-}
-
filterInput.addEventListener("input", function(e){
entriesOffset = 0;
entriesList.innerHTML = "";
@@ -95,25 +86,43 @@ document.getElementById("sort").addEventListener("input", function(e){
});
-hideListButton.addEventListener("click", function(e){
- entriesListShown = !entriesListShown;
- if(entriesListShown){
- wrapper.classList.remove('listHidden')
- } else {
- wrapper.classList.add('listHidden')
- }
+var showDraw = document.getElementById('offcanvasDraw')
+showDraw.addEventListener('show.bs.offcanvas', function() {
+ wrapper.classList.remove('listHidden');
+ applyView();
+})
+
+var hideDraw = document.getElementById('offcanvasDraw')
+hideDraw.addEventListener('hide.bs.offcanvas', function() {
+ wrapper.classList.add('listHidden');
+ applyView();
+})
+
+var showList = document.getElementById('offcanvasList')
+showList.addEventListener('show.bs.offcanvas', function(e) {
+ entriesListShown = true;
+ wrapper.classList.remove('listHidden');
updateHovering(e);
applyView();
render();
updateLines();
- return false;
});
-closeObjectsListButton.addEventListener("click", function(e){
+var hideList = document.getElementById('offcanvasList')
+hideList.addEventListener('hide.bs.offcanvas', function(e) {
+ entriesListShown = false;
+ wrapper.classList.add('listHidden');
+ updateHovering(e);
+ applyView();
+ render();
+ updateLines();
+});
+
+closeObjectsListButton.addEventListener("click", function(){
hovered = [];
objectsContainer.innerHTML = "";
updateLines();
- closeObjectsListButton.className = "hidden";
+ closeObjectsListButton.className = "d-none";
fixed = false;
render();
});
@@ -140,7 +149,7 @@ objectsContainer.addEventListener("scroll", function(e){
updateLines();
});
-window.addEventListener("resize", function(){
+window.addEventListener("resize", function(e){
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
var viewportWidth = document.documentElement.clientWidth;
@@ -621,7 +630,13 @@ function updateHovering(e, tapped){
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
];
var coords_p = document.getElementById("coords_p");
- coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
+
+ // Displays coordinates as zero instead of NaN
+ if (isNaN(pos[0]) == true) {
+ coords_p.innerText = "0, 0";
+ } else {
+ coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
+ }
if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
var newHovered = [];
@@ -660,9 +675,9 @@ function updateHovering(e, tapped){
}
if(hovered.length > 0){
- closeObjectsListButton.className = "";
+ closeObjectsListButton.className = "btn btn-secondary shadow";
} else {
- closeObjectsListButton.className = "hidden";
+ closeObjectsListButton.className = "d-none";
}
@@ -689,6 +704,18 @@ function highlightEntryFromUrl(){
document.title = entry.name + " on the 2022 /r/place Atlas";
+ var objectEditNav = document.getElementById("objectEditNav");
+ if (objectEditNav) {
+ objectEditNav.href = "./?mode=draw&id=" + id;
+ objectEditNav.title = "Edit " + entry.name;
+ }
+ else {
+ document.getElementById("showListButton").insertAdjacentHTML("afterend", 'Edit ');
+ let objectEditNav = document.getElementById("objectEditNav");
+ objectEditNav.href = "./?mode=draw&id=" + id;
+ objectEditNav.title = "Edit " + entry.name;
+ }
+
var infoElement = createInfoBlock(entry);
objectsContainer.innerHTML = "";
objectsContainer.appendChild(infoElement);
@@ -716,7 +743,7 @@ function highlightEntryFromUrl(){
hovered = [entry];
render();
hovered[0].element = infoElement;
- closeObjectsListButton.className = "";
+ closeObjectsListButton.className = "btn btn-secondary shadow";
updateLines();
fixed = true;
}
diff --git a/web/about.html b/web/about.html
index 35ca116e..2ae73f76 100644
--- a/web/about.html
+++ b/web/about.html
@@ -24,80 +24,118 @@
-
-
- 
+