Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-07 05:20:32 +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

4
demo/index.html
View File

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

64
demo/main.css
View File

@ -19,21 +19,55 @@ nav header {
float: left; float: left;
margin-left: 20px; margin-left: 20px;
font-size: 25px; font-size: 25px;
color: white; color: #00329F;
position: absolute; font-weight: bold;
} }
nav input { nav input {
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
max-width: 500px; 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 { nav button {
border: 1px solid #FFFFFF; background-color: #fff;
cursor: pointer; color: #333;
color: white;
background-color: #21476D;
padding: 2px 10px; 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 { nav {
@ -41,8 +75,24 @@ nav {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
background-color: #053361; background-color: white;
border-bottom: 1px solid #ccc;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 1; 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() { ;(function() {
'use strict'; 'use strict';
var loadButton = document.getElementById('load-button'); var schemaUrlForm = document.getElementById('schema-url-form');
var schemaUrlInput = document.getElementById('schema-url-input'); var schemaUrlInput = document.getElementById('schema-url-input');
loadButton.addEventListener('click', function() { schemaUrlForm.addEventListener('submit', function(event) {
Redoc.init(schemaUrlInput.value); Redoc.init(schemaUrlInput.value);
event.preventDefault();
}) })
})(); })();