Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TASK-6839 - Table result/Group by buttons should have horizontal margin between them #971

Merged
merged 7 commits into from
Sep 23, 2024
2 changes: 1 addition & 1 deletion src/webcomponents/commons/opencga-browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/webcomponents/variant/variant-browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading