updated auth example to display with try and no-try

Author: mrin9

docs/examples/auth.html

@@ -6,16 +6,13 @@
     <script src="./load-rapidoc-and-other-common-scripts.js"></script>
   </head>
   <style>
-    table {
-      padding: 8px;
+    td {
+      padding: 2px 6px;
     }
     th {
-      height: 36px;
       background-color: rgba(0, 0, 0, 0.2);
-      text-align: left
-    }
-    tr {
-      height: 28px;
+      text-align: left;
+      padding: 10px 6px;
     }
 
   </style>
@@ -27,7 +24,19 @@
       allow-server-selection = "true"
       allow-authentication = "true" 
       render-style="read" 
+      allow-try="false"
     >
+
+      <div slot="nav-logo">
+        <div slot="nav-logo" style="width:100%; display: flex; flex-direction:column;">
+          <div class="blue" style="text-align: center; padding: 20px 0 12px 0;"> Allow TRY </div>
+          <div style="display: flex;justify-content: center; margin: 2px 0">
+            <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-try', 'true')" >True</button>
+            <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('allow-try', 'false')" >False</button>
+          </div>
+        </div>
+      </div>
+
       <div slot='operations-top'>
         <div style="font-size:14px; border:0; border-radius:4px; padding:16px; margin:16px 75px">
           <h3>Programmatically Applying Security and Setting a API Server</h3>
@@ -39,9 +48,7 @@ <h3>Programmatically Applying Security and Setting a API Server</h3>
             RapiDoc provides you with two helper methods which you can use to supply security keys programatically. You can use one of these method based on the security scheme type
           </div>
           <table class="table" style="border:1px solid #444;width:100%">
-            <tr> <th style="width:180px; height: 36px;
-              background-color: rgba(0, 0, 0, 0.2);
-              text-align: left;">SCHEME-TYPE</th><th>METHOD USED TO UPDATE</th></tr>
+            <tr> <th style="width:180px;">SCHEME-TYPE</th><th>METHOD USED TO UPDATE</th></tr>
             <tr> <td>basic</td><td class="mono">setHttpUserNameAndPassword('http-basic', 'newUserName', 'newPassword')</td></tr>
             <tr> <td>other than basic</td><td class="mono" rowspan="3">setApiKey('api_key1', 'newApiToken')</td></tr>
           </table>
@@ -92,7 +99,8 @@ <h3>Programmatically Applying Security and Setting a API Server</h3>
               </td>
             </tr>
             <tr>
-              <td colspan="2"><button class='size btn' style="width:200px; margin:auto" onclick='clearSecurityKeys(event)'>Clear all Keys</button></td>
+              <td colspan="2" style="text-align: right;">
+                <button class='size btn' style="display:inline; background-color:IndianRed" onclick='clearSecurityKeys(event)'>Clear All Keys</button></td>
             </tr>  
           </table>
           <div style="margin:32px 0 16px 0; color:#777; font-weight:bold">

docs/index.css

@@ -60,7 +60,7 @@ h1,h2,h3 {
   margin-left:12px;
 }
 .hide-in-mobile { display:none; }
-.topbar{
+.topbar {
   padding: 6px 24px;
 }
 
@@ -111,7 +111,7 @@ h1,h2,h3 {
   }
 }
 
-.section-text{
+.section-text {
   background: url('./images/bg-shape1.svg') right top no-repeat;;
 }
 /*Shrinking for mobile*/
@@ -128,7 +128,7 @@ h1,h2,h3 {
   }
 }
 
-.banner-content{
+.banner-content {
   font-weight: 300;
 }
 .banner-title {
@@ -142,7 +142,7 @@ h1,h2,h3 {
   justify-content: center;
 }
 
-.logo{display:none}
+.logo { display:none }
 .code-block{
   font-size:12px;
   width:320px;
@@ -167,36 +167,36 @@ h1,h2,h3 {
   line-height: 40px;
   color: #fff;
 }
-.row{
+.row {
   display:flex;
   flex-direction: row;
   width:100%;
   justify-content: space-evenly;
 }
-.col{
+.col {
   display:flex;
   flex-direction: column;
   align-items: center;
   flex:1;
 }
-.footer{
+.footer {
   display:flex;
   flex-direction: row;
   background-color: #444;
   color:#ccc;
 }
 
-.footer-item{
+.footer-item {
   padding: 5px 16px;
 }
-.footer-item a{
+.footer-item a {
   color:#ccc;
 }
 
-.feature-list{
+.feature-list {
   text-align: left;
 }
-.container{
+.container {
   padding: 40px 64px;
 }
 
@@ -209,29 +209,29 @@ h1,h2,h3 {
   min-height:150px;
 }
 
-.feature{
+.feature {
   display:flex;
   flex:1;
   max-width:320px;
   min-width:320px;
   margin:0 8px 24px 8px;
 }
 
-.feature-icon{
+.feature-icon {
   min-width:64px;
   min-height:64px;
 }
 
-.feature-info{
+.feature-info {
   display:flex;
   flex-direction: column;
   margin-left:12px;
   text-align:left;
   font-size:16px;
 }
 
-.feature-info .feature-title{ font-size:18px;}
-.feature-info .feature-descr{ font-size:14px;}
+.feature-info .feature-title{ font-size:18px; }
+.feature-info .feature-descr{ font-size:14px; }
 
 .shadow1 {
   box-shadow: 0 2px 2px rgba(0,0,0,0.25);
@@ -249,7 +249,7 @@ h1,h2,h3 {
   width: 90px;
   height: 32px;
   padding: 2px;
-  font-size: 13px;
+  font-size: 12px;
   background-color: #008CBA;
   color: #fff;
   border: none;