Get edit modal working correctly

This commit is contained in:
Robbie Antenesse 2019-05-03 23:20:22 -06:00
parent c5e3544570
commit a9de9e0fc9
4 changed files with 54 additions and 29 deletions

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

@ -10,3 +10,4 @@ $white: #ffffff;
$red: #d42932;
$border: 1px solid $dark;
$general-padding: 20px;