Merge pull request #4 from GSA/UpdateDetailsModal

added title to details modal and made scrollable

Author: DanielJDufour

dist/json-schema.js

@@ -83,7 +83,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
     }, {
       key: "getDetails",
       value: function getDetails() {
-        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      ");
+        return "\n        <div id=\"mobile-details-overlay\"></div>\n        <div id=\"mobile-details\">\n          <div id=\"mobile-details-title\">".concat(this.selectedMobileDetailsTitle, "</div>\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      ");
       }
     }, {
       key: "getDescription",
@@ -136,6 +136,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         const row = document.getElementById(rowID);
         this.setAttribute("details", "true");
         this.selectedDataType = row.querySelector(".data-type").textContent.trim();
+        this.selectedMobileDetailsTitle = row.querySelector('.field-name-text').textContent.trim();
         this.selectedDescription = this.prettify(row.querySelector(".description").textContent.trim());
         this.selectedBackgroundColor = window.getComputedStyle(row).backgroundColor;
         this.updateDetails();
@@ -223,7 +224,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         const arrowSize = '8px';
         const borderColor = 'lightgray';
         const id = this.id;
-        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>");
+        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: scroll;\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, " #mobile-details-title {\n            margin-bottom: 15px;\n            overflow: hidden;\n            text-align: center;\n            text-overflow: ellipsis;\n            font-weight: bold;\n            font-size: 1.75em;\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>");
       }
     }, {
       key: "hasDropDown",

src/index.js

@@ -65,6 +65,7 @@
       return `
         <div id="mobile-details-overlay"></div>
         <div id="mobile-details">
+          <div id="mobile-details-title">${this.selectedMobileDetailsTitle}</div>
           <table>
             <thead>
               <tr>
@@ -133,6 +134,7 @@
       const row = document.getElementById(rowID);
       this.setAttribute("details", "true");
       this.selectedDataType = row.querySelector(".data-type").textContent.trim();
+      this.selectedMobileDetailsTitle = row.querySelector('.field-name-text').textContent.trim();
       this.selectedDescription = this.prettify(row.querySelector(".description").textContent.trim());
       this.selectedBackgroundColor = window.getComputedStyle(row).backgroundColor;
       this.updateDetails();
@@ -392,7 +394,7 @@
             background: white;
             bottom: 0;
             left: 0;
-            overflow: hidden;
+            overflow: scroll;
             opacity: 0;
             padding: 15px;
             position: fixed;
@@ -402,6 +404,15 @@
             z-index: -10;
           }
 
+          #${id} #mobile-details-title {
+            font-weight: bold;
+            font-size: 1.75em;
+            margin-bottom: 15px;
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+          }
+
           #${id}:not([details=true]) #mobile-details {
             display: none;
             opacity: 0;