Show context menu to add, modify and delete markers

1 files changed, 52 insertions, 16 deletions

diff --git a/public/main.css b/public/main.css
index 3edf5cf..c57ae2f 100644
--- a/public/main.css
+++ b/public/main.css
@@ -38,9 +38,13 @@ body {
   margin-bottom: 2rem;
 }
 
+.g-Layout__Line > *:not(:last-child) {
+  margin-right: 2rem;
+}
+
 /* Modal */
 
-.g-Modal {
+#g-Modal {
   z-index: 1000;
   position: absolute;
   top: 0;
@@ -74,14 +78,46 @@ body {
   top: 2rem;
   right: 2rem;
   cursor: pointer;
+  border: none;
+  background-color: transparent;
+  font-size: 200%;
 }
 
-/* Form */
+/* Context menu */
+
+:root {
+  --context-menu-border-radius: 2px;
+}
+
+#g-ContextMenu {
+  z-index: 1000;
+  position: absolute;
+  background-color: white;
+  border-radius: var(--context-menu-border-radius);
+  border: 1px solid #333333;
+}
+
+.g-ContextMenu__Entry:first-child {
+  border-top-left-radius: var(--context-menu-border-radius);
+  border-top-right-radius: var(--context-menu-border-radius);
+}
 
-.g-Form__Section {
-  margin: 0 0 2rem;
+.g-ContextMenu__Entry:last-child {
+  border-bottom-left-radius: var(--context-menu-border-radius);
+  border-bottom-right-radius: var(--context-menu-border-radius);
 }
 
+.g-ContextMenu__Entry {
+  padding: 0.5rem 1rem;
+}
+
+.g-ContextMenu__Entry:hover {
+  background-color: #DDDDDD;
+  cursor: pointer;
+}
+
+/* Form */
+
 .g-Form__Field {
   margin-bottom: 1rem;
 }
@@ -144,8 +180,8 @@ body {
   cursor: pointer;
 }
 
-.g-Button__Danger {
-  background-color: brown;
+.g-Button__Cancel {
+  background-color: gray;
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 0.2rem;
@@ -167,16 +203,11 @@ body {
 #g-Map__Content {
   width: 100%;
   height: 100%;
-  cursor: pointer;
+  cursor: default;
 }
 
 /* Marker icon */
 
-.marker-box {
-  background-color: transparent;
-  border-color: transparent;
-}
-
 :root {
   --marker-box-size: 12px;
   --marker-width: 25px;
@@ -186,7 +217,11 @@ body {
   --marker-icon-size: 14px;
 }
 
-.marker-round {
+.g-Marker {
+  cursor: move;
+}
+
+.g-Marker__Round {
   position: absolute;
   bottom: calc(var(--marker-box-size) / 2 + var(--marker-peak-height) - var(--marker-width) * 15 / 40);
   left: calc((var(--marker-width) - var(--marker-box-size)) / -2);
@@ -195,9 +230,10 @@ body {
   height: var(--marker-width);
   border-radius: 50%;
   border: var(--marker-border-width) solid var(--marker-border-color);
+  cursor: move;
 }
 
-.marker-icon {
+.g-Marker__Icon {
   position: absolute;
   bottom: calc(var(--marker-box-size) / 2 + var(--marker-peak-height) - var(--marker-width) * 15 / 40);
   left: calc((var(--marker-width) - var(--marker-box-size)) / -2);
@@ -210,7 +246,7 @@ body {
   height: var(--marker-width);
 }
 
-.marker-peak-inner {
+.g-Marker__PeakInner {
   position: absolute;
   bottom: calc(var(--marker-box-size) / 2 + var(--marker-border-width));
   left: calc((var(--marker-width) - var(--marker-box-size)) / -2 + var(--marker-border-width));
@@ -224,7 +260,7 @@ body {
   border-top-style: solid;
 }
 
-.marker-peak-border {
+.g-Marker__PeakBorder {
   position: absolute;
   bottom: calc(var(--marker-box-size) / 2);
   left: calc((var(--marker-width) - var(--marker-box-size)) / -2);