Skip to content
This repository was archived by the owner on Apr 27, 2020. It is now read-only.

Commit 04f5ef8

Browse files
DanielJDufourDanielJDufour
committed
updated modal
1 parent 86d1ea3 commit 04f5ef8

File tree

2 files changed

+14
-9
lines changed

2 files changed

+14
-9
lines changed

‎dist/json-schema.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
8383
}, {
8484
key: "getDetails",
8585
value: function getDetails() {
86-
return "\n <div id=\"mobile-details\">\n <table>\n <thead>\n <tr>\n <th id='mobile-data-type-column'>Data Type</th>\n <th class='mobile-description-column'>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr style=\"background-color: ".concat(this.selectedBackgroundColor, "\">\n <td class=\"mobile-data-type\">").concat(this.selectedDataType, "</td>\n <td class=\"mobile-description\">").concat(this.selectedDescription, "</td>\n </tr>\n <tr>\n <td class=\"back\" onclick=\"document.getElementById('").concat(this.id, "').hideDetails()\">\n <div id=\"back-arrow\" class=\"arrow-left\"></div>\n <div class=\"field-name-text\">back</div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n ");
86+
return "\n <div id=\"mobile-details-overlay\"></div>\n <div id=\"mobile-details\">\n <table>\n <thead>\n <tr>\n <th id='mobile-data-type-column'>Data Type</th>\n <th class='mobile-description-column'>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr style=\"background-color: ".concat(this.selectedBackgroundColor, "\">\n <td class=\"mobile-data-type\">").concat(this.selectedDataType, "</td>\n <td class=\"mobile-description\">").concat(this.selectedDescription, "</td>\n </tr>\n <tr>\n <td class=\"back\" onclick=\"document.getElementById('").concat(this.id, "').hideDetails()\">\n <div id=\"back-arrow\" class=\"arrow-left\"></div>\n <div class=\"field-name-text\">back</div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n ");
8787
}
8888
}, {
8989
key: "getDescription",
@@ -223,7 +223,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
223223
const arrowSize = '8px';
224224
const borderColor = 'lightgray';
225225
const id = this.id;
226-
return "\n <style>\n json-schema[hide-optional-fields='true'] tr.optional {\n display: none;\n }\n\n #".concat(id, " > div {\n background: white;\n padding: 15px;\n position: relative;\n }\n\n #").concat(id, " .desktop-and-mobile-views {\n position: relative;\n }\n\n #").concat(id, " input {\n height: 20px;\n width: 20px;\n vertical-align: sub;\n }\n\n #").concat(id, " [class*=arrow-] {\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n #").concat(id, " .arrow-up {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-down {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-left {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-right {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-left: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " th {\n background: #323A45;\n border-bottom: 1px solid ").concat(borderColor, ";\n border-left: 1px solid ").concat(borderColor, ";\n border-right: 1px solid ").concat(borderColor, ";\n box-sizing: border-box;\n color: white;\n padding: .75rem 2rem;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " th {\n font-size: 1.1em;\n padding: .75rem .2rem;\n }\n }\n\n #").concat(id, " table {\n border-collapse: collapse;\n border-spacing:0;\n width: 100%;\n }\n\n #").concat(id, " td {\n border-bottom: 1px solid ").concat(borderColor, ";\n border-left: 1px solid ").concat(borderColor, ";\n border-right: 1px solid ").concat(borderColor, ";\n box-sizing: border-box;\n padding: 10px;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " td {\n padding: 5px;\n }\n }\n\n #").concat(id, " td div, #").concat(id, " td span {\n }\n\n #").concat(id, " .field-name-column {\n width: 35%;\n }\n\n #").concat(id, " .data-type-column {\n width: 15%;\n }\n\n #").concat(id, " .dropdown {\n display: inline-block;\n padding-left: .25rem;\n width: 30px;\n }\n\n #").concat(id, " .dropdown[status=expanded] > div {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid black;\n }\n\n #").concat(id, " .dropdown[status=collapsed] > div {\n border-bottom: ").concat(arrowSize, " solid black;\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n }\n\n #").concat(id, " .data-type, #").concat(id, " .mobile-data-type {\n text-align: center;\n }\n\n #").concat(id, " .field-name-text {\n display: inline-block;\n }\n\n #").concat(id, " tr.first {\n background: #F0F5FB;\n }\n\n #").concat(id, " tr.optional td {\n color: rgb(153, 0, 51);\n }\n\n #").concat(id, " .details {\n display: none;\n }\n\n #").concat(id, " #mobile-details {\n display: none;\n }\n\n /* mobile view */\n @media screen and (max-width: 600px) {\n #").concat(id, " th.data-type-column,\n #").concat(id, " th.description-column,\n #").concat(id, " td.data-type,\n #").concat(id, " td.description\n {\n display: none;\n }\n\n #").concat(id, " .details {\n color: black;\n cursor: pointer;\n display: inline-block;\n float: right;\n }\n\n #").concat(id, " .details-text {\n display: inline-block;\n margin-right: 5px;\n }\n\n #").concat(id, " .details-arrow, #").concat(id, " #back-arrow {\n display: inline-block;\n vertical-align: top;\n }\n\n #").concat(id, " #back-arrow {\n margin-right: 5px;\n }\n\n #").concat(id, " #mobile-details {\n background: white;\n bottom: 0;\n display: block;\n height: 100%;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n transition: .25s ease;\n width: 0;\n }\n\n #").concat(id, ":not([details=true]) #mobile-details {\n width: 0;\n }\n\n #").concat(id, "[details=true] #mobile-details {\n width: 100%;\n }\n\n #").concat(id, " .dropdown {\n padding-left: .15rem;\n width: 20px;\n }\n }\n\n #").concat(id, " td.back {\n border: none;\n cursor: pointer;\n padding-bottom: 15px;\n padding-top: 15px;\n text-align: center;\n }\n\n #").concat(id, " td.back > div {\n display: inline-block;\n }\n\n #").concat(id, " td.back:hover {\n background: #323A45;\n color: white;\n }\n\n #").concat(id, " td.back:hover .arrow-left {\n border-right-color: white;\n }\n\n #mobile-data-type-column {\n min-width: 75px;\n }\n </style>");
226+
return "\n <style>\n json-schema[hide-optional-fields='true'] tr.optional {\n display: none;\n }\n\n #".concat(id, " > div {\n background: white;\n padding: 15px;\n position: relative;\n }\n\n #").concat(id, " .desktop-and-mobile-views {\n position: relative;\n }\n\n #").concat(id, " input {\n height: 20px;\n width: 20px;\n vertical-align: sub;\n }\n\n #").concat(id, " [class*=arrow-] {\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n #").concat(id, " .arrow-up {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-down {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-left {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-right {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-left: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " th {\n background: #323A45;\n border-bottom: 1px solid ").concat(borderColor, ";\n border-left: 1px solid ").concat(borderColor, ";\n border-right: 1px solid ").concat(borderColor, ";\n box-sizing: border-box;\n color: white;\n padding: .75rem 2rem;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " th {\n font-size: 1.1em;\n padding: .75rem .2rem;\n }\n }\n\n #").concat(id, " table {\n border-collapse: collapse;\n border-spacing:0;\n width: 100%;\n }\n\n #").concat(id, " td {\n border-bottom: 1px solid ").concat(borderColor, ";\n border-left: 1px solid ").concat(borderColor, ";\n border-right: 1px solid ").concat(borderColor, ";\n box-sizing: border-box;\n padding: 10px;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " td {\n padding: 5px;\n }\n }\n\n #").concat(id, " td div, #").concat(id, " td span {\n }\n\n #").concat(id, " .field-name-column {\n width: 35%;\n }\n\n #").concat(id, " .data-type-column {\n width: 15%;\n }\n\n #").concat(id, " .dropdown {\n display: inline-block;\n padding-left: .25rem;\n width: 30px;\n }\n\n #").concat(id, " .dropdown[status=expanded] > div {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid black;\n }\n\n #").concat(id, " .dropdown[status=collapsed] > div {\n border-bottom: ").concat(arrowSize, " solid black;\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n }\n\n #").concat(id, " .data-type, #").concat(id, " .mobile-data-type {\n text-align: center;\n }\n\n #").concat(id, " .field-name-text {\n display: inline-block;\n }\n\n #").concat(id, " tr.first {\n background: #F0F5FB;\n }\n\n #").concat(id, " tr.optional td {\n color: rgb(153, 0, 51);\n }\n\n #").concat(id, " .details {\n display: none;\n }\n\n #").concat(id, " #mobile-details {\n display: none;\n }\n\n /* mobile view */\n @media screen and (max-width: 600px) {\n #").concat(id, " th.data-type-column,\n #").concat(id, " th.description-column,\n #").concat(id, " td.data-type,\n #").concat(id, " td.description\n {\n display: none;\n }\n\n #").concat(id, " .details {\n color: black;\n cursor: pointer;\n display: inline-block;\n float: right;\n }\n\n #").concat(id, " .details-text {\n display: inline-block;\n margin-right: 5px;\n }\n\n #").concat(id, " .details-arrow, #").concat(id, " #back-arrow {\n display: inline-block;\n vertical-align: top;\n }\n\n #").concat(id, " #back-arrow {\n margin-right: 5px;\n }\n\n #").concat(id, " #mobile-details {\n background: white;\n bottom: 0;\n left: 0;\n overflow: hidden;\n opacity: 0;\n padding: 15px;\n position: fixed;\n transition: 2s;\n right: 0;\n top: 0;\n z-index: -10;\n }\n\n #").concat(id, ":not([details=true]) #mobile-details {\n display: none;\n opacity: 0;\n }\n\n #").concat(id, "[details=true] #mobile-details {\n display: block;\n opacity: 1;\n z-index: 11;\n }\n\n #").concat(id, " .dropdown {\n padding-left: .15rem;\n width: 20px;\n }\n }\n\n #").concat(id, " td.back {\n border: none;\n cursor: pointer;\n padding-bottom: 15px;\n padding-top: 15px;\n text-align: center;\n }\n\n #").concat(id, " td.back > div {\n display: inline-block;\n }\n\n #").concat(id, " td.back:hover {\n background: #323A45;\n color: white;\n }\n\n #").concat(id, " td.back:hover .arrow-left {\n border-right-color: white;\n }\n\n #mobile-data-type-column {\n min-width: 75px;\n }\n </style>");
227227
}
228228
}, {
229229
key: "hasDropDown",

‎src/index.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363

6464
getDetails() {
6565
return `
66+
<div id="mobile-details-overlay"></div>
6667
<div id="mobile-details">
6768
<table>
6869
<thead>
@@ -390,22 +391,26 @@
390391
#${id} #mobile-details {
391392
background: white;
392393
bottom: 0;
393-
display: block;
394-
height: 100%;
395394
left: 0;
396395
overflow: hidden;
397-
position: absolute;
396+
opacity: 0;
397+
padding: 15px;
398+
position: fixed;
399+
transition: 2s;
398400
right: 0;
399-
transition: .25s ease;
400-
width: 0;
401+
top: 0;
402+
z-index: -10;
401403
}
402404
403405
#${id}:not([details=true]) #mobile-details {
404-
width: 0;
406+
display: none;
407+
opacity: 0;
405408
}
406409
407410
#${id}[details=true] #mobile-details {
408-
width: 100%;
411+
display: block;
412+
opacity: 1;
413+
z-index: 11;
409414
}
410415
411416
#${id} .dropdown {

0 commit comments

Comments
 (0)