minimal update to styling

This commit is contained in:
Minasokoni
2017-06-21 08:22:48 -07:00
parent 2e40f59cad
commit 73df4922f4
4 changed files with 36 additions and 11 deletions

1
dist/index.html vendored
View File

@@ -71,6 +71,7 @@
<script src="./swagger-ui-standalone-preset.js"> </script> <script src="./swagger-ui-standalone-preset.js"> </script>
<script> <script>
window.onload = function() { window.onload = function() {
// Build a system // Build a system
const ui = SwaggerUIBundle({ const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json", url: "http://petstore.swagger.io/v2/swagger.json",

View File

@@ -83,7 +83,13 @@ export default class Topbar extends React.Component {
rows.push(<option key={i} value={link.url} selected={i===this.state.selectedIndex}>{link.name}</option>) rows.push(<option key={i} value={link.url} selected={i===this.state.selectedIndex}>{link.name}</option>)
}) })
control.push(<select disabled={isLoading} onChange={ this.onUrlSelect }>{rows}</select>) control.push(
<label className="select-label" htmlFor="select"><span>Select a URL</span>
<select id="select" disabled={isLoading} onChange={ this.onUrlSelect }>
{rows}
</select>
</label>
)
} }
else { else {
formOnSubmit = this.downloadUrl formOnSubmit = this.downloadUrl

View File

@@ -1,11 +1,10 @@
.swagger-ui { .swagger-ui {
.topbar { .topbar {
background-color: #89bf04; background-color: #89bf04;
} }
.topbar-wrapper { .topbar-wrapper {
padding: 0.7em padding: 0.7em;
} }
.topbar-logo__img { .topbar-logo__img {

View File

@@ -6,7 +6,6 @@
.topbar-wrapper .topbar-wrapper
{ {
display: flex; display: flex;
align-items: center; align-items: center;
} }
a a
@@ -15,13 +14,13 @@
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center;
flex: 1;
max-width: 300px; max-width: 300px;
text-decoration: none; text-decoration: none;
flex: 1;
align-items: center;
@include text_headline(#fff); @include text_headline(#fff);
span span
@@ -48,14 +47,34 @@
outline: none; outline: none;
} }
.select-label
{
display: flex;
align-items: center;
width: 100%;
max-width: 600px;
span
{
flex: 1;
padding: 0 10px 0 0;
text-align: right;
}
select select
{ {
min-width: 200px; flex: 2;
width: 100%;
border: 2px solid #547f00; border: 2px solid #547f00;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
}
.download-url-button .download-url-button
{ {