Skip to content

Commit fdd1a89

Browse files
mrin9mrin9
committed
updated docs
1 parent 736fa34 commit fdd1a89

File tree

4 files changed

+113
-37
lines changed

4 files changed

+113
-37
lines changed

‎docs/examples/themes.html‎

Lines changed: 93 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,47 @@
1212
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
1313
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
1414
<style>
15+
1516
.btn{
16-
width: 70px;
17-
height: 70px;
18-
background-color: #47AFE8;
19-
color: #fff;
17+
width: 48px;
18+
height: 48px;
19+
color: #444;
2020
font-size: 12px;
2121
display: block;
22-
border: none;
2322
margin: 2px;
24-
border-radius: 2px;
23+
border-radius: 4px;
2524
cursor:pointer;
2625
outline:none;
26+
font-size:30px;
27+
}
28+
.btn.normal {
29+
font-size:12px;
30+
width: 64px;
2731
}
28-
rapi-doc{
29-
width:100%;
32+
.side-nav{
33+
display:flex;
34+
margin: 2px;
35+
padding:2px;
36+
align-items: stretch;
37+
height:44px; cursor: pointer;
38+
border-radius:2px;
39+
background: #fff;
3040
}
41+
.dark{ background-color: #424242; color :#BBB; border: 2px solid #BBB;}
42+
.night{ background-color: #23282e; color :#aec2e0; border: 2px solid #aec2e0;}
43+
.mud{ background-color: #4f4544; color :#c3b8b7; border: 2px solid #c3b8b7;}
44+
.cofee{ background-color: #45403b; color :#ceb8a0; border: 2px solid #ceb8a0;}
45+
.forest{ background-color: #475153; color :#BDD6DB; border: 2px solid #BDD6DB;}
46+
.olive{ background-color: #393e40; color :#acc7c8; border: 2px solid #acc7c8;}
47+
.outerspace{ background-color: #3c4042; color :#CAD9E3; border: 2px solid #CAD9E3;}
48+
.ebony{ background-color: #3a3f4a; color :#dee3ec; border: 2px solid #dee3ec;}
49+
50+
.light{ background-color: #f0f0f0; color :#626262; border: 2px solid #626262; }
51+
.snow{ background-color: #ebebeb; color :#737373; border: 2px solid #737373; }
52+
.green{ background-color: #eaeee8; color :#557d39; border: 2px solid #557d39; }
53+
.blue{ background-color: #dde2e8; color :#315681; border: 2px solid #315681; }
54+
.beige{ background-color: #eee9de; color :#524627; border: 2px solid #524627; }
55+
3156
</style>
3257
<script type="text/javascript" src="../rapidoc-min.js"></script>
3358
<script>
@@ -47,6 +72,15 @@
4772

4873
function changeTheme(themeName){
4974
let docEl = getRapiDoc();
75+
docEl.setAttribute('show-header','');
76+
docEl.setAttribute('bg-color','');
77+
docEl.setAttribute('text-color','');
78+
docEl.setAttribute('nav-bg-color','');
79+
docEl.setAttribute('nav-text-color','');
80+
docEl.setAttribute('nav-hover-bg-color','');
81+
docEl.setAttribute('nav-hover-text-color','');
82+
docEl.setAttribute('nav-accent-color','');
83+
docEl.setAttribute('primary-color','');
5084
if (themeName === 'dark'){
5185
docEl.setAttribute('theme','dark');
5286
docEl.setAttribute('bg-color','#333');
@@ -69,7 +103,7 @@
69103
docEl.setAttribute('text-color','#ceb8a0');
70104
} else if (themeName === 'forest') {
71105
docEl.setAttribute('theme','dark');
72-
docEl.setAttribute('bg-color','#323b3d');
106+
docEl.setAttribute('bg-color','#384244');
73107
docEl.setAttribute('text-color','#BDD6DB');
74108
} else if (themeName === 'olive') {
75109
docEl.setAttribute('theme','dark');
@@ -96,10 +130,35 @@
96130
docEl.setAttribute('bg-color','#ecf1f7');
97131
docEl.setAttribute('text-color','#133863');
98132
} else if (themeName === 'beige') {
133+
docEl.setAttribute('show-header','true');
99134
docEl.setAttribute('theme','light');
100135
docEl.setAttribute('bg-color','#fdf8ed');
101136
docEl.setAttribute('text-color','#342809');
102-
}
137+
} else if (themeName === 'purplenav') {
138+
getRapiDoc().setAttribute('render-style', 'read' );
139+
docEl.setAttribute('show-header','false');
140+
docEl.setAttribute('theme','light');
141+
docEl.setAttribute('bg-color','');
142+
docEl.setAttribute('text-color','');
143+
docEl.setAttribute('nav-bg-color','#4130c5');
144+
docEl.setAttribute('nav-text-color','#b3ace7');
145+
docEl.setAttribute('nav-hover-bg-color','#5444ca');
146+
docEl.setAttribute('nav-hover-text-color','#fff');
147+
docEl.setAttribute('nav-accent-color','#d9d5f3');
148+
docEl.setAttribute('primary-color','#5444ca');
149+
} else if (themeName === 'graynav') {
150+
getRapiDoc().setAttribute('render-style', 'read' );
151+
docEl.setAttribute('show-header','false');
152+
docEl.setAttribute('theme','light');
153+
docEl.setAttribute('bg-color','');
154+
docEl.setAttribute('text-color','');
155+
docEl.setAttribute('nav-bg-color','#3f4d67');
156+
docEl.setAttribute('nav-text-color','#a9b7d0');
157+
docEl.setAttribute('nav-hover-bg-color','#333f54');
158+
docEl.setAttribute('nav-hover-text-color','#fff');
159+
docEl.setAttribute('nav-accent-color','#f44236');
160+
docEl.setAttribute('primary-color','#3f4d67');
161+
}
103162

104163
}
105164

@@ -123,28 +182,31 @@
123182
</head>
124183
<body>
125184
<rapi-doc id="thedoc" spec-url="https://petstore.swagger.io/v2/swagger.json">
126-
<div style="display:flex; margin:10px; justify-content:center;flex-wrap: wrap;">
127-
<button class="btn" onclick="changeSpec()">API Spec</button>
128-
<button class="btn" onclick="changeRenderStyle()">Render Style</button>
129-
<button class="btn" onclick="changeSchemaStyle()">Schema Style</button>
130-
131-
<div style="width:40px;"> </div>
132-
<button class="btn" onclick="changeTheme('dark')">Dark</button>
133-
<button class="btn" onclick="changeTheme('night')">Night</button>
134-
<button class="btn" onclick="changeTheme('mud')">Mud</button>
135-
<button class="btn" onclick="changeTheme('cofee')">Cofee</button>
136-
<button class="btn" onclick="changeTheme('forest')">Forest</button>
137-
<button class="btn" onclick="changeTheme('olive')">Olive</button>
138-
<button class="btn" onclick="changeTheme('outerspace')">Outer Space</button>
139-
<button class="btn" onclick="changeTheme('ebony')">Ebony</button>
140-
141-
<div style="width:40px;"> </div>
142-
<button class="btn" onclick="changeTheme('light')">Light</button>
143-
<button class="btn" onclick="changeTheme('snow')">Snow</button>
144-
<button class="btn" onclick="changeTheme('green')"> Green</button>
145-
<button class="btn" onclick="changeTheme('blue')"> Blue</button>
146-
<button class="btn" onclick="changeTheme('beige')"> Beige</button>
185+
<div style="display:flex; margin:10px; justify-content:center;flex-wrap: wrap;background-color:rgba(128, 128, 128, 0.1); flex:1; padding:30px;">
186+
<button class="btn normal" onclick="changeRenderStyle()">Render Style</button>
187+
<button class="btn normal" onclick="changeSchemaStyle()">Schema Style</button>
188+
<button class="btn dark" onclick="changeTheme('dark')">&#9782; </button>
189+
<button class="btn night" onclick="changeTheme('night')"> &#9782; </button>
190+
<button class="btn mud" onclick="changeTheme('mud')"> &#9782; </button>
191+
<button class="btn cofee" onclick="changeTheme('cofee')"> &#9782; </button>
192+
<button class="btn forest" onclick="changeTheme('forest')"> &#9782; </button>
193+
<button class="btn olive" onclick="changeTheme('olive')"> &#9782; </button>
194+
<button class="btn outerspace" onclick="changeTheme('outerspace')"> &#9782; </button>
195+
<button class="btn ebony" onclick="changeTheme('ebony')"> &#9782; </button>
147196

197+
<button class="btn light" onclick="changeTheme('light')"> &#9782; </button>
198+
<button class="btn snow" onclick="changeTheme('snow')"> &#9782; </button>
199+
<button class="btn green" onclick="changeTheme('green')"> &#9782; </button>
200+
<button class="btn blue" onclick="changeTheme('blue')"> &#9782; </button>
201+
<button class="btn beige" onclick="changeTheme('beige')"> &#9782; </button>
202+
<div class = 'side-nav' style="background:#4130c5" onclick="changeTheme('purplenav')" >
203+
<div style='width:20px;'></div>
204+
<div style='background: #fff; padding:0px 4px; font-size:30px; color:#444'> &#9782;</div>
205+
</div>
206+
<div class = 'side-nav' style="background:#3f4d67" onclick="changeTheme('graynav')" >
207+
<div style='width:20px;'></div>
208+
<div style='background: #fff; padding:0px 4px; font-size:30px; color:#444'> &#9782;</div>
209+
</div>
148210
</div>
149211
</rapi-doc>
150212
</body>

‎docs/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ <h1 class="banner-title">Web Component for OpenAPI Spec Viewing</h1>
180180
</div>
181181

182182
<div class="section" style="flex-direction: column;align-items: center;">
183-
<h2 style="text-align: center;"> Comes with two themes - Dark and Light</h2>
183+
<h2 style="text-align: center;"> Crteate your own themes with simplicity </h2>
184184

185185
<div style="display:flex;justify-content: space-around;">
186186
<div id="slider" class="beer-slider shadow3" data-beer-label="">
@@ -190,6 +190,10 @@ <h2 style="text-align: center;"> Comes with two themes - Dark and Light</h2>
190190
</div>
191191
</div>
192192
</div>
193+
<div style='margin-top:32px; font-size:20px'>
194+
<a href="./examples/themes.html"> Click for demo showing various color schemes </a>
195+
</div>
196+
193197
</div>
194198
<div class="section">
195199
<div class="section-left section-text">

‎docs/list.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,23 +66,29 @@
6666
<tr> <th style="text-align:left">List of Examples</th></tr>
6767
<tr>
6868
<td class="mono-bold">
69-
<a href="./examples/example100.html"> Playground </a>
70-
<span class="gray descr"> Shows various things that can be controlled using script </span>
69+
<a href="./examples/example1.html"> Basic Usage </a> </td>
7170
</td>
7271
</tr>
7372
<tr>
7473
<td class="mono-bold">
75-
<a href="./examples/example1.html"> Basic Usage </a> </td>
74+
<a href="./examples/example2.html"> Dark Theme </a>
7675
</td>
7776
</tr>
7877
<tr>
7978
<td class="mono-bold">
80-
<a href="./examples/example2.html"> Dark Theme </a>
79+
<a href="./examples/read-mode.html"> Read Mode </a>
8180
</td>
8281
</tr>
8382
<tr>
8483
<td class="mono-bold">
85-
<a href="./examples/read-mode.html"> Read Mode </a>
84+
<a href="./examples/example100.html"> Playground </a>
85+
<span class="gray descr"> Shows various things that can be controlled using script </span>
86+
</td>
87+
</tr>
88+
<tr>
89+
<td class="mono-bold">
90+
<a href="./examples/themes.html"> Theme Playground </a>
91+
<span class="gray descr"> Play with various color schemes </span>
8692
</td>
8793
</tr>
8894
<tr> <td class="mono-bold">

‎docs/welcome.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,10 @@ <h2 style="text-align: center;"> Crteate your own themes with simplicity </h2>
190190
</div>
191191
</div>
192192
</div>
193+
<div style='margin-top:32px; font-size:20px'>
194+
<a href="./examples/themes.html"> Click for demo showing various color schemes </a>
195+
</div>
196+
193197
</div>
194198
<div class="section">
195199
<div class="section-left section-text">

0 commit comments

Comments
 (0)