implement menu that keeps track of overlays, sets home

2022-08-15 23:45:50 -06:00 · 2022-08-15 23:45:50 -06:00 · 7ef255c556
commit 7ef255c556
parent d42b5fcd3d
13 changed files with 387 additions and 81 deletions
--- a/src/10-overlay.ts
+++ b/src/10-overlay.ts
@ -46,44 +46,104 @@ abstract class OverlayBase implements Overlay {
    this.options = options;
  }
  
-  add(map: L.Map): void {
-    this.self.addTo(map);
-  }
+  abstract add(map: L.Map): void;
  
-  remove(map: L.Map): void {
-    this.self.removeFrom(map);
+  abstract remove(map: L.Map): void;
+  
+  abstract menuItem: Node | null;
+  
+  static listAdd(self: OverlayBase, listName: string) {
+    const list = document.getElementById(listName);
+    if (list) {
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      if (li && a) {
+        a.innerText = self.name;
+        a.href = "#";
+        a.onclick = (e: any) => {
+          //show EditOverlayModal with this overlay's data
+        };
+        li.appendChild(a);
+        list.appendChild(li);
+        self.menuItem = li;
+      }
    }
  }
  
+  static listRemove(self: OverlayBase, listName: string) {
+    const list = document.getElementById(listName);
+    if (list && self.menuItem) {
+      list.removeChild(self.menuItem);
+    }
+  }
+}

 class Marker extends OverlayBase {
  
+  menuItem: Node | null = null;
+  
  constructor(name: string, desc: string, point: Point, options: any) {
    super(name, desc, [ point ], options);
    this.self = L.marker(point);
    this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
  }
+  
+  add(map: L.Map) {
+    this.self.addTo(map);
+    OverlayBase.listAdd(this, "markers-list");
+  }
+  
+  remove(map: L.Map) {
+    this.self.removeFrom(map);
+    OverlayBase.listRemove(this, "markers-list");
+  }
 }

 class Circle extends OverlayBase {

+  menuItem: Node | null = null;
+
  constructor(name: string, desc: string, point: Point, options: any) {
    super(name, desc, [ point ], options);
    this.self = L.circle(point, options);
    this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
  }
+  
+  add(map: L.Map) {
+    this.self.addTo(map);
+    OverlayBase.listAdd(this, "circles-list");
+  }
+  
+  remove(map: L.Map) {
+    this.self.removeFrom(map);
+    OverlayBase.listRemove(this, "circles-list");
+  }
 }

 class Polygon extends OverlayBase {

+  menuItem: Node | null = null;
+
  constructor(name: string, desc: string, points: Point[], options: any) {
    super(name, desc, points, options);    
    this.self = L.polygon(points, options);
    this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
  }
+
+  add(map: L.Map) {
+    this.self.addTo(map);
+    OverlayBase.listAdd(this, "polygons-list");
+  }
+  
+  remove(map: L.Map) {
+    this.self.removeFrom(map);
+    OverlayBase.listRemove(this, "polygons-list");
+  }
 }

 class Polyline extends OverlayBase {
+  menuItem: Node | null = null;
+
  constructor() {
    super("", "", [ ], {});
    this.self = L.polyline([]);
@ -102,6 +162,14 @@ class Polyline extends OverlayBase {
  numPoints(): number {
    return this.self.getLatLngs().length;
  }
+  
+  add(map: L.Map) {
+    this.self.addTo(map);
+  }
+  
+  remove(map: L.Map) {
+    this.self.removeFrom(map);
+  }
 }

 class OverlayState {
--- a/src/19-modal.ts
+++ b/src/19-modal.ts
@ -0,0 +1,5 @@
+interface Modal {
+  self(): HTMLElement | null;
+  visible(): boolean;
+  setVisible(v: boolean): void;
+}
--- a/src/20-createOverlayModal.ts
+++ b/src/20-createOverlayModal.ts
@ -1,4 +1,4 @@
-class CreateOverlayModal {
+class CreateOverlayModal implements Modal {

  constructor() {
    const _this = this;
@ -6,6 +6,12 @@ class CreateOverlayModal {
    if (closeBtn) {
      closeBtn.onclick = ()=>{_this.setVisible(false)};
    }
+    const s = this.self();
+    if (s) {
+      s.onsubmit = (e: any): void => {
+        e.preventDefault();
+      }
+    }
  }

  self(): HTMLElement | null {
@ -89,7 +95,7 @@ class CreateOverlayModal {
          submitBtn.onclick = () => {
            const name = TextUtils.encodeHTML(_this.nameField());
            const desc = TextUtils.encodeHTML(_this.descField());
-            if (name.trim().length < 1 || desc.trim().length < 1) {
+            if (name.trim().length < 1) {
              return;
            }
            const point = new Marker(name, desc, args.latlng, {title: name, alt: name});
@ -108,7 +114,7 @@ class CreateOverlayModal {
            const radius = _this.radiusField();
            const name = TextUtils.encodeHTML(_this.nameField());
            const desc = TextUtils.encodeHTML(_this.descField());
-            if (name.trim().length < 1 || desc.trim().length < 1) {
+            if (name.trim().length < 1) {
              return;
            }
            const circle = new Circle(name, desc, args.latlng, {radius: Number(radius) || 500});
@ -126,7 +132,7 @@ class CreateOverlayModal {
          submitBtn.onclick = () => {
            const name = TextUtils.encodeHTML(_this.nameField());
            const desc = TextUtils.encodeHTML(_this.descField());
-            if (name.trim().length < 1 || desc.trim().length < 1) {
+            if (name.trim().length < 1) {
              return;
            }
            const polygon = new Polygon(name, desc, args.points, {});
--- a/src/21-cancelModal.ts
+++ b/src/21-cancelModal.ts
@ -1,4 +1,4 @@
-class CancelModal {
+class CancelModal implements Modal {
  self(): HTMLElement | null {
    return document.getElementById("cancel-container");
  }
--- a/src/22-okCancelModal.ts
+++ b/src/22-okCancelModal.ts
@ -1,4 +1,4 @@
-class OKCancelModal {
+class OKCancelModal implements Modal {
  self(): HTMLElement | null {
    return document.getElementById("confirm-container");
  }
--- a/src/23-infoModal.ts
+++ b/src/23-infoModal.ts
@ -1,4 +1,4 @@
-class InfoModal {
+class InfoModal implements Modal {

  constructor() {
    const _this = this;
--- a/src/25-overlayManagerModal.ts
+++ b/src/25-overlayManagerModal.ts
@ -0,0 +1,20 @@
+class OverlayManagementModal implements Modal {
+  self(): HTMLElement | null {
+    return document.getElementById("overlays-menu-container");
+  }
+  
+  visible(): boolean {
+    return this.self()?.style.display !== "none";
+  }
+  
+  setVisible(v: boolean): void {
+    const modal = this.self();
+    if (modal) {
+      modal.style.display = v ? "grid" : "none";
+    }
+  }
+  
+  constructor() {
+    this.setVisible(false);
+  }
+}
--- a/src/29-modalCollection.ts
+++ b/src/29-modalCollection.ts
@ -3,22 +3,26 @@ class ModalCollection {
  cancel: CancelModal;
  okCancel: OKCancelModal;
  info: InfoModal;
+  overlayMgr: OverlayManagementModal;
  
  constructor(
    createOverlay: CreateOverlayModal,
    cancel: CancelModal,
    okCancel: OKCancelModal,
-    info: InfoModal
+    info: InfoModal,
+    overlayMgr: OverlayManagementModal
  ) {
    this.createOverlay = createOverlay;
    this.cancel = cancel;
    this.okCancel = okCancel;
    this.info = info;
+    this.overlayMgr = overlayMgr;
  }
  
  closeAll(): void {
    this.createOverlay.setVisible(false);
    this.cancel.setVisible(false);
    this.okCancel.setVisible(false);
+    this.overlayMgr.setVisible(false);
  }
 }
--- a/src/40-handlers.ts
+++ b/src/40-handlers.ts
@ -74,6 +74,7 @@ class MapHandler {
          menuBtn.classList.remove("activeBtn");
        }
      } catch {}
+      self.overlays.polyline.clearPoints();
    }
  }
  
@ -313,7 +314,26 @@ class MapHandler {
  static setHome(e: any): void {
    const self = MapHandler.instance;
    if (self) {
-      localStorage.setItem("home", JSON.stringify(self.map.getCenter()));
+      self.modals.closeAll();
+      const okCancel = self.modals.okCancel;
+      okCancel.setMsg("Set Home to current coordinates?");
+      const okBtn = okCancel.okBtn();
+      if (okBtn) {
+        okBtn.onclick = (e: any) => {
+          okCancel.setVisible(false);
+          localStorage.setItem("home", JSON.stringify(self.map.getCenter() as Point));
+          const info = self.modals.info;
+          info.setMsg("Home coordinates set");
+          info.setVisible(true);
+        }
+      }
+      const cancelBtn = okCancel.cancelBtn();
+      if (cancelBtn) {
+        cancelBtn.onclick = () => {
+          okCancel.setVisible(false);
+        }
+      }
+      okCancel.setVisible(true);
    }
  }
  
@ -329,4 +349,17 @@ class MapHandler {
      }
    }
  }
+  
+  static toggleMenu(e: any): void {
+    const self = MapHandler.instance;
+    if (self) {
+      const visible = self.modals.overlayMgr.visible();
+      self.modals.closeAll();
+      MapHandler.resetMapClick();
+      self.modals.overlayMgr.setVisible(!visible);
+      if (!visible) {
+        (e.target as HTMLElement).classList.add("activeBtn");
+      }
+    }
+  }
 }
--- a/src/99-onyx-scry.ts
+++ b/src/99-onyx-scry.ts
@ -33,7 +33,8 @@ function init(): void {
    new CreateOverlayModal(),
    new CancelModal(),
    new OKCancelModal(),
-    new InfoModal());
+    new InfoModal(),
+    new OverlayManagementModal());

  MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
  
@ -45,27 +46,13 @@ function init(): void {
  MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
  MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
  MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
-  MapHandler.setButtonClick("menu-btn", ()=>{});
+  MapHandler.setButtonClick("menu-btn", MapHandler.toggleMenu);
+  
+  MapHandler.setButtonClick("set-home-btn", MapHandler.setHome);
  
  MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
  
-  map.on("locationfound", ()=> {
-    const okCancel = modals.okCancel;
-    okCancel.setMsg("Set Home to current location?");
-    const okBtn = okCancel.okBtn();
-    if (okBtn) {
-      okBtn.onclick = (e: any) => {
-        okCancel.setVisible(false);
-        MapHandler.setHome(null);
-      }
-    }
-    const cancelBtn = okCancel.cancelBtn();
-    if (cancelBtn) {
-      cancelBtn.onclick = () => {
-        okCancel.setVisible(false);
-      }
-    }
-  });
+  map.on("locationfound", MapHandler.setHome);
  
  map.on("locationerror", ()=> {
    const info = modals.info;
@ -80,6 +67,8 @@ function init(): void {
  } else {
    map.locate({setView: true, maxZoom: 13});
  }
+  
+  modals.closeAll();
 }

 init();
--- a/static/index.html
+++ b/static/index.html
@ -40,7 +40,7 @@
    <label for="createOverlay-name">Name</label><br/>
    <input type="text" id="createOverlay-name" required ><br/>
    <label for="createOverlay-desc">Description</label><br/>
-    <textarea id="createOverlay-desc" required></textarea><br/>
+    <textarea id="createOverlay-desc"></textarea><br/>
    <div id="radius-container">
      <label for="createOverlay-radius">Radius (meters)</label><br/>
      <input type="number" step="1" id="createOverlay-radius" value="500" required><br/>
@ -75,22 +75,24 @@
  <h2></h2>
  <textarea id="import-export-textarea"></textarea>
  <div class="multiBtn-container">
-    <button id="import-export-ok-btn">OK</button>
-    <button id="import-export-cancel-btn">Cancel</button>
+    <button class="positive-btn" id="import-export-ok-btn">OK</button>
+    <button class="negative-btn" id="import-export-cancel-btn">Cancel</button>
  </div>
 </div>

 <div id="overlays-menu-container">
-  <button class="closeBtn" id="overlys-closeBtn">x</button>
+  <div id="overlays-list">
    <details id="markers-wrapper"><summary>Markers</summary><ul id="markers-list"></ul></details>
    <details id="circles-wrapper"><summary>Circles</summary><ul id="circles-list"></ul></details>
    <details id="polygons-wrapper"><summary>Polygons</summary><ul id="polygons-list"></ul></details>
+  </div>
  <div class="multiBtn-container">
+    <button id="set-home-btn">Set Home</button>
    <button id="import-btn">Import</button>
    <button id="export-all-btn">Export All</button>
  </div>
 </div>
-<!--</div>-->
+
 </body>
 <link rel='stylesheet' type="text/css" href="./leaflet.css">
 <script src="./leaflet.js"></script>
--- a/static/onyx-scry.js
+++ b/static/onyx-scry.js
@ -27,37 +27,82 @@ class OverlayBase {
        this.points = points;
        this.options = options;
    }
-    add(map) {
-        this.self.addTo(map);
+    static listAdd(self, listName) {
+        const list = document.getElementById(listName);
+        if (list) {
+            const li = document.createElement("li");
+            const a = document.createElement("a");
+            if (li && a) {
+                a.innerText = self.name;
+                a.href = "#";
+                a.onclick = (e) => {
+                    //show EditOverlayModal with this overlay's data
+                };
+                li.appendChild(a);
+                list.appendChild(li);
+                self.menuItem = li;
+            }
+        }
+    }
+    static listRemove(self, listName) {
+        const list = document.getElementById(listName);
+        if (list && self.menuItem) {
+            list.removeChild(self.menuItem);
        }
-    remove(map) {
-        this.self.removeFrom(map);
    }
 }
 class Marker extends OverlayBase {
    constructor(name, desc, point, options) {
        super(name, desc, [point], options);
+        this.menuItem = null;
        this.self = L.marker(point);
        this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
    }
+    add(map) {
+        this.self.addTo(map);
+        OverlayBase.listAdd(this, "markers-list");
+    }
+    remove(map) {
+        this.self.removeFrom(map);
+        OverlayBase.listRemove(this, "markers-list");
+    }
 }
 class Circle extends OverlayBase {
    constructor(name, desc, point, options) {
        super(name, desc, [point], options);
+        this.menuItem = null;
        this.self = L.circle(point, options);
        this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
    }
+    add(map) {
+        this.self.addTo(map);
+        OverlayBase.listAdd(this, "circles-list");
+    }
+    remove(map) {
+        this.self.removeFrom(map);
+        OverlayBase.listRemove(this, "circles-list");
+    }
 }
 class Polygon extends OverlayBase {
    constructor(name, desc, points, options) {
        super(name, desc, points, options);
+        this.menuItem = null;
        this.self = L.polygon(points, options);
        this.self.bindPopup(`<h3>${name}</h3><p>${desc}</p>`);
    }
+    add(map) {
+        this.self.addTo(map);
+        OverlayBase.listAdd(this, "polygons-list");
+    }
+    remove(map) {
+        this.self.removeFrom(map);
+        OverlayBase.listRemove(this, "polygons-list");
+    }
 }
 class Polyline extends OverlayBase {
    constructor() {
        super("", "", [], {});
+        this.menuItem = null;
        this.self = L.polyline([]);
    }
    insertPoint(pt) {
@ -71,6 +116,12 @@ class Polyline extends OverlayBase {
    numPoints() {
        return this.self.getLatLngs().length;
    }
+    add(map) {
+        this.self.addTo(map);
+    }
+    remove(map) {
+        this.self.removeFrom(map);
+    }
 }
 class OverlayState {
    constructor() {
@ -182,6 +233,12 @@ class CreateOverlayModal {
        if (closeBtn) {
            closeBtn.onclick = () => { _this.setVisible(false); };
        }
+        const s = this.self();
+        if (s) {
+            s.onsubmit = (e) => {
+                e.preventDefault();
+            };
+        }
    }
    self() {
        return document.getElementById("createOverlay-container");
@ -252,7 +309,7 @@ class CreateOverlayModal {
                    submitBtn.onclick = () => {
                        const name = TextUtils.encodeHTML(_this.nameField());
                        const desc = TextUtils.encodeHTML(_this.descField());
-                        if (name.trim().length < 1 || desc.trim().length < 1) {
+                        if (name.trim().length < 1) {
                            return;
                        }
                        const point = new Marker(name, desc, args.latlng, { title: name, alt: name });
@ -271,7 +328,7 @@ class CreateOverlayModal {
                        const radius = _this.radiusField();
                        const name = TextUtils.encodeHTML(_this.nameField());
                        const desc = TextUtils.encodeHTML(_this.descField());
-                        if (name.trim().length < 1 || desc.trim().length < 1) {
+                        if (name.trim().length < 1) {
                            return;
                        }
                        const circle = new Circle(name, desc, args.latlng, { radius: Number(radius) || 500 });
@ -289,7 +346,7 @@ class CreateOverlayModal {
                    submitBtn.onclick = () => {
                        const name = TextUtils.encodeHTML(_this.nameField());
                        const desc = TextUtils.encodeHTML(_this.descField());
-                        if (name.trim().length < 1 || desc.trim().length < 1) {
+                        if (name.trim().length < 1) {
                            return;
                        }
                        const polygon = new Polygon(name, desc, args.points, {});
@ -390,17 +447,37 @@ class InfoModal {
        }
    }
 }
+class OverlayManagementModal {
+    self() {
+        return document.getElementById("overlays-menu-container");
+    }
+    visible() {
+        var _a;
+        return ((_a = this.self()) === null || _a === void 0 ? void 0 : _a.style.display) !== "none";
+    }
+    setVisible(v) {
+        const modal = this.self();
+        if (modal) {
+            modal.style.display = v ? "grid" : "none";
+        }
+    }
+    constructor() {
+        this.setVisible(false);
+    }
+}
 class ModalCollection {
-    constructor(createOverlay, cancel, okCancel, info) {
+    constructor(createOverlay, cancel, okCancel, info, overlayMgr) {
        this.createOverlay = createOverlay;
        this.cancel = cancel;
        this.okCancel = okCancel;
        this.info = info;
+        this.overlayMgr = overlayMgr;
    }
    closeAll() {
        this.createOverlay.setVisible(false);
        this.cancel.setVisible(false);
        this.okCancel.setVisible(false);
+        this.overlayMgr.setVisible(false);
    }
 }
 class MapHandler {
@ -476,6 +553,7 @@ class MapHandler {
                }
            }
            catch (_g) { }
+            self.overlays.polyline.clearPoints();
        }
    }
    static addMarker(e) {
@ -695,7 +773,26 @@ class MapHandler {
    static setHome(e) {
        const self = MapHandler.instance;
        if (self) {
+            self.modals.closeAll();
+            const okCancel = self.modals.okCancel;
+            okCancel.setMsg("Set Home to current coordinates?");
+            const okBtn = okCancel.okBtn();
+            if (okBtn) {
+                okBtn.onclick = (e) => {
+                    okCancel.setVisible(false);
                    localStorage.setItem("home", JSON.stringify(self.map.getCenter()));
+                    const info = self.modals.info;
+                    info.setMsg("Home coordinates set");
+                    info.setVisible(true);
+                };
+            }
+            const cancelBtn = okCancel.cancelBtn();
+            if (cancelBtn) {
+                cancelBtn.onclick = () => {
+                    okCancel.setVisible(false);
+                };
+            }
+            okCancel.setVisible(true);
        }
    }
    static goHome(e) {
@ -710,6 +807,18 @@ class MapHandler {
            }
        }
    }
+    static toggleMenu(e) {
+        const self = MapHandler.instance;
+        if (self) {
+            const visible = self.modals.overlayMgr.visible();
+            self.modals.closeAll();
+            MapHandler.resetMapClick();
+            self.modals.overlayMgr.setVisible(!visible);
+            if (!visible) {
+                e.target.classList.add("activeBtn");
+            }
+        }
+    }
 }
 MapHandler.instance = null;
 function init() {
@ -730,7 +839,7 @@ function init() {
    overlays.circles.forEach(m => m.add(map));
    overlays.polygons.forEach(m => m.add(map));
    overlays.polyline.add(map);
-    const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal());
+    const modals = new ModalCollection(new CreateOverlayModal(), new CancelModal(), new OKCancelModal(), new InfoModal(), new OverlayManagementModal());
    MapHandler.init(map, overlays, TileLayerWrapper.layers, modals);
    MapHandler.setButtonClick("home-btn", MapHandler.goHome);
    MapHandler.setButtonClick("addPoint-btn", MapHandler.markerCollect);
@ -739,25 +848,10 @@ function init() {
    MapHandler.setButtonClick("save-btn", MapHandler.overlaySave);
    MapHandler.setButtonClick("clear-btn", MapHandler.overlayClear);
    MapHandler.setButtonClick("restore-btn", MapHandler.overlayReset);
-    MapHandler.setButtonClick("menu-btn", () => { });
+    MapHandler.setButtonClick("menu-btn", MapHandler.toggleMenu);
+    MapHandler.setButtonClick("set-home-btn", MapHandler.setHome);
    MapHandler.setButtonClick("tiles-btn", MapHandler.swapTiles);
-    map.on("locationfound", () => {
-        const okCancel = modals.okCancel;
-        okCancel.setMsg("Set Home to current location?");
-        const okBtn = okCancel.okBtn();
-        if (okBtn) {
-            okBtn.onclick = (e) => {
-                okCancel.setVisible(false);
-                MapHandler.setHome(null);
-            };
-        }
-        const cancelBtn = okCancel.cancelBtn();
-        if (cancelBtn) {
-            cancelBtn.onclick = () => {
-                okCancel.setVisible(false);
-            };
-        }
-    });
+    map.on("locationfound", MapHandler.setHome);
    map.on("locationerror", () => {
        const info = modals.info;
        info.setMsg("Could not get location data");
@ -771,5 +865,6 @@ function init() {
    else {
        map.locate({ setView: true, maxZoom: 13 });
    }
+    modals.closeAll();
 }
 init();
--- a/static/style.css
+++ b/static/style.css
@ -57,14 +57,21 @@ body {
  font-size: 5vh;
  padding-left: 0.5ch;
  padding-right: 0.5ch;
+  border: solid 1px black;
  border-bottom: solid 0.1em black;
 }

-#mapControls button.activeBtn, #mapControls button:hover {
+#mapControls .activeBtn,
+#mapControls button:hover {
  color: white;
  border-bottom: solid 0.1em #1f9b92;
 }

+#mapControls button:focus {
+  border: dotted 1px #1f9b92;
+  border-bottom: solid 0.1em #1f9b92;
+}
+
 #subControls {
  backgorund: transparent;
  float: right;
@ -154,7 +161,7 @@ body {
  text-align: right;
 }

-button.closeBtn {
+.closeBtn {
  float: right;
  background: transparent;
  font-size: 200%;
@ -165,11 +172,17 @@ button.closeBtn {
  padding-right: 1em;
 }

-button.closeBtn:hover {
+.closeBtn:hover,
+.closeBtn:focus {
  color: crimson;
 }

-button#createOverlay-submitBtn, button.positive-btn, button.negative-btn {
+#createOverlay-submitBtn,
+.positive-btn,
+.negative-btn,
+#set-home-btn,
+#import-btn,
+#export-all-btn {
  font-size: 150%;
  background: transparent;
  color: white;
@ -180,32 +193,41 @@ button#createOverlay-submitBtn, button.positive-btn, button.negative-btn {
  text-transform: uppercase;
 }

-button#createOverlay-submitBtn:hover {
+#createOverlay-submitBtn:hover,
+#createOverlay-submitBtn:focus,
+#set-home-btn:hover,
+#set-home-btn:focus,
+#import-btn:hover,
+#import-btn:focus,
+#export-all-btn:hover,
+#export-all-btn:focus {
  background: white;
  color: black;
  border: solid 2px white;
 }

-button.positive-btn, button.negative-btn {
+.positive-btn, .negative-btn {
  font-size: 66.66%;
  margin-top: 1em;
 }

-button.positive-btn {
+.positive-btn {
  border: solid 2px #1f9b92;
  float: left;
 }

-button.positive-btn:hover {
+.positive-btn:hover,
+.positive-btn:focus {
  color: black;
  background: #1f9b92;
 }

-button.negative-btn {
+.negative-btn {
  float: right;
 }

-button.negative-btn:hover {
+.negative-btn:hover,
+.negative-btn:focus {
  color: black;
  background: crimson;
  border: solid 2px crimson;
@ -231,7 +253,7 @@ button.negative-btn:hover {
  line-height: 200%;
 }

-#info-container button.closeBtn {
+#info-container .closeBtn {
  font-size: 150%;
  padding: 0;
  margin-left: 1ch;
@ -252,9 +274,71 @@ button.negative-btn:hover {

 #overlays-menu-container {
  position: fixed;
-  height: calc(100vh - 2.5em);
+  height: 100vh;
  right: 0;
+  top: 0;
  width: 100%;
  max-width: 800px;
  background: black;
+  color: white;
+  z-index:2;
+  display: none;
+  padding: 1em;
+  font-size: 150%;
+  box-sizing: border-box;
+  grid-template-rows: 1fr auto;
+}
+
+#overlays-menu-container .multiBtn-container {
+  text-align: center;
+  grid-row: 2;
+  margin-bottom: 3em;
+}
+
+#overlays-list {
+  font-size: 200%;
+  grid-row: 1;
+  max-height: 100%;
+  overflow: auto;
+
+}
+
+#overlays-list details summary {
+  outline-style: none;
+  border-bottom: solid 1px black;
+}
+
+#overlays-list details summary:hover {
+  color: #1f9b92;
+}
+
+#overlays-list details summary:focus {
+  border-bottom: dotted 1px #1f9b92;
+}
+
+#overlays-list ul {
+  list-style: none;
+  margin: 0.5em;
+}
+
+#overlays-list a {
+  color: white;
+  text-decoration: none;
+  outline-style: none;
+  border-bottom: solid 1px black;
+}
+
+#overlays-list a:hover {
+  color: #1f9b92;
+}
+
+#overlays-list a:focus {
+  border-bottom: dotted 1px #1f9b92;
+}
+#overlays-list details {
+  margin: 1em;
+}
+
+#import-export-container {
+  display: none;
 }