Merge pull request #59 from agileseason/58-add-transparent-layout-for…

…-issue-modal

Add transparent overlay for issue modal position right

src/components/board/column.vue

@@ -232,14 +232,14 @@ export default {
   position: fixed
   top: 0
   width: 100vw
-  z-index: 1
+  z-index: 3 // z-index: 2 on board/issue
 
 .select-settings
   overflow: hidden
   position: absolute
   right: 0
   top: 32px
-  z-index: 2
+  z-index: 4
 
   .item
     cursor: pointer

src/components/board/issue.vue

@@ -199,6 +199,8 @@ export default {
   border: 1px solid #E8EAF6
   overflow: hidden
   padding: 8px
+  position: relative
+  z-index: 2
 
   &:not(.read-only)
     cursor: pointer

src/components/dialog.vue

@@ -35,7 +35,7 @@ export default {
   position: absolute
   text-align: left
   width: 100%
-  z-index: 3 // z-index: 2 on the issue progress - https://github.com/agileseason/agileseason/issues/19
+  z-index: 4
 
   .title
     color: #fff
@@ -56,5 +56,5 @@ export default {
   position: fixed
   top: 0
   width: 100vw
-  z-index: 1
+  z-index: 3 // z-index: 2 on board/issue
 </style>

src/components/modal.vue

@@ -21,7 +21,15 @@ export default {
   position: fixed
   top: 0
   width: 100vw
-  z-index: 4
+  z-index: 3
+
+.modal-overlay-blank
+  height: 100vh
+  left: 0
+  position: fixed
+  top: 0
+  width: 100vw
+  z-index: 1 // z-index: 2 on board/issue
 
 .modal
   background-color: #fff
@@ -33,7 +41,7 @@ export default {
   position: absolute
   top: 36px
   width: 80%
-  z-index: 5
+  z-index: 4
 
   transform: translate(-50%, 2000px)
 

src/views/board.vue

@@ -34,6 +34,10 @@
     v-if='isLoaded && isModalRight'
     v-show='isModalOpen'
   >
+    <div
+      class='modal-overlay-blank'
+      @click.self='backToBoard'
+    />
     <router-view v-slot='{ Component }'>
       <transition name='slide' :duration='200'>
         <component :is='Component' />