Merge pull request #971 from opencb/TASK-6839

TASK-6839 - Table result/Group by buttons should have horizontal margin between them
opencb · Sep 23, 2024 · 5d3c226 · 5d3c226
2 parents 2f38744 + 0a8fa44
commit 5d3c226
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/webcomponents/commons/opencga-browser.js b/src/webcomponents/commons/opencga-browser.js
@@ -318,7 +318,7 @@ export default class OpencgaBrowser extends LitElement {
 
     renderButtonViews() {
         return html `
-            <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
+            <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                 ${(this._config.views || []).map(view => html`
                     <button
                         type="button"

diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -387,7 +387,8 @@ class VariantInterpreterBrowserTemplate extends LitElement {
             <button class="${`btn btn-success ${this.activeView === id ? "active" : ""}`}" @click="${() => this.onChangeView(id)}">
                 <i class="${`fa fa-${icon} icon-padding`}" aria-hidden="true"></i>
                 <strong>${title}</strong>
-            </button>`;
+            </button>
+        `;
     }
 
     render() {
@@ -435,7 +436,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
 
                 <div class="flex-grow-1">
                     <!-- View toolbar -->
-                    <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
+                    <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                         ${this.renderViewButton("table", "Table Result", "table")}
                         ${!this.settings?.hideGenomeBrowser ? this.renderViewButton("genome-browser", "Genome Browser", "dna") : nothing}
                     </div>

diff --git a/src/webcomponents/variant/variant-browser.js b/src/webcomponents/variant/variant-browser.js
@@ -346,24 +346,24 @@ export default class VariantBrowser extends LitElement {
 
                 <div class="col-md-10">
                     <!-- TAB buttons -->
-                    <div class="content-pills mb-3" role="toolbar" aria-label="toolbar">
+                    <div class="d-flex gap-1 mb-3" role="toolbar" aria-label="toolbar">
                         <button
                             type="button"
-                            class="${`btn btn-success ${this.activeTab === "table-tab" ? "active" : ""} content-pills`}"
+                            class="${`btn btn-success ${this.activeTab === "table-tab" ? "active" : ""}`}"
                             @click="${() => this.changeView("table-tab")}">
                             <i class="fa fa-table icon-padding" aria-hidden="true"></i>
                             <strong>Table Result</strong>
                         </button>
                         <button
                             type="button"
-                            class="${`btn btn-success ${this.activeTab === "facet-tab" ? "active" : ""} content-pills`}"
+                            class="${`btn btn-success ${this.activeTab === "facet-tab" ? "active" : ""}`}"
                             @click="${() => this.changeView("facet-tab")}">
                             <i class="fas fa-chart-bar icon-padding" aria-hidden="true"></i>
                             <strong>Aggregation Stats</strong>
                         </button>
                         <button
                             type="button"
-                            class="${`btn btn-success ${this.activeTab === "genome-tab" ? "active" : ""} content-pills`}"
+                            class="${`btn btn-success ${this.activeTab === "genome-tab" ? "active" : ""}`}"
                             @click="${() => this.changeView("genome-tab")}">
                             <i class="fas fa-dna icon-padding" aria-hidden="true"></i>
                             <strong>Genome Browser</strong>