updated api preview tabs style

2024-11-24 17:07:00 +02:00 · 2023-09-01 09:30:49 +03:00 · 2023-09-01 09:30:49 +03:00 · baacf4913b
commit baacf4913b
parent 8a94ccea42
19 changed files with 31 additions and 18 deletions
--- a/ui/src/components/collections/docs/AuthMethodsDocs.svelte
+++ b/ui/src/components/collections/docs/AuthMethodsDocs.svelte
@ -103,7 +103,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/AuthRefreshDocs.svelte
+++ b/ui/src/components/collections/docs/AuthRefreshDocs.svelte
@ -144,7 +144,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
+++ b/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
@ -240,7 +240,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/AuthWithPasswordDocs.svelte
+++ b/ui/src/components/collections/docs/AuthWithPasswordDocs.svelte
@ -203,7 +203,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/ConfirmEmailChangeDocs.svelte
+++ b/ui/src/components/collections/docs/ConfirmEmailChangeDocs.svelte
@ -115,7 +115,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/ConfirmPasswordResetDocs.svelte
+++ b/ui/src/components/collections/docs/ConfirmPasswordResetDocs.svelte
@ -129,7 +129,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/ConfirmVerificationDocs.svelte
+++ b/ui/src/components/collections/docs/ConfirmVerificationDocs.svelte
@ -103,7 +103,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/CreateApiDocs.svelte
+++ b/ui/src/components/collections/docs/CreateApiDocs.svelte
@ -319,7 +319,7 @@ await pb.collection('${collection?.name}').requestVerification('test@example.com

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/DeleteApiDocs.svelte
+++ b/ui/src/components/collections/docs/DeleteApiDocs.svelte
@ -119,7 +119,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/ListApiDocs.svelte
+++ b/ui/src/components/collections/docs/ListApiDocs.svelte
@ -242,7 +242,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                type="button"
--- a/ui/src/components/collections/docs/ListExternalAuthsDocs.svelte
+++ b/ui/src/components/collections/docs/ListExternalAuthsDocs.svelte
@ -155,7 +155,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/RequestEmailChangeDocs.svelte
+++ b/ui/src/components/collections/docs/RequestEmailChangeDocs.svelte
@ -122,7 +122,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/RequestPasswordResetDocs.svelte
+++ b/ui/src/components/collections/docs/RequestPasswordResetDocs.svelte
@ -97,7 +97,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/RequestVerificationDocs.svelte
+++ b/ui/src/components/collections/docs/RequestVerificationDocs.svelte
@ -97,7 +97,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/SdkTabs.svelte
+++ b/ui/src/components/collections/docs/SdkTabs.svelte
@ -33,7 +33,7 @@
 </script>

 <div class="tabs sdk-tabs {classes}">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each sdkExamples as example (example.language)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/UnlinkExternalAuthDocs.svelte
+++ b/ui/src/components/collections/docs/UnlinkExternalAuthDocs.svelte
@ -132,7 +132,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/UpdateApiDocs.svelte
+++ b/ui/src/components/collections/docs/UpdateApiDocs.svelte
@ -338,7 +338,7 @@ final record = await pb.collection('${collection?.name}').update('RECORD_ID', bo

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/components/collections/docs/ViewApiDocs.svelte
+++ b/ui/src/components/collections/docs/ViewApiDocs.svelte
@ -140,7 +140,7 @@

 <div class="section-title">Responses</div>
 <div class="tabs">
-    <div class="tabs-header compact left">
+    <div class="tabs-header compact glued left">
        {#each responses as response (response.code)}
            <button
                class="tab-item"
--- a/ui/src/scss/_tabs.scss
+++ b/ui/src/scss/_tabs.scss
@ -101,6 +101,19 @@ $tabContentAnimationSpeed: 0.2s;
        min-height: 30px;
        margin-bottom: var(--smSpacing);
    }
+    &.glued {
+        border: 0;
+        margin-bottom: -2px;
+        .tab-item {
+            &:after {
+                content: none;
+                display: none;
+            }
+            &.active {
+                background: var(--baseAlt1Color);
+            }
+        }
+    }
 }

 .tabs-content {