minor changes to examples

mrin9 · mrin9 · commit ca5c08cd4a53 · 2019-01-18T15:17:46.000-08:00
diff --git a/README.md b/README.md
@@ -14,3 +14,9 @@ Custom Eelement for Open-API spec viewing
 
 ## Documentation
 [CHeck out the usage and examples](https://mrin9.github.io/RapiDoc/)
+
+
+## Roadmap
+- Allow replacing logo
+- Provide a console to try out the APIs
+- Enable OAuth, HTTP and Token based Authentication process
diff --git a/docs/example1.html b/docs/example1.html
@@ -3,6 +3,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
     <script type="text/javascript" src="rapidoc-min.js"></script>
+    <style>
+      rapi-doc{
+        width:100%;
+      }
+    </style>
   </head>
   <body>
     <rapi-doc spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"> </rapi-doc>
diff --git a/docs/example2.html b/docs/example2.html
@@ -3,6 +3,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
     <script type="text/javascript" src="rapidoc-min.js"></script>
+    <style>
+      rapi-doc{
+        width:100%;
+      }
+    </style>
   </head>
   <body>
     <rapi-doc spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" theme="dark"> </rapi-doc>
diff --git a/docs/example3.html b/docs/example3.html
@@ -2,11 +2,17 @@
   <head>
     <script type="text/javascript" src="rapidoc-min.js"></script>
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <style>
+      rapi-doc{
+        width:100%;
+      }
+    </style>
   </head>
   <body>
     <rapi-doc 
       spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
       header-color="#2d87e2" 
+      primary-color="#2d87e2" 
       theme="dark"
     > </rapi-doc>
   </body>
diff --git a/docs/example4.html b/docs/example4.html
@@ -2,6 +2,11 @@
   <head>
     <script type="text/javascript" src="rapidoc-min.js"></script>
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <style>
+      rapi-doc{
+        width:100%;
+      }
+    </style>
   </head>
   <body>
 
diff --git a/docs/example5.html b/docs/example5.html
@@ -16,6 +16,9 @@
         cursor:pointer;
         outline:none;
       }
+      rapi-doc{
+        width:100%;
+      }
     </style>
     <script type="text/javascript" src="rapidoc-min.js"></script>
     <script>
@@ -24,11 +27,14 @@
       }  
       function changeAttr(attr){
         let arr=[];
+        let rand = Math.floor(Math.random() * 10);
+
         if (attr==="heading-text"){
           arr = ['SPIDER-MAN', "IRON-MAN", "BLACK-PANTHER", "RapiDoc", "SUPER-MAN", "BAT-MAN", "JOKER", "WONDER-WOMAN", "SUPER-GIRL", "CAT-WOMAN", "LARA-CROFT"];
         }
         else if (attr==="header-color"){
           arr = ['#2d87e2', "#ff6961", "#34A853", "#FBBC05", "#66757F", "#FFFFFF", "#3B5998", "#8B9DC3", "#7CBB00", "#7B0099", " #FF9900"];
+          getRapiDoc().setAttribute('primary-color', arr[rand] );
         }
         else if(attr==="spec-url"){
           arr = [
@@ -48,7 +54,7 @@
         else{
           return;
         }
-        getRapiDoc().setAttribute(attr, arr[Math.floor(Math.random() * 10)] );
+        getRapiDoc().setAttribute(attr, arr[rand] );
       }
     
       function changeLayout(){

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,9 @@`
`16`	`16`	`cursor:pointer;`
`17`	`17`	`outline:none;`
`18`	`18`	`}`
	`19`	`+ rapi-doc{`
	`20`	`+ width:100%;`
	`21`	`+ }`
`19`	`22`	`</style>`
`20`	`23`	`<script type="text/javascript" src="rapidoc-min.js"></script>`
`21`	`24`	`<script>`
`@@ -24,11 +27,14 @@`
`24`	`27`	`}`
`25`	`28`	`function changeAttr(attr){`
`26`	`29`	`let arr=[];`
	`30`	`+ let rand = Math.floor(Math.random() * 10);`
	`31`	`+`
`27`	`32`	`if (attr==="heading-text"){`
`28`	`33`	`arr = ['SPIDER-MAN', "IRON-MAN", "BLACK-PANTHER", "RapiDoc", "SUPER-MAN", "BAT-MAN", "JOKER", "WONDER-WOMAN", "SUPER-GIRL", "CAT-WOMAN", "LARA-CROFT"];`
`29`	`34`	`}`
`30`	`35`	`else if (attr==="header-color"){`
`31`	`36`	`arr = ['#2d87e2', "#ff6961", "#34A853", "#FBBC05", "#66757F", "#FFFFFF", "#3B5998", "#8B9DC3", "#7CBB00", "#7B0099", " #FF9900"];`
	`37`	`+ getRapiDoc().setAttribute('primary-color', arr[rand] );`
`32`	`38`	`}`
`33`	`39`	`else if(attr==="spec-url"){`
`34`	`40`	`arr = [`
`@@ -48,7 +54,7 @@`
`48`	`54`	`else{`
`49`	`55`	`return;`
`50`	`56`	`}`
`51`		`- getRapiDoc().setAttribute(attr, arr[Math.floor(Math.random() * 10)] );`
	`57`	`+ getRapiDoc().setAttribute(attr, arr[rand] );`
`52`	`58`	`}`
`53`	`59`
`54`	`60`	`function changeLayout(){`