From a9de9e0fc944c4c61f4b016d9d43d716b0166026 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 3 May 2019 23:20:22 -0600
Subject: [PATCH] Get edit modal working correctly

---
 src/styles/_containers.scss |  6 +++---
 src/styles/_elements.scss   | 38 +++++++++++++------------------------
 src/styles/_structure.scss  | 36 +++++++++++++++++++++++++++++++++++
 src/styles/_variables.scss  |  3 ++-
 4 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/styles/_containers.scss b/src/styles/_containers.scss
index 42efc30..56175d9 100644
--- a/src/styles/_containers.scss
+++ b/src/styles/_containers.scss
@@ -1,6 +1,6 @@
 header {
   display: block;
-  padding: 5px 20px;
+  padding: 5px $general-padding;
   border-bottom: 1px solid $mid;
   margin: 0 0 5px;
 
@@ -37,14 +37,14 @@ main {
     border: $border;
 
     dl {
-      padding: 0 20px;
+      padding: 0 $general-padding;
     }
   }
 }
 
 footer {
   display: block;
-  padding: 20px;
+  padding: $general-padding;
   border-top: 1px solid $mid;
   margin: 5px 0 0;
 }
\ No newline at end of file
diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss
index 76869c3..980532a 100644
--- a/src/styles/_elements.scss
+++ b/src/styles/_elements.scss
@@ -13,7 +13,7 @@ label {
   font-weight: bold;
 
   &:not(:last-child) {
-    margin-bottom: 20px;
+    margin-bottom: $general-padding;
   }
 
   small {
@@ -87,10 +87,17 @@ span .tag {
 
   .modal-content {
     position: absolute;
-    top: 10%;
-    left: 20%;
-    bottom: 10%;
-    right: 20%;
+    // top: 10%;
+    // left: 20%;
+    // bottom: 10%;
+    // right: 20%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 700px;
+    max-width: 100%;
+    height: 600px;
+    max-height: 100%;
     background-color: $white;
     border: $border;
     border-radius: 5px;
@@ -102,25 +109,6 @@ span .tag {
       font-size: 200%;
       cursor: pointer;
     }
-
-    nav ul {
-      margin-bottom: 0;
-    }
-
-    section {
-      padding: 20px;
-      margin-bottom: 80px;
-      overflow-y: auto;
-      height: 78%;
-    }
-
-    section~footer {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-color: $white;
-    }
   }
 }
 
@@ -132,7 +120,7 @@ span .tag {
     display: inline-block;
     list-style: none;
     margin: 0 2px -1px;
-    padding: 10px 20px;
+    padding: 10px $general-padding;
     border-top: $border;
     border-left: $border;
     border-right: $border;
diff --git a/src/styles/_structure.scss b/src/styles/_structure.scss
index ac8d811..9f7b918 100644
--- a/src/styles/_structure.scss
+++ b/src/styles/_structure.scss
@@ -19,6 +19,10 @@
       left: 0;
       right: 0;
       bottom: 0;
+      transform: unset;
+      max-width: unset;
+      height: unset;
+      max-height: unset;
       margin: 0 auto;
       width: 90%;
       padding: 20px;
@@ -132,6 +136,38 @@
 }
 
 #editModal {
+  $nav-font-height: 16px;
+  nav {
+    padding-top: $general-padding;
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        font-size: $nav-font-height;
+        line-height: $nav-font-height;
+      }
+    }
+  }
+  section, footer {
+    position: absolute;
+    width: 100%;
+  }
+  section {
+    top: ($general-padding * 2) + $nav-font-height + 10px;;
+    bottom: ($general-padding * 2) + $nav-font-height + 16px;
+    padding: $general-padding;
+    overflow-y: auto;
+  }
+  footer {
+    bottom: 0;
+
+    .button {
+      font-size: $nav-font-height;
+      line-height: $nav-font-height;
+    }
+  }
   #editDescription {
     width: 100%;
     height: 350px;
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 846679a..4b94804 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -9,4 +9,5 @@ $white: #ffffff;
 
 $red: #d42932;
 
-$border: 1px solid $dark;
\ No newline at end of file
+$border: 1px solid $dark;
+$general-padding: 20px;
\ No newline at end of file