API version selector redesigned (#2024)

Azure · Dec 1, 2022 · f30cc70 · f30cc70
1 parent aa3a332
commit f30cc70
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/src/components/apis/details-of-api/ko/runtime/api-details.html b/src/components/apis/details-of-api/ko/runtime/api-details.html
@@ -6,8 +6,17 @@
     <!-- ko ifnot: working -->
     <div class="flex-item flex-grow animation-fade-in col-md-auto">
         <!-- ko if: api -->
-        <h1 class="text-wrap">
+        <h1 class="flex align-items-center text-wrap">
             <span data-bind="text: api().displayName"></span>
+            <!-- ko if: versionApis().length > 0 -->
+            <label class="select-badge">
+                <select id="apiVersions" data-bind="options: versionApis, optionsValue: 'name', optionsText: 'apiVersion', value: currentApiVersion">
+                </select>
+                <span class="arrow flex align-items-center justify-content-center">
+                    <i class="icon-emb icon-emb-chevron-down"></i>
+                </span>
+            </label>
+            <!-- /ko -->
             <!-- ko if: api().type === 'soap' -->
             <span class="badge badge-soap">SOAP</span>
             <!-- /ko -->
@@ -21,12 +30,6 @@ <h1 class="text-wrap">
 
         <div class="form-inline">
             <div class="form-group">
-                <!-- ko if: versionApis().length > 0 -->
-                <label for="apiVersions">API version: </label>
-                <select id="apiVersions" class="form-control"
-                    data-bind="options: versionApis, optionsValue: 'name', optionsText: 'apiVersion', value: currentApiVersion">
-                </select>
-                <!-- /ko -->
                 <!-- ko if: api().type !== 'websocket' && api().type !== 'graphql' -->
                 <select id="apiDefinitions" class="form-control" aria-label="API definitions"
                     data-bind="value: downloadSelected">

diff --git a/src/themes/website/styles/flex.scss b/src/themes/website/styles/flex.scss
@@ -32,6 +32,10 @@
     width: 100%;
 }
 
+.justify-content-center {
+    justify-content: center;
+}
+
 .justify-content-end {
     justify-content: flex-end !important;
 }

diff --git a/src/themes/website/styles/forms.scss b/src/themes/website/styles/forms.scss
@@ -249,3 +249,41 @@ input[type=search] {
         right: 0;
     }
 }
+
+.select-badge {
+    margin: 0 .5em;
+    font-family: $font-family-base;
+    font-size: 13px;
+
+    select {
+        padding: .625em 1em;
+        padding-right: 2.75em;
+        border: solid white 1px;
+        border-radius: .875em;
+        background: #D9D9D9;
+        outline: none;
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+    }
+
+    .arrow {
+        position: absolute;
+        width: 2em;
+        height: 100%;
+        top: 1px;
+        right: 2px;
+        border-left: solid white 1px;
+        pointer-events: none;
+        /*
+        .icon-emb {
+            transition: transform .5s ease;
+        }
+         */
+    }
+    /*
+    select:focus + .arrow .icon-emb {
+        transform: rotate(-180deg);
+    }
+     */
+}