specify width of dropdown arrows in px

DanielJDufour · DanielJDufour · commit 1a787b3b21cd · 2018-12-03T04:17:53.000Z
diff --git a/dist/json-schema.js b/dist/json-schema.js
@@ -136,7 +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.selectedDescription = row.querySelector(".description").textContent.trim();
+        this.selectedDescription = this.prettify(row.querySelector(".description").textContent.trim());
         this.selectedBackgroundColor = window.getComputedStyle(row).backgroundColor;
         this.updateDetails();
       }
@@ -223,7 +223,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: 2rem;\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: 1rem;\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            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>");
       }
     }, {
       key: "hasDropDown",
diff --git a/src/index.js b/src/index.js
@@ -132,7 +132,7 @@
       const row = document.getElementById(rowID);
       this.setAttribute("details", "true");
       this.selectedDataType = row.querySelector(".data-type").textContent.trim();
-      this.selectedDescription = row.querySelector(".description").textContent.trim();
+      this.selectedDescription = this.prettify(row.querySelector(".description").textContent.trim());
       this.selectedBackgroundColor = window.getComputedStyle(row).backgroundColor;
       this.updateDetails();
     }
@@ -317,7 +317,7 @@
         #${id} .dropdown {
           display: inline-block;
           padding-left: .25rem;
-          width: 2rem;
+          width: 30px;
         }
 
         #${id} .dropdown[status=expanded] > div {
@@ -410,7 +410,7 @@
 
           #${id} .dropdown {
             padding-left: .15rem;
-            width: 1rem;
+            width: 20px;
           }
         }
 
@@ -514,4 +514,4 @@
   }
 
   customElements.define('json-schema', JSONSchema);
-})();
+})();

Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@`
`132`	`132`	`const row = document.getElementById(rowID);`
`133`	`133`	`this.setAttribute("details", "true");`
`134`	`134`	`this.selectedDataType = row.querySelector(".data-type").textContent.trim();`
`135`		`- this.selectedDescription = row.querySelector(".description").textContent.trim();`
	`135`	`+ this.selectedDescription = this.prettify(row.querySelector(".description").textContent.trim());`
`136`	`136`	`this.selectedBackgroundColor = window.getComputedStyle(row).backgroundColor;`
`137`	`137`	`this.updateDetails();`
`138`	`138`	`}`
`@@ -317,7 +317,7 @@`
`317`	`317`	`#${id} .dropdown {`
`318`	`318`	`display: inline-block;`
`319`	`319`	`padding-left: .25rem;`
`320`		`- width: 2rem;`
	`320`	`+ width: 30px;`
`321`	`321`	`}`
`322`	`322`
`323`	`323`	`#${id} .dropdown[status=expanded] > div {`
`@@ -410,7 +410,7 @@`
`410`	`410`
`411`	`411`	`#${id} .dropdown {`
`412`	`412`	`padding-left: .15rem;`
`413`		`- width: 1rem;`
	`413`	`+ width: 20px;`
`414`	`414`	`}`
`415`	`415`	`}`
`416`	`416`
`@@ -514,4 +514,4 @@`
`514`	`514`	`}`
`515`	`515`
`516`	`516`	`customElements.define('json-schema', JSONSchema);`
`517`		`-})();`
	`517`	`+})();`