Merge branch '302-make-the-api-docs-compatible-with-smaller-screens' into 'develop'

Resolve "Make the API docs compatible with smaller screens"

Closes #302

See merge request bramw/baserow!171

changelog.md

@@ -20,6 +20,7 @@
 * Refactored handler get_* methods so that they never check for permissions.
 * Made it possible to configure SMTP settings via environment variables.
 * Added field name to the public REST API docs.
+* Made the public REST API docs compatible with smaller screens.
 
 ## Released (2021-02-04)
 

web-frontend/modules/core/assets/scss/components/api_docs.scss

@@ -12,6 +12,10 @@
     z-index: $api-docs-background-z-index;
 
     @include absolute(0, 0, 0, auto);
+
+    @media screen and (max-width: $api-docs-breakpoint) {
+      display: none;
+    }
   }
 }
 
@@ -98,16 +102,30 @@
 .api-docs__item {
   display: flex;
   margin: 40px 0;
+
+  @media screen and (max-width: $api-docs-breakpoint) {
+    display: block;
+  }
 }
 
 .api-docs__left {
   width: 50%;
   padding: 0 34px;
+
+  @media screen and (max-width: $api-docs-breakpoint) {
+    width: 100%;
+  }
 }
 
 .api-docs__right {
   width: 50%;
   padding: 0 20px;
+
+  @media screen and (max-width: $api-docs-breakpoint) {
+    width: 100%;
+    padding: 0 34px;
+    margin: 20px 0;
+  }
 }
 
 .api-docs__content {

web-frontend/modules/core/assets/scss/components/api_docs/example.scss

@@ -3,6 +3,10 @@
   font-size: 18px;
   font-weight: 700;
   margin: 20px 0;
+
+  @media screen and (max-width: $api-docs-breakpoint) {
+    color: $color-primary-900;
+  }
 }
 
 .api-docs__example {

web-frontend/modules/core/assets/scss/variables.scss

@@ -94,6 +94,7 @@ $api-docs-databases-z-index: 5 !default;
 $api-docs-nav-z-index: 3 !default;
 $api-docs-body-z-index: 2 !default;
 $api-docs-background-z-index: 1 !default;
+$api-docs-breakpoint: 1100px !default;
 
 // file field modal variables
 $file-field-modal-head-height: 62px !default;