Skip to content

Upgrade web UI from Bootstrap 3 to Bootstrap 5.3 #76

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.

Sign up for GitHub

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

Merged
renecannao merged 1 commit into from
Apr 8, 2026
Merged

Upgrade web UI from Bootstrap 3 to Bootstrap 5.3 #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 65 additions & 6 deletions resources/public/css/orchestrator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
/* ── Modern theme variables ─────────────────────────────────────────── */
:root {
--orc-primary: #0d6efd;
--orc-primary-dark: #0a58ca;
--orc-bg: #f4f6f9;
--orc-card-bg: #ffffff;
--orc-card-border: #dee2e6;
--orc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
--orc-navbar-bg: #212529;
--orc-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────────── */
.hiddenMessage {
display: none;
}
Expand All @@ -7,9 +21,57 @@
}

body {
background-color: #f7f7f7;
font-family: var(--orc-font-family);
background-color: var(--orc-bg);
background-repeat: repeat;
padding-top: 50px;
padding-top: 56px;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar {
background-color: var(--orc-navbar-bg) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
min-height: auto;
margin-bottom: 0;
}

.navbar .navbar-brand {
font-weight: 600;
letter-spacing: 0.02em;
}

/* ── Card-based panels ──────────────────────────────────────────────── */
.card {
background-color: var(--orc-card-bg);
border: 1px solid var(--orc-card-border);
border-radius: 0.5rem;
box-shadow: var(--orc-card-shadow);
margin-bottom: 1rem;
}

.card-header {
background-color: #f8f9fa;
border-bottom: 1px solid var(--orc-card-border);
font-weight: 600;
}

/* ── Bootstrap 3 → 5 compatibility helpers ──────────────────────────── */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

.input-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}

.btn-xs {
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
border-radius: 0.2rem;
}

.glyphicon {
font-family: "Glyphicons Halflings";
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Bootstrap 5 has dropped support for Glyphicons. Since the local Bootstrap 3 assets (including font files) are being removed in this PR, these icons will likely fail to render unless the font files are manually included or the project migrates to an alternative like Bootstrap Icons or FontAwesome. If you intend to keep using Glyphicons, ensure the font files are still accessible and correctly referenced via @font-face.

}

.orchestrator-brand {
Expand All @@ -35,9 +97,6 @@ body {
overflow-y: auto;
}

.navbar {
margin-bottom: 0px;
}

.navbar-nav > li > .dropdown {
padding-bottom: 15px;
Expand Down Expand Up @@ -408,7 +467,7 @@ body {
padding: 5px 9px;
}

#node_modal .begin-downtime .panel-body {
#node_modal .begin-downtime .card-body {
background-color: #d9edf7;
}

Expand Down
6 changes: 3 additions & 3 deletions resources/templates/about.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
About
</div>
<div class="panel-body">
<div class="card-body">
<p>
<strong>Orchestrator</strong> is a MySQL replication topology management and visualization tool, allowing for:
<ul>
Expand Down
32 changes: 16 additions & 16 deletions resources/templates/agent.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
</style>

<div class="container" id="agent">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
Agent: <strong><span data-agent="hostname"></span></strong>
</div>
<div class="panel-body">
<div class="card-body">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
Info
</div>
<table class="table">
Expand Down Expand Up @@ -48,8 +48,8 @@
</div>
</div>
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
Snapshots
</div>
<table class="table">
Expand Down Expand Up @@ -91,9 +91,9 @@
</div>
</div>

<div class="panel-body">
<div class="active_seeds panel panel-default">
<div class="panel-heading">
<div class="card-body">
<div class="active_seeds card">
<div class="card-header">
Active seeds
</div>
<table class="table table-condensed table-bordered table-striped ">
Expand All @@ -111,9 +111,9 @@
</table>
</div>
</div>
<div class="panel-body">
<div class="seed_states panel panel-default">
<div class="panel-heading">
<div class="card-body">
<div class="seed_states card">
<div class="card-header">
Active seed states
</div>
<table class="table table-condensed table-bordered table-striped ">
Expand All @@ -128,9 +128,9 @@
</table>
</div>
</div>
<div class="panel-body">
<div class="recent_seeds panel panel-default">
<div class="panel-heading">
<div class="card-body">
<div class="recent_seeds card">
<div class="card-header">
Recent seeds
</div>
<table class="table table-condensed table-bordered table-striped">
Expand Down
16 changes: 8 additions & 8 deletions resources/templates/agent_seed_details.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
</style>

<div class="container" id="seed">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
Seed <strong><span data-seed="id"></span></strong>
</div>
<div class="panel-body">
<div class="seed_details panel panel-default">
<div class="panel-heading">
<div class="card-body">
<div class="seed_details card">
<div class="card-header">
Seed details
</div>
<table class="table table-condensed table-bordered table-striped ">
Expand All @@ -27,9 +27,9 @@
</table>
</div>
</div>
<div class="panel-body">
<div class="seed_states panel panel-default">
<div class="panel-heading">
<div class="card-body">
<div class="seed_states card">
<div class="card-header">
Seed states
</div>
<table class="table table-condensed table-bordered table-striped ">
Expand Down
4 changes: 2 additions & 2 deletions resources/templates/audit.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container" id="audit">
<div class="panel panel-default">
<div class="panel-body">
<div class="card">
<div class="card-body">
<ul class="pager">
<li class="previous small"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
<li class="next small"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
Expand Down
4 changes: 2 additions & 2 deletions resources/templates/audit_failure_detection.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container" id="audit">
<div class="panel panel-default">
<div class="panel-body">
<div class="card">
<div class="card-body">
<ul class="pager">
<li class="previous small"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
<li class="next small"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
Expand Down
4 changes: 2 additions & 2 deletions resources/templates/audit_recovery.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container" id="audit">
<div class="panel panel-default">
<div class="panel-body">
<div class="card">
<div class="card-body">
<ul class="pager">
<li class="previous small"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
<li class="next small"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
Expand Down
6 changes: 3 additions & 3 deletions resources/templates/discover.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
Discover a new instance
</div>
<div class="panel-body">
<div class="card-body">
<div class="">
<p>
Enter a MySQL hostname and a port. <i>Orchestrator</i> will try and resolve the CNAME.
Expand Down
6 changes: 3 additions & 3 deletions resources/templates/faq.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
FAQ
</div>
<div class="panel-body">
<div class="card-body">
<p>
<strong>Who should use orchestrator?</strong>
</p>
Expand Down
Loading
Loading