feat: Avoid the download button obscuring the json

https://github.com/wll8/redoc-try/issues
wll8 · Apr 14, 2022 · ebb8bfb · ebb8bfb
1 parent 7b146f4
commit ebb8bfb
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+.history
diff --git a/dist/try.js b/dist/try.js
@@ -117,7 +117,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
   function initCss() {
     // reset swagger-ui css
-    $('head').append("\n    <style>\n      /* Set the position of swaggerBox with body as the relative element */\n      body {\n        position: relative;\n      }\n      @media print, screen and (max-width: 85rem) {\n        .eIeJha,\n        .dtUibw {\n          padding: 4px;\n        }\n      }\n\n      .swaggerBox.hide {\n        visibility: hidden;\n        cursor: none;\n        width: 0;\n        height: 0;\n      }\n      .swaggerBox.show {\n        visibility: visible;\n        cursor: initial;\n      }\n\n      /* Reset the style of swagger-ui */\n      .swaggerBox .swagger-ui .wrapper {\n        padding: 0;\n      }\n\n      /* Disable api bar to avoid problems */\n      .swaggerBox:not(.onlySwagger) .swagger-ui .opblock .opblock-summary {\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n\n      /* Disable the api bar, but exclude the authorization button */\n      .swaggerBox .swagger-ui .authorization__btn {\n        cursor: initial;\n        pointer-events: initial;\n      }\n\n      .swaggerBox {\n        border-radius: 4px;\n        background-color: #fff;\n        width: 100%;\n        height: 100vh;\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 1;\n      }\n      .swaggerBox:not(.onlySwagger) {\n        overflow: hidden;\n      }\n      /* Hide some disturbing elements */\n      .swaggerBox.pure:not(.onlySwagger) .swagger-ui .opblock-summary {\n        visibility: hidden;\n        padding: 0;\n      }\n      .swaggerBox.pure:not(.onlySwagger) .opblock-section thead,\n      .swaggerBox.pure:not(.onlySwagger) .swagger-ui .opblock-summary * {\n        display: none;\n      }\n\n      .swaggerBox:not(.onlySwagger) .swagger-ui .opblock .opblock-section-header,\n      .swaggerBox:not(.onlySwagger) .btn.cancel,\n      .swaggerBox:not(.onlySwagger) .try-out,\n      .swaggerBox:not(.onlySwagger) .responses-inner>div>h4,\n      .swaggerBox:not(.onlySwagger) :not(.live-responses-table).responses-table,\n      .swaggerBox:not(.onlySwagger) .opblock-body > .opblock-description-wrapper {\n        display: none;\n      }\n\n      .swaggerBox .tryBtn {\n        margin-right: 10px;\n        background-color: #fff;\n      }\n    </style>\n  ");
+    $('head').append("\n    <style>\n      /* Set the position of swaggerBox with body as the relative element */\n      body {\n        position: relative;\n      }\n      @media print, screen and (max-width: 85rem) {\n        .eIeJha,\n        .dtUibw {\n          padding: 4px;\n        }\n      }\n\n      .swaggerBox.hide {\n        visibility: hidden;\n        cursor: none;\n        width: 0;\n        height: 0;\n      }\n      .swaggerBox.show {\n        visibility: visible;\n        cursor: initial;\n      }\n\n      /* Reset the style of swagger-ui */\n      .swaggerBox .swagger-ui .wrapper {\n        padding: 0;\n      }\n      .swaggerBox .swagger-ui .download-contents {\n        top: -10px;\n        right: 0;\n        width: initial;\n      }\n\n      /* Disable api bar to avoid problems */\n      .swaggerBox:not(.onlySwagger) .swagger-ui .opblock .opblock-summary {\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n\n      /* Disable the api bar, but exclude the authorization button */\n      .swaggerBox .swagger-ui .authorization__btn {\n        cursor: initial;\n        pointer-events: initial;\n      }\n\n      .swaggerBox {\n        border-radius: 4px;\n        background-color: #fff;\n        width: 100%;\n        height: 100vh;\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 1;\n      }\n      .swaggerBox:not(.onlySwagger) {\n        overflow: hidden;\n      }\n      /* Hide some disturbing elements */\n      .swaggerBox.pure:not(.onlySwagger) .swagger-ui .opblock-summary {\n        visibility: hidden;\n        padding: 0;\n      }\n      .swaggerBox.pure:not(.onlySwagger) .opblock-section thead,\n      .swaggerBox.pure:not(.onlySwagger) .swagger-ui .opblock-summary * {\n        display: none;\n      }\n\n      .swaggerBox:not(.onlySwagger) .swagger-ui .opblock .opblock-section-header,\n      .swaggerBox:not(.onlySwagger) .btn.cancel,\n      .swaggerBox:not(.onlySwagger) .try-out,\n      .swaggerBox:not(.onlySwagger) .responses-inner>div>h4,\n      .swaggerBox:not(.onlySwagger) :not(.live-responses-table).responses-table,\n      .swaggerBox:not(.onlySwagger) .opblock-body > .opblock-description-wrapper {\n        display: none;\n      }\n\n      .swaggerBox .tryBtn {\n        margin-right: 10px;\n        background-color: #fff;\n      }\n    </style>\n  ");
   }
 
   function initSwagger(swaggerOptions) {

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 <body>
   <div id="redoc-container"></div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js"> </script>
-  <script src="https://cdn.jsdelivr.net/gh/wll8/[email protected].0/dist/try.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/wll8/[email protected].1/dist/try.js"></script>
   <script>
     // initTry(`https://petstore.swagger.io/v2/swagger.json`)
     initTry({

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redoc-try",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "[👉 online preview](https://wll8.github.io/redoc-try/index.html)",
   "main": "try.js",
   "scripts": {

diff --git a/readme.md b/readme.md
@@ -13,7 +13,7 @@ Add `Try it out` function like [swagger](https://petstore.swagger.io/) on [redoc
 <body>
   <div id="redoc-container"></div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/redoc.standalone.min.js"> </script>
-  <script src="https://cdn.jsdelivr.net/gh/wll8/[email protected].0/dist/try.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/wll8/[email protected].1/dist/try.js"></script>
   <script>
     // initTry(`https://petstore.swagger.io/v2/swagger.json`)
     initTry({

diff --git a/try.js b/try.js
@@ -102,6 +102,11 @@ function initCss() {
       .swaggerBox .swagger-ui .wrapper {
         padding: 0;
       }
+      .swaggerBox .swagger-ui .download-contents {
+        top: -10px;
+        right: 0;
+        width: initial;
+      }
 
       /* Disable api bar to avoid problems */
       .swaggerBox:not(.onlySwagger) .swagger-ui .opblock .opblock-summary {