Fix Safari display issues

Author: jcenturion

dist/scripts/api-console.js

@@ -409,12 +409,18 @@
           }
         });
 
+        $scope.sortMethods = function (method) {
+          return method.method;
+        };
+
         $scope.showResource = function ($event, $index) {
           var $this             = jQuery($event.currentTarget);
           var $resource         = $this.closest('.raml-console-resource');
           var $inactiveElements = jQuery('.raml-console-tab').add('.raml-console-resource').add('li');
           var methodInfo        = $scope.resource.methods[$index];
 
+          console.log($scope.resource.methods);
+
           $scope.methodInfo               = methodInfo;
           $scope.responseInfo             = getResponseInfo();
           $scope.context                  = new RAML.Services.TryIt.Context($scope.raml.baseUriParameters, $scope.resource, $scope.methodInfo);
@@ -5031,7 +5037,7 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
 
   $templateCache.put('directives/method-list.tpl.html',
     "<div class=\"raml-console-tab-list\">\n" +
-    "  <div class=\"raml-console-tab\" ng-repeat=\"method in resource.methods\" ng-click=\"showResource($event, $index)\">\n" +
+    "  <div class=\"raml-console-tab\" ng-repeat=\"method in resource.methods | orderBy:sortMethods\" ng-click=\"showResource($event, $index)\">\n" +
     "    <span class=\"raml-console-tab-label raml-console-tab-{{method.method}}\">{{method.method.toLocaleUpperCase()}}</span>\n" +
     "  </div>\n" +
     "</div>\n"

dist/styles/api-console-dark-theme.css

@@ -1421,12 +1421,15 @@ th {
 .raml-console-tab-list {
   right: 9px;
   position: relative;
+  position: absolute;
   bottom: -1px;
   display: flex;
+  display: -webkit-flex;
   flex-grow: 1;
   flex-flow: row-reverse;
   align-self: flex-end;
   padding-left: 16px;
+  float: right;
 }
 
 @media only screen and (min-width: 600px) {
@@ -2574,6 +2577,7 @@ a.raml-console-resource-path-active {
 .raml-console-sidebar {
   width: 0;
   flex-shrink: 0;
+  -webkit-flex-shrink: 0;
   overflow: hidden;
   border-bottom-right-radius: 4px;
   border-left: 3px solid #12171f;

dist/styles/api-console-light-theme.css

@@ -1421,12 +1421,15 @@ th {
 .raml-console-tab-list {
   right: 9px;
   position: relative;
+  position: absolute;
   bottom: -1px;
   display: flex;
+  display: -webkit-flex;
   flex-grow: 1;
   flex-flow: row-reverse;
   align-self: flex-end;
   padding-left: 16px;
+  float: right;
 }
 
 @media only screen and (min-width: 600px) {
@@ -2574,6 +2577,7 @@ a.raml-console-resource-path-active {
 .raml-console-sidebar {
   width: 0;
   flex-shrink: 0;
+  -webkit-flex-shrink: 0;
   overflow: hidden;
   border-bottom-right-radius: 4px;
   border-left: 3px solid #d6d7d9;

src/app/directives/method-list.js

@@ -82,12 +82,18 @@
           }
         });
 
+        $scope.sortMethods = function (method) {
+          return method.method;
+        };
+
         $scope.showResource = function ($event, $index) {
           var $this             = jQuery($event.currentTarget);
           var $resource         = $this.closest('.raml-console-resource');
           var $inactiveElements = jQuery('.raml-console-tab').add('.raml-console-resource').add('li');
           var methodInfo        = $scope.resource.methods[$index];
 
+          console.log($scope.resource.methods);
+
           $scope.methodInfo               = methodInfo;
           $scope.responseInfo             = getResponseInfo();
           $scope.context                  = new RAML.Services.TryIt.Context($scope.raml.baseUriParameters, $scope.resource, $scope.methodInfo);

src/app/directives/method-list.tpl.html

@@ -1,5 +1,5 @@
 <div class="raml-console-tab-list">
-  <div class="raml-console-tab" ng-repeat="method in resource.methods" ng-click="showResource($event, $index)">
+  <div class="raml-console-tab" ng-repeat="method in resource.methods | orderBy:sortMethods" ng-click="showResource($event, $index)">
     <span class="raml-console-tab-label raml-console-tab-{{method.method}}">{{method.method.toLocaleUpperCase()}}</span>
   </div>
 </div>

src/scss/_sidebar.scss

@@ -1,6 +1,7 @@
 .sidebar {
   width: 0;
   flex-shrink: 0;
+  -webkit-flex-shrink: 0;
 
   overflow: hidden;
   border-bottom-right-radius: 4px;

src/scss/_tab.scss

@@ -14,13 +14,16 @@
 .tab-list {
   right: 9px;
   position: relative;
+  position: absolute;
   bottom: -1px;
 
   display: flex;
+  display: -webkit-flex;
   flex-grow: 1;
   flex-flow: row-reverse;
   align-self: flex-end;
   padding-left: 16px;
+  float:right;
 
   @media only screen and (min-width: $medium-screen) {
     padding-left: 24px;