Fixed some bugs on safari

simonefranza · Sep 21, 2022 · 959effd · 959effd
1 parent f7a73eb
commit 959effd
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 14 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -153,9 +153,9 @@ body, #app {
   padding: 0;
   margin: 0;
   display: grid;
-  grid-template-areas: "toolbar" "map" "interactions";
-  grid-template-rows: 200px 1fr 150px;
-  grid-template-columns: 1fr;
+  grid-template-areas: "toolbar toolbar" "map interactions";
+  grid-template-rows: 200px 1fr;
+  grid-template-columns: 3fr 1fr;
 }
 .toolbar-container {
   grid-area: toolbar;
@@ -175,7 +175,7 @@ body, #app {
 }
 .comap-container {
   grid-area: map;
-  outline: 1px solid #eee;
+  border: 1px solid #eee;
   border-radius:1rem;
   margin: 1rem;
 }
@@ -202,14 +202,14 @@ body, #app {
   padding-block: 0.5rem;
   padding-inline: 1.2rem;
   max-width: 300px;
-  outline: 1px solid palevioletred;
+  border: 1px solid palevioletred;
 }
 .map-node.old{
   background-image: linear-gradient(133deg, darkviolet, #5f0b83);
 }
 .map-node.clicked {
   background-image: linear-gradient(73deg, darkviolet, #5f0b83);
-  outline: 1px solid darkviolet;
+  border: 1px solid darkviolet;
 }
 .node-title.clicked {
   font-weight: bold;

diff --git a/src/components/InteractiveComap.vue b/src/components/InteractiveComap.vue
@@ -135,4 +135,10 @@ onBeforeUnmount(() => {
   height: 100%;
   position: relative;
 }
+.map-container {
+  z-index: 100;
+}
+.map { 
+  z-index: 1000;
+}
 </style>
diff --git a/src/components/MapNode.vue b/src/components/MapNode.vue
@@ -153,6 +153,7 @@ onMounted(() => {
   left: 0;
   padding: 2px;
   user-select: none;
+  -webkit-user-select: none;
   overflow: visible;
   cursor: pointer;
 }

diff --git a/src/components/ToolbarComponent.vue b/src/components/ToolbarComponent.vue
@@ -200,7 +200,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  outline: 1px solid white;
+  border: 1px solid white;
   padding: 0.5rem;
   border-radius: 1rem;
 }
@@ -232,7 +232,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  outline: 1px solid white;
+  border: 1px solid white;
   padding: 0.5rem;
   border-radius: 1rem;
   justify-content: flex-start;
@@ -252,7 +252,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   text-align: left;
-  outline: 1px solid white;
+  border: 1px solid white;
   padding: 0.5rem;
   border-radius: 1rem;
 }
@@ -286,7 +286,7 @@ input[type="file"] {
   margin: 0em;
 
   &:focus, &:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
+    border: 4px auto -webkit-focus-ring-color;
   }
   &:hover {
     border-color: #646cff;
@@ -300,7 +300,7 @@ input[type="file"] {
   transform: translate(-50%, -50%);
   background: #ddd;
   padding: 1rem;
-  outline: black;
+  border: black;
   border-radius: 1rem;
   min-height: 100px;
   display: flex;

diff --git a/src/lib/defaultStyles.ts b/src/lib/defaultStyles.ts
@@ -10,15 +10,18 @@ export const defaultStyle = `
   background-image: linear-gradient(133deg, salmon, #5f0b83);
   padding-block: 0.5rem;
   padding-inline: 1.2rem;
-  max-width: 300px;
-  outline: 1px solid palevioletred;
+  max-width: 500px;
+  border: 1px solid palevioletred;
+  cursor: pointer;
+  z-index: 2000;
+  pointer-events: all;
 }
 .map-node.old{
   background-image: linear-gradient(133deg, darkviolet, #5f0b83);
 }
 .map-node.clicked {
   background-image: linear-gradient(73deg, darkviolet, #5f0b83);
-  outline: 1px solid darkviolet;
+  border: 1px solid darkviolet;
 }
 .node-title.clicked {
   font-weight: bold;