Merge pull request #3746 from racedale/master

shockey · web-flow · commit 353fd00b0899 · 2017-10-20T18:12:51.000-07:00
Support for mobile view on Swagger UI
diff --git a/dev-helpers/index.html b/dev-helpers/index.html
@@ -3,6 +3,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Swagger UI</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
diff --git a/src/style/_form.scss b/src/style/_form.scss
@@ -30,6 +30,10 @@ select
 .opblock-body select
 {
     min-width: 230px;
+    @media (max-width: 768px)
+    {
+        min-width: 180px;
+    }
 }
 
 label
@@ -56,6 +60,10 @@ input[type=file]
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     background: #fff;
+    @media (max-width: 768px) {
+      max-width: 175px;
+    }
+
 
     &.invalid
     {
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
@@ -250,6 +250,10 @@
     .opblock-summary-path__deprecated
     {
         font-size: 16px;
+        @media (max-width: 768px) {
+          font-size: 12px;
+        }
+
 
         display: flex;
         flex: 0 3 auto;
diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss
@@ -1,6 +1,6 @@
 .topbar
 {
-    padding: 8px 30px;
+    padding: 8px 0;
 
     background-color: #89bf04;
     .topbar-wrapper
@@ -39,7 +39,6 @@
         input[type=text]
         {
             width: 100%;
-            min-width: 350px;
             margin: 0;
 
             border: 2px solid #547f00;
@@ -84,7 +83,7 @@
             font-size: 16px;
             font-weight: bold;
 
-            padding: 4px 40px;
+            padding: 4px 30px;
 
             border: none;
             border-radius: 0 4px 4px 0;

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,10 @@ select`
`30`	`30`	`.opblock-body select`
`31`	`31`	`{`
`32`	`32`	`min-width: 230px;`
	`33`	`+ @media (max-width: 768px)`
	`34`	`+ {`
	`35`	`+ min-width: 180px;`
	`36`	`+ }`
`33`	`37`	`}`
`34`	`38`
`35`	`39`	`label`
`@@ -56,6 +60,10 @@ input[type=file]`
`56`	`60`	`border: 1px solid #d9d9d9;`
`57`	`61`	`border-radius: 4px;`
`58`	`62`	`background: #fff;`
	`63`	`+ @media (max-width: 768px) {`
	`64`	`+ max-width: 175px;`
	`65`	`+ }`
	`66`	`+`
`59`	`67`
`60`	`68`	`&.invalid`
`61`	`69`	`{`