Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-01-30 17:44:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve demo page sticky header

Browse Source
This commit is contained in:
Roman Hotsiy 2016-01-23 00:00:28 +02:00
parent 0fb88e99c2
commit 10bb3a5ce3
3 changed files with 64 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/index.html
View File

@ -8,8 +8,10 @@
<body>
<nav>
<header> ReDoc </header>
<input id="schema-url-input" value='swagger.json'>
<button id="load-button"> Explore </button>
<form id="schema-url-form">
<input id="schema-url-input" value='swagger.json'>
<button type="submit"> Explore </button>
</form>
</nav>
<redoc scroll-y-offset="body > nav" spec-url='swagger.json'>

64
demo/main.css
View File

@ -19,21 +19,55 @@ nav header {
float: left;
margin-left: 20px;
font-size: 25px;
color: white;
position: absolute;
color: #00329F;
font-weight: bold;
}
nav input {
width: 50%;
box-sizing: border-box;
max-width: 500px;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
nav input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
nav button {
border: 1px solid #FFFFFF;
cursor: pointer;
color: white;
background-color: #21476D;
background-color: #fff;
color: #333;
padding: 2px 10px;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #ccc;
border-radius: 4px;
}
nav button:hover {
background-color: #e6e6e6;
border-color: #adadad;
}
nav button:active {
background-color: #d4d4d4;
border-color: #8c8c8c;
}
nav {
@ -41,8 +75,24 @@ nav {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #053361;
background-color: white;
border-bottom: 1px solid #ccc;
position: fixed;
top: 0;
z-index: 1;
}
@media (min-width: 1000px) {
nav header {
position: absolute;
}
}
@media (max-width: 500px) {
nav input {
width: 70%;
}
nav header {
display: none;
}
}

5
demo/main.js
View File

@ -1,9 +1,10 @@
;(function() {
'use strict';
var loadButton = document.getElementById('load-button');
var schemaUrlForm = document.getElementById('schema-url-form');
var schemaUrlInput = document.getElementById('schema-url-input');
loadButton.addEventListener('click', function() {
schemaUrlForm.addEventListener('submit', function(event) {
Redoc.init(schemaUrlInput.value);
event.preventDefault();
})
})();