Fix nottom Dialog (#90)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/ui/src/components/Dialog.svelte

@@ -43,12 +43,13 @@
 
 <style lang="scss">
   .dialog {
+    flex-grow: 1;
+
     display: flex;
     flex-direction: column;
-    width: 45rem;
-    height: 100%;
+    margin: 0 1rem;
     background-color: var(--theme-bg-color);
-    border-radius: 1.875rem;
+    border-radius: 0 0 1rem 1rem;
     box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
 
     .header {
@@ -75,7 +76,7 @@
     .content {
       flex-shrink: 0;
       flex-grow: 1;
-      // margin: 0 2.5rem;
+      padding: 0 2.5rem;
       height: fit-content;
     }
 

packages/ui/src/components/Popup.svelte

@@ -17,7 +17,6 @@
   import Component from './Component.svelte'
 
   let modalHTML: HTMLElement
-  let arrowHTML: HTMLElement
   let modalOHTML: HTMLElement
 
   function close () {
@@ -34,30 +33,21 @@
     if (modalHTML) {
       if ($modal.element) {
         const rect = $modal.element.getBoundingClientRect()
-        let style: string = 'popup-'
         if (rect.top > document.body.clientHeight - rect.bottom) {
-          // style += 'top-'
           modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
-          // arrowHTML.style.top = rect.top - convertRemToPx(.75) + 'px'
-          // arrowHTML.style.left = rect.left + rect.width / 2 + 'px'
-          // arrowHTML.classList.add('popup-top')
         } else {
-          // style += 'bottom-'
           modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
-          // arrowHTML.style.top = '0px'
         }
         if (rect.left > document.body.clientWidth - rect.right) {
-          // style += 'left'
           modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
         } else {
-          // style += 'right'
           modalHTML.style.left = rect.left + 'px'
         }
-        // modalHTML.classList.add(style)
       } else {
-        modalHTML.style.top = '16px'
-        modalHTML.style.bottom = '16px'
-        modalHTML.style.right = '16px'
+        modalHTML.style.top = '4rem'
+        modalHTML.style.bottom = '4rem'
+        modalHTML.style.right = '4rem'
+        modalHTML.style.height = 'calc(100vh - 8rem)'
         // modalHTML.style.transform = 'translateY(-50%)'
       }
     }

plugins/recruit-resources/src/components/EditCandidate.svelte

@@ -77,18 +77,12 @@
 
 </script>
 
-<Dialog label={recruit.string.CreateCandidate} 
-        okLabel={recruit.string.CreateCandidate} 
-        okAction={save}
-        on:close={() => { dispatch('close') }}>
+<div class="flex-col h-full">
   <DialogHeader {space} {object} {newValue} {resumeId} {resumeName} {resumeUuid} {resumeSize} {resumeType}/>
-  <div class="tabs-container">
+  <Dialog label={recruit.string.CreateCandidate} 
+          okLabel={recruit.string.CreateCandidate} 
+          okAction={save}
+          on:close={() => { dispatch('close') }}>
     <Tabs model={tabModel}/>
-  </div>
-</Dialog>
-
-<style lang="scss">
-  .tabs-container {
-    margin: 0 2.5rem;
-  }
-</style>
+  </Dialog>
+</div>