adding flex box design to the examples (#52)

72pulses · Jul 18, 2019 · 355bfbe · 355bfbe
1 parent f696131
commit 355bfbe
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 146 deletions.
diff --git a/app/assets/stylesheets/apidoco/custom.css b/app/assets/stylesheets/apidoco/custom.css
@@ -40,3 +40,23 @@ h3 {
   margin-top: 0;
 }
 
+.container-flex {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+
+.container-flex .description {
+  flex: 0 0 65%;
+}
+
+.container-flex .examples {
+  position: absolute;
+  left: 70%;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+}
+
+
diff --git a/app/assets/stylesheets/apidoco/helpers.css b/app/assets/stylesheets/apidoco/helpers.css
@@ -11,7 +11,14 @@
   margin-top: 10px !important;
 }
 
+.mb-50 {
+  margin-bottom: 50px !important;
+}
+
 .padding-10 {
   padding: 10px !important;
 }
 
+.padding-15 {
+  padding: 15px !important;
+}
diff --git a/app/assets/stylesheets/apidoco/simple-sidebar.css b/app/assets/stylesheets/apidoco/simple-sidebar.css
@@ -19,16 +19,16 @@
 }
 
 #wrapper.toggled {
-    padding-left: 275px;
+    padding-left: 225px;
 }
 
 #sidebar-wrapper {
     z-index: 1000;
     position: fixed;
-    left: 275px;
+    left: 225px;
     width: 0;
     height: 100%;
-    margin-left: -275px;
+    margin-left: -225px;
     overflow-y: auto;
     background: #364150;
     -webkit-transition: all 0.5s ease;
@@ -39,7 +39,7 @@
 }
 
 #wrapper.toggled #sidebar-wrapper {
-    width: 275px;
+    width: 225px;
 }
 
 #page-content-wrapper {
@@ -50,7 +50,7 @@
 
 #wrapper.toggled #page-content-wrapper {
     position: absolute;
-    margin-right: -275px;
+    margin-right: -225px;
 }
 
 /* Sidebar Styles */
@@ -105,15 +105,15 @@
 
 @media(min-width:768px) {
     #wrapper {
-        padding-left: 275px;
+        padding-left: 225px;
     }
 
     #wrapper.toggled {
         padding-left: 0;
     }
 
     #sidebar-wrapper {
-        width: 275px;
+        width: 225px;
     }
 
     #wrapper.toggled #sidebar-wrapper {

diff --git a/app/views/apidoco/apis/_examples.html b/app/views/apidoco/apis/_examples.html
@@ -0,0 +1,70 @@
+<div class="section-block" ng-if="x.examples && x.examples.length > 0">
+  <h3 class="block-title">Examples</h5>
+  <div class="rows mb-50" ng-repeat="example in x.examples">
+    <table class="table table-bordered">
+      <!-- Request Headers -->
+      <tbody ng-if="example.request_headers">
+        <tr>
+          <th>Request Headers</th>
+        </tr>
+        <tr>
+          <td class="padding-15">
+            <div class="btn-group pull-right" role="group">
+              <button class="btn btn-default btn-sm" ng-click="viewRaw(example.request_headers)">Raw</button>
+              <button class="btn btn-default btn-sm" ngclipboard data-clipboard-text="{{example.request_headers}}">Copy</button>
+            </div>
+            <div jq-json-viewer data="example.request_headers"></div>
+          </td>
+        </tr>
+      </tbody>
+
+      <!-- Request -->
+      <tbody ng-if="example.request">
+        <tr>
+          <th>Request</th>
+        </tr>
+        <tr>
+          <td class="padding-15">
+            <div class="btn-group pull-right" role="group">
+            <button class="btn btn-default btn-sm" ng-click="viewRaw(example.request)">Raw</button>
+            <button class="btn btn-default btn-sm" ngclipboard data-clipboard-text="{{example.request}}">Copy</button>
+          </div>
+          <div jq-json-viewer data="example.request"></div>
+          </td>
+        </tr>
+      </tbody>
+
+      <!-- Response Headers -->
+      <tbody ng-if="example.response_headers">
+        <tr>
+          <th>Response Headers</th>
+        </tr>
+        <tr>
+          <td class="padding-15">
+            <div class="btn-group pull-right" role="group">
+            <button class="btn btn-default btn-sm" ng-click="viewRaw(example.response_headers)">Raw</button>
+            <button class="btn btn-default btn-sm" ngclipboard data-clipboard-text="{{example.response_headers}}">Copy</button>
+          </div>
+          <div jq-json-viewer data="example.response_headers"></div>
+          </td>
+        </tr>
+      </tbody>
+
+      <!-- Response -->
+      <tbody ng-if="example.response">
+        <tr>
+          <th>Response</th>
+        </tr>
+        <tr>
+          <td class="padding-15">
+            <div class="btn-group pull-right" role="group">
+            <button class="btn btn-default btn-sm" ng-click="viewRaw(example.response)">Raw</button>
+            <button class="btn btn-default btn-sm" ngclipboard data-clipboard-text="{{example.response}}">Copy</button>
+          </div>
+          <div jq-json-viewer data="example.response"></div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>